{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "segments",
  "title": "Segments",
  "description": "A segmented switch whose thumb travels to the picked option.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json",
    "https://ui.ndekocode.dev/r/toggle-group.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/ui/segments.tsx",
      "content": "'use client';\n\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/ndeko/ui/toggle-group';\n\nexport type Segment<Value extends string> = {\n  value: Value;\n  label: string;\n};\n\nconst THUMB =\n  'bg-card shadow-[0_1px_2px_rgb(0_0_0/0.08)] hairline-ring ring-foreground/10 dark:bg-foreground/[0.09] dark:ring-foreground/15';\n\ntype SegmentsProps<Value extends string> = {\n  value: Value;\n  segments: readonly Segment<Value>[];\n  onValueChange: (value: Value) => void;\n  label: string;\n  className?: string;\n  itemClassName?: string;\n};\n\nexport function Segments<Value extends string>({\n  value,\n  segments,\n  onValueChange,\n  label,\n  className,\n  itemClassName,\n}: SegmentsProps<Value>) {\n  const pressedValues = [value];\n\n  function changeValue(nextValues: unknown[]) {\n    const [nextValue] = nextValues;\n    const segment = segments.find((candidate) => candidate.value === nextValue);\n    if (segment) {\n      onValueChange(segment.value);\n    }\n  }\n\n  return (\n    <ToggleGroup\n      aria-label={label}\n      value={pressedValues}\n      onValueChange={changeValue}\n      travel\n      size='sm'\n      indicatorClassName={THUMB}\n      className={cn('bg-foreground/[0.05] rounded-lg p-0.5', className)}\n    >\n      {segments.map((segment) => (\n        <ToggleGroupItem\n          key={segment.value}\n          value={segment.value}\n          className={cn('h-6 flex-1 rounded-md px-2.5 text-xs', itemClassName)}\n        >\n          {segment.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  );\n}\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "primitives",
    "ai"
  ],
  "type": "registry:ui"
}