@actioneer/ads 0.2.3 → 0.2.4

package/components/command-palette.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+/**
+ * CommandPalette — the global-search / command surface (⌘K pattern).
+ *
+ * A portaled, top-anchored dialog with a search input and a grouped,
+ * keyboard-navigable result list. Deliberately NOT animated: the motion
+ * principles class a command palette as a frequent, keyboard-initiated
+ * action ("frequent = fast or none"), so it appears and dismisses
+ * instantly.
+ *
+ * Fully props-driven: the consumer supplies flat `items` (each optionally
+ * tagged with a `group`) and receives `onSelect`; filtering is a simple
+ * case-insensitive substring match over label + keywords, overridable via
+ * `filter`.
+ */
+export interface CommandPaletteItem {
+    id: string;
+    /** Primary label — also the default match text. */
+    label: string;
+    /** Section heading the item is listed under. Ungrouped items come first. */
+    group?: string;
+    /** Leading icon slot (sized to the row's text). */
+    icon?: React.ReactNode;
+    /** Muted right-aligned hint (a path, type, or shortcut). */
+    hint?: string;
+    /** Extra text the filter matches against (synonyms, paths). */
+    keywords?: string;
+}
+export interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    items: readonly CommandPaletteItem[];
+    /** Called with the chosen item; the palette closes itself afterwards. */
+    onSelect: (item: CommandPaletteItem) => void;
+    placeholder?: string;
+    emptyLabel?: string;
+    /** Accessible name for the dialog. */
+    "aria-label"?: string;
+    /** Override the match predicate (query is already lowercased). */
+    filter?: (item: CommandPaletteItem, query: string) => boolean;
+    className?: string;
+}
+export declare function CommandPalette({ open, onOpenChange, items, onSelect, placeholder, emptyLabel, "aria-label": ariaLabel, filter, className, }: CommandPaletteProps): React.ReactPortal | null;

package/components/command-palette.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import * as o from "react";
+import { createPortal as S } from "react-dom";
+import { Search as q } from "../lib/icons.js";
+import { cn as k } from "../lib/cn.js";
+const C = (a, i) => `${a.label} ${a.keywords ?? ""}`.toLowerCase().includes(i);
+function _({
+  open: a,
+  onOpenChange: i,
+  items: p,
+  onSelect: R,
+  placeholder: $ = "Search…",
+  emptyLabel: A = "No results",
+  "aria-label": D = "Global search",
+  filter: h = C,
+  className: E
+}) {
+  const f = o.useId(), v = o.useRef(null), y = o.useRef(null), g = o.useRef(null), [m, b] = o.useState(""), [c, x] = o.useState(0), n = o.useMemo(() => {
+    const e = m.trim().toLowerCase();
+    return e ? p.filter((r) => h(r, e)) : [...p];
+  }, [p, m, h]), M = o.useMemo(() => {
+    const e = [], r = /* @__PURE__ */ new Map();
+    for (const t of n)
+      r.has(t.group) || (r.set(t.group, []), e.push(t.group)), r.get(t.group).push(t);
+    return e.map((t) => ({ group: t, items: r.get(t) }));
+  }, [n]), u = n[c];
+  o.useEffect(() => {
+    x(0);
+  }, [m, a]), o.useEffect(() => {
+    if (!a) return;
+    g.current = document.activeElement, b("");
+    const e = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const r = requestAnimationFrame(() => {
+      var t;
+      return (t = v.current) == null ? void 0 : t.focus();
+    });
+    return () => {
+      var t, l;
+      document.body.style.overflow = e, cancelAnimationFrame(r), (l = (t = g.current) == null ? void 0 : t.focus) == null || l.call(t);
+    };
+  }, [a]), o.useEffect(() => {
+    var e, r;
+    !a || !u || (r = (e = y.current) == null ? void 0 : e.querySelector(`[data-index="${c}"]`)) == null || r.scrollIntoView({ block: "nearest" });
+  }, [a, u, c]);
+  const w = (e) => {
+    i(!1), R(e);
+  }, I = (e) => {
+    e.key === "Escape" ? (e.preventDefault(), i(!1)) : e.key === "ArrowDown" ? (e.preventDefault(), x((r) => Math.min(r + 1, n.length - 1))) : e.key === "ArrowUp" ? (e.preventDefault(), x((r) => Math.max(r - 1, 0))) : e.key === "Enter" && u && (e.preventDefault(), w(u));
+  };
+  return a ? S(
+    /* @__PURE__ */ d("div", { className: "fixed inset-0 z-50 flex items-start justify-center px-4 pt-[15vh]", children: [
+      /* @__PURE__ */ s(
+        "div",
+        {
+          "aria-hidden": !0,
+          className: "absolute inset-0 bg-overlay",
+          onClick: () => i(!1)
+        }
+      ),
+      /* @__PURE__ */ d(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": D,
+          className: k(
+            "relative flex w-full max-w-lg flex-col overflow-hidden",
+            "rounded-xl bg-elevated text-foreground shadow-elevation",
+            E
+          ),
+          onKeyDown: I,
+          children: [
+            /* @__PURE__ */ d("div", { className: "flex items-center gap-2.5 px-4 py-3", children: [
+              /* @__PURE__ */ s(q, { "aria-hidden": !0, className: "size-4 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ s(
+                "input",
+                {
+                  ref: v,
+                  role: "combobox",
+                  "aria-expanded": "true",
+                  "aria-controls": f,
+                  "aria-activedescendant": u ? `${f}-${c}` : void 0,
+                  "aria-autocomplete": "list",
+                  value: m,
+                  onChange: (e) => b(e.target.value),
+                  placeholder: $,
+                  className: "w-full bg-transparent text-base text-foreground outline-none placeholder:text-muted-foreground"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ s(
+              "div",
+              {
+                ref: y,
+                id: f,
+                role: "listbox",
+                "aria-label": "Results",
+                className: "max-h-80 overflow-y-auto p-1.5 pt-0",
+                children: n.length === 0 ? /* @__PURE__ */ s("p", { className: "px-2.5 py-6 text-center text-xs text-muted-foreground", children: A }) : M.map(({ group: e, items: r }) => /* @__PURE__ */ d("div", { role: "group", "aria-label": e, children: [
+                  e && /* @__PURE__ */ s("div", { className: "px-2.5 pb-1 pt-2.5 text-xs font-medium text-muted-foreground select-none", children: e }),
+                  r.map((t) => {
+                    const l = n.indexOf(t), N = l === c;
+                    return /* @__PURE__ */ d(
+                      "div",
+                      {
+                        id: `${f}-${l}`,
+                        "data-index": l,
+                        role: "option",
+                        "aria-selected": N,
+                        onPointerMove: () => x(l),
+                        onClick: () => w(t),
+                        className: k(
+                          "flex cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs",
+                          N ? "bg-fill text-foreground" : "text-secondary"
+                        ),
+                        children: [
+                          t.icon && /* @__PURE__ */ s(
+                            "span",
+                            {
+                              "aria-hidden": !0,
+                              className: "flex shrink-0 items-center text-muted-foreground [&_svg]:size-4",
+                              children: t.icon
+                            }
+                          ),
+                          /* @__PURE__ */ s("span", { className: "min-w-0 flex-1 truncate", children: t.label }),
+                          t.hint && /* @__PURE__ */ s("span", { className: "shrink-0 text-xs text-tertiary", children: t.hint })
+                        ]
+                      },
+                      t.id
+                    );
+                  })
+                ] }, e ?? "__ungrouped"))
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    document.body
+  ) : null;
+}
+export {
+  _ as CommandPalette
+};

package/components/index.d.ts

@@ -20,6 +20,7 @@ export * from './autocomplete';
 export * from './slider';
 export * from './segmented';
 export * from './modal';
+export * from './command-palette';
 export * from './drawer';
 export * from './popover';
 export * from './tooltip';