52: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"] 53: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"] 54:T2f31,"use client"; import { motion, useMotionValue, useSpring, useTransform } from "motion/react"; import { forwardRef, useEffect, useId, useRef, useState } from "react"; import { cn } from "@/lib/utils"; const switchSizes = { sm: { trackX: 46, trackY: 24, thumbX: 22, thumbY: 18, padding: 3, }, md: { trackX: 62, trackY: 30, thumbX: 32, thumbY: 24, padding: 4, }, lg: { trackX: 74, trackY: 36, thumbX: 34, thumbY: 28, padding: 5, }, } as const; const switchTones = { neutral: { off: "color-mix(in srgb, var(--muted) 82%, transparent)", on: "#34c759", thumb: "#ffffff", glow: "color-mix(in srgb, #34c759 32%, transparent)", }, accent: { off: "color-mix(in srgb, var(--muted) 82%, transparent)", on: "var(--foreground)", thumb: "#ffffff", glow: "color-mix(in srgb, var(--accent) 42%, transparent)", }, } as const; const thumbSpring = { stiffness: 700, damping: 48, mass: 0.55, }; const grabSpring = { stiffness: 500, damping: 25, }; interface AppleSwitchProps extends Omit< React.ButtonHTMLAttributes, "onChange" | "role" > { checked?: boolean; defaultChecked?: boolean; onCheckedChange?: (checked: boolean) => void; label?: React.ReactNode; description?: React.ReactNode; /** @default "md" */ size?: keyof typeof switchSizes; /** @default "neutral" */ tone?: keyof typeof switchTones; /** @default "right" */ labelSide?: "left" | "right"; } const clamp = (value: number, min: number, max: number) => { return Math.min(Math.max(value, min), max); }; const AppleSwitch = forwardRef( ( { checked, onCheckedChange, label, description, size = "md", tone = "neutral", labelSide = "right", className, style, disabled, defaultChecked, id, type = "button", onClick, onPointerCancel, onPointerDown, onPointerLeave, onPointerMove, onPointerUp, ...props }, ref, ) => { const generatedId = useId(); const switchId = id ?? generatedId; const [uncontrolledChecked, setUncontrolledChecked] = useState( Boolean(defaultChecked), ); const currentChecked = checked ?? uncontrolledChecked; const metrics = switchSizes[size]; const colors = switchTones[tone]; const thumbTravel = metrics.trackX - metrics.thumbX - metrics.padding * 2; const targetX = useMotionValue(currentChecked ? thumbTravel : 0); const thumbX = useSpring(targetX, thumbSpring); const grabTarget = useMotionValue(0); const grabProgress = useSpring(grabTarget, grabSpring); const thumbWidth = useTransform( grabProgress, [0, 1], [metrics.thumbX, metrics.thumbX + metrics.padding * 4.5], ); const thumbHeight = useTransform( grabProgress, [0, 1], [metrics.thumbY, metrics.thumbY + metrics.padding * 2.3], ); const thumbOffsetX = useTransform( () => thumbX.get() - (thumbWidth.get() - metrics.thumbX) / 2, ); const liquidOpacity = useTransform(grabProgress, [0, 1], [0, 0.76]); const liquidScale = useTransform(grabProgress, [0, 1], [0.82, 1.08]); const thumbOpacity = useTransform(grabProgress, [0, 1], [1, 0.2]); const dragStartX = useRef(0); const dragStartThumbX = useRef(0); const isDragging = useRef(false); const activePointerId = useRef(null); const suppressNextClick = useRef(false); const activeProgress = useTransform(thumbX, [0, thumbTravel], [0, 1]); const fillOpacity = useTransform(activeProgress, [0, 1], [0, 1]); const glowOpacity = useTransform( activeProgress, [0, 0.7, 1], [0, 0.18, 0.2], ); const glowScale = useTransform(activeProgress, [0, 1], [0.82, 1]); useEffect(() => { if (activePointerId.current !== null) return; targetX.set(currentChecked ? thumbTravel : 0); }, [currentChecked, thumbTravel, targetX]); const setChecked = (next: boolean) => { if (next === currentChecked) { targetX.set(next ? thumbTravel : 0); return; } if (checked === undefined) { setUncontrolledChecked(next); } targetX.set(next ? thumbTravel : 0); onCheckedChange?.(next); }; const handlePointerDown = ( event: React.PointerEvent, ) => { onPointerDown?.(event); if (event.defaultPrevented || disabled) return; if (event.pointerType === "mouse" && event.button !== 0) return; event.currentTarget.setPointerCapture(event.pointerId); activePointerId.current = event.pointerId; grabTarget.set(1); dragStartX.current = event.clientX; dragStartThumbX.current = thumbX.get(); targetX.set(dragStartThumbX.current); isDragging.current = false; }; const handlePointerMove = ( event: React.PointerEvent, ) => { onPointerMove?.(event); if (event.defaultPrevented || disabled) return; if ( activePointerId.current !== null && event.pointerId !== activePointerId.current ) { return; } if (!event.currentTarget.hasPointerCapture(event.pointerId)) return; const deltaX = event.clientX - dragStartX.current; if (Math.abs(deltaX) > 3) { isDragging.current = true; } if (!isDragging.current) return; event.preventDefault(); const nextX = dragStartThumbX.current + deltaX; targetX.set(clamp(nextX, 0, thumbTravel)); }; const handlePointerUp = (event: React.PointerEvent) => { onPointerUp?.(event); if ( activePointerId.current !== null && event.pointerId !== activePointerId.current ) { return; } if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } activePointerId.current = null; grabTarget.set(0); if (!isDragging.current) return; isDragging.current = false; suppressNextClick.current = true; setChecked(targetX.get() >= thumbTravel / 2); }; const handlePointerCancel = ( event: React.PointerEvent, ) => { onPointerCancel?.(event); activePointerId.current = null; isDragging.current = false; grabTarget.set(0); targetX.set(currentChecked ? thumbTravel : 0); }; const handleClick = (event: React.MouseEvent) => { onClick?.(event); if (event.defaultPrevented || disabled) return; if (suppressNextClick.current) { suppressNextClick.current = false; event.preventDefault(); return; } setChecked(!currentChecked); }; useEffect(() => { const stopFromWindow = () => { if (!isDragging.current && activePointerId.current === null) return; const wasDragging = isDragging.current; isDragging.current = false; activePointerId.current = null; grabTarget.set(0); if (!wasDragging) return; suppressNextClick.current = true; setChecked(targetX.get() >= thumbTravel / 2); }; window.addEventListener("pointerup", stopFromWindow); window.addEventListener("pointercancel", stopFromWindow); window.addEventListener("blur", stopFromWindow); return () => { window.removeEventListener("pointerup", stopFromWindow); window.removeEventListener("pointercancel", stopFromWindow); window.removeEventListener("blur", stopFromWindow); }; }); const switchEl = ( ); if (!label) return switchEl; return ( {labelSide === "left" && ( {label} {description && ( {description} )} )} {switchEl} {labelSide === "right" && ( {label} {description && ( {description} )} )} ); }, ); AppleSwitch.displayName = "AppleSwitch"; export { AppleSwitch, type AppleSwitchProps }; 51:["$","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","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@unlumen-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/components/unlumen/apple-switch/index.tsx","content":"$54","type":"registry:ui","target":"components/unlumen-ui/apple-switch.tsx"}],"className":"h-[70svh] min-h-80"}]]}]