@agentero/design-system 0.35.1 → 0.36.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">38 components ok</span><span class="filter-pill ok" aria-disabled="true">308 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">39 components ok</span><span class="filter-pill ok" aria-disabled="true">319 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.9s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>5.1s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -7697,6 +7697,327 @@ button&#39;s start corners with the frame.</div>
         </div>
     
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="InputNumber">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> InputNumber</h2>
+      <div class="badges">
+        <label for="c-20-components-inputnumber-props" class="badge ok as-toggle">7 prop types</label>
+        
+        <label for="c-20-components-inputnumber-stories" class="badge ok as-toggle">11 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/input-number/input-number.stories.tsx">components-inputnumber · ./src/input-number/input-number.stories.tsx</div>
+    <div>Numeric input formatting as you type, built on react-number-format</div>
+    <div class="hint">InputNumber is a text field that only takes digits and a decimal point and
+formats them as the user types: thousands separators on request, leading
+zeros kept unless turned off, no sign. `onChange` fires with the formatted text in
+`event.target.value`. It is an `Input` driven by `react-number-format`, so
+it takes its label, messages and states from a surrounding `FieldText`.</div>
+    <div class="kv"><span class="chip">summary: Numeric input formatting as you type, built on react-number-format</span><span class="chip">dataAttribute: {string} data-slot - Always set to &quot;input-number&quot;</span><span class="chip">example: &lt;FieldText&gt;
+  &lt;Label&gt;Annual premium&lt;/Label&gt;
+  &lt;InputNumber name=&quot;premium&quot; thousandSeparator allowLeadingZeros={false} /&gt;
+&lt;/FieldText&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-20-components-inputnumber-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-20-components-inputnumber-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-number/input-number.tsx::InputNumber</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * Keeps zeros typed in front of the number (`007`), which an identifier
+ * such as an NPN or a ZIP code needs. Set it to `false` for an amount, so
+ * `007` becomes `7` once the field loses focus, and `onChange` fires with
+ * the trimmed value. Defaults to `true`.
+ */
+allowLeadingZeros?: boolean = true
+
+/**
+ * Initial value of an uncontrolled field, in the same forms as `value`.
+ */
+defaultValue?: string | number | null | undefined
+
+/**
+ * Highest value the field accepts. A keystroke or paste that would take
+ * the number above it is dropped before it reaches the field, so `onChange`
+ * is not called for it. No limit by default.
+ */
+maxNumber?: number
+
+/**
+ * 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;
+
+/**
+ * Groups the integer part in thousands with a comma as the user types
+ * (`1,234,567`). The separators are part of `event.target.value`. Defaults
+ * to `false`.
+ */
+thousandSeparator?: boolean = false
+
+/**
+ * The underlying `&lt;input&gt;` type. Defaults to `&#39;text&#39;`.
+ * - `text` — the general case.
+ * - `tel` — brings up the numeric keypad on phones, for codes and
+ *   identifiers that are digits only.
+ * - `password` — masks the digits, for a PIN.
+ */
+type?: &quot;text&quot; | &quot;tel&quot; | &quot;password&quot;
+
+/**
+ * The number to show, as a number or as a string of digits. It is displayed
+ * formatted according to `thousandSeparator`. `null` and `&#39;&#39;` both clear the
+ * field.
+ */
+value?: string | number | null | 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 { Controller, Field, FieldText, InputContext, InputGroup, InputNumber, Label } 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>Numeric field that ignores letters and signs</div>
+              <div class="hint">Only digits and a decimal point make it into the field: letters and a minus
+sign are ignored as they are typed. `onChange` reports the text as it is shown, and the `ref`
+points at the `&lt;input&gt;` element.</div>
+              <pre><code>const Default = () =&gt; &lt;InputNumber
+    aria-label=&quot;Premium&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    ref={inputRef} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Type Tel</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Numeric keypad on phones through the tel input type</div>
+              <div class="hint">`type=&quot;tel&quot;` brings up the numeric keypad on phones. The field still
+formats and filters the same way; only the underlying input type changes.</div>
+              <pre><code>const TypeTel = () =&gt; &lt;InputNumber
+    aria-label=&quot;NPN&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    type=&quot;tel&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Thousand Separator</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Thousands grouped with commas as the user types</div>
+              <div class="hint">With `thousandSeparator` the integer part is grouped with commas as the
+user types, and the commas are part of what `onChange` reports.</div>
+              <pre><code>const ThousandSeparator = () =&gt; &lt;InputNumber
+    aria-label=&quot;Premium&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    thousandSeparator /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Max Number</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Keystrokes that would exceed a maximum are dropped</div>
+              <div class="hint">`maxNumber` caps the value: a keystroke that would push the number above
+it is dropped, so the field keeps its previous value and `onChange` is not
+called for it.</div>
+              <pre><code>const MaxNumber = () =&gt; &lt;InputNumber
+    aria-label=&quot;Commission rate&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    maxNumber={100} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Leading Zeros</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Leading zeros kept by default, dropped on blur when turned off</div>
+              <div class="hint">Leading zeros are kept by default, as an NPN or a ZIP code needs. With
+`allowLeadingZeros` off they are dropped once the field loses focus, which
+is what an amount wants, and `onChange` reports the trimmed value.</div>
+              <pre><code>const LeadingZeros = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+    &lt;InputNumber
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        aria-label=&quot;ZIP code&quot; /&gt;
+    &lt;InputNumber
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        aria-label=&quot;Amount&quot;
+        allowLeadingZeros={false} /&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Controlled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Controlled field showing a numeric value formatted</div>
+              <div class="hint">A controlled field takes `value` as a number and shows it formatted. The
+state keeps what `onChange` reports, so it holds the formatted text.</div>
+              <pre><code>const Controlled = () =&gt; {
+    const [premium, setPremium] = useState&lt;number | string&gt;(1234);
+
+    return (
+        &lt;InputNumber
+            aria-label=&quot;Premium&quot;
+            thousandSeparator
+            value={premium}
+            onChange={event =&gt; {
+                setPremium(event.target.value);
+                args.onChange?.(event);
+            }} /&gt;
+    );
+};</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Inside Input Group</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Amount with a currency prefix inside an input group</div>
+              <div class="hint">Inside an `InputGroup` the field sits behind a currency affix and the
+frame takes its focus, disabled and invalid states from the input.</div>
+              <pre><code>const InsideInputGroup = () =&gt; &lt;InputGroup.Root&gt;
+    &lt;InputGroup.Text&gt;$&lt;/InputGroup.Text&gt;
+    &lt;InputNumber
+        aria-label=&quot;Premium&quot;
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        thousandSeparator
+        allowLeadingZeros={false}
+        placeholder=&quot;0&quot; /&gt;
+&lt;/InputGroup.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Inside Field Text</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Label, messages and states reaching the input from a FieldText</div>
+              <div class="hint">Inside a `FieldText` the input takes its label, description and states from
+the field. `invalid` on the field sets `aria-invalid`, which paints the
+destructive border, and `disabled` reaches the input the same way.</div>
+              <pre><code>const InsideFieldText = () =&gt; (
+    &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1.5rem&#39; }}&gt;
+        &lt;FieldText required&gt;
+            &lt;Label&gt;NPN&lt;/Label&gt;
+            &lt;InputNumber type=&quot;tel&quot; /&gt;
+            &lt;Field.Description&gt;The 7 to 10 digit National Producer Number.&lt;/Field.Description&gt;
+        &lt;/FieldText&gt;
+        &lt;FieldText invalid&gt;
+            &lt;Label&gt;Years in business&lt;/Label&gt;
+            &lt;InputNumber defaultValue={150} /&gt;
+            &lt;Field.Error errors={[{ message: &#39;Enter at most 100 years.&#39; }]} /&gt;
+        &lt;/FieldText&gt;
+        &lt;FieldText disabled&gt;
+            &lt;Label&gt;Agency code&lt;/Label&gt;
+            &lt;InputNumber defaultValue=&quot;00412&quot; /&gt;
+        &lt;/FieldText&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 field with a formatted value</div>
+              <div class="hint">A disabled field keeps its formatted value and takes no input.</div>
+              <pre><code>const Disabled = () =&gt; &lt;InputNumber
+    aria-label=&quot;Premium&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    disabled
+    thousandSeparator
+    defaultValue={12500} /&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">`aria-invalid` paints the destructive border, the same way it does on a
+plain `Input`.</div>
+              <pre><code>const Invalid = () =&gt; &lt;InputNumber
+    aria-label=&quot;Premium&quot;
+    onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+    aria-invalid
+    defaultValue={0} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">All Sizes</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>The three sizes side by side</div>
+              <div class="hint">The three sizes match Input&#39;s: 32, 40 or 48px tall.</div>
+              <pre><code>const AllSizes = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+    &lt;InputNumber
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        thousandSeparator
+        defaultValue={1234}
+        size=&quot;sm&quot;
+        aria-label=&quot;Small&quot; /&gt;
+    &lt;InputNumber
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        thousandSeparator
+        defaultValue={1234}
+        size=&quot;md&quot;
+        aria-label=&quot;Medium&quot; /&gt;
+    &lt;InputNumber
+        onChange={fn((event: ChangeEvent&lt;HTMLInputElement&gt;) =&gt; event.target.value)}
+        thousandSeparator
+        defaultValue={1234}
+        size=&quot;lg&quot;
+        aria-label=&quot;Large&quot; /&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -7711,9 +8032,9 @@ button&#39;s start corners with the frame.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> InputPassword</h2>
       <div class="badges">
-        <label for="c-20-components-inputpassword-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-21-components-inputpassword-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-20-components-inputpassword-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-21-components-inputpassword-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7734,10 +8055,10 @@ rendered while the input is disabled.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-20-components-inputpassword-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-21-components-inputpassword-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-20-components-inputpassword-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-21-components-inputpassword-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7879,9 +8200,9 @@ the field through the frame. A disabled field removes the toggle too.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> InputSearch</h2>
       <div class="badges">
-        <label for="c-21-components-inputsearch-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-22-components-inputsearch-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-21-components-inputsearch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-22-components-inputsearch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -7904,10 +8225,10 @@ once there is text. It is an `Input` of `type=&quot;search&quot;` inside an
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-21-components-inputsearch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-22-components-inputsearch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-21-components-inputsearch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-22-components-inputsearch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8109,9 +8430,9 @@ several search fields does not read &quot;Clear search&quot; twice.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> InputTel</h2>
       <div class="badges">
-        <label for="c-22-components-inputtel-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-23-components-inputtel-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-22-components-inputtel-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-23-components-inputtel-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -8132,10 +8453,10 @@ with the masked text already in `event.target.value`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-22-components-inputtel-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-23-components-inputtel-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-22-components-inputtel-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-23-components-inputtel-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8373,9 +8694,9 @@ with the input.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Label</h2>
       <div class="badges">
-        <label for="c-23-components-label-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-24-components-label-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-23-components-label-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-24-components-label-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -8395,10 +8716,10 @@ still has to carry `required` / `aria-required`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-23-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-24-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-23-components-label-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-24-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8522,9 +8843,9 @@ field&#39;s control with no `htmlFor`. An explicit `htmlFor` still wins.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Loading</h2>
       <div class="badges">
-        <label for="c-24-components-loading-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-25-components-loading-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-24-components-loading-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-25-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8541,10 +8862,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-24-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-25-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-24-components-loading-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-25-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8695,9 +9016,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-25-components-modal-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-26-components-modal-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-25-components-modal-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-26-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -8743,10 +9064,10 @@ import { Modal } from &#39;@agentero/design-system/modal&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-25-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-26-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-25-components-modal-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-26-components-modal-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8966,9 +9287,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-26-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-27-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-26-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-27-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8998,10 +9319,10 @@ const [page, setPage] = useState(1);
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-26-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-27-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-26-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-27-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9156,9 +9477,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-27-components-popover-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-28-components-popover-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-27-components-popover-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-28-components-popover-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -9187,10 +9508,10 @@ import { Popover } from &#39;@agentero/design-system/popover&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-27-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-28-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-27-components-popover-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-28-components-popover-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9389,9 +9710,9 @@ focus returning to its trigger once the modal closes.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Progress</h2>
       <div class="badges">
-        <label for="c-28-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        <label for="c-29-components-progress-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-28-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-29-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -9410,10 +9731,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-28-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-29-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-28-components-progress-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-29-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9532,7 +9853,7 @@ percentage: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-29-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-30-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -9549,7 +9870,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-29-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-30-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
   
@@ -9645,9 +9966,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-30-components-switch-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-31-components-switch-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-30-components-switch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-31-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -9663,10 +9984,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-30-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-31-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-30-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-31-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9847,9 +10168,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-31-components-table-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-32-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-31-components-table-stories" class="badge ok as-toggle">10 stories</label>
+        <label for="c-32-components-table-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -9880,10 +10201,10 @@ import { Table } from &#39;@agentero/design-system/table&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-31-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-32-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-31-components-table-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-32-components-table-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10101,9 +10422,9 @@ keeps its padding.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tabs.Root</h2>
       <div class="badges">
-        <label for="c-32-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-33-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-32-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-33-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -10134,10 +10455,10 @@ import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-32-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-33-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-32-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-33-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10358,9 +10679,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-33-components-tag-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-34-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-33-components-tag-stories" class="badge ok as-toggle">12 stories</label>
+        <label for="c-34-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -10379,10 +10700,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-33-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-34-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-33-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-34-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10807,9 +11128,9 @@ leading + trailing icons, and icon-only.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> TextArea</h2>
       <div class="badges">
-        <label for="c-34-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-35-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-34-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-35-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -10826,10 +11147,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-34-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-35-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-34-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-35-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10961,9 +11282,9 @@ size and the minimum height shows three rows.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Toast</h2>
       <div class="badges">
-        <label for="c-35-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-36-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-35-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-36-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -10982,10 +11303,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-35-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-36-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-35-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-36-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -11414,9 +11735,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-36-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-37-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-36-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-37-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -11435,10 +11756,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-36-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-37-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-36-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-37-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -11610,9 +11931,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-37-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-38-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-37-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-38-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -11633,10 +11954,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-37-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-38-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-37-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-38-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     

package/mcp/manifests/components.json

@@ -6673,6 +6673,284 @@
       ],
       "import": "import {\n    Button,\n    Divider,\n    DropdownMenu,\n    Field,\n    FieldText,\n    IconKeyboardArrowDown,\n    IconSearch,\n    Input,\n    InputGroup,\n    Label,\n    Tag,\n} from \"@agentero/design-system\";"
     },
+    "components-inputnumber": {
+      "id": "components-inputnumber",
+      "name": "InputNumber",
+      "path": "./src/input-number/input-number.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Numeric input formatting as you type, built on react-number-format"
+        ],
+        "dataAttribute": [
+          "{string} data-slot - Always set to \"input-number\""
+        ],
+        "example": [
+          "<FieldText>\n  <Label>Annual premium</Label>\n  <InputNumber name=\"premium\" thousandSeparator allowLeadingZeros={false} />\n</FieldText>"
+        ]
+      },
+      "description": "InputNumber is a text field that only takes digits and a decimal point and\nformats them as the user types: thousands separators on request, leading\nzeros kept unless turned off, no sign. `onChange` fires with the formatted text in\n`event.target.value`. It is an `Input` driven by `react-number-format`, so\nit takes its label, messages and states from a surrounding `FieldText`.",
+      "summary": "Numeric input formatting as you type, built on react-number-format",
+      "reactComponentMeta": {
+        "displayName": "InputNumber",
+        "exportName": "InputNumber",
+        "filePath": "/home/runner/work/design-system/design-system/src/input-number/input-number.tsx",
+        "description": "InputNumber is a text field that only takes digits and a decimal point and\nformats them as the user types: a thousands separator when\n`thousandSeparator` is set, leading zeros kept unless `allowLeadingZeros` is\noff, no sign, no decimal rounding.\nAnything that is not a digit or the decimal point is ignored, and\n`maxNumber` drops any edit that would exceed it. `onChange` fires with the\nformatted text in `event.target.value` (`\"1,234\"`, not `1234`), which is\nwhat a form library stores; parse it where the number is consumed.\n\nIt is an [Input](?path=/docs/components-input--docs) driven by\n`react-number-format`, so it keeps the caret in place while it reformats\nand takes its wiring from a surrounding `FieldText` as a plain `Input`\ndoes. Every standard `<input>` attribute is accepted and forwarded, such as\n`placeholder`, `required`, `maxLength` or `aria-invalid`; `type` is limited\nto `text`, `tel` and `password`, and `value` and `defaultValue` also take a\nnumber or `null`. The invalid state comes from `aria-invalid`, which paints\nthe destructive border. Place it inside an\n[InputGroup](?path=/docs/components-inputgroup--docs) to show a currency or\nunit affix.\n\nDo not use it for a phone number, which is formatted by `InputTel`, nor for\nfree text with some digits in it, which is a plain `Input`. It is not a\n`type=\"number\"` input on purpose: that one drops leading zeros and cannot\nshow separators, which identifiers and amounts both need.\n\nIt renders from `value`, not from the DOM, so bind it to a form through a\ncontrolled value (react-hook-form's `Controller` or `useController`), not\nthrough `register`: a value `register` writes into the `<input>`, such as a\ndefault or a `reset`, is wiped on the next render.",
+        "jsDocTags": {
+          "summary": [
+            "Numeric input formatting as you type, built on react-number-format"
+          ],
+          "dataAttribute": [
+            "{string} data-slot - Always set to \"input-number\""
+          ],
+          "example": [
+            "<FieldText>\n  <Label>Annual premium</Label>\n  <InputNumber name=\"premium\" thousandSeparator allowLeadingZeros={false} />\n</FieldText>"
+          ]
+        },
+        "props": {
+          "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"
+              }
+            ]
+          },
+          "maxNumber": {
+            "name": "maxNumber",
+            "required": false,
+            "type": {
+              "name": "number"
+            },
+            "description": "Highest value the field accepts. A keystroke or paste that would take\nthe number above it is dropped before it reaches the field, so `onChange`\nis not called for it. No limit by default.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "thousandSeparator": {
+            "name": "thousandSeparator",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Groups the integer part in thousands with a comma as the user types\n(`1,234,567`). The separators are part of `event.target.value`. Defaults\nto `false`.",
+            "defaultValue": {
+              "value": "false"
+            },
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "allowLeadingZeros": {
+            "name": "allowLeadingZeros",
+            "required": false,
+            "type": {
+              "name": "boolean"
+            },
+            "description": "Keeps zeros typed in front of the number (`007`), which an identifier\nsuch as an NPN or a ZIP code needs. Set it to `false` for an amount, so\n`007` becomes `7` once the field loses focus, and `onChange` fires with\nthe trimmed value. Defaults to `true`.",
+            "defaultValue": {
+              "value": "true"
+            },
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "type": {
+            "name": "type",
+            "required": false,
+            "type": {
+              "name": "enum",
+              "raw": "\"text\" | \"tel\" | \"password\"",
+              "value": [
+                {
+                  "value": "\"text\""
+                },
+                {
+                  "value": "\"tel\""
+                },
+                {
+                  "value": "\"password\""
+                }
+              ]
+            },
+            "description": "The underlying `<input>` type. Defaults to `'text'`.\n- `text` — the general case.\n- `tel` — brings up the numeric keypad on phones, for codes and\n  identifiers that are digits only.\n- `password` — masks the digits, for a PIN.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "value": {
+            "name": "value",
+            "required": false,
+            "type": {
+              "name": "string | number | null | undefined"
+            },
+            "description": "The number to show, as a number or as a string of digits. It is displayed\nformatted according to `thousandSeparator`. `null` and `''` both clear the\nfield.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          },
+          "defaultValue": {
+            "name": "defaultValue",
+            "required": false,
+            "type": {
+              "name": "string | number | null | undefined"
+            },
+            "description": "Initial value of an uncontrolled field, in the same forms as `value`.",
+            "defaultValue": null,
+            "parent": {
+              "name": "InputNumberProps",
+              "fileName": "src/input-number/input-number.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/input-number/input-number.tsx"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-inputnumber--default",
+          "name": "Default",
+          "snippet": "const Default = () => <InputNumber\n    aria-label=\"Premium\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    ref={inputRef} />;",
+          "description": "Only digits and a decimal point make it into the field: letters and a minus\nsign are ignored as they are typed. `onChange` reports the text as it is shown, and the `ref`\npoints at the `<input>` element.",
+          "summary": "Numeric field that ignores letters and signs"
+        },
+        {
+          "id": "components-inputnumber--type-tel",
+          "name": "Type Tel",
+          "snippet": "const TypeTel = () => <InputNumber\n    aria-label=\"NPN\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    type=\"tel\" />;",
+          "description": "`type=\"tel\"` brings up the numeric keypad on phones. The field still\nformats and filters the same way; only the underlying input type changes.",
+          "summary": "Numeric keypad on phones through the tel input type"
+        },
+        {
+          "id": "components-inputnumber--thousand-separator",
+          "name": "Thousand Separator",
+          "snippet": "const ThousandSeparator = () => <InputNumber\n    aria-label=\"Premium\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    thousandSeparator />;",
+          "description": "With `thousandSeparator` the integer part is grouped with commas as the\nuser types, and the commas are part of what `onChange` reports.",
+          "summary": "Thousands grouped with commas as the user types"
+        },
+        {
+          "id": "components-inputnumber--max-number",
+          "name": "Max Number",
+          "snippet": "const MaxNumber = () => <InputNumber\n    aria-label=\"Commission rate\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    maxNumber={100} />;",
+          "description": "`maxNumber` caps the value: a keystroke that would push the number above\nit is dropped, so the field keeps its previous value and `onChange` is not\ncalled for it.",
+          "summary": "Keystrokes that would exceed a maximum are dropped"
+        },
+        {
+          "id": "components-inputnumber--leading-zeros",
+          "name": "Leading Zeros",
+          "snippet": "const LeadingZeros = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        aria-label=\"ZIP code\" />\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        aria-label=\"Amount\"\n        allowLeadingZeros={false} />\n</div>;",
+          "description": "Leading zeros are kept by default, as an NPN or a ZIP code needs. With\n`allowLeadingZeros` off they are dropped once the field loses focus, which\nis what an amount wants, and `onChange` reports the trimmed value.",
+          "summary": "Leading zeros kept by default, dropped on blur when turned off"
+        },
+        {
+          "id": "components-inputnumber--controlled",
+          "name": "Controlled",
+          "snippet": "const Controlled = () => {\n    const [premium, setPremium] = useState<number | string>(1234);\n\n    return (\n        <InputNumber\n            aria-label=\"Premium\"\n            thousandSeparator\n            value={premium}\n            onChange={event => {\n                setPremium(event.target.value);\n                args.onChange?.(event);\n            }} />\n    );\n};",
+          "description": "A controlled field takes `value` as a number and shows it formatted. The\nstate keeps what `onChange` reports, so it holds the formatted text.",
+          "summary": "Controlled field showing a numeric value formatted"
+        },
+        {
+          "id": "components-inputnumber--inside-input-group",
+          "name": "Inside Input Group",
+          "snippet": "const InsideInputGroup = () => <InputGroup.Root>\n    <InputGroup.Text>$</InputGroup.Text>\n    <InputNumber\n        aria-label=\"Premium\"\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        thousandSeparator\n        allowLeadingZeros={false}\n        placeholder=\"0\" />\n</InputGroup.Root>;",
+          "description": "Inside an `InputGroup` the field sits behind a currency affix and the\nframe takes its focus, disabled and invalid states from the input.",
+          "summary": "Amount with a currency prefix inside an input group"
+        },
+        {
+          "id": "components-inputnumber--inside-field-text",
+          "name": "Inside Field Text",
+          "snippet": "const InsideFieldText = () => (\n    <div style={{ display: 'grid', gap: '1.5rem' }}>\n        <FieldText required>\n            <Label>NPN</Label>\n            <InputNumber type=\"tel\" />\n            <Field.Description>The 7 to 10 digit National Producer Number.</Field.Description>\n        </FieldText>\n        <FieldText invalid>\n            <Label>Years in business</Label>\n            <InputNumber defaultValue={150} />\n            <Field.Error errors={[{ message: 'Enter at most 100 years.' }]} />\n        </FieldText>\n        <FieldText disabled>\n            <Label>Agency code</Label>\n            <InputNumber defaultValue=\"00412\" />\n        </FieldText>\n    </div>\n);",
+          "description": "Inside a `FieldText` the input takes its label, description and states from\nthe field. `invalid` on the field sets `aria-invalid`, which paints the\ndestructive border, and `disabled` reaches the input the same way.",
+          "summary": "Label, messages and states reaching the input from a FieldText"
+        },
+        {
+          "id": "components-inputnumber--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <InputNumber\n    aria-label=\"Premium\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    disabled\n    thousandSeparator\n    defaultValue={12500} />;",
+          "description": "A disabled field keeps its formatted value and takes no input.",
+          "summary": "Disabled field with a formatted value"
+        },
+        {
+          "id": "components-inputnumber--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => <InputNumber\n    aria-label=\"Premium\"\n    onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n    aria-invalid\n    defaultValue={0} />;",
+          "description": "`aria-invalid` paints the destructive border, the same way it does on a\nplain `Input`.",
+          "summary": "Invalid state driven by aria-invalid"
+        },
+        {
+          "id": "components-inputnumber--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        thousandSeparator\n        defaultValue={1234}\n        size=\"sm\"\n        aria-label=\"Small\" />\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        thousandSeparator\n        defaultValue={1234}\n        size=\"md\"\n        aria-label=\"Medium\" />\n    <InputNumber\n        onChange={fn((event: ChangeEvent<HTMLInputElement>) => event.target.value)}\n        thousandSeparator\n        defaultValue={1234}\n        size=\"lg\"\n        aria-label=\"Large\" />\n</div>;",
+          "description": "The three sizes match Input's: 32, 40 or 48px tall.",
+          "summary": "The three sizes side by side"
+        }
+      ],
+      "import": "import { Controller, Field, FieldText, InputContext, InputGroup, InputNumber, Label } from \"@agentero/design-system\";"
+    },
     "components-inputpassword": {
       "id": "components-inputpassword",
       "name": "InputPassword",
@@ -10223,6 +10501,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3866
+    "durationMs": 5136
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.35.1",
+	"version": "0.36.0",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",
@@ -97,6 +97,10 @@
 			"types": "./src/input-group/index.d.ts",
 			"import": "./src/input-group/index.js"
 		},
+		"./input-number": {
+			"types": "./src/input-number/index.d.ts",
+			"import": "./src/input-number/index.js"
+		},
 		"./input-password": {
 			"types": "./src/input-password/index.d.ts",
 			"import": "./src/input-password/index.js"
@@ -214,6 +218,7 @@
 		"@radix-ui/react-tooltip": "^1.2.11",
 		"clsx": "^2.1.1",
 		"cmdk": "^1.1.1",
+		"react-number-format": "5.4.5",
 		"sonner": "^2.0.7",
 		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2",

package/src/input/context.d.ts

@@ -6,12 +6,21 @@ import { InputProps } from './input';
  * and `ref`. An `Input` with no provider above it reads `null` and uses only
  * its own props.
  */
-export declare const InputContext: import('react').Context<Partial<InputProps> | null>;
+export type InputContextValue = Pick<InputProps, 'id' | 'aria-describedby' | 'aria-invalid' | 'required' | 'disabled' | 'readOnly' | 'name' | 'onChange' | 'onBlur' | 'ref'> & {
+    value?: string | number;
+};
+export declare const InputContext: import('react').Context<InputContextValue | null>;
 /**
  * Merges the surrounding `InputContext`, if any, under the input's own props.
  * Own props win; handlers present on both sides are chained and
  * `aria-describedby` ids are concatenated. In development it warns when the
  * input carries an `id` that differs from the one the container provides,
  * since the label would then point elsewhere.
+ *
+ * Generic over the props so a wrapper whose props narrow or widen the
+ * input's (a `type` limited to a few values, a `value` that takes `null`)
+ * gets its own type back, with the context's wiring merged in. The props must
+ * accept everything the context can carry; when they do not, `props` resolves
+ * to `never` and the call does not compile.
  */
-export declare const useInputContext: (props: InputProps) => InputProps;
+export declare const useInputContext: <P extends Pick<InputProps, "id">>(props: P & (InputContextValue extends Partial<P> ? unknown : never)) => P;

package/src/input/index.d.ts

@@ -1,3 +1,4 @@
 export { InputContext, useInputContext } from './context';
+export type { InputContextValue } from './context';
 export { Input, inputRecipe } from './input';
 export type { InputProps, InputSize, InputVariants } from './input';

package/src/input-number/index.d.ts

@@ -0,0 +1,2 @@
+export { InputNumber } from './input-number';
+export type { InputNumberProps } from './input-number';

package/src/input-number/index.js

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

package/src/input-number/input-number.d.ts

@@ -0,0 +1,82 @@
+import { InputProps } from '../input';
+export type InputNumberProps = Omit<InputProps, 'type' | 'value' | 'defaultValue'> & {
+    /**
+     * Highest value the field accepts. A keystroke or paste that would take
+     * the number above it is dropped before it reaches the field, so `onChange`
+     * is not called for it. No limit by default.
+     */
+    maxNumber?: number;
+    /**
+     * Groups the integer part in thousands with a comma as the user types
+     * (`1,234,567`). The separators are part of `event.target.value`. Defaults
+     * to `false`.
+     */
+    thousandSeparator?: boolean;
+    /**
+     * Keeps zeros typed in front of the number (`007`), which an identifier
+     * such as an NPN or a ZIP code needs. Set it to `false` for an amount, so
+     * `007` becomes `7` once the field loses focus, and `onChange` fires with
+     * the trimmed value. Defaults to `true`.
+     */
+    allowLeadingZeros?: boolean;
+    /**
+     * The underlying `<input>` type. Defaults to `'text'`.
+     * - `text` — the general case.
+     * - `tel` — brings up the numeric keypad on phones, for codes and
+     *   identifiers that are digits only.
+     * - `password` — masks the digits, for a PIN.
+     */
+    type?: 'password' | 'tel' | 'text';
+    /**
+     * The number to show, as a number or as a string of digits. It is displayed
+     * formatted according to `thousandSeparator`. `null` and `''` both clear the
+     * field.
+     */
+    value?: number | string | null;
+    /** Initial value of an uncontrolled field, in the same forms as `value`. */
+    defaultValue?: number | string | null;
+};
+/**
+ * InputNumber is a text field that only takes digits and a decimal point and
+ * formats them as the user types: a thousands separator when
+ * `thousandSeparator` is set, leading zeros kept unless `allowLeadingZeros` is
+ * off, no sign, no decimal rounding.
+ * Anything that is not a digit or the decimal point is ignored, and
+ * `maxNumber` drops any edit that would exceed it. `onChange` fires with the
+ * formatted text in `event.target.value` (`"1,234"`, not `1234`), which is
+ * what a form library stores; parse it where the number is consumed.
+ *
+ * It is an [Input](?path=/docs/components-input--docs) driven by
+ * `react-number-format`, so it keeps the caret in place while it reformats
+ * and takes its wiring from a surrounding `FieldText` as a plain `Input`
+ * does. Every standard `<input>` attribute is accepted and forwarded, such as
+ * `placeholder`, `required`, `maxLength` or `aria-invalid`; `type` is limited
+ * to `text`, `tel` and `password`, and `value` and `defaultValue` also take a
+ * number or `null`. The invalid state comes from `aria-invalid`, which paints
+ * the destructive border. Place it inside an
+ * [InputGroup](?path=/docs/components-inputgroup--docs) to show a currency or
+ * unit affix.
+ *
+ * Do not use it for a phone number, which is formatted by `InputTel`, nor for
+ * free text with some digits in it, which is a plain `Input`. It is not a
+ * `type="number"` input on purpose: that one drops leading zeros and cannot
+ * show separators, which identifiers and amounts both need.
+ *
+ * It renders from `value`, not from the DOM, so bind it to a form through a
+ * controlled value (react-hook-form's `Controller` or `useController`), not
+ * through `register`: a value `register` writes into the `<input>`, such as a
+ * default or a `reset`, is wiped on the next render.
+ *
+ * @summary Numeric input formatting as you type, built on react-number-format
+ * @dataAttribute {string} data-slot - Always set to "input-number"
+ *
+ * @example
+ * <FieldText>
+ *   <Label>Annual premium</Label>
+ *   <InputNumber name="premium" thousandSeparator allowLeadingZeros={false} />
+ * </FieldText>
+ */
+export declare const InputNumber: {
+    (props: InputNumberProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/input-number/input-number.js

@@ -0,0 +1,33 @@
+"use client";
+import { InputContext as e, useInputContext as t } from "../input/context.js";
+import { Input as n } from "../input/input.js";
+import { jsx as r } from "react/jsx-runtime";
+import { NumericFormat as i } from "react-number-format";
+//#region src/input-number/input-number.tsx
+var a = (t) => /* @__PURE__ */ r(e, {
+	value: null,
+	children: /* @__PURE__ */ r(n, {
+		"data-slot": "input-number",
+		...t
+	})
+}), o = (e) => {
+	let { ref: n, maxNumber: o, thousandSeparator: s = !1, allowLeadingZeros: c = !0, onChange: l, ...u } = t(e);
+	return /* @__PURE__ */ r(i, {
+		...u,
+		customInput: a,
+		getInputRef: n,
+		thousandSeparator: s,
+		allowLeadingZeros: c,
+		allowNegative: !1,
+		onChange: l,
+		onValueChange: ({ formattedValue: e }, { event: t, source: n }) => {
+			if (n !== "event" || t?.type !== "blur") return;
+			let r = t.target;
+			r.value = e, l?.(Object.assign(Object.create(t), t, { type: "change" }));
+		},
+		isAllowed: ({ floatValue: e }) => o === void 0 || e === void 0 || e <= o
+	});
+};
+o.displayName = "InputNumber";
+//#endregion
+export { o as InputNumber };