@nexus-cross/design-system 2.0.0 → 2.0.2

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

@@ -660,10 +660,10 @@ ANTI-PATTERNS:
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `size` | `number` | `20` | Size in px |
-| `color` | `string` | - | Color (CSS color value, default currentColor) |
+| `color` | `string` | - | Color (CSS color value). Default: brand primary (--color-accent-primary) |
 | `aria-label` | `string` | `"Loading"` | Accessibility label |
 | `style` | `ReactNode` | - | Inline style (CSSProperties) |
-| `className` | `string` | - | Color override etc. |
+| `className` | `string` | - | Color override (e.g. text-text-muted) — utility class wins over the default primary |
 
 ```tsx
 <Spinner size={24} />
@@ -904,7 +904,7 @@ ANTI-PATTERNS:
 | `shouldScaleBackground` | `boolean` | - | Background scale effect (default false) |
 | `children` | `ReactNode` | - | Drawer sub-components (ReactNode, required) |
 
-### DrawerContent
+### Drawer.Content
 
 Drawer.Content area.
 
@@ -917,6 +917,44 @@ Drawer.Content area.
 | `overlayClassName` | `string` | - | Overlay style |
 | `className` | `string` | - | Panel style |
 
+### Drawer.Trigger
+
+Drawer open trigger.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `asChild` | `boolean` | - | Render as child element |
+| `children` | `ReactNode` | - | Trigger element (ReactNode, required) |
+| `className` | `string` | - | Style override |
+
+### Drawer.Close
+
+Drawer close button.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `asChild` | `boolean` | - | Render as child element |
+| `children` | `ReactNode` | - | Close element (ReactNode, required) |
+| `className` | `string` | - | Style override |
+
+### Drawer.Title
+
+Drawer title (required for accessibility).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | - | Title text (ReactNode, required) |
+| `className` | `string` | - | Style override |
+
+### Drawer.Description
+
+Drawer description.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | - | Description text (ReactNode, required) |
+| `className` | `string` | - | Style override |
+
 ```tsx
 <Drawer direction="bottom">
   <Drawer.Trigger asChild>
@@ -1062,6 +1100,14 @@ WHEN TO USE:
   • Immediate filter/option toggle → ToggleGroup
   • Stacked collapsible sections → Accordion
 
+WIDTH BEHAVIOR (commonly misunderstood):
+  • Default: each trigger sizes to its label content; the list is as wide as the sum of triggers
+  • Want all triggers to evenly fill a parent? → set `fullWidth` (NOT just `tabListClassName="w-full"`)
+    `tabListClassName="w-full"` only widens the list; triggers stay content-width because flex children
+    default to `flex: 0 1 auto`. `fullWidth` adds `flex: 1` to every trigger.
+  • Want one specific trigger wider? → use `items[i].className="flex-2"` (or any flex utility)
+  • Want all triggers wider but not equal? → use `tabItemClassName="min-w-[120px]"` etc.
+
 destroyInactive=true unmounts hidden panels (saves memory but loses state).
 
 ANTI-PATTERNS:
@@ -1069,6 +1115,7 @@ ANTI-PATTERNS:
   ✗ Tab with 8+ items — consider sub-routing or DropdownMenu
   ✗ Using Tab for form value selection → RadioGroup
   ✗ Custom <button> + onClick + state → Tab (a11y, keyboard, focus management)
+  ✗ `tabListClassName="w-full"` expecting triggers to stretch → use `fullWidth` prop
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -1077,13 +1124,16 @@ ANTI-PATTERNS:
 | `defaultActiveKey` | `string` | - | Uncontrolled initial key |
 | `variant` | `'line'` \| `'pill'` | `"line"` | Style |
 | `size` | `'sm'` \| `'md'` | `"md"` | Size |
+| `fullWidth` | `boolean` | `false` | Stretch all triggers to evenly fill the tab list width (`flex: 1`) and set the list to `width: 100%`. Use for top-level navigation tabs that should span the container. Defaults to false (each trigger sizes to its content). |
 | `destroyInactive` | `boolean` | `false` | Unmount inactive panels |
 | `onTabChange` | `ReactNode` | - | Tab change callback (key: string) => void |
-| `className` | `string` | - | Root style |
-| `tabListClassName` | `string` | - | Tab list style |
-| `tabPanelClassName` | `string` | - | Tab panel style |
+| `className` | `string` | - | Root wrapper className |
+| `tabListClassName` | `string` | - | className for the tab list (the row of triggers). Width utilities (`w-full`, `max-w-md`, etc.) apply here. Note: `w-full` alone does NOT stretch individual triggers — combine with `fullWidth=true` for that. |
+| `tabItemClassName` | `string` | - | className applied to EVERY tab trigger <button>. Combine with `fullWidth` for equal-width tabs, or pass spacing/typography utilities to restyle all triggers at once. For per-item overrides use `items[].className`. |
+| `tabPanelClassName` | `string` | - | className for each panel <div> |
 
 ```tsx
+// Basic — triggers size to their content
 <Tab
   items={[
     { key: 'a', label: 'Tab A', children: <p>A</p> },
@@ -1092,6 +1142,28 @@ ANTI-PATTERNS:
   defaultActiveKey="a"
   variant="pill"
 />
+
+// Equal-width tabs filling the parent (do NOT just use tabListClassName="w-full" —
+// that widens the list but leaves triggers content-sized).
+<Tab
+  fullWidth
+  variant="pill"
+  items={[
+    { key: 'overview', label: 'Overview', children: <Overview /> },
+    { key: 'history', label: 'History', children: <History /> },
+    { key: 'settings', label: 'Settings', children: <Settings /> },
+  ]}
+/>
+
+// Per-item sizing override — make one trigger twice as wide.
+<Tab
+  fullWidth
+  items={[
+    { key: 'a', label: 'A', children: <A /> },
+    { key: 'b', label: 'B (wider)', className: 'flex-[2]', children: <B /> },
+    { key: 'c', label: 'C', children: <C /> },
+  ]}
+/>
 ```
 
 ---
@@ -1121,6 +1193,32 @@ ANTI-PATTERNS:
 | `children` | `ReactNode` | - | Carousel slides and sub-components (ReactNode) |
 | `className` | `string` | - | Style override |
 
+### Carousel.Slide
+
+Carousel slide. Used inside Carousel.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | - | Slide style (use basis-1/3 etc. for multi-slide view) |
+| `children` | `ReactNode` | - | Slide content (ReactNode, required) |
+
+### Carousel.Button
+
+CarouselPrev / CarouselNext. Previous/next navigation buttons.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | - | Button style override |
+| `children` | `ReactNode` | - | Custom icon (ReactNode, default: chevron) |
+
+### Carousel.Dots
+
+CarouselDots. Slide indicator dots.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | - | Dot container style |
+
 Sub-components: `CarouselSlide`, `CarouselPrev`, `CarouselNext`, `CarouselDots`
 
 ```tsx
@@ -1621,13 +1719,16 @@ 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
+  ✗ Inline unit text inside label/description → use prefixIcon/suffixIcon (e.g. suffixIcon="%")
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `variant` | `'basic'` \| `'bind'` | `"basic"` | Variant: basic (right chevron arrows) or bind (left/right +/- buttons) |
 | `value` | `number` \| `string` | - | Current value |
-| `size` | `'lg'` \| `'xl'` | `"lg"` | Size |
+| `size` | `'md'` \| `'lg'` \| `'xl'` | `"md"` | Size (matches TextInput scale) |
 | `error` | `boolean` | - | Error state |
+| `prefixIcon` | `ReactNode` | - | Prefix node — currency symbol, unit, or icon (ReactNode) |
+| `suffixIcon` | `ReactNode` | - | Suffix node — unit (%, kg, 원...) or icon. Pair with hideButtons or variant="bind" so it does not collide with arrow buttons |
 | `min` | `number` | - | Minimum value |
 | `max` | `number` | - | Maximum value. When set, "Max {value}" is displayed in the header. Clicking it fills the input with the max value |
 | `step` | `number` | `1` | Step increment |
@@ -1649,9 +1750,12 @@ ANTI-PATTERNS:
 
 Press-and-hold accelerates increment/decrement (100ms → 75ms → 50ms → 30ms). Default is right-side vertical spin buttons. Use `numberInputBind(ref, direction)` to bind the same acceleration events to external buttons for free placement.
 
+Sizes (md / lg / xl) match TextInput. Use `prefixIcon` / `suffixIcon` for unit indicators (currency, %, kg…). `suffixIcon` works best with `hideButtons` or `variant="bind"` so it does not collide with the right-side arrow buttons.
+
 ```tsx
 // Basic usage — right-side vertical spin buttons
 <NumberInput
+  label="Quantity"
   value={count}
   onValueChange={setCount}
   min={0}
@@ -1659,6 +1763,14 @@ Press-and-hold accelerates increment/decrement (100ms → 75ms → 50ms → 30ms
   step={5}
 />
 
+// Prefix / suffix — unit · currency
+<NumberInput label="Price" prefixIcon="$" digit={2} placeholder="0.00" />
+<NumberInput label="Discount" suffixIcon="%" hideButtons max={100} />
+<NumberInput label="Weight" suffixIcon="kg" variant="bind" />
+
+// Bind variant — left/right ± buttons (good for mobile)
+<NumberInput variant="bind" label="Quantity" value={count} onValueChange={setCount} max={99} />
+
 // External buttons — bind events with numberInputBind
 const ref = useRef<NumberInputRef>(null);
 
@@ -2101,15 +2213,22 @@ ImageUpload — drag-and-drop image upload with preview, file-type/size validati
 
 WHEN TO USE:
   • Single image upload: avatar, cover, KYC document, post thumbnail
+  • Banner / hero / thumbnail slot where the picked image should fill the box → previewMode="cover"
   • Multiple files / non-image → not yet supported; build custom or use a file dropzone
   • Inline image picker without preview → custom <input type="file">
 
 accept whitelist + maxSize together cover validation. onError fires with i18n-ready string.
 
+PREVIEW MODES:
+  • card (default) — 작은 썸네일 + 우측에 "이미지 변경" 버튼 + 포맷 텍스트. form 필드용.
+  • cover — 빈 상태 박스를 그대로 유지하고 이미지가 전체를 가득 채움. 클릭 시 변경, 우측 상단 X로 삭제.
+    크기/비율은 className(h-64, aspect-video, w-full 등) 또는 size prop으로 조정.
+
 ANTI-PATTERNS:
   ✗ <input type="file"> + manual preview → ImageUpload (handles drag, validation, preview)
   ✗ ImageUpload without onError handler → silent failure on validation reject
   ✗ Storing image as data-URL value (use File via onChange and upload to server)
+  ✗ card 모드에서 작은 썸네일이 어색한 배너/카드 슬롯 → previewMode="cover"
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -2125,7 +2244,247 @@ ANTI-PATTERNS:
 | `description` | `ReactNode` | - | Field description below the upload area (ReactNode) |
 | `disabled` | `boolean` | `false` | Disabled state |
 | `size` | `'sm'` \| `'md'` \| `'lg'` | `"md"` | Upload area size |
+| `previewMode` | `'card'` \| `'cover'` | `"card"` | Preview layout after upload. "card" = small thumbnail + change button beside it (default). "cover" = image fills the entire box (banner / thumbnail slot UX). In cover mode, click the box to change, click the X in the top-right to remove. Box dimensions follow size or className (h-64, aspect-video, etc.) |
+| `previewFit` | `'cover'` \| `'contain'` | `"cover"` | Object-fit for previewMode="cover". "cover" fills the box (may crop), "contain" fits entirely inside (may letterbox). |
+| `className` | `string` | - | Style override |
+
+Two preview layouts via `previewMode`:
+- `'card'` (default) — small thumbnail + side "이미지 변경" button + format text. Best for form fields.
+- `'cover'` — image fills the entire box (banner / thumbnail slot UX). Click box to change, X to remove. Box dimensions follow `size` or className (`h-64`, `aspect-video`, `w-full` …).
+
+```tsx
+import { ImageUpload } from '@nexus-cross/design-system';
+import { Controller } from 'react-hook-form';
+
+// Form field — card preview (default)
+<Controller
+  control={control}
+  name="thumbnail"
+  render={({ field }) => (
+    <ImageUpload
+      label="썸네일"
+      description="JPG · PNG · 최대 2MB"
+      value={field.value}
+      onChange={(file) => field.onChange(file ? URL.createObjectURL(file) : null)}
+      onError={(msg) => toast.error(msg)}
+    />
+  )}
+/>
+
+// Banner / hero slot — cover preview, custom aspect ratio
+<ImageUpload
+  previewMode="cover"
+  className="aspect-[16/9] w-full"
+  size="lg"
+  value={banner}
+  onChange={(file) => setBanner(file ? URL.createObjectURL(file) : null)}
+  placeholder="배너 이미지 업로드"
+/>
+
+// Card slot — fixed height, contain (no crop)
+<ImageUpload
+  previewMode="cover"
+  previewFit="contain"
+  className="h-48"
+  value={cover}
+  onChange={handleCover}
+/>
+```
+
+---
+
+## Table
+
+Table — tabular data with sortable columns, skeleton/loading/empty states. Compound: TableRow + TdColumn.
+
+WHEN TO USE:
+  • Comparable structured data (financial reports, transaction history, leaderboard)
+  • Sortable per-column → enableSorting on TdColumn
+  • Card-style entities → DataGrid
+  • Single-column read-only list → DataList
+  • Huge dataset (>500 rows) → wrap with VirtualList logic or paginate
+
+list={null} → loading state. list=[] → noDataMsg. children: ({ item, index }) => <TableRow>...</TableRow>.
+
+ANTI-PATTERNS:
+  ✗ Native <table> + manual loading/empty handling → Table component
+  ✗ Forcing card-style data into Table (use DataGrid)
+  ✗ Sorting in client when server pagination is in use → server-side sort
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `list` | `ReactNode`[] | - | Data array. null/undefined = loading state (required) |
+| `children` | `ReactNode` | - | Row render function ({ item, index }) => ReactNode (required) |
+| `hideThead` | `boolean` | - | Hide table header |
+| `loading` | `boolean` | - | Force loading state |
+| `loadingType` | `'loading'` \| `'skeleton'` | `"skeleton"` | Loading display type |
+| `loadingElement` | `ReactNode` | - | Custom loading element (ReactElement) |
+| `skeletonCount` | `number` | `10` | Skeleton row count |
+| `noDataMsg` | `ReactNode` | - | No data message (ReactElement | string) |
+| `notification` | `ReactNode` | - | Table top notification area (ReactNode) |
+| `sortUpElement` | `ReactNode` | - | Ascending sort icon (ReactElement) |
+| `sortDownElement` | `ReactNode` | - | Descending sort icon (ReactElement) |
+| `className` | `string` | - | Table wrapper style |
+| `theadClassName` | `string` | - | Header row style |
+
+### Table.Row
+
+TableRow — a single row inside Table. Wraps TdColumn cells.
+
+WHEN TO USE:
+  • variant="accent" highlights selected/current row
+  • onClick for row-level navigation (e.g. open detail page)
+  • Per-row checkbox/action → place inside a TdColumn child
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'default'` \| `'accent'` | `"default"` | Row style |
 | `className` | `string` | - | Style override |
+| `children` | `ReactNode` | - | TdColumn list (ReactNode, required) |
+| `onClick` | `ReactNode` | - | Row click callback (e: MouseEvent) => void |
+
+### Td
+
+TdColumn — table cell. Drives both <th> and <td> for the column. Provides sorting, alignment, overflow handling.
+
+WHEN TO USE:
+  • textOverflow="truncate" (default) for fixed-width columns; "wrap" for narrative
+  • align="right" for numeric/currency columns (a11y readability)
+  • enableSorting=true when column is sortable; supply order + handleClickSort for controlled sort
+  • highlightKey to group columns that highlight together on hover
+
+ANTI-PATTERNS:
+  ✗ enableSorting without handleClickSort → sort indicator is dead
+  ✗ align="left" for currency/number columns
+  ✗ Mixing text and numeric in one column without consistent align
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `ReactNode` | - | Header label (ReactElement | string) |
+| `fieldId` | `string` | - | Column identifier (sort key, required) |
+| `size` | `number` \| `string` | - | Column width (number → px, string → CSS value) |
+| `align` | `'left'` \| `'center'` \| `'right'` | `"left"` | Text alignment |
+| `textOverflow` | `'auto'` \| `'truncate'` \| `'wrap'` \| `'break-all'` | `"truncate"` | Text overflow handling |
+| `highlightKey` | `string` | - | Hover highlight group key |
+| `colSpan` | `number` | - | Column span |
+| `rowSpan` | `number` | - | Row span |
+| `thColSpan` | `number` | - | Header colSpan (<th>) |
+| `thRowSpan` | `number` | - | Header rowSpan (<th>) |
+| `enableSorting` | `boolean` | - | Enable sorting |
+| `order` | `'desc'` \| `'asc'` \| `''` | - | Current sort direction |
+| `sortValue` | `string` \| `number` | - | Sort criterion value |
+| `handleClickSort` | `ReactNode` | - | Sort click callback ({ index, fieldId, order }) => void |
+| `children` | `ReactNode` | - | Cell content (ReactNode, required) |
+| `className` | `string` | - | Style override |
+
+Composable table with `<Table>`, `<Table.Row>`, `<Td>`. Headers go in the first `<Table.Row>` with `isHeader`. Width / alignment is set per cell via `<Td>` props (do NOT add custom `<th>/<td>` markup).
+
+```tsx
+import { Table } from '@nexus-cross/design-system';
+
+<Table>
+  <Table.Row isHeader>
+    <Td width="40%">Name</Td>
+    <Td width="20%" align="center">Status</Td>
+    <Td width="20%" align="right">Amount</Td>
+    <Td width="20%" align="right">Date</Td>
+  </Table.Row>
+
+  {items.map((item) => (
+    <Table.Row key={item.id} onClick={() => onRowClick(item)}>
+      <Td>{item.name}</Td>
+      <Td align="center"><Badge>{item.status}</Badge></Td>
+      <Td align="right">{formatPrice(item.amount)}</Td>
+      <Td align="right">{item.date}</Td>
+    </Table.Row>
+  ))}
+</Table>
+
+// For large datasets / virtualization → use DataGrid instead.
+// For card-style key/value pairs → use DataList.
+```
+
+---
+
+## ErrorBoundary
+
+ErrorBoundary — catches render-time errors in subtree and shows fallback UI.
+
+WHEN TO USE:
+  • Wrap risky areas: third-party widgets, dynamic imports, untrusted content rendering
+  • Async errors / promise rejections → NOT caught (use try/catch in handlers)
+  • Per-route error wrapping → use framework's error.tsx (Next.js) where possible
+
+DataList / DataGrid have ErrorBoundary built-in — don't double-wrap.
+
+ANTI-PATTERNS:
+  ✗ ErrorBoundary at app root only — granular boundaries give better UX (one widget fails, page survives)
+  ✗ Showing raw Error.message in production (leak risk) — use friendly fallback
+  ✗ Forgetting onError logging → silent failures in production
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | - | Child elements to wrap (ReactNode, required) |
+| `fallback` | `ReactNode` | - | Fallback UI on error (ReactNode) |
+| `onError` | `ReactNode` | - | Error callback (error: Error, errorInfo: ErrorInfo) => void |
+
+React error boundary using class component pattern. Wrap any subtree that may throw — it shows `fallback` and (optionally) calls `onError` for logging. `resetKeys` reset the boundary when their values change (great for route changes).
+
+```tsx
+import { ErrorBoundary } from '@nexus-cross/design-system';
+
+<ErrorBoundary
+  fallback={<EmptyState title="Something went wrong" />}
+  onError={(error, info) => reportError(error, info)}
+  resetKeys={[location.pathname]}
+>
+  <MyRoute />
+</ErrorBoundary>
+
+// Per-component fallback function (receives error + reset)
+<ErrorBoundary fallback={(err, reset) => (
+  <Alert intent="error">
+    {err.message}
+    <Button onClick={reset}>Retry</Button>
+  </Alert>
+)}>
+  <RiskyWidget />
+</ErrorBoundary>
+```
+
+---
+
+## ClientOnly
+
+ClientOnly — defers children to client-side render, preventing SSR hydration mismatch.
+
+WHEN TO USE:
+  • Wrap components that read window/document/localStorage at render time
+  • Components depending on browser-only APIs (IntersectionObserver eager init, geolocation)
+  • Server-renderable content → DON'T wrap (loses SEO/SSR perf benefits)
+  • Conditional based on data → use proper SSR-safe state instead
+
+Pass fallback to avoid layout shift during hydration.
+
+ANTI-PATTERNS:
+  ✗ Wrapping the entire page in ClientOnly (defeats SSR)
+  ✗ ClientOnly without fallback for above-the-fold UI (CLS)
+  ✗ Using ClientOnly to "fix" any hydration warning — root-cause the mismatch first
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | - | Element to render only on client (ReactNode, required) |
+| `fallback` | `ReactNode` | - | Fallback UI during SSR (ReactNode, default: null) |
+
+Renders children only on the client. Use to skip SSR for components that depend on `window`/`document` (Carousel, DatePicker, ImageUpload preview, etc.) when adopting this design system inside Next.js / Remix.
+
+```tsx
+import { ClientOnly } from '@nexus-cross/design-system';
+
+<ClientOnly fallback={<Skeleton className="h-64 w-full" />}>
+  <Carousel slides={slides} />
+</ClientOnly>
+```
 
 ---
 

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

@@ -31,12 +31,14 @@ var numberInputVariants = classVarianceAuthority.cva("nexus-number-input", {
       basic: "nexus-number-input--basic",
       bind: "nexus-number-input--bind"
     },
+    // TextInput과 동일한 사이즈 체계 (md / lg / xl, default md)
     size: {
+      md: "nexus-number-input--md",
       lg: "nexus-number-input--lg",
       xl: "nexus-number-input--xl"
     }
   },
-  defaultVariants: { variant: "basic", size: "lg" }
+  defaultVariants: { variant: "basic", size: "md" }
 });
 var CHEVRON_PATH = "M3.606.179C3.82-.06 4.18-.06 4.394.179L7.846 4.01C8.18 4.382 7.934 5 7.452 5H.548C.066 5-.18 4.382.154 4.01L3.606.179Z";
 var ChevronUpIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
@@ -106,6 +108,8 @@ function numberInputBind(ref, direction) {
 var NumberInput = React__namespace.forwardRef(
   ({
     className,
+    containerClassName,
+    inputClassName,
     variant = "basic",
     size,
     error,
@@ -118,6 +122,8 @@ var NumberInput = React__namespace.forwardRef(
     description,
     showMax,
     hideButtons = false,
+    prefixIcon,
+    suffixIcon,
     disabled,
     readOnly,
     onValueChange,
@@ -288,7 +294,7 @@ var NumberInput = React__namespace.forwardRef(
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "nexus-number-input__container", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkCZC76ZD5_js.cn("nexus-number-input__container", containerClassName), children: [
             !isBasic && showBtns && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
@@ -303,6 +309,7 @@ var NumberInput = React__namespace.forwardRef(
                 children: /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {})
               }
             ),
+            prefixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-number-input__icon nexus-number-input__icon--prefix", children: prefixIcon }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "input",
               {
@@ -310,7 +317,7 @@ var NumberInput = React__namespace.forwardRef(
                 type: "text",
                 inputMode: "decimal",
                 role: "spinbutton",
-                className: "nexus-number-input__field",
+                className: chunkCZC76ZD5_js.cn("nexus-number-input__field", inputClassName),
                 value: internalValue,
                 disabled,
                 readOnly,
@@ -325,6 +332,7 @@ var NumberInput = React__namespace.forwardRef(
                 ...props
               }
             ),
+            suffixIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nexus-number-input__icon nexus-number-input__icon--suffix", children: suffixIcon }),
             !isBasic && showBtns && /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {