{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "radix-toggle-group",
  "type": "registry:ui",
  "title": "Radix Toggle Group",
  "description": "A set of two-state buttons that can be toggled on or off.",
  "dependencies": [
    "motion",
    "radix-ui",
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/radix/toggle-group/index.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';\nimport {\n  type HTMLMotionProps,\n  type Transition,\n  motion,\n  AnimatePresence,\n} from 'motion/react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\nconst toggleVariants = cva(\n  \"cursor-pointer inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:text-muted-foreground text-accent-foreground transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none focus:outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      type: {\n        single: '',\n        multiple: 'data-[state=on]:bg-accent',\n      },\n      variant: {\n        default: 'bg-transparent',\n        outline: 'border border-input bg-transparent shadow-xs',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\ntype ToggleGroupContextProps = VariantProps<typeof toggleVariants> & {\n  type?: 'single' | 'multiple';\n  transition?: Transition;\n  activeClassName?: string;\n  globalId: string;\n};\n\nconst ToggleGroupContext = React.createContext<\n  ToggleGroupContextProps | undefined\n>(undefined);\n\nconst useToggleGroup = (): ToggleGroupContextProps => {\n  const context = React.useContext(ToggleGroupContext);\n  if (!context) {\n    throw new Error('useToggleGroup must be used within a ToggleGroup');\n  }\n  return context;\n};\n\ntype ToggleGroupProps = React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  Omit<VariantProps<typeof toggleVariants>, 'type'> & {\n    transition?: Transition;\n    activeClassName?: string;\n  };\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  transition = { type: 'spring', bounce: 0, stiffness: 200, damping: 25 },\n  activeClassName,\n  ...props\n}: ToggleGroupProps) {\n  const globalId = React.useId();\n\n  return (\n    <ToggleGroupContext.Provider\n      value={{\n        variant,\n        size,\n        type: props.type,\n        transition,\n        activeClassName,\n        globalId,\n      }}\n    >\n      <ToggleGroupPrimitive.Root\n        data-slot=\"toggle-group\"\n        className={cn(\n          'flex items-center justify-center gap-1 relative',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </ToggleGroupPrimitive.Root>\n    </ToggleGroupContext.Provider>\n  );\n}\n\ntype ToggleGroupItemProps = React.ComponentProps<\n  typeof ToggleGroupPrimitive.Item\n> &\n  Omit<VariantProps<typeof toggleVariants>, 'type'> & {\n    children?: React.ReactNode;\n    buttonProps?: HTMLMotionProps<'button'>;\n    spanProps?: React.ComponentProps<'span'>;\n  };\n\nfunction ToggleGroupItem({\n  ref,\n  className,\n  children,\n  variant,\n  size,\n  buttonProps,\n  spanProps,\n  ...props\n}: ToggleGroupItemProps) {\n  const {\n    activeClassName,\n    transition,\n    type,\n    variant: contextVariant,\n    size: contextSize,\n    globalId,\n  } = useToggleGroup();\n  const itemRef = React.useRef<HTMLButtonElement | null>(null);\n  React.useImperativeHandle(ref, () => itemRef.current as HTMLButtonElement);\n  const [isActive, setIsActive] = React.useState(false);\n\n  React.useEffect(() => {\n    const node = itemRef.current;\n    if (!node) return;\n    const observer = new MutationObserver(() => {\n      setIsActive(node.getAttribute('data-state') === 'on');\n    });\n    observer.observe(node, {\n      attributes: true,\n      attributeFilter: ['data-state'],\n    });\n    setIsActive(node.getAttribute('data-state') === 'on');\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <ToggleGroupPrimitive.Item ref={itemRef} {...props} asChild>\n      <motion.button\n        data-slot=\"toggle-group-item\"\n        initial={{ scale: 1 }}\n        whileTap={{ scale: 0.9 }}\n        {...buttonProps}\n        className={cn('relative', buttonProps?.className)}\n      >\n        <span\n          {...spanProps}\n          data-state={isActive ? 'on' : 'off'}\n          className={cn(\n            'relative z-[1]',\n            toggleVariants({\n              variant: variant || contextVariant,\n              size: size || contextSize,\n              type,\n            }),\n            className,\n            spanProps?.className,\n          )}\n        >\n          {children}\n        </span>\n\n        <AnimatePresence initial={false}>\n          {isActive && type === 'single' && (\n            <motion.span\n              layoutId={`active-toggle-group-item-${globalId}`}\n              data-slot=\"active-toggle-group-item\"\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={transition}\n              className={cn(\n                'absolute inset-0 z-0 rounded-md bg-muted',\n                activeClassName,\n              )}\n            />\n          )}\n        </AnimatePresence>\n      </motion.button>\n    </ToggleGroupPrimitive.Item>\n  );\n}\n\nexport {\n  ToggleGroup,\n  ToggleGroupItem,\n  type ToggleGroupProps,\n  type ToggleGroupItemProps,\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/radix/toggle-group.tsx"
    }
  ]
}