@timeax/form-palette 0.0.3 → 0.0.4

package/dist/presets/ui/number.js

@@ -0,0 +1,1078 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Input } from "./input";
+export const InputNumber = React.memo(React.forwardRef((inProps, ref) => {
+    const props = {
+        allowEmpty: true,
+        autoFocus: false,
+        format: true,
+        locale: undefined,
+        localeMatcher: undefined,
+        mode: "decimal",
+        useGrouping: true,
+        step: 1,
+        roundingMode: undefined,
+        type: "text",
+        ...inProps,
+    };
+    const [focusedState, setFocusedState] = React.useState(false);
+    const elementRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const timer = React.useRef(undefined);
+    const lastValue = React.useRef("");
+    const numberFormat = React.useRef(null);
+    const groupChar = React.useRef("");
+    const prefixChar = React.useRef("");
+    const suffixChar = React.useRef("");
+    const _numeral = React.useRef(null);
+    const _group = React.useRef(null);
+    const _minusSign = React.useRef(null);
+    const _currency = React.useRef(null);
+    const _decimal = React.useRef(null);
+    const _decimalSeparator = React.useRef(".");
+    const _suffix = React.useRef(null);
+    const _prefix = React.useRef(null);
+    const _index = React.useRef(() => 0);
+    const isFocusedByClick = React.useRef(false);
+    const resolveLocale = React.useCallback(() => {
+        if (props.locale)
+            return props.locale;
+        if (typeof navigator !== "undefined" && navigator.language) {
+            return navigator.language;
+        }
+        return "en-US";
+    }, [props.locale]);
+    const _locale = resolveLocale();
+    const inputMode = props.inputMode ||
+        (props.mode === "decimal" && !props.minFractionDigits && !props.maxFractionDigits
+            ? "numeric"
+            : "decimal");
+    const getOptions = React.useCallback(() => {
+        return {
+            localeMatcher: props.localeMatcher,
+            style: props.mode,
+            currency: props.currency,
+            currencyDisplay: props.currencyDisplay,
+            useGrouping: props.useGrouping,
+            minimumFractionDigits: props.minFractionDigits !== undefined ? props.minFractionDigits : undefined,
+            maximumFractionDigits: props.maxFractionDigits !== undefined ? props.maxFractionDigits : undefined,
+            roundingMode: props.roundingMode,
+        };
+    }, [
+        props.localeMatcher,
+        props.mode,
+        props.currency,
+        props.currencyDisplay,
+        props.useGrouping,
+        props.minFractionDigits,
+        props.maxFractionDigits,
+        props.roundingMode,
+    ]);
+    const escapeRegExp = (text) => text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
+    const constructParser = React.useCallback(() => {
+        const loc = _locale;
+        numberFormat.current = new Intl.NumberFormat(loc, getOptions());
+        // numerals
+        const numerals = [
+            ...new Intl.NumberFormat(loc, { useGrouping: false }).format(9876543210),
+        ].reverse();
+        const index = new Map(numerals.map((d, i) => [d, i]));
+        _numeral.current = new RegExp("[" + numerals.join("") + "]", "g");
+        _index.current = (d) => index.get(d) ?? 0;
+        // grouping
+        const formatterGroup = new Intl.NumberFormat(loc, { useGrouping: true });
+        groupChar.current = formatterGroup
+            .format(1000000)
+            .trim()
+            .replace(_numeral.current, "")
+            .charAt(0);
+        _group.current = new RegExp("[" + groupChar.current + "]", "g");
+        // minus
+        const formatterMinus = new Intl.NumberFormat(loc, { useGrouping: false });
+        const minusString = formatterMinus
+            .format(-1)
+            .trim()
+            .replace(_numeral.current, "");
+        _minusSign.current = new RegExp("[" + minusString + "]", "g");
+        // currency
+        if (props.currency) {
+            const formatterCurrency = new Intl.NumberFormat(loc, {
+                style: "currency",
+                currency: props.currency,
+                currencyDisplay: props.currencyDisplay,
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0,
+                roundingMode: props.roundingMode,
+            });
+            _currency.current = new RegExp("[" +
+                formatterCurrency
+                    .format(1)
+                    .replace(/\s/g, "")
+                    .replace(_numeral.current, "")
+                    .replace(_group.current, "") +
+                "]", "g");
+        }
+        else {
+            _currency.current = new RegExp("[]", "g");
+        }
+        // decimal separator + expression
+        const formatterDecimal = new Intl.NumberFormat(loc, {
+            useGrouping: false,
+        });
+        const decSample = formatterDecimal.format(1.1).trim().replace(_numeral.current, "");
+        _decimalSeparator.current = decSample || ".";
+        const formatterDecOptions = new Intl.NumberFormat(loc, {
+            ...getOptions(),
+            useGrouping: false,
+        });
+        _decimal.current = new RegExp("[" +
+            formatterDecOptions
+                .format(1.1)
+                .replace(_currency.current, "")
+                .trim()
+                .replace(_numeral.current, "") +
+            "]", "g");
+        // prefix
+        if (props.prefix) {
+            prefixChar.current = props.prefix;
+        }
+        else {
+            const formatterPrefix = new Intl.NumberFormat(loc, {
+                style: props.mode,
+                currency: props.currency,
+                currencyDisplay: props.currencyDisplay,
+            });
+            prefixChar.current = formatterPrefix.format(1).split("1")[0];
+        }
+        _prefix.current = new RegExp(escapeRegExp(prefixChar.current || ""), "g");
+        // suffix
+        if (props.suffix) {
+            suffixChar.current = props.suffix;
+        }
+        else {
+            const formatterSuffix = new Intl.NumberFormat(loc, {
+                style: props.mode,
+                currency: props.currency,
+                currencyDisplay: props.currencyDisplay,
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0,
+                roundingMode: props.roundingMode,
+            });
+            suffixChar.current = formatterSuffix.format(1).split("1")[1];
+        }
+        _suffix.current = new RegExp(escapeRegExp(suffixChar.current || ""), "g");
+    }, [
+        _locale,
+        getOptions,
+        props.currency,
+        props.currencyDisplay,
+        props.mode,
+        props.prefix,
+        props.roundingMode,
+        props.suffix,
+    ]);
+    const formatValue = React.useCallback((value) => {
+        if (value == null)
+            return "";
+        if (value === "-")
+            return "-";
+        const numeric = typeof value === "number"
+            ? value
+            : typeof value === "string"
+                ? Number(value)
+                : Number.NaN;
+        if (Number.isNaN(numeric))
+            return "";
+        if (props.format) {
+            const formatter = numberFormat.current || new Intl.NumberFormat(_locale, getOptions());
+            let formatted = formatter.format(numeric);
+            if (props.prefix) {
+                formatted = props.prefix + formatted;
+            }
+            if (props.suffix) {
+                formatted = formatted + props.suffix;
+            }
+            return formatted;
+        }
+        return numeric.toString();
+    }, [getOptions, _locale, props.format, props.prefix, props.suffix]);
+    const parseValue = React.useCallback((text) => {
+        if (!text)
+            return null;
+        let filteredText = text;
+        if (_suffix.current) {
+            filteredText = filteredText.replace(_suffix.current, "");
+        }
+        if (_prefix.current) {
+            filteredText = filteredText.replace(_prefix.current, "");
+        }
+        filteredText = filteredText
+            .trim()
+            .replace(/\s/g, "")
+            .replace(_currency.current, "")
+            .replace(_group.current, "")
+            .replace(_minusSign.current, "-")
+            .replace(_decimal.current, ".")
+            .replace(_numeral.current, (d) => String(_index.current(d) ?? ""));
+        if (!filteredText)
+            return null;
+        if (filteredText === "-") {
+            return "-";
+        }
+        const parsedValue = +filteredText;
+        return Number.isNaN(parsedValue) ? null : parsedValue;
+    }, []);
+    const addWithPrecision = (base, increment, precision = 10) => Math.round((base + increment) * precision) / precision;
+    const clearTimer = () => {
+        if (timer.current != null) {
+            window.clearInterval(timer.current);
+            timer.current = undefined;
+        }
+    };
+    const allowMinusSign = () => props.min == null || props.min < 0;
+    const isMinusSign = (ch) => {
+        if ((_minusSign.current && _minusSign.current.test(ch)) || ch === "-") {
+            _minusSign.current && (_minusSign.current.lastIndex = 0);
+            return true;
+        }
+        return false;
+    };
+    const isDecimalMode = () => props.mode === "decimal";
+    const isFloat = (val) => {
+        const formatter = new Intl.NumberFormat(_locale, getOptions());
+        const parsed = parseValue(formatter.format(val));
+        if (parsed === null || typeof parsed !== "number") {
+            return false;
+        }
+        return parsed % 1 !== 0;
+    };
+    const replaceDecimalSeparator = (val) => {
+        if (typeof val === "number" && isFloat(val)) {
+            return val.toString().replace(/\.(?=[^.]*$)/, _decimalSeparator.current);
+        }
+        return val;
+    };
+    const isDecimalSign = (ch) => {
+        if (_decimal.current && (_decimal.current.test(ch) || isFloat(Number(ch)))) {
+            _decimal.current.lastIndex = 0;
+            return true;
+        }
+        return false;
+    };
+    const getDecimalCharIndexes = (val) => {
+        let decimalCharIndex = -1;
+        let decimalCharIndexWithoutPrefix = -1;
+        if (_decimal.current) {
+            decimalCharIndex = val.search(_decimal.current);
+            _decimal.current.lastIndex = 0;
+            let filteredVal = val;
+            if (_prefix.current) {
+                filteredVal = filteredVal.replace(_prefix.current, "");
+            }
+            filteredVal = filteredVal.trim().replace(/\s/g, "").replace(_currency.current, "");
+            decimalCharIndexWithoutPrefix = filteredVal.search(_decimal.current);
+            _decimal.current.lastIndex = 0;
+        }
+        return { decimalCharIndex, decimalCharIndexWithoutPrefix };
+    };
+    const getCharIndexes = (val) => {
+        let decimalCharIndex = -1;
+        let minusCharIndex = -1;
+        let suffixCharIndex = -1;
+        let currencyCharIndex = -1;
+        if (_decimal.current) {
+            decimalCharIndex = val.search(_decimal.current);
+            _decimal.current.lastIndex = 0;
+        }
+        if (_minusSign.current) {
+            minusCharIndex = val.search(_minusSign.current);
+            _minusSign.current.lastIndex = 0;
+        }
+        if (_suffix.current) {
+            suffixCharIndex = val.search(_suffix.current);
+            _suffix.current.lastIndex = 0;
+        }
+        if (_currency.current) {
+            currencyCharIndex = val.search(_currency.current);
+            if (currencyCharIndex === 0 && prefixChar.current && prefixChar.current.length > 1) {
+                currencyCharIndex = prefixChar.current.trim().length;
+            }
+            _currency.current.lastIndex = 0;
+        }
+        return { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex };
+    };
+    const resetRegex = () => {
+        if (_numeral.current)
+            _numeral.current.lastIndex = 0;
+        if (_decimal.current)
+            _decimal.current.lastIndex = 0;
+        if (_group.current)
+            _group.current.lastIndex = 0;
+        if (_minusSign.current)
+            _minusSign.current.lastIndex = 0;
+    };
+    const isNumeralChar = (ch) => {
+        if (ch.length === 1 &&
+            ((_numeral.current && _numeral.current.test(ch)) ||
+                (_decimal.current && _decimal.current.test(ch)) ||
+                (_group.current && _group.current.test(ch)) ||
+                (_minusSign.current && _minusSign.current.test(ch)))) {
+            resetRegex();
+            return true;
+        }
+        return false;
+    };
+    const evaluateEmpty = (newValue) => {
+        if ((newValue == null || newValue === "") && !props.allowEmpty) {
+            return props.min ?? 0;
+        }
+        return newValue;
+    };
+    const validateValueByLimit = (value) => {
+        if (value === "-" || value === null || value === "") {
+            return null;
+        }
+        let num = typeof value === "number" ? value : Number(value);
+        if (Number.isNaN(num)) {
+            return null;
+        }
+        if (props.min != null && num < props.min)
+            num = props.min;
+        if (props.max != null && num > props.max)
+            num = props.max;
+        return num;
+    };
+    const validateValue = (value) => {
+        if (value === "-")
+            return null;
+        return validateValueByLimit(value);
+    };
+    const formattedValue = (val) => {
+        const newVal = evaluateEmpty(val);
+        return formatValue(newVal);
+    };
+    const updateModel = (event, value) => {
+        const finalValue = value;
+        if (props.onValueChange) {
+            props.onValueChange({
+                originalEvent: event,
+                value: finalValue,
+                stopPropagation() {
+                    event?.stopPropagation();
+                },
+                preventDefault() {
+                    event?.preventDefault();
+                },
+                target: {
+                    name: props.name ?? null,
+                    id: props.id ?? null,
+                    value: finalValue,
+                },
+            });
+        }
+        if (props.onChange && event) {
+            props.onChange({ originalEvent: event, value: finalValue });
+        }
+    };
+    const handleOnChange = (event, currentValue, newValue) => {
+        if (!props.onChange)
+            return;
+        const parsedCurrent = typeof currentValue === "string" ? parseValue(currentValue) : null;
+        const changed = newValue !== parsedCurrent;
+        if (changed) {
+            props.onChange({ originalEvent: event, value: newValue });
+        }
+    };
+    const concatValues = (val1, val2) => {
+        if (val1 && val2) {
+            const decimalCharIndex = val2.search(_decimal.current);
+            _decimal.current.lastIndex = 0;
+            const newVal1 = replaceDecimalSeparator(val1);
+            const base = newVal1.split(_decimal.current)[0].replace(_suffix.current, "").trim();
+            return decimalCharIndex !== -1 ? base + val2.slice(decimalCharIndex) : val1;
+        }
+        return val1;
+    };
+    const getDecimalLength = (value) => {
+        if (value) {
+            const valueSplit = value.split(_decimal.current);
+            if (valueSplit.length === 2) {
+                return valueSplit[1].replace(_suffix.current, "").length;
+            }
+        }
+        return 0;
+    };
+    const deleteRange = (value, start, end) => {
+        if (end - start === value.length) {
+            return "";
+        }
+        else if (start === 0) {
+            return value.slice(end);
+        }
+        else if (end === value.length) {
+            return value.slice(0, start);
+        }
+        return value.slice(0, start) + value.slice(end);
+    };
+    const replaceSuffix = (value) => value
+        ? value
+            .replace(_suffix.current, "")
+            .trim()
+            .replace(/\s/g, "")
+            .replace(_currency.current, "")
+        : value;
+    const insertText = (value, text, start, end) => {
+        const textSplit = isDecimalSign(text) ? text : text.split(_decimal.current);
+        if (textSplit.length === 2) {
+            const local = value.slice(start, end);
+            const decimalCharIndex = local.search(_decimal.current);
+            _decimal.current.lastIndex = 0;
+            return decimalCharIndex > 0
+                ? value.slice(0, start) + formatValue(text) + replaceSuffix(value).slice(end)
+                : value || formatValue(text);
+        }
+        if (isDecimalSign(text) && value.length === 0) {
+            return formatValue("0.");
+        }
+        if (end - start === value.length) {
+            return formatValue(text);
+        }
+        if (start === 0) {
+            const suffix = /[A-Za-z]$/.test(value[end]) ? end - 1 : end;
+            return text + value.slice(suffix);
+        }
+        if (end === value.length) {
+            return value.slice(0, start) + text;
+        }
+        const selectionValue = value.slice(start, end);
+        const space = /\s$/.test(selectionValue) ? " " : "";
+        return value.slice(0, start) + text + space + value.slice(end);
+    };
+    const evaluateEmptyForUpdate = (newValue) => evaluateEmpty(newValue);
+    const updateInput = (value, insertedValueStr, operation, valueStr) => {
+        insertedValueStr = insertedValueStr || "";
+        const inputEl = inputRef.current;
+        if (!inputEl)
+            return;
+        const inputValue = inputEl.value;
+        let newValue = formatValue(value);
+        const currentLength = inputValue.length;
+        if (newValue !== valueStr && valueStr != null) {
+            newValue = concatValues(newValue, valueStr);
+        }
+        if (currentLength === 0) {
+            inputEl.value = newValue;
+            inputEl.setSelectionRange(0, 0);
+            const index = initCursor();
+            const selectionEnd = index + insertedValueStr.length + (isDecimalSign(insertedValueStr) ? 1 : 0);
+            inputEl.setSelectionRange(selectionEnd, selectionEnd);
+        }
+        else {
+            let selectionStart = inputEl.selectionStart ?? 0;
+            let selectionEnd = inputEl.selectionEnd ?? 0;
+            if (props.maxLength && props.maxLength < newValue.length) {
+                return;
+            }
+            inputEl.value = newValue;
+            const newLength = newValue.length;
+            if (operation === "range-insert") {
+                const startValue = parseValue((inputValue || "").slice(0, selectionStart));
+                const startValueStr = startValue != null ? String(startValue) : "";
+                const startExpr = startValueStr.split("").join("(" + groupChar.current + ")?");
+                const sRegex = new RegExp(startExpr, "g");
+                sRegex.test(newValue);
+                const tExpr = insertedValueStr.split("").join("(" + groupChar.current + ")?");
+                const tRegex = new RegExp(tExpr, "g");
+                tRegex.test(newValue.slice(sRegex.lastIndex));
+                selectionEnd = sRegex.lastIndex + tRegex.lastIndex;
+                inputEl.setSelectionRange(selectionEnd, selectionEnd);
+            }
+            else if (newLength === currentLength) {
+                if (operation === "insert" || operation === "delete-back-single") {
+                    let newSelectionEnd = selectionEnd;
+                    if (insertedValueStr === "0") {
+                        newSelectionEnd = selectionEnd + 1;
+                    }
+                    else {
+                        newSelectionEnd =
+                            newSelectionEnd + Number(isDecimalSign(value) || isDecimalSign(insertedValueStr));
+                    }
+                    inputEl.setSelectionRange(newSelectionEnd, newSelectionEnd);
+                }
+                else if (operation === "delete-single") {
+                    inputEl.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
+                }
+                else if (operation === "delete-range" || operation === "spin") {
+                    inputEl.setSelectionRange(selectionEnd, selectionEnd);
+                }
+            }
+            else if (operation === "delete-back-single") {
+                const prevChar = inputValue.charAt(selectionEnd - 1);
+                const nextChar = inputValue.charAt(selectionEnd);
+                const diff = currentLength - newLength;
+                const isGroupChar = _group.current.test(nextChar);
+                if (isGroupChar && diff === 1) {
+                    selectionEnd = selectionEnd + 1;
+                }
+                else if (!isGroupChar && isNumeralChar(prevChar)) {
+                    selectionEnd = selectionEnd + (-1 * diff + 1);
+                }
+                _group.current.lastIndex = 0;
+                inputEl.setSelectionRange(selectionEnd, selectionEnd);
+            }
+            else if (inputValue === "-" && operation === "insert") {
+                inputEl.setSelectionRange(0, 0);
+                const idx = initCursor();
+                const end = idx + insertedValueStr.length + 1;
+                inputEl.setSelectionRange(end, end);
+            }
+            else {
+                selectionEnd = selectionEnd + (newLength - currentLength);
+                inputEl.setSelectionRange(selectionEnd, selectionEnd);
+            }
+        }
+        inputEl.setAttribute("aria-valuenow", value == null ? "" : String(value));
+    };
+    const updateInputValue = (newValue) => {
+        const evaluated = evaluateEmptyForUpdate(newValue);
+        const inputEl = inputRef.current;
+        if (!inputEl)
+            return;
+        const current = inputEl.value;
+        const formatted = formattedValue(evaluated);
+        if (current !== formatted) {
+            inputEl.value = formatted;
+            inputEl.setAttribute("aria-valuenow", evaluated == null ? "" : String(evaluated));
+        }
+    };
+    const isValueChanged = (currentValue, newValue) => {
+        if (newValue == null && currentValue != null)
+            return true;
+        if (newValue != null) {
+            const parsedCurrent = typeof currentValue === "string" ? parseValue(currentValue) : null;
+            return newValue !== parsedCurrent;
+        }
+        return false;
+    };
+    const updateValue = (event, valueStr, insertedValueStr, operation) => {
+        const inputEl = inputRef.current;
+        if (!inputEl)
+            return;
+        const currentValue = inputEl.value;
+        if (valueStr != null) {
+            const parsed = parseValue(valueStr);
+            const newValue = evaluateEmpty(parsed);
+            const limited = validateValueByLimit(parsed);
+            updateInput(limited, insertedValueStr, operation, valueStr);
+            if (event &&
+                typeof currentValue === "string" &&
+                typeof limited === "number" &&
+                isValueChanged(currentValue, limited)) {
+                handleOnChange(event, currentValue, limited);
+            }
+            // update model immediately for spin/insert/delete etc
+            updateModel(event, limited);
+        }
+    };
+    const spin = (event, dir) => {
+        const inputEl = inputRef.current;
+        if (!inputEl)
+            return;
+        const step = (props.step ?? 1) * dir;
+        const currentValue = parseValue(inputEl.value) ?? 0;
+        const newValue = validateValue(addWithPrecision(currentValue, step));
+        if (newValue == null)
+            return;
+        if (props.maxLength && props.maxLength < formatValue(newValue).length) {
+            return;
+        }
+        // onChange before onValueChange, like Prime
+        handleOnChange(event, inputEl.value, newValue);
+        updateInput(newValue, null, "spin");
+        updateModel(event, newValue);
+    };
+    const _repeat = (event, interval, dir) => {
+        const i = interval ?? 500;
+        clearTimer();
+        timer.current = window.setTimeout(() => {
+            _repeat(event, 40, dir);
+        }, i);
+        spin(event, dir);
+    };
+    const insert = (event, text, sign = {
+        isDecimalSign: false,
+        isMinusSign: false,
+    }) => {
+        const inputEl = inputRef.current;
+        if (!inputEl)
+            return;
+        const minusCharIndexOnText = text.search(_minusSign.current);
+        _minusSign.current.lastIndex = 0;
+        if (!allowMinusSign() && minusCharIndexOnText !== -1) {
+            return;
+        }
+        let selectionStart = inputEl.selectionStart ?? 0;
+        let selectionEnd = inputEl.selectionEnd ?? 0;
+        const inputValue = inputEl.value.trim();
+        const { decimalCharIndex, minusCharIndex, suffixCharIndex, currencyCharIndex } = getCharIndexes(inputValue);
+        const maxFractionDigits = numberFormat.current?.resolvedOptions().maximumFractionDigits ?? 0;
+        const hasBoundOrAffix = !!(props.min || props.max || props.suffix || props.prefix);
+        let newValueStr = null;
+        if (sign.isMinusSign) {
+            const isNewMinusSign = minusCharIndex === -1;
+            if (selectionStart === 0 || selectionStart === currencyCharIndex + 1) {
+                newValueStr = inputValue;
+                if (isNewMinusSign || selectionEnd !== 0) {
+                    newValueStr = insertText(inputValue, text, 0, selectionEnd);
+                }
+                updateValue(event, newValueStr, text, "insert");
+            }
+        }
+        else if (sign.isDecimalSign) {
+            if (decimalCharIndex > 0 && selectionStart === decimalCharIndex) {
+                updateValue(event, inputValue, text, "insert");
+            }
+            else if (decimalCharIndex > selectionStart && decimalCharIndex < selectionEnd) {
+                newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
+                updateValue(event, newValueStr, text, "insert");
+            }
+            else if (decimalCharIndex === -1 && (maxFractionDigits || props.maxFractionDigits)) {
+                const allowedDecimal = inputMode !== "numeric" || (inputMode === "numeric" && hasBoundOrAffix);
+                if (allowedDecimal) {
+                    newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
+                    updateValue(event, newValueStr, text, "insert");
+                }
+            }
+        }
+        else {
+            const operation = selectionStart !== selectionEnd ? "range-insert" : "insert";
+            if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                if (selectionStart + text.length - (decimalCharIndex + 1) <= maxFractionDigits) {
+                    const charIndex = currencyCharIndex >= selectionStart
+                        ? currencyCharIndex - 1
+                        : suffixCharIndex >= selectionStart
+                            ? suffixCharIndex
+                            : inputValue.length;
+                    newValueStr =
+                        inputValue.slice(0, selectionStart) +
+                            text +
+                            inputValue.slice(selectionStart + text.length, charIndex) +
+                            inputValue.slice(charIndex);
+                    updateValue(event, newValueStr, text, operation);
+                }
+            }
+            else {
+                newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
+                updateValue(event, newValueStr, text, operation);
+            }
+        }
+    };
+    const initCursor = () => {
+        const inputEl = inputRef.current;
+        if (!inputEl)
+            return 0;
+        let selectionStart = inputEl.selectionStart ?? 0;
+        let inputValue = inputEl.value;
+        const valueLength = inputValue.length;
+        let index = null;
+        const prefixLength = (prefixChar.current || "").length;
+        inputValue = inputValue.replace(_prefix.current, "");
+        selectionStart = selectionStart - prefixLength;
+        let ch = inputValue.charAt(selectionStart);
+        if (isNumeralChar(ch)) {
+            return selectionStart + prefixLength;
+        }
+        // search left
+        let i = selectionStart - 1;
+        while (i >= 0) {
+            ch = inputValue.charAt(i);
+            if (isNumeralChar(ch)) {
+                index = i + prefixLength;
+                break;
+            }
+            i--;
+        }
+        if (index != null) {
+            inputEl.setSelectionRange(index + 1, index + 1);
+        }
+        else {
+            i = selectionStart;
+            while (i < valueLength) {
+                ch = inputValue.charAt(i);
+                if (isNumeralChar(ch)) {
+                    index = i + prefixLength;
+                    break;
+                }
+                i++;
+            }
+            if (index != null) {
+                inputEl.setSelectionRange(index, index);
+            }
+        }
+        return index ?? 0;
+    };
+    const onInputPointerDown = () => {
+        isFocusedByClick.current = true;
+    };
+    const onInputClick = () => {
+        initCursor();
+    };
+    const onInput = (event) => {
+        if (props.disabled || props.readOnly)
+            return;
+        if (utilsIsSpecialChar.current) {
+            event.currentTarget.value = lastValue.current;
+            utilsIsSpecialChar.current = false;
+        }
+        // Chrome accent-dead fix is in nativeEvent.data; we can skip deep check here
+    };
+    // track special char for alt/ctrl/meta + keys
+    const utilsIsSpecialChar = React.useRef(false);
+    const onInputAndroidKey = (event) => {
+        const isAndroid = /Android/i.test(navigator.userAgent);
+        if (!isAndroid || props.disabled || props.readOnly)
+            return;
+        props.onKeyUp?.(event);
+        if (event.defaultPrevented)
+            return;
+        const code = event.which || event.keyCode;
+        if (code !== 13) {
+            event.preventDefault();
+        }
+        const ch = String.fromCharCode(code);
+        const decimal = isDecimalSign(ch);
+        const minus = isMinusSign(ch);
+        if ((code >= 48 && code <= 57) || minus || decimal) {
+            insert(event, ch, { isDecimalSign: decimal, isMinusSign: minus });
+        }
+        else {
+            const inputVal = event.target.value;
+            updateValue(event, inputVal, null, "delete-single");
+        }
+    };
+    const onInputKeyDown = (event) => {
+        if (props.disabled || props.readOnly)
+            return;
+        if (event.altKey || event.ctrlKey || event.metaKey) {
+            // cut is treated as normal char
+            if (event.key.toLowerCase() === "x" && (event.ctrlKey || event.metaKey)) {
+                utilsIsSpecialChar.current = false;
+            }
+            else {
+                utilsIsSpecialChar.current = true;
+            }
+            return;
+        }
+        props.onKeyDown?.(event);
+        if (event.defaultPrevented)
+            return;
+        const inputEl = event.currentTarget;
+        lastValue.current = inputEl.value;
+        const isAndroid = /Android/i.test(navigator.userAgent);
+        if (isAndroid)
+            return;
+        let selectionStart = inputEl.selectionStart ?? 0;
+        let selectionEnd = inputEl.selectionEnd ?? 0;
+        const inputValue = inputEl.value;
+        let newValueStr = null;
+        switch (event.code) {
+            case "ArrowUp":
+                spin(event, 1);
+                event.preventDefault();
+                break;
+            case "ArrowDown":
+                spin(event, -1);
+                event.preventDefault();
+                break;
+            case "ArrowLeft": {
+                const charPrev = inputValue.charAt(selectionStart - 1);
+                if (!isNumeralChar(charPrev)) {
+                    event.preventDefault();
+                }
+                break;
+            }
+            case "ArrowRight": {
+                const charNext = inputValue.charAt(selectionStart);
+                if (!isNumeralChar(charNext)) {
+                    event.preventDefault();
+                }
+                break;
+            }
+            case "Tab":
+            case "Enter":
+            case "NumpadEnter": {
+                const parsedVal = validateValue(parseValue(inputValue));
+                inputRef.current.value = formatValue(parsedVal);
+                inputRef.current.setAttribute("aria-valuenow", parsedVal == null ? "" : String(parsedVal));
+                updateModel(event, parsedVal);
+                break;
+            }
+            case "Backspace": {
+                event.preventDefault();
+                if (selectionStart === selectionEnd) {
+                    const deleteChar = inputValue.charAt(selectionStart - 1);
+                    if (isNumeralChar(deleteChar)) {
+                        const { decimalCharIndex, decimalCharIndexWithoutPrefix, } = getDecimalCharIndexes(inputValue);
+                        const decimalLength = getDecimalLength(inputValue);
+                        if (_group.current.test(deleteChar)) {
+                            _group.current.lastIndex = 0;
+                            newValueStr =
+                                inputValue.slice(0, selectionStart - 2) + inputValue.slice(selectionStart - 1);
+                        }
+                        else if (_decimal.current.test(deleteChar)) {
+                            _decimal.current.lastIndex = 0;
+                            if (decimalLength) {
+                                inputRef.current.setSelectionRange(selectionStart - 1, selectionStart - 1);
+                            }
+                            else {
+                                newValueStr =
+                                    inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+                            }
+                        }
+                        else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                            const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? "" : "0";
+                            newValueStr =
+                                inputValue.slice(0, selectionStart - 1) +
+                                    insertedText +
+                                    inputValue.slice(selectionStart);
+                        }
+                        else if (decimalCharIndexWithoutPrefix === 1) {
+                            newValueStr =
+                                inputValue.slice(0, selectionStart - 1) +
+                                    "0" +
+                                    inputValue.slice(selectionStart);
+                            newValueStr = parseValue(newValueStr) > 0 ? newValueStr : "";
+                        }
+                        else {
+                            newValueStr =
+                                inputValue.slice(0, selectionStart - 1) + inputValue.slice(selectionStart);
+                        }
+                    }
+                    else if (_currency.current.test(deleteChar)) {
+                        const { minusCharIndex, currencyCharIndex, } = getCharIndexes(inputValue);
+                        if (minusCharIndex === currencyCharIndex - 1) {
+                            newValueStr =
+                                inputValue.slice(0, minusCharIndex) + inputValue.slice(selectionStart);
+                        }
+                    }
+                    updateValue(event, newValueStr, null, "delete-single");
+                }
+                else {
+                    newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
+                    updateValue(event, newValueStr, null, "delete-range");
+                }
+                break;
+            }
+            case "Delete": {
+                event.preventDefault();
+                if (selectionStart === selectionEnd) {
+                    const deleteChar = inputValue.charAt(selectionStart);
+                    const { decimalCharIndex, decimalCharIndexWithoutPrefix, } = getDecimalCharIndexes(inputValue);
+                    if (isNumeralChar(deleteChar)) {
+                        const decimalLength = getDecimalLength(inputValue);
+                        if (_group.current.test(deleteChar)) {
+                            _group.current.lastIndex = 0;
+                            newValueStr =
+                                inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 2);
+                        }
+                        else if (_decimal.current.test(deleteChar)) {
+                            _decimal.current.lastIndex = 0;
+                            if (decimalLength) {
+                                inputRef.current.setSelectionRange(selectionStart + 1, selectionStart + 1);
+                            }
+                            else {
+                                newValueStr =
+                                    inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
+                            }
+                        }
+                        else if (decimalCharIndex > 0 && selectionStart > decimalCharIndex) {
+                            const insertedText = isDecimalMode() && (props.minFractionDigits || 0) < decimalLength ? "" : "0";
+                            newValueStr =
+                                inputValue.slice(0, selectionStart) +
+                                    insertedText +
+                                    inputValue.slice(selectionStart + 1);
+                        }
+                        else if (decimalCharIndexWithoutPrefix === 1) {
+                            newValueStr =
+                                inputValue.slice(0, selectionStart) +
+                                    "0" +
+                                    inputValue.slice(selectionStart + 1);
+                            newValueStr = parseValue(newValueStr) > 0 ? newValueStr : "";
+                        }
+                        else {
+                            newValueStr =
+                                inputValue.slice(0, selectionStart) + inputValue.slice(selectionStart + 1);
+                        }
+                    }
+                    updateValue(event, newValueStr, null, "delete-back-single");
+                }
+                else {
+                    newValueStr = deleteRange(inputValue, selectionStart, selectionEnd);
+                    updateValue(event, newValueStr, null, "delete-range");
+                }
+                break;
+            }
+            case "End":
+                event.preventDefault();
+                if (props.max != null) {
+                    updateModel(event, props.max);
+                    updateInputValue(props.max);
+                }
+                break;
+            case "Home":
+                event.preventDefault();
+                if (props.min != null) {
+                    updateModel(event, props.min);
+                    updateInputValue(props.min);
+                }
+                break;
+            default: {
+                event.preventDefault();
+                let ch = event.key;
+                if (!ch)
+                    break;
+                if (ch === ".") {
+                    ch = _decimalSeparator.current;
+                }
+                const decimal = isDecimalSign(ch);
+                const minus = isMinusSign(ch);
+                if ((ch >= "0" && ch <= "9") || minus || decimal) {
+                    insert(event, ch, { isDecimalSign: decimal, isMinusSign: minus });
+                }
+                break;
+            }
+        }
+    };
+    const onPaste = (event) => {
+        event.preventDefault();
+        if (props.disabled || props.readOnly)
+            return;
+        const data = (event.clipboardData || window.clipboardData).getData("Text");
+        if (!data)
+            return;
+        const filteredData = parseValue(data);
+        if (filteredData != null) {
+            if (typeof filteredData === "number" && isFloat(filteredData)) {
+                const formatted = formatValue(filteredData);
+                if (inputRef.current) {
+                    inputRef.current.value = formatted;
+                }
+                updateModel(event, filteredData);
+            }
+            else {
+                insert(event, String(filteredData));
+            }
+        }
+    };
+    const onInputFocus = (event) => {
+        setFocusedState(true);
+        props.onFocus?.(event);
+        if ((props.suffix || props.currency || props.prefix) && inputRef.current && !isFocusedByClick.current) {
+            const inputValue = inputRef.current.value;
+            const prefixLength = (prefixChar.current || "").length;
+            const suffixLength = (suffixChar.current || "").length;
+            const end = inputValue.length === 0 ? 0 : inputValue.length - suffixLength;
+            inputRef.current.setSelectionRange(prefixLength, end);
+        }
+    };
+    const onInputBlur = (event) => {
+        setFocusedState(false);
+        isFocusedByClick.current = false;
+        if (inputRef.current) {
+            const currentValue = inputRef.current.value;
+            if (isValueChanged(currentValue, props.value ?? null)) {
+                const newValue = validateValue(parseValue(currentValue));
+                updateInputValue(newValue);
+                updateModel(event, newValue);
+            }
+        }
+        props.onBlur?.(event);
+    };
+    const changeValue = () => {
+        const val = validateValueByLimit(props.value);
+        updateInputValue(props.format ? val : replaceDecimalSeparator(val));
+        const newValue = validateValue(props.value);
+        if (props.value != null && props.value !== newValue) {
+            updateModel(null, newValue);
+        }
+    };
+    React.useImperativeHandle(ref, () => inputRef.current);
+    // attach provided inputRef
+    React.useEffect(() => {
+        if (props.inputRef) {
+            if (typeof props.inputRef === "function") {
+                props.inputRef(inputRef.current);
+            }
+            else {
+                props.inputRef.current =
+                    inputRef.current;
+            }
+        }
+    }, [props.inputRef]);
+    // unmount cleanup
+    React.useEffect(() => () => {
+        clearTimer();
+    }, []);
+    // mount init
+    React.useEffect(() => {
+        constructParser();
+        const newValue = validateValue(props.value);
+        if (props.value != null && props.value !== newValue) {
+            updateModel(null, newValue);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // update on locale/options changes
+    React.useEffect(() => {
+        constructParser();
+        changeValue();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        _locale,
+        props.locale,
+        props.localeMatcher,
+        props.mode,
+        props.currency,
+        props.currencyDisplay,
+        props.useGrouping,
+        props.minFractionDigits,
+        props.maxFractionDigits,
+        props.suffix,
+        props.prefix,
+    ]);
+    // update on value changes
+    React.useEffect(() => {
+        changeValue();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.value]);
+    // disable timer if disabled
+    React.useEffect(() => {
+        if (props.disabled)
+            clearTimer();
+    }, [props.disabled]);
+    // ---- render ----
+    const inputClassName = [
+        props.inputClassName,
+        props.invalid ? "p-invalid" : undefined,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const valueToRender = formattedValue(props.value ?? null);
+    // Destructure once near the top of your render/component:
+    const { inputId, inputStyle, leadingControl, trailingControl, leadingControlClassName, trailingControlClassName, value, icon, iconGap, 
+    // anything you *don’t* want to pass down can be pulled out here too
+    // e.g. internal-only props
+    ...passThroughProps // everything else goes straight to ShadcnTextVariant
+     } = props;
+    return (
+    //@ts-ignore
+    _jsx(Input, { value: value, ref: inputRef, ...passThroughProps, 
+        // 2. override / shape the ones we control
+        id: inputId ?? props.id, style: inputStyle ?? props.style, role: "spinbutton", className: inputClassName || props.className, defaultValue: valueToRender, type: props.type ?? "text", inputMode: inputMode, 
+        // 3. internal event handlers (your logic wins over anything from props)
+        onKeyDown: onInputKeyDown, onKeyPress: onInputAndroidKey, onInput: onInput, onClick: onInputClick, onPointerDown: onInputPointerDown, onBlur: onInputBlur, onFocus: onInputFocus, onPaste: onPaste, 
+        // 4. controls / adornments
+        leadingControl: leadingControl, trailingControl: trailingControl, leadingControlClassName: leadingControlClassName, trailingControlClassName: trailingControlClassName, icon: icon, iconGap: iconGap }));
+}));
+InputNumber.displayName = "InputNumber";
+//# sourceMappingURL=number.js.map