4e: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"] 4f: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"] 50:T19fe,// Number Range from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; import { Input } from '@/registry/hirael/bases/radix/ui/input'; import { Slider } from '@/registry/hirael/bases/radix/ui/slider'; export type NumberRangeValue = [number, number]; export type NumberFormatter = (n: number) => string; export type NumberParser = (s: string) => number; interface NumberRangeContextValue { value: NumberRangeValue; setValue: (v: NumberRangeValue) => void; min: number; max: number; step: number; disabled?: boolean; format: NumberFormatter; parse: NumberParser; prefix?: string; suffix?: string; } const NumberRangeContext = React.createContext(null); const useNumberRange = () => { const ctx = React.useContext(NumberRangeContext); if (!ctx) { throw new Error('NumberRange compound components must be used inside '); } return ctx; }; const clamp = (n: number, lo: number, hi: number) => { return Math.min(hi, Math.max(lo, n)); }; const clampPair = ([lo, hi]: NumberRangeValue, min: number, max: number): NumberRangeValue => { const a = clamp(lo, min, max); const b = clamp(hi, min, max); return a <= b ? [a, b] : [b, a]; }; const defaultFormat: NumberFormatter = (n) => String(n); const defaultParse: NumberParser = (s) => { const cleaned = s.replace(/[^\d.-]/g, ''); // NaN for empty/invalid so a cleared field keeps its old value instead of committing 0. return cleaned === '' ? Number.NaN : Number(cleaned); }; export interface NumberRangeProps extends Omit, 'defaultValue' | 'prefix'> { value?: NumberRangeValue; defaultValue?: NumberRangeValue; onValueChange?: (value: NumberRangeValue) => void; min?: number; max?: number; step?: number; disabled?: boolean; format?: NumberFormatter; parse?: NumberParser; prefix?: string; suffix?: string; } const NumberRange = ({ value: valueProp, defaultValue, onValueChange, min = 0, max = 100, step = 1, disabled, format = defaultFormat, parse = defaultParse, prefix, suffix, className, children, ...props }: NumberRangeProps) => { const [internal, setInternal] = React.useState(defaultValue ?? [min, max]); const value = valueProp ?? internal; const setValue = React.useCallback( (next: NumberRangeValue) => { const clamped = clampPair(next, min, max); if (valueProp === undefined) setInternal(clamped); onValueChange?.(clamped); }, [valueProp, onValueChange, min, max], ); const ctx = React.useMemo( () => ({ value, setValue, min, max, step, disabled, format, parse, prefix, suffix, }), [value, setValue, min, max, step, disabled, format, parse, prefix, suffix], ); return (

{children}

); }; const NumberRangeSlider = ({ className, ...props }: Omit, 'value' | 'onValueChange' | 'min' | 'max' | 'step' | 'defaultValue'>) => { const ctx = useNumberRange(); return ( ctx.setValue([v[0], v[1]] as NumberRangeValue)} data-slot="number-range-slider" className={className} {...props} /> ); }; interface NumberRangeInputProps extends Omit, 'value' | 'onChange' | 'type'> { bound: 'min' | 'max'; } const NumberRangeInput = ({ bound, className, onBlur, onKeyDown, ...props }: NumberRangeInputProps) => { const ctx = useNumberRange(); const current = ctx.value[bound === 'min' ? 0 : 1]; const [draft, setDraft] = React.useState(null); const setBound = (n: number) => ctx.setValue(bound === 'min' ? [n, ctx.value[1]] : [ctx.value[0], n]); const commit = (raw: string) => { // An emptied field keeps the previous value, whatever a custom parser makes of ''. if (raw.trim() === '') return; const parsed = ctx.parse(raw); if (Number.isFinite(parsed)) setBound(parsed); }; return (

{ctx.prefix && ( {ctx.prefix} )} setDraft(e.target.value)} onBlur={(e) => { onBlur?.(e); setDraft(null); if (e.defaultPrevented) return; commit(e.target.value); }} onKeyDown={(e) => { onKeyDown?.(e); if (e.defaultPrevented) return; if (e.key === 'Enter') { e.currentTarget.blur(); } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { e.preventDefault(); const delta = (e.key === 'ArrowUp' ? 1 : -1) * ctx.step * (e.shiftKey ? 10 : 1); setBound(current + delta); setDraft(null); } }} data-slot="number-range-field" className={cn('tabular-nums', ctx.prefix && 'ps-6', ctx.suffix && 'pe-8', className)} {...props} /> {ctx.suffix && ( {ctx.suffix} )}

); }; interface NumberRangeInputsProps extends React.ComponentProps<'div'> { separator?: React.ReactNode; } const NumberRangeInputs = ({ className, separator = '–', ...props }: NumberRangeInputsProps) => { return (

{separator}

); }; export { NumberRange, NumberRangeSlider, NumberRangeInput, NumberRangeInputs }; 4d:["$","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":[null,["$","$L4e",null,{"namespace":"@hirael","registryDependencies":["input","slider"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/hirael/bases/radix/components/number-range.tsx","content":"$50","type":"registry:component","target":"components/number-range.tsx"}],"className":"h-[70svh] min-h-80"}]]}]