{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-switch",
  "type": "registry:ui",
  "title": "Switch",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-utils.json",
    "https://react-aria.adobe.com/registry/tailwind-field.json"
  ],
  "files": [
    {
      "path": "components/ui/Switch.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  SwitchField,\n  SwitchButton,\n  type SwitchFieldProps,\n  type ValidationResult\n} from 'react-aria-components/Switch';\nimport {tv} from 'tailwind-variants';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\nimport {Description, FieldError} from '@/registry/react-aria/ui/Field';\n\nexport interface SwitchProps extends Omit<SwitchFieldProps, 'children'> {\n  children: React.ReactNode;\n  description?: string;\n  errorMessage?: string | ((validation: ValidationResult) => string);\n}\n\nconst track = tv({\n  extend: focusRing,\n  base: 'flex h-5 w-9 box-border px-px items-center shrink-0 cursor-default rounded-full transition duration-200 ease-in-out shadow-inner border border-transparent font-sans',\n  variants: {\n    isSelected: {\n      false:\n        'bg-neutral-100 dark:bg-neutral-800 group-pressed:bg-neutral-200 dark:group-pressed:bg-neutral-700 border-neutral-400 dark:border-neutral-400',\n      true: 'bg-neutral-700 dark:bg-neutral-300 forced-colors:bg-[Highlight]! group-pressed:bg-neutral-800 dark:group-pressed:bg-neutral-200'\n    },\n    isDisabled: {\n      true: 'bg-neutral-100 dark:bg-neutral-800 group-selected:bg-neutral-300 dark:group-selected:bg-neutral-800 forced-colors:group-selected:bg-[GrayText]! border-neutral-300 dark:border-neutral-900 forced-colors:border-[GrayText]'\n    }\n  }\n});\n\nconst handle = tv({\n  base: 'h-4 w-4 transform rounded-full outline outline-1 -outline-offset-1 outline-transparent shadow-xs transition duration-200 ease-in-out',\n  variants: {\n    isSelected: {\n      false: 'translate-x-0 bg-neutral-900 dark:bg-neutral-300',\n      true: 'translate-x-[100%] bg-white dark:bg-neutral-900'\n    },\n    isDisabled: {\n      true: 'forced-colors:outline-[GrayText]'\n    }\n  },\n  compoundVariants: [\n    {\n      isSelected: false,\n      isDisabled: true,\n      class: 'bg-neutral-300 dark:bg-neutral-700'\n    },\n    {\n      isSelected: true,\n      isDisabled: true,\n      class: 'bg-neutral-50 dark:bg-neutral-700'\n    }\n  ]\n});\n\nexport function Switch({children, ...props}: SwitchProps) {\n  return (\n    <SwitchField {...props} className=\"flex flex-col gap-1 group\">\n      <SwitchButton\n        className={composeTailwindRenderProps(\n          props.className,\n          'group relative flex gap-2 items-center text-neutral-800 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 forced-colors:disabled:text-[GrayText] text-sm transition [-webkit-tap-highlight-color:transparent]'\n        )}>\n        {renderProps => (\n          <>\n            <div className={track(renderProps)}>\n              <span className={handle(renderProps)} />\n            </div>\n            {children}\n          </>\n        )}\n      </SwitchButton>\n      {props.description && <Description>{props.description}</Description>}\n      <FieldError>{props.errorMessage}</FieldError>\n    </SwitchField>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}