{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle",
  "type": "registry:ui",
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-switch"
  ],
  "registryDependencies": [
    "https://ui.getlyse.com/r/lyse-tokens.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/toggle/toggle.tsx",
      "content": "import * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport \"./toggle.css\"\n\nconst toggleVariants = cva(\n  \"toggle-track inline-flex items-center shrink-0 rounded-[var(--layout-radius-full)] p-[var(--layout-padding-2xs)] transition-colors cursor-pointer\",\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--layout-size-sm)] w-9\",\n        md: \"h-[var(--layout-size-md)] w-11\",\n      },\n    },\n    defaultVariants: {\n      size: \"sm\",\n    },\n  }\n)\n\nconst thumbVariants = cva(\n  \"toggle-thumb block rounded-full\",\n  {\n    variants: {\n      size: {\n        sm: \"h-[var(--layout-size-xs)] w-[var(--layout-size-xs)] data-[state=checked]:translate-x-[14px]\",\n        md: \"h-[var(--layout-size-sm)] w-[var(--layout-size-sm)] data-[state=checked]:translate-x-[18px]\",\n      },\n    },\n    defaultVariants: {\n      size: \"sm\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  size = \"sm\",\n  label,\n  description,\n  disabled,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    label?: string\n    description?: string\n  }) {\n  const id = React.useId()\n\n  return (\n    <div\n      data-slot=\"toggle\"\n      data-disabled={disabled || undefined}\n      className={cn(\"flex items-center gap-[var(--layout-gap-md)]\", className)}\n    >\n      <SwitchPrimitive.Root\n        id={id}\n        className={cn(toggleVariants({ size }))}\n        disabled={disabled}\n        {...props}\n      >\n        <SwitchPrimitive.Thumb className={cn(thumbVariants({ size }))} />\n      </SwitchPrimitive.Root>\n      {label && (\n        <label\n          htmlFor={id}\n          className={cn(\n            \"flex flex-col\",\n            disabled ? \"cursor-default\" : \"cursor-pointer\"\n          )}\n        >\n          <span\n            className={cn(\n              \"font-accent toggle-label\",\n              size === \"sm\" ? \"text-content-note\" : \"text-content-body\"\n            )}\n          >\n            {label}\n          </span>\n          {description && (\n            <span className=\"text-content-note toggle-description\">\n              {description}\n            </span>\n          )}\n        </label>\n      )}\n    </div>\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/new-york/ui/toggle/toggle.css",
      "content": "/* ================================================================\n * TOGGLE — Track, Thumb & State Styles\n * Structure (flex, size, gap, radius) lives in toggle.tsx via cva.\n * Theming (colors, borders, states) lives here via tokens.\n * ================================================================ */\n\n/* --------------------------------\n * Track — unchecked states\n * -------------------------------- */\n.toggle-track[data-state=\"unchecked\"] {\n  background: var(--background-neutral-medium-default);\n  border: var(--layout-border-thin) solid transparent;\n}\n.toggle-track[data-state=\"unchecked\"]:not([data-disabled]):hover {\n  background: var(--background-neutral-medium-hover);\n}\n.toggle-track[data-state=\"unchecked\"]:not([data-disabled]):active {\n  background: var(--background-neutral-medium-pressed);\n}\n\n/* --------------------------------\n * Track — checked states\n * -------------------------------- */\n.toggle-track[data-state=\"checked\"] {\n  background: var(--background-brand-strong-default);\n  border: var(--layout-border-thin) solid var(--border-default);\n}\n.toggle-track[data-state=\"checked\"]:not([data-disabled]):hover {\n  background: var(--background-brand-strong-hover);\n}\n.toggle-track[data-state=\"checked\"]:not([data-disabled]):active {\n  background: var(--background-brand-strong-pressed);\n}\n\n/* --------------------------------\n * Track — disabled\n * -------------------------------- */\n.toggle-track[data-disabled] {\n  background: var(--background-disabled);\n  border: none;\n  cursor: default;\n  pointer-events: none;\n}\n\n/* --------------------------------\n * Focus ring (matches Checkbox/Radio/Button pattern)\n * -------------------------------- */\n.toggle-track:focus-visible {\n  outline: none;\n  box-shadow: 0 0 0 2px var(--background-base), 0 0 0 4px var(--border-selected);\n}\n\n/* --------------------------------\n * Thumb — base\n * -------------------------------- */\n.toggle-thumb {\n  background: var(--text-fixed);\n  box-shadow: var(--shadow-elevation-sm);\n  transition: translate 300ms cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n/* Squish on press */\n.toggle-track:not([data-disabled]):active .toggle-thumb {\n  animation: toggle-squish 350ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;\n}\n\n@keyframes toggle-squish {\n  0% {\n    scale: 1 1;\n  }\n  20% {\n    scale: 1.35 0.85;\n  }\n  50% {\n    scale: 0.9 1.1;\n  }\n  70% {\n    scale: 1.08 0.96;\n  }\n  100% {\n    scale: 1 1;\n  }\n}\n\n/* --------------------------------\n * Thumb — disabled\n * -------------------------------- */\n.toggle-track[data-disabled] .toggle-thumb {\n  background: var(--text-disabled);\n  box-shadow: none;\n}\n\n/* --------------------------------\n * Text — label & description\n * -------------------------------- */\n.toggle-label {\n  color: var(--text-base-strong);\n}\n.toggle-description {\n  color: var(--text-base-medium);\n}\n\n/* --------------------------------\n * Text — disabled\n * -------------------------------- */\n[data-slot=\"toggle\"][data-disabled] .toggle-label,\n[data-slot=\"toggle\"][data-disabled] .toggle-description {\n  color: var(--text-disabled);\n}\n[data-slot=\"toggle\"][data-disabled] label {\n  cursor: default;\n}\n",
      "type": "registry:ui"
    }
  ]
}