{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "title": "Switch",
  "description": "Switch from the Get IT Done design system.",
  "dependencies": [
    "@radix-ui/react-switch@^1.4.1"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/labels-context.json",
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/switch.tsx",
      "content": "'use client';\n\nimport * as SwitchPrimitives from '@radix-ui/react-switch';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { usePreset } from '@/components/ui/labels-context';\n\n// `default` is the established 44x24 switch. `sm` follows the theme-aware `switch-*-sm` size tokens\n// (the 2px transparent border keeps the thumb inset, so travel = track - thumb - 2 * border).\nconst switchSizes = {\n  default: {\n    root: 'h-switch-track-h-md w-switch-track-w-md',\n    thumb: 'h-5 w-5 data-[state=checked]:translate-x-5',\n  },\n  sm: {\n    root: 'h-switch-track-h-sm w-switch-track-w-sm',\n    thumb:\n      'h-switch-thumb-sm w-switch-thumb-sm data-[state=checked]:translate-x-[calc(theme(spacing.switch-track-w-sm)-theme(spacing.switch-thumb-sm)-theme(spacing.micro)*2)]',\n  },\n} as const;\n\nexport type SwitchProps = React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> & {\n  /** `default` keeps the 44x24 switch; `sm` uses the themeable small switch sizes (the default in the zero preset). */\n  size?: keyof typeof switchSizes;\n  // Shows the value but blocks changes (Figma Readonly). Stays focusable and keeps `aria-checked`.\n  readOnly?: boolean;\n};\n\nconst Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(\n  ({ className, size: sizeProp, readOnly = false, onClick, ...props }, ref) => {\n    const zero = usePreset() === 'zero';\n    const size = sizeProp ?? (zero ? 'sm' : 'default');\n    return (\n    <SwitchPrimitives.Root\n      className={cn(\n        'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-solid border-transparent transition-[color,background-color,border-color,box-shadow] duration-150 data-[state=unchecked]:hover:bg-switch-background-unchecked-hover data-[state=checked]:hover:bg-background-brand-bold-hover aria-[invalid=true]:border-destructive data-[readonly=true]:data-[state=checked]:hover:bg-background-brand-bold-default data-[readonly=true]:data-[state=unchecked]:hover:bg-switch-background-unchecked focus-visible:outline-none focus-visible:ring-focus focus-visible:ring-offset-focus focus-visible:ring-offset-background focus-visible:ring-ring-default disabled:cursor-not-allowed disabled:opacity-disabled data-[state=checked]:bg-background-brand-bold-default data-[state=unchecked]:bg-switch-background-unchecked',\n        switchSizes[size].root,\n        'data-[readonly=true]:cursor-default data-[readonly=true]:opacity-70',\n        className,\n      )}\n      {...props}\n      aria-readonly={readOnly || undefined}\n      data-readonly={readOnly || undefined}\n      onClick={(event) => {\n        if (readOnly) {\n          event.preventDefault();\n          return;\n        }\n        onClick?.(event);\n      }}\n      ref={ref}\n    >\n      <SwitchPrimitives.Thumb\n        className={cn(\n          'pointer-events-none block rounded-full bg-background shadow-xs ring-0 transition-transform data-[state=unchecked]:translate-x-0',\n          switchSizes[size].thumb,\n        )}\n      />\n    </SwitchPrimitives.Root>\n    );\n  },\n);\nSwitch.displayName = SwitchPrimitives.Root.displayName;\n\nexport { Switch };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}