Switch

Built on the Radix Switch primitive (a `button` with `role="switch"` and `aria-checked`). The thumb moves with a CSS `translate-x` keyed on `data-state=checked`, mirrored under `rtl:`, with a 150 ms transform transition that `motion-reduce` removes. Off is an outlined track with a muted thumb and on is a filled primary track, so state is readable without color. In forced-colors mode author backgrounds are dropped, so the checked track is painted with the `Highlight` system color and the thumb gets a `CanvasText` border.

**Pebble (2026-11-03).** Off is a recessed well (`bg-muted`, `inset-shadow-xs`, `ring-border-control` for 3:1) and on is the lit key. Because a background gradient cannot transition from a flat colour, the key gradient sits on a `before:` layer that fades in on `data-state=checked`; the key-edge ring and shine/elevation shadow switch with it, and forced-colors mode hides the layer so `Highlight` shows through. The thumb is a raised card pebble (hairline ring, `shadow-raised-sm`, top highlight); in dark mode, where the key turns to paper, it goes from muted-foreground (off) to ink (on). While pressed (`group-active`) the thumb widens by 4 px and the checked travel shrinks by 4 px, so it stretches toward where it is going; translate, width and colour share the `--motion-base` duration and `ease-enter`, all removed under reduced motion.

<!-- PEBBLE-LICENSE -->

registry/input/switch/switch.tsx

"use client";

/* PEBBLE-LICENSE
Built by Pebble. Component: switch.

First-party license: MIT

The following first-party terms apply only to original Pebble material.

MIT License

Copyright (c) 2026 Praxys Solutions LLC (Pebble)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
END PEBBLE-LICENSE */

import * as React from "react";
import { Switch as SwitchPrimitive } from "radix-ui";

import { cn } from "@/lib/utils";

// Geometry: the root has a 1 px transparent border (it becomes the visible
// edge in forced colors) and the thumb sits 1 px inside it, so the checked
// travel is width - thumb - 4 px. While pressed the thumb stretches 4 px
// toward the side it is about to travel to, so the checked travel shrinks by 4.
const sizes = {
  sm: {
    root: "h-[18px] w-8",
    thumb:
      "size-3.5 group-active:w-[18px] data-[state=checked]:translate-x-3.5 group-active:data-[state=checked]:translate-x-2.5 rtl:data-[state=checked]:-translate-x-3.5 rtl:group-active:data-[state=checked]:-translate-x-2.5",
  },
  md: {
    root: "h-6 w-11",
    thumb:
      "size-5 group-active:w-6 data-[state=checked]:translate-x-5 group-active:data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-5 rtl:group-active:data-[state=checked]:-translate-x-4",
  },
} as const;

export type SwitchProps = React.ComponentProps<typeof SwitchPrimitive.Root> & {
  size?: keyof typeof sizes;
};

export function Switch({ size = "md", className, ...props }: SwitchProps) {
  return (
    <SwitchPrimitive.Root
      data-slot="switch"
      className={cn(
        "peer group relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent",
        "transition-[background-color,box-shadow,filter] duration-(--motion-base) ease-enter motion-reduce:transition-none",
        // Off is a recessed well with a full-strength control edge (≥ 3:1);
        // on is the lit key. State reads from fill and thumb side, not hue.
        "bg-muted ring-1 inset-shadow-xs ring-border-control enabled:hover:bg-border/70",
        "data-[state=checked]:shadow-[var(--key-shine),var(--elevation-xs)] data-[state=checked]:inset-shadow-none data-[state=checked]:ring-key-edge enabled:data-[state=checked]:hover:brightness-110",
        // The key gradient lives on a layer that fades in, because a
        // background-image cannot transition from the off colour.
        "before:pointer-events-none before:absolute before:-inset-px before:rounded-full before:bg-linear-to-b before:from-key-top before:to-key-bottom before:opacity-0 before:transition-opacity before:duration-(--motion-base) before:ease-enter data-[state=checked]:before:opacity-100 motion-reduce:before:transition-none",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none focus-visible:data-[state=checked]:ring-ring",
        "disabled:cursor-not-allowed disabled:opacity-50",
        // Forced colors drop author backgrounds and box-shadows: show the
        // border, fill the checked track with Highlight and outline the thumb.
        "forced-colors:border-[CanvasText] forced-colors:before:hidden forced-colors:data-[state=checked]:border-[Highlight] forced-colors:data-[state=checked]:bg-[Highlight]!",
        sizes[size].root,
        className,
      )}
      {...props}
    >
      <SwitchPrimitive.Thumb
        data-slot="switch-thumb"
        className={cn(
          // A raised pebble: card face, hairline, small lift and top light.
          "pointer-events-none relative ms-px block translate-x-0 rounded-full bg-card shadow-raised-sm ring-1 inset-shadow-highlight ring-hairline",
          "transition-[translate,width,background-color] duration-(--motion-base) ease-enter motion-reduce:transition-none",
          // Dark mode inverts the key to paper, so the thumb goes ink when on
          // and stays a light step above the well when off.
          "dark:bg-muted-foreground dark:data-[state=checked]:bg-primary-foreground",
          "forced-colors:border forced-colors:border-[CanvasText] forced-colors:bg-[CanvasText] forced-colors:data-[state=checked]:bg-[Canvas]",
          sizes[size].thumb,
        )}
      />
    </SwitchPrimitive.Root>
  );
}