@alfadocs/ui-kit 0.1.9 → 0.2.0

package/dist/_chunks/command-palette-C_vgSgrI.js

@@ -0,0 +1,441 @@
+import { jsx as s, jsxs as m, Fragment as A } from "react/jsx-runtime";
+import { forwardRef as u, useState as N, useEffect as v, useRef as k, useMemo as w, useCallback as T } from "react";
+import { _ as f, R as J } from "./index-4xgbg-sn.js";
+import * as h from "@radix-ui/react-dialog";
+import { useTranslation as j } from "react-i18next";
+import { S as V } from "./search-BonnQsHv.js";
+import { u as $ } from "./registry-C9nwlNyL.js";
+const W = {
+  id: "command-palette",
+  capabilities: ["open", "close", "filter", "pick", "submit"],
+  state: {
+    query: {
+      type: "string",
+      description: "Current filter query in the command palette input.",
+      read: (e) => e.getQuery()
+    },
+    isOpen: {
+      type: "boolean",
+      description: "True when the palette is visible.",
+      read: (e) => e.getIsOpen()
+    }
+  },
+  actions: {
+    open: {
+      safety: "read",
+      description: "Open the command palette.",
+      invoke: (e) => {
+        e.open();
+      }
+    },
+    close: {
+      safety: "read",
+      description: "Close the command palette.",
+      invoke: (e) => {
+        e.close();
+      }
+    },
+    apply_filter: {
+      safety: "read",
+      argsType: "{ query: string }",
+      description: "Set the filter query.",
+      invoke: (e, t) => {
+        e.setQuery(t.query);
+      }
+    }
+  },
+  domHooks: {
+    root: { attr: "data-component", value: "command-palette" },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-command-id",
+      description: "Each command item emits its key as data-command-id."
+    }
+  }
+};
+function y(e) {
+  return e.normalize("NFD").replace(new RegExp("\\p{Diacritic}", "gu"), "").toLowerCase();
+}
+const X = (e, t, a) => J(y(e), y(t), a == null ? void 0 : a.map(y)), D = "ui.cmdk.recents", E = 5;
+function Y() {
+  if (typeof window > "u") return [];
+  try {
+    const e = window.localStorage.getItem(D);
+    if (!e) return [];
+    const t = JSON.parse(e);
+    return Array.isArray(t) ? t.slice(0, E).filter((a) => typeof a == "string") : [];
+  } catch {
+    return [];
+  }
+}
+function L(e) {
+  if (!(typeof window > "u"))
+    try {
+      window.localStorage.setItem(
+        D,
+        JSON.stringify(e.slice(0, E))
+      );
+    } catch {
+    }
+}
+function me() {
+  const [e, t] = N(!1);
+  return v(() => {
+    function a(n) {
+      const o = n.target, c = o == null ? void 0 : o.tagName.toLowerCase();
+      if ((c === "input" || c === "textarea" || (o == null ? void 0 : o.isContentEditable)) && !(e && n.key === "Escape")) return;
+      const p = n.key === "k" || n.key === "K", g = n.metaKey || n.ctrlKey;
+      p && g && (n.preventDefault(), t((x) => !x));
+    }
+    return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
+  }, [e]), { open: e, setOpen: t };
+}
+const U = [
+  "ds:flex ds:h-full ds:w-full ds:flex-col ds:overflow-hidden",
+  "ds:rounded-[var(--radius-md)]",
+  "ds:bg-[var(--background)] ds:text-[var(--foreground)]"
+].join(" "), M = u(({ className: e, filter: t = X, id: a, ...n }, o) => /* @__PURE__ */ s(
+  f,
+  {
+    ref: o,
+    filter: t,
+    className: [U, e].filter(Boolean).join(" "),
+    "data-component": "command-palette",
+    "data-component-id": a,
+    ...n
+  }
+));
+M.displayName = "CommandPalette";
+const Z = [
+  "ds:flex ds:items-center",
+  "ds:border-block-end ds:border-[var(--border)]",
+  "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-sm)]"
+].join(" "), ee = [
+  "ds:flex ds:w-full ds:bg-transparent",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:text-[var(--font-size-base)] ds:text-[var(--foreground)]",
+  "ds:placeholder:text-[var(--muted-foreground)]",
+  "ds:outline-none",
+  "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
+  "ds:border-0"
+].join(" "), K = u(({ className: e, placeholder: t, ...a }, n) => {
+  const { t: o } = j();
+  return /* @__PURE__ */ m("div", { className: Z, children: [
+    /* @__PURE__ */ s(
+      V,
+      {
+        "aria-hidden": "true",
+        className: "ds:size-4 ds:me-2 ds:text-[var(--muted-foreground)]"
+      }
+    ),
+    /* @__PURE__ */ s(
+      f.Input,
+      {
+        ref: n,
+        placeholder: t ?? o("navigation.cmdk.placeholder", "Type a command or search…"),
+        className: [ee, e].filter(Boolean).join(" "),
+        ...a
+      }
+    )
+  ] });
+});
+K.displayName = "CommandInput";
+const O = u(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  f.List,
+  {
+    ref: a,
+    className: [
+      "ds:max-h-[20rem] ds:overflow-y-auto",
+      "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]",
+      "ds:py-[var(--spacing-xs)]",
+      e ?? ""
+    ].filter(Boolean).join(" "),
+    ...t
+  }
+));
+O.displayName = "CommandList";
+const Q = u(({ className: e, children: t, ...a }, n) => {
+  const { t: o } = j();
+  return /* @__PURE__ */ s(
+    f.Empty,
+    {
+      ref: n,
+      className: [
+        "ds:py-[var(--spacing-lg)] ds:text-center",
+        "type-body-sm ds:text-[var(--muted-foreground)]",
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      ...a,
+      children: t ?? o("navigation.cmdk.empty", "No results found")
+    }
+  );
+});
+Q.displayName = "CommandEmpty";
+const S = u(({ className: e, heading: t, ...a }, n) => /* @__PURE__ */ s(
+  f.Group,
+  {
+    ref: n,
+    heading: t,
+    className: [
+      "ds:overflow-hidden",
+      "ds:text-[var(--foreground)]",
+      "ds:[&_[cmdk-group-heading]]:ps-[var(--spacing-sm)]",
+      "ds:[&_[cmdk-group-heading]]:pe-[var(--spacing-sm)]",
+      "ds:[&_[cmdk-group-heading]]:py-[var(--spacing-xs)]",
+      "ds:[&_[cmdk-group-heading]]:type-eyebrow",
+      "ds:[&_[cmdk-group-heading]]:text-[var(--muted-foreground)]",
+      e ?? ""
+    ].filter(Boolean).join(" "),
+    ...a
+  }
+));
+S.displayName = "CommandGroup";
+const te = [
+  "ds:relative ds:flex ds:items-center",
+  "ds:gap-[var(--spacing-sm)]",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+  "ds:text-[var(--font-size-sm)] ds:text-[var(--foreground)]",
+  "ds:cursor-pointer ds:select-none ds:outline-none",
+  "ds:data-[selected=true]:bg-[var(--primary)] ds:data-[selected=true]:text-[var(--primary-foreground)]",
+  "ds:data-[selected=true]:font-[var(--font-weight-semibold)]",
+  "ds:data-[disabled=true]:pointer-events-none ds:data-[disabled=true]:opacity-50",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), b = u(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  f.Item,
+  {
+    ref: a,
+    className: [te, e].filter(Boolean).join(" "),
+    ...t
+  }
+));
+b.displayName = "CommandItem";
+const q = u(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  f.Separator,
+  {
+    ref: a,
+    className: [
+      "ds:-ms-[var(--spacing-xs)] ds:-me-[var(--spacing-xs)]",
+      "ds:my-[var(--spacing-xs)]",
+      "ds:h-px ds:bg-[var(--border)]",
+      e ?? ""
+    ].filter(Boolean).join(" "),
+    ...t
+  }
+));
+q.displayName = "CommandSeparator";
+const R = u(
+  ({ className: e, children: t, ...a }, n) => /* @__PURE__ */ s(
+    "kbd",
+    {
+      ref: n,
+      className: [
+        "ds:ms-auto",
+        "ds:inline-flex ds:items-center",
+        "ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]",
+        "ds:h-5 ds:rounded-[var(--radius-sm)]",
+        "ds:bg-[var(--muted)]/20 ds:text-[var(--muted-foreground)]",
+        "ds:text-[length:var(--font-size-xs)] ds:font-[var(--font-weight-medium)]",
+        "ds:data-[selected=true]:bg-[var(--primary-foreground)]/20",
+        "ds:data-[selected=true]:text-[var(--primary-foreground)]",
+        e ?? ""
+      ].filter(Boolean).join(" "),
+      ...a,
+      children: t
+    }
+  )
+);
+R.displayName = "CommandShortcut";
+function ae(e, t) {
+  if (!t) return e;
+  const a = y(e), n = y(t), o = a.indexOf(n);
+  if (o === -1) return e;
+  const c = e.slice(0, o), l = e.slice(o, o + n.length), p = e.slice(o + n.length);
+  return /* @__PURE__ */ m(A, { children: [
+    c,
+    /* @__PURE__ */ s("mark", { className: "ds:bg-[var(--accent)]/20 ds:text-inherit ds:rounded-[var(--radius-sm)] ds:px-[0.125em]", children: l }),
+    p
+  ] });
+}
+const se = [
+  "ds:fixed ds:inset-0 ds:z-[var(--z-modal-backdrop)]",
+  "ds:bg-[var(--foreground)]/40 ds:backdrop-blur-sm",
+  "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(" "), ne = [
+  "ds:fixed ds:z-[var(--z-modal)]",
+  // Logical-inset arbitrary-value positioning: `inset-inline-start-1/2`
+  // isn't a real Tailwind class (the generator maps fractions only to
+  // `start-*`), so use `start-1/2` for horizontal and `top-*` for the
+  // top offset — matching the working Dialog component.
+  "ds:top-[12vh] ds:start-1/2 ds:-translate-x-1/2 ds:rtl:translate-x-1/2",
+  "ds:w-[92vw] ds:max-w-[var(--dialog-width-lg)]",
+  "ds:rounded-[var(--radius-lg)]",
+  "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+  "ds:shadow-[var(--shadow-xl)]",
+  "ds:border ds:border-[var(--border)]",
+  "ds:data-[state=open]:animate-in ds:data-[state=closed]:animate-out",
+  "ds:data-[state=open]:zoom-in-95 ds:data-[state=closed]:zoom-out-95",
+  "ds:motion-reduce:animate-none",
+  "ds:focus:outline-none"
+].join(" "), P = ({ children: e }) => /* @__PURE__ */ s("span", { className: "ds:sr-only", children: e });
+function ue({
+  open: e,
+  onOpenChange: t,
+  commands: a,
+  header: n,
+  id: o
+}) {
+  const { t: c } = j(), [l, p] = N(""), [g, x] = N(Y);
+  v(() => {
+    e || p("");
+  }, [e]);
+  const z = k(e);
+  v(() => {
+    z.current = e;
+  }, [e]);
+  const I = k(l);
+  v(() => {
+    I.current = l;
+  }, [l]);
+  const C = k(t);
+  v(() => {
+    C.current = t;
+  }, [t]);
+  const G = w(
+    () => ({
+      getQuery: () => I.current,
+      getIsOpen: () => z.current,
+      open: () => C.current(!0),
+      close: () => C.current(!1),
+      setQuery: (r) => p(r)
+    }),
+    []
+  );
+  $(W, G, o);
+  const F = w(() => {
+    const r = /* @__PURE__ */ new Map();
+    return a.forEach((i) => {
+      const d = r.get(i.group) ?? [];
+      d.push(i), r.set(i.group, d);
+    }), r;
+  }, [a]), _ = w(() => {
+    if (l) return [];
+    const r = new Map(a.map((i) => [i.id, i]));
+    return g.map((i) => r.get(i)).filter(Boolean);
+  }, [a, g, l]), B = T(
+    (r) => {
+      t(!1);
+      const i = [r.id, ...g.filter((d) => d !== r.id)].slice(
+        0,
+        E
+      );
+      x(i), L(i), setTimeout(() => r.onSelect(), 0);
+    },
+    [g, t]
+  ), H = T(() => {
+    x([]), L([]);
+  }, []);
+  return /* @__PURE__ */ s(h.Root, { open: e, onOpenChange: t, children: /* @__PURE__ */ m(h.Portal, { children: [
+    /* @__PURE__ */ s(h.Overlay, { className: se }),
+    /* @__PURE__ */ m(
+      h.Content,
+      {
+        className: ne,
+        "aria-label": c("navigation.cmdk.title", "Command palette"),
+        children: [
+          /* @__PURE__ */ s(h.Title, { asChild: !0, children: /* @__PURE__ */ s(P, { children: c("navigation.cmdk.title", "Command palette") }) }),
+          /* @__PURE__ */ s(h.Description, { asChild: !0, children: /* @__PURE__ */ s(P, { children: c(
+            "navigation.cmdk.description",
+            "Search for commands, pages, and actions"
+          ) }) }),
+          /* @__PURE__ */ m(
+            M,
+            {
+              id: o,
+              label: c("navigation.cmdk.title", "Command palette"),
+              children: [
+                n,
+                /* @__PURE__ */ s(K, { value: l, onValueChange: p }),
+                /* @__PURE__ */ m(O, { children: [
+                  /* @__PURE__ */ s(Q, {}),
+                  _.length > 0 ? /* @__PURE__ */ m(A, { children: [
+                    /* @__PURE__ */ m(
+                      S,
+                      {
+                        heading: c("navigation.cmdk.recents", "Recent"),
+                        children: [
+                          _.map((r) => /* @__PURE__ */ m(
+                            b,
+                            {
+                              value: `recent-${r.label}`,
+                              onSelect: () => B(r),
+                              children: [
+                                r.icon ? /* @__PURE__ */ s("span", { "aria-hidden": "true", children: r.icon }) : null,
+                                /* @__PURE__ */ s("span", { children: r.label }),
+                                r.shortcut ? /* @__PURE__ */ s(R, { children: r.shortcut }) : null
+                              ]
+                            },
+                            `recent-${r.id}`
+                          )),
+                          /* @__PURE__ */ s(
+                            b,
+                            {
+                              value: "__clear-recents",
+                              onSelect: H,
+                              children: /* @__PURE__ */ s("span", { children: c(
+                                "navigation.cmdk.clearRecents",
+                                "Clear recent commands"
+                              ) })
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ s(q, {})
+                  ] }) : null,
+                  Array.from(F.entries()).map(([r, i]) => /* @__PURE__ */ s(S, { heading: r, children: i.map((d) => /* @__PURE__ */ m(
+                    b,
+                    {
+                      value: d.label,
+                      keywords: d.keywords,
+                      onSelect: () => B(d),
+                      children: [
+                        d.icon ? /* @__PURE__ */ s("span", { "aria-hidden": "true", children: d.icon }) : null,
+                        /* @__PURE__ */ s("span", { children: ae(d.label, l) }),
+                        d.shortcut ? /* @__PURE__ */ s(R, { children: d.shortcut }) : null
+                      ]
+                    },
+                    d.id
+                  )) }, r))
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  Q as C,
+  S as a,
+  K as b,
+  b as c,
+  O as d,
+  M as e,
+  ue as f,
+  q as g,
+  R as h,
+  W as i,
+  X as j,
+  ae as k,
+  me as u
+};
+//# sourceMappingURL=command-palette-C_vgSgrI.js.map