@agentero/design-system 0.14.0 → 0.15.1

package/mcp/manifests/components.html

@@ -576,13 +576,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">15 components ok</span><span class="filter-pill ok" aria-disabled="true">142 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">16 components ok</span><span class="filter-pill ok" aria-disabled="true">147 stories ok</span></div>
   </div>
 </header>
 <main>
   <div class="wrap">
     <div class="note ok" style="margin-bottom: 16px;">
-              Using <code>react-docgen-typescript</code>. Generation took <strong>2.9s</strong>.
+              Using <code>react-docgen-typescript</code>. Generation took <strong>3.1s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -3220,6 +3220,139 @@ totalCount: number</code></pre>
     
   </div>
 </article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="Progress">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> Progress</h2>
+      <div class="badges">
+        <label for="c-9-components-progress-props" class="badge ok as-toggle">4 prop types</label>
+        
+        <label for="c-9-components-progress-stories" class="badge ok as-toggle">4 stories</label>
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/progress/progress.stories.tsx">components-progress · ./src/progress/progress.stories.tsx</div>
+    
+    <div class="hint">Progress shows how far a bounded task has advanced. Pass `percentage` (0–100) and optionally a `label` rendered above the bar. The fill paints with `currentColor`, so recolor it with a plain text class — e.g. `className=&quot;text-brand-400&quot;`.</div>
+    
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-9-components-progress-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  <input id="c-9-components-progress-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-docgen-typescript)</small></span>
+              <span class="badge ok">4 prop types</span>
+            </div>
+            <pre><code>Component: src/progress/progress.tsx::Progress</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * Accessible name when no visible `label` is provided. Defaults to `&#39;Progress&#39;`.
+ */
+aria-label?: string
+
+/**
+ * Extra classes for the bar, merged last. The fill paints with `currentColor`,
+ * so a text color recolors it (e.g. `text-brand-400`); sizing classes resize
+ * the track (e.g. `h-3`).
+ */
+className?: string
+
+/**
+ * Optional label rendered above the bar, with the percentage value on the right.
+ */
+label?: string
+
+/**
+ * Completion percentage, 0–100. Values outside the range are clamped.
+ */
+percentage: number</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 { Progress } 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 class="hint">Default near-black bar; exposes `role=&quot;progressbar&quot;` with the current value.</div>
+              <pre><code>const Default = () =&gt; &lt;Progress percentage={62} /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Label</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">`label` renders above the bar with the percentage value on the right.</div>
+              <pre><code>const WithLabel = () =&gt; &lt;Progress percentage={62} label=&quot;Profile completion&quot; className=&quot;text-brand-400&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Custom Colors</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">The fill follows `currentColor`: recolor it with any `text-*` class via `className`.</div>
+              <pre><code>const CustomColors = args =&gt; (
+    &lt;div className=&quot;flex flex-col gap-4&quot;&gt;
+        {[
+            [&#39;default&#39;, undefined],
+            [&#39;text-brand-400&#39;, &#39;text-brand-400&#39;],
+            [&#39;text-brand-600&#39;, &#39;text-brand-600&#39;],
+            [&#39;text-purple-400&#39;, &#39;text-purple-400&#39;],
+            [&#39;text-orange-400&#39;, &#39;text-orange-400&#39;],
+            [&#39;text-pink-400&#39;, &#39;text-pink-400&#39;],
+            [&#39;text-blue-400&#39;, &#39;text-blue-400&#39;]
+        ].map(([name, className]) =&gt; (
+            &lt;Progress key={name} {...args} className={className} label={name} /&gt;
+        ))}
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Clamped</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">Out-of-range values are clamped to 0–100.</div>
+              <pre><code>const Clamped = () =&gt; &lt;Progress percentage={150} /&gt;;</code></pre>
+            </div>
+        </div>
+    
+  </div>
+</article>
 <article
   class="card 
   no-error 
@@ -3234,7 +3367,7 @@ totalCount: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-9-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
+        <label for="c-10-components-skeleton-stories" class="badge ok as-toggle">4 stories</label>
         
       </div>
     </div>
@@ -3247,7 +3380,7 @@ totalCount: number</code></pre>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-9-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-10-components-skeleton-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
 
@@ -3341,9 +3474,9 @@ totalCount: number</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Switch</h2>
       <div class="badges">
-        <label for="c-10-components-switch-props" class="badge ok as-toggle">2 prop types</label>
+        <label for="c-11-components-switch-props" class="badge ok as-toggle">4 prop types</label>
         
-        <label for="c-10-components-switch-stories" class="badge ok as-toggle">6 stories</label>
+        <label for="c-11-components-switch-stories" class="badge ok as-toggle">7 stories</label>
         
       </div>
     </div>
@@ -3356,9 +3489,9 @@ totalCount: number</code></pre>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-10-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-11-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
   
-  <input id="c-10-components-switch-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-11-components-switch-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -3368,12 +3501,21 @@ totalCount: number</code></pre>
           <div class="note ok">
             <div class="row">
               <span class="ex-name">Prop types <small>(react-docgen-typescript)</small></span>
-              <span class="badge ok">2 prop types</span>
+              <span class="badge ok">4 prop types</span>
             </div>
             <pre><code>Component: src/switch/switch.tsx::Switch</code></pre>
             <pre><code>Props:</code></pre>
             <pre><code>asChild?: boolean
 
+/**
+ * Optional text rendered beside the toggle and associated with it via
+ * `htmlFor`. Provide an `id` so the association resolves. Omit it to keep
+ * the toggle headless and supply your own `&lt;label htmlFor&gt;`.
+ */
+label?: string
+
+reverse?: boolean
+
 size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
           </div>
         </div>
@@ -3468,6 +3610,20 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
         &lt;/div&gt;
     );
 };</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">With Label</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">The built-in `label` prop renders an associated text label beside the toggle (wired via `htmlFor`/`id`); `reverse` places the label before the toggle.</div>
+              <pre><code>const WithLabel = () =&gt; (
+    &lt;div className=&quot;flex items-center gap-6&quot;&gt;
+        &lt;Switch id=&quot;with-label&quot; label=&quot;Email&quot; defaultChecked /&gt;
+        &lt;Switch id=&quot;with-label-reverse&quot; label=&quot;SMS&quot; reverse /&gt;
+    &lt;/div&gt;
+);</code></pre>
             </div>
             <div class="note ok">
               <div class="row">
@@ -3508,7 +3664,7 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
       <div class="badges">
         
         
-        <label for="c-11-components-table-stories" class="badge ok as-toggle">9 stories</label>
+        <label for="c-12-components-table-stories" class="badge ok as-toggle">9 stories</label>
         
       </div>
     </div>
@@ -3521,7 +3677,7 @@ size?: &quot;sm&quot; | &quot;md&quot;</code></pre>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-11-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-12-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
 
@@ -3695,9 +3851,9 @@ import { Fragment } from "react";</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tag</h2>
       <div class="badges">
-        <label for="c-12-components-tag-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-13-components-tag-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-12-components-tag-stories" class="badge ok as-toggle">10 stories</label>
+        <label for="c-13-components-tag-stories" class="badge ok as-toggle">10 stories</label>
         
       </div>
     </div>
@@ -3710,9 +3866,9 @@ import { Fragment } from "react";</code></pre>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-12-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-13-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
-  <input id="c-12-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-13-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -4069,9 +4225,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Toast</h2>
       <div class="badges">
-        <label for="c-13-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-14-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-13-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-14-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
       </div>
     </div>
@@ -4084,9 +4240,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-13-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-14-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
-  <input id="c-13-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-14-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -4495,9 +4651,9 @@ visibleToasts?: number</code></pre>
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Tooltip</h2>
       <div class="badges">
-        <label for="c-14-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
+        <label for="c-15-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
         
-        <label for="c-14-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-15-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
         
       </div>
     </div>
@@ -4510,9 +4666,9 @@ visibleToasts?: number</code></pre>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-14-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-15-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
   
-  <input id="c-14-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-15-components-tooltip-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">