51: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"] 52: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"] 53:T5b38,"use client"; import { Slider } from "@base-ui/react/slider"; import { animate, motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react"; import { type ChangeEvent, type CSSProperties, type KeyboardEvent, type ReactNode, useEffect, useId, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/sona-utils"; export interface FluidSliderProps { /** Visible label associated with the slider. */ label: ReactNode; /** Controlled slider value. @default undefined */ value?: number; /** Initial value for uncontrolled usage. @default 50 */ defaultValue?: number; /** Called continuously while the value changes. @default undefined */ onValueChange?: ( value: number, details: Slider.Root.ChangeEventDetails, ) => void; /** Called when a pointer or keyboard interaction commits. @default undefined */ onValueCommitted?: ( value: number, details: Slider.Root.CommitEventDetails, ) => void; /** Minimum allowed value. @default 0 */ min?: number; /** Maximum allowed value. @default 100 */ max?: number; /** Smallest value increment. @default 1 */ step?: number; /** Increment used by Page Up, Page Down, and modified arrow keys. @default 10 */ largeStep?: number; /** Numeric positions rendered as quiet reference marks. @default [] */ marks?: number[]; /** Formats the visible and accessible value text. @default undefined */ formatValue?: (value: number) => string; /** Intl options used when no custom formatter is supplied. @default undefined */ format?: Intl.NumberFormatOptions; /** Locale used by the default number formatter. @default undefined */ locale?: Intl.LocalesArgument; /** Whether the trailing formatted value is visible. @default true */ showValue?: boolean; /** Whether the visible value can be edited as an exact number. @default true */ editableValue?: boolean; /** Whether the active boundary grip is visible. @default true */ showHandle?: boolean; /** Whether the slider ignores user interaction. @default false */ disabled?: boolean; /** Name submitted with the slider's hidden range input. @default undefined */ name?: string; /** ID of the form that owns the slider input. @default undefined */ form?: string; /** Accessible name used instead of the visible label. @default undefined */ ariaLabel?: string; /** Additional classes for the slider root. @default undefined */ className?: string; /** Additional classes for the track surface. @default undefined */ trackClassName?: string; /** Additional classes for the filled surface. @default undefined */ surfaceClassName?: string; /** Additional classes for the fixed label. @default undefined */ labelClassName?: string; /** Additional classes for the trailing value. @default undefined */ valueClassName?: string; /** Additional classes for the boundary grip. @default undefined */ handleClassName?: string; } const tokenStyle = { "--fluid-slider-track": "var(--background)", "--fluid-slider-surface": "color-mix(in oklab, var(--primary) 16%, var(--background))", "--fluid-slider-surface-active": "color-mix(in oklab, var(--primary) 22%, var(--background))", "--fluid-slider-handle": "var(--primary)", "--fluid-slider-label": "var(--foreground)", "--fluid-slider-value": "var(--muted-foreground)", "--fluid-slider-mark": "color-mix(in oklab, var(--foreground) 32%, transparent)", "--fluid-slider-focus-ring": "var(--ring)", "--fluid-slider-disabled-opacity": "0.48", "--fluid-slider-border-radius": "var(--radius)", } as CSSProperties; function clamp(value: number, min: number, max: number) { return Math.min(Math.max(value, min), max); } function rubberband(overshoot: number) { const deadZone = 32; const maximumStretch = 8; const cursorRange = 200; const direction = Math.sign(overshoot); const distancePastEdge = Math.max(0, Math.abs(overshoot) - deadZone); return ( direction * maximumStretch * Math.sqrt(Math.min(distancePastEdge / cursorRange, 1)) ); } function decimalPlaces(value: number) { const [, exponent = "0"] = String(value).toLowerCase().split("e"); const fraction = String(value).split(".")[1]?.length ?? 0; return Math.max(0, fraction - Number(exponent)); } function roundToStep(value: number, min: number, max: number, step: number) { const clamped = clamp(value, min, max); if (clamped === min || clamped === max || step <= 0) return clamped; const rounded = min + Math.round((clamped - min) / step) * step; return Number( clamp(rounded, min, max).toFixed( Math.max(decimalPlaces(step), decimalPlaces(min), decimalPlaces(max)), ), ); } function snapToMagneticDecile(value: number, min: number, max: number) { if (max <= min) return min; const normalized = (value - min) / (max - min); const nearest = Math.round(normalized * 10) / 10; return Math.abs(normalized - nearest) <= 0.03125 ? min + nearest * (max - min) : value; } export default function FluidSlider({ label, value, defaultValue = 50, onValueChange, onValueCommitted, min = 0, max = 100, step = 1, largeStep = 10, marks = [], formatValue, format, locale, showValue = true, editableValue = true, showHandle = true, disabled = false, name, form, ariaLabel, className, trackClassName, surfaceClassName, labelClassName, valueClassName, handleClassName, }: FluidSliderProps) { const labelId = useId(); const shouldReduceMotion = useReducedMotion(); const [internalValue, setInternalValue] = useState(() => clamp(defaultValue, min, max), ); const [editingValue, setEditingValue] = useState(false); const [inputValue, setInputValue] = useState(""); const currentValue = clamp(value ?? internalValue, min, max); const range = max - min; const progress = range === 0 ? 0 : ((currentValue - min) / range) * 100; const controlRef = useRef(null); const valueInputRef = useRef(null); const pointerActiveRef = useRef(false); const trackPressRef = useRef(false); const dragMovedRef = useRef(false); const pointerStartXRef = useRef(0); const fillAnimationRef = useRef | null>(null); const grabOffsetRef = useRef(0); const pointerVelocityRef = useRef(0); const previousPointerRef = useRef({ x: 0, time: 0 }); const settleAnimationRef = useRef | null>(null); const progressMotion = useMotionValue(progress / 100); const overshoot = useMotionValue(0); const trackWidth = useMotionValue(1); const direction = useMotionValue(1); const press = useMotionValue(0); const pressAnimationRef = useRef | null>(null); useEffect(() => { const target = progress / 100; fillAnimationRef.current?.stop(); // A tap on the inactive track (pointer pressed but not yet dragged) should // glide the fill to the new value. Dragging tracks 1:1 and keyboard/external // changes stay instant, per the interaction spec. const isTap = pointerActiveRef.current && !dragMovedRef.current; if (isTap && !shouldReduceMotion) { fillAnimationRef.current = animate(progressMotion, target, { type: "spring", stiffness: 420, damping: 40, mass: 0.9, }); } else { progressMotion.set(target); } }, [progress, progressMotion, shouldReduceMotion]); useEffect(() => { const control = controlRef.current; if (!control) return; const updateWidth = () => trackWidth.set(control.getBoundingClientRect().width); updateWidth(); const resizeObserver = new ResizeObserver(updateWidth); resizeObserver.observe(control); return () => resizeObserver.disconnect(); }, [trackWidth]); useEffect( () => () => { settleAnimationRef.current?.stop(); pressAnimationRef.current?.stop(); fillAnimationRef.current?.stop(); }, [], ); // The filled fraction (0–1), including any damped overshoot past the bounds. // Clip-path, not scaleX, sizes the fill so its border-radius stays a true, // undistorted match for the track corners at every value. const fillFraction = useTransform(() => { const width = Math.max(trackWidth.get(), 1); const directionalOvershoot = (overshoot.get() / width) * direction.get(); return clamp(progressMotion.get() + directionalOvershoot, 0, 1); }); const surfaceClipPath = useTransform(() => { const inset = (1 - fillFraction.get()) * 100; const isRtl = direction.get() === -1; const insetEnd = isRtl ? 0 : inset; const insetStart = isRtl ? inset : 0; return `inset(0px ${insetEnd}% 0px ${insetStart}% round var(--fluid-slider-border-radius))`; }); // The visual track stretches beyond the active edge as the drag exceeds the // boundary. Keeping this separate from Slider.Control preserves its stable // hit target and Base UI's range semantics. const rubberBandWidth = useTransform( overshoot, (stretch) => `calc(100% + ${Math.abs(stretch)}px)`, ); const rubberBandX = useTransform(overshoot, (stretch) => stretch < 0 ? stretch : 0, ); // Immediate-response squash: the active surface compresses slightly while // pressed and eases back on release. Presentation only — never the value. const surfaceScaleY = useTransform(press, [0, 1], [1, 0.98]); const animatePress = (target: number) => { pressAnimationRef.current?.stop(); if (shouldReduceMotion) { press.set(target); return; } pressAnimationRef.current = animate(press, target, { type: "spring", stiffness: 640, damping: 34, mass: 0.6, }); }; const formatter = useMemo( () => new Intl.NumberFormat(locale, format), [format, locale], ); const formattedValue = formatValue ? formatValue(currentValue) : formatter.format(currentValue); const visibleMarks = marks.filter((mark) => mark >= min && mark <= max); useEffect(() => { if (!editingValue) return; valueInputRef.current?.focus(); valueInputRef.current?.select(); }, [editingValue]); const settleOvershoot = () => { pointerActiveRef.current = false; trackPressRef.current = false; controlRef.current?.removeAttribute("data-pressed"); animatePress(0); if (overshoot.get() === 0) return; settleAnimationRef.current?.stop(); if (shouldReduceMotion) { overshoot.set(0); return; } settleAnimationRef.current = animate(overshoot, 0, { type: "spring", stiffness: 520, damping: 42, mass: 0.65, velocity: pointerVelocityRef.current, }); }; // Base UI's own track-press handler can't resolve the thumb when it is // rendered through motion (getFingerState returns null), so a bare-track tap // never sets the value. Since Slider.Root is fully controlled by this // component, we drive Base UI's hidden range input directly: it fires the // real onValueChange with proper event details, which flows through the // Slider.Root handler below. const applyValue = (nextValue: number) => { const control = controlRef.current; if (!control) return; const input = control.querySelector( 'input[type="range"]', ); if (!input || Number(input.value) === nextValue) return; const nativeSetter = Object.getOwnPropertyDescriptor( HTMLInputElement.prototype, "value", )?.set; nativeSetter?.call(input, String(nextValue)); input.dispatchEvent(new Event("input", { bubbles: true })); }; const applyValueFromClientX = (clientX: number) => { const control = controlRef.current; if (!control) return; const rect = control.getBoundingClientRect(); if (rect.width === 0) return; const isRtl = getComputedStyle(control).direction === "rtl"; let ratio = (clientX - rect.left) / rect.width; if (isRtl) ratio = 1 - ratio; ratio = clamp(ratio, 0, 1); const raw = min + ratio * range; const stepCount = range / step; const snapped = stepCount <= 10 ? roundToStep(raw, min, max, step) : roundToStep(snapToMagneticDecile(raw, min, max), min, max, step); applyValue(snapped); }; const startValueEdit = () => { if (disabled || !editableValue) return; setInputValue( currentValue.toFixed( Math.max(decimalPlaces(step), decimalPlaces(min), decimalPlaces(max)), ), ); setEditingValue(true); }; const finishValueEdit = (commit: boolean) => { if (commit) { const parsed = Number(inputValue); if (Number.isFinite(parsed)) applyValue(roundToStep(parsed, min, max, step)); } setEditingValue(false); controlRef.current ?.querySelector('input[type="range"]') ?.focus({ preventScroll: true }); }; const handleValueInputChange = (event: ChangeEvent) => { setInputValue(event.target.value); }; const handleValueInputKeyDown = (event: KeyboardEvent) => { if (event.key !== "Enter" && event.key !== "Escape") return; event.preventDefault(); finishValueEdit(event.key === "Enter"); }; const handlePointerDown = (event: PointerEvent) => { if (disabled || event.button !== 0) return; if ( (event.target as HTMLElement).closest("[data-fluid-slider-value-control]") ) { return; } settleAnimationRef.current?.stop(); pointerActiveRef.current = true; dragMovedRef.current = false; pointerStartXRef.current = event.clientX; controlRef.current?.setAttribute("data-pressed", ""); animatePress(1); pointerVelocityRef.current = 0; previousPointerRef.current = { x: event.clientX, time: event.timeStamp }; const control = controlRef.current; if (control) { const rect = control.getBoundingClientRect(); trackWidth.set(rect.width); direction.set(getComputedStyle(control).direction === "rtl" ? -1 : 1); } const target = event.target as HTMLElement; const pressedHandle = target.closest( "[data-fluid-slider-hit]", ); const thumb = target.closest("[data-fluid-slider-thumb]"); if (pressedHandle && thumb) { trackPressRef.current = false; const thumbRect = thumb.getBoundingClientRect(); grabOffsetRef.current = event.clientX - (thumbRect.left + thumbRect.width / 2); } else { // A surface press is a positional command, not a drag gesture. Move the // value to that point immediately; continuous adjustment begins only // from the boundary indicator. trackPressRef.current = true; grabOffsetRef.current = 0; overshoot.set(0); applyValueFromClientX(event.clientX); } }; const handlePointerMove = (event: PointerEvent) => { if (!pointerActiveRef.current || disabled) return; // Once the indicator crosses the drag threshold, stop any pending tap // glide so the boundary stays locked 1:1 to the pointer. A surface press // is a positional command, so its glide must run to completion. if ( !trackPressRef.current && !dragMovedRef.current && Math.abs(event.clientX - pointerStartXRef.current) > 8 ) { dragMovedRef.current = true; fillAnimationRef.current?.stop(); } // Surface presses set one value on pointer-down. Only the indicator is a // continuous drag target. if (trackPressRef.current) return; const previous = previousPointerRef.current; const elapsed = Math.max(event.timeStamp - previous.time, 1); pointerVelocityRef.current = ((event.clientX - previous.x) / elapsed) * 1000; previousPointerRef.current = { x: event.clientX, time: event.timeStamp }; if (shouldReduceMotion) { overshoot.set(0); return; } const control = controlRef.current; if (!control) return; const rect = control.getBoundingClientRect(); const presentedBoundary = event.clientX - grabOffsetRef.current; const rawOvershoot = presentedBoundary < rect.left ? presentedBoundary - rect.left : presentedBoundary > rect.right ? presentedBoundary - rect.right : 0; overshoot.set(rubberband(rawOvershoot)); }; useEffect(() => { const control = controlRef.current; if (!control) return; control.addEventListener("pointerdown", handlePointerDown); control.addEventListener("pointermove", handlePointerMove); control.addEventListener("pointerup", settleOvershoot); control.addEventListener("pointercancel", settleOvershoot); control.addEventListener("lostpointercapture", settleOvershoot); return () => { control.removeEventListener("pointerdown", handlePointerDown); control.removeEventListener("pointermove", handlePointerMove); control.removeEventListener("pointerup", settleOvershoot); control.removeEventListener("pointercancel", settleOvershoot); control.removeEventListener("lostpointercapture", settleOvershoot); }; }); const fluidStyle = { ...tokenStyle, "--fluid-slider-progress": progress, } as CSSProperties; return ( { if (value === undefined) setInternalValue(nextValue); onValueChange?.(nextValue, details); }} onValueCommitted={onValueCommitted} className={cn( "group/fluid-slider w-full min-h-12 max-w-xl select-none rounded-xl", disabled && "pointer-events-none opacity-(--fluid-slider-disabled-opacity)", className, )} style={fluidStyle} >

} className={cn( "w-full! absolute inset-0 origin-left rounded-(--fluid-slider-border-radius) bg-(--fluid-slider-surface) shadow-[inset_0_1px_0_color-mix(in_oklab,var(--background)_55%,transparent),0_1px_2px_color-mix(in_oklab,var(--foreground)_5%,transparent)] transition-[filter,background-color] duration-150 rtl:origin-right", surfaceClassName, )} style={{ insetInlineStart: 0, insetInlineEnd: 0 }} /> {visibleMarks.map((mark) => { const markProgress = range === 0 ? 0 : ((mark - min) / range) * 100; return ( ); })} {label} {showValue && (

{editingValue ? ( finishValueEdit(true)} className={cn( "w-[5.5ch] bg-transparent text-end font-medium text-(--fluid-slider-label) text-sm tabular-nums outline-none", valueClassName, )} /> ) : ( )}

)} } data-fluid-slider-thumb="" aria-label={ariaLabel} aria-valuetext={formattedValue} className="absolute z-20 h-full w-0 outline-none" > ); } 50:["$","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"}]]}]}]]}],["$","$L51",null,{"namespace":"@sona-ui","registryDependencies":["@sona-ui/sona-utils"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/sonaui/fluid-slider/fluid-slider.tsx","content":"$53","type":"registry:ui","target":"components/ui/fluid-slider/fluid-slider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]