@ai-matrx/design-system 0.86.330 → 0.86.331

package/dist/clipboard-fallback-dialog.js

@@ -15,7 +15,7 @@ import "./chunk-NDTDBBMM.js";
 import "./chunk-LEPD6TV7.js";
 import {
   Textarea
-} from "./chunk-6P7E4SI5.js";
+} from "./chunk-5IKQ6RU4.js";
 import "./chunk-BKCJUFD3.js";
 import "./chunk-BD77DHUO.js";
 import "./chunk-MOZRIHJF.js";

package/dist/controls.cjs

@@ -1391,10 +1391,15 @@ function Select2({
   className,
   style,
   "aria-label": ariaLabel,
-  variant = "field"
+  variant = "field",
+  searchAt
 }) {
   const current = options.find((o) => o.value === value);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { children: [
+  const [query, setQuery] = React10.useState("");
+  const searchable = searchAt !== void 0 && options.length >= searchAt;
+  const q = searchable ? query.trim().toLowerCase() : "";
+  const shown = q ? options.filter((o) => [o.label, o.hint, o.group].some((t) => t?.toLowerCase().includes(q))) : options;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenu, { onOpenChange: (open) => !open && setQuery(""), children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
       "button",
       {
@@ -1408,22 +1413,42 @@ function Select2({
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "matrx-control-select-value", children: [
             icon,
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: current?.label ?? value })
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: current?.label ?? value }),
+            current?.hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-muted-foreground", children: current.hint }) : null
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectChevron, {})
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuContent, { align, className: "max-h-80 w-max min-w-[max(10rem,var(--radix-dropdown-menu-trigger-width))] max-w-[min(24rem,var(--radix-dropdown-menu-content-available-width))] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuRadioGroup, { value, onValueChange: (v) => onValueChange(v), children: options.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React10.Fragment, { children: [
-      o.group && o.group !== options[i - 1]?.group ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuSeparator, {}) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuLabel, { children: o.group })
-      ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuRadioItem, { value: o.value, disabled: o.disabled === true, className: "text-[0.8125rem]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "flex-1 truncate", children: o.label }),
-        o.meta ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ml-3 text-[0.6875rem] text-muted-foreground", children: o.meta }) : null
-      ] })
-    ] }, o.value)) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuContent, { align, className: "max-h-80 w-max min-w-[max(10rem,var(--radix-dropdown-menu-trigger-width))] max-w-[min(24rem,var(--radix-dropdown-menu-content-available-width))] overflow-y-auto", children: [
+      searchable ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "sticky top-0 z-10 bg-popover p-1", "data-select-search": "", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        SearchField,
+        {
+          className: "w-full",
+          value: query,
+          autoFocus: true,
+          "aria-label": `Search ${ariaLabel}`,
+          onChange: (e) => setQuery(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key !== "ArrowDown" && e.key !== "ArrowUp" && e.key !== "Escape" && e.key !== "Tab") e.stopPropagation();
+          }
+        }
+      ) }) : null,
+      searchable && shown.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "px-2 py-1.5 text-[0.8125rem] text-muted-foreground", role: "status", children: "No match" }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuRadioGroup, { value, onValueChange: (v) => onValueChange(v), children: shown.map((o, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(React10.Fragment, { children: [
+        o.group && o.group !== shown[i - 1]?.group ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+          i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuSeparator, {}) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenuLabel, { children: o.group })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(DropdownMenuRadioItem, { value: o.value, disabled: o.disabled === true, className: "text-[0.8125rem]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "flex-1 truncate", children: [
+            o.label,
+            o.hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ml-1.5 text-muted-foreground", children: o.hint }) : null
+          ] }),
+          o.meta ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ml-3 text-[0.6875rem] text-muted-foreground", children: o.meta }) : null
+        ] })
+      ] }, o.value)) })
+    ] })
   ] });
 }
 function SegmentItems({
@@ -6141,7 +6166,7 @@ var import_notify = require("@ai-matrx/kit/notify");
 var React30 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 var import_jsx_runtime47 = require("react/jsx-runtime");
-var { useState: useState16, useLayoutEffect: useLayoutEffect4, useRef: useRef12 } = React30;
+var { useState: useState17, useLayoutEffect: useLayoutEffect4, useRef: useRef12 } = React30;
 function HelpIcon({
   text,
   content,
@@ -6150,9 +6175,9 @@ function HelpIcon({
   required = false,
   onAiAssistance
 }) {
-  const [copied, setCopied] = useState16(false);
-  const [isVisible, setIsVisible] = useState16(false);
-  const [position, setPosition] = useState16({ top: 0, left: 0 });
+  const [copied, setCopied] = useState17(false);
+  const [isVisible, setIsVisible] = useState17(false);
+  const [position, setPosition] = useState17({ top: 0, left: 0 });
   const iconRef = useRef12(null);
   const tooltipRef = useRef12(null);
   const hideTimeoutRef = useRef12(null);