@agentero/design-system 0.31.1 → 0.31.3

package/mcp/manifests/components.html

@@ -588,13 +588,13 @@
 <header>
   <div class="wrap">
     <h1>Manifest Debugger</h1>
-    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">33 components ok</span><span class="filter-pill ok" aria-disabled="true">263 stories ok</span></div>
+    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">33 components ok</span><span class="filter-pill ok" aria-disabled="true">264 stories ok</span></div>
   </div>
 </header>
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>4.4s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>3.7s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -4422,7 +4422,7 @@ weight of a full border on every row.</div>
 clusters of buttons (editing vs. history vs. settings) without visual
 weight.</div>
               <pre><code>const InToolbar = () =&gt; (
-    &lt;div className=&quot;inline-flex h-10 items-center gap-1 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary px-2 shadow-1&quot;&gt;
+    &lt;div className=&quot;inline-flex h-10 items-center gap-1 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary px-2 shadow-xs&quot;&gt;
         &lt;Button variant=&quot;ghost&quot; size=&quot;xs&quot;&gt;
             Cut
         &lt;/Button&gt;
@@ -8084,7 +8084,7 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
       <div class="badges">
         <label for="c-26-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-26-components-table-stories" class="badge ok as-toggle">9 stories</label>
+        <label for="c-26-components-table-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -8154,7 +8154,7 @@ sticky?: &quot;header&quot; | &quot;headerAndFooter&quot;</code></pre>
                 <div class="row">
                   <span class="ex-name">Imports</span>
                 </div>
-                <pre><code>import { Button, Table } from "@agentero/design-system";
+                <pre><code>import { Button, Switch, Table } from "@agentero/design-system";
 import { Fragment } from "react";</code></pre>
               </div>
           
@@ -8232,6 +8232,31 @@ import { Fragment } from "react";</code></pre>
               <div class="hint">A leading checkbox column; checkbox cells collapse to zero width.</div>
               <pre><code>const WithCheckbox = args =&gt; renderTable(args, { checkbox: true });</code></pre>
             </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Switch</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>A cell holding a Switch keeps its padding</div>
+              <div class="hint">A Switch renders a hidden checkbox so a form can read its value without JS.
+Radix keeps it while the Switch sits in a form, and on the server render
+before hydration. A cell holding a Switch is not a selection column, so it
+keeps its padding.</div>
+              <pre><code>const WithSwitch = () =&gt; &lt;form&gt;
+    &lt;Table.Root size=&quot;md&quot; embed={false}&gt;
+        &lt;Table.Body&gt;
+            {ROWS.slice(0, 3).map(row =&gt; (
+                &lt;Table.Row key={row.id}&gt;
+                    &lt;Table.Cell&gt;{row.name}&lt;/Table.Cell&gt;
+                    &lt;Table.Cell&gt;
+                        &lt;Switch size=&quot;sm&quot; defaultChecked aria-label={`Notify ${row.name}`} /&gt;
+                    &lt;/Table.Cell&gt;
+                &lt;/Table.Row&gt;
+            ))}
+        &lt;/Table.Body&gt;
+    &lt;/Table.Root&gt;
+&lt;/form&gt;;</code></pre>
+            </div>
             <div class="note ok">
               <div class="row">
                 <span class="ex-name">With Row Actions</span>

package/mcp/manifests/components.json

@@ -5003,7 +5003,7 @@
         {
           "id": "components-divider--in-toolbar",
           "name": "In Toolbar",
-          "snippet": "const InToolbar = () => (\n    <div className=\"inline-flex h-10 items-center gap-1 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary px-2 shadow-1\">\n        <Button variant=\"ghost\" size=\"xs\">\n            Cut\n        </Button>\n        <Button variant=\"ghost\" size=\"xs\">\n            Copy\n        </Button>\n        <Button variant=\"ghost\" size=\"xs\">\n            Paste\n        </Button>\n        <Divider orientation=\"vertical\" className=\"mx-1 h-6\" />\n        <Button variant=\"ghost\" size=\"xs\">\n            Undo\n        </Button>\n        <Button variant=\"ghost\" size=\"xs\">\n            Redo\n        </Button>\n        <Divider orientation=\"vertical\" className=\"mx-1 h-6\" />\n        <Button variant=\"ghost\" size=\"xs\">\n            Settings\n        </Button>\n    </div>\n);",
+          "snippet": "const InToolbar = () => (\n    <div className=\"inline-flex h-10 items-center gap-1 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary px-2 shadow-xs\">\n        <Button variant=\"ghost\" size=\"xs\">\n            Cut\n        </Button>\n        <Button variant=\"ghost\" size=\"xs\">\n            Copy\n        </Button>\n        <Button variant=\"ghost\" size=\"xs\">\n            Paste\n        </Button>\n        <Divider orientation=\"vertical\" className=\"mx-1 h-6\" />\n        <Button variant=\"ghost\" size=\"xs\">\n            Undo\n        </Button>\n        <Button variant=\"ghost\" size=\"xs\">\n            Redo\n        </Button>\n        <Divider orientation=\"vertical\" className=\"mx-1 h-6\" />\n        <Button variant=\"ghost\" size=\"xs\">\n            Settings\n        </Button>\n    </div>\n);",
           "description": "Vertical dividers grouping related toolbar actions. Use to separate logical\nclusters of buttons (editing vs. history vs. settings) without visual\nweight.",
           "summary": "Vertical dividers grouping toolbar actions"
         },
@@ -7923,6 +7923,13 @@
           "description": "A leading checkbox column; checkbox cells collapse to zero width.",
           "summary": "Selectable rows with a collapsing checkbox column"
         },
+        {
+          "id": "components-table--with-switch",
+          "name": "With Switch",
+          "snippet": "const WithSwitch = () => <form>\n    <Table.Root size=\"md\" embed={false}>\n        <Table.Body>\n            {ROWS.slice(0, 3).map(row => (\n                <Table.Row key={row.id}>\n                    <Table.Cell>{row.name}</Table.Cell>\n                    <Table.Cell>\n                        <Switch size=\"sm\" defaultChecked aria-label={`Notify ${row.name}`} />\n                    </Table.Cell>\n                </Table.Row>\n            ))}\n        </Table.Body>\n    </Table.Root>\n</form>;",
+          "description": "A Switch renders a hidden checkbox so a form can read its value without JS.\nRadix keeps it while the Switch sits in a form, and on the server render\nbefore hydration. A cell holding a Switch is not a selection column, so it\nkeeps its padding.",
+          "summary": "A cell holding a Switch keeps its padding"
+        },
         {
           "id": "components-table--with-row-actions",
           "name": "With Row Actions",
@@ -7938,7 +7945,7 @@
           "summary": "Expandable rows with a detail panel"
         }
       ],
-      "import": "import { Button, Table } from \"@agentero/design-system\";\nimport { Fragment } from \"react\";"
+      "import": "import { Button, Switch, Table } from \"@agentero/design-system\";\nimport { Fragment } from \"react\";"
     },
     "components-tabs": {
       "id": "components-tabs",
@@ -9407,6 +9414,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 4426
+    "durationMs": 3657
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.31.1",
+	"version": "0.31.3",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/button/button.js

@@ -30,7 +30,7 @@ var c = t({
 			secondary: [
 				"bg-bg-button-secondary-enable border-border-button-secondary-enable",
 				"text-text-button-secondary-enable",
-				"shadow-1",
+				"shadow-xs",
 				"[&_svg]:fill-icon-button-secondary-enable",
 				"hover:bg-bg-button-secondary-hover"
 			],

package/src/pagination/pagination.js

@@ -20,7 +20,7 @@ var l = o({
 			"transition-[background-color,border-color,color] duration-150",
 			"disabled:pointer-events-none disabled:opacity-30",
 			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-[0.0625rem] focus-visible:outline-focus-ring-button-primary",
-			"hover:not-aria-[current=page]:border-border-button-secondary-enable hover:not-aria-[current=page]:shadow-1",
+			"hover:not-aria-[current=page]:border-border-button-secondary-enable hover:not-aria-[current=page]:shadow-xs",
 			"[&_svg]:size-8 [&_svg]:-mx-2 [&_svg]:fill-current"
 		],
 		dots: "inline-flex size-8 items-center justify-center text-text-button-ghost-enable [&_svg]:size-4 [&_svg]:fill-current"

package/src/table/table.js

@@ -6,7 +6,7 @@ import { tv as r } from "tailwind-variants";
 import { createContext as i, use as a } from "react";
 import { jsx as o } from "react/jsx-runtime";
 //#region src/table/table.tsx
-var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inline)] first:ps-[var(--table-cell-padding-inline-ends)] last:pe-[var(--table-cell-padding-inline-ends)] has-[[type=checkbox]]:w-0 has-[[type=checkbox]]:pe-0", c = r({
+var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inline)] first:ps-[var(--table-cell-padding-inline-ends)] last:pe-[var(--table-cell-padding-inline-ends)] has-[[type=checkbox]:not([aria-hidden])]:w-0 has-[[type=checkbox]:not([aria-hidden])]:pe-0", c = r({
 	slots: {
 		root: ["flex min-h-0 flex-1 flex-col overflow-hidden", "[--table-cell-padding-inline:1.25rem] [--table-cell-padding-inline-ends:1.25rem]"],
 		scroll: "min-h-0 flex-1 overflow-auto focus-visible:outline-none",

package/theme/base.css

@@ -761,28 +761,20 @@
     * SHADOWS
     * ======================================== */
 
-	--shadow-1: 0 0.0625rem 0.125rem 0 var(--color-overlay-dark-050);
-	--shadow-2:
+	--shadow-xs: 0 0.0625rem 0.125rem 0 var(--color-overlay-dark-050);
+	--shadow-sm:
 		0 0.0625rem 0.125rem 0 var(--color-overlay-dark-050),
 		0 0.0625rem 0.125rem 0 var(--color-overlay-dark-050);
-	--shadow-3:
+	--shadow-md:
 		0 0.25rem 0.375rem -0.0625rem var(--color-overlay-dark-100),
 		0 0.125rem 0.25rem -0.0625rem var(--color-overlay-dark-050);
-	--shadow-4:
+	--shadow-lg:
 		0 0.625rem 0.9375rem -0.1875rem var(--color-overlay-dark-100),
 		0 0.25rem 0.375rem -0.125rem var(--color-overlay-dark-050);
-	--shadow-5:
+	--shadow-xl:
 		0 1.25rem 1.5625rem -0.3125rem var(--color-overlay-dark-100),
 		0 0.625rem 0.625rem -0.3125rem var(--color-overlay-dark-050);
-	--shadow-6: 0 1.5625rem 3.125rem -0.75rem var(--color-overlay-dark-200);
-
-	/* Semantic Shadows */
-	--shadow-xs: var(--shadow-1);
-	--shadow-sm: var(--shadow-2);
-	--shadow-md: var(--shadow-3);
-	--shadow-lg: var(--shadow-4);
-	--shadow-xl: var(--shadow-5);
-	--shadow-2xl: var(--shadow-6);
+	--shadow-2xl: 0 1.5625rem 3.125rem -0.75rem var(--color-overlay-dark-200);
 
 	/* ========================================
     * EASINGS / TRANSITIONS