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:T20f5,"use client"; import * as React from "react"; import { Slider as SliderPrimitive } from "radix-ui"; import { gsap, motionScale } from "@/lib/motion"; import { cn } from "@/lib/utils"; type SliderProps = React.ComponentProps & { /** A value tag above each thumb while dragging, hovering or focused. It swings with drag speed. */ showValue?: boolean; /** Formats the tag and tick labels, e.g. `(v) => \`${v}%\``. */ format?: (value: number) => string; /** Values to label under the track; they bump like detents as the thumb passes them. */ ticks?: number[]; }; const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v)); /** * A range slider with physical feedback (GSAP): the thumb swells on grab, the value tag springs in and swings * with the speed of the drag like a hanging label, ticks bump as you pass them, and the thumb squashes at the ends. */ function Slider({ className, defaultValue, value, min = 0, max = 100, onValueChange, showValue = false, format = String, ticks, orientation, ...props }: SliderProps) { const [internal, setInternal] = React.useState(() => value ?? defaultValue ?? [min]); const values = value ?? internal; const [active, setActive] = React.useState(false); const [focus, setFocus] = React.useState(false); const root = React.useRef(null); const last = React.useRef({ values, t: 0 }); const settle = React.useRef | null>(null); const range = max - min || 1; const vertical = orientation === "vertical"; const all = (slot: string) => Array.from(root.current?.querySelectorAll(`[data-slot="${slot}"]`) ?? []); React.useEffect(() => { if (!active) return; const up = () => setActive(false); window.addEventListener("pointerup", up); window.addEventListener("pointercancel", up); return () => { window.removeEventListener("pointerup", up); window.removeEventListener("pointercancel", up); }; }, [active]); React.useEffect(() => { const scale = root.current ? motionScale(root.current) : 0; gsap.to(all("slider-thumb"), { scale: active ? 1 + 0.2 * Math.min(scale, 1.5) : 1, duration: scale ? 0.2 : 0, ease: "cue" }); }, [active]); // The tag is for precise adjustment: it appears while dragging or using the keyboard, not on casual hover. const show = showValue && (active || focus); React.useEffect(() => { const tags = all("slider-tag"); if (!tags.length) return; const scale = root.current ? motionScale(root.current) : 0; gsap.to(tags, show ? { opacity: 1, scale: 1, y: 0, duration: scale ? 0.32 : 0, ease: "back.out(2.2)", overwrite: "auto" } : { opacity: 0, scale: 0.85, y: 6, duration: scale ? 0.15 : 0, ease: "cue", overwrite: "auto" }); }, [show]); const react = (next: number[]) => { const el = root.current; const scale = el ? motionScale(el) : 0; const now = performance.now(); const prev = last.current; last.current = { values: next, t: now }; if (!el || !scale) return; const dt = Math.max(16, now - prev.t); next.forEach((v, i) => { const p = prev.values[i] ?? v; // Swing the tag against the direction of travel, proportional to speed. const tag = el.querySelector(`[data-slot="slider-tag"][data-index="${i}"]`); if (tag && !vertical) gsap.to(tag, { rotation: clamp((-(v - p) / range) * (1000 / dt) * 22 * scale, -18, 18), duration: 0.12, ease: "cue", overwrite: "auto" }); // Detents: bump each tick the thumb crossed. ticks?.forEach((t) => { if ((p < t && v >= t) || (p > t && v <= t)) { const tick = el.querySelector(`[data-slot="slider-tick"][data-value="${t}"]`); if (tick) gsap.fromTo(tick, { y: -3 * scale, scale: 1.15 }, { y: 0, scale: 1, duration: 0.35, ease: "cue-snap" }); } }); // Ends: a small squash when the thumb hits min or max. if ((v === min || v === max) && p !== v) { const thumb = el.querySelectorAll('[data-slot="slider-thumb"]')[i]; if (thumb) gsap.fromTo(thumb, { scaleX: vertical ? 1.15 : 0.8, scaleY: vertical ? 0.8 : 1.15 }, { scaleX: 1, scaleY: 1, duration: 0.4, ease: "elastic.out(1, 0.5)" }); } }); if (settle.current) clearTimeout(settle.current); settle.current = setTimeout(() => gsap.to(all("slider-tag"), { rotation: 0, duration: 0.7, ease: "elastic.out(1, 0.35)" }), 80); }; const nearestTick = ticks?.reduce((a, b) => (Math.abs(b - (values[0] ?? 0)) < Math.abs(a - (values[0] ?? 0)) ? b : a), ticks[0]!); return (

{ setInternal(v); react(v); onValueChange?.(v); }} onPointerDown={() => setActive(true)} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} className="group/slider relative flex w-full touch-none items-center py-1.5 select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-1.5 data-[orientation=vertical]:py-0" {...props} > {values.map((v, i) => ( {showValue && ( )} ))} {ticks && !vertical && ( )}

); } export { Slider }; export type { SliderProps }; 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","radix-ui",{"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"}]]}]}]]}],["$","$L50",null,{"namespace":"@cuelark","registryDependencies":["utils","https://ui.cuelark.com/r/theme.json","https://ui.cuelark.com/r/motion.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/cuelark/ui/slider.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]