{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "toggle-group",
  "title": "toggle-group",
  "description": "toggle-group",
  "dependencies": [
    "react-aria-components",
    "tailwind-merge",
    "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 { twMerge } from 'tailwind-merge'\nimport { tv } from 'tailwind-variants'\nimport { cx } from '@/lib/primitive'\n\ntype ToggleSize = 'xs' | 'sm' | 'md' | 'lg' | 'sq-xs' | 'sq-sm' | 'sq-md' | 'sq-lg'\n\ninterface 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\ninterface ToggleGroupProps extends ToggleButtonGroupProps {\n  size?: ToggleSize\n  isCircle?: boolean\n}\n\nconst 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        className={cx(\n          [\n            '[--toggle-group-radius:var(--radius-lg)] [--toggle-gutter:--spacing(0.5)]',\n            '[--toggle-fg:var(--color-fg)] [--toggle-selected-bg:var(--color-primary)] [--toggle-selected-fg:var(--color-primary-fg)]',\n            '[--toggle-focused-bg:var(--color-secondary)] [--toggle-focused-fg:var(--color-secondary-fg)]',\n            '[--toggle-hover-bg:var(--toggle-focused-bg)] [--toggle-hover-fg:var(--toggle-focused-fg)]',\n            '[--toggle-icon:color-mix(in_oklab,var(--toggle-focused-fg)_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\ninterface 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-fg) 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-fg/20 bg-(--toggle-selected-bg) text-(--toggle-selected-fg) [--toggle-icon:var(--primary-fg)] hover:bg-(--toggle-selected-bg)/90',\n    },\n    isFocused: {\n      true: 'not-selected:bg-(--toggle-focused-bg) not-selected:text-(--toggle-focused-fg) not-selected:[--toggle-icon:var(--toggle-focused-fg)]',\n    },\n    isFocusVisible: {\n      true: 'inset-ring inset-ring-muted-fg/20',\n    },\n    isHovered: {\n      true: 'enabled:not-selected:bg-(--toggle-hover-bg) enabled:not-selected:text-(--toggle-hover-fg) enabled:not-selected:[--toggle-icon:var(--toggle-hover-fg)]',\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-fg)/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\nconst 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        twMerge(\n          toggleGroupItemStyles({\n            ...renderProps,\n            size,\n            orientation,\n            selectionMode,\n            className,\n          })\n        )\n      )}\n      {...props}\n    />\n  )\n}\n\nexport type { ToggleGroupItemProps, ToggleGroupProps }\nexport { ToggleGroup, ToggleGroupItem }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}