@agentero/design-system 0.31.1 → 0.31.2

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.2s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -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

@@ -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": 3231
   }
 }

package/package.json

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

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",