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/1o6_421saitt-.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/1o6_421saitt-.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:T77f4,"use client"; import { Slider as SliderPrimitive } from "@base-ui/react/slider"; import { cn } from "cn"; import { AnimatePresence, motion, useReducedMotion, type Transition, } from "motion/react"; import * as React from "react"; import { TooltipSurface } from "./tooltip"; // Styles for invalid animation shake const invalidShakeStyles = ` @keyframes iandefined-invalid-shake-replay { 0% { transform: translateX(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 28.57% { transform: translateX(6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 57.14% { transform: translateX(-6px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 78.57% { transform: translateX(4px); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); } 100% { transform: translateX(0); } } [data-invalid-shake="owner"] { animation-duration: 280ms; animation-timing-function: linear; } [data-invalid-shake="owner"].is-shaking[aria-invalid="true"], [data-invalid-shake="owner"].is-shaking[data-invalid], [data-invalid-shake="owner"].is-shaking:has([aria-invalid="true"]), [data-invalid-shake="owner"].is-shaking:has([data-invalid]) { animation-name: iandefined-invalid-shake-replay; will-change: transform; } @media (prefers-reduced-motion: reduce) { [data-invalid-shake="owner"] { animation: none !important; transform: none !important; } } `; type SliderValueType = number | [number, number]; type SliderVariant = NonNullable; type SliderProps = { value?: SliderValueType; defaultValue?: SliderValueType; onValueChange?: (value: SliderValueType) => void; onValueCommitted?: (value: SliderValueType) => void; children?: React.ReactNode; formatValue?: (value: number) => string; hideTooltip?: boolean; variant?: "compact" | "default"; showSteps?: boolean; reduceMotion?: boolean; getAriaLabel?: (index: number) => string; } & Omit< SliderPrimitive.Root.Props, | "children" | "defaultValue" | "onValueChange" | "onValueCommitted" | "thumbAlignment" | "value" >; type SliderContextValue = { disabled: boolean; formatValue: (value: number) => string; getAriaLabel?: (index: number) => string; hideTooltip: boolean; max: number; min: number; onValueChange: (value: SliderValueType) => void; onValueCommitted?: (value: SliderValueType) => void; reduceMotion: boolean; showSteps: boolean; step: number; value: SliderValueType; variant: SliderVariant; }; type SliderControlProps = { children?: React.ReactNode; } & Omit; type SliderContentProps = {} & React.ComponentProps<"div">; type SliderLabelProps = {} & SliderPrimitive.Label.Props; type SliderValueProps = { children?: ( formattedValues: readonly string[], values: readonly number[] ) => React.ReactNode; editable?: boolean; } & Omit; const SliderContext = React.createContext(null); function useSlider() { const context = React.useContext(SliderContext); if (!context) { throw new Error("Slider parts must be used within Slider"); } return context; } type SliderControlPointerEvent = Parameters< NonNullable >[0]; type HoverPreview = { percent: number; value: number; }; type TrackPosition = { offset: number; percent: number; }; const COMPACT_INSET = 10; const COMPACT_RAIL_INSET = 0; const DEFAULT_INSET = 12; const spring: Transition = { type: "spring", duration: 0.16, bounce: 0.12, }; function toValues(value: SliderValueType) { return Array.isArray(value) ? value : [value]; } function getPrecision(step: number) { return step.toString().split(".")[1]?.length ?? 0; } function snapValue(value: number, min: number, max: number, step: number) { const snapped = min + Math.round((value - min) / step) * step; return Number( Math.min(max, Math.max(min, snapped)).toFixed(getPrecision(step)) ); } function getPercent(value: number, min: number, max: number) { return max === min ? 0 : ((value - min) / (max - min)) * 100; } function getInsetPosition(percent: number, inset: number) { return getTrackPositionStyle(getInsetTrackPosition(percent, inset)); } function getInsetTrackPosition(percent: number, inset: number): TrackPosition { return { offset: inset - (2 * inset * percent) / 100, percent, }; } function getEdgeTrackPosition( percent: number, inset: number, edgeInset: number ): TrackPosition { if (percent === 0) { return { offset: edgeInset, percent: 0 }; } if (percent === 100) { return { offset: -edgeInset, percent: 100 }; } return getInsetTrackPosition(percent, inset); } function getTrackPositionStyle(position: TrackPosition) { return `calc(${position.percent}% + ${position.offset}px)`; } function getTrackSegmentStyle(first: TrackPosition, second: TrackPosition) { const firstComesBefore = first.percent < second.percent || (first.percent === second.percent && first.offset <= second.offset); const start = firstComesBefore ? first : second; const end = firstComesBefore ? second : first; return { insetInlineStart: getTrackPositionStyle(start), width: `calc(${end.percent - start.percent}% + ${end.offset - start.offset}px)`, }; } function getDefaultFillOffset(percent: number) { return percent === 0 ? 0 : 20 - percent / 5; } function getDefaultFillWidth(percent: number) { const offset = getDefaultFillOffset(percent); return `calc(${percent}% + ${offset}px)`; } function getDefaultPosition(percent: number) { return getInsetPosition(percent, DEFAULT_INSET); } function getStepValues(min: number, max: number, step: number) { const count = Math.floor((max - min) / step); if (count > 200) { return []; } return Array.from({ length: count + 1 }, (_, index) => snapValue(min + index * step, min, max, step) ); } function getPreviewSegment( previewPercent: number, values: number[], min: number, max: number ) { const valuePercents = values.map((value) => getPercent(value, min, max)); const closest = valuePercents.reduce((current, percent) => Math.abs(percent - previewPercent) < Math.abs(current - previewPercent) ? percent : current ); return { anchor: closest, target: previewPercent, }; } function useHoverPreview({ disabled, min, max, step, }: { disabled: boolean; min: number; max: number; step: number; }) { const [preview, setPreview] = React.useState(null); const updatePreview = React.useCallback( (event: React.PointerEvent) => { if (disabled) { return; } const control = event.currentTarget.querySelector( '[data-slot="slider-control"]' ); const rect = control?.getBoundingClientRect() ?? event.currentTarget.getBoundingClientRect(); const pointerOffset = getComputedStyle(event.currentTarget).direction === "rtl" ? rect.right - event.clientX : event.clientX - rect.left; const percent = Math.min( 100, Math.max(0, (pointerOffset / rect.width) * 100) ); const value = snapValue( min + (percent / 100) * (max - min), min, max, step ); setPreview((current) => current?.value === value ? current : { percent: getPercent(value, min, max), value, } ); }, [disabled, max, min, step] ); return { preview, setPreview, updatePreview }; } function SliderValueDisplay({ className, disabled, editable, formatValue, max, min, onValueChange, value, }: { className?: string; disabled: boolean; editable: boolean; formatValue: (value: number) => string; max: number; min: number; onValueChange: (value: number) => void; value: number; }) { const [editing, setEditing] = React.useState(false); const [draft, setDraft] = React.useState(String(value)); const inputRef = React.useRef(null); React.useEffect(() => { if (editing) { inputRef.current?.select(); } }, [editing]); const commit = () => { const nextValue = Number(draft); if (Number.isFinite(nextValue)) { onValueChange(Math.min(max, Math.max(min, nextValue))); } setEditing(false); }; if (editable && editing) { return ( setDraft(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") { commit(); } if (event.key === "Escape") { setEditing(false); setDraft(String(value)); } }} /> ); } if (!editable) { return ( {formatValue(value)} ); } return ( ); } function SliderLabel({ className, ...props }: SliderLabelProps) { const { variant } = useSlider(); return ( ); } function SliderValue({ children, className, editable = true, ...props }: SliderValueProps) { const { disabled, formatValue, max, min, onValueChange, value } = useSlider(); const values = toValues(value); const formattedValues = values.map(formatValue); return ( {children ? () => children(formattedValues, values) : () => values.length > 1 ? ( <> onValueChange([nextValue, values[1] ?? max]) } /> onValueChange([values[0], nextValue]) } /> ) : ( onValueChange(nextValue)} /> )} ); } function SliderContent({ className, ...props }: SliderContentProps) { return (

); } function HoverValue({ className, formatValue, isPressed, position, preview, reduceMotion, }: { className?: string; formatValue: (value: number) => string; isPressed: boolean; position: string; preview: HoverPreview | null; reduceMotion: boolean; }) { return ( {preview ? ( ) : null} ); } function CompactSliderControl({ children, className, onPointerCancel, onPointerDown, onPointerUp, ...props }: SliderControlProps) { const { disabled, formatValue, getAriaLabel, hideTooltip, max, min, onValueChange, onValueCommitted, reduceMotion, showSteps, step, value, } = useSlider(); const [isPressed, setIsPressed] = React.useState(false); const values = toValues(value); const primaryValue = values.at(-1) ?? min; const steps = showSteps ? getStepValues(min, max, step) : []; const { preview, setPreview, updatePreview } = useHoverPreview({ disabled, min, max, step, }); const previewSegment = preview ? getPreviewSegment(preview.percent, values, min, max) : null; const sortedValues = values.toSorted((first, second) => first - second); const fillStartValue = sortedValues[0] ?? min; const fillEndValue = sortedValues.at(-1) ?? min; const compactFillStyle = getTrackSegmentStyle( values.length > 1 ? getEdgeTrackPosition( getPercent(fillStartValue, min, max), COMPACT_INSET, COMPACT_RAIL_INSET ) : { offset: COMPACT_RAIL_INSET, percent: 0 }, getEdgeTrackPosition( getPercent(fillEndValue, min, max), COMPACT_INSET, COMPACT_RAIL_INSET ) ); const compactPreviewStyle = previewSegment && previewSegment.anchor !== previewSegment.target ? getTrackSegmentStyle( getInsetTrackPosition(previewSegment.anchor, COMPACT_INSET), getEdgeTrackPosition( previewSegment.target, COMPACT_INSET, COMPACT_RAIL_INSET ) ) : null; const handleCollapsedRangePointerDown = ( event: SliderControlPointerEvent ) => { if ( disabled || event.button !== 0 || values.length !== 2 || fillStartValue !== fillEndValue || (event.target instanceof Element && event.target.closest('[data-slot="slider-thumb"]')) ) { return; } const control = event.currentTarget; const rect = control.getBoundingClientRect(); const pointerOffset = getComputedStyle(control).direction === "rtl" ? rect.right - event.clientX : event.clientX - rect.left; const usableWidth = Math.max(1, rect.width - COMPACT_INSET * 2); const pointerPercent = Math.min( 1, Math.max(0, (pointerOffset - COMPACT_INSET) / usableWidth) ); const nextValue = snapValue( min + pointerPercent * (max - min), min, max, step ); if (nextValue === fillStartValue) { return; } event.preventBaseUIHandler(); const targetIndex = nextValue < fillStartValue ? 0 : 1; const nextRange: [number, number] = targetIndex === 0 ? [nextValue, fillStartValue] : [fillStartValue, nextValue]; onValueChange(nextRange); onValueCommitted?.(nextRange); requestAnimationFrame(() => { control .querySelectorAll('input[type="range"]') [targetIndex]?.focus({ preventScroll: true }); }); }; return (

setPreview(null)} onPointerMove={updatePreview} > {hideTooltip ? null : ( )} { onPointerCancel?.(event); setIsPressed(false); }} onPointerDown={(event) => { onPointerDown?.(event); if (event.defaultPrevented) { return; } setIsPressed(true); handleCollapsedRangePointerDown(event); }} onPointerUp={(event) => { onPointerUp?.(event); setIsPressed(false); }} > {compactPreviewStyle && !isPressed ? ( ) : null} {steps.length > 0 ? ( {steps.slice(1, -1).map((stepValue) => ( 1 ? stepValue >= fillStartValue && stepValue <= fillEndValue ? "opacity-0" : "bg-muted-foreground/55" : stepValue <= primaryValue ? "opacity-0" : "bg-muted-foreground/55" )} data-slot="slider-step" style={{ insetInlineStart: getInsetPosition( getPercent(stepValue, min, max), COMPACT_INSET ), }} /> ))} ) : null} {values.map((_, index) => ( formatValue(nextValue) } index={index} > ))} {children}

); } function DefaultSliderControl({ children, className, onPointerCancel, onPointerDown, onPointerUp, ...props }: SliderControlProps) { const { disabled, formatValue, getAriaLabel, hideTooltip, max, min, reduceMotion, showSteps, step, value, } = useSlider(); const [isPressed, setIsPressed] = React.useState(false); const numericValue = Array.isArray(value) ? value[0] : value; const valuePercent = getPercent(numericValue, min, max); const steps = showSteps ? getStepValues(min, max, step) : []; const { preview, setPreview, updatePreview } = useHoverPreview({ disabled, min, max, step, }); const previewSegment = preview ? getPreviewSegment(preview.percent, [numericValue], min, max) : null; const defaultPreviewStyle = previewSegment && previewSegment.anchor !== previewSegment.target ? getTrackSegmentStyle( { offset: getDefaultFillOffset(previewSegment.anchor), percent: previewSegment.anchor, }, { offset: getDefaultFillOffset(previewSegment.target), percent: previewSegment.target, } ) : null; return (

); } function SliderControl(props: SliderControlProps) { const { variant } = useSlider(); return variant === "compact" ? ( ) : ( ); } const Slider = React.forwardRef(function Slider( { children, className, defaultValue = 0, disabled = false, formatValue = String, getAriaLabel, hideTooltip = false, max = 100, min = 0, onValueChange, onValueCommitted, reduceMotion, showSteps = false, step = 1, thumbCollisionBehavior, value: valueProp, variant = "default", ...props }, ref ) { const prefersReducedMotion = useReducedMotion(); const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue); const value = valueProp ?? uncontrolledValue; const resolvedVariant = variant === "compact" || Array.isArray(value) ? "compact" : "default"; const resolvedThumbCollisionBehavior = thumbCollisionBehavior ?? (resolvedVariant === "compact" ? "none" : "push"); const resolvedReduceMotion = reduceMotion ?? Boolean(prefersReducedMotion); const updateValue = (nextValue: SliderValueType) => { if (valueProp === undefined) { setUncontrolledValue(nextValue); } onValueChange?.(nextValue); }; return ( <> updateValue(nextValue as SliderValueType) } onValueCommitted={(nextValue) => onValueCommitted?.(nextValue as SliderValueType) } {...props} > {children ?? } ); }); export { Slider, SliderContent, SliderControl, SliderLabel, SliderValue }; export type { SliderContentProps, SliderControlProps, SliderLabelProps, SliderProps, SliderVariant, SliderValueType, SliderValueProps, }; 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",{"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"}]]}]}],["$","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","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":"@iandefined","registryDependencies":["https://ui.iandefined.com/r/tooltip.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/slider.tsx","content":"$52","type":"registry:ui","target":"components/ui/slider.tsx"}],"className":"h-[70svh] min-h-80"}]]}]