{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "title": "Switch",
  "description": "Soft-rect switch — layout thumb + flex justify flip (Motion.dev Base UI).",
  "dependencies": [
    "@base-ui/react",
    "motion"
  ],
  "registryDependencies": [
    "@atroui/utils",
    "@atroui/motion"
  ],
  "files": [
    {
      "path": "registry/default/ui/switch.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { switchLayoutTween } from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\nfunction withoutDomAnimationHandlers<T extends Record<string, unknown>>(\n  props: T\n) {\n  const {\n    onAnimationStart: _onAnimationStart,\n    onDrag: _onDrag,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    ...rest\n  } = props\n  return rest\n}\n\n/**\n * Soft-rect switch — Motion.dev Base UI pattern:\n * flex `justify-content` flip + thumb `layout` (not raw `x` translate).\n * Family Values: fluidity via seamless travel; soft-rect not capsule.\n */\nfunction Switch({\n  className,\n  size = \"default\",\n  checked: checkedProp,\n  defaultChecked = false,\n  onCheckedChange,\n  style,\n  ...props\n}: SwitchPrimitive.Root.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  const reduce = useReducedMotion()\n  const [uncontrolled, setUncontrolled] = React.useState(defaultChecked)\n  const isControlled = checkedProp !== undefined\n  const checked = isControlled ? Boolean(checkedProp) : uncontrolled\n\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-size={size}\n      {...props}\n      checked={checkedProp}\n      defaultChecked={defaultChecked}\n      onCheckedChange={(next, eventDetails) => {\n        if (!isControlled) setUncontrolled(next)\n        onCheckedChange?.(next, eventDetails)\n      }}\n      style={\n        {\n          ...style,\n          justifyContent: checked ? \"flex-end\" : \"flex-start\",\n        } as React.CSSProperties\n      }\n      className={cn(\n        \"peer group/switch relative inline-flex shrink-0 items-center border border-transparent outline-none\",\n        \"rounded-[var(--atro-control-radius,var(--radius))] p-0.5\",\n        \"transition-[background-color,box-shadow] duration-200 ease-[cubic-bezier(0.32,0.72,0,1)]\",\n        \"focus-visible:border-ring\",\n        \"data-checked:bg-primary data-unchecked:bg-muted\",\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        \"data-[size=default]:h-6 data-[size=default]:w-10\",\n        \"data-[size=sm]:h-4 data-[size=sm]:w-7\",\n        \"motion-reduce:transition-none\",\n        className\n      )}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"pointer-events-none block shrink-0 bg-background shadow-sm ring-1 ring-black/5 dark:ring-white/10\",\n          \"rounded-[calc(var(--atro-control-radius,var(--radius))-2px)]\",\n          \"group-data-[size=default]/switch:size-5\",\n          \"group-data-[size=sm]/switch:size-3\"\n        )}\n        render={\n          reduce\n            ? undefined\n            : (htmlProps) => (\n                <motion.span\n                  {...withoutDomAnimationHandlers(\n                    htmlProps as Record<string, unknown>\n                  )}\n                  layout\n                  // borderRadius via style so layout scale-correction stays round\n                  style={{\n                    ...((htmlProps as { style?: React.CSSProperties }).style ??\n                      {}),\n                    borderRadius: \"calc(var(--atro-control-radius,var(--radius)) - 2px)\",\n                  }}\n                  transition={{ layout: switchLayoutTween }}\n                />\n              )\n        }\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
      "type": "registry:ui",
      "target": "components/ui/switch.tsx"
    }
  ],
  "type": "registry:ui"
}