@nexus-cross/design-system 2.0.0-beta.1 → 2.0.1

package/dist/schemas/imageUpload.json

@@ -70,13 +70,31 @@
           "default": "md",
           "description": "Upload area size"
         },
+        "previewMode": {
+          "type": "string",
+          "enum": [
+            "card",
+            "cover"
+          ],
+          "default": "card",
+          "description": "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": {
+          "type": "string",
+          "enum": [
+            "cover",
+            "contain"
+          ],
+          "default": "cover",
+          "description": "Object-fit for previewMode=\"cover\". \"cover\" fills the box (may crop), \"contain\" fits entirely inside (may letterbox)."
+        },
         "className": {
           "type": "string",
           "description": "Style override"
         }
       },
       "additionalProperties": false,
-      "description": "ImageUpload — drag-and-drop image upload with preview, file-type/size validation, label/description.\n\nWHEN TO USE:\n  • Single image upload: avatar, cover, KYC document, post thumbnail\n  • Multiple files / non-image → not yet supported; build custom or use a file dropzone\n  • Inline image picker without preview → custom <input type=\"file\">\n\naccept whitelist + maxSize together cover validation. onError fires with i18n-ready string.\n\nANTI-PATTERNS:\n  ✗ <input type=\"file\"> + manual preview → ImageUpload (handles drag, validation, preview)\n  ✗ ImageUpload without onError handler → silent failure on validation reject\n  ✗ Storing image as data-URL value (use File via onChange and upload to server)"
+      "description": "ImageUpload — drag-and-drop image upload with preview, file-type/size validation, label/description.\n\nWHEN TO USE:\n  • Single image upload: avatar, cover, KYC document, post thumbnail\n  • Banner / hero / thumbnail slot where the picked image should fill the box → previewMode=\"cover\"\n  • Multiple files / non-image → not yet supported; build custom or use a file dropzone\n  • Inline image picker without preview → custom <input type=\"file\">\n\naccept whitelist + maxSize together cover validation. onError fires with i18n-ready string.\n\nPREVIEW MODES:\n  • card (default) — 작은 썸네일 + 우측에 \"이미지 변경\" 버튼 + 포맷 텍스트. form 필드용.\n  • cover — 빈 상태 박스를 그대로 유지하고 이미지가 전체를 가득 채움. 클릭 시 변경, 우측 상단 X로 삭제.\n    크기/비율은 className(h-64, aspect-video, w-full 등) 또는 size prop으로 조정.\n\nANTI-PATTERNS:\n  ✗ <input type=\"file\"> + manual preview → ImageUpload (handles drag, validation, preview)\n  ✗ ImageUpload without onError handler → silent failure on validation reject\n  ✗ Storing image as data-URL value (use File via onChange and upload to server)\n  ✗ card 모드에서 작은 썸네일이 어색한 배너/카드 슬롯 → previewMode=\"cover\""
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"

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

@@ -2,8 +2,10 @@ import { z } from 'zod';
 export declare const numberInputPropsSchema: z.ZodObject<{
     variant: z.ZodDefault<z.ZodEnum<["basic", "bind"]>>;
     value: z.ZodOptional<z.ZodUnion<[z.ZodNumber, z.ZodString]>>;
-    size: z.ZodDefault<z.ZodEnum<["lg", "xl"]>>;
+    size: z.ZodDefault<z.ZodEnum<["md", "lg", "xl"]>>;
     error: z.ZodOptional<z.ZodBoolean>;
+    prefixIcon: z.ZodOptional<z.ZodAny>;
+    suffixIcon: z.ZodOptional<z.ZodAny>;
     min: z.ZodOptional<z.ZodNumber>;
     max: z.ZodOptional<z.ZodNumber>;
     step: z.ZodDefault<z.ZodNumber>;
@@ -23,7 +25,7 @@ export declare const numberInputPropsSchema: z.ZodObject<{
     onFocus: z.ZodOptional<z.ZodAny>;
     className: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
-    size: "xl" | "lg";
+    size: "xl" | "lg" | "md";
     variant: "basic" | "bind";
     step: number;
     digit: number;
@@ -44,6 +46,8 @@ export declare const numberInputPropsSchema: z.ZodObject<{
     onValueChange?: any;
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;
+    prefixIcon?: any;
+    suffixIcon?: any;
     showMax?: boolean | undefined;
 }, {
     name?: string | undefined;
@@ -53,7 +57,7 @@ export declare const numberInputPropsSchema: z.ZodObject<{
     label?: string | undefined;
     description?: string | undefined;
     value?: string | number | undefined;
-    size?: "xl" | "lg" | undefined;
+    size?: "xl" | "lg" | "md" | undefined;
     disabled?: boolean | undefined;
     variant?: "basic" | "bind" | undefined;
     autoFocus?: boolean | undefined;
@@ -65,6 +69,8 @@ export declare const numberInputPropsSchema: z.ZodObject<{
     placeholder?: string | undefined;
     step?: number | undefined;
     readOnly?: boolean | undefined;
+    prefixIcon?: any;
+    suffixIcon?: any;
     digit?: number | undefined;
     showMax?: boolean | undefined;
     hideButtons?: boolean | 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+DhC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EhC,CAAC"}

package/dist/schemas/numberInput.json

@@ -23,16 +23,23 @@
         "size": {
           "type": "string",
           "enum": [
+            "md",
             "lg",
             "xl"
           ],
-          "default": "lg",
-          "description": "Size"
+          "default": "md",
+          "description": "Size (matches TextInput scale)"
         },
         "error": {
           "type": "boolean",
           "description": "Error state"
         },
+        "prefixIcon": {
+          "description": "Prefix node — currency symbol, unit, or icon (ReactNode)"
+        },
+        "suffixIcon": {
+          "description": "Suffix node — unit (%, kg, 원...) or icon. Pair with hideButtons or variant=\"bind\" so it does not collide with arrow buttons"
+        },
         "min": {
           "type": "number",
           "description": "Minimum value"
@@ -107,7 +114,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"
+      "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=\"%\")"
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"

package/dist/schemas/spinner.json

@@ -11,7 +11,7 @@
         },
         "color": {
           "type": "string",
-          "description": "Color (CSS color value, default currentColor)"
+          "description": "Color (CSS color value). Default: brand primary (--color-accent-primary)"
         },
         "aria-label": {
           "type": "string",
@@ -23,7 +23,7 @@
         },
         "className": {
           "type": "string",
-          "description": "Color override etc."
+          "description": "Color override (e.g. text-text-muted) — utility class wins over the default primary"
         }
       },
       "additionalProperties": false,

package/dist/schemas/tab.d.ts

@@ -5,13 +5,16 @@ export declare const tabPropsSchema: z.ZodObject<{
         label: z.ZodAny;
         children: z.ZodOptional<z.ZodAny>;
         disabled: z.ZodOptional<z.ZodBoolean>;
+        className: z.ZodOptional<z.ZodString>;
     }, "strip", z.ZodTypeAny, {
         key: string;
+        className?: string | undefined;
         children?: any;
         label?: any;
         disabled?: boolean | undefined;
     }, {
         key: string;
+        className?: string | undefined;
         children?: any;
         label?: any;
         disabled?: boolean | undefined;
@@ -20,30 +23,36 @@ export declare const tabPropsSchema: z.ZodObject<{
     defaultActiveKey: z.ZodOptional<z.ZodString>;
     variant: z.ZodDefault<z.ZodEnum<["line", "pill"]>>;
     size: z.ZodDefault<z.ZodEnum<["sm", "md"]>>;
+    fullWidth: z.ZodDefault<z.ZodBoolean>;
     destroyInactive: z.ZodDefault<z.ZodBoolean>;
     onTabChange: z.ZodOptional<z.ZodAny>;
     className: z.ZodOptional<z.ZodString>;
     tabListClassName: z.ZodOptional<z.ZodString>;
+    tabItemClassName: z.ZodOptional<z.ZodString>;
     tabPanelClassName: z.ZodOptional<z.ZodString>;
 }, "strip", z.ZodTypeAny, {
     size: "md" | "sm";
     variant: "line" | "pill";
     items: {
         key: string;
+        className?: string | undefined;
         children?: any;
         label?: any;
         disabled?: boolean | undefined;
     }[];
+    fullWidth: boolean;
     destroyInactive: boolean;
     className?: string | undefined;
     activeKey?: string | undefined;
     defaultActiveKey?: string | undefined;
     onTabChange?: any;
     tabListClassName?: string | undefined;
+    tabItemClassName?: string | undefined;
     tabPanelClassName?: string | undefined;
 }, {
     items: {
         key: string;
+        className?: string | undefined;
         children?: any;
         label?: any;
         disabled?: boolean | undefined;
@@ -51,11 +60,13 @@ export declare const tabPropsSchema: z.ZodObject<{
     className?: string | undefined;
     size?: "md" | "sm" | undefined;
     variant?: "line" | "pill" | undefined;
+    fullWidth?: boolean | undefined;
     activeKey?: string | undefined;
     defaultActiveKey?: string | undefined;
     destroyInactive?: boolean | undefined;
     onTabChange?: any;
     tabListClassName?: string | undefined;
+    tabItemClassName?: string | undefined;
     tabPanelClassName?: string | undefined;
 }>;
 //# sourceMappingURL=tab.d.ts.map

package/dist/schemas/tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/schemas/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AASxB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCxB,CAAC"}
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../src/schemas/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAexB,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2DxB,CAAC"}

package/dist/schemas/tab.json

@@ -22,6 +22,10 @@
               "disabled": {
                 "type": "boolean",
                 "description": "Disabled"
+              },
+              "className": {
+                "type": "string",
+                "description": "Per-item className applied to that single trigger <button>. Use for one-off width/padding overrides; for \"all triggers same style\" use top-level `tabItemClassName`."
               }
             },
             "required": [
@@ -57,6 +61,11 @@
           "default": "md",
           "description": "Size"
         },
+        "fullWidth": {
+          "type": "boolean",
+          "default": false,
+          "description": "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": {
           "type": "boolean",
           "default": false,
@@ -67,22 +76,26 @@
         },
         "className": {
           "type": "string",
-          "description": "Root style"
+          "description": "Root wrapper className"
         },
         "tabListClassName": {
           "type": "string",
-          "description": "Tab list style"
+          "description": "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": {
+          "type": "string",
+          "description": "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": {
           "type": "string",
-          "description": "Tab panel style"
+          "description": "className for each panel <div>"
         }
       },
       "required": [
         "items"
       ],
       "additionalProperties": false,
-      "description": "Tab navigation — switch between content panels (settings sections, profile views).\n\nWHEN TO USE:\n  • Page area swap where only one panel is visible at a time\n  • Mutually exclusive content with stable section labels\n  • Form field selection → RadioGroup (semantics: not navigation)\n  • Immediate filter/option toggle → ToggleGroup\n  • Stacked collapsible sections → Accordion\n\ndestroyInactive=true unmounts hidden panels (saves memory but loses state).\n\nANTI-PATTERNS:\n  ✗ Tab with 1 item — just render the panel\n  ✗ Tab with 8+ items — consider sub-routing or DropdownMenu\n  ✗ Using Tab for form value selection → RadioGroup\n  ✗ Custom <button> + onClick + state → Tab (a11y, keyboard, focus management)"
+      "description": "Tab navigation — switch between content panels (settings sections, profile views).\n\nWHEN TO USE:\n  • Page area swap where only one panel is visible at a time\n  • Mutually exclusive content with stable section labels\n  • Form field selection → RadioGroup (semantics: not navigation)\n  • Immediate filter/option toggle → ToggleGroup\n  • Stacked collapsible sections → Accordion\n\nWIDTH BEHAVIOR (commonly misunderstood):\n  • Default: each trigger sizes to its label content; the list is as wide as the sum of triggers\n  • Want all triggers to evenly fill a parent? → set `fullWidth` (NOT just `tabListClassName=\"w-full\"`)\n    `tabListClassName=\"w-full\"` only widens the list; triggers stay content-width because flex children\n    default to `flex: 0 1 auto`. `fullWidth` adds `flex: 1` to every trigger.\n  • Want one specific trigger wider? → use `items[i].className=\"flex-2\"` (or any flex utility)\n  • Want all triggers wider but not equal? → use `tabItemClassName=\"min-w-[120px]\"` etc.\n\ndestroyInactive=true unmounts hidden panels (saves memory but loses state).\n\nANTI-PATTERNS:\n  ✗ Tab with 1 item — just render the panel\n  ✗ Tab with 8+ items — consider sub-routing or DropdownMenu\n  ✗ Using Tab for form value selection → RadioGroup\n  ✗ Custom <button> + onClick + state → Tab (a11y, keyboard, focus management)\n  ✗ `tabListClassName=\"w-full\"` expecting triggers to stretch → use `fullWidth` prop"
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"

package/dist/schemas.js

@@ -587,10 +587,10 @@ ANTI-PATTERNS:
 );
 var spinnerPropsSchema = zod.z.object({
   size: zod.z.number().default(20).describe("Size in px"),
-  color: zod.z.string().optional().describe("Color (CSS color value, default currentColor)"),
+  color: zod.z.string().optional().describe("Color (CSS color value). Default: brand primary (--color-accent-primary)"),
   "aria-label": zod.z.string().default("Loading").describe("Accessibility label"),
   style: zod.z.any().optional().describe("Inline style (CSSProperties)"),
-  className: zod.z.string().optional().describe("Color override etc.")
+  className: zod.z.string().optional().describe("Color override (e.g. text-text-muted) \u2014 utility class wins over the default primary")
 }).describe(
   `Loading indicator (spinner). SVG-based. role="status" + aria-label built-in.
 
@@ -822,7 +822,10 @@ var tabItem = zod.z.object({
   key: zod.z.string().describe("Tab unique key"),
   label: zod.z.any().describe("Tab label (ReactNode)"),
   children: zod.z.any().optional().describe("Tab panel content (ReactNode)"),
-  disabled: zod.z.boolean().optional().describe("Disabled")
+  disabled: zod.z.boolean().optional().describe("Disabled"),
+  className: zod.z.string().optional().describe(
+    'Per-item className applied to that single trigger <button>. Use for one-off width/padding overrides; for "all triggers same style" use top-level `tabItemClassName`.'
+  )
 });
 var tabPropsSchema = zod.z.object({
   items: zod.z.array(tabItem).describe("Tab item array (required)"),
@@ -830,11 +833,19 @@ var tabPropsSchema = zod.z.object({
   defaultActiveKey: zod.z.string().optional().describe("Uncontrolled initial key"),
   variant: zod.z.enum(["line", "pill"]).default("line").describe("Style"),
   size: zod.z.enum(["sm", "md"]).default("md").describe("Size"),
+  fullWidth: zod.z.boolean().default(false).describe(
+    "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: zod.z.boolean().default(false).describe("Unmount inactive panels"),
   onTabChange: zod.z.any().optional().describe("Tab change callback (key: string) => void"),
-  className: zod.z.string().optional().describe("Root style"),
-  tabListClassName: zod.z.string().optional().describe("Tab list style"),
-  tabPanelClassName: zod.z.string().optional().describe("Tab panel style")
+  className: zod.z.string().optional().describe("Root wrapper className"),
+  tabListClassName: zod.z.string().optional().describe(
+    "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 \u2014 combine with `fullWidth=true` for that."
+  ),
+  tabItemClassName: zod.z.string().optional().describe(
+    "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: zod.z.string().optional().describe("className for each panel <div>")
 }).describe(
   `Tab navigation \u2014 switch between content panels (settings sections, profile views).
 
@@ -845,13 +856,22 @@ WHEN TO USE:
   \u2022 Immediate filter/option toggle \u2192 ToggleGroup
   \u2022 Stacked collapsible sections \u2192 Accordion
 
+WIDTH BEHAVIOR (commonly misunderstood):
+  \u2022 Default: each trigger sizes to its label content; the list is as wide as the sum of triggers
+  \u2022 Want all triggers to evenly fill a parent? \u2192 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.
+  \u2022 Want one specific trigger wider? \u2192 use \`items[i].className="flex-2"\` (or any flex utility)
+  \u2022 Want all triggers wider but not equal? \u2192 use \`tabItemClassName="min-w-[120px]"\` etc.
+
 destroyInactive=true unmounts hidden panels (saves memory but loses state).
 
 ANTI-PATTERNS:
   \u2717 Tab with 1 item \u2014 just render the panel
   \u2717 Tab with 8+ items \u2014 consider sub-routing or DropdownMenu
   \u2717 Using Tab for form value selection \u2192 RadioGroup
-  \u2717 Custom <button> + onClick + state \u2192 Tab (a11y, keyboard, focus management)`
+  \u2717 Custom <button> + onClick + state \u2192 Tab (a11y, keyboard, focus management)
+  \u2717 \`tabListClassName="w-full"\` expecting triggers to stretch \u2192 use \`fullWidth\` prop`
 );
 var carouselPropsSchema = zod.z.object({
   opts: zod.z.record(zod.z.any()).optional().describe("Embla options (loop, align, etc.)"),
@@ -1147,8 +1167,12 @@ ANTI-PATTERNS:
 var numberInputPropsSchema = zod.z.object({
   variant: zod.z.enum(["basic", "bind"]).default("basic").describe("Variant: basic (right chevron arrows) or bind (left/right +/- buttons)"),
   value: zod.z.union([zod.z.number(), zod.z.string()]).optional().describe("Current value"),
-  size: zod.z.enum(["lg", "xl"]).default("lg").describe("Size"),
+  size: zod.z.enum(["md", "lg", "xl"]).default("md").describe("Size (matches TextInput scale)"),
   error: zod.z.boolean().optional().describe("Error state"),
+  prefixIcon: zod.z.any().optional().describe("Prefix node \u2014 currency symbol, unit, or icon (ReactNode)"),
+  suffixIcon: zod.z.any().optional().describe(
+    'Suffix node \u2014 unit (%, kg, \uC6D0...) or icon. Pair with hideButtons or variant="bind" so it does not collide with arrow buttons'
+  ),
   min: zod.z.number().optional().describe("Minimum value"),
   max: zod.z.number().optional().describe('Maximum value. When set, "Max {value}" is displayed in the header. Clicking it fills the input with the max value'),
   step: zod.z.number().default(1).describe("Step increment"),
@@ -1180,7 +1204,8 @@ WHEN TO USE:
 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 separators for currency \u2192 PriceInput
+  \u2717 Inline unit text inside label/description \u2192 use prefixIcon/suffixIcon (e.g. suffixIcon="%")`
 );
 var priceInputPropsSchema = zod.z.object({
   size: zod.z.enum(["md", "lg", "xl"]).default("md").describe("Size"),
@@ -1640,21 +1665,34 @@ var imageUploadPropsSchema = zod.z.object({
   description: zod.z.any().optional().describe("Field description below the upload area (ReactNode)"),
   disabled: zod.z.boolean().default(false).describe("Disabled state"),
   size: zod.z.enum(["sm", "md", "lg"]).default("md").describe("Upload area size"),
+  previewMode: zod.z.enum(["card", "cover"]).default("card").describe(
+    '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: zod.z.enum(["cover", "contain"]).default("cover").describe(
+    'Object-fit for previewMode="cover". "cover" fills the box (may crop), "contain" fits entirely inside (may letterbox).'
+  ),
   className: zod.z.string().optional().describe("Style override")
 }).describe(
   `ImageUpload \u2014 drag-and-drop image upload with preview, file-type/size validation, label/description.
 
 WHEN TO USE:
   \u2022 Single image upload: avatar, cover, KYC document, post thumbnail
+  \u2022 Banner / hero / thumbnail slot where the picked image should fill the box \u2192 previewMode="cover"
   \u2022 Multiple files / non-image \u2192 not yet supported; build custom or use a file dropzone
   \u2022 Inline image picker without preview \u2192 custom <input type="file">
 
 accept whitelist + maxSize together cover validation. onError fires with i18n-ready string.
 
+PREVIEW MODES:
+  \u2022 card (default) \u2014 \uC791\uC740 \uC378\uB124\uC77C + \uC6B0\uCE21\uC5D0 "\uC774\uBBF8\uC9C0 \uBCC0\uACBD" \uBC84\uD2BC + \uD3EC\uB9F7 \uD14D\uC2A4\uD2B8. form \uD544\uB4DC\uC6A9.
+  \u2022 cover \u2014 \uBE48 \uC0C1\uD0DC \uBC15\uC2A4\uB97C \uADF8\uB300\uB85C \uC720\uC9C0\uD558\uACE0 \uC774\uBBF8\uC9C0\uAC00 \uC804\uCCB4\uB97C \uAC00\uB4DD \uCC44\uC6C0. \uD074\uB9AD \uC2DC \uBCC0\uACBD, \uC6B0\uCE21 \uC0C1\uB2E8 X\uB85C \uC0AD\uC81C.
+    \uD06C\uAE30/\uBE44\uC728\uC740 className(h-64, aspect-video, w-full \uB4F1) \uB610\uB294 size prop\uC73C\uB85C \uC870\uC815.
+
 ANTI-PATTERNS:
   \u2717 <input type="file"> + manual preview \u2192 ImageUpload (handles drag, validation, preview)
   \u2717 ImageUpload without onError handler \u2192 silent failure on validation reject
-  \u2717 Storing image as data-URL value (use File via onChange and upload to server)`
+  \u2717 Storing image as data-URL value (use File via onChange and upload to server)
+  \u2717 card \uBAA8\uB4DC\uC5D0\uC11C \uC791\uC740 \uC378\uB124\uC77C\uC774 \uC5B4\uC0C9\uD55C \uBC30\uB108/\uCE74\uB4DC \uC2AC\uB86F \u2192 previewMode="cover"`
 );
 
 exports.accordionPropsSchema = accordionPropsSchema;

package/dist/schemas.mjs

@@ -585,10 +585,10 @@ ANTI-PATTERNS:
 );
 var spinnerPropsSchema = z.object({
   size: z.number().default(20).describe("Size in px"),
-  color: z.string().optional().describe("Color (CSS color value, default currentColor)"),
+  color: z.string().optional().describe("Color (CSS color value). Default: brand primary (--color-accent-primary)"),
   "aria-label": z.string().default("Loading").describe("Accessibility label"),
   style: z.any().optional().describe("Inline style (CSSProperties)"),
-  className: z.string().optional().describe("Color override etc.")
+  className: z.string().optional().describe("Color override (e.g. text-text-muted) \u2014 utility class wins over the default primary")
 }).describe(
   `Loading indicator (spinner). SVG-based. role="status" + aria-label built-in.
 
@@ -820,7 +820,10 @@ var tabItem = z.object({
   key: z.string().describe("Tab unique key"),
   label: z.any().describe("Tab label (ReactNode)"),
   children: z.any().optional().describe("Tab panel content (ReactNode)"),
-  disabled: z.boolean().optional().describe("Disabled")
+  disabled: z.boolean().optional().describe("Disabled"),
+  className: z.string().optional().describe(
+    'Per-item className applied to that single trigger <button>. Use for one-off width/padding overrides; for "all triggers same style" use top-level `tabItemClassName`.'
+  )
 });
 var tabPropsSchema = z.object({
   items: z.array(tabItem).describe("Tab item array (required)"),
@@ -828,11 +831,19 @@ var tabPropsSchema = z.object({
   defaultActiveKey: z.string().optional().describe("Uncontrolled initial key"),
   variant: z.enum(["line", "pill"]).default("line").describe("Style"),
   size: z.enum(["sm", "md"]).default("md").describe("Size"),
+  fullWidth: z.boolean().default(false).describe(
+    "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: z.boolean().default(false).describe("Unmount inactive panels"),
   onTabChange: z.any().optional().describe("Tab change callback (key: string) => void"),
-  className: z.string().optional().describe("Root style"),
-  tabListClassName: z.string().optional().describe("Tab list style"),
-  tabPanelClassName: z.string().optional().describe("Tab panel style")
+  className: z.string().optional().describe("Root wrapper className"),
+  tabListClassName: z.string().optional().describe(
+    "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 \u2014 combine with `fullWidth=true` for that."
+  ),
+  tabItemClassName: z.string().optional().describe(
+    "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: z.string().optional().describe("className for each panel <div>")
 }).describe(
   `Tab navigation \u2014 switch between content panels (settings sections, profile views).
 
@@ -843,13 +854,22 @@ WHEN TO USE:
   \u2022 Immediate filter/option toggle \u2192 ToggleGroup
   \u2022 Stacked collapsible sections \u2192 Accordion
 
+WIDTH BEHAVIOR (commonly misunderstood):
+  \u2022 Default: each trigger sizes to its label content; the list is as wide as the sum of triggers
+  \u2022 Want all triggers to evenly fill a parent? \u2192 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.
+  \u2022 Want one specific trigger wider? \u2192 use \`items[i].className="flex-2"\` (or any flex utility)
+  \u2022 Want all triggers wider but not equal? \u2192 use \`tabItemClassName="min-w-[120px]"\` etc.
+
 destroyInactive=true unmounts hidden panels (saves memory but loses state).
 
 ANTI-PATTERNS:
   \u2717 Tab with 1 item \u2014 just render the panel
   \u2717 Tab with 8+ items \u2014 consider sub-routing or DropdownMenu
   \u2717 Using Tab for form value selection \u2192 RadioGroup
-  \u2717 Custom <button> + onClick + state \u2192 Tab (a11y, keyboard, focus management)`
+  \u2717 Custom <button> + onClick + state \u2192 Tab (a11y, keyboard, focus management)
+  \u2717 \`tabListClassName="w-full"\` expecting triggers to stretch \u2192 use \`fullWidth\` prop`
 );
 var carouselPropsSchema = z.object({
   opts: z.record(z.any()).optional().describe("Embla options (loop, align, etc.)"),
@@ -1145,8 +1165,12 @@ ANTI-PATTERNS:
 var numberInputPropsSchema = z.object({
   variant: z.enum(["basic", "bind"]).default("basic").describe("Variant: basic (right chevron arrows) or bind (left/right +/- buttons)"),
   value: z.union([z.number(), z.string()]).optional().describe("Current value"),
-  size: z.enum(["lg", "xl"]).default("lg").describe("Size"),
+  size: z.enum(["md", "lg", "xl"]).default("md").describe("Size (matches TextInput scale)"),
   error: z.boolean().optional().describe("Error state"),
+  prefixIcon: z.any().optional().describe("Prefix node \u2014 currency symbol, unit, or icon (ReactNode)"),
+  suffixIcon: z.any().optional().describe(
+    'Suffix node \u2014 unit (%, kg, \uC6D0...) or icon. Pair with hideButtons or variant="bind" so it does not collide with arrow buttons'
+  ),
   min: z.number().optional().describe("Minimum value"),
   max: z.number().optional().describe('Maximum value. When set, "Max {value}" is displayed in the header. Clicking it fills the input with the max value'),
   step: z.number().default(1).describe("Step increment"),
@@ -1178,7 +1202,8 @@ WHEN TO USE:
 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 separators for currency \u2192 PriceInput
+  \u2717 Inline unit text inside label/description \u2192 use prefixIcon/suffixIcon (e.g. suffixIcon="%")`
 );
 var priceInputPropsSchema = z.object({
   size: z.enum(["md", "lg", "xl"]).default("md").describe("Size"),
@@ -1638,21 +1663,34 @@ var imageUploadPropsSchema = z.object({
   description: z.any().optional().describe("Field description below the upload area (ReactNode)"),
   disabled: z.boolean().default(false).describe("Disabled state"),
   size: z.enum(["sm", "md", "lg"]).default("md").describe("Upload area size"),
+  previewMode: z.enum(["card", "cover"]).default("card").describe(
+    '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: z.enum(["cover", "contain"]).default("cover").describe(
+    'Object-fit for previewMode="cover". "cover" fills the box (may crop), "contain" fits entirely inside (may letterbox).'
+  ),
   className: z.string().optional().describe("Style override")
 }).describe(
   `ImageUpload \u2014 drag-and-drop image upload with preview, file-type/size validation, label/description.
 
 WHEN TO USE:
   \u2022 Single image upload: avatar, cover, KYC document, post thumbnail
+  \u2022 Banner / hero / thumbnail slot where the picked image should fill the box \u2192 previewMode="cover"
   \u2022 Multiple files / non-image \u2192 not yet supported; build custom or use a file dropzone
   \u2022 Inline image picker without preview \u2192 custom <input type="file">
 
 accept whitelist + maxSize together cover validation. onError fires with i18n-ready string.
 
+PREVIEW MODES:
+  \u2022 card (default) \u2014 \uC791\uC740 \uC378\uB124\uC77C + \uC6B0\uCE21\uC5D0 "\uC774\uBBF8\uC9C0 \uBCC0\uACBD" \uBC84\uD2BC + \uD3EC\uB9F7 \uD14D\uC2A4\uD2B8. form \uD544\uB4DC\uC6A9.
+  \u2022 cover \u2014 \uBE48 \uC0C1\uD0DC \uBC15\uC2A4\uB97C \uADF8\uB300\uB85C \uC720\uC9C0\uD558\uACE0 \uC774\uBBF8\uC9C0\uAC00 \uC804\uCCB4\uB97C \uAC00\uB4DD \uCC44\uC6C0. \uD074\uB9AD \uC2DC \uBCC0\uACBD, \uC6B0\uCE21 \uC0C1\uB2E8 X\uB85C \uC0AD\uC81C.
+    \uD06C\uAE30/\uBE44\uC728\uC740 className(h-64, aspect-video, w-full \uB4F1) \uB610\uB294 size prop\uC73C\uB85C \uC870\uC815.
+
 ANTI-PATTERNS:
   \u2717 <input type="file"> + manual preview \u2192 ImageUpload (handles drag, validation, preview)
   \u2717 ImageUpload without onError handler \u2192 silent failure on validation reject
-  \u2717 Storing image as data-URL value (use File via onChange and upload to server)`
+  \u2717 Storing image as data-URL value (use File via onChange and upload to server)
+  \u2717 card \uBAA8\uB4DC\uC5D0\uC11C \uC791\uC740 \uC378\uB124\uC77C\uC774 \uC5B4\uC0C9\uD55C \uBC30\uB108/\uCE74\uB4DC \uC2AC\uB86F \u2192 previewMode="cover"`
 );
 
 export { accordionPropsSchema, alertPropsSchema, avatarPropsSchema, badgePropsSchema, breadcrumbPropsSchema, buttonPropsSchema, carouselButtonPropsSchema, carouselDotsPropsSchema, carouselPropsSchema, carouselSlidePropsSchema, checkBoxPropsSchema, chipPropsSchema, clientOnlyPropsSchema, comboboxOptionDescriptionPropsSchema, comboboxOptionMetaPropsSchema, comboboxOptionPropsSchema, comboboxPropsSchema, countdownPropsSchema, counterPropsSchema, dataGridPropsSchema, dataListPropsSchema, datePickerPropsSchema, dividerPropsSchema, drawerClosePropsSchema, drawerContentPropsSchema, drawerDescriptionPropsSchema, drawerPropsSchema, drawerTitlePropsSchema, drawerTriggerPropsSchema, dropdownMenuPropsSchema, ellipsisPropsSchema, emptyStatePropsSchema, errorBoundaryPropsSchema, imageUploadPropsSchema, infiniteScrollPropsSchema, marqueePropsSchema, modalCallSchema, modalTemplatePropsSchema, numberInputPropsSchema, nxImagePropsSchema, paginationPropsSchema, popoverPropsSchema, priceInputPropsSchema, progressPropsSchema, radioGroupPropsSchema, radioItemPropsSchema, selectItemPropsSchema, selectPropsSchema, skeletonPropsSchema, sliderPropsSchema, spinnerPropsSchema, stepperPropsSchema, switchPropsSchema, tabPropsSchema, tablePropsSchema, tableRowPropsSchema, tagInputPropsSchema, tdColumnPropsSchema, textAreaPropsSchema, textInputPropsSchema, toastOptionsSchema, toasterPropsSchema, toggleGroupPropsSchema, tooltipPropsSchema, virtualGridPropsSchema, virtualListPropsSchema };

package/dist/select.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunkOX5MEJ7B_js = require('./chunks/chunk-OX5MEJ7B.js');
+var chunkHU6E2R2T_js = require('./chunks/chunk-HU6E2R2T.js');
 require('./chunks/chunk-CZC76ZD5.js');
 
 
 
 Object.defineProperty(exports, "Select", {
   enumerable: true,
-  get: function () { return chunkOX5MEJ7B_js.Select; }
+  get: function () { return chunkHU6E2R2T_js.Select; }
 });
 Object.defineProperty(exports, "SelectItem", {
   enumerable: true,
-  get: function () { return chunkOX5MEJ7B_js.SelectItem; }
+  get: function () { return chunkHU6E2R2T_js.SelectItem; }
 });
 Object.defineProperty(exports, "selectContentVariants", {
   enumerable: true,
-  get: function () { return chunkOX5MEJ7B_js.selectContentVariants; }
+  get: function () { return chunkHU6E2R2T_js.selectContentVariants; }
 });
 Object.defineProperty(exports, "selectTriggerVariants", {
   enumerable: true,
-  get: function () { return chunkOX5MEJ7B_js.selectTriggerVariants; }
+  get: function () { return chunkHU6E2R2T_js.selectTriggerVariants; }
 });

package/dist/select.mjs

@@ -1,2 +1,2 @@
-export { Select, SelectItem, selectContentVariants, selectTriggerVariants } from './chunks/chunk-QOREDNWO.mjs';
+export { Select, SelectItem, selectContentVariants, selectTriggerVariants } from './chunks/chunk-53BHDUID.mjs';
 import './chunks/chunk-MCKOWMLS.mjs';