{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "type": "registry:ui",
  "title": "Switch",
  "description": "Accessible toggle switch component for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/switch/switch.tsx",
      "type": "registry:ui",
      "target": "components/ui/switch/switch.tsx",
      "content": "import React, { useState } from 'react';\nimport { getSwitchState, switchStyleKeys } from '../lib/core';\nimport type { SwitchBaseProps } from '../lib/core';\nimport styles from './switch.module.scss';\n\nexport interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'>, SwitchBaseProps {\n\tchecked?: boolean;\n\tdefaultChecked?: boolean;\n\tonCheckedChange?: (checked: boolean) => void;\n}\n\nconst Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(\n\t({ className = '', size = 'default', checked, defaultChecked = false, disabled, onCheckedChange, ...props }, ref) => {\n\t\tconst [internalChecked, setInternalChecked] = useState(defaultChecked);\n\t\tconst isChecked = checked !== undefined ? checked : internalChecked;\n\t\tconst state = getSwitchState(isChecked);\n\n\t\tfunction handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n\t\t\tconst next = !isChecked;\n\n\t\t\tif (checked === undefined) {\n\t\t\t\tsetInternalChecked(next);\n\t\t\t}\n\n\t\t\tonCheckedChange?.(next);\n\t\t\tprops.onClick?.(event);\n\t\t}\n\n\t\treturn (\n\t\t\t<button\n\t\t\t\tref={ref}\n\t\t\t\ttype=\"button\"\n\t\t\t\trole=\"switch\"\n\t\t\t\taria-checked={isChecked}\n\t\t\t\tdata-state={state}\n\t\t\t\tdata-size={size}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tclassName={`${styles[switchStyleKeys.root]} ${className}`}\n\t\t\t\t{...props}\n\t\t\t\tonClick={handleClick}>\n\t\t\t\t<span className={styles[switchStyleKeys.thumb]} />\n\t\t\t</button>\n\t\t);\n\t},\n);\n\nSwitch.displayName = 'Switch';\n\nexport { Switch };\nexport default Switch;\n"
    },
    {
      "path": "packages/styles/scss/components/switch.module.scss",
      "type": "registry:file",
      "target": "components/ui/switch/switch.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n.root {\n\tdisplay: inline-flex;\n\tflex-shrink: 0;\n\talign-items: center;\n\tborder-radius: var(--tile-switch-radius, #{$radius-full});\n\tborder: var(--tile-switch-border-width, 1px) solid transparent;\n\tbox-shadow: var(--tile-switch-shadow, #{$shadow-sm});\n\ttransition: background-color $transition-fast;\n\toutline: none;\n\n\t&:focus-visible {\n\t\tborder-color: $ring;\n\t}\n\n\t&:disabled {\n\t\tcursor: not-allowed;\n\t\topacity: 0.5;\n\t}\n\n\t&[data-size='default'] {\n\t\twidth: var(--tile-switch-width, 2rem);\n\t\theight: var(--tile-switch-height, 1.15rem);\n\t}\n\n\t&[data-size='sm'] {\n\t\twidth: var(--tile-switch-sm-width, 1.5rem);\n\t\theight: var(--tile-switch-sm-height, 0.875rem);\n\t}\n\n\t&[data-state='checked'] {\n\t\tbackground-color: var(--tile-switch-checked-background, #{$primary});\n\t\tcolor: $primary-foreground;\n\t\tbox-shadow: var(--tile-switch-checked-shadow, #{$shadow-sm});\n\t}\n\n\t&[data-state='unchecked'] {\n\t\tbackground-color: var(--tile-switch-background, #{$input});\n\t\tcolor: $foreground;\n\t}\n\n\t&:focus-visible {\n\t\tbox-shadow: var(--tile-switch-focus-shadow, 0 0 0 1px #{$ring}, 0 0 0 3px color-mix(in srgb, #{$ring} 50%, transparent));\n\t\toutline: var(--tile-switch-focus-outline, none);\n\t\toutline-offset: var(--tile-switch-focus-offset, 0px);\n\t}\n}\n\n.thumb {\n\tpointer-events: none;\n\tdisplay: block;\n\tborder-radius: var(--tile-switch-radius, #{$radius-full});\n\tbackground-color: var(--tile-switch-thumb-background, #{$background});\n\tbox-shadow: var(--tile-switch-thumb-shadow, none);\n\ttransition: transform $transition-normal;\n\n\t[data-size='default'] & {\n\t\twidth: var(--tile-switch-thumb-size, 1rem);\n\t\theight: var(--tile-switch-thumb-size, 1rem);\n\t}\n\n\t[data-size='sm'] & {\n\t\twidth: var(--tile-switch-sm-thumb-size, 0.75rem);\n\t\theight: var(--tile-switch-sm-thumb-size, 0.75rem);\n\t}\n\n\t[data-state='checked'] & {\n\t\ttransform: translateX(var(--tile-switch-thumb-travel, calc(100% - 2px)));\n\t\tbackground-color: var(--tile-switch-checked-thumb-background, #{$background});\n\t}\n\n\t[data-state='unchecked'] & {\n\t\ttransform: translateX(0);\n\t}\n}\n\n// Optional corner styling falls back to round corners in unsupported browsers.\n@supports (corner-shape: squircle) {\n\t.root,\n\t.thumb {\n\t\tcorner-shape: var(--tile-switch-corner-shape, round);\n\t\tborder-radius: var(--tile-switch-squircle-radius, #{$radius-full});\n\t}\n}\n"
    },
    {
      "path": "packages/react/src/components/switch/index.ts",
      "type": "registry:ui",
      "target": "components/ui/switch/index.ts",
      "content": "export { Switch, type SwitchProps } from './switch';\n"
    }
  ]
}