Toggle

npx @glasskit-ui/cli add toggle

npm install @glasskit-ui/react

// components/lib/utils.tsimport { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";export type { ClassValue };/** * Merge class names the shadcn way: clsx joins conditionals, tailwind-merge * de-dupes conflicting Tailwind utilities so a consumer's `className` override * wins (e.g. passing `px-2` beats the component's `px-6`). Lens components are * Tailwind utilities + `--gk-*` tokens, so this de-dupe matters. */export function cn(...inputs: ClassValue[]): string {  return twMerge(clsx(inputs));}/** * Accessible name from a free-form `label` prop: the label itself when it's a * plain string, otherwise undefined (a ReactNode can't become an aria-label). */export function stringLabel(label: unknown): string | undefined {  return typeof label === "string" ? label : undefined;}

// components/glasskit/toggle.tsximport type { ReactNode } from "react";import { cn } from "../lib/utils";/** * <Toggle> — a binary switch, D-pad-focusable (renders a real button with the * focusable class; useDpad activates it on Enter/Space). Controlled: pass * `checked` + `onChange`. The knob slides via a logical margin, so it mirrors * correctly under RTL (a switch is UI chrome, not world-anchored). */export function Toggle({  checked,  onChange,  label,  disabled,  className,}: {  checked: boolean;  onChange?: (next: boolean) => void;  label?: ReactNode;  disabled?: boolean;  className?: string;}) {  return (    <button      type="button"      role="switch"      aria-checked={checked}      disabled={disabled}      onClick={onChange ? () => onChange(!checked) : undefined}      className={cn(        "focusable t-body flex w-full items-center justify-between gap-4",        // gk-toggle--on drives the track gradient + the knob's margin-auto slide.        checked && "gk-toggle--on",        className,      )}    >      {label != null ? (        <span className="flex-1 text-start">{label}</span>      ) : null}      {/* Track + knob keep their gk-* classes: the track gradient/inset-shadow,       * the knob's depth shadow, and the margin-inline-start slide transition       * are bespoke visuals Tailwind can't express. */}      <span className="gk-toggle__track">        <span className="gk-toggle__knob" />      </span>    </button>  );}