@agentero/design-system 0.29.0 → 0.30.0

package/lib/merge-props.js

@@ -10,7 +10,7 @@ var r = (...e) => (...t) => {
 	for (let [t, c] of Object.entries(n)) {
 		if (c === void 0) continue;
 		let n = s[t];
-		o(t) && typeof n == "function" && typeof c == "function" ? s[t] = r(n, c) : t === "aria-describedby" && typeof n == "string" && typeof c == "string" ? s[t] = a(n, c) : t === "className" && typeof n == "string" ? s[t] = e(n, c) : t === "ref" && n && c ? s[t] = i(n, c) : s[t] = c;
+		s[t] = o(t) && typeof n == "function" && typeof c == "function" ? r(n, c) : t === "aria-describedby" && typeof n == "string" && typeof c == "string" ? a(n, c) : t === "className" && typeof n == "string" ? e(n, c) : t === "ref" && n && c ? i(n, c) : c;
 	}
 	return s;
 }, c = (e, n) => {

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">31 components ok</span><span class="filter-pill ok" aria-disabled="true">250 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">32 components ok</span><span class="filter-pill ok" aria-disabled="true">256 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.3s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.4s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -8559,6 +8559,197 @@ leading + trailing icons, and icon-only.</div>
         </div>
     
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="TextArea">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> TextArea</h2>
+      <div class="badges">
+        <label for="c-28-components-textarea-props" class="badge ok as-toggle">8 prop types</label>
+        
+        <label for="c-28-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/textarea/textarea.stories.tsx">components-textarea · ./src/textarea/textarea.stories.tsx</div>
+    <div>Base multi-line text control sharing Input&#39;s skin, states and sizes</div>
+    <div class="hint">TextArea is the base multi-line text control, with Input&#39;s skin, sizes and
+states. It wires nothing on its own: `id`, `aria-invalid` and
+`aria-describedby` are plain props, set by whoever owns the field.</div>
+    <div class="kv"><span class="chip">summary: Base multi-line text control sharing Input&#39;s skin, states and sizes</span><span class="chip">example: &lt;Label htmlFor=&quot;notes&quot;&gt;Notes&lt;/Label&gt;
+&lt;TextArea id=&quot;notes&quot; placeholder=&quot;Anything the underwriter should know&quot; /&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-28-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-28-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
+
+  <div class="panels">
+    
+    
+    
+        <div class="panel panel-props">
+          <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>
+            </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`).
+ */
+size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
+          </div>
+        </div>
+    
+        <div class="panel panel-stories">
+          
+          
+          
+          <div class="note ok">
+                <div class="row">
+                  <span class="ex-name">Imports</span>
+                </div>
+                <pre><code>import { TextArea } from "@agentero/design-system";</code></pre>
+              </div>
+          
+          
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Default</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Default standalone text area</div>
+              <div class="hint">The default control at `md`: three rows at rest and a vertical resize handle
+the user can drag to make it taller.</div>
+              <pre><code>const Default = () =&gt; &lt;TextArea placeholder=&quot;Anything the underwriter should know&quot; aria-label=&quot;Notes&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">All Sizes</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>The three sizes, three rows tall at rest</div>
+              <div class="hint">The three sizes mirror Input&#39;s: the first row measures one Input of the same
+size and the minimum height shows three rows.</div>
+              <pre><code>const AllSizes = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+    &lt;TextArea size=&quot;sm&quot; aria-label=&quot;Small&quot; placeholder=&quot;sm — 76px, three rows&quot; /&gt;
+    &lt;TextArea size=&quot;md&quot; aria-label=&quot;Medium&quot; placeholder=&quot;md — 84px, three rows&quot; /&gt;
+    &lt;TextArea size=&quot;lg&quot; aria-label=&quot;Large&quot; placeholder=&quot;lg — 96px, three rows&quot; /&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Rows</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Taller initial height through the native rows attribute</div>
+              <div class="hint">`rows` sets a taller initial height when three rows are not enough.</div>
+              <pre><code>const Rows = () =&gt; &lt;TextArea
+    placeholder=&quot;Six rows visible before scrolling&quot;
+    aria-label=&quot;Notes&quot;
+    rows={6} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Invalid</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Invalid state driven by aria-invalid</div>
+              <div class="hint">The invalid treatment comes purely from `aria-invalid`; point
+`aria-describedby` at the message so it is read with the control.</div>
+              <pre><code>const Invalid = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;0.25rem&#39; }}&gt;
+    &lt;TextArea
+        placeholder=&quot;Anything the underwriter should know&quot;
+        aria-label=&quot;Reason&quot;
+        aria-invalid
+        aria-describedby=&quot;reason-error&quot;
+        defaultValue=&quot;n/a&quot; /&gt;
+    &lt;span id=&quot;reason-error&quot;&gt;Tell us why you are cancelling.&lt;/span&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Disabled state</div>
+              
+              <pre><code>const Disabled = () =&gt; &lt;TextArea
+    placeholder=&quot;Anything the underwriter should know&quot;
+    aria-label=&quot;Notes&quot;
+    disabled
+    defaultValue=&quot;Cannot be edited&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Read Only</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Read-only value that stays focusable and copyable</div>
+              
+              <pre><code>const ReadOnly = () =&gt; &lt;TextArea
+    placeholder=&quot;Anything the underwriter should know&quot;
+    aria-label=&quot;Notes&quot;
+    readOnly
+    defaultValue=&quot;Copy me, but do not change me&quot; /&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -8573,9 +8764,9 @@ leading + trailing icons, and icon-only.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Toast</h2>
       <div class="badges">
-        <label for="c-28-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-29-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-28-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-29-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -8594,10 +8785,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-28-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-29-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-28-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-29-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9026,9 +9217,9 @@ action (e.g., a sync icon for a sync-in-progress toast).</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tooltip</h2>
       <div class="badges">
-        <label for="c-29-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-30-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-29-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-30-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -9047,10 +9238,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-29-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-30-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-29-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-30-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9222,9 +9413,9 @@ sideOffset?: number = 4</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> ValidationList</h2>
       <div class="badges">
-        <label for="c-30-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-31-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-30-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-31-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -9245,10 +9436,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-30-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-31-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-30-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-31-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     

package/mcp/manifests/components.json

@@ -7821,6 +7821,274 @@
       ],
       "import": "import { Tag } from \"@agentero/design-system\";"
     },
+    "components-textarea": {
+      "id": "components-textarea",
+      "name": "TextArea",
+      "path": "./src/textarea/textarea.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Base multi-line text control sharing Input's skin, states and sizes"
+        ],
+        "example": [
+          "<Label htmlFor=\"notes\">Notes</Label>\n<TextArea id=\"notes\" placeholder=\"Anything the underwriter should know\" />"
+        ]
+      },
+      "description": "TextArea is the base multi-line text control, with Input's skin, sizes and\nstates. It wires nothing on its own: `id`, `aria-invalid` and\n`aria-describedby` are plain props, set by whoever owns the field.",
+      "summary": "Base multi-line text control sharing Input's skin, states and sizes",
+      "reactComponentMeta": {
+        "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.",
+        "jsDocTags": {
+          "summary": [
+            "Base multi-line text control sharing Input's skin, states and sizes"
+          ],
+          "example": [
+            "<Label htmlFor=\"notes\">Notes</Label>\n<TextArea id=\"notes\" placeholder=\"Anything the underwriter should know\" />"
+          ]
+        },
+        "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,
+            "type": {
+              "name": "enum",
+              "raw": "\"sm\" | \"md\" | \"lg\"",
+              "value": [
+                {
+                  "value": "\"sm\""
+                },
+                {
+                  "value": "\"md\""
+                },
+                {
+                  "value": "\"lg\""
+                }
+              ]
+            },
+            "description": "Defaults to `'md'`. The first row measures one Input of the same size and\nthree rows show at rest: `sm` 76px, `md` 84px, `lg` 96px (`lg` also raises\nthe text to `base` and the radius to `lg`).",
+            "defaultValue": null,
+            "parent": {
+              "name": "TextAreaProps",
+              "fileName": "src/textarea/textarea.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/textarea/textarea.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-textarea--default",
+          "name": "Default",
+          "snippet": "const Default = () => <TextArea placeholder=\"Anything the underwriter should know\" aria-label=\"Notes\" />;",
+          "description": "The default control at `md`: three rows at rest and a vertical resize handle\nthe user can drag to make it taller.",
+          "summary": "Default standalone text area"
+        },
+        {
+          "id": "components-textarea--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <TextArea size=\"sm\" aria-label=\"Small\" placeholder=\"sm — 76px, three rows\" />\n    <TextArea size=\"md\" aria-label=\"Medium\" placeholder=\"md — 84px, three rows\" />\n    <TextArea size=\"lg\" aria-label=\"Large\" placeholder=\"lg — 96px, three rows\" />\n</div>;",
+          "description": "The three sizes mirror Input's: the first row measures one Input of the same\nsize and the minimum height shows three rows.",
+          "summary": "The three sizes, three rows tall at rest"
+        },
+        {
+          "id": "components-textarea--rows",
+          "name": "Rows",
+          "snippet": "const Rows = () => <TextArea\n    placeholder=\"Six rows visible before scrolling\"\n    aria-label=\"Notes\"\n    rows={6} />;",
+          "description": "`rows` sets a taller initial height when three rows are not enough.",
+          "summary": "Taller initial height through the native rows attribute"
+        },
+        {
+          "id": "components-textarea--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => <div style={{ display: 'grid', gap: '0.25rem' }}>\n    <TextArea\n        placeholder=\"Anything the underwriter should know\"\n        aria-label=\"Reason\"\n        aria-invalid\n        aria-describedby=\"reason-error\"\n        defaultValue=\"n/a\" />\n    <span id=\"reason-error\">Tell us why you are cancelling.</span>\n</div>;",
+          "description": "The invalid treatment comes purely from `aria-invalid`; point\n`aria-describedby` at the message so it is read with the control.",
+          "summary": "Invalid state driven by aria-invalid"
+        },
+        {
+          "id": "components-textarea--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <TextArea\n    placeholder=\"Anything the underwriter should know\"\n    aria-label=\"Notes\"\n    disabled\n    defaultValue=\"Cannot be edited\" />;",
+          "description": "",
+          "summary": "Disabled state"
+        },
+        {
+          "id": "components-textarea--read-only",
+          "name": "Read Only",
+          "snippet": "const ReadOnly = () => <TextArea\n    placeholder=\"Anything the underwriter should know\"\n    aria-label=\"Notes\"\n    readOnly\n    defaultValue=\"Copy me, but do not change me\" />;",
+          "description": "",
+          "summary": "Read-only value that stays focusable and copyable"
+        }
+      ],
+      "import": "import { TextArea } from \"@agentero/design-system\";"
+    },
     "components-toast": {
       "id": "components-toast",
       "name": "Toast",
@@ -8606,6 +8874,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 4273
+    "durationMs": 4390
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.29.0",
+	"version": "0.30.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -133,6 +133,10 @@
 			"types": "./src/tag/index.d.ts",
 			"import": "./src/tag/index.js"
 		},
+		"./textarea": {
+			"types": "./src/textarea/index.d.ts",
+			"import": "./src/textarea/index.js"
+		},
 		"./toast": {
 			"types": "./src/toast/index.d.ts",
 			"import": "./src/toast/index.js"

package/src/alert/alert.js

@@ -308,4 +308,4 @@ var g = c({
 };
 O.Title = b, O.Paragraph = x, O.ParagraphHtml = S, O.Content = C, O.Actions = w, O.Button = E, O.Pictograms = T;
 //#endregion
-export { O as Alert };
+export { O as Alert, g as alertRecipe, v as useAlert };

package/src/avatar/avatar.js

@@ -230,4 +230,4 @@ var s = t({
 	};
 };
 //#endregion
-export { p as Avatar };
+export { p as Avatar, s as avatarRecipe, l as useAvatar };

package/src/button/button.js

@@ -272,4 +272,4 @@ var c = t({
 	});
 };
 //#endregion
-export { u as Button };
+export { u as Button, c as buttonRecipe };

package/src/data-table/data-table.js

@@ -12,24 +12,27 @@ var g = s(null), _ = () => {
 	let e = c(g);
 	if (!e) throw Error("useDataTable must be used within a DataTable.Root");
 	return e;
-}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => /* @__PURE__ */ d(g, {
-	value: {
-		table: h({
-			...a,
-			getCoreRowModel: m()
-		}),
-		isLoading: t,
-		scrollRef: l(null),
-		onRowClick: n,
-		rowHref: r,
-		linkComponent: i
-	},
-	children: /* @__PURE__ */ d("div", {
-		"data-slot": "data-table-root",
-		className: "flex min-h-0 flex-1 flex-col",
-		children: e
-	})
-});
+}, v = ({ children: e, isLoading: t = !1, onRowClick: n, rowHref: r, linkComponent: i = "a", ...a }) => {
+	let o = h({
+		...a,
+		getCoreRowModel: m()
+	}), s = l(null);
+	return /* @__PURE__ */ d(g, {
+		value: {
+			table: o,
+			isLoading: t,
+			scrollRef: s,
+			onRowClick: n,
+			rowHref: r,
+			linkComponent: i
+		},
+		children: /* @__PURE__ */ d("div", {
+			"data-slot": "data-table-root",
+			className: "flex min-h-0 flex-1 flex-col",
+			children: e
+		})
+	});
+};
 v.displayName = "DataTable.Root";
 var y = ({ children: e }) => /* @__PURE__ */ d("div", {
 	"data-slot": "data-table-toolbar",
@@ -98,7 +101,7 @@ var b = a({
 				return /* @__PURE__ */ d(o, { children: /* @__PURE__ */ d(n.Row, {
 					className: e("has-aria-expanded:bg-bg-default-base-secondary", i && "cursor-pointer"),
 					onClick: i ? (e) => {
-						S(e.target) || !e.currentTarget.contains(e.target) || (v ? v(t.original) : r && e.currentTarget.querySelector("[data-row-link]")?.click());
+						!S(e.target) && e.currentTarget.contains(e.target) && (v ? v(t.original) : r && e.currentTarget.querySelector("[data-row-link]")?.click());
 					} : void 0,
 					children: t.getVisibleCells().map((e, t) => {
 						let i = e.column.columnDef.meta;

package/src/field/field.js

@@ -45,19 +45,19 @@ var m = s({
 });
 g.displayName = "Field.Group";
 var _ = ({ className: n, orientation: r = "vertical", invalid: a = !1, disabled: o = !1, readOnly: s = !1, required: u = !1, controlId: p, ...m }) => {
-	let g = l(), _ = p ?? `${g}-control`, v = `${g}-description`, y = `${g}-error`, [b, x] = d([]), S = c((e) => (x((t) => t.includes(e) ? t : [...t, e]), () => x((t) => t.filter((t) => t !== e))), []);
+	let g = l(), _ = p ?? `${g}-control`, v = `${g}-description`, y = `${g}-error`, [b, x] = d([]), S = c((e) => (x((t) => t.includes(e) ? t : [...t, e]), () => x((t) => t.filter((t) => t !== e))), []), C = {
+		controlId: _,
+		descriptionId: v,
+		errorId: y,
+		describedBy: [...[v, y].filter((e) => b.includes(e)), ...b.filter((e) => e !== v && e !== y)].join(" ") || void 0,
+		registerMessage: S,
+		invalid: a,
+		disabled: o,
+		readOnly: s,
+		required: u
+	};
 	return /* @__PURE__ */ f(i, {
-		value: {
-			controlId: _,
-			descriptionId: v,
-			errorId: y,
-			describedBy: [...[v, y].filter((e) => b.includes(e)), ...b.filter((e) => e !== v && e !== y)].join(" ") || void 0,
-			registerMessage: S,
-			invalid: a,
-			disabled: o,
-			readOnly: s,
-			required: u
-		},
+		value: C,
 		children: /* @__PURE__ */ f(t, {
 			value: {
 				htmlFor: _,
@@ -129,4 +129,4 @@ var x = (e) => {
 };
 S.displayName = "Field.Error";
 //#endregion
-export { v as Content, b as Description, S as FieldError, g as Group, y as Label, _ as Root, m as fieldRecipe };
+export { v as Content, b as Description, S as Error, g as Group, y as Label, _ as Root, m as fieldRecipe };

package/src/field/index.js

@@ -1,5 +1,5 @@
 import { FieldContext as e, useFieldContext as t } from "./context.js";
-import { Content as n, Description as r, FieldError as i, Group as a, Label as o, Root as s, fieldRecipe as c } from "./field.js";
+import { Content as n, Description as r, Error as i, Group as a, Label as o, Root as s, fieldRecipe as c } from "./field.js";
 //#region src/field/index.ts
 var l = {
 	Root: s,

package/src/field-text/field-text.js

@@ -5,16 +5,16 @@ import { InputContext as n } from "../input/context.js";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/field-text/field-text.tsx
 var i = ({ children: t }) => {
-	let i = e();
+	let i = e(), a = i && {
+		id: i.controlId,
+		"aria-describedby": i.describedBy,
+		"aria-invalid": i.invalid || void 0,
+		required: i.required || void 0,
+		disabled: i.disabled || void 0,
+		readOnly: i.readOnly || void 0
+	};
 	return /* @__PURE__ */ r(n, {
-		value: i && {
-			id: i.controlId,
-			"aria-describedby": i.describedBy,
-			"aria-invalid": i.invalid || void 0,
-			required: i.required || void 0,
-			disabled: i.disabled || void 0,
-			readOnly: i.readOnly || void 0
-		},
+		value: a,
 		children: t
 	});
 }, a = ({ children: e, ...n }) => /* @__PURE__ */ r(t.Root, {

package/src/pagination/pagination.js

@@ -93,4 +93,4 @@ var l = o({
 	});
 };
 //#endregion
-export { u as Pagination };
+export { u as Pagination, l as paginationRecipe };

package/src/table/table.js

@@ -31,18 +31,18 @@ var s = "ps-[var(--table-cell-padding-inline)] pe-[var(--table-cell-padding-inli
 	if (!e) throw Error("Table parts must be used within Table.Root");
 	return e;
 }, d = i("body"), f = (e) => e === "header" || e === "headerAndFooter", p = (e) => e === "headerAndFooter", m = ({ children: e, ref: t, ...n }) => {
-	let { size: r, sticky: i, embed: a } = n, s = c(n);
+	let { size: r, sticky: i, embed: a } = n, s = c(n), u = {
+		header: y({ sticky: f(i) }),
+		cell: x({ size: r }),
+		headRow: _({ body: !1 }),
+		bodyRow: _({
+			body: !0,
+			divider: !a,
+			stickyFooter: p(i)
+		})
+	};
 	return /* @__PURE__ */ o(l, {
-		value: {
-			header: y({ sticky: f(i) }),
-			cell: x({ size: r }),
-			headRow: _({ body: !1 }),
-			bodyRow: _({
-				body: !0,
-				divider: !a,
-				stickyFooter: p(i)
-			})
-		},
+		value: u,
 		children: /* @__PURE__ */ o("div", {
 			"data-slot": "table-root",
 			className: s.root(),
@@ -100,10 +100,10 @@ var _ = r({
 		}
 	}
 }), v = ({ className: t, ...n }) => {
-	let { headRow: r, bodyRow: i } = u();
+	let { headRow: r, bodyRow: i } = u(), s = a(d) === "body";
 	return /* @__PURE__ */ o("tr", {
 		"data-slot": "table-row",
-		className: e(a(d) === "body" ? i : r, t),
+		className: e(s ? i : r, t),
 		...n
 	});
 };

package/src/tabs/tabs.js

@@ -103,11 +103,14 @@ var f = ({ className: t, ...n }) => {
 	});
 };
 f.displayName = "Tabs.Content";
-var p = ({ className: t, variant: n, ...a }) => /* @__PURE__ */ i("span", {
-	"data-slot": "tabs-label",
-	className: e((r(s) ?? o({ variant: n })).trigger(), "pointer-events-none", t),
-	...a
-});
+var p = ({ className: t, variant: n, ...a }) => {
+	let c = r(s) ?? o({ variant: n });
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "tabs-label",
+		className: e(c.trigger(), "pointer-events-none", t),
+		...a
+	});
+};
 p.displayName = "Tabs.Label";
 //#endregion
 export { f as Content, p as Label, u as List, l as Root, d as Trigger, o as tabsRecipe };

package/src/tag/tag.js

@@ -110,21 +110,21 @@ var s = t({
 	className: "min-w-0 truncate",
 	children: e
 }) : e), l = ({ children: t, asChild: l, color: u, variant: d, size: f, pill: p, truncate: m, className: h, ref: g, ..._ }) => {
-	let v = l ? a : "span", y = n.toArray(l && r(t) ? t.props.children : t), b = e(s({
+	let v = l ? a : "span", y = n.toArray(l && r(t) ? t.props.children : t), b = y.length > 0 && y.every(r), x = e(s({
 		color: u,
 		variant: d,
 		size: f,
 		pill: p,
 		truncate: m,
 		interactive: l,
-		hasOnlyIcon: y.length > 0 && y.every(r)
-	}), h), x = m && !l ? c(t) : t;
+		hasOnlyIcon: b
+	}), h), S = m && !l ? c(t) : t;
 	return /* @__PURE__ */ i(v, {
 		"data-slot": "tag",
 		..._,
-		className: b,
+		className: x,
 		ref: g,
-		children: l ? /* @__PURE__ */ i(o, { children: t }) : x
+		children: l ? /* @__PURE__ */ i(o, { children: t }) : S
 	});
 };
 //#endregion

package/src/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { TextArea, textAreaRecipe } from './textarea';
+export type { TextAreaProps, TextAreaSize, TextAreaVariants } from './textarea';

package/src/textarea/index.js

@@ -0,0 +1,2 @@
+import { TextArea as e, textAreaRecipe as t } from "./textarea.js";
+export { e as TextArea, t as textAreaRecipe };

package/src/textarea/textarea.d.ts

@@ -0,0 +1,88 @@
+import { ComponentPropsWithRef } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Extends `inputRecipe`, trading Input's fixed height for a minimum one. The
+ * handle drags vertically only, so the control can never break its column.
+ *
+ * @summary tailwind-variants recipe backing the TextArea component styles
+ */
+export declare const textAreaRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "block resize-y", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+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
+     * three rows show at rest: `sm` 76px, `md` 84px, `lg` 96px (`lg` also raises
+     * 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
+ * and sizes on a single `<textarea>` with nothing around it, so the native
+ * resize handle and scrollbar keep working. Pair it with
+ * [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.
+ *
+ * @summary Base multi-line text control sharing Input's skin, states and sizes
+ *
+ * @example
+ * <Label htmlFor="notes">Notes</Label>
+ * <TextArea id="notes" placeholder="Anything the underwriter should know" />
+ */
+export declare const TextArea: {
+    (props: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/textarea/textarea.js

@@ -0,0 +1,26 @@
+import { cn as e } from "../../lib/utils.js";
+import { inputRecipe as t } from "../input/input.js";
+import { tv as n } from "tailwind-variants";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/textarea/textarea.tsx
+var i = n({
+	extend: t,
+	base: "block resize-y",
+	variants: { size: {
+		sm: "h-auto min-h-19 py-1",
+		md: "h-auto min-h-21 py-2",
+		lg: "h-auto min-h-24 py-2.75"
+	} },
+	defaultVariants: { size: "md" }
+}), a = (t) => {
+	let { className: n, size: a, ...o } = t;
+	return /* @__PURE__ */ r("textarea", {
+		"data-slot": "textarea",
+		"data-size": a,
+		className: e(i({ size: a }), n),
+		...o
+	});
+};
+a.displayName = "TextArea";
+//#endregion
+export { a as TextArea, i as textAreaRecipe };