@agentero/design-system 0.26.0 → 0.26.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">26 components ok</span><span class="filter-pill ok" aria-disabled="true">203 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">26 components ok</span><span class="filter-pill ok" aria-disabled="true">204 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.0s</strong>.
+              Using <code>react-component-meta</code>. Generation took <strong>4.5s</strong>.
             </div>
     <h2 class="section-title">Components</h2>
     <div class="grid" role="list">
@@ -2580,7 +2580,7 @@ import { CheckList } from &#39;@agentero/design-system/check-list&#39;;
       <div class="badges">
         <label for="c-6-components-command-props" class="badge ok as-toggle">10 prop types</label>
         
-        <label for="c-6-components-command-stories" class="badge ok as-toggle">5 stories</label>
+        <label for="c-6-components-command-stories" class="badge ok as-toggle">6 stories</label>
         
         
       </div>
@@ -2791,6 +2791,26 @@ and `scroll-py-2` keeps that row off the container edges.</div>
                             &lt;/Command.Item&gt;
     &lt;/Command.List&gt;
     &lt;Command.Empty&gt;No results found.&lt;/Command.Empty&gt;
+&lt;/Command.Root&gt;;</code></pre>
+            </div>
+            <div class="note ok">
+              <div class="row">
+                <span class="ex-name">Disabled Item</span>
+                <span class="badge ok">story ok</span>
+              </div>
+              
+              <div class="hint">A `disabled` row stays visible and searchable but cannot be chosen. cmdk skips it with the
+arrow keys and swallows the click, and the row drops its hover and active styling so the
+list does not invite the pointer.</div>
+              <pre><code>const DisabledItem = () =&gt; &lt;Command.Root label=&quot;Search agencies&quot;&gt;
+    &lt;Command.Input placeholder=&quot;Search...&quot; /&gt;
+    &lt;Command.List&gt;
+        &lt;Command.Item value=&quot;pinnacle&quot; onSelect={handleDisabledSelect}&gt;Pinnacle Shield Insurance
+                            &lt;/Command.Item&gt;
+        &lt;Command.Item value=&quot;horizon&quot; disabled onSelect={handleDisabledSelect}&gt;Horizon Risk Solutions
+                            &lt;/Command.Item&gt;
+    &lt;/Command.List&gt;
+    &lt;Command.Empty&gt;No results found.&lt;/Command.Empty&gt;
 &lt;/Command.Root&gt;;</code></pre>
             </div>
         </div>

package/mcp/manifests/components.json

@@ -1923,6 +1923,12 @@
           "id": "components-command--keyboard-navigation",
           "name": "Keyboard Navigation",
           "snippet": "const KeyboardNavigation = () => <Command.Root label=\"Search commands\">\n    <Command.Input placeholder=\"Search...\" />\n    <Command.List>\n        <Command.Item value=\"home\" keywords={['Homeowners']} onSelect={handleSelect}>Homeowners\n                            </Command.Item>\n        <Command.Item value=\"auto\" keywords={['Auto']} onSelect={handleSelect}>Auto\n                            </Command.Item>\n    </Command.List>\n    <Command.Empty>No results found.</Command.Empty>\n</Command.Root>;"
+        },
+        {
+          "id": "components-command--disabled-item",
+          "name": "Disabled Item",
+          "snippet": "const DisabledItem = () => <Command.Root label=\"Search agencies\">\n    <Command.Input placeholder=\"Search...\" />\n    <Command.List>\n        <Command.Item value=\"pinnacle\" onSelect={handleDisabledSelect}>Pinnacle Shield Insurance\n                            </Command.Item>\n        <Command.Item value=\"horizon\" disabled onSelect={handleDisabledSelect}>Horizon Risk Solutions\n                            </Command.Item>\n    </Command.List>\n    <Command.Empty>No results found.</Command.Empty>\n</Command.Root>;",
+          "description": "A `disabled` row stays visible and searchable but cannot be chosen. cmdk skips it with the\narrow keys and swallows the click, and the row drops its hover and active styling so the\nlist does not invite the pointer."
         }
       ],
       "import": "import { Command } from \"@agentero/design-system\";"
@@ -7281,6 +7287,6 @@
   },
   "meta": {
     "docgen": "react-component-meta",
-    "durationMs": 3983
+    "durationMs": 4462
   }
 }

package/package.json

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

package/src/command/command.d.ts

@@ -220,7 +220,8 @@ export declare const Group: {
  * @property {string} [className] - Additional CSS classes to apply.
  *
  * @dataAttribute {string} data-selected - "true" on the active row, "false" otherwise
- * @dataAttribute {string} data-disabled - "true" when disabled, "false" otherwise
+ * @dataAttribute {string} data-disabled - "true" when disabled, "false" otherwise. A disabled row
+ *   drops the hover and active backgrounds and renders in the disabled text color.
  */
 type ItemProps = ComponentProps<typeof CommandPrimitive.Item>;
 /**

package/src/command/command.js

@@ -5,8 +5,8 @@ import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { Command as i } from "cmdk";
 //#region src/command/command.tsx
 var a = t({ slots: {
-	root: ["overflow-hidden rounded-md bg-bg-default-base-primary shadow-xl", "border border-border-default-base-secondary"],
-	search: ["flex items-center gap-2 px-4 py-3", "border-b border-border-default-base-secondary"],
+	root: ["overflow-hidden rounded-md bg-bg-default-base-primary shadow-xl", "border border-border-default-base-primary"],
+	search: ["flex items-center gap-2 px-4 py-3", "border-b border-border-default-base-primary"],
 	searchIcon: "shrink-0 pointer-events-none [&>path]:fill-icon-default-base-tertiary",
 	input: ["w-full border-none bg-transparent text-sm text-text-default-base-primary outline-none", "placeholder:text-text-default-base-tertiary"],
 	list: ["max-h-65.25 overflow-y-auto rounded-md px-1 py-2 outline-none scroll-py-2", "not-has-[[cmdk-item]]:py-0"],
@@ -14,7 +14,9 @@ var a = t({ slots: {
 	item: [
 		"flex items-center rounded-md px-3 py-2 text-sm text-text-default-base-primary",
 		"cursor-pointer hover:bg-bg-default-base-tertiary",
-		"data-[selected=true]:bg-bg-default-base-tertiary"
+		"data-[selected=true]:bg-bg-default-base-tertiary",
+		"data-[disabled=true]:cursor-default data-[disabled=true]:text-text-default-disable-primary",
+		"data-[disabled=true]:hover:bg-transparent data-[disabled=true]:data-[selected=true]:bg-transparent"
 	]
 } }), o = a(), s = ({ className: e, ...t }) => /* @__PURE__ */ n(i, {
 	"data-slot": "command-root",