@sarunyu/system-one 4.9.7 → 4.9.8

package/llms.txt

@@ -845,13 +845,23 @@ Centered overlay surface for confirmations, richer content, or status alerts.
 Caller owns open/close state and supplies the backdrop — `<Modal>` only renders
 the dialog panel.
 
+**CRITICAL — choose the correct variant before writing any code:**
+
+| Variant | Use when | Has children? |
+|---|---|---|
+| `"dialog"` | Simple confirmation: title + description text + up to 2 buttons. NO custom UI. | No |
+| `"content"` | Any modal with custom content: filters, forms, inputs, lists, date pickers, etc. | Yes — required |
+| `"alert"` | Status moments only: success / warning / danger with icon. | No |
+
+**Rule: if the modal contains ANYTHING other than a title + plain description text → use `variant="content"` and pass the body as `children`. Never use `variant="dialog"` with custom UI inside.**
+
 ```tsx
 type ModalVariant      = "dialog" | "content" | "alert";
 type ModalActionLayout = "none" | "single" | "double";
 type ModalResponsive   = "mobile" | "desktop";
 type ModalAlertStatus  = "warning" | "success" | "danger";
 
-// Dialog — short confirmation (title + text + up to 2 buttons)
+// Dialog — ONLY for title + plain text + buttons. No custom children.
 <Modal
   variant="dialog"
   actionLayout="double"
@@ -864,7 +874,24 @@ type ModalAlertStatus  = "warning" | "success" | "danger";
   onClose={close}
 />
 
-// Content — custom body (pass children)
+// Content — filters, forms, inputs, any custom UI. Always pass children.
+<Modal
+  variant="content"
+  actionLayout="double"
+  title="Filters"
+  primaryLabel="Apply"
+  secondaryLabel="Reset"
+  onPrimaryClick={apply}
+  onSecondaryClick={reset}
+  onClose={close}
+>
+  <div className="flex flex-col gap-4">
+    <Dropdown placeholder="Category" ... />
+    <DateInput mode="range" ... />
+  </div>
+</Modal>
+
+// Content desktop — right-aligns action buttons
 <Modal variant="content" actionLayout="single" responsive="desktop" title="Edit profile" onClose={close}>
   <Input placeholder="Name" value={name} onChange={setName} />
 </Modal>
@@ -886,7 +913,9 @@ type ModalAlertStatus  = "warning" | "success" | "danger";
 ```tsx
 {open ? (
   <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 p-4">
-    <Modal variant="dialog" actionLayout="double" onClose={close} {...rest} />
+    <Modal variant="content" title="Filters" actionLayout="double" onClose={close}>
+      {/* your content */}
+    </Modal>
   </div>
 ) : null}
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarunyu/system-one",
-  "version": "4.9.7",
+  "version": "4.9.8",
   "type": "module",
   "description": "A production-ready React design system built for AI-powered web generation tools (Figma Make, Lovable, V0). Tailwind CSS v4 + CSS custom properties for full theming support.",
   "keywords": [