@agentero/design-system 0.11.0 → 0.13.0

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">12 components ok</span><span class="filter-pill ok" aria-disabled="true">127 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">14 components ok</span><span class="filter-pill ok" aria-disabled="true">138 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>3.0s</strong>.
+              Using <code>react-docgen-typescript</code>. Generation took <strong>2.9s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -3220,6 +3220,171 @@ totalCount: number</code></pre>
     
   </div>
 </article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="Switch">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> Switch</h2>
+      <div class="badges">
+        <label for="c-9-components-switch-props" class="badge ok as-toggle">2 prop types</label>
+        
+        <label for="c-9-components-switch-stories" class="badge ok as-toggle">6 stories</label>
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/switch/switch.stories.tsx">components-switch · ./src/switch/switch.stories.tsx</div>
+    
+    <div class="hint">Two-state toggle for a setting that takes effect immediately. Prefer it over a Checkbox for a single boolean that applies instantly, and pair it with a `&lt;label htmlFor&gt;` to give it an accessible name.</div>
+    
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-9-components-switch-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  <input id="c-9-components-switch-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">2 prop types</span>
+            </div>
+            <pre><code>Component: src/switch/switch.tsx::Switch</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>asChild?: boolean
+
+size?: &quot;sm&quot; | &quot;md&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 { Switch } 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>
+              
+              
+              <pre><code>const Default = () =&gt; &lt;Switch size=&quot;md&quot; disabled={false} defaultChecked aria-label=&quot;Toggle setting&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Sizes</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">The `sm` and `md` sizes compared.</div>
+              <pre><code>const Sizes = () =&gt; (
+    &lt;div className=&quot;flex items-center gap-6&quot;&gt;
+        &lt;div className=&quot;flex items-center gap-2&quot;&gt;
+            &lt;Switch id=&quot;size-sm&quot; size=&quot;sm&quot; defaultChecked /&gt;
+            &lt;label htmlFor=&quot;size-sm&quot; className=&quot;text-sm text-text-default-base-primary&quot;&gt;
+                Small
+            &lt;/label&gt;
+        &lt;/div&gt;
+        &lt;div className=&quot;flex items-center gap-2&quot;&gt;
+            &lt;Switch id=&quot;size-md&quot; size=&quot;md&quot; defaultChecked /&gt;
+            &lt;label htmlFor=&quot;size-md&quot; className=&quot;text-sm text-text-default-base-primary&quot;&gt;
+                Medium
+            &lt;/label&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">States</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">Unchecked and checked tracks.</div>
+              <pre><code>const States = () =&gt; &lt;div className=&quot;flex items-center gap-6&quot;&gt;
+    &lt;Switch size=&quot;md&quot; disabled={false} defaultChecked={false} aria-label=&quot;Off&quot; /&gt;
+    &lt;Switch size=&quot;md&quot; disabled={false} defaultChecked aria-label=&quot;On&quot; /&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">Disabled switches are dimmed and reject pointer and keyboard interaction.</div>
+              <pre><code>const Disabled = () =&gt; (
+    &lt;div className=&quot;flex items-center gap-6&quot;&gt;
+        &lt;Switch disabled aria-label=&quot;Disabled off&quot; /&gt;
+        &lt;Switch disabled defaultChecked aria-label=&quot;Disabled on&quot; /&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Controlled</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">Controlled switch wired to component state via `checked` + `onCheckedChange`.</div>
+              <pre><code>const Controlled = () =&gt; {
+    const [enabled, setEnabled] = useState(false);
+
+    return (
+        &lt;div className=&quot;flex items-center gap-2&quot;&gt;
+            &lt;Switch id=&quot;controlled&quot; checked={enabled} onCheckedChange={setEnabled} /&gt;
+            &lt;label htmlFor=&quot;controlled&quot; className=&quot;text-sm text-text-default-base-primary&quot;&gt;
+                Notifications {enabled ? &#39;on&#39; : &#39;off&#39;}
+            &lt;/label&gt;
+        &lt;/div&gt;
+    );
+};</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Setting Row</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">Switch aligned in a labelled settings row.</div>
+              <pre><code>const SettingRow = () =&gt; (
+    &lt;div className=&quot;flex w-80 items-center justify-between gap-4 rounded-lg border border-border-default-base-primary bg-bg-default-base-primary p-4&quot;&gt;
+        &lt;div className=&quot;flex flex-col gap-0.5&quot;&gt;
+            &lt;label htmlFor=&quot;marketing&quot; className=&quot;text-sm font-medium text-text-default-base-primary&quot;&gt;
+                Marketing emails
+            &lt;/label&gt;
+            &lt;p className=&quot;text-xs text-text-default-base-secondary&quot;&gt;
+                Receive product updates and offers.
+            &lt;/p&gt;
+        &lt;/div&gt;
+        &lt;Switch id=&quot;marketing&quot; defaultChecked /&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+        </div>
+    
+  </div>
+</article>
 <article
   class="card 
   no-error 
@@ -3234,7 +3399,7 @@ totalCount: number</code></pre>
       <div class="badges">
         
         
-        <label for="c-9-components-table-stories" class="badge ok as-toggle">9 stories</label>
+        <label for="c-10-components-table-stories" class="badge ok as-toggle">9 stories</label>
         
       </div>
     </div>
@@ -3247,7 +3412,7 @@ totalCount: number</code></pre>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-9-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-10-components-table-stories" class="tg tg-stories" type="checkbox" hidden />
   
   
 
@@ -3421,9 +3586,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-10-components-tag-props" class="badge ok as-toggle">6 prop types</label>
+        <label for="c-11-components-tag-props" class="badge ok as-toggle">6 prop types</label>
         
-        <label for="c-10-components-tag-stories" class="badge ok as-toggle">10 stories</label>
+        <label for="c-11-components-tag-stories" class="badge ok as-toggle">10 stories</label>
         
       </div>
     </div>
@@ -3436,9 +3601,9 @@ import { Fragment } from "react";</code></pre>
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-10-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-11-components-tag-stories" class="tg tg-stories" type="checkbox" hidden />
   
-  <input id="c-10-components-tag-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-11-components-tag-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -3795,9 +3960,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-11-components-toast-props" class="badge ok as-toggle">11 prop types</label>
+        <label for="c-12-components-toast-props" class="badge ok as-toggle">11 prop types</label>
         
-        <label for="c-11-components-toast-stories" class="badge ok as-toggle">11 stories</label>
+        <label for="c-12-components-toast-stories" class="badge ok as-toggle">11 stories</label>
         
       </div>
     </div>
@@ -3810,9 +3975,9 @@ variant?: &quot;ghost&quot; | &quot;secondary&quot; | &quot;tertiary&quot; | &qu
   <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
   
   
-  <input id="c-11-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
+  <input id="c-12-components-toast-stories" class="tg tg-stories" type="checkbox" hidden />
   
-  <input id="c-11-components-toast-props" class="tg tg-props" type="checkbox" hidden />
+  <input id="c-12-components-toast-props" class="tg tg-props" type="checkbox" hidden />
 
   <div class="panels">
     
@@ -4207,6 +4372,188 @@ visibleToasts?: number</code></pre>
             </div>
         </div>
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="Tooltip">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> Tooltip</h2>
+      <div class="badges">
+        <label for="c-13-components-tooltip-props" class="badge ok as-toggle">9 prop types</label>
+        
+        <label for="c-13-components-tooltip-stories" class="badge ok as-toggle">5 stories</label>
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/tooltip/tooltip.stories.tsx">components-tooltip · ./src/tooltip/tooltip.stories.tsx</div>
+    
+    <div class="hint">Tooltip reveals a short, non-essential hint anchored to a trigger element on hover or focus.</div>
+    
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-13-components-tooltip-stories" class="tg tg-stories" type="checkbox" hidden />
+  
+  <input id="c-13-components-tooltip-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">9 prop types</span>
+            </div>
+            <pre><code>Component: src/tooltip/tooltip.tsx::Tooltip</code></pre>
+            <pre><code>Props:</code></pre>
+            <pre><code>/**
+ * Preferred alignment against the trigger. Defaults to `&#39;center&#39;`.
+ */
+align?: &quot;center&quot; | &quot;start&quot; | &quot;end&quot;
+
+/**
+ * Merge Radix&#39;s behavior onto an already-interactive child instead of wrapping it in a `&lt;button&gt;`. Defaults to `false`.
+ */
+asChild?: boolean = false
+
+/**
+ * The trigger element. Hovering or focusing it reveals the tooltip.
+ */
+children: ReactNode
+
+/**
+ * Extra classes for the content surface, merged last.
+ */
+className?: string
+
+/**
+ * The floating hint. Keep it short — labels or hints, not paragraphs.
+ */
+content: ReactNode
+
+/**
+ * Delay in ms before opening on hover. Defaults to `0`; focus always opens instantly.
+ */
+delayDuration?: number = 0
+
+/**
+ * Hide the tooltip when the trigger is clipped away (e.g. scrolled out of an `overflow` container).
+ */
+hideWhenDetached?: boolean
+
+/**
+ * Preferred side of the trigger; flips on collision. Defaults to `&#39;top&#39;`.
+ */
+side?: &quot;top&quot; | &quot;right&quot; | &quot;bottom&quot; | &quot;left&quot; = top
+
+/**
+ * Distance in pixels between the tooltip and its trigger. Defaults to `4`.
+ */
+sideOffset?: number = 4</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 { Button, Tooltip } 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 hint revealed on hover; hides again on unhover.</div>
+              <pre><code>const Default = () =&gt; &lt;Tooltip content=&quot;Archive this carrier&quot; side=&quot;top&quot; asChild&gt;
+    &lt;Button variant=&quot;secondary&quot;&gt;Hover me&lt;/Button&gt;
+&lt;/Tooltip&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Opens On Focus</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">Opens on keyboard focus too, wiring `aria-describedby` on the trigger.</div>
+              <pre><code>const OpensOnFocus = () =&gt; &lt;Tooltip content=&quot;Archive this carrier&quot; side=&quot;top&quot; asChild&gt;
+    &lt;Button variant=&quot;secondary&quot;&gt;Focus me&lt;/Button&gt;
+&lt;/Tooltip&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Sides</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">`side` sets the preferred placement; it flips on viewport collision.</div>
+              <pre><code>const Sides = () =&gt; (
+    &lt;div className=&quot;grid grid-cols-2 gap-6&quot;&gt;
+        &lt;Tooltip content=&quot;Tooltip on top&quot; side=&quot;top&quot; asChild&gt;
+            &lt;Button variant=&quot;secondary&quot;&gt;Top&lt;/Button&gt;
+        &lt;/Tooltip&gt;
+        &lt;Tooltip content=&quot;Tooltip on the right&quot; side=&quot;right&quot; asChild&gt;
+            &lt;Button variant=&quot;secondary&quot;&gt;Right&lt;/Button&gt;
+        &lt;/Tooltip&gt;
+        &lt;Tooltip content=&quot;Tooltip on the bottom&quot; side=&quot;bottom&quot; asChild&gt;
+            &lt;Button variant=&quot;secondary&quot;&gt;Bottom&lt;/Button&gt;
+        &lt;/Tooltip&gt;
+        &lt;Tooltip content=&quot;Tooltip on the left&quot; side=&quot;left&quot; asChild&gt;
+            &lt;Button variant=&quot;secondary&quot;&gt;Left&lt;/Button&gt;
+        &lt;/Tooltip&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">As Child</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">`asChild` decorates an already-interactive trigger instead of wrapping it in a `&lt;button&gt;`.</div>
+              <pre><code>const AsChild = () =&gt; &lt;Tooltip content=&quot;Opens in a new tab&quot; side=&quot;bottom&quot; asChild&gt;
+    &lt;a
+        href=&quot;https://agentero.com&quot;
+        target=&quot;_blank&quot;
+        rel=&quot;noreferrer&quot;
+        className=&quot;text-text-default-base-primary underline&quot;&gt;Docs
+                    &lt;/a&gt;
+&lt;/Tooltip&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Long Content</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">Content wraps at the `32ch` max width.</div>
+              <pre><code>const LongContent = () =&gt; &lt;Tooltip
+    content=&quot;This carrier requires a completed appointment before you can request quotes for this line of business.&quot;
+    side=&quot;top&quot;
+    asChild&gt;
+    &lt;Button variant=&quot;secondary&quot;&gt;Why is this disabled?&lt;/Button&gt;
+&lt;/Tooltip&gt;;</code></pre>
+            </div>
+        </div>
+    
   </div>
 </article>
     </div>