@agentero/design-system 0.31.7 → 0.32.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">33 components ok</span><span class="filter-pill ok" aria-disabled="true">266 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">34 components ok</span><span class="filter-pill ok" aria-disabled="true">279 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.7s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>5.2s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -7045,6 +7045,333 @@ they cannot change.</div>
         </div>
     
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="InputGroup.Root">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> InputGroup.Root</h2>
+      <div class="badges">
+        
+        
+        <label for="c-18-components-inputgroup-stories" class="badge ok as-toggle">13 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/input-group/input-group.stories.tsx">components-inputgroup · ./src/input-group/input-group.stories.tsx</div>
+    <div>Bordered frame drawing an Input and its addons as one control</div>
+    <div class="hint">InputGroup draws an `Input` and what sits beside it — an icon, a currency or
+unit affix, a trailing action — as one bordered control. The frame owns the
+border, the shadow and the focus ring; the `Input` inside renders bare and
+hands its state to the frame through `:has()`, so focus, `disabled`,
+`aria-invalid` and `size` are never wired by hand. Inside a `FieldText` the
+`Input` keeps taking its label and messages from the field.</div>
+    <div class="kv"><span class="chip">summary: Bordered frame drawing an Input and its addons as one control</span><span class="chip">dataAttribute: {string} data-slot - Always set to &quot;input-group&quot;</span><span class="chip">example: &lt;InputGroup.Root&gt;
+  &lt;InputGroup.Text&gt;$&lt;/InputGroup.Text&gt;
+  &lt;Input inputMode=&quot;decimal&quot; placeholder=&quot;0.00&quot; /&gt;
+  &lt;InputGroup.Text&gt;USD&lt;/InputGroup.Text&gt;
+&lt;/InputGroup.Root&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-18-components-inputgroup-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  
+
+  <div class="panels">
+    
+    
+    
+    
+        <div class="panel panel-stories">
+          
+          
+          
+          <div class="note ok">
+                <div class="row">
+                  <span class="ex-name">Imports</span>
+                </div>
+                <pre><code>import {
+    Button,
+    Divider,
+    DropdownMenu,
+    Field,
+    FieldText,
+    IconCancel,
+    IconKeyboardArrowDown,
+    IconSearch,
+    Input,
+    InputGroup,
+    Label,
+    Tag,
+} 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>Leading icon addon with the frame drawing the focus ring</div>
+              <div class="hint">A search field: the icon leads and the input takes the rest of the frame.
+Pressing the icon focuses the input, and the frame — not the input — draws the
+focus ring, so the two never show a double border.</div>
+              <pre><code>const Default = () =&gt; (
+    &lt;InputGroup.Root&gt;
+        &lt;InputGroup.Addon&gt;
+            &lt;IconSearch /&gt;
+        &lt;/InputGroup.Addon&gt;
+        &lt;Input type=&quot;search&quot; placeholder=&quot;Search agencies&quot; aria-label=&quot;Search agencies&quot; /&gt;
+    &lt;/InputGroup.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Text Affixes</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Currency prefix and unit suffix around an amount</div>
+              <div class="hint">Text affixes on both sides. They are decoration only — a screen reader does
+not read them as part of the value — so the unit is also in the label.</div>
+              <pre><code>const TextAffixes = () =&gt; (
+    &lt;InputGroup.Root&gt;
+        &lt;InputGroup.Text&gt;$&lt;/InputGroup.Text&gt;
+        &lt;Input inputMode=&quot;decimal&quot; placeholder=&quot;0.00&quot; aria-label=&quot;Premium in US dollars&quot; /&gt;
+        &lt;InputGroup.Text&gt;USD&lt;/InputGroup.Text&gt;
+    &lt;/InputGroup.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Divider</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Protocol prefix and domain suffix split off by vertical dividers</div>
+              <div class="hint">A `Divider` separates an affix from the value when it reads as a distinct
+segment, like a protocol before a domain. It spans the full height of the
+frame, meeting its border at both ends.</div>
+              <pre><code>const WithDivider = () =&gt; (
+    &lt;InputGroup.Root&gt;
+        &lt;InputGroup.Text&gt;https://&lt;/InputGroup.Text&gt;
+        &lt;Divider orientation=&quot;vertical&quot; /&gt;
+        &lt;Input
+            type=&quot;text&quot;
+            inputMode=&quot;url&quot;
+            autoCapitalize=&quot;none&quot;
+            placeholder=&quot;www.agentero&quot;
+            aria-label=&quot;Agency website&quot;
+        /&gt;
+        &lt;Divider orientation=&quot;vertical&quot; /&gt;
+        &lt;InputGroup.Text&gt;.com&lt;/InputGroup.Text&gt;
+    &lt;/InputGroup.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Tags</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Leading and trailing tags tucked into the frame&#39;s padding</div>
+              <div class="hint">A `Tag` in an addon labels what the value is. It tucks into the frame&#39;s
+padding on the side it touches and takes a tighter radius, so it sits inside
+the corner instead of competing with it.</div>
+              <pre><code>const WithTags = () =&gt; (
+    &lt;div className=&quot;flex flex-col gap-4&quot;&gt;
+        &lt;InputGroup.Root&gt;
+            &lt;InputGroup.Addon&gt;
+                &lt;Tag color=&quot;informative&quot;&gt;FEIN&lt;/Tag&gt;
+            &lt;/InputGroup.Addon&gt;
+            &lt;Input placeholder=&quot;XX-XXXXXXX&quot; aria-label=&quot;FEIN&quot; /&gt;
+        &lt;/InputGroup.Root&gt;
+        &lt;InputGroup.Root&gt;
+            &lt;InputGroup.Addon&gt;
+                &lt;IconSearch /&gt;
+            &lt;/InputGroup.Addon&gt;
+            &lt;Input placeholder=&quot;Describe your filters&quot; aria-label=&quot;Describe your filters&quot; /&gt;
+            &lt;InputGroup.Addon&gt;
+                &lt;Tag color=&quot;informative&quot;&gt;Beta&lt;/Tag&gt;
+            &lt;/InputGroup.Addon&gt;
+        &lt;/InputGroup.Root&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Button</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              
+              <pre><code>const WithButton = () =&gt; (
+    &lt;InputGroup.Root&gt;
+        &lt;Input value=&quot;https://agentero.com/r/abc123&quot; readOnly aria-label=&quot;Referral link&quot; /&gt;
+        &lt;Divider orientation=&quot;vertical&quot; /&gt;
+        &lt;InputGroup.Addon variant=&quot;action&quot;&gt;
+            &lt;Button type=&quot;button&quot; variant=&quot;ghost&quot; size=&quot;md&quot; onClick={handleCopy}&gt;
+                Copy link
+            &lt;/Button&gt;
+        &lt;/InputGroup.Addon&gt;
+    &lt;/InputGroup.Root&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 input greying out the frame and its addons</div>
+              <div class="hint">`disabled` on the input greys out the whole frame — background, border, icon
+and affix — and the frame stops offering the text cursor.</div>
+              <pre><code>const Disabled = () =&gt; (
+    &lt;InputGroup.Root&gt;
+        &lt;InputGroup.Addon&gt;
+            &lt;IconSearch /&gt;
+        &lt;/InputGroup.Addon&gt;
+        &lt;Input placeholder=&quot;Search agencies&quot; aria-label=&quot;Search agencies&quot; disabled /&gt;
+        &lt;InputGroup.Text&gt;USD&lt;/InputGroup.Text&gt;
+    &lt;/InputGroup.Root&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 input driving the frame&#39;s destructive border</div>
+              <div class="hint">`aria-invalid` on the input moves the destructive border to the frame, and
+the ring follows it on focus.</div>
+              <pre><code>const Invalid = () =&gt; (
+    &lt;InputGroup.Root&gt;
+        &lt;InputGroup.Text&gt;$&lt;/InputGroup.Text&gt;
+        &lt;Input defaultValue=&quot;-40&quot; aria-invalid aria-label=&quot;Premium in US dollars&quot; /&gt;
+    &lt;/InputGroup.Root&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 input sizes inside the frame, heights matching Input</div>
+              <div class="hint">The frame follows the input&#39;s `size`: the same height as a standalone
+`Input` of that size, and the larger corner radius with `lg`.</div>
+              <pre><code>const AllSizes = () =&gt; (
+    &lt;div className=&quot;flex flex-col gap-4&quot;&gt;
+        {SIZES.map(size =&gt; (
+            &lt;InputGroup.Root key={size}&gt;
+                &lt;InputGroup.Addon&gt;
+                    &lt;IconSearch /&gt;
+                &lt;/InputGroup.Addon&gt;
+                &lt;Input size={size} placeholder={`Size ${size}`} aria-label={`Size ${size}`} /&gt;
+            &lt;/InputGroup.Root&gt;
+        ))}
+    &lt;/div&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 and description reaching the input through the frame</div>
+              <div class="hint">Inside a `FieldText` nothing changes for the group: the `Input` reads the
+field&#39;s context at any depth, so the label names it and the description
+describes it with no ids written by hand. The frame is not in the way.</div>
+              <pre><code>const InsideFieldText = () =&gt; (
+    &lt;FieldText required&gt;
+        &lt;Label&gt;Agency website&lt;/Label&gt;
+        &lt;InputGroup.Root&gt;
+            &lt;InputGroup.Text&gt;https://&lt;/InputGroup.Text&gt;
+            &lt;Input type=&quot;text&quot; inputMode=&quot;url&quot; autoCapitalize=&quot;none&quot; placeholder=&quot;www.agentero.com&quot; /&gt;
+        &lt;/InputGroup.Root&gt;
+        &lt;Field.Description&gt;Shown on your public profile.&lt;/Field.Description&gt;
+    &lt;/FieldText&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Search Field</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              
+              <pre><code>const SearchField = () =&gt; (
+    &lt;form onSubmit={handleSearchSubmit}&gt;
+        &lt;FieldStates
+            label=&quot;Agency&quot;
+            tooltip=&quot;Search by agency name or NPN.&quot;
+            required
+            error=&quot;Pick an agency from the list.&quot;&gt;
+            &lt;SearchInput /&gt;
+        &lt;/FieldStates&gt;
+    &lt;/form&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Email Field</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Email field with a leading icon, valid and invalid</div>
+              <div class="hint">The email field from the Portal UI library: a leading icon is all it adds
+to the input.</div>
+              <pre><code>const EmailField = () =&gt; (
+    &lt;FieldStates label=&quot;Email&quot; required error=&quot;Enter a valid email address.&quot;&gt;
+        &lt;InputGroup.Root&gt;
+            &lt;InputGroup.Addon&gt;
+                &lt;IconMail /&gt;
+            &lt;/InputGroup.Addon&gt;
+            &lt;Input type=&quot;email&quot; placeholder=&quot;me@email.com&quot; /&gt;
+        &lt;/InputGroup.Root&gt;
+    &lt;/FieldStates&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Price Field</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Price field with a symbol and a currency picker, valid and invalid</div>
+              <div class="hint">The price field from the Portal UI library: a currency symbol before the
+value and a currency picker after it. The picker is a `DropdownMenu` whose
+trigger fills an `action` addon, so it keeps the frame&#39;s height and an inset
+focus ring.</div>
+              <pre><code>const PriceField = () =&gt; (
+    &lt;FieldStates label=&quot;Price&quot; required error=&quot;Enter a price above zero.&quot;&gt;
+        &lt;PriceInput /&gt;
+    &lt;/FieldStates&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Phone Field</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Phone field with a leading country code picker, valid and invalid</div>
+              <div class="hint">The optional phone field from the Portal UI library: a country code picker
+before the number. The picker leads, so the `action` addon rounds its
+button&#39;s start corners with the frame.</div>
+              <pre><code>const PhoneField = () =&gt; (
+    &lt;FieldStates label=&quot;Phone number&quot; error=&quot;Enter a 10-digit phone number.&quot;&gt;
+        &lt;PhoneInput /&gt;
+    &lt;/FieldStates&gt;
+);</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -7059,9 +7386,9 @@ they cannot change.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Label</h2>
       <div class="badges">
-        <label for="c-18-components-label-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-19-components-label-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-18-components-label-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-19-components-label-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7081,10 +7408,10 @@ still has to carry `required` / `aria-required`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-18-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-19-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-18-components-label-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-19-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7204,9 +7531,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-19-components-loading-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-20-components-loading-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-19-components-loading-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-20-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -7223,10 +7550,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-19-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-20-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-19-components-loading-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-20-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7377,9 +7704,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-20-components-modal-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-21-components-modal-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-20-components-modal-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-21-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -7425,10 +7752,10 @@ import { Modal } from &#39;@agentero/design-system/modal&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-20-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-21-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-20-components-modal-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-21-components-modal-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7648,9 +7975,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-21-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-22-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-21-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-22-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -7680,10 +8007,10 @@ const [page, setPage] = useState(1);
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-21-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-22-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-21-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-22-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7838,9 +8165,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-22-components-popover-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-23-components-popover-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-22-components-popover-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-23-components-popover-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7869,10 +8196,10 @@ import { Popover } from &#39;@agentero/design-system/popover&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-22-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-23-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-22-components-popover-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-23-components-popover-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8071,9 +8398,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-23-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        <label for="c-24-components-progress-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-23-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-24-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8092,10 +8419,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-23-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-24-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-23-components-progress-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-24-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8214,7 +8541,7 @@ percentage: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-24-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-25-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8231,7 +8558,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-24-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-25-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
   
@@ -8327,9 +8654,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-25-components-switch-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-26-components-switch-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-25-components-switch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-26-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8345,10 +8672,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-25-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-26-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-25-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-26-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8529,9 +8856,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-26-components-table-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-27-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-26-components-table-stories" class="badge ok as-toggle">10 stories</label>
+        <label for="c-27-components-table-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -8562,10 +8889,10 @@ import { Table } from &#39;@agentero/design-system/table&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-26-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-27-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-26-components-table-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-27-components-table-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8783,9 +9110,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-27-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-28-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-27-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-28-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -8816,10 +9143,10 @@ import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-27-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-28-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-27-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-28-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9040,9 +9367,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-28-components-tag-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-29-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-28-components-tag-stories" class="badge ok as-toggle">12 stories</label>
+        <label for="c-29-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -9061,10 +9388,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-28-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-29-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-28-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-29-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9489,9 +9816,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-29-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-30-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-29-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-30-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -9508,10 +9835,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-29-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-30-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-29-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-30-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9643,9 +9970,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-30-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-31-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-30-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-31-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -9664,10 +9991,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-30-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-31-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-30-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-31-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10096,9 +10423,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-31-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-32-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-31-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-32-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -10117,10 +10444,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-31-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-32-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-31-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-32-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10292,9 +10619,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-32-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-33-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-32-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-33-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -10315,10 +10642,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-32-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-33-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-32-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-33-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     

package/mcp/manifests/components.json

@@ -6460,6 +6460,132 @@
       ],
       "import": "import { Avatar, Button, HoverCard } from \"@agentero/design-system\";"
     },
+    "components-inputgroup": {
+      "id": "components-inputgroup",
+      "name": "InputGroup.Root",
+      "path": "./src/input-group/input-group.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Bordered frame drawing an Input and its addons as one control"
+        ],
+        "dataAttribute": [
+          "{string} data-slot - Always set to \"input-group\""
+        ],
+        "example": [
+          "<InputGroup.Root>\n  <InputGroup.Text>$</InputGroup.Text>\n  <Input inputMode=\"decimal\" placeholder=\"0.00\" />\n  <InputGroup.Text>USD</InputGroup.Text>\n</InputGroup.Root>"
+        ]
+      },
+      "description": "InputGroup draws an `Input` and what sits beside it — an icon, a currency or\nunit affix, a trailing action — as one bordered control. The frame owns the\nborder, the shadow and the focus ring; the `Input` inside renders bare and\nhands its state to the frame through `:has()`, so focus, `disabled`,\n`aria-invalid` and `size` are never wired by hand. Inside a `FieldText` the\n`Input` keeps taking its label and messages from the field.",
+      "summary": "Bordered frame drawing an Input and its addons as one control",
+      "reactComponentMeta": {
+        "displayName": "InputGroup.Root",
+        "exportName": "InputGroup",
+        "filePath": "/home/runner/work/design-system/design-system/src/input-group/index.ts",
+        "description": "The bordered frame of an input group: one box around an `Input` and its\naddons, drawn as a single control. It carries the border, the shadow, the\nfocus ring and the horizontal padding; the `Input` inside renders bare and\ngives the frame its state — focus, `disabled`, `aria-invalid` and `size`\nall propagate through `:has()`, so nothing is passed to the frame by hand.\n\nPut the `Input` and any `InputGroup.Addon` or `InputGroup.Text` inside, in\nreading order. Inside a `FieldText` the `Input` still takes its label and\nmessages from the field, at any depth; the frame needs nothing.\n\nUse it for an input with a leading icon, a currency or unit affix, or a\ntrailing action. A plain input with nothing around it is just `Input`, and a\nbutton beside an input that submits on its own is a form layout, not a group.\nNot a `role=\"group\"`, like `Field`.",
+        "jsDocTags": {
+          "summary": [
+            "Bordered frame drawing an Input and its addons as one control"
+          ],
+          "dataAttribute": [
+            "{string} data-slot - Always set to \"input-group\""
+          ],
+          "example": [
+            "<InputGroup.Root>\n  <InputGroup.Text>$</InputGroup.Text>\n  <Input inputMode=\"decimal\" placeholder=\"0.00\" />\n  <InputGroup.Text>USD</InputGroup.Text>\n</InputGroup.Root>"
+          ]
+        },
+        "props": {}
+      },
+      "stories": [
+        {
+          "id": "components-inputgroup--default",
+          "name": "Default",
+          "snippet": "const Default = () => (\n    <InputGroup.Root>\n        <InputGroup.Addon>\n            <IconSearch />\n        </InputGroup.Addon>\n        <Input type=\"search\" placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n    </InputGroup.Root>\n);",
+          "description": "A search field: the icon leads and the input takes the rest of the frame.\nPressing the icon focuses the input, and the frame — not the input — draws the\nfocus ring, so the two never show a double border.",
+          "summary": "Leading icon addon with the frame drawing the focus ring"
+        },
+        {
+          "id": "components-inputgroup--text-affixes",
+          "name": "Text Affixes",
+          "snippet": "const TextAffixes = () => (\n    <InputGroup.Root>\n        <InputGroup.Text>$</InputGroup.Text>\n        <Input inputMode=\"decimal\" placeholder=\"0.00\" aria-label=\"Premium in US dollars\" />\n        <InputGroup.Text>USD</InputGroup.Text>\n    </InputGroup.Root>\n);",
+          "description": "Text affixes on both sides. They are decoration only — a screen reader does\nnot read them as part of the value — so the unit is also in the label.",
+          "summary": "Currency prefix and unit suffix around an amount"
+        },
+        {
+          "id": "components-inputgroup--with-divider",
+          "name": "With Divider",
+          "snippet": "const WithDivider = () => (\n    <InputGroup.Root>\n        <InputGroup.Text>https://</InputGroup.Text>\n        <Divider orientation=\"vertical\" />\n        <Input\n            type=\"text\"\n            inputMode=\"url\"\n            autoCapitalize=\"none\"\n            placeholder=\"www.agentero\"\n            aria-label=\"Agency website\"\n        />\n        <Divider orientation=\"vertical\" />\n        <InputGroup.Text>.com</InputGroup.Text>\n    </InputGroup.Root>\n);",
+          "description": "A `Divider` separates an affix from the value when it reads as a distinct\nsegment, like a protocol before a domain. It spans the full height of the\nframe, meeting its border at both ends.",
+          "summary": "Protocol prefix and domain suffix split off by vertical dividers"
+        },
+        {
+          "id": "components-inputgroup--with-tags",
+          "name": "With Tags",
+          "snippet": "const WithTags = () => (\n    <div className=\"flex flex-col gap-4\">\n        <InputGroup.Root>\n            <InputGroup.Addon>\n                <Tag color=\"informative\">FEIN</Tag>\n            </InputGroup.Addon>\n            <Input placeholder=\"XX-XXXXXXX\" aria-label=\"FEIN\" />\n        </InputGroup.Root>\n        <InputGroup.Root>\n            <InputGroup.Addon>\n                <IconSearch />\n            </InputGroup.Addon>\n            <Input placeholder=\"Describe your filters\" aria-label=\"Describe your filters\" />\n            <InputGroup.Addon>\n                <Tag color=\"informative\">Beta</Tag>\n            </InputGroup.Addon>\n        </InputGroup.Root>\n    </div>\n);",
+          "description": "A `Tag` in an addon labels what the value is. It tucks into the frame's\npadding on the side it touches and takes a tighter radius, so it sits inside\nthe corner instead of competing with it.",
+          "summary": "Leading and trailing tags tucked into the frame's padding"
+        },
+        {
+          "id": "components-inputgroup--with-button",
+          "name": "With Button",
+          "snippet": "const WithButton = () => (\n    <InputGroup.Root>\n        <Input value=\"https://agentero.com/r/abc123\" readOnly aria-label=\"Referral link\" />\n        <Divider orientation=\"vertical\" />\n        <InputGroup.Addon variant=\"action\">\n            <Button type=\"button\" variant=\"ghost\" size=\"md\" onClick={handleCopy}>\n                Copy link\n            </Button>\n        </InputGroup.Addon>\n    </InputGroup.Root>\n);"
+        },
+        {
+          "id": "components-inputgroup--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => (\n    <InputGroup.Root>\n        <InputGroup.Addon>\n            <IconSearch />\n        </InputGroup.Addon>\n        <Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" disabled />\n        <InputGroup.Text>USD</InputGroup.Text>\n    </InputGroup.Root>\n);",
+          "description": "`disabled` on the input greys out the whole frame — background, border, icon\nand affix — and the frame stops offering the text cursor.",
+          "summary": "Disabled input greying out the frame and its addons"
+        },
+        {
+          "id": "components-inputgroup--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => (\n    <InputGroup.Root>\n        <InputGroup.Text>$</InputGroup.Text>\n        <Input defaultValue=\"-40\" aria-invalid aria-label=\"Premium in US dollars\" />\n    </InputGroup.Root>\n);",
+          "description": "`aria-invalid` on the input moves the destructive border to the frame, and\nthe ring follows it on focus.",
+          "summary": "Invalid input driving the frame's destructive border"
+        },
+        {
+          "id": "components-inputgroup--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => (\n    <div className=\"flex flex-col gap-4\">\n        {SIZES.map(size => (\n            <InputGroup.Root key={size}>\n                <InputGroup.Addon>\n                    <IconSearch />\n                </InputGroup.Addon>\n                <Input size={size} placeholder={`Size ${size}`} aria-label={`Size ${size}`} />\n            </InputGroup.Root>\n        ))}\n    </div>\n);",
+          "description": "The frame follows the input's `size`: the same height as a standalone\n`Input` of that size, and the larger corner radius with `lg`.",
+          "summary": "The three input sizes inside the frame, heights matching Input"
+        },
+        {
+          "id": "components-inputgroup--inside-field-text",
+          "name": "Inside Field Text",
+          "snippet": "const InsideFieldText = () => (\n    <FieldText required>\n        <Label>Agency website</Label>\n        <InputGroup.Root>\n            <InputGroup.Text>https://</InputGroup.Text>\n            <Input type=\"text\" inputMode=\"url\" autoCapitalize=\"none\" placeholder=\"www.agentero.com\" />\n        </InputGroup.Root>\n        <Field.Description>Shown on your public profile.</Field.Description>\n    </FieldText>\n);",
+          "description": "Inside a `FieldText` nothing changes for the group: the `Input` reads the\nfield's context at any depth, so the label names it and the description\ndescribes it with no ids written by hand. The frame is not in the way.",
+          "summary": "Label and description reaching the input through the frame"
+        },
+        {
+          "id": "components-inputgroup--search-field",
+          "name": "Search Field",
+          "snippet": "const SearchField = () => (\n    <form onSubmit={handleSearchSubmit}>\n        <FieldStates\n            label=\"Agency\"\n            tooltip=\"Search by agency name or NPN.\"\n            required\n            error=\"Pick an agency from the list.\">\n            <SearchInput />\n        </FieldStates>\n    </form>\n);"
+        },
+        {
+          "id": "components-inputgroup--email-field",
+          "name": "Email Field",
+          "snippet": "const EmailField = () => (\n    <FieldStates label=\"Email\" required error=\"Enter a valid email address.\">\n        <InputGroup.Root>\n            <InputGroup.Addon>\n                <IconMail />\n            </InputGroup.Addon>\n            <Input type=\"email\" placeholder=\"me@email.com\" />\n        </InputGroup.Root>\n    </FieldStates>\n);",
+          "description": "The email field from the Portal UI library: a leading icon is all it adds\nto the input.",
+          "summary": "Email field with a leading icon, valid and invalid"
+        },
+        {
+          "id": "components-inputgroup--price-field",
+          "name": "Price Field",
+          "snippet": "const PriceField = () => (\n    <FieldStates label=\"Price\" required error=\"Enter a price above zero.\">\n        <PriceInput />\n    </FieldStates>\n);",
+          "description": "The price field from the Portal UI library: a currency symbol before the\nvalue and a currency picker after it. The picker is a `DropdownMenu` whose\ntrigger fills an `action` addon, so it keeps the frame's height and an inset\nfocus ring.",
+          "summary": "Price field with a symbol and a currency picker, valid and invalid"
+        },
+        {
+          "id": "components-inputgroup--phone-field",
+          "name": "Phone Field",
+          "snippet": "const PhoneField = () => (\n    <FieldStates label=\"Phone number\" error=\"Enter a 10-digit phone number.\">\n        <PhoneInput />\n    </FieldStates>\n);",
+          "description": "The optional phone field from the Portal UI library: a country code picker\nbefore the number. The picker leads, so the `action` addon rounds its\nbutton's start corners with the frame.",
+          "summary": "Phone field with a leading country code picker, valid and invalid"
+        }
+      ],
+      "import": "import {\n    Button,\n    Divider,\n    DropdownMenu,\n    Field,\n    FieldText,\n    IconCancel,\n    IconKeyboardArrowDown,\n    IconSearch,\n    Input,\n    InputGroup,\n    Label,\n    Tag,\n} from \"@agentero/design-system\";"
+    },
     "components-input": {
       "id": "components-input",
       "name": "Input",
@@ -9426,6 +9552,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3701
+    "durationMs": 5204
   }
 }

package/package.json

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

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

@@ -0,0 +1,16 @@
+export { inputGroupRecipe } from './input-group';
+export type { InputGroupAddonProps, InputGroupRootProps, InputGroupTextProps } from './input-group';
+export declare const InputGroup: {
+    Root: {
+        ({ className, ...props }: import('./input-group').InputGroupRootProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Addon: {
+        ({ className, variant, onMouseDown, ...props }: import('./input-group').InputGroupAddonProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Text: {
+        ({ className, ...props }: import('./input-group').InputGroupTextProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/src/input-group/index.js

@@ -0,0 +1,9 @@
+import { Addon as e, Root as t, Text as n, inputGroupRecipe as r } from "./input-group.js";
+//#region src/input-group/index.ts
+var i = {
+	Root: t,
+	Addon: e,
+	Text: n
+};
+//#endregion
+export { i as InputGroup, r as inputGroupRecipe };

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

@@ -0,0 +1,130 @@
+import { ComponentPropsWithRef } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Style recipe for InputGroup. Slots: `root` (the bordered frame), `addon` and
+ * `text`. Focus, disabled, invalid and size all come from the `<input>` or
+ * `<textarea>` inside through `:has()`, so the frame can never disagree with
+ * its control.
+ *
+ * @summary tailwind-variants recipe backing the InputGroup frame and addons
+ */
+export declare const inputGroupRecipe: import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {};
+        action: {
+            addon: string[];
+        };
+    };
+}, {
+    root: string[];
+    addon: string[];
+    text: string[];
+}, undefined, {
+    variant: {
+        default: {};
+        action: {
+            addon: string[];
+        };
+    };
+}, {
+    root: string[];
+    addon: string[];
+    text: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        default: {};
+        action: {
+            addon: string[];
+        };
+    };
+}, {
+    root: string[];
+    addon: string[];
+    text: string[];
+}, undefined, unknown, unknown, undefined>>;
+type InputGroupVariants = VariantProps<typeof inputGroupRecipe>;
+export type InputGroupRootProps = ComponentPropsWithRef<'div'>;
+/**
+ * The bordered frame of an input group: one box around an `Input` and its
+ * addons, drawn as a single control. It carries the border, the shadow, the
+ * focus ring and the horizontal padding; the `Input` inside renders bare and
+ * gives the frame its state — focus, `disabled`, `aria-invalid` and `size`
+ * all propagate through `:has()`, so nothing is passed to the frame by hand.
+ *
+ * Put the `Input` and any `InputGroup.Addon` or `InputGroup.Text` inside, in
+ * reading order. Inside a `FieldText` the `Input` still takes its label and
+ * messages from the field, at any depth; the frame needs nothing.
+ *
+ * Use it for an input with a leading icon, a currency or unit affix, or a
+ * trailing action. A plain input with nothing around it is just `Input`, and a
+ * button beside an input that submits on its own is a form layout, not a group.
+ * Not a `role="group"`, like `Field`.
+ *
+ * @summary Bordered frame drawing an Input and its addons as one control
+ * @dataAttribute {string} data-slot - Always set to "input-group"
+ *
+ * @example
+ * <InputGroup.Root>
+ *   <InputGroup.Text>$</InputGroup.Text>
+ *   <Input inputMode="decimal" placeholder="0.00" />
+ *   <InputGroup.Text>USD</InputGroup.Text>
+ * </InputGroup.Root>
+ */
+export declare const Root: {
+    ({ className, ...props }: InputGroupRootProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type InputGroupAddonProps = ComponentPropsWithRef<'div'> & {
+    /**
+     * `action` runs a button edge to edge at the frame's height.
+     *
+     * @default 'default'
+     */
+    variant?: InputGroupVariants['variant'];
+};
+/**
+ * A slot for an icon, a tag or a button inside the frame. Icons take the input
+ * colour and size (24px) and follow the disabled state. A press on the addon
+ * itself focuses the input, so the whole frame reads as the control; a press on
+ * a button or link inside it is left alone.
+ *
+ * For a text affix use `InputGroup.Text`, which sets the type and colour a
+ * prefix needs.
+ *
+ * @summary Icon, tag or button slot inside the input group frame
+ * @dataAttribute {string} data-slot - Always set to "input-group-addon"
+ *
+ * @example
+ * <InputGroup.Root>
+ *   <InputGroup.Addon><IconSearch /></InputGroup.Addon>
+ *   <Input type="search" placeholder="Search agencies" />
+ * </InputGroup.Root>
+ */
+export declare const Addon: {
+    ({ className, variant, onMouseDown, ...props }: InputGroupAddonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type InputGroupTextProps = ComponentPropsWithRef<'span'>;
+/**
+ * A text affix inside the frame: a currency symbol, a protocol, a unit. Set in
+ * the placeholder colour so the typed value stands out, at the input's text
+ * size (`base` when the input is `lg`), and greyed out with a disabled input.
+ * It is decoration only: a screen reader does not read it as part of the value,
+ * so say the unit in the label or the description when it matters — and the
+ * value excludes it too, so a `https://` prefix goes with a `type="text"`
+ * input, not `type="url"`, whose native validation would reject the bare host.
+ *
+ * @summary Currency, protocol or unit affix set beside the input
+ * @dataAttribute {string} data-slot - Always set to "input-group-text"
+ *
+ * @example
+ * <InputGroup.Root>
+ *   <InputGroup.Text>https://</InputGroup.Text>
+ *   <Input type="text" inputMode="url" autoCapitalize="none" placeholder="www.agentero.com" />
+ * </InputGroup.Root>
+ */
+export declare const Text: {
+    ({ className, ...props }: InputGroupTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/src/input-group/input-group.js

@@ -0,0 +1,79 @@
+"use client";
+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-group/input-group.tsx
+var r = t({
+	slots: {
+		root: [
+			"group/input-group [--input-group-gap:0.75rem]",
+			"flex gap-(--input-group-gap) rounded-md border border-solid border-border-input-default",
+			"bg-bg-input-normal px-3 text-text-input-normal shadow-sm",
+			"cursor-text overflow-hidden outline-0 -outline-offset-1 outline-[transparent]",
+			"transition-[color,box-shadow,outline-color,outline-offset,outline-width] duration-75",
+			"has-[input:focus-within,textarea:focus-within]:border-border-input-focus",
+			"has-[input:focus-within,textarea:focus-within]:outline-border-input-focus",
+			"has-[input:focus-within,textarea:focus-within]:outline-[0.125rem]",
+			"has-[input:focus-within,textarea:focus-within]:outline-offset-[-0.0625rem]",
+			"has-[input:disabled,textarea:disabled]:cursor-default",
+			"has-[input:disabled,textarea:disabled]:border-border-input-disable",
+			"has-[input:disabled,textarea:disabled]:bg-bg-input-disable",
+			"has-[input:disabled,textarea:disabled]:text-text-input-disable",
+			"has-[input:disabled,textarea:disabled]:shadow-none",
+			"has-[input[data-size=\"lg\"],textarea[data-size=\"lg\"]]:rounded-lg",
+			"has-[input[aria-invalid=\"true\"],textarea[aria-invalid=\"true\"]]:border-border-input-destructive",
+			"has-[input[aria-invalid=\"true\"]:focus-within,textarea[aria-invalid=\"true\"]:focus-within]:outline-outline-input-destructive",
+			"**:[input,textarea]:-my-0.25 **:[input,textarea]:border-none **:[input,textarea]:bg-transparent",
+			"**:[input,textarea]:px-0 **:[input,textarea]:pb-0.125 **:[input,textarea]:shadow-none",
+			"**:[input,textarea]:outline-none **:[input,textarea]:focus-visible:outline-none",
+			"**:[[data-slot=separator]]:bg-border-input-default",
+			"**:[[data-slot=tag]]:-ms-1 **:[[data-slot=tag]]:rounded-sm",
+			"**:[input+[data-slot=input-group-addon]>[data-slot=tag]]:ms-0",
+			"**:[input+[data-slot=input-group-addon]>[data-slot=tag]]:-me-1"
+		],
+		addon: [
+			"flex h-auto cursor-text items-center justify-center",
+			"*:[svg]:-mx-1 *:[svg]:size-6 [&_path]:fill-icon-input-default",
+			"group-has-[input:disabled,textarea:disabled]/input-group:[&_path]:fill-icon-input-disable"
+		],
+		text: [
+			"flex items-center text-sm text-text-input-placeholder",
+			"group-has-[input[data-size=\"lg\"]]/input-group:text-base",
+			"group-has-[input:disabled,textarea:disabled]/input-group:text-text-input-disable"
+		]
+	},
+	variants: { variant: {
+		default: {},
+		action: { addon: [
+			"-mx-(--input-group-gap) shrink-0 items-stretch rounded-[inherit]",
+			"*:[button]:h-auto *:[button]:rounded-none *:[button]:focus-visible:-outline-offset-2",
+			"first:*:[button]:rounded-s-[inherit] last:*:[button]:rounded-e-[inherit]"
+		] }
+	} },
+	defaultVariants: { variant: "default" }
+}), i = r(), a = ({ className: t, ...r }) => /* @__PURE__ */ n("div", {
+	"data-slot": "input-group",
+	className: e(i.root(), t),
+	...r
+});
+a.displayName = "InputGroup.Root";
+var o = ({ className: t, variant: i, onMouseDown: a, ...o }) => /* @__PURE__ */ n("div", {
+	"data-slot": "input-group-addon",
+	className: e(r({ variant: i }).addon(), t),
+	onMouseDown: (e) => {
+		if (a?.(e), e.defaultPrevented || e.target.closest("button, a")) return;
+		e.preventDefault();
+		let t = e.currentTarget.parentElement, n = t?.querySelector("input, textarea");
+		n && !t?.querySelector("input:focus, textarea:focus") && n.focus();
+	},
+	...o
+});
+o.displayName = "InputGroup.Addon";
+var s = ({ className: t, ...r }) => /* @__PURE__ */ n("span", {
+	"data-slot": "input-group-text",
+	className: e(i.text(), t),
+	...r
+});
+s.displayName = "InputGroup.Text";
+//#endregion
+export { o as Addon, a as Root, s as Text, r as inputGroupRecipe };

package/src/switch/switch.js

@@ -10,9 +10,10 @@ var o = t({
 		wrapper: "inline-flex items-center gap-2.5",
 		root: [
 			"peer inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors",
-			"bg-bg-default-base-tertiary data-[state=checked]:bg-bg-default-base-inverse-primary",
+			"bg-slate-200 enabled:hover:bg-slate-300",
+			"enabled:data-[state=checked]:bg-slate-700 enabled:data-[state=checked]:hover:bg-slate-900",
 			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus-ring-button-primary",
-			"disabled:cursor-not-allowed disabled:opacity-50"
+			"disabled:cursor-not-allowed disabled:bg-slate-100"
 		],
 		thumb: "block translate-x-0 rounded-full bg-bg-default-base-primary shadow-sm transition-transform",
 		label: ["cursor-pointer text-sm text-text-default-base-primary select-none", "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"]