{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "switch",
  "title": "Switch",
  "description": "An on/off setting that applies at once, with a label slot and a thumb that settles on a spring.",
  "dependencies": [
    "@base-ui/react@^1.9.0"
  ],
  "registryDependencies": [
    "https://sproutboat.com/ikada/r/theme.json",
    "https://sproutboat.com/ikada/r/cn.json"
  ],
  "files": [
    {
      "path": "registry/ikada/ui/switch.tsx",
      "content": "\"use client\";\n\nimport { Switch as BaseSwitch } from \"@base-ui/react/switch\";\nimport { useId } from \"react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { cn, focusRing } from \"@/components/ikada/lib/cn\";\n\nexport interface SwitchProps extends Omit<ComponentProps<typeof BaseSwitch.Root>, \"className\" | \"children\"> {\n  className?: string;\n  /** Visible label beside the switch. Without it, pass aria-label. */\n  label?: ReactNode;\n}\n\n/**\n * An on/off setting that applies at once. The thumb rides the snappy spring and squishes toward\n * its travel while pressed. Checked is a solid green track (3:1 against the off track and surface).\n */\nexport function Switch({ label, className, id, ref, ...props }: SwitchProps) {\n  const autoId = useId();\n  const controlId = id ?? autoId;\n  const control = (\n    <BaseSwitch.Root\n      data-slot=\"switch\"\n      ref={ref}\n      id={controlId}\n      // A <label> does not name a role=\"switch\" span, so name it by reference.\n      aria-labelledby={label ? `${controlId}-label` : undefined}\n      className={cn(\n        \"group relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-hover p-[3px]\",\n        \"shadow-[inset_0_0_0_1.5px_var(--sb-control-edge),inset_0_1px_2px_oklch(0_0_0/0.1)]\",\n        \"transition-[background-color,box-shadow] duration-(--sb-duration-hover) ease-hover\",\n        \"hover:shadow-[inset_0_0_0_1.5px_var(--sb-fg-muted),inset_0_1px_2px_oklch(0_0_0/0.1)]\",\n        \"data-checked:bg-brand data-checked:shadow-[inset_0_1px_2px_oklch(0.2_0.06_152/0.3)] data-checked:hover:bg-brand-hover\",\n        // Pressing squishes the thumb; a disabled switch does not respond.\n        \"[&:active:not([data-disabled])]:[--sb-squish:1]\",\n        \"data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        \"before:absolute before:-inset-2 before:content-[''] pointer-fine:before:hidden\",\n        focusRing,\n        !label && className,\n      )}\n      {...props}\n    >\n      <BaseSwitch.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"block size-[18px] rounded-full bg-fg-muted\",\n          \"shadow-[0_0_0_0.5px_oklch(0_0_0/0.12),0_1px_2px_oklch(0_0_0/0.25),0_2px_4px_-1px_oklch(0_0_0/0.15)]\",\n          // Squish toward the direction of travel: anchored on the side it leaves from.\n          \"origin-left data-checked:origin-right rtl:origin-right rtl:data-checked:origin-left\",\n          \"scale-x-[calc(1+0.18*var(--sb-squish,0)*var(--sb-move))] scale-y-[calc(1-0.06*var(--sb-squish,0)*var(--sb-move))]\",\n          \"[transition:translate_var(--sb-duration-spring-snappy)_var(--sb-spring-snappy),scale_var(--sb-duration-spring-snappy)_var(--sb-spring-snappy),background-color_var(--sb-duration-hover)_var(--ease-hover)]\",\n          \"group-active:[transition:translate_var(--sb-duration-spring-snappy)_var(--sb-spring-snappy),scale_var(--sb-duration-press)_var(--ease-out),background-color_var(--sb-duration-hover)_var(--ease-hover)]\",\n          \"data-checked:translate-x-4 data-checked:bg-on-brand rtl:data-checked:-translate-x-4\",\n        )}\n      />\n    </BaseSwitch.Root>\n  );\n  if (!label) return control;\n  return (\n    <label\n      htmlFor={controlId}\n      className={cn(\"inline-flex max-w-full items-center gap-2.5 text-sb-base text-fg\", className)}\n    >\n      {control}\n      <span id={`${controlId}-label`} className=\"min-w-0 [overflow-wrap:anywhere]\">\n        {label}\n      </span>\n    </label>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/ikada/switch.tsx"
    }
  ],
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}