{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-35",
  "title": "Segmented control",
  "description": "A full-width control whose indicator slides to the chosen option.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/toggle-group.json",
    "https://ui.ndekocode.dev/r/use-prefers-reduced-motion.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/button/button-35.tsx",
      "content": "'use client';\n\nimport { motion, type Transition } from 'motion/react';\nimport { useId, useState } from 'react';\n\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/ndeko/ui/toggle-group';\n\nconst OPTIONS = [\n  { value: 'left', label: 'Left' },\n  { value: 'center', label: 'Center' },\n  { value: 'right', label: 'Right' },\n];\n\nconst INDICATOR_TRANSITION: Transition = {\n  duration: 0.2,\n  ease: [0.2, 0, 0, 1],\n};\n\nconst INSTANT_TRANSITION: Transition = { duration: 0 };\n\nconst INDICATOR = [\n  'absolute inset-0 -z-10 rounded-md bg-card shadow-[0_1px_2px_rgb(0_0_0/0.08)] hairline-ring ring-foreground/10',\n  'dark:bg-foreground/[0.09] dark:ring-foreground/15',\n].join(' ');\n\nconst ITEM =\n  'relative h-7 flex-1 px-3 hover:bg-transparent data-pressed:bg-transparent';\n\nfunction indicatorTransitionOf(shouldReduceMotion: boolean | null) {\n  if (shouldReduceMotion) {\n    return INSTANT_TRANSITION;\n  }\n  return INDICATOR_TRANSITION;\n}\n\nexport default function Button35() {\n  const indicatorId = useId();\n  const [selection, setSelection] = useState(['left']);\n  const shouldReduceMotion = usePrefersReducedMotion();\n  const indicatorTransition = indicatorTransitionOf(shouldReduceMotion);\n\n  function selectOption(nextSelection: string[]) {\n    const hasSelection = nextSelection.length > 0;\n    if (hasSelection) {\n      setSelection(nextSelection);\n    }\n  }\n\n  return (\n    <ToggleGroup\n      value={selection}\n      onValueChange={selectOption}\n      aria-label='Text alignment'\n      className='bg-foreground/[0.05] isolate flex w-full rounded-lg p-0.5'\n    >\n      {OPTIONS.map((option) => {\n        const isSelected = selection.includes(option.value);\n\n        return (\n          <ToggleGroupItem\n            key={option.value}\n            value={option.value}\n            className={ITEM}\n          >\n            {isSelected && (\n              <motion.span\n                layoutId={indicatorId}\n                className={INDICATOR}\n                transition={indicatorTransition}\n              />\n            )}\n            {option.label}\n          </ToggleGroupItem>\n        );\n      })}\n    </ToggleGroup>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "button"
  ],
  "type": "registry:component"
}