{
  "name": "switch",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "switch.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport { useControllableState } from \"@yugnex/core/client\";\r\nimport { forwardRef, type ButtonHTMLAttributes } from \"react\";\r\n\r\nconst trackClass = css({\r\n  position: \"relative\",\r\n  display: \"inline-flex\",\r\n  alignItems: \"center\",\r\n  width: \"2.5rem\",\r\n  height: \"1.5rem\",\r\n  borderRadius: theme.radius.full,\r\n  backgroundColor: theme.color.input,\r\n  border: \"none\",\r\n  padding: \"2px\",\r\n  cursor: \"pointer\",\r\n  flexShrink: 0,\r\n  transitionProperty: \"background-color\",\r\n  transitionDuration: theme.duration.fast,\r\n  transitionTimingFunction: theme.easing.standard,\r\n  '&[data-state=\"checked\"]': {\r\n    backgroundColor: theme.color.primary,\r\n  },\r\n  \"&:focus-visible\": {\r\n    outline: `2px solid ${theme.color.ring}`,\r\n    outlineOffset: \"2px\",\r\n  },\r\n  \"&:disabled\": {\r\n    opacity: 0.5,\r\n    cursor: \"not-allowed\",\r\n  },\r\n});\r\n\r\nconst thumbClass = css({\r\n  width: \"1.125rem\",\r\n  height: \"1.125rem\",\r\n  borderRadius: theme.radius.full,\r\n  backgroundColor: \"#ffffff\",\r\n  boxShadow: theme.shadow.sm,\r\n  transform: \"translateX(0)\",\r\n  transitionProperty: \"transform\",\r\n  transitionDuration: theme.duration.fast,\r\n  transitionTimingFunction: theme.easing.standard,\r\n  '[data-state=\"checked\"] &': {\r\n    transform: \"translateX(1rem)\",\r\n  },\r\n});\r\n\r\nexport interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\r\n  checked?: boolean;\r\n  defaultChecked?: boolean;\r\n  onCheckedChange?: (checked: boolean) => void;\r\n}\r\n\r\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(\r\n  { checked, defaultChecked = false, onCheckedChange, className, disabled, ...props },\r\n  ref,\r\n) {\r\n  const [isChecked, setChecked] = useControllableState({\r\n    value: checked,\r\n    defaultValue: defaultChecked,\r\n    onChange: onCheckedChange,\r\n  });\r\n\r\n  return (\r\n    <button\r\n      ref={ref}\r\n      type=\"button\"\r\n      role=\"switch\"\r\n      aria-checked={isChecked}\r\n      data-state={isChecked ? \"checked\" : \"unchecked\"}\r\n      disabled={disabled}\r\n      className={className ? `${trackClass} ${className}` : trackClass}\r\n      onClick={() => setChecked(!isChecked)}\r\n      {...props}\r\n    >\r\n      <span className={thumbClass} />\r\n    </button>\r\n  );\r\n});\r\n",
      "type": "registry:component"
    }
  ]
}