@agentero/design-system 0.32.0 → 0.32.2

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">279 stories ok</span></div>
+    <div class="summary"><a class="filter-pill all" data-k="all" href="#filter-all">All</a><span class="filter-pill ok" aria-disabled="true">34 components ok</span><span class="filter-pill ok" aria-disabled="true">281 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>5.2s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.9s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -1562,7 +1562,7 @@ variant?: &quot;circle&quot; | &quot;square&quot; | &quot;pillow&quot; | &quot;p
                 <div class="row">
                   <span class="ex-name">Imports</span>
                 </div>
-                <pre><code>import { Avatar } from "@agentero/design-system";</code></pre>
+                <pre><code>import { Avatar, Button } from "@agentero/design-system";</code></pre>
               </div>
           
           
@@ -2855,9 +2855,9 @@ import { CheckList } from &#39;@agentero/design-system/check-list&#39;;
     <div class="title">
       <h2><span class="status-dot dot-ok"></span> Combobox.Root</h2>
       <div class="badges">
-        <label for="c-7-components-combobox-props" class="badge ok as-toggle">38 prop types</label>
+        <label for="c-7-components-combobox-props" class="badge ok as-toggle">39 prop types</label>
         
-        <label for="c-7-components-combobox-stories" class="badge ok as-toggle">8 stories</label>
+        <label for="c-7-components-combobox-stories" class="badge ok as-toggle">10 stories</label>
         
         
       </div>
@@ -2900,7 +2900,7 @@ import { Combobox } from &#39;@agentero/design-system/combobox&#39;;
           <div class="note ok">
             <div class="row">
               <span class="ex-name">Prop types <small>(react-component-meta)</small></span>
-              <span class="badge ok">38 prop types</span>
+              <span class="badge ok">39 prop types</span>
             </div>
             <pre><code>Component: src/combobox/index.ts::Combobox</code></pre>
             <pre><code>Props:</code></pre>
@@ -3060,6 +3060,14 @@ locale?: LocalesArgument
  */
 loopFocus?: boolean = true
 
+/**
+ * Characters the query needs, spaces aside, before the list opens. Below it
+ * focusing, clicking or pressing the chevron leaves the list shut, and
+ * deleting back under it closes the list. Defaults to `0`: the list opens on
+ * focus.
+ */
+minInputLength?: number = 0
+
 /**
  * Determines if the popup enters a modal state when open.
  * - `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled.
@@ -3149,17 +3157,7 @@ virtualized?: boolean = false</code></pre>
                 <div class="row">
                   <span class="ex-name">Imports</span>
                 </div>
-                <pre><code>import {
-    Button,
-    Combobox,
-    Field,
-    FieldText,
-    IconSearch,
-    Label,
-    Modal,
-    Skeleton,
-    Tag,
-} from "@agentero/design-system";
+                <pre><code>import { Button, Combobox, Field, FieldText, Label, Modal, Skeleton, Tag } from "@agentero/design-system";
 import { Suspense } from "react";</code></pre>
               </div>
           
@@ -3169,9 +3167,11 @@ import { Suspense } from "react";</code></pre>
                 <span class="ex-name">Default</span>
                 <span class="badge ok">story ok</span>
               </div>
-              
+              <div>Search field with a magnifier and clear button over an in-memory list</div>
               <div class="hint">The common case: options are already in memory and Base UI filters them against
-what you type. Selecting a row fills the input and closes the list.</div>
+what you type. Selecting a row fills the input and closes the list. The field is
+a search out of the box — a magnifier in front, a clear button once something is
+picked — and the list hangs from the whole field.</div>
               <pre><code>const Default = () =&gt; (
     &lt;Combobox.Root items={STATES}&gt;
         &lt;Combobox.Input placeholder=&quot;Search states&quot; aria-label=&quot;Search states&quot; /&gt;
@@ -3186,6 +3186,83 @@ what you type. Selecting a row fills the input and closes the list.</div>
             &lt;/Combobox.List&gt;
         &lt;/Combobox.Content&gt;
     &lt;/Combobox.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Plain</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Bare input with no icon and no clear button</div>
+              <div class="hint">`variant=&quot;plain&quot;`: the input alone, with no magnifier and no clear button, for a
+field that needs no affordance — a FEIN lookup, a template name. The list still
+matches the field&#39;s width.</div>
+              <pre><code>const Plain = () =&gt; (
+    &lt;Combobox.Root items={STATES}&gt;
+        &lt;Combobox.Input variant=&quot;plain&quot; placeholder=&quot;State&quot; aria-label=&quot;State&quot; /&gt;
+        &lt;Combobox.Content&gt;
+            &lt;Combobox.Empty&gt;No matches found&lt;/Combobox.Empty&gt;
+            &lt;Combobox.List&gt;
+                {(state: string) =&gt; (
+                    &lt;Combobox.Item key={state} value={state}&gt;
+                        {state}
+                    &lt;/Combobox.Item&gt;
+                )}
+            &lt;/Combobox.List&gt;
+        &lt;/Combobox.Content&gt;
+    &lt;/Combobox.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Select</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Field with a chevron that toggles the list, for short known lists</div>
+              <div class="hint">`variant=&quot;select&quot;`: a chevron after the input opens and closes the list, for a
+short known list the user may want to browse before typing. It has no clear
+button by default. The chevron is out of the tab order — the input already
+opens the list from the keyboard with the arrow keys.</div>
+              <pre><code>const Select = () =&gt; (
+    &lt;Combobox.Root items={STATES}&gt;
+        &lt;Combobox.Input variant=&quot;select&quot; placeholder=&quot;Choose a state&quot; aria-label=&quot;State&quot; /&gt;
+        &lt;Combobox.Content&gt;
+            &lt;Combobox.Empty&gt;No matches found&lt;/Combobox.Empty&gt;
+            &lt;Combobox.List&gt;
+                {(state: string) =&gt; (
+                    &lt;Combobox.Item key={state} value={state}&gt;
+                        {state}
+                    &lt;/Combobox.Item&gt;
+                )}
+            &lt;/Combobox.List&gt;
+        &lt;/Combobox.Content&gt;
+    &lt;/Combobox.Root&gt;
+);</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Select With Clear</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              <div>Select field with a clear button added through showClear</div>
+              <div class="hint">`showClear` overrides the variant&#39;s default: here it adds the clear button to a
+`select`, so a picked option can be removed without selecting the text and
+deleting it. While there is a value it takes the chevron&#39;s place; clearing
+brings the chevron back. Passing `false` drops it from `search`.</div>
+              <pre><code>const SelectWithClear = () =&gt; (
+    &lt;Combobox.Root items={STATES} defaultValue=&quot;Florida&quot;&gt;
+        &lt;Combobox.Input variant=&quot;select&quot; showClear placeholder=&quot;Choose a state&quot; aria-label=&quot;State&quot; /&gt;
+        &lt;Combobox.Content&gt;
+            &lt;Combobox.Empty&gt;No matches found&lt;/Combobox.Empty&gt;
+            &lt;Combobox.List&gt;
+                {(state: string) =&gt; (
+                    &lt;Combobox.Item key={state} value={state}&gt;
+                        {state}
+                    &lt;/Combobox.Item&gt;
+                )}
+            &lt;/Combobox.List&gt;
+        &lt;/Combobox.Content&gt;
+    &lt;/Combobox.Root&gt;
 );</code></pre>
             </div>
             <div class="note ok">
@@ -3294,11 +3371,15 @@ out-of-order responses harmless. Drop a `useSuspenseQuery` where `use()` is.</di
                 <span class="ex-name">Async Search With Status</span>
                 <span class="badge ok">story ok</span>
               </div>
-              
+              <div>API search that waits for two characters, with loading status</div>
               <div class="hint">The same search without Suspense, for a consumer that gets a `loading` flag from
 its data layer instead: `filter={null}`, the rows arrive through `filteredItems`,
 `Content` is marked busy and `Status` announces the wait. The list is cleared
-before each request and a request that is no longer the latest is dropped.</div>
+before each request and a request that is no longer the latest is dropped.
+
+`minInputLength` keeps the list shut until two characters are typed — focusing
+the field opens nothing, and deleting back under the minimum closes it — and
+no request goes out for a shorter query either.</div>
               <pre><code>const AsyncSearchWithStatus = () =&gt; {
     const [results, setResults] = useState&lt;Agency[]&gt;([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -3307,6 +3388,11 @@ before each request and a request that is no longer the latest is dropped.</div>
 
     const onInputValueChange = async (query: string) =&gt; {
         const request = ++latestRequest.current;
+        if (query.trim().length &lt; MIN_QUERY_LENGTH) {
+            setResults([]);
+            setIsLoading(false);
+            return;
+        }
 
         // The previous rows go before the wait starts: a list that no longer matches what is typed
         // must not sit under the loading state.
@@ -3325,6 +3411,7 @@ before each request and a request that is no longer the latest is dropped.</div>
             items={results}
             filteredItems={results}
             filter={null}
+            minInputLength={MIN_QUERY_LENGTH}
             itemToStringLabel={(agency: Agency) =&gt; agency.name}
             isItemEqualToValue={(a: Agency, b: Agency) =&gt; a.id === b.id}
             onInputValueChange={onInputValueChange}&gt;
@@ -3379,39 +3466,6 @@ rest of the page from assistive technology, label included, and a
         &lt;Field.Description&gt;The agency this agent will be added to.&lt;/Field.Description&gt;
         &lt;Field.Error errors={[{ message: &#39;Pick an agency from the list&#39; }]} /&gt;
     &lt;/FieldText&gt;
-);</code></pre>
-            </div>
-            <div class="note ok">
-              <div class="row">
-                <span class="ex-name">With Leading Icon</span>
-                <span class="badge ok">story ok</span>
-              </div>
-              
-              <div class="hint">A leading icon is composed around the input, not baked in: not every combobox
-is a search (a FEIN lookup or a template picker are not), so the component
-ships no icon of its own. Until `InputGroup` lands in the design system, the
-marketplace search fields get theirs like this — the icon overlaid, the input
-padded past it.</div>
-              <pre><code>const WithLeadingIcon = () =&gt; (
-    &lt;Combobox.Root items={STATES}&gt;
-        &lt;div className=&quot;relative&quot;&gt;
-            &lt;IconSearch
-                aria-hidden
-                className=&quot;pointer-events-none absolute top-1/2 left-3 -z-hide size-6 -translate-y-1/2 [&amp;&gt;path]:fill-icon-default-base-tertiary&quot;
-            /&gt;
-            &lt;Combobox.Input className=&quot;pl-11&quot; placeholder=&quot;Search states&quot; aria-label=&quot;Search states&quot; /&gt;
-        &lt;/div&gt;
-        &lt;Combobox.Content&gt;
-            &lt;Combobox.Empty&gt;No matches found&lt;/Combobox.Empty&gt;
-            &lt;Combobox.List&gt;
-                {(state: string) =&gt; (
-                    &lt;Combobox.Item key={state} value={state}&gt;
-                        {state}
-                    &lt;/Combobox.Item&gt;
-                )}
-            &lt;/Combobox.List&gt;
-        &lt;/Combobox.Content&gt;
-    &lt;/Combobox.Root&gt;
 );</code></pre>
             </div>
             <div class="note ok">

package/mcp/manifests/components.json

@@ -1225,7 +1225,7 @@
           "summary": "All avatar shapes with a profile image"
         }
       ],
-      "import": "import { Avatar } from \"@agentero/design-system\";"
+      "import": "import { Avatar, Button } from \"@agentero/design-system\";"
     },
     "components-button": {
       "id": "components-button",
@@ -2007,7 +2007,7 @@
         "displayName": "Combobox.Root",
         "exportName": "Combobox",
         "filePath": "/home/runner/work/design-system/design-system/src/combobox/index.ts",
-        "description": "Root of a combobox: a text input that filters a list of options and writes the\nchosen one back into itself. With `Input` as the only trigger, the list opens on\nfocus or on the first keystroke.\n\nPass the options as `items`. For a list that comes from the server, set\n`filter={null}`, hand the already-filtered rows to `filteredItems`, and request\nthem from `onInputValueChange`; `Status` then announces the wait.\n\nWith `multiple`, the value is an array and picking a row toggles it. The list\nstays open and keeps the typed query between picks, so several rows can be\nticked from one search; closing the list (Escape, a click outside) still resets\nthe query. Each row then shows whether it is selected — see `Item`. Nothing is\nwritten back into the input: render the selection next to the field.",
+        "description": "Root of a combobox: a text input that filters a list of options and writes the\nchosen one back into itself. The list opens on focus, on the first keystroke\nor from the chevron of `Input`'s `select` variant.\n\nFor a search against an API, set `minInputLength` so the list stays shut until\nthe query is worth sending: a field that opens an empty list on focus reads as\nbroken. For a pick from a short fixed list with no typing at all, prefer a\nselect.\n\nPass the options as `items`. For a list that comes from the server, set\n`filter={null}`, hand the already-filtered rows to `filteredItems`, and request\nthem from `onInputValueChange`; `Status` then announces the wait.\n\nEvery Base UI root prop is accepted and forwarded — `items`, `filter`,\n`value`, `onValueChange` and so on. `open` stays the consumer's to control;\n`minInputLength` only refuses to open below the minimum.\n\nWith `multiple`, the value is an array and picking a row toggles it. The list\nstays open and keeps the typed query between picks, so several rows can be\nticked from one search; closing the list (Escape, a click outside) still resets\nthe query. Each row then shows whether it is selected — see `Item`. Nothing is\nwritten back into the input: render the selection next to the field.",
         "jsDocTags": {
           "summary": [
             "Root provider for an input-triggered filterable list"
@@ -2769,6 +2769,27 @@
                 "fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
               }
             ]
+          },
+          "minInputLength": {
+            "name": "minInputLength",
+            "required": false,
+            "type": {
+              "name": "number"
+            },
+            "description": "Characters the query needs, spaces aside, before the list opens. Below it\nfocusing, clicking or pressing the chevron leaves the list shut, and\ndeleting back under it closes the list. Defaults to `0`: the list opens on\nfocus.",
+            "defaultValue": {
+              "value": "0"
+            },
+            "parent": {
+              "name": "ComboboxRootProps",
+              "fileName": "src/combobox/combobox.tsx"
+            },
+            "declarations": [
+              {
+                "name": "TypeLiteral",
+                "fileName": "src/combobox/combobox.tsx"
+              }
+            ]
           }
         }
       },
@@ -2777,7 +2798,29 @@
           "id": "components-combobox--default",
           "name": "Default",
           "snippet": "const Default = () => (\n    <Combobox.Root items={STATES}>\n        <Combobox.Input placeholder=\"Search states\" aria-label=\"Search states\" />\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
-          "description": "The common case: options are already in memory and Base UI filters them against\nwhat you type. Selecting a row fills the input and closes the list."
+          "description": "The common case: options are already in memory and Base UI filters them against\nwhat you type. Selecting a row fills the input and closes the list. The field is\na search out of the box — a magnifier in front, a clear button once something is\npicked — and the list hangs from the whole field.",
+          "summary": "Search field with a magnifier and clear button over an in-memory list"
+        },
+        {
+          "id": "components-combobox--plain",
+          "name": "Plain",
+          "snippet": "const Plain = () => (\n    <Combobox.Root items={STATES}>\n        <Combobox.Input variant=\"plain\" placeholder=\"State\" aria-label=\"State\" />\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
+          "description": "`variant=\"plain\"`: the input alone, with no magnifier and no clear button, for a\nfield that needs no affordance — a FEIN lookup, a template name. The list still\nmatches the field's width.",
+          "summary": "Bare input with no icon and no clear button"
+        },
+        {
+          "id": "components-combobox--select",
+          "name": "Select",
+          "snippet": "const Select = () => (\n    <Combobox.Root items={STATES}>\n        <Combobox.Input variant=\"select\" placeholder=\"Choose a state\" aria-label=\"State\" />\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
+          "description": "`variant=\"select\"`: a chevron after the input opens and closes the list, for a\nshort known list the user may want to browse before typing. It has no clear\nbutton by default. The chevron is out of the tab order — the input already\nopens the list from the keyboard with the arrow keys.",
+          "summary": "Field with a chevron that toggles the list, for short known lists"
+        },
+        {
+          "id": "components-combobox--select-with-clear",
+          "name": "Select With Clear",
+          "snippet": "const SelectWithClear = () => (\n    <Combobox.Root items={STATES} defaultValue=\"Florida\">\n        <Combobox.Input variant=\"select\" showClear placeholder=\"Choose a state\" aria-label=\"State\" />\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
+          "description": "`showClear` overrides the variant's default: here it adds the clear button to a\n`select`, so a picked option can be removed without selecting the text and\ndeleting it. While there is a value it takes the chevron's place; clearing\nbrings the chevron back. Passing `false` drops it from `search`.",
+          "summary": "Select field with a clear button added through showClear"
         },
         {
           "id": "components-combobox--no-matches",
@@ -2800,8 +2843,9 @@
         {
           "id": "components-combobox--async-search-with-status",
           "name": "Async Search With Status",
-          "snippet": "const AsyncSearchWithStatus = () => {\n    const [results, setResults] = useState<Agency[]>([]);\n    const [isLoading, setIsLoading] = useState(false);\n    // Only the latest request may land; fast typing returns responses out of order.\n    const latestRequest = useRef(0);\n\n    const onInputValueChange = async (query: string) => {\n        const request = ++latestRequest.current;\n\n        // The previous rows go before the wait starts: a list that no longer matches what is typed\n        // must not sit under the loading state.\n        setResults([]);\n        setIsLoading(true);\n        const agencies = await searchAgencies(query);\n        if (request !== latestRequest.current) return;\n\n        setResults(agencies);\n        setIsLoading(false);\n    };\n\n    return (\n        // `filter={null}` hands filtering to the server; `filteredItems` is what came back.\n        <Combobox.Root\n            items={results}\n            filteredItems={results}\n            filter={null}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={onInputValueChange}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content aria-busy={isLoading || undefined}>\n                {/* The rows show the wait; `Status` only announces it. */}\n                <Combobox.Status className=\"sr-only\">\n                    {isLoading ? 'Searching…' : undefined}\n                </Combobox.Status>\n                {isLoading && <SkeletonRows />}\n                <Combobox.Empty>{isLoading ? undefined : 'No agencies found'}</Combobox.Empty>\n                <Combobox.List>\n                    {(agency: Agency) => (\n                        <Combobox.Item key={agency.id} value={agency}>\n                            {agency.name}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
-          "description": "The same search without Suspense, for a consumer that gets a `loading` flag from\nits data layer instead: `filter={null}`, the rows arrive through `filteredItems`,\n`Content` is marked busy and `Status` announces the wait. The list is cleared\nbefore each request and a request that is no longer the latest is dropped."
+          "snippet": "const AsyncSearchWithStatus = () => {\n    const [results, setResults] = useState<Agency[]>([]);\n    const [isLoading, setIsLoading] = useState(false);\n    // Only the latest request may land; fast typing returns responses out of order.\n    const latestRequest = useRef(0);\n\n    const onInputValueChange = async (query: string) => {\n        const request = ++latestRequest.current;\n        if (query.trim().length < MIN_QUERY_LENGTH) {\n            setResults([]);\n            setIsLoading(false);\n            return;\n        }\n\n        // The previous rows go before the wait starts: a list that no longer matches what is typed\n        // must not sit under the loading state.\n        setResults([]);\n        setIsLoading(true);\n        const agencies = await searchAgencies(query);\n        if (request !== latestRequest.current) return;\n\n        setResults(agencies);\n        setIsLoading(false);\n    };\n\n    return (\n        // `filter={null}` hands filtering to the server; `filteredItems` is what came back.\n        <Combobox.Root\n            items={results}\n            filteredItems={results}\n            filter={null}\n            minInputLength={MIN_QUERY_LENGTH}\n            itemToStringLabel={(agency: Agency) => agency.name}\n            isItemEqualToValue={(a: Agency, b: Agency) => a.id === b.id}\n            onInputValueChange={onInputValueChange}>\n            <Combobox.Input placeholder=\"Search agencies\" aria-label=\"Search agencies\" />\n            <Combobox.Content aria-busy={isLoading || undefined}>\n                {/* The rows show the wait; `Status` only announces it. */}\n                <Combobox.Status className=\"sr-only\">\n                    {isLoading ? 'Searching…' : undefined}\n                </Combobox.Status>\n                {isLoading && <SkeletonRows />}\n                <Combobox.Empty>{isLoading ? undefined : 'No agencies found'}</Combobox.Empty>\n                <Combobox.List>\n                    {(agency: Agency) => (\n                        <Combobox.Item key={agency.id} value={agency}>\n                            {agency.name}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n    );\n};",
+          "description": "The same search without Suspense, for a consumer that gets a `loading` flag from\nits data layer instead: `filter={null}`, the rows arrive through `filteredItems`,\n`Content` is marked busy and `Status` announces the wait. The list is cleared\nbefore each request and a request that is no longer the latest is dropped.\n\n`minInputLength` keeps the list shut until two characters are typed — focusing\nthe field opens nothing, and deleting back under the minimum closes it — and\nno request goes out for a shorter query either.",
+          "summary": "API search that waits for two characters, with loading status"
         },
         {
           "id": "components-combobox--inside-field-text",
@@ -2809,12 +2853,6 @@
           "snippet": "const InsideFieldText = () => (\n    <FieldText invalid required>\n        <Label>Agency</Label>\n        <Combobox.Root items={STATES}>\n            <Combobox.Input placeholder=\"Search agencies\" />\n            <Combobox.Content>\n                <Combobox.Empty>No matches found</Combobox.Empty>\n                <Combobox.List>\n                    {(state: string) => (\n                        <Combobox.Item key={state} value={state}>\n                            {state}\n                        </Combobox.Item>\n                    )}\n                </Combobox.List>\n            </Combobox.Content>\n        </Combobox.Root>\n        <Field.Description>The agency this agent will be added to.</Field.Description>\n        <Field.Error errors={[{ message: 'Pick an agency from the list' }]} />\n    </FieldText>\n);",
           "description": "Dropped into a `FieldText`, the input takes the label, the description and\nthe error from the field with nothing wired by hand: `Combobox.Input` reads the\nsame `InputContext` the plain `Input` does. It also points `aria-labelledby`\nat the label, so the name survives the list opening: Base UI then hides the\nrest of the page from assistive technology, label included, and a\n`<label for>` alone would stop naming the input."
         },
-        {
-          "id": "components-combobox--with-leading-icon",
-          "name": "With Leading Icon",
-          "snippet": "const WithLeadingIcon = () => (\n    <Combobox.Root items={STATES}>\n        <div className=\"relative\">\n            <IconSearch\n                aria-hidden\n                className=\"pointer-events-none absolute top-1/2 left-3 -z-hide size-6 -translate-y-1/2 [&>path]:fill-icon-default-base-tertiary\"\n            />\n            <Combobox.Input className=\"pl-11\" placeholder=\"Search states\" aria-label=\"Search states\" />\n        </div>\n        <Combobox.Content>\n            <Combobox.Empty>No matches found</Combobox.Empty>\n            <Combobox.List>\n                {(state: string) => (\n                    <Combobox.Item key={state} value={state}>\n                        {state}\n                    </Combobox.Item>\n                )}\n            </Combobox.List>\n        </Combobox.Content>\n    </Combobox.Root>\n);",
-          "description": "A leading icon is composed around the input, not baked in: not every combobox\nis a search (a FEIN lookup or a template picker are not), so the component\nships no icon of its own. Until `InputGroup` lands in the design system, the\nmarketplace search fields get theirs like this — the icon overlaid, the input\npadded past it."
-        },
         {
           "id": "components-combobox--inside-modal",
           "name": "Inside Modal",
@@ -2822,7 +2860,7 @@
           "description": "Inside a `Modal`, which is a Radix Dialog. The surface portals to the body, so\nthis checks that the dialog's modal layer neither blocks pointer events on the\nlist nor treats a click in it as a click outside and closes."
         }
       ],
-      "import": "import {\n    Button,\n    Combobox,\n    Field,\n    FieldText,\n    IconSearch,\n    Label,\n    Modal,\n    Skeleton,\n    Tag,\n} from \"@agentero/design-system\";\nimport { Suspense } from \"react\";"
+      "import": "import { Button, Combobox, Field, FieldText, Label, Modal, Skeleton, Tag } from \"@agentero/design-system\";\nimport { Suspense } from \"react\";"
     },
     "components-command": {
       "id": "components-command",
@@ -9552,6 +9590,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 5204
+    "durationMs": 4877
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentero/design-system",
-	"version": "0.32.0",
+	"version": "0.32.2",
 	"description": "A React component library built with Tailwind CSS v4 and Radix UI primitives",
 	"type": "module",
 	"license": "Apache-2.0",

package/src/accordion/accordion.js

@@ -35,7 +35,7 @@ var d = ({ className: r, children: s, asChild: c, ...l }) => /* @__PURE__ */ a(u
 d.displayName = "Accordion.Trigger";
 var f = ({ className: t, children: r, ...i }) => /* @__PURE__ */ a(n.Content, {
 	"data-slot": "accordion-content",
-	className: e("overflow-hidden px-4 text-sm", "motion-safe:data-[state=open]:animate-[accordionDown_200ms_ease-out]", "motion-safe:data-[state=closed]:animate-[accordionUp_200ms_ease-out]", t),
+	className: e("overflow-hidden px-4 text-sm", "motion-safe:data-[state=open]:animate-accordion-down", "motion-safe:data-[state=closed]:animate-accordion-up", t),
 	...i,
 	children: /* @__PURE__ */ a("div", {
 		className: "pb-4",

package/src/avatar/avatar.js

@@ -1,11 +1,11 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { tv as t } from "tailwind-variants";
-import { createContext as n, use as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import * as o from "@radix-ui/react-avatar";
+import { createContext as n, use as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-avatar";
 //#region src/avatar/avatar.tsx
-var s = t({
+var c = t({
 	slots: {
 		root: [
 			"flex items-center justify-center align-middle",
@@ -17,7 +17,7 @@ var s = t({
 			"border-[var(--avatar-border-color,var(--color-border-default-base-primary))]",
 			"h-fit w-fit"
 		],
-		image: ["flex object-cover box-border h-full vertical-align-middle w-full"],
+		image: ["flex object-cover box-border h-full vertical-align-middle w-full", "data-loaded-late:transition-opacity data-loaded-late:duration-200 data-loaded-late:starting:opacity-0"],
 		fallback: ["uppercase", "[&_svg]:size-[1.5em] [&_svg]:fill-neutral-500"]
 	},
 	variants: {
@@ -126,58 +126,63 @@ var s = t({
 		variant: "circle",
 		type: "photo"
 	}
-}), c = n(null), l = () => {
-	let e = r(c);
+}), l = n(null), u = () => {
+	let e = r(l);
 	if (!e) throw Error("useAvatar must be used within an AvatarProvider");
 	return e;
-}, u = ({ size: t, variant: n, type: r, ...a }) => {
-	let l = s({
+}, d = ({ size: t, variant: n, type: r, ...i }) => {
+	let o = c({
 		size: t,
 		variant: n,
 		type: r
 	});
-	return /* @__PURE__ */ i(c, {
+	return /* @__PURE__ */ a(l, {
 		value: {
 			size: t,
 			variant: n,
 			type: r,
-			slotsStyles: l
+			slotsStyles: o
 		},
-		children: /* @__PURE__ */ i(o.Root, {
-			...a,
-			className: e(l.root(), a.className)
+		children: /* @__PURE__ */ a(s.Root, {
+			...i,
+			className: e(o.root(), i.className)
 		})
 	});
-}, d = (t) => {
-	let { slotsStyles: n } = l();
-	return /* @__PURE__ */ i(o.Image, {
-		...t,
-		className: e(n.image(), t.className)
+}, f = ({ onLoadingStatusChange: t, ...n }) => {
+	let { slotsStyles: r } = u(), [o, c] = i(!1);
+	return /* @__PURE__ */ a(s.Image, {
+		...n,
+		"data-loaded-late": o || void 0,
+		onLoadingStatusChange: (e) => {
+			e === "loading" && c(!0), t?.(e);
+		},
+		className: e(r.image(), n.className)
 	});
-}, f = (t) => {
-	let { slotsStyles: n } = l();
-	return /* @__PURE__ */ i(o.Fallback, {
+}, p = (t) => {
+	let { slotsStyles: n } = u();
+	return /* @__PURE__ */ a(s.Fallback, {
 		...t,
 		className: e(n.fallback(), t.className)
 	});
-}, p = ({ alt: e, src: t, fallback: n, colorize: r, size: o, variant: s, type: c, ref: l, ...p }) => {
-	let m = r ? g(r) : void 0;
-	return /* @__PURE__ */ a(u, {
-		...p,
-		ref: l,
-		size: o,
-		variant: s,
-		type: c,
+}, m = ({ alt: e, src: t, fallback: n, colorize: r, size: s, variant: c, type: l, ref: u, ...m }) => {
+	let h = r ? _(r) : void 0, [g, v] = i(!1);
+	return /* @__PURE__ */ o(d, {
+		...m,
+		ref: u,
+		size: s,
+		variant: c,
+		type: l,
 		style: {
-			...m,
-			...p.style
+			...h,
+			...m.style
 		},
-		children: [/* @__PURE__ */ i(d, {
+		children: [/* @__PURE__ */ a(f, {
 			alt: e,
-			src: t
-		}), /* @__PURE__ */ i(f, { children: n })]
+			src: t,
+			onLoadingStatusChange: (e) => v(e === "error")
+		}), (!t || g) && /* @__PURE__ */ a(p, { children: n })]
 	});
-}, m = [
+}, h = [
 	{
 		dark: "#434343",
 		light: "#e3e3e3"
@@ -214,15 +219,15 @@ var s = t({
 		dark: "#0f8a2a",
 		light: "#d1fada"
 	}
-], h = (e) => {
+], g = (e) => {
 	let t = e.split("").reduce((e, t, n) => {
 		let r = 1;
 		for (let e = 0; e < n; e++) r *= 26;
 		return e + (t.charCodeAt(0) - 97 + 1) * r;
 	}, 0);
-	return m[(t < 0 ? -t : t) % m.length];
-}, g = (e) => {
-	let { dark: t, light: n } = h(e);
+	return h[(t < 0 ? -t : t) % h.length];
+}, _ = (e) => {
+	let { dark: t, light: n } = g(e);
 	return {
 		color: t,
 		backgroundColor: n,
@@ -230,4 +235,4 @@ var s = t({
 	};
 };
 //#endregion
-export { p as Avatar, s as avatarRecipe, l as useAvatar };
+export { m as Avatar, c as avatarRecipe, u as useAvatar };

package/src/button/button.js

@@ -245,7 +245,7 @@ var c = t({
 }), l = () => /* @__PURE__ */ i("span", {
 	"aria-label": "loading",
 	role: "status",
-	className: e("absolute inset-0 grid place-items-center", "rounded-[inherit] bg-inherit", "before:content-[\"\"] before:block before:size-[1em]", "before:border-2 before:border-solid before:rounded-full", "before:border-current before:border-t-transparent", "before:animate-spin before:[animation-duration:0.5s]")
+	className: e("absolute inset-0 grid place-items-center", "rounded-[inherit] bg-inherit", "transition-opacity duration-150 starting:opacity-0", "before:content-[\"\"] before:block before:size-[1em]", "before:border-2 before:border-solid before:rounded-full", "before:border-current before:border-t-transparent", "before:animate-spin before:[animation-duration:0.5s]")
 }), u = ({ children: t, asChild: u, variant: d, size: f, status: p, loading: m, rounded: h, align: g, fitContent: _, disabled: v, iconOnly: y, ref: b, className: x, ...S }) => {
 	let C = u ? !!y : n.toArray(t).every((e) => r(e)), w = v || m;
 	process.env.NODE_ENV !== "production" && (m && d === "link" && console.warn("Button with variant link and loading is not supported"), C && d === "link" && console.warn("Button with no text and variant link is not supported. Use it with variant tertiary instead"), u && y && r(t) && n.toArray(t.props.children).some((e) => !r(e)) && console.warn("Button with asChild and iconOnly should only contain icon children; text found inside the wrapper element"));

package/src/checkbox/checkbox.js

@@ -8,7 +8,7 @@ var s = r({ slots: {
 	root: [
 		"group/checkbox box-border inline-flex size-4 shrink-0 appearance-none items-center justify-center rounded-sm",
 		"border border-solid border-border-input-default bg-bg-input-normal",
-		"cursor-pointer transition-colors duration-200 ease-in-out",
+		"cursor-pointer transition-colors duration-150",
 		"data-[state=checked]:border-bg-checkbox-selected data-[state=checked]:bg-bg-checkbox-selected",
 		"data-[state=indeterminate]:border-bg-checkbox-selected data-[state=indeterminate]:bg-bg-checkbox-selected",
 		"outline-solid outline-2 outline-offset-2 outline-transparent",