@nexus-cross/design-system 2.0.5 → 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",

package/dist/chunks/chunk-KHCPES3K.mjs

@@ -0,0 +1,12 @@
+// 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, "");
+}
+
+export { formatWithComma, stripComma };

package/dist/chunks/{chunk-4ENXP7WH.js → chunk-L7SGGDY3.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');
@@ -25,15 +26,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-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, "");
-}
 var priceInputVariants = classVarianceAuthority.cva("nexus-price-input", {
   variants: {
     size: {
@@ -98,14 +90,14 @@ var PriceInput = React__namespace.forwardRef(
     const handleChange = React__namespace.useCallback(
       (e) => {
         const rawInput = e.target.value;
-        const raw = separator ? stripComma(rawInput) : rawInput;
+        const raw = separator ? chunk3BMVYJCA_js.stripComma(rawInput) : rawInput;
         if (!isControlled) setInternalValue(raw);
         onValueChange?.(raw);
         onChange?.(e);
         if (separator && inputRef.current) {
           const cursorPos = e.target.selectionStart ?? 0;
           const commasBefore = (rawInput.slice(0, cursorPos).match(/,/g) || []).length;
-          const formatted = formatWithComma(raw);
+          const formatted = chunk3BMVYJCA_js.formatWithComma(raw);
           const el = inputRef.current;
           requestAnimationFrame(() => {
             el.value = formatted;
@@ -162,7 +154,7 @@ var PriceInput = React__namespace.forwardRef(
               disabled,
               "aria-invalid": hasError || void 0,
               "aria-describedby": description ? `${inputId}-desc` : void 0,
-              value: isControlled ? separator ? formatWithComma(String(controlledValue)) : controlledValue : void 0,
+              value: isControlled ? separator ? chunk3BMVYJCA_js.formatWithComma(String(controlledValue)) : controlledValue : void 0,
               defaultValue: !isControlled ? void 0 : void 0,
               onChange: handleChange,
               inputMode: "decimal",

package/dist/chunks/{chunk-WGGBE4ZD.mjs → chunk-QBMDWUQU.mjs}

@@ -1,17 +1,9 @@
+import { stripComma, formatWithComma } from './chunk-KHCPES3K.mjs';
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-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, "");
-}
 var priceInputVariants = cva("nexus-price-input", {
   variants: {
     size: {

package/dist/components/NumberInput.d.ts

@@ -43,6 +43,14 @@ interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEleme
     containerClassName?: string;
     /** <input> element 자체에 적용 (font-size 같은 텍스트 스타일 오버라이드 시). */
     inputClassName?: string;
+    /**
+     * 천단위 콤마 구분자를 화면에 표시.
+     * - `false` (default): `1000` 그대로 표시
+     * - `true`: 화면엔 `1,000` 으로 표시하되, `onValueChange` 로는 콤마 없는 raw 숫자 (1000) 가 전달됨
+     *
+     * 소수점은 콤마가 들어가지 않는다 (`1234.567` → `1,234.567`).
+     */
+    separator?: boolean;
 }
 declare function numberInputBind(ref: React.RefObject<NumberInputRef | null>, direction: 'increment' | 'decrement'): {
     onPointerDown: (e: React.PointerEvent) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,QAAA,MAAM,mBAAmB;;;8EAcvB,CAAC;AAqDH,UAAU,cAAc;IACtB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IAChD,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,UAAU,gBACR,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,UAAU,GAAG,OAAO,CAC9B,EACD,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAcD,iBAAS,eAAe,CACtB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAC3C,SAAS,EAAE,WAAW,GAAG,WAAW;uBAGf,KAAK,CAAC,YAAY;;;EAOxC;AAED,QAAA,MAAM,WAAW,yFA+ThB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,eAAe,EAAE,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../src/components/NumberInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,mBAAmB;;;8EAcvB,CAAC;AAqDH,UAAU,cAAc;IACtB,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAC/B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IAChD,cAAc,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;IAChD,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAED,UAAU,gBACR,SAAQ,IAAI,CACR,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,GAAG,UAAU,GAAG,OAAO,CAC9B,EACD,YAAY,CAAC,OAAO,mBAAmB,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,6DAA6D;IAC7D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAcD,iBAAS,eAAe,CACtB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,EAC3C,SAAS,EAAE,WAAW,GAAG,WAAW;uBAGf,KAAK,CAAC,YAAY;;;EAOxC;AAED,QAAA,MAAM,WAAW,yFAkVhB,CAAC;AAIF,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,eAAe,EAAE,CAAC;AAC7D,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAC"}

package/dist/components/PriceInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PriceInput.d.ts","sourceRoot":"","sources":["../../src/components/PriceInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAclE,QAAA,MAAM,kBAAkB;;;8EAatB,CAAC;AAEH,UAAU,eACR,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,CAAC,EACtG,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gGAAgG;IAChG,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,sEAAsE;IACtE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2GAA2G;IAC3G,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,iHAAiH;IACjH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yFAAyF;IACzF,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,UAAU,0FAqMf,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"PriceInput.d.ts","sourceRoot":"","sources":["../../src/components/PriceInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,QAAA,MAAM,kBAAkB;;;8EAatB,CAAC;AAEH,UAAU,eACR,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,CAAC,EACtG,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gGAAgG;IAChG,MAAM,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC;IACnC,sEAAsE;IACtE,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,yDAAyD;IACzD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,2GAA2G;IAC3G,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,iHAAiH;IACjH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2GAA2G;IAC3G,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,iCAAiC;IACjC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,yFAAyF;IACzF,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,UAAU,0FAqMf,CAAC;AAIF,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/index.js

@@ -41,8 +41,9 @@ var chunkJ5ZKGPBY_js = require('./chunks/chunk-J5ZKGPBY.js');
 var chunkX2SHTVZQ_js = require('./chunks/chunk-X2SHTVZQ.js');
 var chunkBBLBTOP4_js = require('./chunks/chunk-BBLBTOP4.js');
 var chunkXGIJZ3NZ_js = require('./chunks/chunk-XGIJZ3NZ.js');
-var chunk2BINGHGR_js = require('./chunks/chunk-2BINGHGR.js');
-var chunk4ENXP7WH_js = require('./chunks/chunk-4ENXP7WH.js');
+var chunkEBMOQIY5_js = require('./chunks/chunk-EBMOQIY5.js');
+var chunkL7SGGDY3_js = require('./chunks/chunk-L7SGGDY3.js');
+require('./chunks/chunk-3BMVYJCA.js');
 var chunkMA2VCCIY_js = require('./chunks/chunk-MA2VCCIY.js');
 var chunkR744EATX_js = require('./chunks/chunk-R744EATX.js');
 var chunkF24AY3HI_js = require('./chunks/chunk-F24AY3HI.js');
@@ -766,23 +767,23 @@ Object.defineProperty(exports, "textAreaVariants", {
 });
 Object.defineProperty(exports, "NumberInput", {
   enumerable: true,
-  get: function () { return chunk2BINGHGR_js.NumberInput; }
+  get: function () { return chunkEBMOQIY5_js.NumberInput; }
 });
 Object.defineProperty(exports, "numberInputBind", {
   enumerable: true,
-  get: function () { return chunk2BINGHGR_js.numberInputBind; }
+  get: function () { return chunkEBMOQIY5_js.numberInputBind; }
 });
 Object.defineProperty(exports, "numberInputVariants", {
   enumerable: true,
-  get: function () { return chunk2BINGHGR_js.numberInputVariants; }
+  get: function () { return chunkEBMOQIY5_js.numberInputVariants; }
 });
 Object.defineProperty(exports, "PriceInput", {
   enumerable: true,
-  get: function () { return chunk4ENXP7WH_js.PriceInput; }
+  get: function () { return chunkL7SGGDY3_js.PriceInput; }
 });
 Object.defineProperty(exports, "priceInputVariants", {
   enumerable: true,
-  get: function () { return chunk4ENXP7WH_js.priceInputVariants; }
+  get: function () { return chunkL7SGGDY3_js.priceInputVariants; }
 });
 Object.defineProperty(exports, "Avatar", {
   enumerable: true,

package/dist/index.mjs

@@ -39,8 +39,9 @@ export { CheckBox, checkBoxVariants } from './chunks/chunk-MRRKW5QN.mjs';
 export { Switch, switchVariants } from './chunks/chunk-ADO7PDLY.mjs';
 export { TextInput, textInputVariants } from './chunks/chunk-UKRU46PH.mjs';
 export { TextArea, textAreaVariants } from './chunks/chunk-ZU4AWAFT.mjs';
-export { NumberInput, numberInputBind, numberInputVariants } from './chunks/chunk-RL5UAEGQ.mjs';
-export { PriceInput, priceInputVariants } from './chunks/chunk-WGGBE4ZD.mjs';
+export { NumberInput, numberInputBind, numberInputVariants } from './chunks/chunk-FMUWSORG.mjs';
+export { PriceInput, priceInputVariants } from './chunks/chunk-QBMDWUQU.mjs';
+import './chunks/chunk-KHCPES3K.mjs';
 export { Avatar, avatarVariants } from './chunks/chunk-YLO4UKSC.mjs';
 export { ModalContainer_default as ModalContainer, ModalPortalTarget_default as ModalPortalTarget, ModalTemplate_default as ModalTemplate, checkModal, closeModal, getModalDefaultOption, openModal as modal, openModal, resetModal } from './chunks/chunk-7WWQ5DS3.mjs';
 export { useDraggableBottomSheet } from './chunks/chunk-WBCXHGRL.mjs';

package/dist/number-input.js

@@ -1,19 +1,20 @@
 'use strict';
 
-var chunk2BINGHGR_js = require('./chunks/chunk-2BINGHGR.js');
+var chunkEBMOQIY5_js = require('./chunks/chunk-EBMOQIY5.js');
+require('./chunks/chunk-3BMVYJCA.js');
 require('./chunks/chunk-CZC76ZD5.js');
 
 
 
 Object.defineProperty(exports, "NumberInput", {
   enumerable: true,
-  get: function () { return chunk2BINGHGR_js.NumberInput; }
+  get: function () { return chunkEBMOQIY5_js.NumberInput; }
 });
 Object.defineProperty(exports, "numberInputBind", {
   enumerable: true,
-  get: function () { return chunk2BINGHGR_js.numberInputBind; }
+  get: function () { return chunkEBMOQIY5_js.numberInputBind; }
 });
 Object.defineProperty(exports, "numberInputVariants", {
   enumerable: true,
-  get: function () { return chunk2BINGHGR_js.numberInputVariants; }
+  get: function () { return chunkEBMOQIY5_js.numberInputVariants; }
 });

package/dist/number-input.mjs

@@ -1,2 +1,3 @@
-export { NumberInput, numberInputBind, numberInputVariants } from './chunks/chunk-RL5UAEGQ.mjs';
+export { NumberInput, numberInputBind, numberInputVariants } from './chunks/chunk-FMUWSORG.mjs';
+import './chunks/chunk-KHCPES3K.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/price-input.js

@@ -1,15 +1,16 @@
 'use strict';
 
-var chunk4ENXP7WH_js = require('./chunks/chunk-4ENXP7WH.js');
+var chunkL7SGGDY3_js = require('./chunks/chunk-L7SGGDY3.js');
+require('./chunks/chunk-3BMVYJCA.js');
 require('./chunks/chunk-CZC76ZD5.js');
 
 
 
 Object.defineProperty(exports, "PriceInput", {
   enumerable: true,
-  get: function () { return chunk4ENXP7WH_js.PriceInput; }
+  get: function () { return chunkL7SGGDY3_js.PriceInput; }
 });
 Object.defineProperty(exports, "priceInputVariants", {
   enumerable: true,
-  get: function () { return chunk4ENXP7WH_js.priceInputVariants; }
+  get: function () { return chunkL7SGGDY3_js.priceInputVariants; }
 });

package/dist/price-input.mjs

@@ -1,2 +1,3 @@
-export { PriceInput, priceInputVariants } from './chunks/chunk-WGGBE4ZD.mjs';
+export { PriceInput, priceInputVariants } from './chunks/chunk-QBMDWUQU.mjs';
+import './chunks/chunk-KHCPES3K.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/schemas/_all.json

@@ -2101,6 +2101,11 @@
               "type": "string",
               "description": "Placeholder (default: \"0\")"
             },
+            "separator": {
+              "type": "boolean",
+              "default": false,
+              "description": "Display thousand-separator commas (e.g. 1,000). onValueChange still receives raw number without commas. Decimal part is not separated (1,234.567)."
+            },
             "name": {
               "type": "string",
               "description": "Form field name"
@@ -2128,7 +2133,7 @@
             }
           },
           "additionalProperties": false,
-          "description": "Number input with two variants: basic (chevron arrows) and bind (+/- buttons). Supports label, description, max display (click to fill), accelerated increment on long press. numberInputBind(ref, direction) binds acceleration to external buttons.\n\nWHEN TO USE:\n  • Any numeric field — quantity, score, age, count\n  • Currency with thousand separators → PriceInput instead\n  • Date / time → DatePicker instead\n\nANTI-PATTERNS:\n  ✗ <TextInput type=\"number\"> → <NumberInput> (loses keyboard ↑↓, step, accelerated long-press, max click)\n  ✗ Custom +/- buttons + <input> → variant=\"bind\" (or numberInputBind for external)\n  ✗ Manual thousand separators for currency → PriceInput\n  ✗ Inline unit text inside label/description → use prefixIcon/suffixIcon (e.g. suffixIcon=\"%\")"
+          "description": "Number input with two variants: basic (chevron arrows) and bind (+/- buttons). Supports label, description, max display (click to fill), accelerated increment on long press. numberInputBind(ref, direction) binds acceleration to external buttons.\n\nWHEN TO USE:\n  • Any numeric field — quantity, score, age, count\n  • Need thousand separators? Set separator={true}\n  • Currency UX (prefix $, balance, maxBalance, click-to-fill balance) → PriceInput instead\n  • Date / time → DatePicker instead\n\nANTI-PATTERNS:\n  ✗ <TextInput type=\"number\"> → <NumberInput> (loses keyboard ↑↓, step, accelerated long-press, max click)\n  ✗ Custom +/- buttons + <input> → variant=\"bind\" (or numberInputBind for external)\n  ✗ Manual thousand separator string formatting → use separator={true}\n  ✗ Inline unit text inside label/description → use prefixIcon/suffixIcon (e.g. suffixIcon=\"%\")"
         }
       },
       "$schema": "http://json-schema.org/draft-07/schema#"

package/dist/schemas/number-input.d.ts

@@ -17,6 +17,7 @@ export declare const numberInputPropsSchema: z.ZodObject<{
     disabled: z.ZodOptional<z.ZodBoolean>;
     readOnly: z.ZodOptional<z.ZodBoolean>;
     placeholder: z.ZodOptional<z.ZodString>;
+    separator: z.ZodDefault<z.ZodBoolean>;
     name: z.ZodOptional<z.ZodString>;
     id: z.ZodOptional<z.ZodString>;
     autoFocus: z.ZodOptional<z.ZodBoolean>;
@@ -25,6 +26,7 @@ export declare const numberInputPropsSchema: z.ZodObject<{
     onFocus: z.ZodOptional<z.ZodAny>;
     className: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
+    separator: boolean;
     size: "xl" | "lg" | "md";
     variant: "basic" | "bind";
     step: number;
@@ -55,6 +57,7 @@ export declare const numberInputPropsSchema: z.ZodObject<{
     id?: string | undefined;
     error?: boolean | undefined;
     label?: string | undefined;
+    separator?: boolean | undefined;
     description?: string | undefined;
     value?: string | number | undefined;
     size?: "xl" | "lg" | "md" | undefined;

package/dist/schemas/number-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/schemas/number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EhC,CAAC"}
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/schemas/number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiFhC,CAAC"}

package/dist/schemas/numberInput.json

@@ -87,6 +87,11 @@
           "type": "string",
           "description": "Placeholder (default: \"0\")"
         },
+        "separator": {
+          "type": "boolean",
+          "default": false,
+          "description": "Display thousand-separator commas (e.g. 1,000). onValueChange still receives raw number without commas. Decimal part is not separated (1,234.567)."
+        },
         "name": {
           "type": "string",
           "description": "Form field name"
@@ -114,7 +119,7 @@
         }
       },
       "additionalProperties": false,
-      "description": "Number input with two variants: basic (chevron arrows) and bind (+/- buttons). Supports label, description, max display (click to fill), accelerated increment on long press. numberInputBind(ref, direction) binds acceleration to external buttons.\n\nWHEN TO USE:\n  • Any numeric field — quantity, score, age, count\n  • Currency with thousand separators → PriceInput instead\n  • Date / time → DatePicker instead\n\nANTI-PATTERNS:\n  ✗ <TextInput type=\"number\"> → <NumberInput> (loses keyboard ↑↓, step, accelerated long-press, max click)\n  ✗ Custom +/- buttons + <input> → variant=\"bind\" (or numberInputBind for external)\n  ✗ Manual thousand separators for currency → PriceInput\n  ✗ Inline unit text inside label/description → use prefixIcon/suffixIcon (e.g. suffixIcon=\"%\")"
+      "description": "Number input with two variants: basic (chevron arrows) and bind (+/- buttons). Supports label, description, max display (click to fill), accelerated increment on long press. numberInputBind(ref, direction) binds acceleration to external buttons.\n\nWHEN TO USE:\n  • Any numeric field — quantity, score, age, count\n  • Need thousand separators? Set separator={true}\n  • Currency UX (prefix $, balance, maxBalance, click-to-fill balance) → PriceInput instead\n  • Date / time → DatePicker instead\n\nANTI-PATTERNS:\n  ✗ <TextInput type=\"number\"> → <NumberInput> (loses keyboard ↑↓, step, accelerated long-press, max click)\n  ✗ Custom +/- buttons + <input> → variant=\"bind\" (or numberInputBind for external)\n  ✗ Manual thousand separator string formatting → use separator={true}\n  ✗ Inline unit text inside label/description → use prefixIcon/suffixIcon (e.g. suffixIcon=\"%\")"
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"

package/dist/schemas.js

@@ -1186,6 +1186,9 @@ var numberInputPropsSchema = zod.z.object({
   disabled: zod.z.boolean().optional().describe("Disabled"),
   readOnly: zod.z.boolean().optional().describe("Read-only (includes hiding buttons)"),
   placeholder: zod.z.string().optional().describe('Placeholder (default: "0")'),
+  separator: zod.z.boolean().default(false).describe(
+    "Display thousand-separator commas (e.g. 1,000). onValueChange still receives raw number without commas. Decimal part is not separated (1,234.567)."
+  ),
   name: zod.z.string().optional().describe("Form field name"),
   id: zod.z.string().optional().describe("Element ID"),
   autoFocus: zod.z.boolean().optional().describe("Auto focus"),
@@ -1198,13 +1201,14 @@ var numberInputPropsSchema = zod.z.object({
 
 WHEN TO USE:
   \u2022 Any numeric field \u2014 quantity, score, age, count
-  \u2022 Currency with thousand separators \u2192 PriceInput instead
+  \u2022 Need thousand separators? Set separator={true}
+  \u2022 Currency UX (prefix $, balance, maxBalance, click-to-fill balance) \u2192 PriceInput instead
   \u2022 Date / time \u2192 DatePicker instead
 
 ANTI-PATTERNS:
   \u2717 <TextInput type="number"> \u2192 <NumberInput> (loses keyboard \u2191\u2193, step, accelerated long-press, max click)
   \u2717 Custom +/- buttons + <input> \u2192 variant="bind" (or numberInputBind for external)
-  \u2717 Manual thousand separators for currency \u2192 PriceInput
+  \u2717 Manual thousand separator string formatting \u2192 use separator={true}
   \u2717 Inline unit text inside label/description \u2192 use prefixIcon/suffixIcon (e.g. suffixIcon="%")`
 );
 var priceInputPropsSchema = zod.z.object({

package/dist/schemas.mjs

@@ -1184,6 +1184,9 @@ var numberInputPropsSchema = z.object({
   disabled: z.boolean().optional().describe("Disabled"),
   readOnly: z.boolean().optional().describe("Read-only (includes hiding buttons)"),
   placeholder: z.string().optional().describe('Placeholder (default: "0")'),
+  separator: z.boolean().default(false).describe(
+    "Display thousand-separator commas (e.g. 1,000). onValueChange still receives raw number without commas. Decimal part is not separated (1,234.567)."
+  ),
   name: z.string().optional().describe("Form field name"),
   id: z.string().optional().describe("Element ID"),
   autoFocus: z.boolean().optional().describe("Auto focus"),
@@ -1196,13 +1199,14 @@ var numberInputPropsSchema = z.object({
 
 WHEN TO USE:
   \u2022 Any numeric field \u2014 quantity, score, age, count
-  \u2022 Currency with thousand separators \u2192 PriceInput instead
+  \u2022 Need thousand separators? Set separator={true}
+  \u2022 Currency UX (prefix $, balance, maxBalance, click-to-fill balance) \u2192 PriceInput instead
   \u2022 Date / time \u2192 DatePicker instead
 
 ANTI-PATTERNS:
   \u2717 <TextInput type="number"> \u2192 <NumberInput> (loses keyboard \u2191\u2193, step, accelerated long-press, max click)
   \u2717 Custom +/- buttons + <input> \u2192 variant="bind" (or numberInputBind for external)
-  \u2717 Manual thousand separators for currency \u2192 PriceInput
+  \u2717 Manual thousand separator string formatting \u2192 use separator={true}
   \u2717 Inline unit text inside label/description \u2192 use prefixIcon/suffixIcon (e.g. suffixIcon="%")`
 );
 var priceInputPropsSchema = z.object({

package/dist/tokens/company.css

@@ -1,7 +1,7 @@
 /**
  * Company CSS — Tailwind v4 (@theme + .dark)
  * 자동 생성: scripts/generate-css.js
- * 생성일: 2026-05-14T03:22:06.241Z
+ * 생성일: 2026-05-21T07:29:09.566Z
  *
  * @theme: Tailwind 유틸리티 클래스 자동 생성
  * :root: 순수 CSS 변수 (var()로 직접 사용)

package/dist/tokens/css.css

@@ -2,7 +2,7 @@
  * Company CSS — 순수 CSS 변수 (:root + .dark)
  * Tailwind 없이 var(--*) 로 사용 가능
  * 자동 생성: scripts/generate-css.js
- * 생성일: 2026-05-14T03:22:06.246Z
+ * 생성일: 2026-05-21T07:29:09.570Z
  */
 
 :root {

package/dist/tokens-domains/gamehub-vars.css

@@ -2,7 +2,7 @@
  * Gamehub Domain CSS — 순수 CSS 변수
  * Tailwind 없이 var(--*) 로 사용 가능
  * 자동 생성: scripts/generate-css.js
- * 생성일: 2026-05-14T03:22:06.251Z
+ * 생성일: 2026-05-21T07:29:09.575Z
  */
 
 :root {

package/dist/tokens-domains/gamehub.css

@@ -1,7 +1,7 @@
 /**
  * Gamehub Domain CSS — Tailwind v4 (@theme + .gamehub)
  * 자동 생성: scripts/generate-css.js
- * 생성일: 2026-05-14T03:22:06.250Z
+ * 생성일: 2026-05-21T07:29:09.575Z
  */
 
 @theme {

package/dist/tokens-domains/prediction-vars.css

@@ -2,7 +2,7 @@
  * Prediction Domain CSS — 순수 CSS 변수
  * Tailwind 없이 var(--*) 로 사용 가능
  * 자동 생성: scripts/generate-css.js
- * 생성일: 2026-05-14T03:22:06.253Z
+ * 생성일: 2026-05-21T07:29:09.576Z
  */
 
 :root {

package/dist/tokens-domains/prediction.css

@@ -1,7 +1,7 @@
 /**
  * Prediction Domain CSS — Tailwind v4 (@theme + .prediction)
  * 자동 생성: scripts/generate-css.js
- * 생성일: 2026-05-14T03:22:06.252Z
+ * 생성일: 2026-05-21T07:29:09.576Z
  */
 
 @theme {

package/dist/utils/numberFormat.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 천단위 콤마(,) 포맷 / 언포맷 유틸.
+ *
+ * NumberInput, PriceInput 등 숫자 입력 컴포넌트에서 `separator` 옵션이 켜졌을 때 공통으로 사용한다.
+ *
+ * - `formatWithComma('1234567.89')   → '1,234,567.89'` (소수부는 콤마 미적용)
+ * - `formatWithComma('-1234')        → '-1,234'`
+ * - `stripComma('1,234,567')         → '1234567'`
+ *
+ * `value` 가 `string` 타입인 것은 입력 도중 사용자가 타이핑하는 부분 문자열
+ * (예: '-', '12.', '0.0') 을 손상 없이 유지하기 위함이다.
+ */
+export declare function formatWithComma(value: string): string;
+export declare function stripComma(value: string): string;
+//# sourceMappingURL=numberFormat.d.ts.map

package/dist/utils/numberFormat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberFormat.d.ts","sourceRoot":"","sources":["../../src/utils/numberFormat.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKrD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAEhD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexus-cross/design-system",
-  "version": "2.0.5",
+  "version": "2.0.6",
   "description": "NEXUS Design System UI Components",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -361,8 +361,8 @@
     "sonner": "^2.0.7",
     "vaul": "^1.1.2",
     "zod": "^3.25.76",
-    "@nexus-cross/tokens": "2.0.5",
-    "@nexus-cross/tokens-domains": "2.0.5"
+    "@nexus-cross/tokens": "2.0.6",
+    "@nexus-cross/tokens-domains": "2.0.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",