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/1o6_421saitt-.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/1o6_421saitt-.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:T2997,"use client"; import { Switch as SwitchPrimitive } from "@base-ui/react/switch"; import { cn } from "cn"; import { animate, motion, useMotionValue, useReducedMotion, type Transition, } from "motion/react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; const REDUCED_TRANSITION: Transition = { duration: 0 }; const invalidShakeStyles = ` @keyframes iandefined-invalid-shake-replay { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 28.57% { transform: translateX(6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 57.14% { transform: translateX(-6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 78.57% { transform: translateX(4px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 100% { transform: translateX(0); } } [data-invalid-shake="owner"] { animation-duration: 280ms; animation-timing-function: linear; } [data-invalid-shake="owner"].is-shaking[aria-invalid="true"], [data-invalid-shake="owner"].is-shaking[data-invalid], [data-invalid-shake="owner"].is-shaking:has([aria-invalid="true"]), [data-invalid-shake="owner"].is-shaking:has([data-invalid]) { animation-name: iandefined-invalid-shake-replay; will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-invalid-shake="owner"] { animation: none !important; transform: none !important; } } `; const spring = { moderate: { type: "spring" as const, duration: 0.16, bounce: 0, }, }; type SwitchProps = { checked?: boolean; defaultChecked?: boolean; onCheckedChange?: (checked: boolean) => void; thumbTransition?: Transition; size?: "sm" | "default" | "lg"; } & Omit< React.ComponentProps, "checked" | "defaultChecked" | "onCheckedChange" | "children" >; type SwitchSize = NonNullable; const METRICS = { sm: { trackWidth: 32, trackHeight: 18, thumbSize: 14, pillExtend: 2, pressExtend: 3, pressShrink: 1, }, default: { trackWidth: 40, trackHeight: 22, thumbSize: 18, pillExtend: 3, pressExtend: 4, pressShrink: 2, }, lg: { trackWidth: 48, trackHeight: 26, thumbSize: 22, pillExtend: 4, pressExtend: 5, pressShrink: 2, }, } as const; const THUMB_OFFSET = 2; const DRAG_DEAD_ZONE = 2; type SwitchPointerEvent = Parameters< NonNullable >[0]; function Switch({ checked, defaultChecked = false, onCheckedChange, disabled, thumbTransition, size = "default", className, ...props }: SwitchProps) { const hasMounted = useRef(false); const shouldReduceMotion = useReducedMotion(); const effectiveTransition = useMemo( () => shouldReduceMotion ? REDUCED_TRANSITION : (thumbTransition ?? spring.moderate), [shouldReduceMotion, thumbTransition] ); const [internalChecked, setInternalChecked] = useState(defaultChecked); const [hovered, setHovered] = useState(false); const [pressed, setPressed] = useState(false); const dragging = useRef(false); const didDrag = useRef(false); const pointerStart = useRef<{ clientX: number; originX: number; } | null>(null); const isControlled = checked !== undefined; const isChecked = checked ?? internalChecked; const metrics = METRICS[size]; const thumbTravel = metrics.trackWidth - metrics.thumbSize - THUMB_OFFSET * 2; const motionX = useMotionValue( isChecked ? THUMB_OFFSET + thumbTravel : THUMB_OFFSET ); const activeHovered = !disabled && hovered; const activePressed = !disabled && pressed; useEffect(() => { hasMounted.current = true; }, []); const thumbWidth = activePressed ? metrics.thumbSize + metrics.pressExtend : activeHovered ? metrics.thumbSize + metrics.pillExtend : metrics.thumbSize; const thumbHeight = activePressed ? metrics.thumbSize - metrics.pressShrink : metrics.thumbSize; const thumbY = activePressed ? THUMB_OFFSET + metrics.pressShrink / 2 : THUMB_OFFSET; const extraWidth = thumbWidth - metrics.thumbSize; const thumbX = isChecked ? THUMB_OFFSET + thumbTravel - extraWidth : THUMB_OFFSET; useEffect(() => { if (dragging.current) { return; } if (!hasMounted.current) { motionX.set(thumbX); } else { animate(motionX, thumbX, effectiveTransition); } }, [effectiveTransition, motionX, thumbX]); const handleCheckedChange = useCallback( (nextChecked: boolean) => { if (!isControlled) { setInternalChecked(nextChecked); } onCheckedChange?.(nextChecked); }, [isControlled, onCheckedChange] ); const handlePointerDown = useCallback( (event: SwitchPointerEvent) => { if (disabled || (event.pointerType === "mouse" && event.button !== 0)) { return; } setPressed(true); dragging.current = false; didDrag.current = false; pointerStart.current = { clientX: event.clientX, originX: motionX.get(), }; event.currentTarget.setPointerCapture(event.pointerId); }, [disabled, motionX] ); const handlePointerMove = useCallback( (event: SwitchPointerEvent) => { if (!pointerStart.current) { return; } const delta = event.clientX - pointerStart.current.clientX; if (!dragging.current) { if (Math.abs(delta) < DRAG_DEAD_ZONE) { return; } dragging.current = true; } const dragMin = THUMB_OFFSET; const pressedThumbWidth = metrics.thumbSize + metrics.pressExtend; const dragMax = metrics.trackWidth - THUMB_OFFSET - pressedThumbWidth; const rawX = pointerStart.current.originX + delta; motionX.set(Math.max(dragMin, Math.min(dragMax, rawX))); }, [metrics, motionX] ); 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 = metrics.thumbSize + metrics.pressExtend; const dragMax = metrics.trackWidth - THUMB_OFFSET - pressedThumbWidth; const shouldBeChecked = currentX > (dragMin + dragMax) / 2; if (shouldBeChecked !== isChecked) { handleCheckedChange(shouldBeChecked); } else { const snapTarget = isChecked ? THUMB_OFFSET + thumbTravel : THUMB_OFFSET; animate(motionX, snapTarget, effectiveTransition); } requestAnimationFrame(() => { didDrag.current = false; }); } pointerStart.current = null; }, [ effectiveTransition, handleCheckedChange, isChecked, metrics, motionX, thumbTravel, ]); const handlePointerCancel = useCallback(() => { if (!pointerStart.current) { return; } setPressed(false); if (dragging.current) { dragging.current = false; const snapTarget = isChecked ? THUMB_OFFSET + thumbTravel : THUMB_OFFSET; animate(motionX, snapTarget, effectiveTransition); } pointerStart.current = null; }, [effectiveTransition, isChecked, motionX, thumbTravel]); return ( <> { if (!didDrag.current) { handleCheckedChange(nextChecked); } }} onPointerCancel={handlePointerCancel} onPointerDown={handlePointerDown} onPointerEnter={() => { if (!disabled) { setHovered(true); } }} onPointerLeave={() => { setHovered(false); setPressed(false); }} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} style={{ width: metrics.trackWidth, height: metrics.trackHeight, }} > { const { style: baseStyle, onAnimationEnd: _onAnimationEnd, onAnimationIteration: _onAnimationIteration, onAnimationStart: _onAnimationStart, onDrag: _onDrag, onDragEnd: _onDragEnd, onDragStart: _onDragStart, ...rest } = thumbProps as React.HTMLAttributes; return ( ); }} /> ); } export { Switch }; export type { SwitchProps, SwitchSize }; 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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}],["$","li","motion",{"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"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@iandefined","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/switch.tsx","content":"$52","type":"registry:ui","target":"components/ui/switch.tsx"}],"className":"h-[70svh] min-h-80"}]]}]