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:T174e,'use client' import { Slider } from '@base-ui/react/slider' import { SpringValue } from '@liquefy-ui/core' import { forwardRef, useEffect, useRef, type HTMLAttributes, type ReactNode } from 'react' import { useLiquefyConfig } from '@/lib/provider' import { useLiquidStyles, type LiquidStyleProps } from '@/lib/styles-prop' // This wrapped a bare `input[type=range]` and painted it through the vendor // pseudo-elements, which is why the filled part of the track was a fixed // gradient rather than the value: `::-webkit-slider-runnable-track` cannot know // where the thumb is. Firefox got a plain grey track instead, because // `::-moz-range-track` cannot take the gradient at all. Base UI draws the track, // the filled indicator and the thumb as real elements, so the fill follows the // value and both browsers get the same slider. export type LiquidSliderProps = Omit, 'defaultValue' | 'onChange'> & LiquidStyleProps & { defaultValue?: number disabled?: boolean endAdornment?: ReactNode label?: string max?: number min?: number name?: string onValueChange?: (value: number) => void startAdornment?: ReactNode step?: number value?: number } /** A slider carries one value here; Base UI's array form is for ranged sliders. */ const single = (value: number | number[]): number => Array.isArray(value) ? value[0] ?? 0 : value export const LiquidSlider = forwardRef(({ 'aria-label': ariaLabel, className, defaultValue, disabled, endAdornment, label, max = 100, min = 0, name, onValueChange, startAdornment, step, style, styles, value, ...props }, forwardedRef) => { const config = useLiquefyConfig() const thumbRef = useRef(null) const lastValue = useRef(single(value ?? defaultValue ?? min)) // The springs live in an effect, but the value changes arrive as React // callbacks, so the two talk through these. const kick = useRef<(moved: number) => void>(() => {}) const settleTo = useRef<(target: number) => void>(() => {}) // Spring-driven thumb squish: every value change kicks a horizontal stretch // that springs back, so the thumb wobbles like jelly while you drag it. useEffect(() => { const thumb = thumbRef.current if (!thumb || config.motion === false) return undefined const wobbliness = config.wobbliness const scaleX = new SpringValue(1, { damping: 13, mass: 0.9, stiffness: 340 }) const scaleY = new SpringValue(1, { damping: 13, mass: 0.9, stiffness: 340 }) let frame = 0 let lastTime = performance.now() const apply = () => { thumb.style.setProperty('--lq-thumb-sx', scaleX.current.toFixed(4)) thumb.style.setProperty('--lq-thumb-sy', scaleY.current.toFixed(4)) } const tick = (time: number) => { const delta = (time - lastTime) / 1000 lastTime = time const movingX = scaleX.step(delta) const movingY = scaleY.step(delta) apply() frame = movingX || movingY ? requestAnimationFrame(tick) : 0 } const start = () => { if (frame) return lastTime = performance.now() frame = requestAnimationFrame(tick) } kick.current = (moved) => { const amount = Math.min(0.35 + moved * 9 * wobbliness, 1.25) scaleX.velocity += amount scaleY.velocity -= amount start() } settleTo.current = (target) => { scaleX.setTarget(target) scaleY.setTarget(target) start() } // A drag that ends anywhere on the page still ends the drag. const settle = () => settleTo.current(1) window.addEventListener('pointerup', settle) window.addEventListener('pointercancel', settle) return () => { cancelAnimationFrame(frame) window.removeEventListener('pointerup', settle) window.removeEventListener('pointercancel', settle) kick.current = () => {} settleTo.current = () => {} thumb.style.removeProperty('--lq-thumb-sx') thumb.style.removeProperty('--lq-thumb-sy') } }, [config.motion, config.wobbliness]) // The slider is the layout box, so it owns className, style and styles alike. const root = useLiquidStyles('lq-slider', { className, style, styles }) return ( { const nextValue = single(next) const moved = Math.abs(nextValue - lastValue.current) / Math.max(max - min, 1) lastValue.current = nextValue kick.current(moved) onValueChange?.(nextValue) }} step={step} style={root.style} value={value} {...props} > {label && {label}} {startAdornment && {startAdornment}} settleTo.current(1.16)} > ariaLabel : undefined} inputRef={forwardedRef} onBlur={() => settleTo.current(1)} onFocus={() => settleTo.current(1.16)} ref={thumbRef} /> {endAdornment && {endAdornment}} ) }) LiquidSlider.displayName = 'LiquidSlider' 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","@base-ui/react@1.8.0",{"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@1.8.0"}]]}]}],["$","li","@liquefy-ui/core@^1.0.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40liquefy-ui%2Fcore","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":"@liquefy-ui/core@^1.0.0"}]]}]}]]}],["$","$L52",null,{"namespace":"@liquefy-ui","registryDependencies":["https://liquefy-ui.com/r/liquefy-ui.json","https://liquefy-ui.com/r/provider.json","https://liquefy-ui.com/r/styles-prop.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/liquid-slider.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]