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:T47bf,"use client" import * as React from "react" import { DirectionProvider, useDirection, type TextDirection, } from "@base-ui/react/direction-provider" import { Slider as SliderPrimitive } from "@base-ui/react/slider" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" type ClassName = string | ((state: State) => string | undefined) | undefined function mergeClassName(base: string, className: ClassName) { return typeof className === "function" ? (state: State) => cn(base, className(state)) : cn(base, className) } const jumpTime = 180 const sliderVariants = cva( "group/slider flex min-w-0 data-disabled:opacity-50", { variants: { size: { sm: "[--slider-thumb:0.875rem] [--slider-track:0.25rem]", default: "[--slider-thumb:1.125rem] [--slider-track:0.375rem]", lg: "[--slider-thumb:1.375rem] [--slider-track:0.5rem]", }, }, defaultVariants: { size: "default", }, } ) const orientationClasses = { horizontal: { root: "w-full flex-wrap items-center gap-x-3 gap-y-2", control: "h-(--slider-thumb) w-full basis-full before:inset-x-0 before:-inset-y-2 pointer-coarse:before:-inset-y-3.5", track: "h-(--slider-track) w-full", value: "bottom-[calc(100%+0.5rem)] left-1/2 -translate-x-1/2 origin-bottom", }, vertical: { root: "h-full flex-col items-center gap-3", control: "min-h-40 w-(--slider-thumb) flex-1 flex-col justify-center before:-inset-x-2 before:inset-y-0 pointer-coarse:before:-inset-x-3.5", track: "h-full w-(--slider-track)", value: "start-[calc(100%+0.5rem)] top-1/2 -translate-y-1/2 origin-left rtl:origin-right", }, } as const type SliderValueType = number | readonly number[] type SliderProps = SliderPrimitive.Root.Props & VariantProps & { showValue?: boolean draggableRange?: boolean getAriaLabel?: (index: number) => string getAriaValueText?: ( formattedValue: string, value: number, index: number ) => string } type RangeDrag = { id: number origin: number values: readonly number[] scale: number valueAt: (position: number) => number started: boolean last: number[] | null } function countThumbs(value: unknown) { return Array.isArray(value) ? Math.max(1, Math.min(value.length, 100)) : 1 } function sameValue(a: unknown, b: unknown) { if (Array.isArray(a) && Array.isArray(b)) { return a.length === b.length && a.every((item, index) => item === b[index]) } return a === b } function decimalsOf(value: number) { return Number.isFinite(value) ? (String(value).split(".")[1] ?? "").length : 0 } function changeDetails( reason: "drag" | "track-press", event: PointerEvent, trigger: Element ) { const details = { reason, event, trigger, activeThumbIndex: -1, isCanceled: false, isPropagationAllowed: false, cancel() { details.isCanceled = true }, allowPropagation() { details.isPropagationAllowed = true }, } return details as SliderPrimitive.Root.ChangeEventDetails } function useJump(rootRef: React.RefObject) { const timer = React.useRef | undefined>( undefined ) const drags = React.useRef(0) React.useEffect(() => () => clearTimeout(timer.current), []) const stop = React.useCallback(() => { clearTimeout(timer.current) rootRef.current?.removeAttribute("data-jump") }, [rootRef]) const start = React.useCallback(() => { const root = rootRef.current if (!root) { return } clearTimeout(timer.current) drags.current = 0 root.setAttribute("data-jump", "") timer.current = setTimeout(stop, jumpTime + 40) }, [rootRef, stop]) const drag = React.useCallback(() => { if (!rootRef.current?.hasAttribute("data-jump")) { return } drags.current += 1 if (drags.current >= 3) { stop() } }, [rootRef, stop]) return { start, drag, stop } } function Slider({ className, children, size = "default", showValue = false, draggableRange = false, value, defaultValue, min = 0, max = 100, step = 1, minStepsBetweenValues = 0, orientation = "horizontal", thumbAlignment = "edge", locale = "en-US", format, disabled, onValueChange, onValueCommitted, getAriaLabel, getAriaValueText, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ref, ...props }: SliderProps) { const rootRef = React.useRef(null) const inherited = useDirection() const [domDirection, setDomDirection] = React.useState("ltr") const direction = domDirection === "rtl" ? "rtl" : inherited const jump = useJump(rootRef) const controlled = value !== undefined const [internal, setInternal] = React.useState( defaultValue ?? min ) const current = controlled ? value : internal const emitted = React.useRef(current) const previous = React.useRef(current) const rangeDrag = React.useRef(null) const thumbs = countThumbs(current) const layout = orientationClasses[orientation] const vertical = orientation === "vertical" const rangeEnabled = draggableRange && !disabled && thumbs > 1 const formatter = React.useMemo(() => { try { return new Intl.NumberFormat(locale, format) } catch { return new Intl.NumberFormat("en-US") } }, [locale, format]) const setRef = React.useCallback( (node: HTMLDivElement | null) => { rootRef.current = node if (node?.isConnected) { setDomDirection( getComputedStyle(node).direction === "rtl" ? "rtl" : "ltr" ) } if (typeof ref === "function") { return ref(node) } if (ref) { ref.current = node } return undefined }, [ref] ) const blockTouchPress = React.useCallback((control: HTMLElement | null) => { if (!control) { return undefined } const onTouchStart = (event: TouchEvent) => { if (rangeDrag.current) { event.stopImmediatePropagation() event.stopPropagation() } } control.addEventListener("touchstart", onTouchStart, { capture: true, passive: true, }) return () => control.removeEventListener("touchstart", onTouchStart, true) }, []) React.useLayoutEffect(() => { if (sameValue(current, previous.current)) { return } previous.current = current if (!sameValue(current, emitted.current)) { jump.start() } }, [current, jump]) const handleValueChange = ( next: number | readonly number[], details: SliderPrimitive.Root.ChangeEventDetails ) => { onValueChange?.(next as never, details) if (details.isCanceled) { return false } emitted.current = next if (!controlled) { setInternal(next) } if (details.reason === "drag") { jump.drag() } else { jump.start() } return true } const axisOf = (event: { clientX: number; clientY: number }) => vertical ? event.clientY : event.clientX const startRangeDrag = (event: React.PointerEvent) => { if ( !rangeEnabled || event.button !== 0 || !Array.isArray(current) || !(event.target instanceof Element) || event.target.closest("[data-slot=slider-thumb]") ) { return } const control = event.currentTarget const handles = control.querySelectorAll( "[data-slot=slider-thumb]" ) const first = handles[0]?.getBoundingClientRect() const last = handles[handles.length - 1]?.getBoundingClientRect() if (!first || !last) { return } const thumbSize = vertical ? first.height : first.width const centers = [first, last].map((rect) => vertical ? rect.top + rect.height / 2 : rect.left + rect.width / 2 ) const position = axisOf(event) if ( position <= Math.min(...centers) + thumbSize / 2 || position >= Math.max(...centers) - thumbSize / 2 ) { return } const rect = control.getBoundingClientRect() const inset = thumbAlignment === "center" ? 0 : thumbSize const length = (vertical ? rect.height : rect.width) - inset if (length <= 0 || max <= min) { return } event.preventDefault() const sign = vertical || direction === "rtl" ? -1 : 1 const startEdge = vertical ? rect.bottom : direction === "rtl" ? rect.right : rect.left control.setPointerCapture?.(event.pointerId) rangeDrag.current = { id: event.pointerId, origin: position, values: current, scale: ((max - min) / length) * sign, valueAt: (at) => min + Math.min( 1, Math.max(0, ((at - startEdge) * sign - inset / 2) / length) ) * (max - min), started: false, last: null, } } const moveRange = (event: React.PointerEvent) => { const state = rangeDrag.current if (!state || event.pointerId !== state.id) { return } const distance = axisOf(event) - state.origin if (!state.started) { if (Math.abs(distance) < 3) { return } state.started = true jump.stop() rootRef.current?.setAttribute("data-range-dragging", "") } const values = state.values const precision = Math.max(decimalsOf(step), decimalsOf(min)) const snapped = Math.round((distance * state.scale) / step) * step const delta = Math.min( max - values[values.length - 1], Math.max(min - values[0], snapped) ) const next = values.map((item) => Number((item + delta).toFixed(precision))) if (sameValue(next, state.last ?? values)) { return } if ( handleValueChange( next, changeDetails("drag", event.nativeEvent, event.currentTarget) ) ) { state.last = next } } const endRange = (event: React.PointerEvent) => { const state = rangeDrag.current if (!state || event.pointerId !== state.id) { return } rangeDrag.current = null rootRef.current?.removeAttribute("data-range-dragging") const control = event.currentTarget if (control.hasPointerCapture?.(event.pointerId)) { control.releasePointerCapture(event.pointerId) } if (state.started) { if (state.last) { onValueCommitted?.(state.last as never, { reason: "drag", event: event.nativeEvent, }) } return } if (event.type !== "pointerup") { return } const values = state.values const precision = Math.max(decimalsOf(step), decimalsOf(min)) const raw = min + Math.round((state.valueAt(axisOf(event)) - min) / step) * step let index = 0 values.forEach((item, i) => { if (Math.abs(item - raw) <= Math.abs(values[index] - raw)) { index = i } }) const gap = minStepsBetweenValues * step const floor = index > 0 ? values[index - 1] + gap : min const ceiling = index < values.length - 1 ? values[index + 1] - gap : max const target = Number( Math.min(ceiling, Math.max(floor, raw)).toFixed(precision) ) const next = values.map((item, i) => (i === index ? target : item)) control .querySelectorAll("[data-slot=slider-thumb]") [index]?.querySelector("input") ?.focus({ preventScroll: true, focusVisible: false } as FocusOptions) if ( !sameValue(next, values) && handleValueChange( next, changeDetails("track-press", event.nativeEvent, control) ) ) { onValueCommitted?.(next as never, { reason: "track-press", event: event.nativeEvent, }) } } return ( {children} {Array.from({ length: thumbs }, (_, index) => ( (

{showValue ? ( ) : null} {thumbProps.children}

)} /> ))} ) } function SliderLabel({ className, ...props }: SliderPrimitive.Label.Props) { return ( ) } function SliderValue({ className, ...props }: SliderPrimitive.Value.Props) { return ( ) } export { Slider, SliderLabel, SliderValue, sliderVariants } export type { SliderProps } 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","@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","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"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@hextaui","registryDependencies":["https://hextaui.com/r/theme.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/slider.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]