@agentero/design-system 0.25.4 → 0.26.0

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">25 components ok</span><span class="filter-pill ok" aria-disabled="true">194 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">26 components ok</span><span class="filter-pill ok" aria-disabled="true">203 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.3s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.0s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -4504,6 +4504,245 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
         </div>
     
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="Input">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> Input</h2>
+      <div class="badges">
+        <label for="c-11-components-input-props" class="badge ok as-toggle">7 prop types</label>
+        
+        <label for="c-11-components-input-stories" class="badge ok as-toggle">9 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/input/input.stories.tsx">components-input · ./src/input/input.stories.tsx</div>
+    <div>Base single-line text control, unaware of fields and form libraries</div>
+    <div class="hint">Input is the base single-line text control. It is intentionally unaware of
+form fields and form libraries: `id`, `aria-invalid` and `aria-describedby`
+are plain props, set by a field wrapper or 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>
+    <div class="kv"><span class="chip">summary: Base single-line text control, unaware of fields and form libraries</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>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-11-components-input-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-11-components-input-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">7 prop types</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>
+          </div>
+        </div>
+    
+        <div class="panel panel-stories">
+          
+          
+          
+          <div class="note ok">
+                <div class="row">
+                  <span class="ex-name">Imports</span>
+                </div>
+                <pre><code>import { Input } 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 input</div>
+              <div class="hint">The default control at `md`, usable anywhere without a surrounding field.</div>
+              <pre><code>const Default = () =&gt; &lt;Input type=&quot;text&quot; placeholder=&quot;Insert value&quot; aria-label=&quot;Value&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Small</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Small 32px control for dense layouts</div>
+              <div class="hint">`sm` (32px) keeps dense layouts compact where vertical space is tight.</div>
+              <pre><code>const Small = () =&gt; &lt;Input type=&quot;text&quot; placeholder=&quot;Insert value&quot; aria-label=&quot;Value&quot; size=&quot;sm&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Medium</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Medium 40px control, the default</div>
+              <div class="hint">`md` (40px) is the default and covers standard form density.</div>
+              <pre><code>const Medium = () =&gt; &lt;Input type=&quot;text&quot; placeholder=&quot;Insert value&quot; aria-label=&quot;Value&quot; size=&quot;md&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Large</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Large 48px control for low-density forms</div>
+              <div class="hint">`lg` (48px) suits low-density forms and larger touch targets. It also raises
+the text to `base` and the corner radius to `lg`.</div>
+              <pre><code>const Large = () =&gt; &lt;Input type=&quot;text&quot; placeholder=&quot;Insert value&quot; aria-label=&quot;Value&quot; size=&quot;lg&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>Visual comparison of the three input sizes</div>
+              <div class="hint">All three heights together for visual comparison.</div>
+              <pre><code>const AllSizes = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39;, maxWidth: &#39;20rem&#39; }}&gt;
+    &lt;Input type=&quot;text&quot; size=&quot;sm&quot; aria-label=&quot;Small input&quot; placeholder=&quot;sm — 32px&quot; /&gt;
+    &lt;Input type=&quot;text&quot; size=&quot;md&quot; aria-label=&quot;Medium input&quot; placeholder=&quot;md — 40px&quot; /&gt;
+    &lt;Input type=&quot;text&quot; size=&quot;lg&quot; aria-label=&quot;Large input&quot; placeholder=&quot;lg — 48px&quot; /&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Types</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Common input types side by side</div>
+              <div class="hint">A range of input types. The type picks the on-screen keyboard on touch
+devices and the browser&#39;s own parsing, so set it even when you validate
+yourself.</div>
+              <pre><code>const Types = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39;, maxWidth: &#39;20rem&#39; }}&gt;
+    &lt;Input type=&quot;text&quot; aria-label=&quot;Text&quot; placeholder=&quot;Text&quot; /&gt;
+    &lt;Input type=&quot;email&quot; aria-label=&quot;Email address&quot; placeholder=&quot;you@example.com&quot; /&gt;
+    &lt;Input type=&quot;password&quot; aria-label=&quot;Password&quot; placeholder=&quot;Password&quot; /&gt;
+    &lt;Input type=&quot;number&quot; aria-label=&quot;Amount&quot; placeholder=&quot;0&quot; /&gt;
+    &lt;Input type=&quot;date&quot; aria-label=&quot;Date&quot; placeholder=&quot;&quot; /&gt;
+&lt;/div&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`, so the border can
+never disagree with what assistive technology announces. Point
+`aria-describedby` at the message so it is read out with the control.</div>
+              <pre><code>const Invalid = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;0.25rem&#39;, maxWidth: &#39;20rem&#39; }}&gt;
+    &lt;Input
+        type=&quot;email&quot;
+        placeholder=&quot;Insert value&quot;
+        aria-label=&quot;Email&quot;
+        aria-invalid
+        aria-describedby=&quot;email-error&quot;
+        defaultValue=&quot;not-an-email&quot; /&gt;
+    &lt;span id=&quot;email-error&quot;&gt;Enter a valid email address.&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>
+              <div class="hint">A disabled input keeps its value readable but blocks interaction, drops its
+shadow and leaves the tab order.</div>
+              <pre><code>const Disabled = () =&gt; &lt;Input
+    type=&quot;text&quot;
+    placeholder=&quot;Insert value&quot;
+    aria-label=&quot;Value&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>
+              <div class="hint">Read-only inputs stay focusable and copyable and still submit their value —
+reach for this over `disabled` when the user needs to read or copy something
+they cannot change.</div>
+              <pre><code>const ReadOnly = () =&gt; &lt;Input
+    type=&quot;text&quot;
+    placeholder=&quot;Insert value&quot;
+    aria-label=&quot;Value&quot;
+    readOnly
+    defaultValue=&quot;Copy me, but do not change me&quot; /&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -4518,9 +4757,9 @@ trigger-dense UIs where an instant preview reads as more responsive.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Label</h2>
       <div class="badges">
-        <label for="c-11-components-label-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-12-components-label-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-11-components-label-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-12-components-label-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -4540,10 +4779,10 @@ still has to carry `required` / `aria-required`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-11-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-12-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-11-components-label-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-12-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -4641,9 +4880,9 @@ dropped, so a mistake never takes the page down.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Loading</h2>
       <div class="badges">
-        <label for="c-12-components-loading-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-13-components-loading-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-12-components-loading-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-13-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -4660,10 +4899,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-12-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-13-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-12-components-loading-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-13-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -4814,9 +5053,9 @@ against the dark background.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Modal.Root</h2>
       <div class="badges">
-        <label for="c-13-components-modal-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-14-components-modal-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-13-components-modal-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-14-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -4862,10 +5101,10 @@ import { Modal } from &#39;@agentero/design-system/modal&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-13-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-14-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-13-components-modal-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-14-components-modal-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5062,9 +5301,9 @@ announced as an `alertdialog`. Only the footer actions close it.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Pagination</h2>
       <div class="badges">
-        <label for="c-14-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-15-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-14-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-15-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -5094,10 +5333,10 @@ const [page, setPage] = useState(1);
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-14-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-15-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-14-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-15-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5252,9 +5491,9 @@ entries summary follow along.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Popover.Root</h2>
       <div class="badges">
-        <label for="c-15-components-popover-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-16-components-popover-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-15-components-popover-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-16-components-popover-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -5283,10 +5522,10 @@ import { Popover } from &#39;@agentero/design-system/popover&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-15-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-16-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-15-components-popover-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-16-components-popover-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5441,9 +5680,9 @@ useful when the visual anchor differs from the toggle button.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Progress</h2>
       <div class="badges">
-        <label for="c-16-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        <label for="c-17-components-progress-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-16-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-17-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -5462,10 +5701,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-16-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-17-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-16-components-progress-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-17-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5584,7 +5823,7 @@ percentage: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-17-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-18-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -5601,7 +5840,7 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-17-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-18-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
   
@@ -5697,9 +5936,9 @@ shape it with Tailwind classes to mirror the content it stands in for.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Switch</h2>
       <div class="badges">
-        <label for="c-18-components-switch-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-19-components-switch-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-18-components-switch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-19-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -5715,10 +5954,10 @@ a Checkbox for a single boolean that applies instantly, and pair it with a
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-18-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-19-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-18-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-19-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -5899,9 +6138,9 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Table.Root</h2>
       <div class="badges">
-        <label for="c-19-components-table-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-20-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-19-components-table-stories" class="badge ok as-toggle">9 stories</label>
+        <label for="c-20-components-table-stories" class="badge ok as-toggle">9 stories</label>
         
         
       </div>
@@ -5932,10 +6171,10 @@ import { Table } from &#39;@agentero/design-system/table&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-19-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-20-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-19-components-table-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-20-components-table-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6130,9 +6369,9 @@ import { Fragment } from "react";</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
       <div class="badges">
-        <label for="c-20-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-21-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-20-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-21-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -6163,10 +6402,10 @@ import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-20-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-21-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-20-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-21-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6387,9 +6626,9 @@ tablist role is announced.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tag</h2>
       <div class="badges">
-        <label for="c-21-components-tag-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-22-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-21-components-tag-stories" class="badge ok as-toggle">12 stories</label>
+        <label for="c-22-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -6408,10 +6647,10 @@ it an interactive link or button, which adds the pointer cursor and hover fill.<
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-21-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-22-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-21-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-22-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -6836,9 +7075,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-22-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-23-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-22-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-23-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -6857,10 +7096,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-22-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-23-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-22-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-23-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7289,9 +7528,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-23-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-24-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-23-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-24-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7310,10 +7549,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-23-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-24-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-23-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-24-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7485,9 +7724,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-24-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-25-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-24-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-25-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -7508,10 +7747,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-24-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-25-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-24-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-25-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     

package/mcp/manifests/components.json

@@ -4305,6 +4305,274 @@
       ],
       "import": "import { Avatar, Button, HoverCard } from \"@agentero/design-system\";"
     },
+    "components-input": {
+      "id": "components-input",
+      "name": "Input",
+      "path": "./src/input/input.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Base single-line text control, unaware of fields and form libraries"
+        ],
+        "example": [
+          "<Label htmlFor=\"email\">Email</Label>\n<Input id=\"email\" type=\"email\" placeholder=\"you@example.com\" />",
+          "<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. It is intentionally unaware of\nform fields and form libraries: `id`, `aria-invalid` and `aria-describedby`\nare plain props, set by a field wrapper or by 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.",
+      "summary": "Base single-line text control, unaware of fields and form libraries",
+      "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\nIt is deliberately self-contained: it renders the props it is given and\nknows nothing about form fields, form libraries, or surrounding layout.\nWiring (`id`, `aria-invalid`, `aria-describedby`) arrives as plain props, so\na field wrapper can inject them and standalone usage can set them by hand.\nThere 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.",
+        "jsDocTags": {
+          "summary": [
+            "Base single-line text control, unaware of fields and form libraries"
+          ],
+          "example": [
+            "<Label htmlFor=\"email\">Email</Label>\n<Input id=\"email\" type=\"email\" placeholder=\"you@example.com\" />",
+            "<Input id=\"email\" aria-invalid aria-describedby=\"email-error\" />\n<span id=\"email-error\">Enter a valid email address.</span>"
+          ]
+        },
+        "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"
+              }
+            ]
+          },
+          "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"
+              }
+            ]
+          },
+          "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"
+              }
+            ]
+          },
+          "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"
+              }
+            ]
+          },
+          "size": {
+            "name": "size",
+            "required": false,
+            "type": {
+              "name": "enum",
+              "raw": "\"sm\" | \"md\" | \"lg\"",
+              "value": [
+                {
+                  "value": "\"sm\""
+                },
+                {
+                  "value": "\"md\""
+                },
+                {
+                  "value": "\"lg\""
+                }
+              ]
+            },
+            "description": "Control height. Defaults to `'md'`.\n- `sm` (32px) — dense layouts where vertical space is tight.\n- `md` (40px) — standard form density.\n- `lg` (48px) — low-density forms and larger touch targets. Also raises\n  the text to `base` and the corner radius to `lg`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputProps",
+              "fileName": "src/input/input.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input/input.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-input--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Input type=\"text\" placeholder=\"Insert value\" aria-label=\"Value\" />;",
+          "description": "The default control at `md`, usable anywhere without a surrounding field.",
+          "summary": "Default standalone input"
+        },
+        {
+          "id": "components-input--small",
+          "name": "Small",
+          "snippet": "const Small = () => <Input type=\"text\" placeholder=\"Insert value\" aria-label=\"Value\" size=\"sm\" />;",
+          "description": "`sm` (32px) keeps dense layouts compact where vertical space is tight.",
+          "summary": "Small 32px control for dense layouts"
+        },
+        {
+          "id": "components-input--medium",
+          "name": "Medium",
+          "snippet": "const Medium = () => <Input type=\"text\" placeholder=\"Insert value\" aria-label=\"Value\" size=\"md\" />;",
+          "description": "`md` (40px) is the default and covers standard form density.",
+          "summary": "Medium 40px control, the default"
+        },
+        {
+          "id": "components-input--large",
+          "name": "Large",
+          "snippet": "const Large = () => <Input type=\"text\" placeholder=\"Insert value\" aria-label=\"Value\" size=\"lg\" />;",
+          "description": "`lg` (48px) suits low-density forms and larger touch targets. It also raises\nthe text to `base` and the corner radius to `lg`.",
+          "summary": "Large 48px control for low-density forms"
+        },
+        {
+          "id": "components-input--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => <div style={{ display: 'grid', gap: '1rem', maxWidth: '20rem' }}>\n    <Input type=\"text\" size=\"sm\" aria-label=\"Small input\" placeholder=\"sm — 32px\" />\n    <Input type=\"text\" size=\"md\" aria-label=\"Medium input\" placeholder=\"md — 40px\" />\n    <Input type=\"text\" size=\"lg\" aria-label=\"Large input\" placeholder=\"lg — 48px\" />\n</div>;",
+          "description": "All three heights together for visual comparison.",
+          "summary": "Visual comparison of the three input sizes"
+        },
+        {
+          "id": "components-input--types",
+          "name": "Types",
+          "snippet": "const Types = () => <div style={{ display: 'grid', gap: '1rem', maxWidth: '20rem' }}>\n    <Input type=\"text\" aria-label=\"Text\" placeholder=\"Text\" />\n    <Input type=\"email\" aria-label=\"Email address\" placeholder=\"you@example.com\" />\n    <Input type=\"password\" aria-label=\"Password\" placeholder=\"Password\" />\n    <Input type=\"number\" aria-label=\"Amount\" placeholder=\"0\" />\n    <Input type=\"date\" aria-label=\"Date\" placeholder=\"\" />\n</div>;",
+          "description": "A range of input types. The type picks the on-screen keyboard on touch\ndevices and the browser's own parsing, so set it even when you validate\nyourself.",
+          "summary": "Common input types side by side"
+        },
+        {
+          "id": "components-input--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => <div style={{ display: 'grid', gap: '0.25rem', maxWidth: '20rem' }}>\n    <Input\n        type=\"email\"\n        placeholder=\"Insert value\"\n        aria-label=\"Email\"\n        aria-invalid\n        aria-describedby=\"email-error\"\n        defaultValue=\"not-an-email\" />\n    <span id=\"email-error\">Enter a valid email address.</span>\n</div>;",
+          "description": "The invalid treatment comes purely from `aria-invalid`, so the border can\nnever disagree with what assistive technology announces. Point\n`aria-describedby` at the message so it is read out with the control.",
+          "summary": "Invalid state driven by aria-invalid"
+        },
+        {
+          "id": "components-input--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <Input\n    type=\"text\"\n    placeholder=\"Insert value\"\n    aria-label=\"Value\"\n    disabled\n    defaultValue=\"Cannot be edited\" />;",
+          "description": "A disabled input keeps its value readable but blocks interaction, drops its\nshadow and leaves the tab order.",
+          "summary": "Disabled state"
+        },
+        {
+          "id": "components-input--read-only",
+          "name": "Read Only",
+          "snippet": "const ReadOnly = () => <Input\n    type=\"text\"\n    placeholder=\"Insert value\"\n    aria-label=\"Value\"\n    readOnly\n    defaultValue=\"Copy me, but do not change me\" />;",
+          "description": "Read-only inputs stay focusable and copyable and still submit their value —\nreach for this over `disabled` when the user needs to read or copy something\nthey cannot change.",
+          "summary": "Read-only value that stays focusable and copyable"
+        }
+      ],
+      "import": "import { Input } from \"@agentero/design-system\";"
+    },
     "components-label": {
       "id": "components-label",
       "name": "Label",
@@ -7013,6 +7281,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3272
+    "durationMs": 3983
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.25.4",
+	"version": "0.26.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -65,6 +65,10 @@
 			"types": "./src/hover-card/index.d.ts",
 			"import": "./src/hover-card/index.js"
 		},
+		"./input": {
+			"types": "./src/input/index.d.ts",
+			"import": "./src/input/index.js"
+		},
 		"./label": {
 			"types": "./src/label/index.d.ts",
 			"import": "./src/label/index.js"

package/src/input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input, inputRecipe } from './input';
+export type { InputProps, InputSize, InputVariants } from './input';

package/src/input/index.js

@@ -0,0 +1,2 @@
+import { Input as e, inputRecipe as t } from "./input.js";
+export { e as Input, t as inputRecipe };

package/src/input/input.d.ts

@@ -0,0 +1,109 @@
+import { ComponentPropsWithRef } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Style recipe for Input. Single-element recipe with a `size` variant; the
+ * invalid treatment is driven entirely by the `aria-invalid` attribute so the
+ * visual state can never drift from what assistive technology announces.
+ *
+ * @summary tailwind-variants recipe backing the Input component styles
+ */
+export declare const inputRecipe: 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 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'`.
+     * - `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?: 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
+ * whenever a form collects free text, and pair it with
+ * [Label](?path=/docs/components-label--docs) so the control has an accessible
+ * name.
+ *
+ * It is deliberately self-contained: it renders the props it is given and
+ * knows nothing about form fields, form libraries, or surrounding layout.
+ * Wiring (`id`, `aria-invalid`, `aria-describedby`) arrives as plain props, so
+ * a field wrapper can inject them and standalone usage can set them by hand.
+ * There is no `status` prop — mark the control `aria-invalid` and the
+ * destructive border follows.
+ *
+ * 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
+ * unit suffix belongs in an input group, not here.
+ *
+ * @summary Base single-line text control, unaware of fields and form libraries
+ *
+ * @example
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" type="email" placeholder="you@example.com" />
+ *
+ * @example
+ * <Input id="email" aria-invalid aria-describedby="email-error" />
+ * <span id="email-error">Enter a valid email address.</span>
+ */
+export declare const Input: {
+    ({ className, size, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/input/input.js

@@ -0,0 +1,35 @@
+import { cn as e } from "../../lib/utils.js";
+import { tv as t } from "tailwind-variants";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/input/input.tsx
+var r = t({
+	base: [
+		"box-border w-full min-w-0 appearance-none rounded-md px-4 shadow-sm",
+		"border border-solid border-border-input-default bg-bg-input-normal text-text-input-normal",
+		"placeholder:text-text-input-placeholder placeholder-shown:text-ellipsis",
+		"outline-0 -outline-offset-1 outline-[transparent]",
+		"transition-[color,box-shadow,outline-color,outline-offset,outline-width] duration-75",
+		"focus-visible:border-border-input-focus focus-visible:outline-border-input-focus",
+		"focus-visible:outline-[0.125rem] focus-visible:outline-offset-[-0.0625rem]",
+		"aria-invalid:border-border-input-destructive",
+		"aria-invalid:focus-visible:border-border-input-destructive",
+		"aria-invalid:focus-visible:outline-border-input-destructive",
+		"disabled:cursor-default disabled:border-border-input-disable disabled:bg-bg-input-disable",
+		"disabled:text-text-input-disable disabled:shadow-none",
+		"disabled:placeholder:text-text-input-disable"
+	],
+	variants: { size: {
+		sm: "h-8 text-sm",
+		md: "h-10 text-sm",
+		lg: "h-12 rounded-lg text-base"
+	} },
+	defaultVariants: { size: "md" }
+}), i = ({ className: t, size: i, ...a }) => /* @__PURE__ */ n("input", {
+	"data-slot": "input",
+	"data-size": i,
+	className: e(r({ size: i }), t),
+	...a
+});
+i.displayName = "Input";
+//#endregion
+export { i as Input, r as inputRecipe };