1d:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsPage"] 1e:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsTitle"] 1f:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsDescription"] 20:I[53266,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"DocsBody"] 21:I[26731,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"ComponentPreview"] 22:I[25325,["/_next/static/immutable/chunks/26aurwqmzxm76.js","/_next/static/immutable/chunks/05170pppx2k2h.js","/_next/static/immutable/chunks/39elksblf9txj.js","/_next/static/immutable/chunks/2s6zgp9pxvdhv.js","/_next/static/immutable/chunks/0vrgcfw5ofcpy.js","/_next/static/immutable/chunks/1k909hfpkg-9o.js","/_next/static/immutable/chunks/120_ecefuttit.js","/_next/static/immutable/chunks/17odxrx2h79dx.js"],"CodeTabs"] 23:Tbd5,"use client"; import type { ComponentProps, ReactNode } from "react"; import * as SwitchPrimitive from "@radix-ui/react-switch"; import { cn } from "@/registry/tier-2-primitives/lib/cn"; /** * Switch. * * Radix Switch — a button with `role="switch"`, so it announces as "switch, on" * rather than "checkbox, checked", and mirrors into a hidden input when a * `name` is set so a form still submits it. * * WHEN TO USE A SWITCH INSTEAD OF A CHECKBOX * A switch takes effect immediately. A checkbox is a value you are about to * submit. "Email me about drops" inside a settings page that saves as you go * is a switch; the same line inside a checkout form with a Continue button is * a checkbox. Getting this wrong makes people press Save and wonder whether * it worked. * * The knob moves with a transform at 180ms — the only motion here, and it is * explaining the state change rather than decorating it. */ export type SwitchProps = Omit< ComponentProps, "children" | "asChild" > & { label?: ReactNode; description?: ReactNode; labelClassName?: string; }; export function Switch({ label, description, className, labelClassName, id, disabled, ...props }: SwitchProps) { const control = ( {/* The knob stays Paper in both appearances. It is a physical control surface, not a page surface — every platform switch is a light knob on a coloured track, and resolving it through --surface-raised would make it a dark knob on a dark track in dark mode. One of the few legitimate uses of a primitive inside a component. */} ); if (!label) return control; return ( {control} {label} {description && ( {description} )} ); } 24:T4edb,

"use client";

import type { ComponentProps, ReactNode } from "react";
import * as SwitchPrimitive from "@radix-ui/react-switch";
import { cn } from "@/registry/tier-2-primitives/lib/cn";

/**
 * Switch.
 *
 * Radix Switch — a button with `role="switch"`, so it announces as "switch, on"
 * rather than "checkbox, checked", and mirrors into a hidden input when a
 * `name` is set so a form still submits it.
 *
 * WHEN TO USE A SWITCH INSTEAD OF A CHECKBOX
 *   A switch takes effect immediately. A checkbox is a value you are about to
 *   submit. "Email me about drops" inside a settings page that saves as you go
 *   is a switch; the same line inside a checkout form with a Continue button is
 *   a checkbox. Getting this wrong makes people press Save and wonder whether
 *   it worked.
 *
 * The knob moves with a transform at 180ms — the only motion here, and it is
 * explaining the state change rather than decorating it.
 */
export type SwitchProps = Omit<
  ComponentProps<typeof SwitchPrimitive.Root>,
  "children" | "asChild"
> & {
  label?: ReactNode;
  description?: ReactNode;
  labelClassName?: string;
};

export function Switch({
  label,
  description,
  className,
  labelClassName,
  id,
  disabled,
  ...props
}: SwitchProps) {
  const control = (
    <SwitchPrimitive.Root
      data-slot="switch"
      id={id}
      disabled={disabled}
      className={cn(
        "flex h-6 w-[42px] flex-none items-center rounded-pill p-[3px]",
        "bg-border-strong transition-colors motion-fast",
        "data-[state=checked]:bg-surface-accent",
        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--focus-ring)]",
        "disabled:cursor-not-allowed disabled:opacity-45",
        className,
      )}
      {...props}
    >
      {/* The knob stays Paper in both appearances. It is a physical control
          surface, not a page surface — every platform switch is a light knob
          on a coloured track, and resolving it through --surface-raised would
          make it a dark knob on a dark track in dark mode. One of the few
          legitimate uses of a primitive inside a component. */}
      <SwitchPrimitive.Thumb
        className={cn(
          "block size-[18px] rounded-full bg-paper shadow-e1",
          "transition-transform motion-fast data-[state=checked]:translate-x-[18px]",
        )}
      />
    </SwitchPrimitive.Root>
  );

  if (!label) return control;

  return (
    <label
      htmlFor={id}
      className={cn(
        "flex gap-3 font-ui",
        description ? "items-start" : "items-center",
        disabled ? "cursor-not-allowed opacity-45" : "cursor-pointer",
        labelClassName,
      )}
    >
      <span className={description ? "mt-px" : undefined}>{control}</span>
      <span>
        <span className="block text-body text-text-primary">{label}</span>
        {description && (
          <span className="mt-0.5 block text-caption text-text-muted">{description}</span>
        )}
      </span>
    </label>
  );
}

13:["$","$L1d",null,{"children":[["$","p",null,{"className":"text-text-accent text-caption font-bold tracking-wide uppercase","children":"Components"}],["$","$L1e",null,{"children":"Switch"}],["$","$L1f",null,{"children":"For settings that take effect immediately — not for form values you are about to submit."}],["$","$L20",null,{"children":[["$","$L21",null,{"slug":"switch"}],["$","div",null,{"className":"mt-6","children":["$","$L22",null,{"command":"bunx --bun shadcn@latest add @woohl/switch","source":"$23","highlighted":"$24","npm":["@radix-ui/react-switch"],"registry":["@woohl/tokens","@woohl/utils"],"props":"$undefined"}]}]]}]]}]