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:T1c68,// Currency Input from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, } from '@/registry/hirael/bases/radix/ui/input-group'; const resolveCurrencySymbol = (currency: string, locale: string): string => { try { const parts = new Intl.NumberFormat(locale, { style: 'currency', currency, currencyDisplay: 'narrowSymbol', }).formatToParts(0); const symbol = parts.find((p) => p.type === 'currency')?.value; return symbol ?? currency; } catch { return currency; } }; const formatNumber = (value: number, locale: string, decimals: number): string => { try { return new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, }).format(value); } catch { return value.toFixed(decimals); } }; const resolveDecimalSeparator = (locale: string): string => { try { const parts = new Intl.NumberFormat(locale).formatToParts(12345.6); return parts.find((p) => p.type === 'decimal')?.value ?? '.'; } catch { return '.'; } }; const sanitizeInput = (raw: string, decimals: number, decimalSeparator: string): string => { const kept = [...raw].filter((ch) => (ch >= '0' && ch <= '9') || ch === '-' || ch === decimalSeparator).join(''); const [whole, ...fraction] = kept.replace(/-/g, '').split(decimalSeparator); const sign = kept.startsWith('-') ? '-' : ''; return decimals > 0 && fraction.length > 0 ? `${sign}${whole}${decimalSeparator}${fraction.join('').slice(0, decimals)}` : `${sign}${whole}`; }; const parseToNumber = (view: string, decimalSeparator: string): number | null => { const n = Number(view.replace(decimalSeparator, '.')); return view && Number.isFinite(n) ? n : null; }; interface Ctx { id: string; value: number | null; setValue: (next: number | null) => void; view: string; setView: (next: string) => void; locale: string; decimals: number; disabled?: boolean; symbol: string; decimalSeparator: string; } const CurrencyInputContext = React.createContext(null); const useCurrencyInput = () => { const ctx = React.useContext(CurrencyInputContext); if (!ctx) { throw new Error('CurrencyInput compound parts must be used inside '); } return ctx; }; export interface CurrencyInputProps extends Omit< React.ComponentProps<'div'>, 'children' | 'value' | 'defaultValue' | 'onChange' > { id?: string; value?: number | null; defaultValue?: number | null; onValueChange?: (value: number | null) => void; currency?: string; locale?: string; decimals?: number; disabled?: boolean; /** Submits the plain number (no symbol or grouping) under this name. */ name?: string; children?: React.ReactNode; } const CurrencyInput = ({ id, value: valueProp, defaultValue = null, onValueChange, currency = 'USD', locale = 'en-US', decimals = 2, disabled, name, className, children, ...props }: CurrencyInputProps) => { const reactId = React.useId(); const fieldId = id ?? reactId; const [internalValue, setInternalValue] = React.useState(defaultValue); const value = valueProp !== undefined ? valueProp : internalValue; const setValue = React.useCallback( (next: number | null) => { if (valueProp === undefined) setInternalValue(next); onValueChange?.(next); }, [valueProp, onValueChange], ); const symbol = React.useMemo(() => resolveCurrencySymbol(currency, locale), [currency, locale]); const decimalSeparator = React.useMemo(() => resolveDecimalSeparator(locale), [locale]); const [view, setView] = React.useState(() => (value === null ? '' : formatNumber(value, locale, decimals))); // Reformat on an outside value change or a new locale/precision, but not for the // field's own typing, or every keystroke would snap "1" to "1.00". const formatKey = `${locale}|${decimals}`; const [synced, setSynced] = React.useState({ value, formatKey }); if (synced.value !== value || synced.formatKey !== formatKey) { setSynced({ value, formatKey }); if (synced.formatKey !== formatKey || value !== parseToNumber(view, decimalSeparator)) { setView(value === null ? '' : formatNumber(value, locale, decimals)); } } const ctx = React.useMemo( () => ({ id: fieldId, value, setValue, view, setView, locale, decimals, disabled, symbol, decimalSeparator, }), [fieldId, value, setValue, view, locale, decimals, disabled, symbol, decimalSeparator], ); return ( {children} {name && } ); }; type CurrencyInputAffixProps = Omit, 'align'>; const CurrencyInputAffix = ({ children, ...props }: React.ComponentProps) => { const ctx = useCurrencyInput(); return ( {children ?? ctx.symbol} ); }; const CurrencyInputPrefix = (props: CurrencyInputAffixProps) => { return ; }; const CurrencyInputSuffix = (props: CurrencyInputAffixProps) => { return ; }; type CurrencyInputFieldProps = Omit< React.ComponentProps<'input'>, 'type' | 'value' | 'defaultValue' | 'onChange' | 'id' >; const CurrencyInputField = ({ placeholder = '0', onBlur, onFocus, inputMode = 'decimal', ...props }: CurrencyInputFieldProps) => { const ctx = useCurrencyInput(); return ( { const sanitized = sanitizeInput(e.target.value, ctx.decimals, ctx.decimalSeparator); ctx.setView(sanitized); const parsed = parseToNumber(sanitized, ctx.decimalSeparator); if (parsed !== ctx.value) ctx.setValue(parsed); }} onFocus={(e) => { onFocus?.(e); if (ctx.value !== null) ctx.setView(ctx.value.toFixed(ctx.decimals).replace('.', ctx.decimalSeparator)); }} onBlur={(e) => { onBlur?.(e); const parsed = parseToNumber(ctx.view, ctx.decimalSeparator); ctx.setView(parsed === null ? '' : formatNumber(parsed, ctx.locale, ctx.decimals)); // Only commit a real change, so a plain focus/blur never fires onValueChange. if (parsed !== ctx.value) ctx.setValue(parsed); }} {...props} /> ); }; export { CurrencyInput, CurrencyInputPrefix, CurrencyInputSuffix, CurrencyInputField }; 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":[null,["$","$L50",null,{"namespace":"@hirael","registryDependencies":["input-group"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/hirael/bases/radix/components/currency-input.tsx","content":"$52","type":"registry:component","target":"components/currency-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]