@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/search-bar.agent-DxFAxctc.js

@@ -0,0 +1,562 @@
+import { jsx as r, jsxs as B, Fragment as Z } from "react/jsx-runtime";
+import { forwardRef as ee, useState as _, useEffect as $, useRef as T, useMemo as O, useImperativeHandle as F, useId as se, useCallback as R } from "react";
+import { c as j } from "./index-D2ZczOXr.js";
+import { useTranslation as G } from "react-i18next";
+import * as q from "@radix-ui/react-popover";
+import { S as ae } from "./search-input-Xw3cdWXW.js";
+import { n as H } from "./normalize-diacritics-BNGbFNlJ.js";
+import { S as re } from "./search-BonnQsHv.js";
+import { u as te } from "./use-debounced-callback-BisrB-Fq.js";
+function ne() {
+  if (typeof navigator > "u") return !1;
+  const s = navigator.userAgentData, a = (s == null ? void 0 : s.platform) ?? navigator.platform ?? "";
+  return /mac/i.test(a);
+}
+const oe = j(
+  [
+    "ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    // Same visual language as <SearchInput> so the launcher truly looks
+    // like an input. --muted-foreground over --background meets AA 4.5:1
+    // in every theme; --muted is a mid-tone not suitable as a surface.
+    "ds:bg-[var(--background)] ds:border ds:border-[color:var(--border)]",
+    "ds:text-[color:var(--muted-foreground)]",
+    // Opaque hover — mix 20% muted into --background so the launcher stays a
+    // solid surface even when placed over a brand-tinted parent (e.g. the
+    // Header's `brand` variant).
+    "ds:hover:bg-[color-mix(in_srgb,var(--muted)_20%,var(--background))]",
+    "ds:transition-colors ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
+    "ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[color:var(--ring)]",
+    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:disabled:opacity-50 ds:disabled:cursor-not-allowed"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "ds:text-[length:var(--font-size-sm)]",
+        md: "ds:text-[length:var(--font-size-base)]",
+        lg: "ds:text-[length:var(--font-size-lg)]"
+      },
+      density: {
+        default: "",
+        compact: "ds:min-h-0 ds:h-8"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      density: "default"
+    }
+  }
+), ie = j(
+  [
+    "ds:inline-flex ds:flex-col",
+    "ds:w-full"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      },
+      density: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      density: "default"
+    }
+  }
+), U = j(
+  [
+    "ds:hidden ds:md:inline-flex ds:items-center ds:gap-[calc(var(--spacing-xs)/2)]",
+    "ds:ms-auto",
+    "ds:rounded-[var(--radius-sm)]",
+    "ds:border ds:border-[color:var(--border)]",
+    "ds:bg-[var(--background)]",
+    "ds:ps-[calc(var(--spacing-xs)/1.2)] ds:pe-[calc(var(--spacing-xs)/1.2)]",
+    "ds:py-[calc(var(--spacing-xs)/2)]",
+    // Use full --foreground (not --muted-foreground) so axe's contrast
+    // check clears 4.5:1 even against the 1px --border edge region.
+    "ds:text-[length:var(--font-size-xs)] ds:text-[color:var(--foreground)]",
+    "ds:font-[family-name:var(--font-mono)]"
+  ].join(" ")
+), de = j(
+  [
+    "ds:z-[var(--z-dropdown)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:border ds:border-[color:var(--border)]",
+    "ds:bg-[var(--popover)] ds:text-[color:var(--popover-foreground)]",
+    "ds:shadow-[var(--shadow-lg)]",
+    "ds:p-[var(--spacing-xs)]",
+    // Motion gates — reduced-motion honoured via .theme-accessible's 0ms
+    // animation-duration token.
+    "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+    "ds:data-[state=open]:fade-in ds:data-[state=closed]:fade-out",
+    "ds:motion-reduce:animate-none"
+  ].join(" ")
+);
+function Se(s, a) {
+  const o = H(s.trim());
+  return o === "" ? a : a.map((i) => ({
+    ...i,
+    items: i.items.filter(
+      (m) => H(m.label).includes(o)
+    )
+  })).filter((i) => i.items.length > 0);
+}
+const ce = ee(
+  (s, a) => {
+    const {
+      mode: o = "launcher",
+      size: i = "md",
+      density: m = "default",
+      topLevel: u = !1,
+      placeholder: t,
+      shortcutHint: g = !0,
+      className: y,
+      onOpenCommandPalette: n,
+      id: h,
+      onApplySavedSearch: p,
+      value: S,
+      defaultValue: w,
+      onQueryChange: d,
+      results: c,
+      onSelect: l,
+      debounceMs: D,
+      ...N
+    } = s, { t: v } = G(), [V, K] = _(!1);
+    $(() => {
+      K(ne());
+    }, []);
+    const C = V ? "⌘K" : "Ctrl+K", b = "Meta+K Control+K", x = u ? { role: "search" } : { role: void 0 };
+    if (o === "launcher") {
+      const z = t ?? v("search.placeholder", "Search…");
+      return /* @__PURE__ */ r(
+        le,
+        {
+          forwardedRef: a,
+          id: h,
+          landmarkProps: x,
+          className: y,
+          onOpenCommandPalette: n,
+          onApplySavedSearch: p,
+          resolvedPlaceholder: z,
+          openLabel: v("search.open", "Open search"),
+          ariaKeyshortcuts: b,
+          launcherClass: oe({ size: i, density: m }),
+          shortcutHint: g,
+          shortcutLabel: C,
+          rest: N
+        }
+      );
+    }
+    return /* @__PURE__ */ r(
+      ue,
+      {
+        forwardedRef: a,
+        size: i,
+        density: m,
+        landmarkProps: x,
+        placeholder: t,
+        shortcutHint: g,
+        shortcutLabel: C,
+        ariaKeyshortcuts: b,
+        className: y,
+        id: h,
+        onApplySavedSearch: p,
+        ...s
+      }
+    );
+  }
+);
+ce.displayName = "SearchBar";
+function le(s) {
+  const {
+    forwardedRef: a,
+    id: o,
+    landmarkProps: i,
+    className: m,
+    onOpenCommandPalette: u,
+    onApplySavedSearch: t,
+    resolvedPlaceholder: g,
+    openLabel: y,
+    ariaKeyshortcuts: n,
+    launcherClass: h,
+    shortcutHint: p,
+    shortcutLabel: S,
+    rest: w
+  } = s, d = T(null), c = O(
+    () => ({
+      getQuery: () => "",
+      // Launcher mode is stateless \u2014 it delegates to CommandPalette.
+      setQuery: () => {
+      },
+      clear: () => {
+      },
+      submit: () => u == null ? void 0 : u(),
+      focus: () => {
+        var l;
+        return (l = d.current) == null ? void 0 : l.focus();
+      },
+      applySavedSearch: (l) => t == null ? void 0 : t(l)
+    }),
+    [u, t]
+  );
+  return F(a, () => c, [c]), /* @__PURE__ */ r("div", { ...i, "data-component": "search-bar", "data-component-id": o, id: o, className: m, children: /* @__PURE__ */ B(
+    "button",
+    {
+      ref: d,
+      type: "button",
+      onClick: u,
+      "aria-haspopup": "dialog",
+      "aria-label": y,
+      "aria-keyshortcuts": n,
+      className: h,
+      ...w,
+      children: [
+        /* @__PURE__ */ r(
+          re,
+          {
+            "aria-hidden": !0,
+            className: "ds:size-4 ds:shrink-0",
+            focusable: "false"
+          }
+        ),
+        /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "ds:truncate ds:text-start", children: g }),
+        p ? /* @__PURE__ */ r("kbd", { className: U(), children: S }) : null
+      ]
+    }
+  ) });
+}
+function ue(s) {
+  const {
+    forwardedRef: a,
+    size: o,
+    density: i,
+    landmarkProps: m,
+    placeholder: u,
+    shortcutHint: t,
+    shortcutLabel: g,
+    ariaKeyshortcuts: y,
+    className: n,
+    id: h,
+    onApplySavedSearch: p,
+    value: S,
+    defaultValue: w,
+    onQueryChange: d,
+    results: c,
+    onSelect: l,
+    debounceMs: D = 150
+  } = s, { t: N } = G(), v = S !== void 0, [V, K] = _(w ?? ""), C = v ? S ?? "" : V, [b, x] = _(!1), [k, z] = _(0), Q = T(null), P = se(), E = te((e) => {
+    d == null || d(e);
+  }, D), f = O(() => c ? c.flatMap((e) => e.items) : [], [c]);
+  $(() => {
+    k > f.length - 1 && z(0);
+  }, [f.length, k]);
+  const W = R(
+    (e) => {
+      v || K(e), E(e), x(e.trim().length > 0);
+    },
+    [E, v]
+  ), M = R(
+    (e) => {
+      l == null || l(e), x(!1), v || K("");
+    },
+    [l, v]
+  ), J = R(
+    (e) => {
+      if (!(e.nativeEvent.isComposing || e.keyCode === 229)) {
+        if (!b && e.key === "ArrowDown" && f.length > 0) {
+          e.preventDefault(), x(!0);
+          return;
+        }
+        if (b)
+          if (e.key === "ArrowDown")
+            e.preventDefault(), z((I) => (I + 1) % Math.max(f.length, 1));
+          else if (e.key === "ArrowUp")
+            e.preventDefault(), z(
+              (I) => (I - 1 + Math.max(f.length, 1)) % Math.max(f.length, 1)
+            );
+          else if (e.key === "Enter") {
+            const I = f[k];
+            I && (e.preventDefault(), M(I));
+          } else e.key === "Escape" && (e.preventDefault(), x(!1));
+      }
+    },
+    [b, f, k, M]
+  ), X = u ?? N("search.placeholder", "Search…"), A = f.length > 0, Y = b && A ? `${P}-option-${k}` : void 0, L = R(
+    (e) => {
+      v || K(e), d == null || d(e), x(e.trim().length > 0);
+    },
+    [v, d]
+  );
+  return F(
+    a,
+    () => ({
+      getQuery: () => C,
+      setQuery: L,
+      clear: () => {
+        L("");
+      },
+      submit: () => {
+        const e = f[k];
+        e && M(e);
+      },
+      focus: () => {
+        var e;
+        return (e = Q.current) == null ? void 0 : e.focus();
+      },
+      applySavedSearch: (e) => p == null ? void 0 : p(e)
+    }),
+    [
+      C,
+      L,
+      f,
+      k,
+      M,
+      p
+    ]
+  ), /* @__PURE__ */ r(q.Root, { open: b && A, onOpenChange: x, children: /* @__PURE__ */ B(
+    "div",
+    {
+      ...m,
+      id: h,
+      "data-component": "search-bar",
+      "data-component-id": h,
+      className: [ie({ size: o, density: i }), n].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ r(q.Anchor, { asChild: !0, children: /* @__PURE__ */ B(
+          "div",
+          {
+            className: "ds:relative ds:flex ds:items-center",
+            onKeyDown: J,
+            children: [
+              /* @__PURE__ */ r(
+                ae,
+                {
+                  ref: Q,
+                  size: o,
+                  value: C,
+                  onInput: W,
+                  placeholder: X,
+                  "aria-label": N("search.label", "Search"),
+                  "aria-keyshortcuts": y,
+                  role: "combobox",
+                  "aria-expanded": b && A,
+                  "aria-controls": P,
+                  "aria-activedescendant": Y
+                }
+              ),
+              t ? /* @__PURE__ */ r(
+                "kbd",
+                {
+                  className: [
+                    U(),
+                    "ds:absolute ds:end-[var(--spacing-sm)] ds:top-1/2 ds:-translate-y-1/2",
+                    "ds:pointer-events-none"
+                  ].join(" "),
+                  children: g
+                }
+              ) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ r(q.Portal, { children: /* @__PURE__ */ r(
+          q.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            "aria-label": N("search.resultsLabel", "Search results"),
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            className: [
+              de(),
+              "ds:w-[var(--radix-popover-trigger-width)]"
+            ].join(" "),
+            children: /* @__PURE__ */ r(
+              "div",
+              {
+                id: P,
+                role: "listbox",
+                "aria-label": N("search.resultsLabel", "Search results"),
+                className: "ds:flex ds:flex-col ds:gap-[calc(var(--spacing-xs)/2)]",
+                children: c && c.length > 0 ? pe(
+                  c,
+                  k,
+                  P,
+                  M,
+                  z
+                ) : /* @__PURE__ */ r(
+                  "div",
+                  {
+                    role: "presentation",
+                    className: "ds:p-[var(--spacing-sm)] type-body-sm ds:text-[color:var(--foreground)]",
+                    children: N("search.noResults", "No results for “{{query}}”", {
+                      query: C
+                    })
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function pe(s, a, o, i, m) {
+  let u = 0;
+  return s.map((t, g) => {
+    const y = t.heading ? `${o}-group-${g}-heading` : void 0;
+    return /* @__PURE__ */ B(
+      "div",
+      {
+        role: t.heading ? "group" : "presentation",
+        "aria-labelledby": y,
+        children: [
+          t.heading ? /* @__PURE__ */ r(
+            "div",
+            {
+              id: y,
+              "aria-hidden": "true",
+              className: "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)] type-eyebrow ds:text-[color:var(--foreground)]",
+              children: t.heading
+            }
+          ) : null,
+          t.items.map((n) => {
+            const h = u;
+            u += 1;
+            const p = h === a, S = `${o}-option-${h}`, w = he(n.href), d = [
+              "ds:flex ds:items-center ds:gap-[var(--spacing-sm)]",
+              "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+              "ds:pt-[var(--spacing-xs)] ds:pb-[var(--spacing-xs)]",
+              "ds:rounded-[var(--radius-sm)]",
+              "ds:cursor-pointer",
+              "ds:no-underline ds:text-[color:var(--foreground)]",
+              "ds:min-h-[var(--min-target-size)]",
+              p ? "ds:bg-[var(--muted)]/40" : ""
+            ].join(" "), c = /* @__PURE__ */ B(Z, { children: [
+              n.icon ? /* @__PURE__ */ r(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: "ds:inline-flex ds:size-4 ds:shrink-0 ds:items-center ds:justify-center",
+                  children: n.icon
+                }
+              ) : null,
+              /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:text-[length:var(--font-size-sm)]", children: n.label }),
+              n.meta ? /* @__PURE__ */ r("span", { className: "ds:ms-auto type-meta ds:text-[color:var(--foreground)]", children: n.meta }) : null
+            ] }), l = {
+              id: S,
+              role: "option",
+              "aria-selected": p,
+              // onMouseDown rather than onClick so we trigger before the
+              // input loses focus to the pointer-down on the popover.
+              onMouseDown: (D) => {
+                D.preventDefault(), i(n);
+              },
+              onMouseEnter: () => m(h),
+              className: d
+            };
+            return w ? /* @__PURE__ */ r("a", { href: w, ...l, children: c }, n.id) : /* @__PURE__ */ r("div", { ...l, children: c }, n.id);
+          })
+        ]
+      },
+      `g-${g}`
+    );
+  });
+}
+function he(s) {
+  if (!s) return;
+  const a = s.trim();
+  if (a !== "" && (/^(https?:|mailto:|tel:)/i.test(a) || /^(\/|\.\/|\.\.\/)/.test(a)))
+    return a;
+}
+const we = {
+  id: "search-bar",
+  capabilities: ["filter", "edit_inline", "submit"],
+  state: {
+    query: {
+      type: "string",
+      descriptionKey: "ui.agent.searchBar.state.query",
+      description: "Current raw query string (inline mode). Empty in launcher mode.",
+      read: (s) => s.getQuery()
+    },
+    isEmpty: {
+      type: "boolean",
+      descriptionKey: "ui.agent.searchBar.state.isEmpty",
+      description: "True when the query is empty.",
+      read: (s) => s.getQuery().length === 0
+    }
+  },
+  actions: {
+    set_query: {
+      safety: "read",
+      argsType: "{ query: string }",
+      descriptionKey: "ui.agent.searchBar.actions.setQuery",
+      description: "Replace the current query (inline mode only). No-op in launcher mode.",
+      invoke: (s, a) => {
+        s.setQuery(a.query);
+      }
+    },
+    clear: {
+      safety: "read",
+      descriptionKey: "ui.agent.searchBar.actions.clear",
+      description: "Clear the query and close the result popover.",
+      invoke: (s) => {
+        s.clear();
+      }
+    },
+    submit: {
+      safety: "read",
+      descriptionKey: "ui.agent.searchBar.actions.submit",
+      description: "In launcher mode opens the CommandPalette; in inline mode commits the highlighted option.",
+      invoke: (s) => {
+        s.submit();
+      }
+    },
+    focus: {
+      safety: "read",
+      descriptionKey: "ui.agent.searchBar.actions.focus",
+      description: "Move keyboard focus to the SearchBar.",
+      invoke: (s) => {
+        s.focus();
+      }
+    },
+    apply_saved_search: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.searchBar.actions.applySavedSearch",
+      description: "Apply a saved-search by id. The host wires the actual query lookup; the adapter routes the id to its onApplySavedSearch handler. No-op when no handler is wired.",
+      invoke: (s, a) => {
+        s.applySavedSearch(a.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "search-bar",
+      description: "Marks the SearchBar root."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+};
+export {
+  ce as S,
+  Se as f,
+  we as s
+};
+//# sourceMappingURL=search-bar.agent-DxFAxctc.js.map