{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-togglebutton",
  "type": "registry:ui",
  "title": "ToggleButton",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/ToggleButton.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  ToggleButton as RACToggleButton,\n  type ToggleButtonProps\n} from 'react-aria-components/ToggleButton';\nimport {composeRenderProps} from 'react-aria-components/composeRenderProps';\nimport {tv} from 'tailwind-variants';\nimport {focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nlet styles = tv({\n  extend: focusRing,\n  base: 'relative inline-flex items-center justify-center gap-2 border border-black/10 dark:border-white/10 h-9 box-border px-3.5 [&:has(>svg:only-child)]:px-0 [&:has(>svg:only-child)]:h-8 [&:has(>svg:only-child)]:aspect-square font-sans text-sm text-center transition rounded-lg cursor-default forced-color-adjust-none [-webkit-tap-highlight-color:transparent]',\n  variants: {\n    isSelected: {\n      false:\n        'bg-neutral-50 hover:bg-neutral-100 pressed:bg-neutral-200 text-neutral-800 dark:bg-neutral-700 dark:hover:bg-neutral-600 dark:pressed:bg-neutral-500 dark:text-neutral-100 forced-colors:bg-[ButtonFace]! forced-colors:text-[ButtonText]!',\n      true: 'bg-neutral-700 hover:bg-neutral-800 pressed:bg-neutral-900 text-white dark:bg-neutral-300 dark:hover:bg-neutral-200 dark:pressed:bg-neutral-100 dark:text-black forced-colors:bg-[Highlight]! forced-colors:text-[HighlightText]!'\n    },\n    isDisabled: {\n      true: 'border-transparent dark:border-transparent bg-neutral-100 dark:bg-neutral-800 forced-colors:bg-[ButtonFace]! text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]!'\n    }\n  }\n});\n\nexport function ToggleButton(props: ToggleButtonProps) {\n  return (\n    <RACToggleButton\n      {...props}\n      className={composeRenderProps(props.className, (className, renderProps) =>\n        styles({...renderProps, className})\n      )}\n    />\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}