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:T2c01,"use client"; import * as React from "react"; import { motion, useReducedMotion, useSpring, useTransform } from "motion/react"; import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; const priceRangeVariants = cva("w-full max-w-md px-6 select-none", { variants: { color: { default: "text-primary", indigo: "text-indigo-500", blue: "text-blue-500", emerald: "text-emerald-500", rose: "text-rose-500", amber: "text-amber-500", }, }, defaultVariants: { color: "default", }, }); const knobVariants = cva( [ "absolute top-8 -translate-x-1/2 -translate-y-1/2 outline-none", "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2", "before:absolute before:-inset-2.5 before:content-['']", "disabled:after:bg-background/30 disabled:after:pointer-events-none disabled:after:absolute disabled:after:rounded-[inherit] disabled:after:content-['']", ], { variants: { knob: { circle: "bg-background dark:bg-foreground ring-border size-5 rounded-full shadow-md ring-1 shadow-black/15 disabled:after:inset-0", ring: "bg-background size-5 rounded-full border-[3px] border-current shadow-md shadow-black/15 disabled:after:-inset-[3px]", pill: "bg-background dark:bg-foreground ring-border h-6 w-3 rounded-full shadow-md ring-1 shadow-black/15 disabled:after:inset-0", line: "h-5 w-1 rounded-full bg-current disabled:after:inset-0", }, }, defaultVariants: { knob: "circle", }, }, ); export type PriceRangeKnob = NonNullable["knob"]>; export type PriceRangeColor = NonNullable["color"]>; export type PriceRangeValue = [number, number]; export interface PriceRangeProps extends Omit< React.ComponentProps<"div">, "defaultValue" | "onChange" | "color" | "children" > { value?: PriceRangeValue; defaultValue?: PriceRangeValue; onValueChange?: (value: PriceRangeValue) => void; min?: number; max?: number; currency?: string; formatValue?: (value: number) => string; ticks?: number; showTicks?: boolean; color?: PriceRangeColor; knob?: PriceRangeKnob; disabled?: boolean; } const spring = { stiffness: 520, damping: 42, mass: 0.5 }; function clamp(value: number, low: number, high: number) { return Math.min(high, Math.max(low, value)); } function niceStep(span: number) { const rough = span / 200; const magnitude = 10 ** Math.floor(Math.log10(rough)); const ratio = rough / magnitude; const nice = ratio <= 1 ? 1 : ratio <= 2 ? 2 : ratio <= 5 ? 5 : 10; return nice * magnitude; } const PriceRange = ({ value, defaultValue, onValueChange, min = 0, max = 200000, currency, formatValue, ticks = 25, showTicks = true, color, knob = "circle", disabled = false, className, ...props }: PriceRangeProps) => { const reduceMotion = useReducedMotion(); const areaRef = React.useRef(null); const thumbRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const [internal, setInternal] = React.useState( defaultValue ?? [min + (max - min) * 0.15, min + (max - min) * 0.6], ); const [active, setActive] = React.useState<0 | 1>(1); const [dragging, setDragging] = React.useState(false); const draggingRef = React.useRef(false); const followRef = React.useRef(false); const span = Math.max(max - min, Number.EPSILON); const step = niceStep(span); const decimals = Math.max(0, -Math.floor(Math.log10(step))); const raw = value ?? internal; const low = clamp(Math.min(raw[0], raw[1]), min, max); const high = clamp(Math.max(raw[0], raw[1]), min, max); const lowPct = ((low - min) / span) * 100; const highPct = ((high - min) / span) * 100; const format = React.useMemo(() => { if (formatValue) return formatValue; const formatter = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1, ...(currency ? { style: "currency" as const, currency } : {}), }); return (n: number) => formatter.format(n); }, [formatValue, currency]); const lowSpring = useSpring(lowPct, spring); const highSpring = useSpring(highPct, spring); React.useEffect(() => { if (followRef.current) return; if (reduceMotion) { lowSpring.jump(lowPct); highSpring.jump(highPct); } else { lowSpring.set(lowPct); highSpring.set(highPct); } }, [lowPct, highPct, reduceMotion, lowSpring, highSpring]); const lowLeft = useTransform(lowSpring, (v) => `${v}%`); const highLeft = useTransform(highSpring, (v) => `${v}%`); const fillWidth = useTransform(() => `${Math.max(0, highSpring.get() - lowSpring.get())}%`); const closeness = useTransform(() => clamp(1 - (highSpring.get() - lowSpring.get()) / 16, 0, 1)); const lowLabelX = useTransform(closeness, (c) => `${-50 - 50 * c}%`); const highLabelX = useTransform(closeness, (c) => `${-50 + 50 * c}%`); const commit = (next: PriceRangeValue) => { if (next[0] === low && next[1] === high) return; if (value === undefined) setInternal(next); onValueChange?.(next); }; const toPct = (n: number) => ((n - min) / span) * 100; const moveThumb = (index: 0 | 1, target: number) => { const bounded = index === 0 ? clamp(target, min, high) : clamp(target, low, max); const snapped = Number((Math.round((bounded - min) / step) * step + min).toFixed(decimals)); const next: PriceRangeValue = index === 0 ? [clamp(snapped, min, high), high] : [low, clamp(snapped, low, max)]; if (followRef.current) (index === 0 ? lowSpring : highSpring).jump(toPct(bounded)); commit(next); }; const valueAt = (clientX: number) => { const rect = areaRef.current?.getBoundingClientRect(); if (!rect || rect.width === 0) return low; return min + clamp((clientX - rect.left) / rect.width, 0, 1) * span; }; const handlePointerDown = (event: React.PointerEvent) => { if (disabled || event.button !== 0) return; event.preventDefault(); const target = valueAt(event.clientX); const index: 0 | 1 = low === high ? target <= low ? 0 : 1 : Math.abs(target - low) <= Math.abs(target - high) ? 0 : 1; event.currentTarget.setPointerCapture(event.pointerId); followRef.current = false; draggingRef.current = true; setActive(index); setDragging(true); thumbRefs.current[index]?.focus({ preventScroll: true }); moveThumb(index, target); }; const handlePointerMove = (event: React.PointerEvent) => { if (!draggingRef.current) return; followRef.current = true; moveThumb(active, valueAt(event.clientX)); }; const endDrag = (event: React.PointerEvent) => { draggingRef.current = false; if (followRef.current) { followRef.current = false; const settle = reduceMotion ? "jump" : "set"; lowSpring[settle](lowPct); highSpring[settle](highPct); } setDragging(false); if (event.currentTarget.hasPointerCapture(event.pointerId)) { event.currentTarget.releasePointerCapture(event.pointerId); } }; const handleKeyDown = (index: 0 | 1) => (event: React.KeyboardEvent) => { const current = index === 0 ? low : high; const big = Math.max(step, Math.round(span / 10 / step) * step); const moves: Record = { ArrowRight: current + step, ArrowUp: current + step, ArrowLeft: current - step, ArrowDown: current - step, PageUp: current + big, PageDown: current - big, Home: min, End: max, }; if (!(event.key in moves)) return; event.preventDefault(); setActive(index); moveThumb(index, moves[event.key]); }; const thumbs = [ { value: low, left: lowLeft, labelX: lowLabelX }, { value: high, left: highLeft, labelX: highLabelX }, ] as const; const tickCount = Math.max(2, Math.round(ticks)); return (

{thumbs.map((thumb, index) => ( {format(thumb.value)} ))}

{thumbs.map((thumb, index) => ( { thumbRefs.current[index] = node; }} type="button" role="slider" disabled={disabled} aria-label={index === 0 ? "Minimum price" : "Maximum price"} aria-valuemin={index === 0 ? min : low} aria-valuemax={index === 0 ? high : max} aria-valuenow={thumb.value} aria-valuetext={format(thumb.value)} onKeyDown={handleKeyDown(index as 0 | 1)} onFocus={() => setActive(index as 0 | 1)} className={cn(knobVariants({ knob }), active === index ? "z-20" : "z-10")} style={{ left: thumb.left }} animate={{ scale: dragging && active === index ? 1.2 : 1 }} transition={reduceMotion ? { duration: 0 } : { type: "spring", ...spring }} /> ))} {showTicks && (

{Array.from({ length: tickCount }, (_, i) => { const pct = (i / (tickCount - 1)) * 100; const inside = pct >= lowPct - 0.001 && pct <= highPct + 0.001; return ( ); })}

)}

); }; PriceRange.displayName = "PriceRange"; export { PriceRange, priceRangeVariants, knobVariants }; 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","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"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L50",null,{"namespace":"@clover-ui","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/clover-ui/price-range.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]