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:Te37,"use client"; // beui.dev/components/motion/range-slider import { motion, useMotionTemplate, useMotionValue, useReducedMotion, useSpring, useTransform, } from "motion/react"; import { useEffect } from "react"; import { SPRING_GLIDE, SPRING_PRESS } from "@/lib/ease"; import { type SliderOptions, useSlider } from "@/lib/hooks/use-slider"; import { TOUCH_GESTURE_CLASS } from "@/lib/touch"; import { cn } from "@/lib/utils"; export interface FluidSliderProps extends SliderOptions { /** Text shown on the left of the track. */ label?: string; /** Formats the value shown on the right. */ format?: (value: number) => string; className?: string; } /** * Thumbless slider: the whole pill is the control. The fill glides to the new * value behind a rounded liquid cap, and the label reads inverted wherever the * fill has covered it. */ export function FluidSlider({ label, // The value arrives already snapped to the step. Rounding it again would // only make the label and the announcement disagree with aria-valuenow. format = (v) => `${v}%`, className, ...options }: FluidSliderProps) { const reduce = useReducedMotion(); const { percent, current, dragging, trackProps, sliderProps } = useSlider({ ...options, formatValueText: options.formatValueText ?? format, }); const target = useMotionValue(percent); useEffect(() => { target.set(percent); }, [percent, target]); const smooth = useSpring(target, SPRING_GLIDE); const pos = reduce ? target : smooth; // Reveal the fill by clipping a full-width layer rather than animating its // width: at 0% the clip is empty, so no hairline of a sub-pixel-wide box is // left behind, and the label inside is never scaled or re-laid out. const uncovered = useTransform(pos, (v) => 100 - v); const clipPath = useMotionTemplate`inset(0 ${uncovered}% 0 0 round 9999px)`; const row = ( <> {label ? {label} : } {format(current)} ); return ( {/* uncovered label — sits on the muted track */}

{row}

{/* fill + the same label, both clipped to the value, so the text inverts as the fill covers it and lines up glyph for glyph with the copy underneath. The clip's rounded right edge is the liquid cap. */}

{row}

{/* focusable, keyboard-controlled handle surface. The ring is inset — an outset one is clipped away by the track's overflow-hidden. */}