{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "toggle",
  "title": "toggle",
  "description": "toggle",
  "dependencies": [
    "react-aria-components",
    "tailwind-merge",
    "tailwind-variants"
  ],
  "files": [
    {
      "path": "src/components/ui/toggle.tsx",
      "content": "'use client'\n\nimport { composeRenderProps } from 'react-aria-components/composeRenderProps'\nimport { ToggleButton, type ToggleButtonProps } from 'react-aria-components/ToggleButton'\nimport { twMerge } from 'tailwind-merge'\nimport { tv, type VariantProps } from 'tailwind-variants'\n\nexport const toggleStyles = tv({\n  base: [\n    '[--toggle-icon-active:var(--secondary-fg)] [--toggle-icon:color-mix(in_oklab,var(--secondary-fg)_50%,var(--secondary))]',\n    'relative isolate inline-flex items-center justify-center border font-medium',\n    'focus-visible:outline focus-visible:outline-offset-2 focus-visible:ring-2 focus-visible:ring-offset-3 focus-visible:ring-offset-bg',\n    '*:[svg]:-mx-0.5 *:[svg]:my-0.5 *:[svg]:shrink-0 *:[svg]:self-center *:[svg]:text-(--toggle-icon) sm:*:[svg]:my-1',\n    'focus-visible:*:[svg]:text-(--toggle-icon-active)',\n    'selected:*:[svg]:text-(--toggle-icon-active)',\n    'hover:*:[svg]:text-(--toggle-icon-active)',\n    'forced-colors:[--toggle-icon:ButtonText] forced-colors:hover:[--toggle-icon:ButtonText] *:[svg]:-mx-0.5 *:[svg]:shrink-0 *:[svg]:self-center *:[svg]:text-(--toggle-icon) pressed:*:[svg]:text-(--toggle-icon-active) hover:*:[svg]:text-(--toggle-icon-active)/90 focus-visible:*:[svg]:text-(--toggle-icon-active)/80',\n    'forced-colors:[--toggle-icon:ButtonText] forced-colors:hover:[--toggle-icon:ButtonText]',\n  ],\n  variants: {\n    intent: {\n      outline: [\n        'bg-transparent selected:bg-secondary outline-secondary-fg ring-secondary-fg/25 hover:bg-secondary',\n      ],\n      plain: [\n        'border-transparent bg-transparent selected:bg-secondary outline-secondary-fg ring-secondary-fg/25 hover:bg-secondary',\n      ],\n    },\n    size: {\n      xs: [\n        'min-h-8 gap-x-1.5 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] text-sm sm:min-h-7 sm:px-2 sm:py-[calc(--spacing(1.5)-1px)] sm:text-xs/4',\n        '*:[svg]:-mx-px *:[svg]:size-3.5 sm:*:[svg]:size-3',\n      ],\n      sm: [\n        'min-h-9 gap-x-1.5 px-3 py-[calc(--spacing(2)-1px)] sm:min-h-8 sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] sm:text-sm/5',\n        '*:[svg]:size-4.5 sm:*:[svg]:size-4',\n      ],\n      md: [\n        'min-h-10 gap-x-2 px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:min-h-9 sm:px-3 sm:py-[calc(--spacing(1.5)-1px)] sm:text-sm/6',\n        '*:[svg]:size-5 sm:*:[svg]:size-4',\n      ],\n      lg: [\n        'min-h-10 gap-x-2 px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(3)-1px)] sm:min-h-9 sm:px-3 sm:py-[calc(--spacing(1.5)-1px)] sm:text-sm/7',\n        '*:[svg]:size-5 sm:*:[svg]:size-4.5',\n      ],\n      'sq-xs': ['touch-target size-8 shrink-0 sm:size-7', '*:[svg]:size-3.5 sm:*:[svg]:size-3'],\n      'sq-sm': ['touch-target size-10 shrink-0 sm:size-8', '*:[svg]:size-4.5 sm:*:[svg]:size-4'],\n      'sq-md': ['touch-target size-11 shrink-0 sm:size-9', '*:[svg]:size-5 sm:*:[svg]:size-4.5'],\n      'sq-lg': ['touch-target size-12 shrink-0 sm:size-10', '*:[svg]:size-6 sm:*:[svg]:size-5'],\n    },\n    isCircle: {\n      true: 'rounded-full',\n      false: 'rounded-[calc(var(--radius-lg)-1px)]',\n    },\n    isDisabled: {\n      true: 'border-0 opacity-50 forced-colors:text-[GrayText]',\n    },\n  },\n  defaultVariants: {\n    intent: 'plain',\n    size: 'md',\n    isCircle: false,\n  },\n})\n\nexport interface ToggleProps extends ToggleButtonProps, VariantProps<typeof toggleStyles> {\n  ref?: React.Ref<HTMLButtonElement>\n}\nexport function Toggle({ className, size, intent, isCircle, ref, ...props }: ToggleProps) {\n  return (\n    <ToggleButton\n      ref={ref}\n      className={composeRenderProps(className, (className, renderProps) =>\n        twMerge(\n          toggleStyles({\n            ...renderProps,\n            isCircle,\n            size,\n            intent,\n            className,\n          })\n        )\n      )}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}