@nexus-cross/design-system 2.0.2 → 2.0.4

package/dist/schemas/modal.d.ts

@@ -7,6 +7,7 @@ export declare const modalTemplatePropsSchema: z.ZodObject<{
     dimClose: z.ZodDefault<z.ZodBoolean>;
     hideHeader: z.ZodDefault<z.ZodBoolean>;
     hideFooter: z.ZodDefault<z.ZodBoolean>;
+    hideCloseBtn: z.ZodDefault<z.ZodBoolean>;
     footer: z.ZodOptional<z.ZodAny>;
     animation: z.ZodOptional<z.ZodObject<{
         name: z.ZodOptional<z.ZodString>;
@@ -44,6 +45,7 @@ export declare const modalTemplatePropsSchema: z.ZodObject<{
     layout: "draggable" | "default" | "bottom-sheet" | "slide-left" | "slide-right" | "full-page" | "full-page-reverse";
     hideHeader: boolean;
     hideFooter: boolean;
+    hideCloseBtn: boolean;
     enableDrag: boolean;
     showDim: boolean;
     dimClose: boolean;
@@ -85,6 +87,7 @@ export declare const modalTemplatePropsSchema: z.ZodObject<{
     desc?: any;
     hideHeader?: boolean | undefined;
     hideFooter?: boolean | undefined;
+    hideCloseBtn?: boolean | undefined;
     innerClassName?: string | undefined;
     bodyClassName?: string | undefined;
     footerClassName?: string | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/schemas/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAaxB,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0DlC,CAAC;AAEJ,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BzB,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../src/schemas/modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAaxB,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgFlC,CAAC;AAEJ,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BzB,CAAC"}

package/dist/schemas/modalTemplate.json

@@ -44,6 +44,11 @@
           "default": true,
           "description": "Hide footer"
         },
+        "hideCloseBtn": {
+          "type": "boolean",
+          "default": false,
+          "description": "Hide the X close button in the header"
+        },
         "footer": {
           "description": "Custom footer (ReactElement)"
         },
@@ -95,15 +100,15 @@
         },
         "className": {
           "type": "string",
-          "description": "Root wrapper style"
+          "description": "Root wrapper style — applied to the full-screen `position: fixed; inset: 0` flex container that centers the modal. NOTE: width / max-width / height utilities (`w-[400px]`, `max-w-[92vw]`, `h-*`) MUST NOT go here — they will resize the wrap layer, not the panel. Put sizing on `innerClassName` instead."
         },
         "innerClassName": {
           "type": "string",
-          "description": "Modal body style"
+          "description": "Modal panel (the actual dialog box) style — apply ALL sizing utilities here: `w-[400px]`, `max-w-[92vw]`, `min-h-*`, `max-h-[80vh]`, `rounded-*`, panel background, etc. This is the most common override point."
         },
         "bodyClassName": {
           "type": "string",
-          "description": "Body area style"
+          "description": "Body area style (inside the panel, between header and footer)"
         },
         "footerClassName": {
           "type": "string",
@@ -119,7 +124,7 @@
         }
       },
       "additionalProperties": false,
-      "description": "Modal template. All modal components must be wrapped with ModalTemplate.\n\nWHEN TO USE:\n  • Force user decision (delete confirm, submit confirm, blocking dialog)\n  • Long form/flow that needs full attention\n  • Side panel that doesn't block main flow → Drawer instead\n  • Inline contextual UI → Popover instead\n  • Short hint → Tooltip instead\n\nPREFERRED API: use modal() / useModal() imperative API rather than mounting <ModalTemplate> directly. modal() handles stacking, focus return, ESC, and background scroll automatically.\n\nANTI-PATTERNS:\n  ✗ Custom <div className=\"fixed inset-0\"> → modal() (loses focus trap, a11y)\n  ✗ Direct <ModalTemplate> mount in render tree → wrap with modal()\n  ✗ Modal with no title for screen readers → always pass title prop\n  ✗ Multiple modals stacking confusingly → use isAlone:true to close prior modals"
+      "description": "Modal template. All modal components must be wrapped with ModalTemplate.\n\nWHEN TO USE:\n  • Force user decision (delete confirm, submit confirm, blocking dialog)\n  • Long form/flow that needs full attention\n  • Side panel that doesn't block main flow → Drawer instead\n  • Inline contextual UI → Popover instead\n  • Short hint → Tooltip instead\n\nPREFERRED API: use modal() / useModal() imperative API rather than mounting <ModalTemplate> directly. modal() handles stacking, focus return, ESC, and background scroll automatically.\n\nSIZING (must read — most common AI mistake):\n  • The modal has TWO layers:\n      1. wrap   = full-screen `position: fixed; inset: 0` flex container → controlled by `className`\n      2. panel  = the actual dialog box rendered at the center → controlled by `innerClassName`\n  • Sizing utilities (`w-*`, `max-w-*`, `min-w-*`, `h-*`, `max-h-*`) MUST go on `innerClassName`.\n  • Putting `w-[400px] max-w-[92vw]` on `className` shrinks the wrap (the centering layer), NOT the panel — the panel keeps its default width and the modal looks broken.\n\nANTI-PATTERNS:\n  ✗ Custom <div className=\"fixed inset-0\"> → modal() (loses focus trap, a11y)\n  ✗ Direct <ModalTemplate> mount in render tree → wrap with modal()\n  ✗ Modal with no title for screen readers → always pass title prop\n  ✗ Multiple modals stacking confusingly → use isAlone:true to close prior modals\n  ✗ <ModalTemplate className=\"w-[400px] max-w-[92vw]\"> → put sizing on `innerClassName` instead"
     }
   },
   "$schema": "http://json-schema.org/draft-07/schema#"

package/dist/schemas.js

@@ -1331,15 +1331,20 @@ var modalTemplatePropsSchema = zod.z.object({
   dimClose: zod.z.boolean().default(true).describe("Close on dim click"),
   hideHeader: zod.z.boolean().default(false).describe("Hide header"),
   hideFooter: zod.z.boolean().default(true).describe("Hide footer"),
+  hideCloseBtn: zod.z.boolean().default(false).describe("Hide the X close button in the header"),
   footer: zod.z.any().optional().describe("Custom footer (ReactElement)"),
   animation: animationOptionsSchema.optional().describe("Modal animation"),
   enableDrag: zod.z.boolean().default(true).describe("Enable drag (bottom-sheet/draggable layouts)"),
   dragPersistKey: zod.z.string().optional().describe("Drag position persistence key"),
   close: zod.z.any().describe("Modal close function (isAnimation?: boolean) => void (auto-injected)"),
   children: zod.z.any().describe("Modal body (ReactNode, required)"),
-  className: zod.z.string().optional().describe("Root wrapper style"),
-  innerClassName: zod.z.string().optional().describe("Modal body style"),
-  bodyClassName: zod.z.string().optional().describe("Body area style"),
+  className: zod.z.string().optional().describe(
+    "Root wrapper style \u2014 applied to the full-screen `position: fixed; inset: 0` flex container that centers the modal. NOTE: width / max-width / height utilities (`w-[400px]`, `max-w-[92vw]`, `h-*`) MUST NOT go here \u2014 they will resize the wrap layer, not the panel. Put sizing on `innerClassName` instead."
+  ),
+  innerClassName: zod.z.string().optional().describe(
+    "Modal panel (the actual dialog box) style \u2014 apply ALL sizing utilities here: `w-[400px]`, `max-w-[92vw]`, `min-h-*`, `max-h-[80vh]`, `rounded-*`, panel background, etc. This is the most common override point."
+  ),
+  bodyClassName: zod.z.string().optional().describe("Body area style (inside the panel, between header and footer)"),
   footerClassName: zod.z.string().optional().describe("Footer area style"),
   dimClassName: zod.z.string().optional().describe("Dim overlay style"),
   headerClassName: zod.z.string().optional().describe("Header area style")
@@ -1355,11 +1360,19 @@ WHEN TO USE:
 
 PREFERRED API: use modal() / useModal() imperative API rather than mounting <ModalTemplate> directly. modal() handles stacking, focus return, ESC, and background scroll automatically.
 
+SIZING (must read \u2014 most common AI mistake):
+  \u2022 The modal has TWO layers:
+      1. wrap   = full-screen \`position: fixed; inset: 0\` flex container \u2192 controlled by \`className\`
+      2. panel  = the actual dialog box rendered at the center \u2192 controlled by \`innerClassName\`
+  \u2022 Sizing utilities (\`w-*\`, \`max-w-*\`, \`min-w-*\`, \`h-*\`, \`max-h-*\`) MUST go on \`innerClassName\`.
+  \u2022 Putting \`w-[400px] max-w-[92vw]\` on \`className\` shrinks the wrap (the centering layer), NOT the panel \u2014 the panel keeps its default width and the modal looks broken.
+
 ANTI-PATTERNS:
   \u2717 Custom <div className="fixed inset-0"> \u2192 modal() (loses focus trap, a11y)
   \u2717 Direct <ModalTemplate> mount in render tree \u2192 wrap with modal()
   \u2717 Modal with no title for screen readers \u2192 always pass title prop
-  \u2717 Multiple modals stacking confusingly \u2192 use isAlone:true to close prior modals`
+  \u2717 Multiple modals stacking confusingly \u2192 use isAlone:true to close prior modals
+  \u2717 <ModalTemplate className="w-[400px] max-w-[92vw]"> \u2192 put sizing on \`innerClassName\` instead`
 );
 var modalCallSchema = zod.z.object({
   component: zod.z.any().describe("Modal component (required). Automatically receives close/resolve as props"),

package/dist/schemas.mjs

@@ -1329,15 +1329,20 @@ var modalTemplatePropsSchema = z.object({
   dimClose: z.boolean().default(true).describe("Close on dim click"),
   hideHeader: z.boolean().default(false).describe("Hide header"),
   hideFooter: z.boolean().default(true).describe("Hide footer"),
+  hideCloseBtn: z.boolean().default(false).describe("Hide the X close button in the header"),
   footer: z.any().optional().describe("Custom footer (ReactElement)"),
   animation: animationOptionsSchema.optional().describe("Modal animation"),
   enableDrag: z.boolean().default(true).describe("Enable drag (bottom-sheet/draggable layouts)"),
   dragPersistKey: z.string().optional().describe("Drag position persistence key"),
   close: z.any().describe("Modal close function (isAnimation?: boolean) => void (auto-injected)"),
   children: z.any().describe("Modal body (ReactNode, required)"),
-  className: z.string().optional().describe("Root wrapper style"),
-  innerClassName: z.string().optional().describe("Modal body style"),
-  bodyClassName: z.string().optional().describe("Body area style"),
+  className: z.string().optional().describe(
+    "Root wrapper style \u2014 applied to the full-screen `position: fixed; inset: 0` flex container that centers the modal. NOTE: width / max-width / height utilities (`w-[400px]`, `max-w-[92vw]`, `h-*`) MUST NOT go here \u2014 they will resize the wrap layer, not the panel. Put sizing on `innerClassName` instead."
+  ),
+  innerClassName: z.string().optional().describe(
+    "Modal panel (the actual dialog box) style \u2014 apply ALL sizing utilities here: `w-[400px]`, `max-w-[92vw]`, `min-h-*`, `max-h-[80vh]`, `rounded-*`, panel background, etc. This is the most common override point."
+  ),
+  bodyClassName: z.string().optional().describe("Body area style (inside the panel, between header and footer)"),
   footerClassName: z.string().optional().describe("Footer area style"),
   dimClassName: z.string().optional().describe("Dim overlay style"),
   headerClassName: z.string().optional().describe("Header area style")
@@ -1353,11 +1358,19 @@ WHEN TO USE:
 
 PREFERRED API: use modal() / useModal() imperative API rather than mounting <ModalTemplate> directly. modal() handles stacking, focus return, ESC, and background scroll automatically.
 
+SIZING (must read \u2014 most common AI mistake):
+  \u2022 The modal has TWO layers:
+      1. wrap   = full-screen \`position: fixed; inset: 0\` flex container \u2192 controlled by \`className\`
+      2. panel  = the actual dialog box rendered at the center \u2192 controlled by \`innerClassName\`
+  \u2022 Sizing utilities (\`w-*\`, \`max-w-*\`, \`min-w-*\`, \`h-*\`, \`max-h-*\`) MUST go on \`innerClassName\`.
+  \u2022 Putting \`w-[400px] max-w-[92vw]\` on \`className\` shrinks the wrap (the centering layer), NOT the panel \u2014 the panel keeps its default width and the modal looks broken.
+
 ANTI-PATTERNS:
   \u2717 Custom <div className="fixed inset-0"> \u2192 modal() (loses focus trap, a11y)
   \u2717 Direct <ModalTemplate> mount in render tree \u2192 wrap with modal()
   \u2717 Modal with no title for screen readers \u2192 always pass title prop
-  \u2717 Multiple modals stacking confusingly \u2192 use isAlone:true to close prior modals`
+  \u2717 Multiple modals stacking confusingly \u2192 use isAlone:true to close prior modals
+  \u2717 <ModalTemplate className="w-[400px] max-w-[92vw]"> \u2192 put sizing on \`innerClassName\` instead`
 );
 var modalCallSchema = z.object({
   component: z.any().describe("Modal component (required). Automatically receives close/resolve as props"),