@agentero/design-system 0.32.2 → 0.33.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">34 components ok</span><span class="filter-pill ok" aria-disabled="true">281 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">35 components ok</span><span class="filter-pill ok" aria-disabled="true">286 stories ok</span></div>
   </div>
 </header>
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-component-meta</code>. Generation took <strong>4.9s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.7s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -7426,6 +7426,174 @@ 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="InputPassword">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> InputPassword</h2>
+      <div class="badges">
+        <label for="c-19-components-inputpassword-props" class="badge ok as-toggle">1 prop type</label>
+        
+        <label for="c-19-components-inputpassword-stories" class="badge ok as-toggle">5 stories</label>
+        
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/input-password/input-password.stories.tsx">components-inputpassword · ./src/input-password/input-password.stories.tsx</div>
+    <div>Password input with a show/hide toggle inside the frame</div>
+    <div class="hint">InputPassword is a password field with a show/hide toggle at the end of its
+frame. It is an `Input` inside an `InputGroup`: `className` styles the
+frame and every other prop reaches the `&lt;input&gt;`, which takes its label,
+messages and states from a surrounding `FieldText`. The toggle is not
+rendered while the input is disabled.</div>
+    <div class="kv"><span class="chip">summary: Password input with a show/hide toggle inside the frame</span><span class="chip">dataAttribute: {string} data-slot - Always set to &quot;input-password&quot; on the frame</span><span class="chip">example: &lt;FieldText required&gt;
+  &lt;Label&gt;Password&lt;/Label&gt;
+  &lt;InputPassword name=&quot;password&quot; autoComplete=&quot;current-password&quot; /&gt;
+&lt;/FieldText&gt;</span></div>
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-19-components-inputpassword-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  
+  <input id="c-19-components-inputpassword-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">1 prop type</span>
+            </div>
+            <pre><code>Component: src/input-password/input-password.tsx::InputPassword</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * 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;</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 { Field, FieldText, InputPassword, 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>Hidden value with a toggle that reveals and hides it</div>
+              <div class="hint">The value starts hidden. The toggle shows it as plain text and hides it
+again; pressing it leaves focus and the caret in the input.</div>
+              <pre><code>const Default = () =&gt; &lt;InputPassword aria-label=&quot;Password&quot; autoComplete=&quot;current-password&quot; /&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 with the toggle removed</div>
+              <div class="hint">A disabled input has no toggle, whether `disabled` is set on the input
+itself or comes from a `&lt;fieldset disabled&gt;` around it.</div>
+              <pre><code>const Disabled = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+    &lt;InputPassword
+        aria-label=&quot;Password&quot;
+        autoComplete=&quot;current-password&quot;
+        disabled
+        defaultValue=&quot;hunter22&quot; /&gt;
+    &lt;fieldset disabled style={{ border: 0, margin: 0, padding: 0 }}&gt;
+        &lt;InputPassword aria-label=&quot;New password&quot; autoComplete=&quot;new-password&quot; /&gt;
+    &lt;/fieldset&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Invalid</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Invalid field driving the frame&#39;s destructive border</div>
+              <div class="hint">`invalid` on the surrounding `FieldText` sets `aria-invalid` on the input,
+which paints the frame&#39;s destructive border, and `Field.Error` is announced
+with the input.</div>
+              <pre><code>const Invalid = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1.5rem&#39; }}&gt;
+    &lt;InputPassword
+        autoComplete=&quot;current-password&quot;
+        aria-label=&quot;Valid password&quot;
+        defaultValue=&quot;hunter22&quot; /&gt;
+    &lt;FieldText invalid&gt;
+        &lt;Label&gt;Password&lt;/Label&gt;
+        &lt;InputPassword autoComplete=&quot;new-password&quot; defaultValue=&quot;hunter&quot; /&gt;
+        &lt;Field.Error errors={[{ message: &#39;Use at least 8 characters.&#39; }]} /&gt;
+    &lt;/FieldText&gt;
+&lt;/div&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, with the toggle scaled and evenly inset</div>
+              <div class="hint">The three sizes match Input&#39;s: the frame is 32, 40 or 48px tall. The toggle
+grows with it (a 24px button with a 16px icon at `sm`, 32px with 20px at
+`md`, 32px with 24px at `lg`) and sits as far from the right edge as from
+the top and bottom.</div>
+              <pre><code>const AllSizes = () =&gt; &lt;div style={{ display: &#39;grid&#39;, gap: &#39;1rem&#39; }}&gt;
+    &lt;InputPassword autoComplete=&quot;current-password&quot; size=&quot;sm&quot; aria-label=&quot;Small&quot; /&gt;
+    &lt;InputPassword autoComplete=&quot;current-password&quot; size=&quot;md&quot; aria-label=&quot;Medium&quot; /&gt;
+    &lt;InputPassword autoComplete=&quot;current-password&quot; size=&quot;lg&quot; aria-label=&quot;Large&quot; /&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 disabled state reaching the input through the frame</div>
+              <div class="hint">Inside a `FieldText` the input takes its label, description and states from
+the field through the frame. A disabled field removes the toggle too.</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;Password&lt;/Label&gt;
+            &lt;InputPassword autoComplete=&quot;new-password&quot; /&gt;
+            &lt;Field.Description&gt;At least 8 characters.&lt;/Field.Description&gt;
+        &lt;/FieldText&gt;
+        &lt;FieldText disabled&gt;
+            &lt;Label&gt;Current password&lt;/Label&gt;
+            &lt;InputPassword autoComplete=&quot;current-password&quot; defaultValue=&quot;hunter22&quot; /&gt;
+        &lt;/FieldText&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+        </div>
+    
+    
   </div>
 </article>
 <article
@@ -7440,9 +7608,9 @@ button&#39;s start corners with the frame.</div>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Label</h2>
       <div class="badges">
-        <label for="c-19-components-label-props" class="badge ok as-toggle">3 prop types</label>
+        <label for="c-20-components-label-props" class="badge ok as-toggle">3 prop types</label>
         
-        <label for="c-19-components-label-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-20-components-label-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -7462,10 +7630,10 @@ still has to carry `required` / `aria-required`.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-19-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-20-components-label-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-19-components-label-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-20-components-label-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7585,9 +7753,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-20-components-loading-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-21-components-loading-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-20-components-loading-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-21-components-loading-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -7604,10 +7772,10 @@ parent font size via `em`-based size variants (`sm`, `md`, `lg`).</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-20-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-21-components-loading-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-20-components-loading-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-21-components-loading-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -7758,9 +7926,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-21-components-modal-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-22-components-modal-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-21-components-modal-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-22-components-modal-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -7806,10 +7974,10 @@ import { Modal } from &#39;@agentero/design-system/modal&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-21-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-22-components-modal-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-21-components-modal-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-22-components-modal-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8029,9 +8197,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-22-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-23-components-pagination-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-22-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-23-components-pagination-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8061,10 +8229,10 @@ const [page, setPage] = useState(1);
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-22-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-23-components-pagination-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-22-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-23-components-pagination-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8219,9 +8387,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-23-components-popover-props" class="badge ok as-toggle">5 prop types</label>
+        <label for="c-24-components-popover-props" class="badge ok as-toggle">5 prop types</label>
         
-        <label for="c-23-components-popover-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-24-components-popover-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -8250,10 +8418,10 @@ import { Popover } from &#39;@agentero/design-system/popover&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-23-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-24-components-popover-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-23-components-popover-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-24-components-popover-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8452,9 +8620,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-24-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        <label for="c-25-components-progress-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-24-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-25-components-progress-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8473,10 +8641,10 @@ with `currentColor`, so recolor it with a plain text class — e.g.
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-24-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-25-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-24-components-progress-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-25-components-progress-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8595,7 +8763,7 @@ percentage: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-25-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-26-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -8612,7 +8780,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-25-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-26-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
   
@@ -8708,9 +8876,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-26-components-switch-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-27-components-switch-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-26-components-switch-stories" class="badge ok as-toggle">7 stories</label>
+        <label for="c-27-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
         
       </div>
@@ -8726,10 +8894,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-26-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-27-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-26-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-27-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -8910,9 +9078,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-27-components-table-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-28-components-table-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-27-components-table-stories" class="badge ok as-toggle">10 stories</label>
+        <label for="c-28-components-table-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -8943,10 +9111,10 @@ import { Table } from &#39;@agentero/design-system/table&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-27-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-28-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-27-components-table-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-28-components-table-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9164,9 +9332,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-28-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-29-components-tabs-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-28-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-29-components-tabs-stories" class="badge ok as-toggle">8 stories</label>
         
         
       </div>
@@ -9197,10 +9365,10 @@ import { Tabs } from &#39;@agentero/design-system/tabs&#39;;
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-28-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-29-components-tabs-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-28-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-29-components-tabs-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9421,9 +9589,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-29-components-tag-props" class="badge ok as-toggle">8 prop types</label>
+        <label for="c-30-components-tag-props" class="badge ok as-toggle">8 prop types</label>
         
-        <label for="c-29-components-tag-stories" class="badge ok as-toggle">12 stories</label>
+        <label for="c-30-components-tag-stories" class="badge ok as-toggle">12 stories</label>
         
         
       </div>
@@ -9442,10 +9610,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-29-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-30-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-29-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-30-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -9870,9 +10038,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-30-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
+        <label for="c-31-components-textarea-props" class="badge ok as-toggle">1 prop type</label>
         
-        <label for="c-30-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-31-components-textarea-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -9889,10 +10057,10 @@ states. It wires nothing on its own: `id`, `aria-invalid` and
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-30-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-31-components-textarea-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-30-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-31-components-textarea-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10024,9 +10192,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-31-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-32-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-31-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-32-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
         
       </div>
@@ -10045,10 +10213,10 @@ common feedback patterns.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-31-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-32-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-31-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-32-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10477,9 +10645,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-32-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
+        <label for="c-33-components-tooltip-props" class="badge ok as-toggle">12 prop types</label>
         
-        <label for="c-32-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-33-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
         
       </div>
@@ -10498,10 +10666,10 @@ on hover or focus.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-32-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-33-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-32-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-33-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -10673,9 +10841,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-33-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-34-components-validationlist-props" class="badge ok as-toggle">2 prop types</label>
         
-        <label for="c-33-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-34-components-validationlist-stories" class="badge ok as-toggle">4 stories</label>
         
         
       </div>
@@ -10696,10 +10864,10 @@ your form validation; it does not own the input or block submission.</div>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-33-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-34-components-validationlist-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
-  <input id="c-33-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-34-components-validationlist-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     

package/mcp/manifests/components.json

@@ -6624,6 +6624,112 @@
       ],
       "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-inputpassword": {
+      "id": "components-inputpassword",
+      "name": "InputPassword",
+      "path": "./src/input-password/input-password.stories.tsx",
+      "jsDocTags": {
+        "summary": [
+          "Password input with a show/hide toggle inside the frame"
+        ],
+        "dataAttribute": [
+          "{string} data-slot - Always set to \"input-password\" on the frame"
+        ],
+        "example": [
+          "<FieldText required>\n  <Label>Password</Label>\n  <InputPassword name=\"password\" autoComplete=\"current-password\" />\n</FieldText>"
+        ]
+      },
+      "description": "InputPassword is a password field with a show/hide toggle at the end of its\nframe. It is an `Input` inside an `InputGroup`: `className` styles the\nframe and every other prop reaches the `<input>`, which takes its label,\nmessages and states from a surrounding `FieldText`. The toggle is not\nrendered while the input is disabled.",
+      "summary": "Password input with a show/hide toggle inside the frame",
+      "reactComponentMeta": {
+        "displayName": "InputPassword",
+        "exportName": "InputPassword",
+        "filePath": "/home/runner/work/design-system/design-system/src/input-password/input-password.tsx",
+        "description": "InputPassword is a password field with a show/hide toggle at the end of its\nframe. The value starts hidden; the toggle reveals it as plain text and\nhides it again. Its accessible name reads \"Show password\" or \"Hide\npassword\", depending on what the next press does. Pressing the toggle keeps\nfocus and the caret in the input. The toggle is not rendered while the input\nis disabled, whether `disabled` comes from the prop, from a surrounding\n`FieldText` or from a `<fieldset disabled>`.\n\nIt is an [Input](?path=/docs/components-input--docs) inside an\n[InputGroup](?path=/docs/components-inputgroup--docs) frame. `className`\nstyles the frame. Every other prop goes to the `<input>`: the `ref`, `id`,\n`name`, `value`, `onChange`, `aria-*` and every other standard attribute,\nsuch as `autoComplete`, `required` or `maxLength`. Only `type` is not\naccepted, because the toggle owns it. Inside a `FieldText` the input takes\nits label, messages and states from the field as a plain `Input` does. The\ninvalid state comes from `aria-invalid`, and the frame paints the\ndestructive border. Set `autoComplete` to `current-password` on sign-in and\n`new-password` when the user picks one, so password managers fill the right\nvalue.\n\nDo not use it for text that is not secret; use `Input` instead. A one-time\ncode is an `Input` with `autoComplete=\"one-time-code\"`, not a password.",
+        "jsDocTags": {
+          "summary": [
+            "Password input with a show/hide toggle inside the frame"
+          ],
+          "dataAttribute": [
+            "{string} data-slot - Always set to \"input-password\" on the frame"
+          ],
+          "example": [
+            "<FieldText required>\n  <Label>Password</Label>\n  <InputPassword name=\"password\" autoComplete=\"current-password\" />\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"
+              }
+            ]
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "components-inputpassword--default",
+          "name": "Default",
+          "snippet": "const Default = () => <InputPassword aria-label=\"Password\" autoComplete=\"current-password\" />;",
+          "description": "The value starts hidden. The toggle shows it as plain text and hides it\nagain; pressing it leaves focus and the caret in the input.",
+          "summary": "Hidden value with a toggle that reveals and hides it"
+        },
+        {
+          "id": "components-inputpassword--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputPassword\n        aria-label=\"Password\"\n        autoComplete=\"current-password\"\n        disabled\n        defaultValue=\"hunter22\" />\n    <fieldset disabled style={{ border: 0, margin: 0, padding: 0 }}>\n        <InputPassword aria-label=\"New password\" autoComplete=\"new-password\" />\n    </fieldset>\n</div>;",
+          "description": "A disabled input has no toggle, whether `disabled` is set on the input\nitself or comes from a `<fieldset disabled>` around it.",
+          "summary": "Disabled input with the toggle removed"
+        },
+        {
+          "id": "components-inputpassword--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => <div style={{ display: 'grid', gap: '1.5rem' }}>\n    <InputPassword\n        autoComplete=\"current-password\"\n        aria-label=\"Valid password\"\n        defaultValue=\"hunter22\" />\n    <FieldText invalid>\n        <Label>Password</Label>\n        <InputPassword autoComplete=\"new-password\" defaultValue=\"hunter\" />\n        <Field.Error errors={[{ message: 'Use at least 8 characters.' }]} />\n    </FieldText>\n</div>;",
+          "description": "`invalid` on the surrounding `FieldText` sets `aria-invalid` on the input,\nwhich paints the frame's destructive border, and `Field.Error` is announced\nwith the input.",
+          "summary": "Invalid field driving the frame's destructive border"
+        },
+        {
+          "id": "components-inputpassword--all-sizes",
+          "name": "All Sizes",
+          "snippet": "const AllSizes = () => <div style={{ display: 'grid', gap: '1rem' }}>\n    <InputPassword autoComplete=\"current-password\" size=\"sm\" aria-label=\"Small\" />\n    <InputPassword autoComplete=\"current-password\" size=\"md\" aria-label=\"Medium\" />\n    <InputPassword autoComplete=\"current-password\" size=\"lg\" aria-label=\"Large\" />\n</div>;",
+          "description": "The three sizes match Input's: the frame is 32, 40 or 48px tall. The toggle\ngrows with it (a 24px button with a 16px icon at `sm`, 32px with 20px at\n`md`, 32px with 24px at `lg`) and sits as far from the right edge as from\nthe top and bottom.",
+          "summary": "The three sizes, with the toggle scaled and evenly inset"
+        },
+        {
+          "id": "components-inputpassword--inside-field-text",
+          "name": "Inside Field Text",
+          "snippet": "const InsideFieldText = () => (\n    <div style={{ display: 'grid', gap: '1.5rem' }}>\n        <FieldText required>\n            <Label>Password</Label>\n            <InputPassword autoComplete=\"new-password\" />\n            <Field.Description>At least 8 characters.</Field.Description>\n        </FieldText>\n        <FieldText disabled>\n            <Label>Current password</Label>\n            <InputPassword autoComplete=\"current-password\" defaultValue=\"hunter22\" />\n        </FieldText>\n    </div>\n);",
+          "description": "Inside a `FieldText` the input takes its label, description and states from\nthe field through the frame. A disabled field removes the toggle too.",
+          "summary": "Label and disabled state reaching the input through the frame"
+        }
+      ],
+      "import": "import { Field, FieldText, InputPassword, Label } from \"@agentero/design-system\";"
+    },
     "components-input": {
       "id": "components-input",
       "name": "Input",
@@ -9590,6 +9696,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 4877
+    "durationMs": 4742
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.32.2",
+	"version": "0.33.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-password": {
+			"types": "./src/input-password/index.d.ts",
+			"import": "./src/input-password/index.js"
+		},
 		"./label": {
 			"types": "./src/label/index.d.ts",
 			"import": "./src/label/index.js"

package/src/input-password/icons.d.ts

@@ -0,0 +1,16 @@
+import { SVGProps } from 'react';
+/**
+ * Open eye on the InputPassword toggle while the value is hidden. Fill color
+ * comes from the input group addon, so the icon follows the field's state.
+ *
+ * @summary 24px open-eye icon on the show-password toggle
+ */
+export declare const IconVisibility: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Struck-through eye on the InputPassword toggle while the value is shown.
+ * Fill color comes from the input group addon, so the icon follows the
+ * field's state.
+ *
+ * @summary 24px crossed-eye icon on the hide-password toggle
+ */
+export declare const IconVisibilityOff: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;

package/src/input-password/icons.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/input-password/icons.tsx
+var t = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M12.0023 15.5769C13.1354 15.5769 14.0978 15.1803 14.8895 14.3871C15.6811 13.5939 16.077 12.6308 16.077 11.4977C16.077 10.3646 15.6804 9.40224 14.8872 8.61058C14.094 7.81891 13.1309 7.42308 11.9978 7.42308C10.8647 7.42308 9.90233 7.81966 9.11066 8.61282C8.31899 9.40601 7.92316 10.3692 7.92316 11.5023C7.92316 12.6353 8.31974 13.5977 9.11291 14.3894C9.90609 15.181 10.8692 15.5769 12.0023 15.5769ZM12.0001 14.2C11.2501 14.2 10.6126 13.9375 10.0876 13.4125C9.56256 12.8875 9.30006 12.25 9.30006 11.5C9.30006 10.75 9.56256 10.1125 10.0876 9.58748C10.6126 9.06248 11.2501 8.79998 12.0001 8.79998C12.7501 8.79998 13.3876 9.06248 13.9126 9.58748C14.4376 10.1125 14.7001 10.75 14.7001 11.5C14.7001 12.25 14.4376 12.8875 13.9126 13.4125C13.3876 13.9375 12.7501 14.2 12.0001 14.2ZM12.0001 18.5C9.81161 18.5 7.80553 17.9243 5.98181 16.773C4.15811 15.6217 2.76741 14.0653 1.80971 12.1038C1.76613 12.0269 1.736 11.9353 1.71934 11.8292C1.70267 11.723 1.69434 11.6132 1.69434 11.5C1.69434 11.3867 1.70267 11.277 1.71934 11.1708C1.736 11.0646 1.76613 10.9731 1.80971 10.8961C2.76741 8.93461 4.15811 7.37821 5.98181 6.22693C7.80553 5.07564 9.81161 4.5 12.0001 4.5C14.1885 4.5 16.1946 5.07564 18.0183 6.22693C19.842 7.37821 21.2327 8.93461 22.1904 10.8961C22.234 10.9731 22.2641 11.0646 22.2808 11.1708C22.2975 11.277 22.3058 11.3867 22.3058 11.5C22.3058 11.6132 22.2975 11.723 22.2808 11.8292C22.2641 11.9353 22.234 12.0269 22.1904 12.1038C21.2327 14.0653 19.842 15.6217 18.0183 16.773C16.1946 17.9243 14.1885 18.5 12.0001 18.5ZM12.0001 17C13.8834 17 15.6126 16.5041 17.1876 15.5125C18.7626 14.5208 19.9667 13.1833 20.8001 11.5C19.9667 9.81664 18.7626 8.47914 17.1876 7.48748C15.6126 6.49581 13.8834 5.99998 12.0001 5.99998C10.1167 5.99998 8.38756 6.49581 6.81256 7.48748C5.23756 8.47914 4.03339 9.81664 3.20006 11.5C4.03339 13.1833 5.23756 14.5208 6.81256 15.5125C8.38756 16.5041 10.1167 17 12.0001 17Z" })
+}), n = (t) => /* @__PURE__ */ e("svg", {
+	width: "24",
+	height: "24",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	"aria-hidden": "true",
+	xmlns: "http://www.w3.org/2000/svg",
+	...t,
+	children: /* @__PURE__ */ e("path", { d: "M15.7731 12.9731L14.6501 11.85C14.8001 11.0218 14.5638 10.2772 13.9414 9.61636C13.319 8.95546 12.5552 8.70001 11.6501 8.85001L10.527 7.72696C10.7526 7.62568 10.9841 7.54972 11.2212 7.49909C11.4584 7.44844 11.718 7.42311 12.0001 7.42311C13.1347 7.42311 14.0978 7.81895 14.8895 8.61061C15.6811 9.40228 16.077 10.3654 16.077 11.5C16.077 11.7821 16.0516 12.0449 16.001 12.2885C15.9504 12.532 15.8744 12.7602 15.7731 12.9731ZM18.9539 16.0846L17.8501 15.05C18.4834 14.5667 19.0459 14.0375 19.5376 13.4625C20.0292 12.8875 20.4501 12.2333 20.8001 11.5C19.9667 9.81668 18.7709 8.47918 17.2126 7.48751C15.6542 6.49585 13.9167 6.00001 12.0001 6.00001C11.5167 6.00001 11.0417 6.03335 10.5751 6.10001C10.1084 6.16668 9.65006 6.26668 9.20006 6.40001L8.03471 5.23466C8.66676 4.98338 9.31227 4.79812 9.97124 4.67889C10.6302 4.55965 11.3065 4.50004 12.0001 4.50004C14.2231 4.50004 16.2462 5.08914 18.0693 6.26734C19.8923 7.44554 21.266 8.98848 22.1904 10.8962C22.234 10.9731 22.2641 11.0644 22.2808 11.1702C22.2975 11.276 22.3058 11.3859 22.3058 11.5C22.3058 11.6141 22.2949 11.724 22.2731 11.8298C22.2513 11.9356 22.2237 12.0269 22.1904 12.1039C21.8199 12.8833 21.3632 13.6074 20.8202 14.276C20.2773 14.9445 19.6552 15.5474 18.9539 16.0846ZM19.2347 21.3423L15.7155 17.8538C15.2026 18.0436 14.6344 18.1987 14.0107 18.3192C13.3869 18.4397 12.7167 18.5 12.0001 18.5C9.76418 18.5 7.7395 17.9109 5.92604 16.7327C4.11259 15.5545 2.74048 14.0115 1.80971 12.1039C1.76613 12.0269 1.736 11.9356 1.71934 11.8298C1.70267 11.724 1.69434 11.6141 1.69434 11.5C1.69434 11.3859 1.70267 11.2785 1.71934 11.1779C1.736 11.0773 1.76613 10.9885 1.80971 10.9116C2.18536 10.1423 2.64049 9.43143 3.17511 8.77886C3.70973 8.1263 4.28473 7.54617 4.90011 7.03849L2.64241 4.76539C2.50394 4.62692 2.43311 4.45545 2.42991 4.25099C2.42671 4.0465 2.50267 3.86669 2.65779 3.71156C2.80265 3.56669 2.97829 3.49426 3.18471 3.49426C3.39111 3.49426 3.56674 3.56669 3.71161 3.71156L20.2885 20.2885C20.427 20.4269 20.5004 20.5984 20.5087 20.8029C20.517 21.0073 20.4436 21.1872 20.2885 21.3423C20.1436 21.4872 19.968 21.5596 19.7616 21.5596C19.5552 21.5596 19.3796 21.4872 19.2347 21.3423ZM5.95394 8.09229C5.42574 8.5128 4.91195 9.01826 4.41259 9.60866C3.91322 10.199 3.50904 10.8295 3.20006 11.5C4.03339 13.1833 5.22923 14.5208 6.78756 15.5125C8.34589 16.5042 10.0834 17 12.0001 17C12.4552 17 12.9084 16.9615 13.3597 16.8846C13.811 16.8077 14.1937 16.7282 14.5078 16.6462L13.2424 15.35C13.0719 15.4192 12.8744 15.4743 12.6501 15.5154C12.4257 15.5564 12.209 15.5769 12.0001 15.5769C10.8655 15.5769 9.90233 15.1811 9.11066 14.3894C8.31899 13.5977 7.92316 12.6346 7.92316 11.5C7.92316 11.2974 7.94368 11.0856 7.98471 10.8644C8.02574 10.6433 8.08087 10.441 8.15009 10.2577L5.95394 8.09229Z" })
+});
+//#endregion
+export { t as IconVisibility, n as IconVisibilityOff };

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

@@ -0,0 +1,2 @@
+export { InputPassword, inputPasswordRecipe } from './input-password';
+export type { InputPasswordProps } from './input-password';

package/src/input-password/index.js

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

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

@@ -0,0 +1,103 @@
+import { InputProps } from '../input';
+/**
+ * Style recipe for InputPassword. Slots: `toggle` (the addon holding the
+ * button) and `button`. The `size` variant follows the input's: the button is
+ * 24px at `sm` and 32px above, the icon 16, 20 or 24px, and a negative end
+ * margin pulls the addon into the frame's padding so the button sits as far
+ * from the right edge as from the top and bottom (4px, 8px at `lg`).
+ *
+ * @summary tailwind-variants recipe backing the InputPassword toggle
+ */
+export declare const inputPasswordRecipe: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            toggle: string;
+            button: string;
+        };
+        md: {
+            toggle: string;
+            button: string;
+        };
+        lg: {
+            toggle: string;
+            button: string;
+        };
+    };
+}, {
+    toggle: string;
+    button: string;
+}, undefined, {
+    size: {
+        sm: {
+            toggle: string;
+            button: string;
+        };
+        md: {
+            toggle: string;
+            button: string;
+        };
+        lg: {
+            toggle: string;
+            button: string;
+        };
+    };
+}, {
+    toggle: string;
+    button: string;
+}, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: {
+            toggle: string;
+            button: string;
+        };
+        md: {
+            toggle: string;
+            button: string;
+        };
+        lg: {
+            toggle: string;
+            button: string;
+        };
+    };
+}, {
+    toggle: string;
+    button: string;
+}, undefined, unknown, unknown, undefined>>;
+export type InputPasswordProps = Omit<InputProps, 'type'>;
+/**
+ * InputPassword is a password field with a show/hide toggle at the end of its
+ * frame. The value starts hidden; the toggle reveals it as plain text and
+ * hides it again. Its accessible name reads "Show password" or "Hide
+ * password", depending on what the next press does. Pressing the toggle keeps
+ * focus and the caret in the input. The toggle is not rendered while the input
+ * is disabled, whether `disabled` comes from the prop, from a surrounding
+ * `FieldText` or from a `<fieldset disabled>`.
+ *
+ * It is an [Input](?path=/docs/components-input--docs) inside an
+ * [InputGroup](?path=/docs/components-inputgroup--docs) frame. `className`
+ * styles the frame. Every other prop goes to the `<input>`: the `ref`, `id`,
+ * `name`, `value`, `onChange`, `aria-*` and every other standard attribute,
+ * such as `autoComplete`, `required` or `maxLength`. Only `type` is not
+ * accepted, because the toggle owns it. Inside a `FieldText` the input takes
+ * its label, messages and states from the field as a plain `Input` does. The
+ * invalid state comes from `aria-invalid`, and the frame paints the
+ * destructive border. Set `autoComplete` to `current-password` on sign-in and
+ * `new-password` when the user picks one, so password managers fill the right
+ * value.
+ *
+ * Do not use it for text that is not secret; use `Input` instead. A one-time
+ * code is an `Input` with `autoComplete="one-time-code"`, not a password.
+ *
+ * @summary Password input with a show/hide toggle inside the frame
+ * @dataAttribute {string} data-slot - Always set to "input-password" on the frame
+ *
+ * @example
+ * <FieldText required>
+ *   <Label>Password</Label>
+ *   <InputPassword name="password" autoComplete="current-password" />
+ * </FieldText>
+ */
+export declare const InputPassword: {
+    ({ className, size, ...props }: InputPasswordProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/src/input-password/input-password.js

@@ -0,0 +1,57 @@
+"use client";
+import { Button as e } from "../button/button.js";
+import { Input as t } from "../input/input.js";
+import { InputGroup as n } from "../input-group/index.js";
+import { IconVisibility as r, IconVisibilityOff as i } from "./icons.js";
+import { tv as a } from "tailwind-variants";
+import { useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/input-password/input-password.tsx
+var l = a({
+	slots: {
+		toggle: "group-has-[input:disabled]/input-group:hidden",
+		button: "[&_svg]:mx-0"
+	},
+	variants: { size: {
+		sm: {
+			toggle: "-me-2.25",
+			button: "rounded-sm [&_svg]:size-4"
+		},
+		md: {
+			toggle: "-me-2.25",
+			button: "rounded-sm [&_svg]:size-5"
+		},
+		lg: {
+			toggle: "-me-1.25",
+			button: "[&_svg]:size-6"
+		}
+	} },
+	defaultVariants: { size: "md" }
+}), u = ({ className: a, size: u, ...d }) => {
+	let [f, p] = o("password"), m = f === "password", h = l({ size: u });
+	return /* @__PURE__ */ c(n.Root, {
+		"data-slot": "input-password",
+		className: a,
+		children: [/* @__PURE__ */ s(t, {
+			...d,
+			size: u,
+			type: f
+		}), /* @__PURE__ */ s(n.Addon, {
+			className: h.toggle(),
+			children: /* @__PURE__ */ s(e, {
+				type: "button",
+				variant: "ghost",
+				iconOnly: !0,
+				size: u === "sm" ? "xs" : "sm",
+				className: h.button(),
+				"aria-label": m ? "Show password" : "Hide password",
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: () => p(m ? "text" : "password"),
+				children: s(m ? r : i, {})
+			})
+		})]
+	});
+};
+u.displayName = "InputPassword";
+//#endregion
+export { u as InputPassword, l as inputPasswordRecipe };