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:T22a0,"use client"; import { forwardRef, useRef, useState, useEffect, useCallback, useId, type HTMLAttributes, } from "react"; import { motion, useMotionValue, animate, type Transition } from "framer-motion"; import * as SwitchPrimitive from "@radix-ui/react-switch"; import { cn } from "@/lib/utils"; import { spring } from "@/lib/springs"; import { useSize, type SizeVariant } from "@/lib/size-context"; interface SwitchProps extends HTMLAttributes { label: string; checked: boolean; onToggle: () => void; disabled?: boolean; thumbTransition?: Transition; /** Pins the switch to one step of the size ladder (see /docs/sizes). * Omitted, it follows the surrounding SizeProvider. */ size?: SizeVariant; } // Track/thumb geometry per ladder step. The hover pill-extend is the same 2px // at both steps; only the press extend/squash scales down with the thumb, so the // compact switch keeps the same feel. const METRICS = { default: { trackWidth: 34, trackHeight: 20, thumbSize: 16, pillExtend: 2, pressExtend: 4, pressShrink: 4, }, compact: { trackWidth: 28, trackHeight: 16, thumbSize: 12, pillExtend: 2, pressExtend: 3, pressShrink: 3, }, } as const; const THUMB_OFFSET = 2; const DRAG_DEAD_ZONE = 2; const Switch = forwardRef( ({ label, checked, onToggle, disabled = false, thumbTransition, size, className, ...props }, ref) => { const labelId = useId(); const hasMounted = useRef(false); const [hovered, setHovered] = useState(false); const [pressed, setPressed] = useState(false); const sizeClasses = useSize(size); const m = METRICS[sizeClasses.variant]; const thumbTravel = m.trackWidth - m.thumbSize - THUMB_OFFSET * 2; // Drag refs (not state to avoid re-renders during drag) const dragging = useRef(false); const didDrag = useRef(false); const pointerStart = useRef<{ clientX: number; originX: number; } | null>(null); // Motion value for thumb x-axis const motionX = useMotionValue( checked ? THUMB_OFFSET + thumbTravel : THUMB_OFFSET ); useEffect(() => { hasMounted.current = true; }, []); // Compute thumb shape const thumbWidth = pressed ? m.thumbSize + m.pressExtend : hovered ? m.thumbSize + m.pillExtend : m.thumbSize; const thumbHeight = pressed ? m.thumbSize - m.pressShrink : m.thumbSize; const thumbY = pressed ? THUMB_OFFSET + m.pressShrink / 2 : THUMB_OFFSET; const extraWidth = thumbWidth - m.thumbSize; const thumbX = checked ? THUMB_OFFSET + thumbTravel - extraWidth : THUMB_OFFSET; // Sync motionX when thumbX changes (hover/press/checked) and not dragging useEffect(() => { if (dragging.current) return; if (!hasMounted.current) { motionX.set(thumbX); } else { animate(motionX, thumbX, thumbTransition ?? spring.moderate); } }, [thumbX, motionX, thumbTransition]); // --- Pointer handlers --- const handlePointerDown = useCallback( (e: React.PointerEvent) => { if (disabled) return; if (e.pointerType === "mouse" && e.button !== 0) return; setPressed(true); dragging.current = false; didDrag.current = false; pointerStart.current = { clientX: e.clientX, originX: motionX.get(), }; (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId); }, [disabled, motionX] ); const handlePointerMove = useCallback( (e: React.PointerEvent) => { if (!pointerStart.current) return; const delta = e.clientX - pointerStart.current.clientX; if (!dragging.current) { if (Math.abs(delta) < DRAG_DEAD_ZONE) return; dragging.current = true; } const dragMin = THUMB_OFFSET; const pressedThumbWidth = m.thumbSize + m.pressExtend; const dragMax = m.trackWidth - THUMB_OFFSET - pressedThumbWidth; const rawX = pointerStart.current.originX + delta; motionX.set(Math.max(dragMin, Math.min(dragMax, rawX))); }, [motionX, m] ); const handlePointerUp = useCallback( () => { if (!pointerStart.current) return; setPressed(false); if (dragging.current) { didDrag.current = true; dragging.current = false; const currentX = motionX.get(); const dragMin = THUMB_OFFSET; const pressedThumbWidth = m.thumbSize + m.pressExtend; const dragMax = m.trackWidth - THUMB_OFFSET - pressedThumbWidth; const midpoint = (dragMin + dragMax) / 2; const shouldBeOn = currentX > midpoint; if (shouldBeOn !== checked) { onToggle(); } else { // Snap back to current resting position (un-pressed) const snapTarget = checked ? THUMB_OFFSET + thumbTravel : THUMB_OFFSET; animate(motionX, snapTarget, thumbTransition ?? spring.moderate); } requestAnimationFrame(() => { didDrag.current = false; }); } pointerStart.current = null; }, [checked, onToggle, motionX, thumbTransition, m, thumbTravel] ); const handlePointerCancel = useCallback( () => { if (!pointerStart.current) return; setPressed(false); if (dragging.current) { dragging.current = false; // Gesture cancelled by the system — snap back without toggling const snapTarget = checked ? THUMB_OFFSET + thumbTravel : THUMB_OFFSET; animate(motionX, snapTarget, thumbTransition ?? spring.moderate); } pointerStart.current = null; }, [checked, motionX, thumbTransition, thumbTravel] ); return (

{ if (e.pointerType === "mouse") setHovered(true); }} onPointerLeave={() => setHovered(false)} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} onPointerCancel={handlePointerCancel} onClick={() => { if (disabled || didDrag.current) return; onToggle(); }} {...props} > {/* Switch */} { if (didDrag.current) return; onToggle(); }} disabled={disabled} tabIndex={0} className={cn( "relative shrink-0 rounded-full outline-none cursor-pointer", "transition-colors duration-80", "focus-visible:ring-1 focus-visible:ring-[color:var(--focus-ring,#6B97FF)] focus-visible:ring-offset-2 focus-visible:ring-offset-background" )} style={{ width: m.trackWidth, height: m.trackHeight, backgroundColor: checked ? hovered ? "#5C89F2" : "#6B97FF" : hovered ? "color-mix(in oklab, var(--accent), rgb(var(--overlay)) 10%)" : "var(--accent)", }} onClick={(e) => e.stopPropagation()} > {/* Label */} {label}

); } ); Switch.displayName = "Switch"; export { Switch }; export type { SwitchProps }; 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","framer-motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/framer-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":"framer-motion"}]]}]}],["$","li","@radix-ui/react-switch",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-switch","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/react-switch"}]]}]}]]}],["$","$L50",null,{"namespace":"@fluid","registryDependencies":["utils","https://www.fluidfunctionalism.com/r/springs.json","https://www.fluidfunctionalism.com/r/font-weight.json","https://www.fluidfunctionalism.com/r/size-context.json","https://www.fluidfunctionalism.com/r/tokens.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/radix/switch.tsx","content":"$52","type":"registry:ui","target":"components/ui/switch.tsx"}],"className":"h-[70svh] min-h-80"}]]}]