{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "description": "A shadcn-style toggle group component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react", "class-variance-authority"],
  "registryDependencies": ["separator"],
  "files": [
    {
      "path": "src/components/ui/toggle-group.tsx",
      "content": "\"use client\";\n\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@ark-ui/react/toggle-group\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { createContext, useContext } from \"react\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { cn } from \"@/lib/utils\";\n\nconst toggleGroupRootVariants = cva(\n  \"inline-flex w-fit gap-px rounded-lg border border-input bg-muted/40 p-0.5 data-[orientation=vertical]:flex-col\",\n);\n\nconst toggleGroupItemVariants = cva(\n  \"inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-sm outline-none transition-colors disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    defaultVariants: {\n      size: \"lg\",\n      variant: \"default\",\n    },\n    variants: {\n      size: {\n        default: \"h-9 min-w-9 px-3 sm:h-8 sm:min-w-8\",\n        lg: \"h-10 min-w-10 px-3.5 sm:h-9 sm:min-w-9\",\n        sm: \"h-8 min-w-8 px-2.5 sm:h-7 sm:min-w-7\",\n      },\n      variant: {\n        default:\n          \"border-transparent bg-transparent text-foreground hover:bg-accent data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-xs/5\",\n        outline:\n          \"border-input/70 bg-background text-foreground hover:bg-accent/60 data-[state=on]:border-primary/30 data-[state=on]:bg-primary/12 data-[state=on]:text-primary\",\n      },\n    },\n  },\n);\n\ntype ToggleGroupStyleContextValue = {\n  size?: VariantProps<typeof toggleGroupItemVariants>[\"size\"];\n  variant?: VariantProps<typeof toggleGroupItemVariants>[\"variant\"];\n};\n\nconst ToggleGroupStyleContext = createContext<ToggleGroupStyleContextValue>({\n  size: \"lg\",\n  variant: \"default\",\n});\n\nexport type ToggleGroupProps = ToggleGroupPrimitive.RootProps &\n  VariantProps<typeof toggleGroupItemVariants>;\n\nexport const ToggleGroup = ({\n  className,\n  size,\n  variant,\n  ...props\n}: ToggleGroupProps) => (\n  <ToggleGroupStyleContext.Provider value={{ size, variant }}>\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      className={cn(toggleGroupRootVariants(), className)}\n      {...props}\n    />\n  </ToggleGroupStyleContext.Provider>\n);\n\nexport type ToggleGroupItemProps = ToggleGroupPrimitive.ItemProps &\n  VariantProps<typeof toggleGroupItemVariants>;\n\nexport const ToggleGroupItem = ({\n  className,\n  size,\n  variant,\n  ...props\n}: ToggleGroupItemProps) => {\n  const group = useContext(ToggleGroupStyleContext);\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      className={cn(\n        toggleGroupItemVariants({\n          size: size ?? group.size,\n          variant: variant ?? group.variant,\n        }),\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport type ToggleGroupSeparatorProps = {\n  className?: string;\n  orientation?: \"horizontal\" | \"vertical\";\n};\n\nexport const ToggleGroupSeparator = ({\n  className,\n  orientation = \"vertical\",\n}: ToggleGroupSeparatorProps) => (\n  <Separator\n    className={cn(\"bg-input/70\", className)}\n    data-slot=\"toggle-group-separator\"\n    orientation={orientation}\n  />\n);\n\nexport const ToggleGroupContext = ToggleGroupPrimitive.Context;\nexport const ToggleGroupRootProvider = ToggleGroupPrimitive.RootProvider;\n\nexport type {\n  UseToggleGroupProps,\n  UseToggleGroupReturn,\n} from \"@ark-ui/react/toggle-group\";\nexport {\n  useToggleGroup,\n  useToggleGroupContext,\n} from \"@ark-ui/react/toggle-group\";\n",
      "type": "registry:ui",
      "target": "src/components/ui/toggle-group.tsx"
    }
  ],
  "type": "registry:ui"
}