@agentero/design-system 0.4.1 → 0.5.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">5 components ok</span><span class="filter-pill ok" aria-disabled="true">67 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">6 components ok</span><span class="filter-pill ok" aria-disabled="true">79 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.0s</strong>.
+              Using <code>react-docgen-typescript</code>. Generation took <strong>2.3s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -2277,6 +2277,226 @@ size?: &quot;sm&quot; | &quot;md&quot; | &quot;lg&quot;</code></pre>
             </div>
         </div>
     
+  </div>
+</article>
+<article
+  class="card 
+  no-error 
+  no-info 
+  no-story-error
+  no-doc-error"
+  role="listitem"
+  aria-label="StatusBall">
+  <div class="head">
+    <div class="title">
+      <h2><span class="status-dot dot-ok"></span> StatusBall</h2>
+      <div class="badges">
+        
+        
+        <label for="c-5-design-system-feedback-statusball-stories" class="badge ok as-toggle">12 stories</label>
+        
+      </div>
+    </div>
+    <div class="meta" title="./src/status-ball/status-ball.stories.tsx">design-system-feedback-statusball · ./src/status-ball/status-ball.stories.tsx</div>
+    
+    <div class="hint">StatusBall renders a small colored dot that marks the state of an adjacent label — appointment confirmation, license validity, availability, or any list row where a single glyph of color communicates status. Pair it with text; the dot alone is not announced to assistive technologies, so the surrounding label must carry the meaning.</div>
+    
+  </div>
+
+  <!-- ⬇️ Hidden toggles must be siblings BEFORE .panels -->
+  
+  
+  <input id="c-5-design-system-feedback-statusball-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 { StatusBall } 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>Default neutral dot representing an inactive status</div>
+              <div class="hint">The default dot — `color=&quot;neutral&quot;` for an unknown or inactive status. Drop next to a text label to surface state at a glance.</div>
+              <pre><code>const Default = () =&gt; &lt;div className=&quot;flex items-center gap-2&quot;&gt;
+    &lt;StatusBall color=&quot;neutral&quot; /&gt;
+&lt;/div&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Intents</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Every intent paired with a representative status label</div>
+              <div class="hint">All 8 semantic intents rendered in a single grid, each paired with a sample label. Consumers typically drive the `color` prop from a domain-specific status → intent lookup table.</div>
+              <pre><code>const Intents = () =&gt; {
+    const samples: { color: (typeof INTENTS)[number]; label: string }[] = [
+        { color: &#39;success&#39;, label: &#39;Active&#39; },
+        { color: &#39;info&#39;, label: &#39;Scheduled&#39; },
+        { color: &#39;warning&#39;, label: &#39;Pending&#39; },
+        { color: &#39;danger&#39;, label: &#39;Expired&#39; },
+        { color: &#39;creative&#39;, label: &#39;In review&#39; },
+        { color: &#39;playful&#39;, label: &#39;Flagged&#39; },
+        { color: &#39;dynamic&#39;, label: &#39;Needs attention&#39; },
+        { color: &#39;neutral&#39;, label: &#39;Inactive&#39; }
+    ];
+
+    return (
+        &lt;div className=&quot;grid grid-cols-2 gap-x-8 gap-y-3&quot;&gt;
+            {samples.map(({ color, label }) =&gt; (
+                &lt;div key={color} className=&quot;flex items-center gap-2&quot;&gt;
+                    &lt;StatusBall color={color} /&gt;
+                    &lt;span className=&quot;text-sm text-text-default-base-primary&quot;&gt;{label}&lt;/span&gt;
+                &lt;/div&gt;
+            ))}
+        &lt;/div&gt;
+    );
+};</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Success</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Success dot for positive or active statuses</div>
+              <div class="hint">Success dot for positive / active states — the most common pairing for &quot;live&quot; records such as active licenses or confirmed appointments.</div>
+              <pre><code>const Success = () =&gt; &lt;StatusBall color=&quot;success&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Info</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Info dot for informational statuses</div>
+              <div class="hint">Info dot for informational or neutral-positive states — e.g., scheduled or queued records that are progressing normally.</div>
+              <pre><code>const Info = () =&gt; &lt;StatusBall color=&quot;info&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Warning</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Warning dot for pending or approaching-deadline statuses</div>
+              <div class="hint">Warning dot for pending states or records approaching a deadline — e.g., a license nearing expiration or an appointment awaiting confirmation.</div>
+              <pre><code>const Warning = () =&gt; &lt;StatusBall color=&quot;warning&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Danger</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Danger dot for error or expired statuses</div>
+              <div class="hint">Danger dot for error / expired / blocking states — e.g., an expired license or a failed payment that blocks progress.</div>
+              <pre><code>const Danger = () =&gt; &lt;StatusBall color=&quot;danger&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Creative</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Creative dot for category-specific statuses</div>
+              <div class="hint">Creative dot for category-specific statuses without a direct success/info/ warning/danger mapping — often used for &quot;in review&quot; or &quot;under assessment&quot; domain states.</div>
+              <pre><code>const Creative = () =&gt; &lt;StatusBall color=&quot;creative&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Dynamic</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Dynamic dot for attention-needed statuses</div>
+              <div class="hint">Dynamic dot for attention-worthy states that sit between warning and danger — e.g., records that need action soon but are not yet failed.</div>
+              <pre><code>const Dynamic = () =&gt; &lt;StatusBall color=&quot;dynamic&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Playful</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Playful dot for flagged or priority statuses</div>
+              <div class="hint">Playful dot for flagged or priority domain states that need to stand out from warnings with a distinct hue.</div>
+              <pre><code>const Playful = () =&gt; &lt;StatusBall color=&quot;playful&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Neutral</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Neutral dot for inactive or unknown statuses</div>
+              <div class="hint">Neutral dot for inactive, unknown, or default states — the fallback when no other intent applies.</div>
+              <pre><code>const Neutral = () =&gt; &lt;StatusBall color=&quot;neutral&quot; /&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">In List</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>StatusBall paired with labels inside a list</div>
+              <div class="hint">StatusBall inside a list row — the canonical production usage, mirroring the appointment and license list patterns in `producerflow/mono`. Each row pairs a dot with a label and supporting text.</div>
+              <pre><code>const InList = () =&gt; {
+    const rows = [
+        { color: &#39;success&#39;, name: &#39;Ada Lovelace&#39;, status: &#39;Active&#39; },
+        { color: &#39;warning&#39;, name: &#39;Grace Hopper&#39;, status: &#39;Pending renewal&#39; },
+        { color: &#39;danger&#39;, name: &#39;Alan Turing&#39;, status: &#39;Expired&#39; },
+        { color: &#39;neutral&#39;, name: &#39;Katherine Johnson&#39;, status: &#39;Inactive&#39; }
+    ] as const;
+
+    return (
+        &lt;ul className=&quot;w-80 divide-y divide-border-default-base-primary rounded-lg border border-border-default-base-primary bg-bg-default-base-primary&quot;&gt;
+            {rows.map(row =&gt; (
+                &lt;li key={row.name} className=&quot;flex items-center gap-3 px-4 py-3&quot;&gt;
+                    &lt;StatusBall color={row.color} /&gt;
+                    &lt;div className=&quot;flex flex-col&quot;&gt;
+                        &lt;span className=&quot;text-sm font-medium text-text-default-base-primary&quot;&gt;{row.name}&lt;/span&gt;
+                        &lt;span className=&quot;text-xs text-text-default-base-secondary&quot;&gt;{row.status}&lt;/span&gt;
+                    &lt;/div&gt;
+                &lt;/li&gt;
+            ))}
+        &lt;/ul&gt;
+    );
+};</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">In Pill</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>StatusBall inside a rounded status pill</div>
+              <div class="hint">StatusBall inside a status pill — a tinted badge that pairs the dot with a label in a single rounded container. Use when the status needs more visual weight than a bare list row provides.</div>
+              <pre><code>const InPill = () =&gt; (
+    &lt;div className=&quot;flex flex-wrap items-center gap-2&quot;&gt;
+        &lt;span className=&quot;inline-flex items-center gap-1.5 rounded-full border border-border-default-base-primary bg-bg-default-base-primary px-2.5 py-1 text-xs text-text-default-base-primary&quot;&gt;
+            &lt;StatusBall color=&quot;success&quot; /&gt;
+            Active
+        &lt;/span&gt;
+        &lt;span className=&quot;inline-flex items-center gap-1.5 rounded-full border border-border-default-base-primary bg-bg-default-base-primary px-2.5 py-1 text-xs text-text-default-base-primary&quot;&gt;
+            &lt;StatusBall color=&quot;warning&quot; /&gt;
+            Pending
+        &lt;/span&gt;
+        &lt;span className=&quot;inline-flex items-center gap-1.5 rounded-full border border-border-default-base-primary bg-bg-default-base-primary px-2.5 py-1 text-xs text-text-default-base-primary&quot;&gt;
+            &lt;StatusBall color=&quot;danger&quot; /&gt;
+            Expired
+        &lt;/span&gt;
+    &lt;/div&gt;
+);</code></pre>
+            </div>
+        </div>
+    
   </div>
 </article>
     </div>