{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "toggle-group",
  "title": "Toggle Group",
  "author": "Matthew Blode",
  "description": "A set of toggle buttons where one or more can be active.",
  "dependencies": ["@base-ui/react"],
  "registryDependencies": ["toggle"],
  "files": [
    {
      "path": "ui/toggle-group.tsx",
      "content": "\"use client\";\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\";\nimport { ToggleGroup as ToggleGroupPrimitive } from \"@base-ui/react/toggle-group\";\nimport type { VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\nimport { toggleVariants } from \"@/components/ui/toggle\";\n\nconst ToggleGroupContext = createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number;\n  }\n>({\n  size: \"default\",\n  spacing: 0,\n  variant: \"default\",\n});\n\ntype ToggleGroupValue = string | string[];\n\ntype ToggleGroupProps = Omit<\n  React.ComponentProps<typeof ToggleGroupPrimitive>,\n  \"defaultValue\" | \"multiple\" | \"onValueChange\" | \"value\"\n> &\n  VariantProps<typeof toggleVariants> & {\n    type?: \"single\" | \"multiple\";\n    spacing?: number;\n    value?: ToggleGroupValue;\n    defaultValue?: ToggleGroupValue;\n    onValueChange?: (value: ToggleGroupValue) => void;\n    multiple?: boolean;\n  };\n\nconst normalizeToggleGroupValue = (\n  value: ToggleGroupValue | undefined,\n): readonly string[] | undefined => {\n  if (value === undefined) {\n    return undefined;\n  }\n\n  if (Array.isArray(value)) {\n    return value;\n  }\n\n  return value === \"\" ? [] : [value];\n};\n\nconst ToggleGroup = ({\n  className,\n  defaultValue,\n  multiple,\n  onValueChange,\n  type,\n  variant,\n  size,\n  spacing = 0,\n  value,\n  children,\n  ...props\n}: ToggleGroupProps) => {\n  const resolvedMultiple = type ? type === \"multiple\" : (multiple ?? false);\n  const contextValue = useMemo(() => ({ size, spacing, variant }), [size, spacing, variant]);\n\n  return (\n    <ToggleGroupPrimitive\n      className={cn(\n        \"group/toggle-group flex w-fit items-center gap-[--spacing(var(--gap))] rounded-md data-[spacing=default]:data-[variant=outline]:shadow-xs\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"toggle-group\"\n      data-spacing={spacing}\n      data-variant={variant}\n      defaultValue={normalizeToggleGroupValue(defaultValue)}\n      multiple={resolvedMultiple}\n      onValueChange={(nextValue) => {\n        if (!onValueChange) {\n          return;\n        }\n\n        if (resolvedMultiple) {\n          onValueChange(nextValue);\n          return;\n        }\n\n        onValueChange(nextValue[0] ?? \"\");\n      }}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      value={normalizeToggleGroupValue(value)}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={contextValue}>{children}</ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive>\n  );\n};\n\nconst ToggleGroupItem = ({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive> & VariantProps<typeof toggleVariants>) => {\n  const context = useContext(ToggleGroupContext);\n\n  return (\n    <TogglePrimitive\n      className={cn(\n        toggleVariants({\n          size: context.size || size,\n          variant: context.variant || variant,\n        }),\n        \"w-auto min-w-0 shrink-0 px-3 focus:z-10 focus-visible:z-10\",\n        \"data-[spacing=0]:data-[variant=outline]:border-l-0 data-[spacing=0]:rounded-none data-[spacing=0]:shadow-none data-[spacing=0]:last:rounded-r-md data-[spacing=0]:data-[variant=outline]:first:border-l data-[spacing=0]:first:rounded-l-md\",\n        className,\n      )}\n      data-size={context.size || size}\n      data-slot=\"toggle-group-item\"\n      data-spacing={context.spacing}\n      data-variant={context.variant || variant}\n      {...props}\n    >\n      {children}\n    </TogglePrimitive>\n  );\n};\n\nexport { ToggleGroup, ToggleGroupItem };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}