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:T4ae6,"use client" import { useCallback, useEffect, useLayoutEffect, useRef, useState, } from "react" import { animate, motion, useMotionValue, useReducedMotion, useTransform, } from "motion/react" import { useControllableState } from "@/hooks/use-controllable-state" import { cn } from "@/lib/utils" // Drag detection & rubber band (only at the absolute min/max edges — the // two thumbs clamping against each other is a hard boundary, not elastic). const CLICK_THRESHOLD = 3 const DEAD_ZONE = 32 const MAX_CURSOR_RANGE = 200 const MAX_STRETCH = 8 function clamp(v: number, lo: number, hi: number) { return Math.max(lo, Math.min(hi, v)) } function decimalsForStep(step: number): number { const s = step.toString() const dot = s.indexOf(".") return dot === -1 ? 0 : s.length - dot - 1 } function roundValue(val: number, step: number): number { const raw = Math.round(val / step) * step return parseFloat(raw.toFixed(decimalsForStep(step))) } type Thumb = "min" | "max" export type ElasticRangeSliderProps = { /** Label shown at the start of the track. */ label: string /** Controlled [min, max] value. Use together with `onValueChange` */ value?: [number, number] /** Initial [min, max] value for uncontrolled mode. Falls back to `[min, max]` */ defaultValue?: [number, number] /** Called with the new [min, max] on drag, click, or key press. */ onValueChange?: (value: [number, number]) => void /** * Minimum value. * @defaultValue 0 */ min?: number /** * Maximum value. * @defaultValue 100 */ max?: number /** * Smallest increment. * @defaultValue 1 */ step?: number /** Format each displayed value. Defaults to `value.toFixed(...)` based on `step` */ formatValue?: (value: number) => string className?: string /** Accessible name for the lower thumb. @defaultValue "Minimum" */ minThumbLabel?: string /** Accessible name for the upper thumb. @defaultValue "Maximum" */ maxThumbLabel?: string } export function ElasticRangeSlider({ label, value: valueProp, defaultValue, onValueChange, min: absoluteMin = 0, max: absoluteMax = 100, step = 1, formatValue, className, minThumbLabel = "Minimum", maxThumbLabel = "Maximum", }: ElasticRangeSliderProps) { const [range = [absoluteMin, absoluteMax], setRange] = useControllableState({ prop: valueProp, defaultProp: defaultValue ?? [absoluteMin, absoluteMax], onChange: onValueChange, }) const [min, max] = range const shouldReduceMotion = useReducedMotion() const wrapperRef = useRef(null) const trackRef = useRef(null) const [isHovered, setIsHovered] = useState(false) const [isDragging, setIsDragging] = useState(false) const [keyboardFocusThumb, setKeyboardFocusThumb] = useState( null ) const isActive = isHovered || isDragging // Pointer session state — mutable, does not trigger re-renders. const draggingThumb = useRef(null) const pointerDownPos = useRef<{ x: number; y: number } | null>(null) const isClickRef = useRef(true) const wrapperRectRef = useRef(null) const scaleRef = useRef(1) const minAnimRef = useRef | null>(null) const maxAnimRef = useRef | null>(null) const percentFromValue = useCallback( (v: number) => ((v - absoluteMin) / (absoluteMax - absoluteMin)) * 100, [absoluteMin, absoluteMax] ) const displayMin = formatValue ? formatValue(min) : min.toFixed(decimalsForStep(step)) const displayMax = formatValue ? formatValue(max) : max.toFixed(decimalsForStep(step)) // Each thumb gets its own motion value so drags stay perfectly in sync // frame-to-frame, instead of both re-deriving from combined React state. const minPercent = useMotionValue(percentFromValue(min)) const maxPercent = useMotionValue(percentFromValue(max)) const minLeft = useTransform( minPercent, (pct) => `max(4px, min(calc(100% - 8px), calc(${pct}% - 4px)))` ) const maxLeft = useTransform( maxPercent, (pct) => `max(4px, min(calc(100% - 8px), calc(${pct}% - 4px)))` ) const fillLeft = useTransform(minPercent, (pct) => `${pct}%`) const fillRight = useTransform(maxPercent, (pct) => `${100 - pct}%`) // Rubber band at the absolute edges only. const rubberStretch = useMotionValue(0) const rubberWidth = useTransform( rubberStretch, (s) => `calc(100% + ${Math.abs(s)}px)` ) // Track is anchored at the reading start (inset-inline-start: 0), so the // shift is direction-aware: LTR pins the track's physical left (overshoot // left shifts: x = s, s < 0); RTL pins the physical right (overshoot right // shifts: x = s, s > 0). Only the overshot edge stretches. const dirRef = useRef<"ltr" | "rtl">("ltr") useLayoutEffect(() => { function updateDir() { if (!wrapperRef.current) return dirRef.current = getComputedStyle(wrapperRef.current).direction === "rtl" ? "rtl" : "ltr" } updateDir() const observer = new MutationObserver(updateDir) observer.observe(document.documentElement, { attributes: true, attributeFilter: ["dir"], subtree: true, }) return () => observer.disconnect() }, []) const rubberX = useTransform(rubberStretch, (s) => { if (s === 0) return 0 const overshootPastAnchor = dirRef.current === "rtl" ? s > 0 : s < 0 return overshootPastAnchor ? s : 0 }) // Sync from props when not actively dragging that thumb. useEffect(() => { if (draggingThumb.current !== "min" && !minAnimRef.current) { minPercent.jump(percentFromValue(min)) } }, [min, percentFromValue, minPercent]) useEffect(() => { if (draggingThumb.current !== "max" && !maxAnimRef.current) { maxPercent.jump(percentFromValue(max)) } }, [max, percentFromValue, maxPercent]) const positionToValue = useCallback( (clientX: number) => { const rect = wrapperRectRef.current if (!rect) return absoluteMin const sceneX = (clientX - rect.left) / scaleRef.current const nativeWidth = wrapperRef.current?.offsetWidth ?? rect.width const percent = clamp(sceneX / nativeWidth, 0, 1) return clamp( absoluteMin + percent * (absoluteMax - absoluteMin), absoluteMin, absoluteMax ) }, [absoluteMin, absoluteMax] ) const animateThumbTo = useCallback( (thumb: Thumb, targetPercent: number) => { const motionValue = thumb === "min" ? minPercent : maxPercent const animRef = thumb === "min" ? minAnimRef : maxAnimRef animRef.current?.stop() if (shouldReduceMotion) { motionValue.jump(targetPercent) animRef.current = null return } animRef.current = animate(motionValue, targetPercent, { type: "spring", stiffness: 300, damping: 25, mass: 0.8, onComplete: () => { animRef.current = null }, }) }, [minPercent, maxPercent, shouldReduceMotion] ) const stopThumbAnimation = useCallback((thumb: Thumb) => { const animation = thumb === "min" ? minAnimRef : maxAnimRef animation.current?.stop() animation.current = null }, []) const computeRubberStretch = useCallback((clientX: number, sign: number) => { const rect = wrapperRectRef.current if (!rect) return 0 const distancePast = sign < 0 ? rect.left - clientX : clientX - rect.right const overflow = Math.max(0, distancePast - DEAD_ZONE) return ( sign * MAX_STRETCH * Math.sqrt(Math.min(overflow / MAX_CURSOR_RANGE, 1)) ) }, []) const handlePointerDown = useCallback((thumb: Thumb) => { return (e: React.PointerEvent) => { e.preventDefault() e.stopPropagation() ;(e.target as HTMLElement).setPointerCapture(e.pointerId) pointerDownPos.current = { x: e.clientX, y: e.clientY } isClickRef.current = true draggingThumb.current = thumb setIsDragging(true) setKeyboardFocusThumb(null) const wrapper = wrapperRef.current if (wrapper) { const rect = wrapper.getBoundingClientRect() wrapperRectRef.current = rect scaleRef.current = rect.width / wrapper.offsetWidth } } }, []) const handleTrackPointerDown = useCallback( (e: React.PointerEvent) => { const wrapper = wrapperRef.current if (wrapper) { const rect = wrapper.getBoundingClientRect() wrapperRectRef.current = rect scaleRef.current = rect.width / wrapper.offsetWidth } const value = positionToValue(e.clientX) const thumb: Thumb = Math.abs(value - min) <= Math.abs(value - max) ? "min" : "max" pointerDownPos.current = { x: e.clientX, y: e.clientY } isClickRef.current = true draggingThumb.current = thumb setIsDragging(true) setKeyboardFocusThumb(null) ;(e.target as HTMLElement).setPointerCapture(e.pointerId) }, [positionToValue, min, max] ) const handlePointerMove = useCallback( (e: React.PointerEvent) => { const thumb = draggingThumb.current if (!thumb || !pointerDownPos.current) return const dx = e.clientX - pointerDownPos.current.x const dy = e.clientY - pointerDownPos.current.y if (isClickRef.current && Math.hypot(dx, dy) > CLICK_THRESHOLD) { isClickRef.current = false } if (isClickRef.current) return const rect = wrapperRectRef.current if (rect && !shouldReduceMotion) { // The min thumb only rubber-bands past the left edge (absoluteMin); // the max thumb only past the right edge (absoluteMax). Dragging // toward the other thumb is a hard clamp, not elastic. if (thumb === "min" && e.clientX < rect.left) { rubberStretch.jump(computeRubberStretch(e.clientX, -1)) } else if (thumb === "max" && e.clientX > rect.right) { rubberStretch.jump(computeRubberStretch(e.clientX, 1)) } else { rubberStretch.jump(0) } } const rawValue = roundValue(positionToValue(e.clientX), step) // Clamp one step short of the other thumb, not flush against it, so // min and max can never meet or cross. Applied before the motion value // jumps, so the thumb itself (not just the reported value) is bounded. const value = thumb === "min" ? clamp(rawValue, absoluteMin, max - step) : clamp(rawValue, min + step, absoluteMax) const motionValue = thumb === "min" ? minPercent : maxPercent stopThumbAnimation(thumb) motionValue.jump(percentFromValue(value)) setRange(thumb === "min" ? [value, max] : [min, value]) }, [ positionToValue, percentFromValue, setRange, step, min, max, absoluteMin, absoluteMax, minPercent, maxPercent, rubberStretch, computeRubberStretch, shouldReduceMotion, stopThumbAnimation, ] ) const handlePointerUp = useCallback( (e: React.PointerEvent) => { const thumb = draggingThumb.current if (!thumb) return if (isClickRef.current) { const rawValue = positionToValue(e.clientX) const snapped = thumb === "min" ? clamp(roundValue(rawValue, step), absoluteMin, max - step) : clamp(roundValue(rawValue, step), min + step, absoluteMax) animateThumbTo(thumb, percentFromValue(snapped)) setRange(([currentMin, currentMax]) => thumb === "min" ? [snapped, currentMax] : [currentMin, snapped] ) } else { // Snap the dragged value to the step grid on release. const current = thumb === "min" ? min : max const snapped = roundValue(current, step) if (snapped !== current) { animateThumbTo(thumb, percentFromValue(snapped)) setRange(([currentMin, currentMax]) => thumb === "min" ? [snapped, currentMax] : [currentMin, snapped] ) } } if (!shouldReduceMotion && rubberStretch.get() !== 0) { animate(rubberStretch, 0, { type: "spring", visualDuration: 0.35, bounce: 0.15, }) } draggingThumb.current = null pointerDownPos.current = null setIsDragging(false) }, [ positionToValue, percentFromValue, animateThumbTo, setRange, min, max, step, absoluteMin, absoluteMax, rubberStretch, shouldReduceMotion, ] ) const discreteSteps = (absoluteMax - absoluteMin) / step const hashMarkCount = discreteSteps <= 10 ? discreteSteps - 1 : 9 const hashMarkPct = (i: number) => { return discreteSteps <= 10 ? (((i + 1) * step) / (absoluteMax - absoluteMin)) * 100 : (i + 1) * 10 } const handleKeyDown = useCallback( (thumb: Thumb) => (e: React.KeyboardEvent) => { const arrowStep = e.shiftKey ? step * 10 : step const current = thumb === "min" ? min : max const next = (() => { switch (e.key) { case "ArrowRight": case "ArrowUp": return current + arrowStep case "ArrowLeft": case "ArrowDown": return current - arrowStep case "Home": return thumb === "min" ? absoluteMin : min case "End": return thumb === "min" ? max : absoluteMax default: return null } })() if (next === null) return e.preventDefault() setKeyboardFocusThumb(thumb) const bounds: [number, number] = thumb === "min" ? [absoluteMin, max - step] : [min + step, absoluteMax] const snapped = clamp(roundValue(next, step), bounds[0], bounds[1]) animateThumbTo(thumb, percentFromValue(snapped)) setRange(([currentMin, currentMax]) => thumb === "min" ? [snapped, currentMax] : [currentMin, snapped] ) }, [ step, min, max, absoluteMin, absoluteMax, animateThumbTo, percentFromValue, setRange, ] ) return (

setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} >

{Array.from({ length: hashMarkCount }, (_, i) => (

))}

setKeyboardFocusThumb("min")} onBlur={() => setKeyboardFocusThumb(null)} className="absolute top-1/2 h-5 w-1 -translate-y-1/2 cursor-pointer touch-none rounded-full bg-(--elastic-slider-handle) opacity-0 transition-opacity outline-none group-data-[active=true]/elastic-slider:opacity-50 data-[focus-visible=true]:opacity-80 data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-ring/50" style={{ left: minLeft, y: "-50%" }} /> setKeyboardFocusThumb("max")} onBlur={() => setKeyboardFocusThumb(null)} className="absolute top-1/2 h-5 w-1 -translate-y-1/2 cursor-pointer touch-none rounded-full bg-(--elastic-slider-handle) opacity-0 transition-opacity outline-none group-data-[active=true]/elastic-slider:opacity-50 data-[focus-visible=true]:opacity-80 data-[focus-visible=true]:ring-2 data-[focus-visible=true]:ring-ring/50" style={{ left: maxLeft, y: "-50%" }} />

) } 55:Ted4,// Thanks @radix-ui import * as React from "react" // use-layout-effect.tsx // https://github.com/radix-ui/primitives/blob/main/packages/react/use-layout-effect/src/use-layout-effect.tsx /** * On the server, React emits a warning when calling `useLayoutEffect`. * This is because neither `useLayoutEffect` nor `useEffect` run on the server. * We use this safe version which suppresses the warning by replacing it with a noop on the server. * * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect */ const useLayoutEffect = globalThis?.document ? React.useLayoutEffect : () => {} // use-controllable-state.tsx // https://github.com/radix-ui/primitives/blob/main/packages/react/use-controllable-state/src/use-controllable-state.tsx // Prevent bundlers from trying to optimize the import const useInsertionEffect: typeof useLayoutEffect = (React as never)[" useInsertionEffect ".trim().toString()] || useLayoutEffect type ChangeHandler = (state: T) => void type SetStateFn = React.Dispatch> interface UseControllableStateParams { prop?: T | undefined defaultProp: T onChange?: ChangeHandler caller?: string } export function useControllableState({ prop, defaultProp, onChange = () => {}, caller, }: UseControllableStateParams): [T, SetStateFn] { const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({ defaultProp, onChange, }) const isControlled = prop !== undefined const value = isControlled ? prop : uncontrolledProp // OK to disable conditionally calling hooks here because they will always run // consistently in the same environment. Bundlers should be able to remove the // code block entirely in production. /* eslint-disable react-hooks/rules-of-hooks */ if (process.env.NODE_ENV !== "production") { const isControlledRef = React.useRef(prop !== undefined) React.useEffect(() => { const wasControlled = isControlledRef.current if (wasControlled !== isControlled) { const from = wasControlled ? "controlled" : "uncontrolled" const to = isControlled ? "controlled" : "uncontrolled" console.warn( `${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.` ) } isControlledRef.current = isControlled }, [isControlled, caller]) } /* eslint-enable react-hooks/rules-of-hooks */ const setValue = React.useCallback>( (nextValue) => { if (isControlled) { const value = isFunction(nextValue) ? nextValue(prop) : nextValue if (value !== prop) { onChangeRef.current?.(value) } } else { setUncontrolledProp(nextValue) } }, [isControlled, prop, setUncontrolledProp, onChangeRef] ) return [value, setValue] } function useUncontrolledState({ defaultProp, onChange, }: Omit, "prop">): [ Value: T, setValue: React.Dispatch>, OnChangeRef: React.RefObject | undefined>, ] { const [value, setValue] = React.useState(defaultProp) const prevValueRef = React.useRef(value) const onChangeRef = React.useRef(onChange) useInsertionEffect(() => { onChangeRef.current = onChange }, [onChange]) React.useEffect(() => { if (prevValueRef.current !== value) { onChangeRef.current?.(value) prevValueRef.current = value } }, [value, prevValueRef]) return [value, setValue, onChangeRef] } function isFunction(value: unknown): value is (...args: never[]) => unknown { return typeof value === "function" } 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","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@persianlabsui","registryDependencies":["utils"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/base/ui/elastic-range-slider.tsx","content":"$54","type":"registry:ui"},{"path":"registry/base/hooks/use-controllable-state.ts","content":"$55","type":"registry:hook"}],"className":"h-[70svh] min-h-80"}]]}]