@agentero/design-system 0.25.4 → 0.26.1

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">204 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>5.6s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -2580,7 +2580,7 @@ import { CheckList } from &#39;@agentero/design-system/check-list&#39;;
       <div class="badges">
         <label for="c-6-components-command-props" class="badge ok as-toggle">10 prop types</label>
         
-        <label for="c-6-components-command-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-6-components-command-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -2791,6 +2791,26 @@ and `scroll-py-2` keeps that row off the container edges.</div>
                             &lt;/Command.Item&gt;
     &lt;/Command.List&gt;
     &lt;Command.Empty&gt;No results found.&lt;/Command.Empty&gt;
+&lt;/Command.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled Item</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">A `disabled` row stays visible and searchable but cannot be chosen. cmdk skips it with the
+arrow keys and swallows the click, and the row drops its hover and active styling so the
+list does not invite the pointer.</div>
+              <pre><code>const DisabledItem = () =&gt; &lt;Command.Root label=&quot;Search agencies&quot;&gt;
+    &lt;Command.Input placeholder=&quot;Search...&quot; /&gt;
+    &lt;Command.List&gt;
+        &lt;Command.Item value=&quot;pinnacle&quot; onSelect={handleDisabledSelect}&gt;Pinnacle Shield Insurance
+                            &lt;/Command.Item&gt;
+        &lt;Command.Item value=&quot;horizon&quot; disabled onSelect={handleDisabledSelect}&gt;Horizon Risk Solutions
+                            &lt;/Command.Item&gt;
+    &lt;/Command.List&gt;
+    &lt;Command.Empty&gt;No results found.&lt;/Command.Empty&gt;
 &lt;/Command.Root&gt;;</code></pre>
             </div>
         </div>
@@ -4504,6 +4524,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 +4777,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 +4799,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 +4900,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 +4919,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 +5073,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 +5121,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 +5321,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 +5353,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 +5511,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 +5542,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 +5700,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 +5721,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 +5843,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 +5860,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 +5956,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 +5974,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 +6158,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 +6191,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 +6389,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 +6422,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 +6646,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 +6667,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 +7095,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 +7116,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 +7548,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 +7569,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 +7744,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 +7767,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

@@ -1923,6 +1923,12 @@
           "id": "components-command--keyboard-navigation",
           "name": "Keyboard Navigation",
           "snippet": "const KeyboardNavigation = () => <Command.Root label=\"Search commands\">\n    <Command.Input placeholder=\"Search...\" />\n    <Command.List>\n        <Command.Item value=\"home\" keywords={['Homeowners']} onSelect={handleSelect}>Homeowners\n                            </Command.Item>\n        <Command.Item value=\"auto\" keywords={['Auto']} onSelect={handleSelect}>Auto\n                            </Command.Item>\n    </Command.List>\n    <Command.Empty>No results found.</Command.Empty>\n</Command.Root>;"
+        },
+        {
+          "id": "components-command--disabled-item",
+          "name": "Disabled Item",
+          "snippet": "const DisabledItem = () => <Command.Root label=\"Search agencies\">\n    <Command.Input placeholder=\"Search...\" />\n    <Command.List>\n        <Command.Item value=\"pinnacle\" onSelect={handleDisabledSelect}>Pinnacle Shield Insurance\n                            </Command.Item>\n        <Command.Item value=\"horizon\" disabled onSelect={handleDisabledSelect}>Horizon Risk Solutions\n                            </Command.Item>\n    </Command.List>\n    <Command.Empty>No results found.</Command.Empty>\n</Command.Root>;",
+          "description": "A `disabled` row stays visible and searchable but cannot be chosen. cmdk skips it with the\narrow keys and swallows the click, and the row drops its hover and active styling so the\nlist does not invite the pointer."
         }
       ],
       "import": "import { Command } from \"@agentero/design-system\";"
@@ -4305,6 +4311,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 +7287,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3272
+    "durationMs": 5599
   }
 }

package/package.json

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

@@ -220,7 +220,8 @@ export declare const Group: {
  * @property {string} [className] - Additional CSS classes to apply.
  *
  * @dataAttribute {string} data-selected - "true" on the active row, "false" otherwise
- * @dataAttribute {string} data-disabled - "true" when disabled, "false" otherwise
+ * @dataAttribute {string} data-disabled - "true" when disabled, "false" otherwise. A disabled row
+ *   drops the hover and active backgrounds and renders in the disabled text color.
  */
 type ItemProps = ComponentProps<typeof CommandPrimitive.Item>;
 /**

package/src/command/command.js

@@ -14,7 +14,9 @@ var a = t({ slots: {
 	item: [
 		"flex items-center rounded-md px-3 py-2 text-sm text-text-default-base-primary",
 		"cursor-pointer hover:bg-bg-default-base-tertiary",
-		"data-[selected=true]:bg-bg-default-base-tertiary"
+		"data-[selected=true]:bg-bg-default-base-tertiary",
+		"data-[disabled=true]:cursor-default data-[disabled=true]:text-text-default-disable-primary",
+		"data-[disabled=true]:hover:bg-transparent data-[disabled=true]:data-[selected=true]:bg-transparent"
 	]
 } }), o = a(), s = ({ className: e, ...t }) => /* @__PURE__ */ n(i, {
 	"data-slot": "command-root",

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 };