@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/dist/NumberInput/NumberInput.d.ts

@@ -5,6 +5,8 @@
  * @position Core implementation; consumed by index.ts, tested by NumberInput.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/numberParser.ts (locale-aware parsing)
+ * - /packages/core/src/NumberInput/numberInputCommit.ts (draft commit policy)
  * - /packages/core/src/NumberInput/NumberInput.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/NumberInput/NumberInput.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/NumberInput/index.ts (exports if types change)
@@ -159,10 +161,12 @@ interface NumberInputPropsBase extends Omit<BaseProps, 'onChange' | 'defaultValu
     autoComplete?: string;
     /**
      * The minimum value allowed.
+     * A smaller entry commits at this value on blur or Enter.
      */
     min?: number | null;
     /**
      * The maximum value allowed.
+     * A larger entry commits at this value on blur or Enter.
      */
     max?: number | null;
     /**
@@ -233,7 +237,8 @@ type NumberInputPropsClearable = NumberInputPropsBase & {
 export type NumberInputProps = NumberInputPropsNonClearable | NumberInputPropsClearable;
 /**
  * A number input component for collecting numeric user input.
- * Only calls onChange when the entered value passes validation.
+ * Commits text edits on blur or Enter and only calls onChange when the whole
+ * draft passes validation.
  *
  * @example
  * ```

package/dist/NumberInput/NumberInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"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"}

package/dist/NumberInput/NumberInput.js

@@ -9,6 +9,8 @@
  * @position Core implementation; consumed by index.ts, tested by NumberInput.test.tsx
  *
  * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/numberParser.ts (locale-aware parsing)
+ * - /packages/core/src/NumberInput/numberInputCommit.ts (draft commit policy)
  * - /packages/core/src/NumberInput/NumberInput.doc.mjs (props table, features, implementation notes)
  * - /packages/core/src/NumberInput/NumberInput.test.tsx (tests for new/changed behavior)
  * - /packages/core/src/NumberInput/index.ts (exports if types change)
@@ -24,6 +26,7 @@ import { Icon, renderIconSlot } from "../Icon/index.js";
 import { VisuallyHidden } from "../VisuallyHidden/index.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { getInputARIA } from "../utils/index.js";
+import { interactionOverlayStyles } from "../utils/interactionOverlay.stylex.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
@@ -66,6 +69,35 @@ const styles = {
     kwRFfy: "xyri2b",
     $$css: true
   },
+  numberStepperButton: {
+    kB7OPa: "x9f619",
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kUk6DE: "x98rzlu",
+    kAzted: "x2lwn1j",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kMwMTN: "xv9yike",
+    kWkggS: "x10xzikg",
+    kkrTdU: "x1ypdohk x16khyan",
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  },
+  numberStepperButtonDisabled: {
+    kMwMTN: "xqa6c3m",
+    kkrTdU: "xt0e3qv",
+    kKwaWg: "x18o3ruo",
+    $$css: true
+  },
+  decrementButton: {
+    kEafiO: "x11xkdxz",
+    kPef9Z: "x13fuv20",
+    kLZC3w: "x1mly77v",
+    $$css: true
+  },
   incrementIcon: {
     k3aq6I: "x19jd1h0",
     $$css: true
@@ -91,43 +123,15 @@ import { groupStyles } from "../InputGroup/groupStyles.js";
 
 import { isImeKeyEvent, mergeProps, mergeRefs } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
-import { useTranslator } from "../i18n/index.js";
+import { useTranslator, useLocale } from "../i18n/index.js";
+import { formatEditableNumber } from "./numberParser.js";
+import { parseNumberInput, resolveNumberInputCommit } from "./numberInputCommit.js";
 
 /**
  * Without `hasClear`, onChange only receives valid numbers.
  * With `hasClear`, onChange also receives `null` when the user clears the input.
  */
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/**
- * Parse and validate a string input as a number.
- * Returns null if the input is not a valid number or fails validation.
- */
-function parseNumberInput(input, options) {
-  const trimmed = input.trim();
-  if (trimmed === '' || trimmed === '-') {
-    return null;
-  }
-  const num = Number(trimmed);
-  if (!Number.isFinite(num)) {
-    return null;
-  }
-
-  // Check integer constraint
-  if (options.isIntegerOnly && !Number.isInteger(num)) {
-    return null;
-  }
-
-  // Check min constraint
-  if (options.min != null && num < options.min) {
-    return null;
-  }
-
-  // Check max constraint
-  if (options.max != null && num > options.max) {
-    return null;
-  }
-  return num;
-}
 function getDecimalPlaces(value) {
   const [coefficient, exponentText] = String(value).toLowerCase().split('e');
   const fractionLength = coefficient.split('.')[1]?.length ?? 0;
@@ -162,6 +166,11 @@ function getSteppedValue({
     const nextStepPosition = direction === 1 ? Math.floor(stepPosition + tolerance) + 1 : Math.ceil(stepPosition - tolerance) - 1;
     nextValue = stepBase + nextStepPosition * effectiveStep;
   }
+  const precision = Math.min(12, Math.max(getDecimalPlaces(effectiveStep), getDecimalPlaces(stepBase)));
+  nextValue = Number(nextValue.toFixed(precision));
+
+  // Clamp after rounding so a bound with finer precision than the step cannot
+  // be rounded back out of its own range.
   if (min != null) {
     nextValue = Math.max(min, nextValue);
   }
@@ -171,17 +180,16 @@ function getSteppedValue({
   if (!Number.isFinite(nextValue)) {
     return currentValue;
   }
-  const precision = Math.min(12, Math.max(getDecimalPlaces(effectiveStep), getDecimalPlaces(stepBase)));
-  const roundedValue = Number(nextValue.toFixed(precision));
-  if (isIntegerOnly && !Number.isInteger(roundedValue)) {
+  if (isIntegerOnly && !Number.isInteger(nextValue)) {
     return currentValue;
   }
-  return Object.is(roundedValue, -0) ? 0 : roundedValue;
+  return Object.is(nextValue, -0) ? 0 : nextValue;
 }
 
 /**
  * A number input component for collecting numeric user input.
- * Only calls onChange when the entered value passes validation.
+ * Commits text edits on blur or Enter and only calls onChange when the whole
+ * draft passes validation.
  *
  * @example
  * ```
@@ -231,6 +239,7 @@ export function NumberInput({
   ...rest
 }) {
   const t = useTranslator();
+  const locale = useLocale();
   const isEffectivelyRequired = useResolvedRequired({
     isRequired,
     isOptional
@@ -280,6 +289,12 @@ export function NumberInput({
   // The tooltip variant renders no message box; describe the input by the
   // tooltip's content instead so the status is still announced.
   statusTooltipDescribedBy, units ? unitsID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+  const parseInput = useCallback(text => parseNumberInput(text, {
+    min,
+    max,
+    isIntegerOnly,
+    locale
+  }), [isIntegerOnly, locale, max, min]);
   const formattedValue = useMemo(() => {
     if (value == null) {
       return '';
@@ -296,75 +311,62 @@ export function NumberInput({
     if (value == null) {
       return '';
     }
-    return isFocused ? String(value) : formattedValue;
-  }, [formattedValue, isFocused, pendingInput, value]);
+    return isFocused ? formatEditableNumber(value, locale) : formattedValue;
+  }, [formattedValue, isFocused, locale, pendingInput, value]);
 
   // Check if current pending input is valid (for styling purposes)
   const isInputValid = useMemo(() => {
     if (pendingInput === null || !pendingInput.trim()) {
       return true;
     }
-    return parseNumberInput(pendingInput, {
-      min,
-      max,
-      isIntegerOnly
-    }) !== null;
-  }, [pendingInput, min, max, isIntegerOnly]);
+    return parseInput(pendingInput) !== null;
+  }, [pendingInput, parseInput]);
 
-  // Handle input text change - update immediately if valid
+  // Keep the whole text edit as a draft until an explicit commit boundary.
   const handleInputChange = useCallback(e => {
     // Value can't change while showing a disabled message (the field is
     // read-only and non-native-disabled), but guard the handler too so the
-    // pending value and onChange never fire.
+    // pending value never changes.
     if (isDisabled || isReadOnly) {
       return;
     }
-    const newValue = e.target.value;
-    setPendingInput(newValue);
-
-    // If the input is valid, update immediately
-    const parsed = parseNumberInput(newValue, {
-      min,
-      max,
-      isIntegerOnly
-    });
-    if (parsed !== null && parsed !== value) {
-      onChange(parsed);
-    }
-  }, [value, onChange, min, max, isIntegerOnly, isDisabled, isReadOnly]);
+    setPendingInput(e.target.value);
+  }, [isDisabled, isReadOnly]);
 
   // Handle focus
   const handleFocus = useCallback(e => {
     setIsFocused(true);
     onFocus?.(e);
   }, [onFocus]);
-
-  // Handle blur - validate and clear pending input
-  const handleBlur = useCallback(e => {
-    if (pendingInput !== null) {
-      if (hasClear && pendingInput.trim() === '') {
-        // Keyboard clearing honors the clearable contract: an emptied
-        // input commits null instead of silently reverting on blur.
-        if (value != null) {
-          onChange(null);
-        }
-      } else {
-        const parsed = parseNumberInput(pendingInput, {
-          min,
-          max,
-          isIntegerOnly
-        });
-        if (parsed !== null && parsed !== value) {
-          onChange(parsed);
-        }
+  const commitPendingInput = useCallback(trigger => {
+    if (pendingInput === null) {
+      return;
+    }
+    const decision = resolveNumberInputCommit(pendingInput, {
+      min,
+      max,
+      isIntegerOnly,
+      locale,
+      hasClear: !!hasClear
+    });
+    if (trigger === 'blur' || decision.type === 'commit' && decision.didClamp) {
+      setPendingInput(null);
+    }
+    if (decision.type === 'clear') {
+      if (hasClear && value != null) {
+        onChange(null);
       }
+    } else if (decision.type === 'commit' && decision.value !== value) {
+      onChange(decision.value);
     }
+  }, [hasClear, isIntegerOnly, locale, max, min, onChange, pendingInput, value]);
 
-    // Clear pending input - display will revert to formatted value
-    setPendingInput(null);
+  // Blur ends the edit and displays the resulting committed value.
+  const handleBlur = useCallback(e => {
+    commitPendingInput('blur');
     setIsFocused(false);
     onBlur?.(e);
-  }, [pendingInput, value, onChange, min, max, isIntegerOnly, onBlur, hasClear]);
+  }, [commitPendingInput, onBlur]);
   const valueForStepping = useMemo(() => {
     if (pendingInput === null) {
       return value ?? null;
@@ -372,12 +374,8 @@ export function NumberInput({
     if (pendingInput.trim() === '') {
       return null;
     }
-    return parseNumberInput(pendingInput, {
-      min,
-      max,
-      isIntegerOnly
-    }) ?? value ?? null;
-  }, [isIntegerOnly, max, min, pendingInput, value]);
+    return parseInput(pendingInput) ?? value ?? null;
+  }, [parseInput, pendingInput, value]);
   const getNextValue = useCallback(direction => getSteppedValue({
     currentValue: valueForStepping,
     direction,
@@ -423,29 +421,11 @@ export function NumberInput({
       return;
     }
     if (e.key === 'Enter') {
-      // Validate and commit on Enter
-      if (pendingInput !== null) {
-        if (hasClear && pendingInput.trim() === '') {
-          // Same clearable contract as blur: Enter on an emptied input
-          // commits null instead of reverting.
-          if (value != null) {
-            onChange(null);
-          }
-        } else {
-          const parsed = parseNumberInput(pendingInput, {
-            min,
-            max,
-            isIntegerOnly
-          });
-          if (parsed !== null && parsed !== value) {
-            onChange(parsed);
-          }
-        }
-      }
+      commitPendingInput('Enter');
       onEnter?.();
     }
     onKeyDown?.(e);
-  }, [pendingInput, value, onChange, min, max, isIntegerOnly, onEnter, onKeyDown, hasClear, stepValue]);
+  }, [commitPendingInput, onEnter, onKeyDown, stepValue]);
 
   // React's delegated wheel listener can be passive, so use a native,
   // explicitly non-passive listener to prevent page scrolling only when this
@@ -538,7 +518,10 @@ export function NumberInput({
       autoFocus: hasAutoFocus,
       "data-autofocus": hasAutoFocus || undefined,
       "aria-valuemin": min ?? undefined,
-      "aria-valuemax": max ?? undefined,
+      "aria-valuemax": max ?? undefined
+      // The ARIA value and hidden form input expose the committed value;
+      // pendingInput is still an uncommitted edit and may be invalid.
+      ,
       "aria-valuenow": value ?? undefined,
       "aria-valuetext": value == null || !formatValue ? undefined : formattedValue,
       "aria-describedby": ariaDescribedBy,
@@ -595,16 +578,9 @@ export function NumberInput({
           inputRef.current?.focus();
           stepValue(1);
         },
-        ...{
-          0: {
-            className: "x9f619 x78zum5 x6s0dn4 xl56j7k x98rzlu x2lwn1j x1717udv x1ghz6dp xc342km xng3xce xv9yike x10xzikg xmvprkv xq8i9tn x1ypdohk x16khyan x1a2a7pz"
-          },
-          1: {
-            className: "x9f619 x78zum5 x6s0dn4 xl56j7k x98rzlu x2lwn1j x1717udv x1ghz6dp xc342km xng3xce x10xzikg x1a2a7pz xqa6c3m xt0e3qv x18o3ruo"
-          }
-        }[!!(isDisabled || isReadOnly || !canIncrement) << 0],
+        ...stylex.props(styles.numberStepperButton, interactionOverlayStyles.backgroundImage, (isDisabled || isReadOnly || !canIncrement) && styles.numberStepperButtonDisabled),
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: "chevronDown",
+          icon: "numberInput:stepperDown",
           size: "xsm",
           color: "inherit",
           xstyle: styles.incrementIcon
@@ -621,16 +597,9 @@ export function NumberInput({
           inputRef.current?.focus();
           stepValue(-1);
         },
-        ...{
-          0: {
-            className: "x9f619 x78zum5 x6s0dn4 xl56j7k x98rzlu x2lwn1j x1717udv x1ghz6dp xc342km xng3xce xv9yike x10xzikg xmvprkv xq8i9tn x1ypdohk x16khyan x1a2a7pz x11xkdxz x13fuv20 x1mly77v"
-          },
-          1: {
-            className: "x9f619 x78zum5 x6s0dn4 xl56j7k x98rzlu x2lwn1j x1717udv x1ghz6dp xc342km xng3xce x10xzikg x1a2a7pz x11xkdxz x13fuv20 x1mly77v xqa6c3m xt0e3qv x18o3ruo"
-          }
-        }[!!(isDisabled || isReadOnly || !canDecrement) << 0],
+        ...stylex.props(styles.numberStepperButton, interactionOverlayStyles.backgroundImage, styles.decrementButton, (isDisabled || isReadOnly || !canDecrement) && styles.numberStepperButtonDisabled),
         children: /*#__PURE__*/_jsx(Icon, {
-          icon: "chevronDown",
+          icon: "numberInput:stepperDown",
           size: "xsm",
           color: "inherit"
         })

package/dist/NumberInput/numberInputCommit.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @file numberInputCommit.ts
+ * @input A NumberInput draft and the field's validation constraints
+ * @output A single commit, clear, or revert decision for the whole draft
+ * @position Shared internal draft validation and commit policy for NumberInput and its live consumers
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/NumberInput.tsx
+ * - /packages/core/src/NumberInput/numberInputCommit.test.ts
+ * - /packages/core/src/Table/plugins/filtering/useTableFiltering.tsx
+ * - /packages/core/src/PowerSearch/PowerSearchValueEditor.tsx
+ */
+import type { Locale } from '../i18n';
+interface NumberInputValidationOptions {
+    min?: number | null;
+    max?: number | null;
+    isIntegerOnly?: boolean;
+    locale?: Locale;
+}
+export type NumberInputCommitDecision = {
+    type: 'commit';
+    value: number;
+    didClamp: boolean;
+} | {
+    type: 'clear';
+} | {
+    type: 'revert';
+};
+export declare function parseNumberInput(input: string, options: NumberInputValidationOptions): number | null;
+export declare function resolveNumberInputCommit(input: string, options: NumberInputValidationOptions & {
+    hasClear: boolean;
+}): NumberInputCommitDecision;
+export {};
+//# sourceMappingURL=numberInputCommit.d.ts.map

package/dist/NumberInput/numberInputCommit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberInputCommit.d.ts","sourceRoot":"","sources":["../../src/NumberInput/numberInputCommit.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAGpC,UAAU,4BAA4B;IACpC,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,MAAM,yBAAyB,GACjC;IAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GAClD;IAAC,IAAI,EAAE,OAAO,CAAA;CAAC,GACf;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,CAAC;AAqBrB,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,4BAA4B,GACpC,MAAM,GAAG,IAAI,CAYf;AAED,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,4BAA4B,GAAG;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GAC1D,yBAAyB,CAiC3B"}

package/dist/NumberInput/numberInputCommit.js

@@ -0,0 +1,71 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file numberInputCommit.ts
+ * @input A NumberInput draft and the field's validation constraints
+ * @output A single commit, clear, or revert decision for the whole draft
+ * @position Shared internal draft validation and commit policy for NumberInput and its live consumers
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/NumberInput.tsx
+ * - /packages/core/src/NumberInput/numberInputCommit.test.ts
+ * - /packages/core/src/Table/plugins/filtering/useTableFiltering.tsx
+ * - /packages/core/src/PowerSearch/PowerSearchValueEditor.tsx
+ */
+
+import { parseLocaleNumber } from "./numberParser.js";
+function parseNumericInput(input, options) {
+  const trimmed = input.trim();
+  if (trimmed === '') {
+    return null;
+  }
+  const value = parseLocaleNumber(trimmed, options.locale);
+  if (value == null || !Number.isFinite(value)) {
+    return null;
+  }
+  if (options.isIntegerOnly && !Number.isInteger(value)) {
+    return null;
+  }
+  return value;
+}
+export function parseNumberInput(input, options) {
+  const value = parseNumericInput(input, options);
+  if (value === null) {
+    return null;
+  }
+  if (options.min != null && value < options.min) {
+    return null;
+  }
+  if (options.max != null && value > options.max) {
+    return null;
+  }
+  return value;
+}
+export function resolveNumberInputCommit(input, options) {
+  if (input.trim() === '') {
+    return options.hasClear ? {
+      type: 'clear'
+    } : {
+      type: 'revert'
+    };
+  }
+  const value = parseNumericInput(input, options);
+  if (value === null) {
+    return {
+      type: 'revert'
+    };
+  }
+  const min = options.min == null ? null : options.isIntegerOnly ? Math.ceil(options.min) : options.min;
+  const max = options.max == null ? null : options.isIntegerOnly ? Math.floor(options.max) : options.max;
+  if (min != null && max != null && min > max) {
+    return {
+      type: 'revert'
+    };
+  }
+  const committedValue = min != null && value < min ? min : max != null && value > max ? max : value;
+  return {
+    type: 'commit',
+    value: committedValue,
+    didClamp: committedValue !== value
+  };
+}

package/dist/NumberInput/numberParser.d.ts

@@ -0,0 +1,64 @@
+/**
+ * @file numberParser.ts
+ * @input Text a person typed or pasted, plus the resolved BCP 47 locale
+ * @output Exports parseLocaleNumber and formatEditableNumber
+ * @position Internal to NumberInput; not part of the public surface
+ *
+ * People paste numbers out of spreadsheets, and a spreadsheet writes them
+ * grouped, signed, and decorated. This reads those back. Everything locale
+ * specific — the grouping and decimal separators, the group sizes, the digit
+ * script — is derived from Intl and Unicode rather than a table, and text that
+ * no reading fits returns null so the field stays visibly invalid instead of
+ * committing a guess. Where both readings are well formed the locale's wins,
+ * the way utils/dateParser.ts settles an ambiguous date by locale preference.
+ * Grouping is well formed only when every group fits the locale's own sizes:
+ * the last exactly the primary size, each inner one exactly the secondary, the
+ * first no longer than that. So de-DE `1.234` is 1234, while `1.2345` (last
+ * group too long) and `1234.567` (too much ahead of it) keep the full stop as
+ * a decimal point. Groups of three fit every locale, so a separator repeated
+ * with three-digit groups is grouping in all of them and `1,234,567` reads the
+ * same everywhere; for a space or apostrophe, which no locale writes as a
+ * decimal point, one occurrence is enough, so en-US `1 234` is 1234.
+ *
+ * That paragraph is executable: numberParser.docblock.test.ts implements it as
+ * code, quote by quote, and fails when the parser and the words disagree.
+ *
+ * Which characters may separate digits at all is the one thing that is NOT
+ * read off the input: SEPARATOR_CHARS below is a bounded alphabet, the same
+ * shape utils/dateParser.ts uses for its `[-/.]` date separators.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/NumberInput/NumberInput.tsx
+ * - /packages/core/src/NumberInput/numberParser.test.ts
+ * - /packages/core/src/NumberInput/numberParser.docblock.test.ts
+ */
+import type { Locale } from '../i18n';
+/**
+ * Read a number out of text the way a person in `locale` writes one: their
+ * grouping and decimal separators, their group sizes, their digit script, an
+ * optional currency symbol, and the shapes a spreadsheet pastes.
+ *
+ * Returns null rather than a guess. Grouping is validated, so en-US `1,23` —
+ * a comma that is neither a decimal point nor a well-formed group — is not
+ * silently read as 123, and neither is a number written for another locale.
+ * Only the characters some locale writes between digits count as separators,
+ * so `123-456-789` is not a number at all.
+ *
+ * @example
+ * ```
+ * parseLocaleNumber('1,234,234,234', 'en-US')  // 1234234234
+ * parseLocaleNumber('1,234,234,234', 'de-DE')  // 1234234234
+ * parseLocaleNumber('1,5', 'de-DE')            // 1.5
+ * parseLocaleNumber('1.5', 'de-DE')            // 1.5
+ * parseLocaleNumber('1,5', 'en-US')            // null
+ * parseLocaleNumber('123-456-789', 'en-US')    // null
+ * ```
+ */
+export declare function parseLocaleNumber(text: string, locale?: Locale): number | null;
+/**
+ * The text shown while the field is focused: the plain machine number in the
+ * locale's decimal separator, so what a person sees mid-edit is what the
+ * parser reads back on blur.
+ */
+export declare function formatEditableNumber(value: number, locale?: Locale): string;
+//# sourceMappingURL=numberParser.d.ts.map

package/dist/NumberInput/numberParser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberParser.d.ts","sourceRoot":"","sources":["../../src/NumberInput/numberParser.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAEH,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAiPpC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,MAAM,GACd,MAAM,GAAG,IAAI,CA8Ef;AAaD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAI3E"}