@nexus-cross/design-system 2.0.4 → 2.0.6

package/cursor-rules/nexus-ui-api.mdc

@@ -1769,13 +1769,14 @@ Number input with two variants: basic (chevron arrows) and bind (+/- buttons). S
 
 WHEN TO USE:
   • Any numeric field — quantity, score, age, count
-  • Currency with thousand separators → PriceInput instead
+  • Need thousand separators? Set separator={true}
+  • Currency UX (prefix $, balance, maxBalance, click-to-fill balance) → PriceInput instead
   • Date / time → DatePicker instead
 
 ANTI-PATTERNS:
   ✗ <TextInput type="number"> → <NumberInput> (loses keyboard ↑↓, step, accelerated long-press, max click)
   ✗ Custom +/- buttons + <input> → variant="bind" (or numberInputBind for external)
-  ✗ Manual thousand separators for currency → PriceInput
+  ✗ Manual thousand separator string formatting → use separator={true}
   ✗ Inline unit text inside label/description → use prefixIcon/suffixIcon (e.g. suffixIcon="%")
 
 | Prop | Type | Default | Description |
@@ -1797,6 +1798,7 @@ ANTI-PATTERNS:
 | `disabled` | `boolean` | - | Disabled |
 | `readOnly` | `boolean` | - | Read-only (includes hiding buttons) |
 | `placeholder` | `string` | - | Placeholder (default: "0") |
+| `separator` | `boolean` | `false` | Display thousand-separator commas (e.g. 1,000). onValueChange still receives raw number without commas. Decimal part is not separated (1,234.567). |
 | `name` | `string` | - | Form field name |
 | `id` | `string` | - | Element ID |
 | `autoFocus` | `boolean` | - | Auto focus |

package/dist/chunks/chunk-3BMVYJCA.js

@@ -0,0 +1,15 @@
+'use strict';
+
+// src/utils/numberFormat.ts
+function formatWithComma(value) {
+  if (!value) return value;
+  const [intPart, decPart] = value.split(".");
+  const formatted = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return decPart !== void 0 ? `${formatted}.${decPart}` : formatted;
+}
+function stripComma(value) {
+  return value.replace(/,/g, "");
+}
+
+exports.formatWithComma = formatWithComma;
+exports.stripComma = stripComma;

package/dist/chunks/{chunk-2BINGHGR.js → chunk-EBMOQIY5.js}

@@ -1,5 +1,6 @@
 'use strict';
 
+var chunk3BMVYJCA_js = require('./chunk-3BMVYJCA.js');
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');
 var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
@@ -128,6 +129,7 @@ var NumberInput = React__namespace.forwardRef(
     readOnly,
     onValueChange,
     placeholder,
+    separator = false,
     ...props
   }, ref) => {
     const inputRef = React__namespace.useRef(null);
@@ -160,12 +162,24 @@ var NumberInput = React__namespace.forwardRef(
     );
     const handleInputChange = React__namespace.useCallback(
       (e) => {
-        const raw = e.target.value;
+        const rawInput = e.target.value;
+        const raw = separator ? chunk3BMVYJCA_js.stripComma(rawInput) : rawInput;
         const regex = digit > 0 ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
         if (!regex.test(raw)) return;
         setInternalValue(raw);
+        if (separator && inputRef.current) {
+          const cursorPos = e.target.selectionStart ?? 0;
+          const commasBefore = (rawInput.slice(0, cursorPos).match(/,/g) || []).length;
+          const formatted = chunk3BMVYJCA_js.formatWithComma(raw);
+          const el = inputRef.current;
+          requestAnimationFrame(() => {
+            const commasAfter = (formatted.slice(0, cursorPos).match(/,/g) || []).length;
+            const newPos = cursorPos + (commasAfter - commasBefore);
+            el.setSelectionRange(newPos, newPos);
+          });
+        }
       },
-      [digit]
+      [digit, separator]
     );
     const handleBlur = React__namespace.useCallback(() => {
       commitValue(internalValue);
@@ -318,7 +332,7 @@ var NumberInput = React__namespace.forwardRef(
                 inputMode: "decimal",
                 role: "spinbutton",
                 className: chunkCZC76ZD5_js.cn("nexus-number-input__field", inputClassName),
-                value: internalValue,
+                value: separator ? chunk3BMVYJCA_js.formatWithComma(internalValue) : internalValue,
                 disabled,
                 readOnly,
                 placeholder: placeholder ?? "0",

package/dist/chunks/{chunk-RL5UAEGQ.mjs → chunk-FMUWSORG.mjs}

@@ -1,3 +1,4 @@
+import { stripComma, formatWithComma } from './chunk-KHCPES3K.mjs';
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
@@ -106,6 +107,7 @@ var NumberInput = React.forwardRef(
     readOnly,
     onValueChange,
     placeholder,
+    separator = false,
     ...props
   }, ref) => {
     const inputRef = React.useRef(null);
@@ -138,12 +140,24 @@ var NumberInput = React.forwardRef(
     );
     const handleInputChange = React.useCallback(
       (e) => {
-        const raw = e.target.value;
+        const rawInput = e.target.value;
+        const raw = separator ? stripComma(rawInput) : rawInput;
         const regex = digit > 0 ? /^-?\d*\.?\d*$/ : /^-?\d*$/;
         if (!regex.test(raw)) return;
         setInternalValue(raw);
+        if (separator && inputRef.current) {
+          const cursorPos = e.target.selectionStart ?? 0;
+          const commasBefore = (rawInput.slice(0, cursorPos).match(/,/g) || []).length;
+          const formatted = formatWithComma(raw);
+          const el = inputRef.current;
+          requestAnimationFrame(() => {
+            const commasAfter = (formatted.slice(0, cursorPos).match(/,/g) || []).length;
+            const newPos = cursorPos + (commasAfter - commasBefore);
+            el.setSelectionRange(newPos, newPos);
+          });
+        }
       },
-      [digit]
+      [digit, separator]
     );
     const handleBlur = React.useCallback(() => {
       commitValue(internalValue);
@@ -296,7 +310,7 @@ var NumberInput = React.forwardRef(
                 inputMode: "decimal",
                 role: "spinbutton",
                 className: cn("nexus-number-input__field", inputClassName),
-                value: internalValue,
+                value: separator ? formatWithComma(internalValue) : internalValue,
                 disabled,
                 readOnly,
                 placeholder: placeholder ?? "0",