@geomak/ui 5.1.0 → 5.2.0

package/dist/index.cjs

@@ -2397,9 +2397,105 @@ function Dropdown({
         ]
       }
     ),
-    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
+    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
   ] });
 }
+var SHIMMER = [
+  "relative overflow-hidden rounded-sm bg-surface-raised",
+  'before:absolute before:inset-0 before:content-[""]',
+  "before:bg-gradient-to-r before:from-transparent before:via-white/30 before:to-transparent",
+  "before:animate-[shimmer_1.6s_linear_infinite]",
+  // Respect prefers-reduced-motion — the resting bg-surface-raised is still
+  // a perfectly legible placeholder for users who have animations off.
+  "motion-reduce:before:hidden"
+].join(" ");
+function SkeletonBox({ width, height = 16, radius, className = "", style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `block ${SHIMMER} ${className}`,
+      style: {
+        width: width ?? "100%",
+        height,
+        borderRadius: radius ?? "var(--radius-md)",
+        ...style
+      }
+    }
+  );
+}
+function SkeletonText({
+  lines = 3,
+  lastLineWidth = 60,
+  lineHeight = 14,
+  gap = 8,
+  className = "",
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `flex flex-col ${className}`,
+      style: { gap, ...style },
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1;
+        const width = isLast && lines > 1 ? `${lastLineWidth}%` : "100%";
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `block ${SHIMMER}`,
+            style: { height: lineHeight, width, borderRadius: "var(--radius-sm)" }
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function SkeletonCircle({ size = 40, className = "", style }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `block flex-shrink-0 ${SHIMMER} ${className}`,
+      style: {
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        ...style
+      }
+    }
+  );
+}
+function SkeletonCard({ hasAvatar = true, lines = 3, className = "", style }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "presentation",
+      "aria-hidden": "true",
+      className: `rounded-lg border border-border bg-surface p-4 ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
+          hasAvatar && /* @__PURE__ */ jsxRuntime.jsx(SkeletonCircle, { size: 36 }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 12, width: "55%" }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 10, width: "35%" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText, { lines, lastLineWidth: 55 }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 28, width: 72 }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 28, width: 56 })
+        ] })
+      ]
+    }
+  );
+}
 var DEFAULT_PICKER = [
   { key: 1, value: 5, label: 5 },
   { key: 2, value: 10, label: 10 },
@@ -2585,7 +2681,9 @@ function Table({
   expandRow = DEFAULT_EXPAND,
   hasSearch = true,
   footer = null,
-  header = null
+  header = null,
+  loading = false,
+  loadingRowCount = 8
 }) {
   const searchRef = React8.useRef(null);
   const [searchTerm, setSearchTerm] = React8.useState("");
@@ -2669,9 +2767,16 @@ function Table({
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: header }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse", "aria-busy": loading || void 0, children: [
       /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { columns, hasExpand: !!expandRow.enabled }),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      loading ? /* @__PURE__ */ jsxRuntime.jsx(
+        TableSkeletonBody,
+        {
+          columns,
+          rowCount: loadingRowCount,
+          hasExpand: !!expandRow.enabled
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
         TableBody,
         {
           columns,
@@ -2684,6 +2789,23 @@ function Table({
     /* @__PURE__ */ jsxRuntime.jsx("div", { children: footer })
   ] });
 }
+function TableSkeletonBody({
+  columns,
+  rowCount,
+  hasExpand
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { "aria-hidden": "true", children: Array.from({ length: rowCount }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "tr",
+    {
+      className: `border-b border-border ${i % 2 === 0 ? "bg-surface" : "bg-surface-raised"}`,
+      children: [
+        hasExpand && /* @__PURE__ */ jsxRuntime.jsx("td", { className: "p-0 align-middle w-9" }),
+        columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3 px-3 align-middle", children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 12, width: `${50 + i % 4 * 12}%` }) }, col.key))
+      ]
+    },
+    i
+  )) });
+}
 function ThemeSwitch({ checked, onChange, label = "Toggle dark mode" }) {
   const id = React8.useId();
   return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer select-none", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3116,102 +3238,6 @@ function ThemeProvider({
     )
   ] });
 }
-var SHIMMER = [
-  "relative overflow-hidden rounded-sm bg-surface-raised",
-  'before:absolute before:inset-0 before:content-[""]',
-  "before:bg-gradient-to-r before:from-transparent before:via-white/30 before:to-transparent",
-  "before:animate-[shimmer_1.6s_linear_infinite]",
-  // Respect prefers-reduced-motion — the resting bg-surface-raised is still
-  // a perfectly legible placeholder for users who have animations off.
-  "motion-reduce:before:hidden"
-].join(" ");
-function SkeletonBox({ width, height = 16, radius, className = "", style }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `block ${SHIMMER} ${className}`,
-      style: {
-        width: width ?? "100%",
-        height,
-        borderRadius: radius ?? "var(--radius-md)",
-        ...style
-      }
-    }
-  );
-}
-function SkeletonText({
-  lines = 3,
-  lastLineWidth = 60,
-  lineHeight = 14,
-  gap = 8,
-  className = "",
-  style
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `flex flex-col ${className}`,
-      style: { gap, ...style },
-      children: Array.from({ length: lines }).map((_, i) => {
-        const isLast = i === lines - 1;
-        const width = isLast && lines > 1 ? `${lastLineWidth}%` : "100%";
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: `block ${SHIMMER}`,
-            style: { height: lineHeight, width, borderRadius: "var(--radius-sm)" }
-          },
-          i
-        );
-      })
-    }
-  );
-}
-function SkeletonCircle({ size = 40, className = "", style }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `block flex-shrink-0 ${SHIMMER} ${className}`,
-      style: {
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        ...style
-      }
-    }
-  );
-}
-function SkeletonCard({ hasAvatar = true, lines = 3, className = "", style }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      role: "presentation",
-      "aria-hidden": "true",
-      className: `rounded-lg border border-border bg-surface p-4 ${className}`,
-      style,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 mb-4", children: [
-          hasAvatar && /* @__PURE__ */ jsxRuntime.jsx(SkeletonCircle, { size: 36 }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 12, width: "55%" }),
-            /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 10, width: "35%" })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText, { lines, lastLineWidth: 55 }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 28, width: 72 }),
-          /* @__PURE__ */ jsxRuntime.jsx(SkeletonBox, { height: 28, width: 56 })
-        ] })
-      ]
-    }
-  );
-}
 function TextInput({
   value,
   onChange,
@@ -3229,48 +3255,50 @@ function TextInput({
 }) {
   const errorId = React8.useId();
   const hasError = errorMessage != null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center justify-center", children: [
+  return (
+    // In horizontal mode the row layout is [label, input-with-error-column].
+    // The error sits under the input ONLY, not spanning the label too.
+    // In vertical mode the whole thing is a column.
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
+        className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-start gap-2"}`,
         style: style ?? {},
         children: [
-          label && // Render <label> only when a label is provided. An empty
-          // <label htmlFor=…> announces as an unlabeled control in
-          // some screen readers.
-          /* @__PURE__ */ jsxRuntime.jsx(
+          label && /* @__PURE__ */ jsxRuntime.jsx(
             "label",
             {
               style: { color: labelColor || void 0 },
-              className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
+              className: `text-sm font-medium ${layout === "horizontal" ? "mt-2" : ""} max-content ${!labelColor && "text-foreground"}`,
               htmlFor,
               children: label
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              autoComplete: "off",
-              disabled,
-              value,
-              onChange,
-              onBlur,
-              type: "text",
-              name,
-              id: htmlFor,
-              "aria-invalid": hasError || void 0,
-              "aria-describedby": hasError ? errorId : void 0,
-              className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-60 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus:border-transparent focus:ring-2 focus:ring-accent transition-colors`,
-              style: inputStyle ?? {},
-              placeholder: placeholder ?? ""
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                autoComplete: "off",
+                disabled,
+                value,
+                onChange,
+                onBlur,
+                type: "text",
+                name,
+                id: htmlFor,
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
+                className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-60 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus:border-transparent focus:ring-2 focus:ring-accent transition-colors`,
+                style: inputStyle ?? {},
+                placeholder: placeholder ?? ""
+              }
+            ),
+            hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
+          ] })
         ]
       }
-    ),
-    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
-  ] });
+    )
+  );
 }
 function NumberInput({
   step = 1,
@@ -3412,64 +3440,71 @@ function Password({
   const [passwordVisible, setPasswordVisible] = React8.useState(false);
   const errorId = React8.useId();
   const hasError = errorMessage != null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col items-center justify-center", style: style ?? {}, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`, children: [
-      label && /* @__PURE__ */ jsxRuntime.jsx(
-        "label",
-        {
-          style: { color: labelColor || void 0 },
-          className: `text-sm font-medium ml-1 max-content ${!labelColor && "text-foreground"}`,
-          htmlFor,
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex ${layout === "vertical" ? "flex-col gap-1" : "flex-row items-start gap-2"}`,
+      style: style ?? {},
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
           {
-            autoComplete: "off",
-            disabled,
-            value,
-            onChange,
-            onBlur,
-            type: passwordVisible ? "text" : "password",
-            name,
-            id: htmlFor,
-            "aria-invalid": hasError || void 0,
-            "aria-describedby": hasError ? errorId : void 0,
-            className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-52 mt-1 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus:border-transparent focus:ring-2 focus:ring-accent transition-colors`,
-            style: inputStyle ?? {},
-            placeholder: placeholder ?? ""
+            style: { color: labelColor || void 0 },
+            className: `text-sm font-medium ${layout === "horizontal" ? "mt-2" : ""} max-content ${!labelColor && "text-foreground"}`,
+            htmlFor,
+            children: label
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            className: "cursor-pointer p-1 text-foreground-secondary hover:text-foreground rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-            style: iconColor ? { color: iconColor } : void 0,
-            onClick: () => setPasswordVisible(!passwordVisible),
-            "aria-label": passwordVisible ? "Hide password" : "Show password",
-            children: passwordVisible ? (
-              /* EyeSlash */
-              /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" }),
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" }),
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" })
-              ] })
-            ) : (
-              /* Eye */
-              /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 15a3 3 0 100-6 3 3 0 000 6z" }),
-                /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z", clipRule: "evenodd" })
-              ] })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                autoComplete: "off",
+                disabled,
+                value,
+                onChange,
+                onBlur,
+                type: passwordVisible ? "text" : "password",
+                name,
+                id: htmlFor,
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": hasError ? errorId : void 0,
+                className: `${hasError ? "border border-status-error" : "border border-border"} bg-surface text-foreground p-2 h-9 w-52 rounded-lg disabled:bg-surface-raised disabled:text-foreground-muted disabled:cursor-not-allowed focus:outline-none focus:border-transparent focus:ring-2 focus:ring-accent transition-colors`,
+                style: inputStyle ?? {},
+                placeholder: placeholder ?? ""
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "cursor-pointer p-1 text-foreground-secondary hover:text-foreground rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                style: iconColor ? { color: iconColor } : void 0,
+                onClick: () => setPasswordVisible(!passwordVisible),
+                "aria-label": passwordVisible ? "Hide password" : "Show password",
+                children: passwordVisible ? (
+                  /* EyeSlash */
+                  /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" })
+                  ] })
+                ) : (
+                  /* Eye */
+                  /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-6 h-6", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 15a3 3 0 100-6 3 3 0 000 6z" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z", clipRule: "evenodd" })
+                  ] })
+                )
+              }
             )
-          }
-        )
-      ] })
-    ] }),
-    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-center text-status-error text-xs mt-1", children: errorMessage })
-  ] });
+          ] }),
+          hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorId, className: "text-status-error text-xs mt-1", children: errorMessage })
+        ] })
+      ]
+    }
+  );
 }
 function Checkbox({
   checked,
@@ -3582,15 +3617,54 @@ function AutoComplete({
   inputStyle,
   style,
   layout = "vertical",
-  items = [],
+  items,
+  onSearch,
+  debounce = 250,
   onItemClick,
-  emptyText = "No results found"
+  emptyText = "No results found",
+  loadingText = "Searching\u2026"
 }) {
   const [term, setTerm] = React8.useState("");
   const [open, setOpen] = React8.useState(false);
-  const foundItems = term.trim() ? items.filter(
+  const [asyncItems, setAsyncItems] = React8.useState([]);
+  const [loading, setLoading] = React8.useState(false);
+  const isAsync = typeof onSearch === "function";
+  const debounceRef = React8.useRef(null);
+  const requestIdRef = React8.useRef(0);
+  const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
     ({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
   ) : [];
+  React8.useEffect(() => {
+    if (!isAsync) return;
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    if (!term.trim()) {
+      setAsyncItems([]);
+      setLoading(false);
+      return;
+    }
+    const myId = ++requestIdRef.current;
+    setLoading(true);
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const res = await onSearch(term);
+        if (myId === requestIdRef.current) {
+          setAsyncItems(res);
+        }
+      } catch {
+        if (myId === requestIdRef.current) {
+          setAsyncItems([]);
+        }
+      } finally {
+        if (myId === requestIdRef.current) {
+          setLoading(false);
+        }
+      }
+    }, debounce);
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, [term, isAsync, debounce, onSearch]);
+  const foundItems = isAsync ? asyncItems : staticFiltered;
   const handleSelect = (item) => {
     setTerm(`${item.label} (${item.value})`);
     onItemClick?.(item.value);
@@ -3623,10 +3697,11 @@ function AutoComplete({
                 autoComplete: "off",
                 "aria-haspopup": "listbox",
                 "aria-expanded": open,
-                "aria-autocomplete": "list"
+                "aria-autocomplete": "list",
+                "aria-busy": loading || void 0
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 flex-shrink-0 text-foreground-muted", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) })
+            loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-5 h-5 flex-shrink-0 flex items-center justify-center text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs", spinnerColor: "currentColor" }) }) : /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-5 h-5 flex-shrink-0 text-foreground-muted", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
             Popover__namespace.Content,
@@ -3635,36 +3710,33 @@ function AutoComplete({
               sideOffset: 4,
               onOpenAutoFocus: (e) => e.preventDefault(),
               className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
-              children: foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: foundItems.map((item) => (
-                // tabIndex + Enter/Space onKeyDown
-                // makes each option keyboard-activatable.
-                // Full roving-tabindex / arrow-key nav
-                // is deferred to the Phase-5 rewrite.
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "div",
-                  {
-                    role: "option",
-                    tabIndex: 0,
-                    className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                    onClick: () => handleSelect(item),
-                    onKeyDown: (e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault();
-                        handleSelect(item);
-                      }
-                    },
-                    children: [
-                      item.icon,
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                        item.label,
-                        " (",
-                        item.value,
-                        ")"
-                      ] })
-                    ]
+              children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText })
+              ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  role: "option",
+                  tabIndex: 0,
+                  className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                  onClick: () => handleSelect(item),
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      handleSelect(item);
+                    }
                   },
-                  item.key
-                )
+                  children: [
+                    item.icon,
+                    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                      item.label,
+                      " (",
+                      item.value,
+                      ")"
+                    ] })
+                  ]
+                },
+                item.key
               )) })
             }
           ) })