@ai-matrx/agents 0.59.230 → 0.59.232

package/CHANGELOG.md

@@ -1,10 +1,32 @@
 # Changelog
 
-## 0.59.230
+## 0.59.232
 
 UNVERIFIED: this release has no Unreleased entry and the source comparison could not be made (the caller supplied no source comparison). Whether source changed is unknown; consumer action is unknown.
 Check the package's gitHead on npm against this version's gitHead: `git diff <previous gitHead> <this gitHead> -- apps/shared/matrx-agents/src`.
 
+## 0.59.231
+
+Automatic changed-only republish (docs/metadata drift since the last published version; verified: `git diff 35a306a12e 93aada8319 -- apps/shared/matrx-agents/src`
+has no shipped-source changes outside tests, fixtures and docs). No consumer action required.
+
+## 0.59.230
+
+The agent picker windows its list. `AgentListContent` (the body of
+`AgentListInlinePicker`, `AgentListDropdown` and `AgentListPanel`) mounted every
+agent as a row — measured live on a 605-agent tab: ~5,000 extra DOM nodes and a
+0.8–2.8 s main-thread block on every open. Past 50 rows it now renders only the
+rows the viewport shows plus overscan (`computeWindow` from
+`@ai-matrx/design-system/data-table/virtual-window`), with spacers keeping the
+scroll height exact; rows are a fixed `AGENT_ROW_HEIGHT` (36 px, exported).
+The list is a `listbox` of `option`s (`aria-setsize`/`aria-posinset`), and the
+search field is its `combobox`: ArrowUp/ArrowDown/PageUp/PageDown move the
+highlight (`aria-activedescendant`), scrolling unmounted rows into view, and
+Enter picks. Opening with a selected agent that is not pinned scrolls it into
+view. `SearchInput` takes optional `onKeyDown` and `inputProps`. Proof:
+`catalog/react/picker-virtualized.test.tsx` (600 agents; red on the old list).
+No consumer action required.
+
 ## 0.59.229
 
 Automatic changed-only republish (docs/metadata drift since the last published version; verified: `git diff b18bc55fba 3a8fce70c3 -- apps/shared/matrx-agents/src`
@@ -2364,6 +2386,8 @@ No source changes intended and no consumer action required.
 
 ## Unreleased
 
+- **`@ai-matrx/agents/mandates` re-exports the mandate keys from `@ai-matrx/api/intelligence`** (their one home; the identical `mandates/keys.generated.ts` copy is gone and the generator writes only the api file). The snapshots stay here. Consumer action: none.
+
 
 - **`ArrowUpDownIcon`, `MessageCircleIcon` and `RocketIcon` (catalog/react/icons) are re-exports of `@ai-matrx/design-system/icons`**, like `FolderIcon`/`TagIcon`/`RotateCcwIcon` before them, so the web picker draws the lucide 1.48 glyphs. The shared `icon-paths` table is untouched, the native entry still draws from it. Consumer action: none.
 - **The mandate key module has one home (packages-copies lane, 2026-10-21).** `mandates/keys.generated.ts` is deleted; the generator writes only `@ai-matrx/api`'s `intelligence/keys.generated.ts` and `@ai-matrx/agents/mandates` re-exports from it. Consumer action: none.

package/dist/catalog/react/index.cjs

@@ -1040,7 +1040,9 @@ var SearchInput = ({
   ref,
   value,
   onChange,
-  placeholder
+  placeholder,
+  onKeyDown,
+  inputProps
 }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1.5 h-7 px-2 rounded-md bg-muted/40 border border-border/50", children: [
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_icons.SearchIcon, { className: "w-3 h-3 text-muted-foreground shrink-0" }),
   /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
@@ -1050,6 +1052,8 @@ var SearchInput = ({
       type: "text",
       value,
       onChange: (e) => onChange(e.target.value),
+      onKeyDown,
+      ...inputProps,
       placeholder,
       className: "flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground/50 outline-none min-w-0",
       style: { fontSize: "16px" }
@@ -1505,6 +1509,7 @@ function AgentDetailCard({ agent, onSelect, duplicate, onHoldChange }) {
 
 // catalog/react/AgentListContent.tsx
 var import_design_system5 = require("@ai-matrx/design-system");
+var import_virtual_window = require("@ai-matrx/design-system/data-table/virtual-window");
 var import_react7 = require("react");
 
 // catalog/react/AgentFilterBar.tsx
@@ -1775,6 +1780,10 @@ function AgentRow({
 // catalog/react/AgentListContent.tsx
 var import_icons10 = require("@ai-matrx/design-system/icons");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+var AGENT_ROW_HEIGHT = 36;
+var UNMEASURED_VIEWPORT = 480;
+var ROW_OVERSCAN = 8;
+var WINDOW_ABOVE = 50;
 function AgentListContent({
   agents,
   isLoading,
@@ -1806,11 +1815,104 @@ function AgentListContent({
 }) {
   const catalog = useAgentCatalog();
   const listScrollRef = (0, import_react7.useRef)(null);
+  const windowRef = (0, import_react7.useRef)(null);
+  const listboxId = (0, import_react7.useId)();
+  const [scrollTop, setScrollTop] = (0, import_react7.useState)(0);
+  const [viewport, setViewport] = (0, import_react7.useState)(0);
+  const [listStart, setListStart] = (0, import_react7.useState)(0);
+  const [activeIndex, setActiveIndex] = (0, import_react7.useState)(-1);
+  const [resetKey, setResetKey] = (0, import_react7.useState)(
+    `${consumer.tab}\0${consumer.searchTerm}`
+  );
+  const nextResetKey = `${consumer.tab}\0${consumer.searchTerm}`;
+  if (nextResetKey !== resetKey) {
+    setResetKey(nextResetKey);
+    setActiveIndex(-1);
+  }
+  const defaultAgentId = defaultRow?.row?.id ?? null;
+  (0, import_react7.useLayoutEffect)(() => {
+    const scroller = listScrollRef.current;
+    if (!scroller) return void 0;
+    const measure = () => {
+      setViewport(scroller.clientHeight);
+      setListStart(windowRef.current?.offsetTop ?? 0);
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(measure);
+    observer.observe(scroller);
+    return () => observer.disconnect();
+  }, [isLoading, pinnedAgent?.id, defaultAgentId, agents.length === 0]);
   (0, import_react7.useEffect)(() => {
-    if (listOpen && pinnedAgent) {
-      listScrollRef.current?.scrollTo({ top: 0 });
+    const scroller = listScrollRef.current;
+    if (!listOpen || !scroller) return;
+    if (pinnedAgent) {
+      scroller.scrollTo({ top: 0 });
+      return;
+    }
+    const index = activeAgentId ? agents.findIndex((a) => a.id === activeAgentId) : -1;
+    if (index < 0) return;
+    const view = scroller.clientHeight || UNMEASURED_VIEWPORT;
+    const top = Math.max(
+      0,
+      (windowRef.current?.offsetTop ?? 0) + index * AGENT_ROW_HEIGHT - (view - AGENT_ROW_HEIGHT) / 2
+    );
+    scroller.scrollTo({ top });
+    setScrollTop(top);
+  }, [listOpen, pinnedAgent?.id, activeAgentId, isLoading]);
+  const win = agents.length <= WINDOW_ABOVE ? { start: 0, end: agents.length, padStart: 0, padEnd: 0 } : (0, import_virtual_window.computeWindow)({
+    count: agents.length,
+    itemSize: AGENT_ROW_HEIGHT,
+    viewport: viewport > 0 ? viewport : UNMEASURED_VIEWPORT,
+    offset: Math.max(0, scrollTop - listStart),
+    overscan: ROW_OVERSCAN
+  });
+  const visibleAgents = agents.slice(win.start, win.end);
+  const optionId = (index) => `${listboxId}-option-${index}`;
+  const revealIndex = (index) => {
+    const scroller = listScrollRef.current;
+    if (!scroller) return;
+    const view = scroller.clientHeight || UNMEASURED_VIEWPORT;
+    const top = listStart + index * AGENT_ROW_HEIGHT;
+    const bottom = top + AGENT_ROW_HEIGHT;
+    let next = null;
+    if (top < scroller.scrollTop) next = top;
+    else if (bottom > scroller.scrollTop + view) next = bottom - view;
+    if (next === null) return;
+    scroller.scrollTop = next;
+    setScrollTop(next);
+  };
+  const handleListKeyDown = (event) => {
+    if (agents.length === 0) return;
+    const last = agents.length - 1;
+    let next = null;
+    switch (event.key) {
+      case "ArrowDown":
+        next = activeIndex < 0 ? 0 : Math.min(last, activeIndex + 1);
+        break;
+      case "ArrowUp":
+        next = activeIndex <= 0 ? 0 : activeIndex - 1;
+        break;
+      case "PageDown":
+        next = Math.min(last, Math.max(0, activeIndex) + 10);
+        break;
+      case "PageUp":
+        next = Math.max(0, activeIndex - 10);
+        break;
+      case "Enter": {
+        const agent = activeIndex >= 0 ? agents[activeIndex] : void 0;
+        if (!agent) return;
+        event.preventDefault();
+        onSelectAgent(agent);
+        return;
+      }
+      default:
+        return;
     }
-  }, [listOpen, pinnedAgent?.id]);
+    event.preventDefault();
+    setActiveIndex(next);
+    revealIndex(next);
+  };
   const { labels } = catalog;
   const emptyLabel = catalog.getUserIdOrNull() === null ? labels.emptySignedOut : agentListEmptyLabel(consumer.tab, labels);
   const defaultAgent = defaultRow?.row ?? null;
@@ -1821,7 +1923,15 @@ function AgentListContent({
         ref: inputRef,
         value: consumer.searchTerm,
         onChange: consumer.setSearchTerm,
-        placeholder: labels.searchPlaceholder
+        placeholder: labels.searchPlaceholder,
+        onKeyDown: handleListKeyDown,
+        inputProps: {
+          role: "combobox",
+          "aria-controls": listboxId,
+          "aria-expanded": true,
+          "aria-autocomplete": "list",
+          ...activeIndex >= 0 && activeIndex < agents.length ? { "aria-activedescendant": optionId(activeIndex) } : {}
+        }
       }
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1910,65 +2020,106 @@ function AgentListContent({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px bg-border shrink-0" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: listScrollRef, className: "overflow-y-auto flex-1 min-h-0", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center py-8 gap-2 text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoaderIcon, { className: "w-4 h-4 matrx-agent-spin" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: labels.loading })
-    ] }) : agents.length === 0 && !pinnedAgent && !defaultAgent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center py-8 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: emptyLabel }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "py-0.5", children: [
-      defaultAgent && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Default" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          AgentRow,
-          {
-            agent: defaultAgent,
-            isActive: defaultAgent.id === activeAgentId,
-            isHovered: hoveredAgent?.id === defaultAgent.id,
-            isMobile,
-            onClick: () => onSelectAgent(defaultAgent),
-            href: resolveAgentHref?.(defaultAgent),
-            onHover: () => onAgentHover(defaultAgent),
-            onHoverEnd: () => onAgentHoverEnd(defaultAgent),
-            onDetailPress: () => onDetailPress(defaultAgent)
-          },
-          `default-${defaultAgent.id}`
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-2 my-0.5 h-px bg-border" })
-      ] }),
-      pinnedAgent && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: labels.currentAgentHeading }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-          AgentRow,
-          {
-            agent: pinnedAgent,
-            isActive: true,
-            isHovered: hoveredAgent?.id === pinnedAgent.id,
-            isMobile,
-            onClick: () => onSelectAgent(pinnedAgent),
-            href: resolveAgentHref?.(pinnedAgent),
-            onHover: () => onAgentHover(pinnedAgent),
-            onHoverEnd: () => onAgentHoverEnd(pinnedAgent),
-            onDetailPress: () => onDetailPress(pinnedAgent)
-          },
-          `pinned-${pinnedAgent.id}`
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-2 my-0.5 h-px bg-border" })
-      ] }),
-      agents.map((agent) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        AgentRow,
-        {
-          agent,
-          isActive: agent.id === activeAgentId,
-          isHovered: hoveredAgent?.id === agent.id,
-          isMobile,
-          onClick: () => onSelectAgent(agent),
-          href: resolveAgentHref?.(agent),
-          onHover: () => onAgentHover(agent),
-          onHoverEnd: () => onAgentHoverEnd(agent),
-          onDetailPress: () => onDetailPress(agent)
-        },
-        agent.id
-      )),
-      agents.length === 0 && (pinnedAgent || defaultAgent) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center py-4 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: emptyLabel }) })
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "div",
+      {
+        ref: listScrollRef,
+        "data-agent-list-scroll": "",
+        onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+        className: "relative overflow-y-auto flex-1 min-h-0",
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-center py-8 gap-2 text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoaderIcon, { className: "w-4 h-4 matrx-agent-spin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: labels.loading })
+        ] }) : agents.length === 0 && !pinnedAgent && !defaultAgent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center py-8 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: emptyLabel }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "py-0.5", children: [
+          defaultAgent && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Default" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              AgentRow,
+              {
+                agent: defaultAgent,
+                isActive: defaultAgent.id === activeAgentId,
+                isHovered: hoveredAgent?.id === defaultAgent.id,
+                isMobile,
+                onClick: () => onSelectAgent(defaultAgent),
+                href: resolveAgentHref?.(defaultAgent),
+                onHover: () => onAgentHover(defaultAgent),
+                onHoverEnd: () => onAgentHoverEnd(defaultAgent),
+                onDetailPress: () => onDetailPress(defaultAgent)
+              },
+              `default-${defaultAgent.id}`
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-2 my-0.5 h-px bg-border" })
+          ] }),
+          pinnedAgent && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 pt-1.5 pb-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: labels.currentAgentHeading }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              AgentRow,
+              {
+                agent: pinnedAgent,
+                isActive: true,
+                isHovered: hoveredAgent?.id === pinnedAgent.id,
+                isMobile,
+                onClick: () => onSelectAgent(pinnedAgent),
+                href: resolveAgentHref?.(pinnedAgent),
+                onHover: () => onAgentHover(pinnedAgent),
+                onHoverEnd: () => onAgentHoverEnd(pinnedAgent),
+                onDetailPress: () => onDetailPress(pinnedAgent)
+              },
+              `pinned-${pinnedAgent.id}`
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mx-2 my-0.5 h-px bg-border" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "div",
+            {
+              ref: windowRef,
+              id: listboxId,
+              role: "listbox",
+              "aria-label": labels.searchPlaceholder,
+              children: [
+                win.padStart > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "aria-hidden": true, style: { height: win.padStart } }),
+                visibleAgents.map((agent, offset) => {
+                  const index = win.start + offset;
+                  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                    "div",
+                    {
+                      id: optionId(index),
+                      role: "option",
+                      "aria-selected": agent.id === activeAgentId,
+                      "aria-posinset": index + 1,
+                      "aria-setsize": agents.length,
+                      "data-agent-index": index,
+                      style: { height: AGENT_ROW_HEIGHT },
+                      className: (0, import_design_system5.cn)(
+                        "flex overflow-hidden",
+                        index === activeIndex && "bg-muted/60"
+                      ),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        AgentRow,
+                        {
+                          agent,
+                          isActive: agent.id === activeAgentId,
+                          isHovered: hoveredAgent?.id === agent.id,
+                          isMobile,
+                          onClick: () => onSelectAgent(agent),
+                          href: resolveAgentHref?.(agent),
+                          onHover: () => onAgentHover(agent),
+                          onHoverEnd: () => onAgentHoverEnd(agent),
+                          onDetailPress: () => onDetailPress(agent)
+                        }
+                      )
+                    },
+                    agent.id
+                  );
+                }),
+                win.padEnd > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "aria-hidden": true, style: { height: win.padEnd } })
+              ]
+            }
+          ),
+          agents.length === 0 && (pinnedAgent || defaultAgent) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex flex-col items-center py-4 text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-xs", children: emptyLabel }) })
+        ] })
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-px bg-border shrink-0" }),
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between px-2.5 py-1.5 shrink-0", children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(

package/dist/catalog/react/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentType, ReactNode, Ref, SVGProps } from 'react';
+import { ComponentType, ReactNode, Ref, KeyboardEventHandler, InputHTMLAttributes, SVGProps } from 'react';
 
 /**
  * `@ai-matrx/agents/catalog` — the row shape and the per-consumer view state.
@@ -1174,11 +1174,15 @@ interface FavoriteAgentButtonProps {
 }
 declare function FavoriteAgentButton({ id, variant, disabled, }: FavoriteAgentButtonProps): react.JSX.Element;
 
-declare const SearchInput: ({ ref, value, onChange, placeholder, }: {
+declare const SearchInput: ({ ref, value, onChange, placeholder, onKeyDown, inputProps, }: {
     ref?: Ref<HTMLInputElement>;
     value: string;
     onChange: (v: string) => void;
     placeholder: string;
+    /** Keyboard handler — the agent list drives its listbox from the field. */
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    /** ARIA wiring (combobox role, aria-controls, aria-activedescendant). */
+    inputProps?: Pick<InputHTMLAttributes<HTMLInputElement>, "role" | "aria-controls" | "aria-activedescendant" | "aria-expanded" | "aria-autocomplete" | "aria-label">;
 }) => react.JSX.Element;
 declare function FilterChip({ icon: Icon, label, active, focused, onClick, ariaLabel, testId, }: {
     icon: ComponentType<{

package/dist/catalog/react/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ComponentType, ReactNode, Ref, SVGProps } from 'react';
+import { ComponentType, ReactNode, Ref, KeyboardEventHandler, InputHTMLAttributes, SVGProps } from 'react';
 
 /**
  * `@ai-matrx/agents/catalog` — the row shape and the per-consumer view state.
@@ -1174,11 +1174,15 @@ interface FavoriteAgentButtonProps {
 }
 declare function FavoriteAgentButton({ id, variant, disabled, }: FavoriteAgentButtonProps): react.JSX.Element;
 
-declare const SearchInput: ({ ref, value, onChange, placeholder, }: {
+declare const SearchInput: ({ ref, value, onChange, placeholder, onKeyDown, inputProps, }: {
     ref?: Ref<HTMLInputElement>;
     value: string;
     onChange: (v: string) => void;
     placeholder: string;
+    /** Keyboard handler — the agent list drives its listbox from the field. */
+    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+    /** ARIA wiring (combobox role, aria-controls, aria-activedescendant). */
+    inputProps?: Pick<InputHTMLAttributes<HTMLInputElement>, "role" | "aria-controls" | "aria-activedescendant" | "aria-expanded" | "aria-autocomplete" | "aria-label">;
 }) => react.JSX.Element;
 declare function FilterChip({ icon: Icon, label, active, focused, onClick, ariaLabel, testId, }: {
     icon: ComponentType<{