@alfadocs/ui-kit-debug 0.1.8 → 0.2.0

package/dist/_chunks/search-bar-BTDfgYtg.js

@@ -0,0 +1,585 @@
+import { jsx as a, jsxs as B, Fragment as ae } from "react/jsx-runtime";
+import { forwardRef as te, useState as _, useEffect as F, useRef as j, useMemo as E, useImperativeHandle as G, useId as ne, useCallback as P } from "react";
+import { c as A } from "./index-D2ZczOXr.js";
+import { useTranslation as U } from "react-i18next";
+import * as q from "@radix-ui/react-popover";
+import { S as oe } from "./search-input-CdJIEjFo.js";
+import { u as W } from "./registry-C9nwlNyL.js";
+import { n as O } from "./normalize-diacritics-BNGbFNlJ.js";
+import { S as ie } from "./search-BonnQsHv.js";
+import { u as de } from "./use-debounced-callback-BisrB-Fq.js";
+const J = {
+  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, r) => {
+        s.setQuery(r.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, r) => {
+        s.applySavedSearch(r.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."
+    }
+  }
+};
+function ce() {
+  if (typeof navigator > "u") return !1;
+  const s = navigator.userAgentData, r = (s == null ? void 0 : s.platform) ?? navigator.platform ?? "";
+  return /mac/i.test(r);
+}
+const le = A(
+  [
+    "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"
+    }
+  }
+), ue = A(
+  ["ds:inline-flex ds:flex-col", "ds:w-full"].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      },
+      density: {
+        default: "",
+        compact: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      density: "default"
+    }
+  }
+), X = A(
+  [
+    "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(" ")
+), pe = A(
+  [
+    "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 Ie(s, r) {
+  const o = O(s.trim());
+  return o === "" ? r : r.map((i) => ({
+    ...i,
+    items: i.items.filter(
+      (f) => O(f.label).includes(o)
+    )
+  })).filter((i) => i.items.length > 0);
+}
+const he = te(
+  (s, r) => {
+    const {
+      mode: o = "launcher",
+      size: i = "md",
+      density: f = "default",
+      topLevel: l = !1,
+      placeholder: t,
+      shortcutHint: g = !0,
+      className: y,
+      onOpenCommandPalette: n,
+      id: u,
+      onApplySavedSearch: p,
+      value: w,
+      defaultValue: N,
+      onQueryChange: d,
+      results: c,
+      onSelect: m,
+      debounceMs: b,
+      ...C
+    } = s, { t: v } = U(), [V, K] = _(!1);
+    F(() => {
+      K(ce());
+    }, []);
+    const z = V ? "⌘K" : "Ctrl+K", x = "Meta+K Control+K", k = l ? { role: "search" } : { role: void 0 };
+    if (o === "launcher") {
+      const I = t ?? v("search.placeholder", "Search…");
+      return /* @__PURE__ */ a(
+        fe,
+        {
+          forwardedRef: r,
+          id: u,
+          landmarkProps: k,
+          className: y,
+          onOpenCommandPalette: n,
+          onApplySavedSearch: p,
+          resolvedPlaceholder: I,
+          openLabel: v("search.open", "Open search"),
+          ariaKeyshortcuts: x,
+          launcherClass: le({ size: i, density: f }),
+          shortcutHint: g,
+          shortcutLabel: z,
+          rest: C
+        }
+      );
+    }
+    return /* @__PURE__ */ a(
+      me,
+      {
+        forwardedRef: r,
+        size: i,
+        density: f,
+        landmarkProps: k,
+        placeholder: t,
+        shortcutHint: g,
+        shortcutLabel: z,
+        ariaKeyshortcuts: x,
+        className: y,
+        id: u,
+        onApplySavedSearch: p,
+        ...s
+      }
+    );
+  }
+);
+he.displayName = "SearchBar";
+function fe(s) {
+  const {
+    forwardedRef: r,
+    id: o,
+    landmarkProps: i,
+    className: f,
+    onOpenCommandPalette: l,
+    onApplySavedSearch: t,
+    resolvedPlaceholder: g,
+    openLabel: y,
+    ariaKeyshortcuts: n,
+    launcherClass: u,
+    shortcutHint: p,
+    shortcutLabel: w,
+    rest: N
+  } = s, d = j(null), c = j(null), m = E(
+    () => ({
+      getQuery: () => "",
+      // Launcher mode is stateless \u2014 it delegates to CommandPalette.
+      setQuery: () => {
+      },
+      clear: () => {
+      },
+      submit: () => l == null ? void 0 : l(),
+      focus: () => {
+        var b;
+        return (b = d.current) == null ? void 0 : b.focus();
+      },
+      applySavedSearch: (b) => t == null ? void 0 : t(b)
+    }),
+    [l, t]
+  );
+  return G(
+    r,
+    () => c.current,
+    []
+  ), W(J, m, o), /* @__PURE__ */ a(
+    "div",
+    {
+      ref: c,
+      ...i,
+      "data-component": "search-bar",
+      "data-component-id": o,
+      id: o,
+      className: f,
+      children: /* @__PURE__ */ B(
+        "button",
+        {
+          ref: d,
+          type: "button",
+          onClick: l,
+          "aria-haspopup": "dialog",
+          "aria-label": y,
+          "aria-keyshortcuts": n,
+          className: u,
+          ...N,
+          children: [
+            /* @__PURE__ */ a(
+              ie,
+              {
+                "aria-hidden": !0,
+                className: "ds:size-4 ds:shrink-0",
+                focusable: "false"
+              }
+            ),
+            /* @__PURE__ */ a("span", { "aria-hidden": "true", className: "ds:truncate ds:text-start", children: g }),
+            p ? /* @__PURE__ */ a("kbd", { className: X(), children: w }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function me(s) {
+  const {
+    forwardedRef: r,
+    size: o,
+    density: i,
+    landmarkProps: f,
+    placeholder: l,
+    shortcutHint: t,
+    shortcutLabel: g,
+    ariaKeyshortcuts: y,
+    className: n,
+    id: u,
+    onApplySavedSearch: p,
+    value: w,
+    defaultValue: N,
+    onQueryChange: d,
+    results: c,
+    onSelect: m,
+    debounceMs: b = 150
+  } = s, { t: C } = U(), v = w !== void 0, [V, K] = _(N ?? ""), z = v ? w ?? "" : V, [x, k] = _(!1), [S, I] = _(0), H = j(null), D = ne(), $ = de((e) => {
+    d == null || d(e);
+  }, b), h = E(() => c ? c.flatMap((e) => e.items) : [], [c]);
+  F(() => {
+    S > h.length - 1 && I(0);
+  }, [h.length, S]);
+  const Y = P(
+    (e) => {
+      v || K(e), $(e), k(e.trim().length > 0);
+    },
+    [$, v]
+  ), M = P(
+    (e) => {
+      m == null || m(e), k(!1), v || K("");
+    },
+    [m, v]
+  ), Z = P(
+    (e) => {
+      if (!(e.nativeEvent.isComposing || e.keyCode === 229)) {
+        if (!x && e.key === "ArrowDown" && h.length > 0) {
+          e.preventDefault(), k(!0);
+          return;
+        }
+        if (x)
+          if (e.key === "ArrowDown")
+            e.preventDefault(), I((R) => (R + 1) % Math.max(h.length, 1));
+          else if (e.key === "ArrowUp")
+            e.preventDefault(), I(
+              (R) => (R - 1 + Math.max(h.length, 1)) % Math.max(h.length, 1)
+            );
+          else if (e.key === "Enter") {
+            const R = h[S];
+            R && (e.preventDefault(), M(R));
+          } else e.key === "Escape" && (e.preventDefault(), k(!1));
+      }
+    },
+    [x, h, S, M]
+  ), ee = l ?? C("search.placeholder", "Search…"), L = h.length > 0, se = x && L ? `${D}-option-${S}` : void 0, Q = P(
+    (e) => {
+      v || K(e), d == null || d(e), k(e.trim().length > 0);
+    },
+    [v, d]
+  ), T = j(null);
+  G(
+    r,
+    () => T.current,
+    []
+  );
+  const re = E(
+    () => ({
+      getQuery: () => z,
+      setQuery: Q,
+      clear: () => {
+        Q("");
+      },
+      submit: () => {
+        const e = h[S];
+        e && M(e);
+      },
+      focus: () => {
+        var e;
+        return (e = H.current) == null ? void 0 : e.focus();
+      },
+      applySavedSearch: (e) => p == null ? void 0 : p(e)
+    }),
+    [
+      z,
+      Q,
+      h,
+      S,
+      M,
+      p
+    ]
+  );
+  return W(J, re, u), /* @__PURE__ */ a(q.Root, { open: x && L, onOpenChange: k, children: /* @__PURE__ */ B(
+    "div",
+    {
+      ref: T,
+      ...f,
+      id: u,
+      "data-component": "search-bar",
+      "data-component-id": u,
+      className: [ue({ size: o, density: i }), n].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ a(q.Anchor, { asChild: !0, children: /* @__PURE__ */ B(
+          "div",
+          {
+            className: "ds:relative ds:flex ds:items-center",
+            onKeyDown: Z,
+            children: [
+              /* @__PURE__ */ a(
+                oe,
+                {
+                  ref: H,
+                  size: o,
+                  value: z,
+                  onInput: Y,
+                  placeholder: ee,
+                  "aria-label": C("search.label", "Search"),
+                  "aria-keyshortcuts": y,
+                  role: "combobox",
+                  "aria-expanded": x && L,
+                  "aria-controls": D,
+                  "aria-activedescendant": se
+                }
+              ),
+              t ? /* @__PURE__ */ a(
+                "kbd",
+                {
+                  className: [
+                    X(),
+                    "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__ */ a(q.Portal, { children: /* @__PURE__ */ a(
+          q.Content,
+          {
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            "aria-label": C("search.resultsLabel", "Search results"),
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            className: [
+              pe(),
+              "ds:w-[var(--radix-popover-trigger-width)]"
+            ].join(" "),
+            children: /* @__PURE__ */ a(
+              "div",
+              {
+                id: D,
+                role: "listbox",
+                "aria-label": C("search.resultsLabel", "Search results"),
+                className: "ds:flex ds:flex-col ds:gap-[calc(var(--spacing-xs)/2)]",
+                children: c && c.length > 0 ? ve(
+                  c,
+                  S,
+                  D,
+                  M,
+                  I
+                ) : /* @__PURE__ */ a(
+                  "div",
+                  {
+                    role: "presentation",
+                    className: "ds:p-[var(--spacing-sm)] type-body-sm ds:text-[color:var(--foreground)]",
+                    children: C(
+                      "search.noResults",
+                      "No results for “{{query}}”",
+                      {
+                        query: z
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+function ve(s, r, o, i, f) {
+  let l = 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__ */ a(
+            "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 u = l;
+            l += 1;
+            const p = u === r, w = `${o}-option-${u}`, N = ge(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(ae, { children: [
+              n.icon ? /* @__PURE__ */ a(
+                "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__ */ a("span", { className: "ds:flex-1 ds:text-[length:var(--font-size-sm)]", children: n.label }),
+              n.meta ? /* @__PURE__ */ a("span", { className: "ds:ms-auto type-meta ds:text-[color:var(--foreground)]", children: n.meta }) : null
+            ] }), m = {
+              id: w,
+              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: (b) => {
+                b.preventDefault(), i(n);
+              },
+              onMouseEnter: () => f(u),
+              className: d
+            };
+            return N ? /* @__PURE__ */ a("a", { href: N, ...m, children: c }, n.id) : /* @__PURE__ */ a("div", { ...m, children: c }, n.id);
+          })
+        ]
+      },
+      `g-${g}`
+    );
+  });
+}
+function ge(s) {
+  if (!s) return;
+  const r = s.trim();
+  if (r !== "" && (/^(https?:|mailto:|tel:)/i.test(r) || /^(\/|\.\/|\.\.\/)/.test(r)))
+    return r;
+}
+export {
+  he as S,
+  Ie as f,
+  J as s
+};
+//# sourceMappingURL=search-bar-BTDfgYtg.js.map