{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "Toggles that share one value.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json",
    "https://ui.ndekocode.dev/r/toggle.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/ui/toggle-group.tsx",
      "content": "'use client';\n\nimport { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group';\nimport { type VariantProps } from 'class-variance-authority';\nimport { motion, useReducedMotion, type Transition } from 'motion/react';\nimport { createContext, useContext, useId } from 'react';\n\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport {\n  Toggle,\n  type ToggleProps,\n  toggleVariants,\n} from '@/registry/ndeko/ui/toggle';\n\ntype ToggleGroupStyle = VariantProps<typeof toggleVariants>;\n\ntype ToggleVariant = ToggleGroupStyle['variant'];\n\nconst ToggleGroupStyleContext = createContext<ToggleGroupStyle>({\n  variant: 'default',\n  size: 'default',\n});\n\ntype TravelSettings = {\n  layoutId: string;\n  indicatorClassName?: string;\n};\n\nconst ToggleGroupTravelContext = createContext<TravelSettings | undefined>(\n  undefined\n);\n\nconst TRAVEL_SPRING: Transition = { type: 'spring', bounce: 0, duration: 0.3 };\n\nconst NO_TRAVEL: Transition = { duration: 0 };\n\nconst INDICATOR =\n  'pointer-events-none absolute inset-0 -z-10 rounded-[inherit]';\n\nconst DEFAULT_TINT = 'bg-foreground/[0.07]';\n\nconst OUTLINE_TINT = 'bg-foreground/[0.05] dark:bg-foreground/[0.09]';\n\nconst TRAVELLING_ITEM =\n  'relative data-pressed:bg-transparent dark:data-pressed:bg-transparent';\n\nfunction tintOf(variant: ToggleVariant) {\n  if (variant === 'outline') {\n    return OUTLINE_TINT;\n  }\n  return DEFAULT_TINT;\n}\n\nfunction travelOf(shouldReduceMotion: boolean | null) {\n  if (shouldReduceMotion) {\n    return NO_TRAVEL;\n  }\n  return TRAVEL_SPRING;\n}\n\nfunction travelSettingsOf(\n  shouldTravel: boolean,\n  layoutId: string,\n  indicatorClassName: string | undefined\n): TravelSettings | undefined {\n  if (shouldTravel) {\n    return { layoutId, indicatorClassName };\n  }\n  return undefined;\n}\n\ntype ToggleGroupProps = Omit<ToggleGroupPrimitive.Props, 'className'> &\n  ToggleGroupStyle & {\n    className?: string;\n    /** Slides one shared indicator to the pressed item. For groups where one item is pressed at a time; ignored with `multiple`. */\n    travel?: boolean;\n    /** Classes of the travelling indicator, for a raised thumb instead of the flat tint. */\n    indicatorClassName?: string;\n  };\n\nfunction ToggleGroup({\n  className,\n  variant = 'default',\n  size = 'default',\n  travel = false,\n  indicatorClassName,\n  multiple,\n  children,\n  ...props\n}: ToggleGroupProps) {\n  const indicatorId = useId();\n  const isSinglePress = !multiple;\n  const shouldTravel = travel && isSinglePress;\n  const travelSettings = travelSettingsOf(\n    shouldTravel,\n    indicatorId,\n    indicatorClassName\n  );\n\n  return (\n    <ToggleGroupPrimitive\n      data-slot='toggle-group'\n      data-variant={variant}\n      multiple={multiple}\n      className={cn(\n        'inline-flex w-fit items-center gap-0.5 data-[orientation=vertical]:flex-col',\n        shouldTravel && 'isolate',\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupStyleContext.Provider value={{ variant, size }}>\n        <ToggleGroupTravelContext.Provider value={travelSettings}>\n          {children}\n        </ToggleGroupTravelContext.Provider>\n      </ToggleGroupStyleContext.Provider>\n    </ToggleGroupPrimitive>\n  );\n}\n\nfunction TravellingIndicator({\n  settings,\n  variant,\n}: {\n  settings: TravelSettings;\n  variant: ToggleVariant;\n}) {\n  const shouldReduceMotion = useReducedMotion();\n\n  return (\n    <motion.span\n      data-slot='toggle-group-indicator'\n      layoutId={settings.layoutId}\n      aria-hidden='true'\n      transition={travelOf(shouldReduceMotion)}\n      className={cn(INDICATOR, tintOf(variant), settings.indicatorClassName)}\n    />\n  );\n}\n\nfunction ToggleGroupItem({\n  variant,\n  size,\n  className,\n  render,\n  ...props\n}: ToggleProps) {\n  const groupStyle = useContext(ToggleGroupStyleContext);\n  const travelSettings = useContext(ToggleGroupTravelContext);\n  const itemVariant = variant ?? groupStyle.variant;\n  const itemSize = size ?? groupStyle.size;\n  const hasOwnRender = render !== undefined;\n\n  if (travelSettings === undefined || hasOwnRender) {\n    return (\n      <Toggle\n        data-slot='toggle-group-item'\n        variant={itemVariant}\n        size={itemSize}\n        className={className}\n        render={render}\n        {...props}\n      />\n    );\n  }\n\n  return (\n    <Toggle\n      data-slot='toggle-group-item'\n      variant={itemVariant}\n      size={itemSize}\n      className={cn(TRAVELLING_ITEM, className)}\n      render={(renderProps, state) => (\n        <button {...renderProps}>\n          {state.pressed && (\n            <TravellingIndicator\n              settings={travelSettings}\n              variant={itemVariant}\n            />\n          )}\n          {renderProps.children}\n        </button>\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { ToggleGroup, ToggleGroupItem };\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "primitives"
  ],
  "type": "registry:ui"
}