@nexus-cross/design-system 2.0.5 → 2.0.7

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/accordion.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCSJDDREF_js = require('./chunks/chunk-CSJDDREF.js');

package/dist/accordion.mjs

@@ -1,2 +1,3 @@
+"use client";
 export { Accordion, AccordionContent, AccordionItem, AccordionRoot, AccordionTrigger } from './chunks/chunk-XG6QG65W.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/alert.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunk5PQ3UCKF_js = require('./chunks/chunk-5PQ3UCKF.js');

package/dist/alert.mjs

@@ -1,2 +1,3 @@
+"use client";
 export { Alert, alertVariants } from './chunks/chunk-2UPGFY6E.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/avatar.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkMA2VCCIY_js = require('./chunks/chunk-MA2VCCIY.js');

package/dist/avatar.mjs

@@ -1,2 +1,3 @@
+"use client";
 export { Avatar, avatarVariants } from './chunks/chunk-YLO4UKSC.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/badge.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkS2GMEC43_js = require('./chunks/chunk-S2GMEC43.js');

package/dist/badge.mjs

@@ -1,2 +1,3 @@
+"use client";
 export { Badge, badgeVariants } from './chunks/chunk-CUTMLBC3.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/breadcrumb.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkWATCVNBT_js = require('./chunks/chunk-WATCVNBT.js');

package/dist/breadcrumb.mjs

@@ -1,2 +1,3 @@
+"use client";
 export { Breadcrumb, BreadcrumbItem } from './chunks/chunk-DDY7ENHX.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/button.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkP3DZKXG4_js = require('./chunks/chunk-P3DZKXG4.js');

package/dist/button.mjs

@@ -1,2 +1,3 @@
+"use client";
 export { Button, buttonVariants } from './chunks/chunk-VVXQZ4XH.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/carousel.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkYCG4FZC3_js = require('./chunks/chunk-YCG4FZC3.js');

package/dist/carousel.mjs

@@ -1,2 +1,3 @@
+"use client";
 export { Carousel, CarouselDots, CarouselNext, CarouselPrev, CarouselSlide, useCarousel } from './chunks/chunk-3HHJORN7.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/checkbox.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkJ5ZKGPBY_js = require('./chunks/chunk-J5ZKGPBY.js');

package/dist/checkbox.mjs

@@ -1,2 +1,3 @@
+"use client";
 export { CheckBox, boxVariants, checkBoxVariants } from './chunks/chunk-MRRKW5QN.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/chip.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkWKCXACMZ_js = require('./chunks/chunk-WKCXACMZ.js');

package/dist/chip.mjs

@@ -1,2 +1,3 @@
+"use client";
 export { Chip, chipVariants } from './chunks/chunk-RX5UKRYK.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';

package/dist/chunks/chunk-2JTPRBHZ.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useCallback } from 'react';
 
 // src/hooks/useInView.ts

package/dist/chunks/chunk-2MC7XJSE.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-2RPRCWKV.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-2UPGFY6E.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-2Z52NPWB.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkRCIBLLSF_js = require('./chunk-RCIBLLSF.js');

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

@@ -0,0 +1,16 @@
+"use client";
+'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-3HHJORN7.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';

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

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

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

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkBLGQHR3M_js = require('./chunk-BLGQHR3M.js');

package/dist/chunks/chunk-46P52MFM.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { DataList } from './chunk-THBE27U3.mjs';
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';

package/dist/chunks/chunk-4J3GCZ7W.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useState, useRef, useCallback } from 'react';
 
 // src/hooks/useDraggableWindow.ts

package/dist/chunks/chunk-4KBFVIKX.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-53BHDUID.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-54IA2P2Z.mjs

@@ -1,3 +1,4 @@
+"use client";
 // src/utils/scroll.ts
 var hasWindow = () => typeof window !== "undefined";
 var scrollFreeze = () => {

package/dist/chunks/chunk-5JHJNN2K.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-5PQ3UCKF.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-6DBRL6NA.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';

package/dist/chunks/chunk-6FMDO6TT.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import { useRef, useState, useCallback, useMemo, useLayoutEffect } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/chunks/chunk-7WWQ5DS3.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useDraggableBottomSheet } from './chunk-WBCXHGRL.mjs';
 import { useDraggableWindow } from './chunk-4J3GCZ7W.mjs';
 import { scrollRelease, scrollFreeze } from './chunk-54IA2P2Z.mjs';

package/dist/chunks/chunk-AAITRHED.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { Skeleton } from './chunk-P2T72N62.mjs';
 import { cn } from './chunk-MCKOWMLS.mjs';
 import { orderBy } from 'lodash-es';

package/dist/chunks/chunk-ADO7PDLY.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-AG2UJPFX.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { Spinner } from './chunk-BPUQ2CO2.mjs';
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';

package/dist/chunks/chunk-AOXXE5UQ.mjs

@@ -1,3 +1,4 @@
+"use client";
 import * as React from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 

package/dist/chunks/chunk-ATZE57ZO.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-AZ2URLDD.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var react = require('react');

package/dist/chunks/chunk-B5O6W3Z4.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-B6G5TJRO.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-BBLBTOP4.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-BJMXZJWO.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-BLGQHR3M.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-BPUQ2CO2.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/dist/chunks/chunk-BSZ2LN6E.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-C2DSAJTL.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-CA3SOLI3.mjs

@@ -1,3 +1,4 @@
+"use client";
 import * as React from 'react';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/chunks/chunk-CSJDDREF.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-CUTMLBC3.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-CZC76ZD5.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var clsx = require('clsx');

package/dist/chunks/chunk-DDY7ENHX.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/chunks/chunk-DICN6GKE.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-DLFV7ZZV.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-DYPPVXQF.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

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

@@ -1,5 +1,7 @@
+"use client";
 '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 +130,7 @@ var NumberInput = React__namespace.forwardRef(
     readOnly,
     onValueChange,
     placeholder,
+    separator = false,
     ...props
   }, ref) => {
     const inputRef = React__namespace.useRef(null);
@@ -160,12 +163,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 +333,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-EHAUUUWB.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';

package/dist/chunks/chunk-EVOOTSY5.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var React = require('react');

package/dist/chunks/chunk-F24AY3HI.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var react = require('react');

package/dist/chunks/chunk-FBC53TOS.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import * as PopoverPrimitive from '@radix-ui/react-popover';

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

@@ -1,3 +1,5 @@
+"use client";
+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 +108,7 @@ var NumberInput = React.forwardRef(
     readOnly,
     onValueChange,
     placeholder,
+    separator = false,
     ...props
   }, ref) => {
     const inputRef = React.useRef(null);
@@ -138,12 +141,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 +311,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-FY2N42XN.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { useMemo, useCallback } from 'react';
 import { uniqueId } from 'lodash-es';
 

package/dist/chunks/chunk-GX6GSWX3.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-H2G5FMRN.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import * as SliderPrimitive from '@radix-ui/react-slider';

package/dist/chunks/chunk-H2V7RHYV.mjs

@@ -1,3 +1,4 @@
+"use client";
 import { cn } from './chunk-MCKOWMLS.mjs';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';

package/dist/chunks/chunk-HU6E2R2T.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-IE4DGLMH.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-INP2AH3B.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var react = require('react');

package/dist/chunks/chunk-IOSIQLZL.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');

package/dist/chunks/chunk-J5ZKGPBY.js

@@ -1,3 +1,4 @@
+"use client";
 'use strict';
 
 var chunkCZC76ZD5_js = require('./chunk-CZC76ZD5.js');