{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"switch","type":"registry:ui","title":"Switch","description":"A toggle for on/off settings.","dependencies":["radix-ui"],"registryDependencies":["https://dashral.com/r/utils.json","https://dashral.com/r/field.json"],"files":[{"path":"registry/dashral/switch.tsx","type":"registry:file","target":"components/dashral/switch.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { ChoiceField, joinIds, type ChoiceOwnProps, type FieldClassNames } from \"./field\"\n\ntype ControlColor = \"primary\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"destructive\" | \"highlight\"\n\n// The track when on. Every class is written out in full so Tailwind finds it.\nconst trackColors: Record<ControlColor, string> = {\n  primary: \"data-[state=checked]:bg-primary\",\n  neutral: \"data-[state=checked]:bg-foreground\",\n  info: \"data-[state=checked]:bg-info\",\n  success: \"data-[state=checked]:bg-success\",\n  warning: \"data-[state=checked]:bg-warning\",\n  destructive: \"data-[state=checked]:bg-destructive\",\n  highlight: \"data-[state=checked]:bg-highlight\",\n}\n\ntype SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> &\n  ChoiceOwnProps & {\n    /** The track's color when on. */\n    color?: ControlColor\n    /** \"start\" puts the label first and the switch at the far end, as in a settings row. */\n    labelPosition?: \"start\" | \"end\"\n    classNames?: FieldClassNames & { switch?: string }\n  }\n\n/** An on/off switch. Give it a label (and a description) and they sit beside it; clicking them flips it. */\nfunction Switch({ label, description, error, id, disabled, labelPosition, color = \"primary\", className, classNames, ...props }: SwitchProps) {\n  return (\n    <ChoiceField {...{ label, description, error, id, disabled, labelPosition, classNames }} leading=\"leading-5\">\n      {(control) => (\n        <SwitchControl\n          {...props}\n          {...control}\n          color={color}\n          disabled={disabled}\n          aria-describedby={joinIds(props[\"aria-describedby\"], control[\"aria-describedby\"])}\n          aria-invalid={props[\"aria-invalid\"] ?? control[\"aria-invalid\"]}\n          className={cn(trackColors[color], className, classNames?.switch)}\n        />\n      )}\n    </ChoiceField>\n  )\n}\n\nfunction SwitchControl({ className, color, ...props }: Omit<React.ComponentProps<typeof SwitchPrimitive.Root>, \"color\"> & { color: ControlColor }) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      data-color={color}\n      className={cn(\n        \"peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=unchecked]:bg-input\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"pointer-events-none block size-4 rounded-full bg-white ring-0 shadow-sm transition-transform duration-(--duration-standard) ease-spring data-[state=checked]:translate-x-[calc(100%)] rtl:data-[state=checked]:-translate-x-[calc(100%)] data-[state=unchecked]:translate-x-0.5 rtl:data-[state=unchecked]:-translate-x-0.5\",\n          // A white thumb would vanish on the light track neutral has in dark mode.\n          color === \"neutral\" && \"data-[state=checked]:bg-background\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch, type SwitchProps }\n"}],"cssVars":{"theme":{"color-info":"var(--info)","color-info-foreground":"var(--info-foreground)","color-info-text":"var(--info-text)","color-success":"var(--success)","color-success-foreground":"var(--success-foreground)","color-success-text":"var(--success-text)","color-warning":"var(--warning)","color-warning-foreground":"var(--warning-foreground)","color-warning-text":"var(--warning-text)","color-highlight":"var(--highlight)","color-highlight-foreground":"var(--highlight-foreground)","color-highlight-text":"var(--highlight-text)","ease-standard":"var(--ease-standard)","ease-enter":"var(--ease-enter)","ease-exit":"var(--ease-exit)","ease-spring":"var(--ease-spring)"},"light":{"info":"oklch(0.5 0.134 242.749)","info-foreground":"oklch(0.985 0 0)","info-text":"oklch(0.443 0.11 240.79)","success":"oklch(0.508 0.118 165.612)","success-foreground":"oklch(0.985 0 0)","success-text":"oklch(0.432 0.095 166.913)","warning":"#f59200","warning-foreground":"oklch(0.3 0.07 60)","warning-text":"#964e00","highlight":"#b8008c","highlight-foreground":"oklch(0.985 0 0)","highlight-text":"#a3007b","duration-fast":"160ms","duration-standard":"240ms","duration-considered":"480ms","ease-standard":"cubic-bezier(0.2, 0, 0, 1)","ease-enter":"cubic-bezier(0, 0, 0, 1)","ease-exit":"cubic-bezier(0.3, 0, 1, 1)","ease-spring":"linear(0, 0.071 4%, 0.234 8%, 0.433 12%, 0.626 17%, 0.791 21%, 0.917 25%, 1.004 29%, 1.055 33%, 1.079 38%, 1.083 42%, 1.075 46%, 1.06 50%, 1.043 54%, 1.027 58%, 1.015 62%, 1.005 67%, 0.998 71%, 0.995 75%, 0.993 79%, 0.993 83%, 0.994 88%, 0.995 92%, 0.997 96%, 1)"},"dark":{"info":"oklch(0.685 0.169 237.323)","info-foreground":"oklch(0.2 0 0)","info-text":"oklch(0.746 0.16 232.661)","success":"oklch(0.696 0.17 162.48)","success-foreground":"oklch(0.2 0.04 160)","success-text":"oklch(0.765 0.177 163.223)","warning":"#f59200","warning-foreground":"oklch(0.25 0.06 60)","warning-text":"#ffba42","highlight":"#ff2ecf","highlight-foreground":"oklch(0.2 0 0)","highlight-text":"#ff75df"}}}