{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "toggle-group",
  "title": "toggle-group",
  "description": "toggle-group",
  "dependencies": [
    "react-aria-components",
    "cn",
    "tailwind-variants"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive"
  ],
  "files": [
    {
      "path": "src/components/ui/toggle-group.tsx",
      "content": "\"use client\"\n\nimport { createContext, use } from \"react\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport { ToggleButton, type ToggleButtonProps } from \"react-aria-components/ToggleButton\"\nimport {\n  ToggleButtonGroup,\n  type ToggleButtonGroupProps,\n} from \"react-aria-components/ToggleButtonGroup\"\nimport { cn } from \"cn\"\nimport { tv } from \"tailwind-variants\"\nimport { cx } from \"@/lib/primitive\"\n\nexport type ToggleSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"sq-xs\" | \"sq-sm\" | \"sq-md\" | \"sq-lg\"\n\nexport interface ToggleGroupContextValue extends Pick<\n  ToggleButtonGroupProps,\n  \"selectionMode\" | \"orientation\"\n> {\n  size?: ToggleSize\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue>({\n  size: \"md\",\n  selectionMode: \"single\",\n  orientation: \"horizontal\",\n})\n\nconst useToggleGroupContext = () => use(ToggleGroupContext)\n\nexport interface ToggleGroupProps extends ToggleButtonGroupProps {\n  size?: ToggleSize\n  isCircle?: boolean\n}\n\nexport function ToggleGroup({\n  size = \"md\",\n  orientation = \"horizontal\",\n  selectionMode = \"single\",\n  isCircle,\n  className,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupContext.Provider value={{ size, selectionMode, orientation }}>\n      <ToggleButtonGroup\n        data-slot=\"control\"\n        selectionMode={selectionMode}\n        orientation={orientation}\n        className={cx(\n          [\n            \"[--toggle-group-radius:var(--radius-lg)] [--toggle-gutter:--spacing(0.5)]\",\n            \"[--toggle-foreground:var(--color-foreground)] [--toggle-selected-bg:var(--color-primary)] [--toggle-selected-foreground:var(--color-primary-foreground)]\",\n            \"[--toggle-focused-bg:var(--color-secondary)] [--toggle-focused-foreground:var(--color-secondary-foreground)]\",\n            \"[--toggle-hover-bg:var(--toggle-focused-bg)] [--toggle-hover-foreground:var(--toggle-focused-foreground)]\",\n            \"[--toggle-icon:color-mix(in_oklab,var(--toggle-focused-foreground)_50%,var(--toggle-focused-bg))]\",\n            \"inset-ring inset-ring-border inline-flex overflow-hidden p-(--toggle-gutter)\",\n            orientation === \"horizontal\" ? \"flex-row\" : \"flex-col\",\n            selectionMode === \"single\" ? \"gap-(--toggle-gutter)\" : \"gap-0\",\n            isCircle ? \"rounded-full\" : \"rounded-(--toggle-group-radius)\",\n            selectionMode === \"single\" &&\n              isCircle &&\n              \"*:data-[slot=toggle-group-item]:rounded-full\",\n            selectionMode === \"multiple\" &&\n              isCircle &&\n              \"*:data-[slot=toggle-group-item]:last:rounded-e-full *:data-[slot=toggle-group-item]:first:rounded-s-full\",\n          ],\n          className\n        )}\n        {...props}\n      />\n    </ToggleGroupContext.Provider>\n  )\n}\n\nexport interface ToggleGroupItemProps extends ToggleButtonProps {\n  size?: ToggleSize\n}\n\nconst toggleGroupItemStyles = tv({\n  base: [\n    \"relative isolate\",\n    \"inline-flex flex-row items-center font-medium text-(--toggle-foreground) outline-hidden\",\n    \"inset-ring inset-ring-transparent\",\n    \"*:[svg]:-mx-0.5 *:[svg]:shrink-0 *:[svg]:self-center *:[svg]:text-(--btn-icon) hover:*:[svg]:text-(--btn-icon-active)/90 focus-visible:*:[svg]:text-(--btn-icon-active)/80\",\n    \"forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]\",\n  ],\n  variants: {\n    orientation: {\n      horizontal: \"justify-center\",\n      vertical: \"justify-start\",\n    },\n    selectionMode: {\n      single: \"rounded-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]\",\n      multiple: \"rounded-none\",\n    },\n    size: {\n      xs: [\n        \"min-h-8 gap-x-1.5 px-2.5 py-1.5 text-sm sm:min-h-7 sm:px-2 sm:py-1.5 sm:text-xs/4\",\n        \"*:[svg]:-mx-px *:[svg]:size-3.5 sm:*:[svg]:size-3\",\n        \"*:data-[slot=loader]:-mx-px *:data-[slot=loader]:size-3.5 sm:*:data-[slot=loader]:size-3\",\n      ],\n      sm: [\n        \"min-h-9 gap-x-1.5 px-3 py-1.5 sm:min-h-8 sm:px-2.5 sm:py-1.5 sm:text-sm/5\",\n        \"*:[svg]:size-4.5 sm:*:[svg]:size-4\",\n        \"*:data-[slot=loader]:size-4.5 sm:*:data-[slot=loader]:size-4\",\n      ],\n      md: [\n        \"min-h-10 gap-x-2 px-3.5 py-2 sm:min-h-9 sm:px-3 sm:py-1.5 sm:text-sm/6\",\n        \"*:[svg]:size-5 sm:*:[svg]:size-4\",\n        \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4\",\n      ],\n      lg: [\n        \"min-h-11 gap-x-2 px-4 py-2.5 sm:min-h-10 sm:px-3.5 sm:py-2 sm:text-sm/6\",\n        \"*:[svg]:size-5 sm:*:[svg]:size-4.5\",\n        \"*:data-[slot=loader]:size-5 sm:*:data-[slot=loader]:size-4.5\",\n      ],\n      \"sq-xs\":\n        \"touch-target size-8 *:data-[slot=loader]:size-3.5 sm:size-7 sm:*:data-[slot=loader]:size-3 *:[svg]:size-3.5 sm:*:[svg]:size-3\",\n      \"sq-sm\":\n        \"touch-target size-9 *:data-[slot=loader]:size-4.5 sm:size-8 sm:*:data-[slot=loader]:size-4 *:[svg]:size-4.5 sm:*:[svg]:size-4\",\n      \"sq-md\":\n        \"touch-target size-10 *:data-[slot=loader]:size-5 sm:size-9 sm:*:data-[slot=loader]:size-4.5 *:[svg]:size-5 sm:*:[svg]:size-4.5\",\n      \"sq-lg\":\n        \"touch-target size-11 *:data-[slot=loader]:size-5 sm:size-10 sm:*:data-[slot=loader]:size-5 *:[svg]:size-5 sm:*:[svg]:size-5\",\n    },\n    isSelected: {\n      true: \"inset-ring-foreground/20 bg-(--toggle-selected-bg) text-(--toggle-selected-foreground) [--toggle-icon:var(--primary-foreground)] hover:bg-(--toggle-selected-bg)/90\",\n    },\n    isFocused: {\n      true: \"not-selected:bg-(--toggle-focused-bg) not-selected:text-(--toggle-focused-foreground) not-selected:[--toggle-icon:var(--toggle-focused-foreground)]\",\n    },\n    isFocusVisible: {\n      true: \"inset-ring inset-ring-muted-foreground/20\",\n    },\n    isHovered: {\n      true: \"enabled:not-selected:bg-(--toggle-hover-bg) enabled:not-selected:text-(--toggle-hover-foreground) enabled:not-selected:[--toggle-icon:var(--toggle-hover-foreground)]\",\n    },\n    isDisabled: {\n      true: \"opacity-50 forced-colors:text-[GrayText]\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n  compoundVariants: [\n    {\n      isSelected: true,\n      isFocusVisible: true,\n      className: \"inset-ring-(--toggle-selected-foreground)/50\",\n    },\n    {\n      selectionMode: \"multiple\",\n      orientation: \"horizontal\",\n      className:\n        \"not-first:-ms-px first:rounded-s-[calc(var(--toggle-group-radius)-var(--toggle-gutter))] last:rounded-e-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]\",\n    },\n    {\n      selectionMode: \"multiple\",\n      orientation: \"vertical\",\n      className:\n        \"not-first:-mt-px first:rounded-t-[calc(var(--toggle-group-radius)-var(--toggle-gutter))] last:rounded-b-[calc(var(--toggle-group-radius)-var(--toggle-gutter))]\",\n    },\n  ],\n})\n\nexport function ToggleGroupItem({ className, ...props }: ToggleGroupItemProps) {\n  const { size, selectionMode, orientation } = useToggleGroupContext()\n\n  return (\n    <ToggleButton\n      data-slot=\"toggle-group-item\"\n      className={composeRenderProps(className, (className, renderProps) =>\n        cn(\n          toggleGroupItemStyles({\n            ...renderProps,\n            size,\n            orientation,\n            selectionMode,\n            className,\n          })\n        )\n      )}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}