{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segmented-control",
  "title": "Segmented Control",
  "description": "Pick one of two to five options, as view tabs or a radio choice.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ikas/motion",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/segmented-control.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { LayoutGroup, motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { springOrInstant } from \"@/lib/motion\"\n\ntype SegmentedControlOption<T extends string> = {\n  value: T\n  label?: React.ReactNode\n  /** Count or status shown after the label, e.g. pending items. */\n  badge?: React.ReactNode\n  icon?: React.ReactNode\n  /** Required when the option is icon-only. */\n  \"aria-label\"?: string\n}\n\ntype SegmentedControlProps<T extends string> = {\n  options: SegmentedControlOption<T>[]\n  value: T\n  onValueChange: (value: T) => void\n  /** sm (32px) for card headers and toolbars, default (36px) for page level. */\n  size?: \"sm\" | \"default\"\n  /** tabs switches views (tablist), radio picks a value (radiogroup). */\n  mode?: \"tabs\" | \"radio\"\n  className?: string\n  \"aria-label\"?: string\n}\n\n/**\n * Single choice from 2–5 options. The active segment is a raised pill that\n * slides to the selection.\n */\nfunction SegmentedControl<T extends string>({\n  options,\n  value,\n  onValueChange,\n  size = \"default\",\n  mode = \"tabs\",\n  className,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  const id = React.useId()\n  const reduce = useReducedMotion()\n  const refs = React.useRef<(HTMLButtonElement | null)[]>([])\n\n  function onKeyDown(event: React.KeyboardEvent, index: number) {\n    const keys: Record<string, number> = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1 }\n    let next: number | undefined\n    if (event.key in keys) next = (index + keys[event.key] + options.length) % options.length\n    if (event.key === \"Home\") next = 0\n    if (event.key === \"End\") next = options.length - 1\n    if (next === undefined) return\n    event.preventDefault()\n    refs.current[next]?.focus()\n    onValueChange(options[next].value)\n  }\n\n  return (\n    <LayoutGroup id={id}>\n      <div\n        data-slot=\"segmented-control\"\n        role={mode === \"tabs\" ? \"tablist\" : \"radiogroup\"}\n        aria-label={ariaLabel}\n        className={cn(\n          \"inline-flex w-fit max-w-full items-center gap-0.5 overflow-x-auto rounded-lg bg-foreground/[0.05] p-[3px] shadow-[inset_0_1px_2px_0_var(--shade-1)] [scrollbar-width:none]\",\n          size === \"sm\" ? \"h-8\" : \"h-9\",\n          className\n        )}\n      >\n        {options.map((option, index) => {\n          const active = option.value === value\n          return (\n            <button\n              key={option.value}\n              ref={(node) => {\n                refs.current[index] = node\n              }}\n              type=\"button\"\n              role={mode === \"tabs\" ? \"tab\" : \"radio\"}\n              aria-selected={mode === \"tabs\" ? active : undefined}\n              aria-checked={mode === \"radio\" ? active : undefined}\n              aria-label={option[\"aria-label\"]}\n              tabIndex={active ? 0 : -1}\n              onClick={() => onValueChange(option.value)}\n              onKeyDown={(event) => onKeyDown(event, index)}\n              className={cn(\n                \"relative flex h-full shrink-0 items-center justify-center gap-1.5 rounded-md font-medium whitespace-nowrap transition-[color,scale] duration-150 ease-out outline-none select-none focus-visible:ring-3 focus-visible:ring-ring/30 active:scale-[0.98] motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n                size === \"sm\" ? \"px-2.5 text-[13px]\" : \"px-3 text-sm\",\n                !option.label && (size === \"sm\" ? \"w-[26px] px-0\" : \"w-[30px] px-0\"),\n                active ? \"text-foreground\" : \"text-muted-foreground hover:text-foreground\"\n              )}\n            >\n              {active && (\n                <motion.span\n                  layoutId=\"segmented-pill\"\n                  aria-hidden\n                  className=\"absolute inset-0 rounded-md bg-card shadow-raised\"\n                  transition={springOrInstant(reduce)}\n                />\n              )}\n              <span className=\"relative z-10 flex items-center gap-1.5\">\n                {option.icon}\n                {option.label}\n                {option.badge !== undefined && (\n                  <span\n                    className={cn(\n                      \"flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-semibold tabular-nums transition-colors\",\n                      active ? \"bg-foreground text-background\" : \"bg-foreground/10 text-muted-foreground\"\n                    )}\n                  >\n                    {option.badge}\n                  </span>\n                )}\n              </span>\n            </button>\n          )\n        })}\n      </div>\n    </LayoutGroup>\n  )\n}\n\nexport { SegmentedControl, type SegmentedControlProps, type SegmentedControlOption }\n",
      "type": "registry:component",
      "target": "@components/ikas/segmented-control.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/segmented-control",
  "categories": [
    "forms",
    "navigation"
  ],
  "type": "registry:component"
}