@agentero/design-system 0.31.0 → 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>3.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">
@@ -6435,7 +6435,7 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Input</h2>
       <div class="badges">
-        <label for="c-17-components-input-props" class="badge ok as-toggle">7 prop types</label>
+        <label for="c-17-components-input-props" class="badge ok as-toggle">1 prop type</label>
         
         <label for="c-17-components-input-stories" class="badge ok as-toggle">9 stories</label>
         
@@ -6449,9 +6449,9 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
 `aria-describedby` on its own; standalone, as here, they are plain props set
 by hand.
 
-There is no `status` prop. Mark the control `aria-invalid` and the
-destructive border follows, so the styling can never disagree with what
-assistive technology announces.</div>
+The invalid state has no prop of its own. Mark the control `aria-invalid`
+and the destructive border follows, so the styling can never disagree with
+what assistive technology announces.</div>
     <div class="kv"><span class="chip">summary: Base single-line text control that takes its wiring from InputContext</span><span class="chip">example: &lt;Label htmlFor=&quot;email&quot;&gt;Email&lt;/Label&gt;
 &lt;Input id=&quot;email&quot; type=&quot;email&quot; placeholder=&quot;you@example.com&quot; /&gt;</span><span class="chip">example: &lt;Input id=&quot;email&quot; aria-invalid aria-describedby=&quot;email-error&quot; /&gt;
 &lt;span id=&quot;email-error&quot;&gt;Enter a valid email address.&lt;/span&gt;</span></div>
@@ -6473,58 +6473,18 @@ assistive technology announces.</div>
           <div class="note ok">
             <div class="row">
               <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
-              <span class="badge ok">7 prop types</span>
+              <span class="badge ok">1 prop type</span>
             </div>
             <pre><code>Component: src/input/input.tsx::Input</code></pre>
             <pre><code>Props:</code></pre>
             <pre><code>/**
- * Indicates the entered value does not conform to the format expected by the application.
- * Set this when the value fails validation: it drives the destructive border
- * and is what assistive technology announces. Point `aria-describedby` at
- * the error message so the two are read together.
- */
-aria-invalid?: boolean | &quot;true&quot; | &quot;false&quot; | &quot;grammar&quot; | &quot;spelling&quot; | undefined
-
-/**
- * Blocks interaction, greys the control out and drops its shadow. The value
- * is not submitted. When the user still needs to read or copy the value,
- * use `readOnly` instead.
- */
-disabled?: boolean
-
-/**
- * Short hint shown while the field is empty. It disappears on the first
- * keystroke, so it is never a substitute for a label.
- */
-placeholder?: string
-
-/**
- * Keeps the value focusable and copyable but not editable, and still
- * submits it. Unlike `disabled`, it stays in the tab order.
- */
-readOnly?: boolean
-
-/**
- * Marks the control required for both the browser and assistive technology.
- */
-required?: boolean
-
-/**
  * Control height. Defaults to `&#39;md&#39;`.
  * - `sm` (32px) — dense layouts where vertical space is tight.
  * - `md` (40px) — standard form density.
  * - `lg` (48px) — low-density forms and larger touch targets. Also raises
  *   the text to `base` and the corner radius to `lg`.
  */
-size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;
-
-/**
- * Native input type. Picks the on-screen keyboard on touch devices and the
- * browser&#39;s own parsing, so set it even when you validate yourself.
- * Defaults to `&#39;text&#39;`. Multi-line text is not one of the options — that is
- * a TextArea.
- */
-type?: HTMLInputTypeAttribute | undefined</code></pre>
+size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
           </div>
         </div>
     
@@ -8124,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>
@@ -8194,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>
           
@@ -8272,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>
@@ -9059,7 +9044,7 @@ leading + trailing icons, and icon-only.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> TextArea</h2>
       <div class="badges">
-        <label for="c-29-components-textarea-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-29-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
         
         <label for="c-29-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
         
@@ -9091,48 +9076,11 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
           <div class="note ok">
             <div class="row">
               <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
-              <span class="badge ok">8 prop types</span>
+              <span class="badge ok">1 prop type</span>
             </div>
             <pre><code>Component: src/textarea/textarea.tsx::TextArea</code></pre>
             <pre><code>Props:</code></pre>
             <pre><code>/**
- * Indicates the entered value does not conform to the format expected by the application.
- * Drives the destructive border and is what assistive technology announces.
- */
-aria-invalid?: boolean | &quot;true&quot; | &quot;false&quot; | &quot;grammar&quot; | &quot;spelling&quot; | undefined
-
-/**
- * Blocks interaction and drops the value from the submission. Use `readOnly`
- * when the user still needs to read or copy it.
- */
-disabled?: boolean
-
-/**
- * Caps the value in UTF-16 code units: typing stops there and a paste is cut.
- */
-maxLength?: number
-
-/**
- * Hint shown while empty; never a substitute for a label.
- */
-placeholder?: string
-
-/**
- * Focusable, copyable and submitted, but not editable.
- */
-readOnly?: boolean
-
-/**
- * Marks the control required for both the browser and assistive technology.
- */
-required?: boolean
-
-/**
- * Rows visible at rest when three are not enough.
- */
-rows?: number
-
-/**
  * Defaults to `&#39;md&#39;`. The first row measures one Input of the same size and
  * three rows show at rest: `sm` 76px, `md` 84px, `lg` 96px (`lg` also raises
  * the text to `base` and the radius to `lg`).

package/mcp/manifests/components.json

@@ -6461,13 +6461,13 @@
           "<Input id=\"email\" aria-invalid aria-describedby=\"email-error\" />\n<span id=\"email-error\">Enter a valid email address.</span>"
         ]
       },
-      "description": "Input is the base single-line text control. When a container such as\n`FieldText` provides `InputContext`, it picks up `id`, `aria-invalid` and\n`aria-describedby` on its own; standalone, as here, they are plain props set\nby hand.\n\nThere is no `status` prop. Mark the control `aria-invalid` and the\ndestructive border follows, so the styling can never disagree with what\nassistive technology announces.",
+      "description": "Input is the base single-line text control. When a container such as\n`FieldText` provides `InputContext`, it picks up `id`, `aria-invalid` and\n`aria-describedby` on its own; standalone, as here, they are plain props set\nby hand.\n\nThe invalid state has no prop of its own. Mark the control `aria-invalid`\nand the destructive border follows, so the styling can never disagree with\nwhat assistive technology announces.",
       "summary": "Base single-line text control that takes its wiring from InputContext",
       "reactComponentMeta": {
         "displayName": "Input",
         "exportName": "Input",
         "filePath": "/home/runner/work/design-system/design-system/src/input/input.tsx",
-        "description": "Input is the design system's base single-line text control. Reach for it\nwhenever a form collects free text, and pair it with\n[Label](?path=/docs/components-label--docs) so the control has an accessible\nname.\n\nWhen a container provides `InputContext`, the input takes its wiring (`id`,\n`aria-describedby`, `aria-invalid`, `required`, `disabled`, `readOnly`) from\nit with nothing passed by hand; `FieldText` is one such container. Standalone it\nrenders exactly the props it is given, and its own props always win over the\ncontext. There is no `status` prop — mark the control `aria-invalid` and the\ndestructive border follows.\n\nDo not use Input for multi-line text; that is TextArea's job. It also has no\nslots for leading or trailing addons — an input with a currency prefix or a\nunit suffix belongs in an input group, not here.",
+        "description": "Input is the design system's base single-line text control. Reach for it\nwhenever a form collects free text, and pair it with\n[Label](?path=/docs/components-label--docs) so the control has an accessible\nname.\n\nWhen a container provides `InputContext`, the input takes its wiring (`id`,\n`aria-describedby`, `aria-invalid`, `required`, `disabled`, `readOnly`) from\nit with nothing passed by hand; `FieldText` is one such container. Standalone it\nrenders exactly the props it is given, and its own props always win over the\ncontext. Every standard `<input>` attribute is accepted and forwarded, so\n`type`, `placeholder`, `required`, `disabled`, `readOnly` and the rest work\nas in plain HTML. The invalid state has no prop of its own: `aria-invalid`\ndrives the destructive border, so the styling can never disagree with what\nassistive technology announces. Point `aria-describedby` at the error message\nso the two are read together.\n\nDo not use Input for multi-line text; that is TextArea's job. It also has no\nslots for leading or trailing addons — an input with a currency prefix or a\nunit suffix belongs in an input group, not here.",
         "jsDocTags": {
           "summary": [
             "Base single-line text control that takes its wiring from InputContext"
@@ -6478,144 +6478,6 @@
           ]
         },
         "props": {
-          "aria-invalid": {
-            "name": "aria-invalid",
-            "required": false,
-            "type": {
-              "name": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined"
-            },
-            "description": "Indicates the entered value does not conform to the format expected by the application.\nSet this when the value fails validation: it drives the destructive border\nand is what assistive technology announces. Point `aria-describedby` at\nthe error message so the two are read together.",
-            "defaultValue": null,
-            "parent": {
-              "name": "AriaAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "AriaAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/input/input.tsx"
-              }
-            ]
-          },
-          "type": {
-            "name": "type",
-            "required": false,
-            "type": {
-              "name": "HTMLInputTypeAttribute | undefined"
-            },
-            "description": "Native input type. Picks the on-screen keyboard on touch devices and the\nbrowser's own parsing, so set it even when you validate yourself.\nDefaults to `'text'`. Multi-line text is not one of the options — that is\na TextArea.",
-            "defaultValue": null,
-            "parent": {
-              "name": "InputHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "InputHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/input/input.tsx"
-              }
-            ]
-          },
-          "disabled": {
-            "name": "disabled",
-            "required": false,
-            "type": {
-              "name": "boolean"
-            },
-            "description": "Blocks interaction, greys the control out and drops its shadow. The value\nis not submitted. When the user still needs to read or copy the value,\nuse `readOnly` instead.",
-            "defaultValue": null,
-            "parent": {
-              "name": "InputHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "InputHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/input/input.tsx"
-              }
-            ]
-          },
-          "required": {
-            "name": "required",
-            "required": false,
-            "type": {
-              "name": "boolean"
-            },
-            "description": "Marks the control required for both the browser and assistive technology.",
-            "defaultValue": null,
-            "parent": {
-              "name": "InputHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "InputHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/input/input.tsx"
-              }
-            ]
-          },
-          "readOnly": {
-            "name": "readOnly",
-            "required": false,
-            "type": {
-              "name": "boolean"
-            },
-            "description": "Keeps the value focusable and copyable but not editable, and still\nsubmits it. Unlike `disabled`, it stays in the tab order.",
-            "defaultValue": null,
-            "parent": {
-              "name": "InputHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "InputHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/input/input.tsx"
-              }
-            ]
-          },
-          "placeholder": {
-            "name": "placeholder",
-            "required": false,
-            "type": {
-              "name": "string"
-            },
-            "description": "Short hint shown while the field is empty. It disappears on the first\nkeystroke, so it is never a substitute for a label.",
-            "defaultValue": null,
-            "parent": {
-              "name": "InputHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "InputHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/input/input.tsx"
-              }
-            ]
-          },
           "size": {
             "name": "size",
             "required": false,
@@ -8061,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",
@@ -8076,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",
@@ -8671,7 +8540,7 @@
         "displayName": "TextArea",
         "exportName": "TextArea",
         "filePath": "/home/runner/work/design-system/design-system/src/textarea/textarea.tsx",
-        "description": "TextArea is the design system's multi-line text control: Input's skin, states\nand sizes on a single `<textarea>` with nothing around it, so the native\nresize handle and scrollbar keep working. Pair it with\n[Label](?path=/docs/components-label--docs) the way you pair an Input.\n\nIt wires nothing itself — `id`, `aria-describedby` and `aria-invalid` are the\nfield owner's job, and there is no `status` prop. It holds no value either, so\na character counter belongs to whoever owns it.",
+        "description": "TextArea is the design system's multi-line text control: Input's skin, states\nand sizes on a single `<textarea>` with nothing around it, so the native\nresize handle and scrollbar keep working. Pair it with\n[Label](?path=/docs/components-label--docs) the way you pair an Input.\n\nIt wires nothing itself — `id`, `aria-describedby` and `aria-invalid` are the\nfield owner's job. The invalid state has no prop of its own: `aria-invalid`\ndrives the destructive border, the same as Input. Every `<textarea>` attribute\nis accepted and forwarded, so `placeholder`, `required`, `disabled`,\n`readOnly`, `maxLength` and the rest work as in plain HTML; `rows` raises the\nresting height when three rows are not enough. It holds no value either, so a\ncharacter counter belongs to whoever owns it.",
         "jsDocTags": {
           "summary": [
             "Base multi-line text control sharing Input's skin, states and sizes"
@@ -8681,167 +8550,6 @@
           ]
         },
         "props": {
-          "disabled": {
-            "name": "disabled",
-            "required": false,
-            "type": {
-              "name": "boolean"
-            },
-            "description": "Blocks interaction and drops the value from the submission. Use `readOnly`\nwhen the user still needs to read or copy it.",
-            "defaultValue": null,
-            "parent": {
-              "name": "TextareaHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "TextareaHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/textarea/textarea.tsx"
-              }
-            ]
-          },
-          "maxLength": {
-            "name": "maxLength",
-            "required": false,
-            "type": {
-              "name": "number"
-            },
-            "description": "Caps the value in UTF-16 code units: typing stops there and a paste is cut.",
-            "defaultValue": null,
-            "parent": {
-              "name": "TextareaHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "TextareaHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/textarea/textarea.tsx"
-              }
-            ]
-          },
-          "placeholder": {
-            "name": "placeholder",
-            "required": false,
-            "type": {
-              "name": "string"
-            },
-            "description": "Hint shown while empty; never a substitute for a label.",
-            "defaultValue": null,
-            "parent": {
-              "name": "TextareaHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "TextareaHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/textarea/textarea.tsx"
-              }
-            ]
-          },
-          "readOnly": {
-            "name": "readOnly",
-            "required": false,
-            "type": {
-              "name": "boolean"
-            },
-            "description": "Focusable, copyable and submitted, but not editable.",
-            "defaultValue": null,
-            "parent": {
-              "name": "TextareaHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "TextareaHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/textarea/textarea.tsx"
-              }
-            ]
-          },
-          "required": {
-            "name": "required",
-            "required": false,
-            "type": {
-              "name": "boolean"
-            },
-            "description": "Marks the control required for both the browser and assistive technology.",
-            "defaultValue": null,
-            "parent": {
-              "name": "TextareaHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "TextareaHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/textarea/textarea.tsx"
-              }
-            ]
-          },
-          "rows": {
-            "name": "rows",
-            "required": false,
-            "type": {
-              "name": "number"
-            },
-            "description": "Rows visible at rest when three are not enough.",
-            "defaultValue": null,
-            "parent": {
-              "name": "TextareaHTMLAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "TextareaHTMLAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/textarea/textarea.tsx"
-              }
-            ]
-          },
-          "aria-invalid": {
-            "name": "aria-invalid",
-            "required": false,
-            "type": {
-              "name": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined"
-            },
-            "description": "Indicates the entered value does not conform to the format expected by the application.\nDrives the destructive border and is what assistive technology announces.",
-            "defaultValue": null,
-            "parent": {
-              "name": "AriaAttributes",
-              "fileName": "node_modules/@types/react/index.d.ts"
-            },
-            "declarations": [
-              {
-                "name": "AriaAttributes",
-                "fileName": "node_modules/@types/react/index.d.ts"
-              },
-              {
-                "name": "TypeLiteral",
-                "fileName": "src/textarea/textarea.tsx"
-              }
-            ]
-          },
           "size": {
             "name": "size",
             "required": false,
@@ -9706,6 +9414,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3433
+    "durationMs": 3231
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.31.0",
+	"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/input/input.d.ts

@@ -29,12 +29,6 @@ export declare const inputRecipe: import('tailwind-variants').TVReturnType<{
 export type InputVariants = VariantProps<typeof inputRecipe>;
 /** Control height. See the `size` prop for when to reach for each one. */
 export type InputSize = NonNullable<InputVariants['size']>;
-/**
- * Every standard `<input>` attribute is accepted and forwarded. The handful
- * redeclared below are the ones worth documenting: they are what most callers
- * reach for, and `react-docgen` does not expand native attributes, so without
- * this they would be invisible in the docs and the MCP manifest.
- */
 export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
     /**
      * Control height. Defaults to `'md'`.
@@ -44,37 +38,6 @@ export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
      *   the text to `base` and the corner radius to `lg`.
      */
     size?: InputSize;
-    /**
-     * Native input type. Picks the on-screen keyboard on touch devices and the
-     * browser's own parsing, so set it even when you validate yourself.
-     * Defaults to `'text'`. Multi-line text is not one of the options — that is
-     * a TextArea.
-     */
-    type?: ComponentPropsWithRef<'input'>['type'];
-    /**
-     * Short hint shown while the field is empty. It disappears on the first
-     * keystroke, so it is never a substitute for a label.
-     */
-    placeholder?: string;
-    /**
-     * Blocks interaction, greys the control out and drops its shadow. The value
-     * is not submitted. When the user still needs to read or copy the value,
-     * use `readOnly` instead.
-     */
-    disabled?: boolean;
-    /**
-     * Keeps the value focusable and copyable but not editable, and still
-     * submits it. Unlike `disabled`, it stays in the tab order.
-     */
-    readOnly?: boolean;
-    /** Marks the control required for both the browser and assistive technology. */
-    required?: boolean;
-    /**
-     * Set this when the value fails validation: it drives the destructive border
-     * and is what assistive technology announces. Point `aria-describedby` at
-     * the error message so the two are read together.
-     */
-    'aria-invalid'?: ComponentPropsWithRef<'input'>['aria-invalid'];
 };
 /**
  * Input is the design system's base single-line text control. Reach for it
@@ -86,8 +49,12 @@ export type InputProps = Omit<ComponentPropsWithRef<'input'>, 'size'> & {
  * `aria-describedby`, `aria-invalid`, `required`, `disabled`, `readOnly`) from
  * it with nothing passed by hand; `FieldText` is one such container. Standalone it
  * renders exactly the props it is given, and its own props always win over the
- * context. There is no `status` prop — mark the control `aria-invalid` and the
- * destructive border follows.
+ * context. Every standard `<input>` attribute is accepted and forwarded, so
+ * `type`, `placeholder`, `required`, `disabled`, `readOnly` and the rest work
+ * as in plain HTML. The invalid state has no prop of its own: `aria-invalid`
+ * drives the destructive border, so the styling can never disagree with what
+ * assistive technology announces. Point `aria-describedby` at the error message
+ * so the two are read together.
  *
  * Do not use Input for multi-line text; that is TextArea's job. It also has no
  * slots for leading or trailing addons — an input with a currency prefix or a

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/src/textarea/textarea.d.ts

@@ -40,7 +40,6 @@ export declare const textAreaRecipe: import('tailwind-variants').TVReturnType<{
 export type TextAreaVariants = VariantProps<typeof textAreaRecipe>;
 /** Control size, the same three as Input. */
 export type TextAreaSize = NonNullable<TextAreaVariants['size']>;
-/** Every `<textarea>` attribute is forwarded; these are redeclared so the docs and the MCP manifest list them. */
 export type TextAreaProps = ComponentPropsWithRef<'textarea'> & {
     /**
      * Defaults to `'md'`. The first row measures one Input of the same size and
@@ -48,23 +47,6 @@ export type TextAreaProps = ComponentPropsWithRef<'textarea'> & {
      * the text to `base` and the radius to `lg`).
      */
     size?: TextAreaSize;
-    /** Rows visible at rest when three are not enough. */
-    rows?: number;
-    /** Hint shown while empty; never a substitute for a label. */
-    placeholder?: string;
-    /** Caps the value in UTF-16 code units: typing stops there and a paste is cut. */
-    maxLength?: number;
-    /**
-     * Blocks interaction and drops the value from the submission. Use `readOnly`
-     * when the user still needs to read or copy it.
-     */
-    disabled?: boolean;
-    /** Focusable, copyable and submitted, but not editable. */
-    readOnly?: boolean;
-    /** Marks the control required for both the browser and assistive technology. */
-    required?: boolean;
-    /** Drives the destructive border and is what assistive technology announces. */
-    'aria-invalid'?: ComponentPropsWithRef<'textarea'>['aria-invalid'];
 };
 /**
  * TextArea is the design system's multi-line text control: Input's skin, states
@@ -73,8 +55,12 @@ export type TextAreaProps = ComponentPropsWithRef<'textarea'> & {
  * [Label](?path=/docs/components-label--docs) the way you pair an Input.
  *
  * It wires nothing itself — `id`, `aria-describedby` and `aria-invalid` are the
- * field owner's job, and there is no `status` prop. It holds no value either, so
- * a character counter belongs to whoever owns it.
+ * field owner's job. The invalid state has no prop of its own: `aria-invalid`
+ * drives the destructive border, the same as Input. Every `<textarea>` attribute
+ * is accepted and forwarded, so `placeholder`, `required`, `disabled`,
+ * `readOnly`, `maxLength` and the rest work as in plain HTML; `rows` raises the
+ * resting height when three rows are not enough. It holds no value either, so a
+ * character counter belongs to whoever owns it.
  *
  * @summary Base multi-line text control sharing Input's skin, states and sizes
  *