50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1f80,"use client"; import { spring } from "@/lib/motion"; import { cn } from "@/lib/utils"; import { cva, type VariantProps } from "class-variance-authority"; import { animate, motion, useMotionValue, useReducedMotion, useTransform } from "motion/react"; import { Switch as SwitchPrimitive } from "radix-ui"; import { type ComponentProps, useEffect, useLayoutEffect, useRef, useState } from "react"; /* * The thumb's motion, start to finish (owner, 2026-10-14): * - Hover: the thumb stays at its end and stretches 2px towards the other side, as if it wants to go there. * - Press: it stretches further. * - Change: it travels still stretched, then settles round at the new end, so it moves like something * soft rather than sliding. A keyboard change stretches the same way. * - The "on" colour is a pill under the thumb, driven only by the thumb's position, so going off is going * on played backwards (owner, 2026-10-14): * - It always ends at the thumb's far edge. Going on it sweeps across with the thumb; going off the grey * follows in behind the thumb the same way. * - Its opacity follows the thumb's progress. Going on, it fades in over the start of the trip. Going * off, it stays solid most of the way, then reaches zero exactly as the thumb arrives, so no ring of * it is left around the thumb. * - No shadows. * * The thumb is placed with numbers rather than measured: `x` from the track's inner width, and its own * width (a small absolutely positioned pill, so nothing else reflows), both motion values on * spring.snappy, with the colour derived from them. Measuring would break inside anything scaled or * zoomed, such as a zoomed preview or a dialog scaling in. The numbers are in rem and match the size * classes. With reduced motion the thumb jumps and doesn't stretch. */ const switchVariants = cva( [ "relative isolate inline-flex shrink-0 cursor-pointer overflow-hidden rounded-full bg-input", "outline-ring focus-visible:outline-(length:--focus-ring-width) focus-visible:outline-offset-(--focus-ring-offset)", "disabled:cursor-not-allowed disabled:opacity-(--opacity-disabled)", ], { variants: { size: { sm: "h-4 w-7", md: "h-5 w-9", }, }, defaultVariants: { size: "md" }, }, ); /** * The thumb, in rem, matching the track classes above: the track's width less its 0.125rem padding on * each side (`inner`), and the thumb's width at rest and stretched. Its height is the class. */ const thumbs = { sm: { height: "h-3", inner: 1.5, rest: 0.75, stretched: 1 }, md: { height: "h-4", inner: 2, rest: 1, stretched: 1.25 }, } as const; /** How far the thumb stretches on hover (2px) */ const HOVER_STRETCH = 0.125; /** How long the thumb stays stretched after a change, while it travels */ const TRAVEL_MS = 140; /** * The colour's opacity from the thumb's progress (0 off, 1 on): 1.6√p, fitted to the original on fade. The * last 3% of the trip (half a pixel) counts as home, so the spring's slow settle leaves no faint ring. */ const fillOpacityAt = (progress: number) => Math.min(1, 1.6 * Math.sqrt(Math.max(0, (progress - 0.03) / 0.97))); export type SwitchProps = ComponentProps & VariantProps; /** * An on/off switch for settings that apply right away, built on Radix Switch (role="switch"). * Give it a visible label (``). */ function Switch({ className, size, checked, defaultChecked, disabled, onCheckedChange, onPointerDown, onPointerUp, onPointerEnter, onPointerLeave, ...props }: SwitchProps) { // Mirror the state so the thumb knows when it changed, controlled or not const [uncontrolled, setUncontrolled] = useState(defaultChecked ?? false); const on = checked ?? uncontrolled; const [pressed, setPressed] = useState(false); const [hovered, setHovered] = useState(false); const [travelling, setTravelling] = useState(false); const root = useRef(null); const reduceMotion = useReducedMotion(); const thumb = thumbs[size ?? "md"]; // After a change the thumb stays stretched for the trip, then settles round at the new end const previous = useRef(on); useEffect(() => { if (previous.current === on) return; previous.current = on; if (reduceMotion) return; setTravelling(true); const timer = setTimeout(() => setTravelling(false), TRAVEL_MS); return () => clearTimeout(timer); }, [on, reduceMotion]); // Pressed or travelling: fully stretched. Hovered: a little. Never with reduced motion or when disabled. const width = reduceMotion ? thumb.rest : pressed || travelling ? thumb.stretched : hovered && !disabled ? thumb.rest + HOVER_STRETCH : thumb.rest; // Off: at the start. On: at the end, its far edge fixed, so stretching always reaches towards the other side. const offset = on ? thumb.inner - width : 0; const move = reduceMotion ? { duration: 0 } : spring.snappy; // The thumb's position and width (rem) and the page direction (1, or -1 right to left), as motion values, // so the colour can follow the thumb frame by frame const x = useMotionValue(offset); const w = useMotionValue(width); const sign = useMotionValue(1); useLayoutEffect(() => { if (root.current) sign.set(getComputedStyle(root.current).direction === "rtl" ? -1 : 1); }, [sign]); useEffect(() => { const animation = animate(x, offset, move); return () => animation.stop(); }, [x, offset, move]); useEffect(() => { const animation = animate(w, width, move); return () => animation.stop(); }, [w, width, move]); const thumbX = useTransform( [sign, x], ([direction = 1, position = 0]: number[]) => `${direction * position}rem`, ); const thumbWidth = useTransform(w, (value) => `${value}rem`); // The colour ends at the thumb's far edge (full across when on) and fades with the thumb's progress, both // ways, so going off is going on played backwards const fillX = useTransform( [sign, x, w], ([direction = 1, position = 0, size = 0]: number[]) => `${direction * (position + size - thumb.inner)}rem`, ); const fillOpacity = useTransform(x, (position) => fillOpacityAt(position / (thumb.inner - thumb.rest))); return ( { setUncontrolled(value); // No hover stretch straight after a change, or the thumb would seem to want to go back; it // returns once the pointer leaves and comes back setHovered(false); onCheckedChange?.(value); }} onPointerEnter={(event) => { if (event.pointerType === "mouse") setHovered(true); onPointerEnter?.(event); }} onPointerDown={(event) => { setPressed(true); onPointerDown?.(event); }} onPointerUp={(event) => { setPressed(false); onPointerUp?.(event); }} onPointerLeave={(event) => { setPressed(false); setHovered(false); onPointerLeave?.(event); }} className={cn(switchVariants({ size }), className)} {...props} > ); } export { Switch, switchVariants }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority@^0.7.1",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority@^0.7.1"}]]}]}],["$","li","motion@^14.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion@^14.0.0"}]]}]}],["$","li","radix-ui@^1.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui@^1.7.0"}]]}]}]]}],["$","$L50",null,{"namespace":"@fewtone","registryDependencies":["https://ui.fewtone.com/r/tokens.json","https://ui.fewtone.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/fewtone/ui/switch.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]