@alfadocs/ui-kit 0.1.7 → 0.1.9

package/dist/_chunks/{command-palette.agent-js2rxgeR.js → command-palette.agent-HatEt_EM.js}

@@ -1,17 +1,17 @@
-import { jsx as s, jsxs as c, Fragment as I } from "react/jsx-runtime";
-import { forwardRef as u, useState as b, useEffect as B, useMemo as E, useCallback as z } from "react";
-import { _ as p, R as G } from "./index-4xgbg-sn.js";
+import { jsx as s, jsxs as c, Fragment as _ } from "react/jsx-runtime";
+import { forwardRef as p, useState as b, useEffect as B, useMemo as E, useCallback as z } from "react";
+import { _ as u, R as K } from "./index-4xgbg-sn.js";
 import * as f from "@radix-ui/react-dialog";
 import { useTranslation as w } from "react-i18next";
-import { S as F } from "./search-BonnQsHv.js";
+import { S as q } from "./search-BonnQsHv.js";
 function h(e) {
   return e.normalize("NFD").replace(new RegExp("\\p{Diacritic}", "gu"), "").toLowerCase();
 }
-const O = (e, t, a) => G(h(e), h(t), a == null ? void 0 : a.map(h)), L = "ui.cmdk.recents", N = 5;
-function H() {
+const G = (e, t, a) => K(h(e), h(t), a == null ? void 0 : a.map(h)), T = "ui.cmdk.recents", N = 5;
+function F() {
   if (typeof window > "u") return [];
   try {
-    const e = window.localStorage.getItem(L);
+    const e = window.localStorage.getItem(T);
     if (!e) return [];
     const t = JSON.parse(e);
     return Array.isArray(t) ? t.slice(0, N).filter((a) => typeof a == "string") : [];
@@ -22,42 +22,43 @@ function H() {
 function R(e) {
   if (!(typeof window > "u"))
     try {
-      window.localStorage.setItem(L, JSON.stringify(e.slice(0, N)));
+      window.localStorage.setItem(T, JSON.stringify(e.slice(0, N)));
     } catch {
     }
 }
-function te() {
+function ae() {
   const [e, t] = b(!1);
   return B(() => {
-    function a(n) {
-      const r = n.target, l = r == null ? void 0 : r.tagName.toLowerCase();
-      if ((l === "input" || l === "textarea" || (r == null ? void 0 : r.isContentEditable)) && !(e && n.key === "Escape")) return;
-      const m = n.key === "k" || n.key === "K", v = n.metaKey || n.ctrlKey;
-      m && v && (n.preventDefault(), t((y) => !y));
+    function a(r) {
+      const n = r.target, l = n == null ? void 0 : n.tagName.toLowerCase();
+      if ((l === "input" || l === "textarea" || (n == null ? void 0 : n.isContentEditable)) && !(e && r.key === "Escape")) return;
+      const m = r.key === "k" || r.key === "K", v = r.metaKey || r.ctrlKey;
+      m && v && (r.preventDefault(), t((x) => !x));
     }
     return document.addEventListener("keydown", a), () => document.removeEventListener("keydown", a);
   }, [e]), { open: e, setOpen: t };
 }
-const J = [
+const Q = [
   "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(" "), D = u(({ className: e, filter: t = O, ...a }, n) => /* @__PURE__ */ s(
-  p,
+].join(" "), L = p(({ className: e, filter: t = G, id: a, ...r }, n) => /* @__PURE__ */ s(
+  u,
   {
     ref: n,
     filter: t,
-    className: [J, e].filter(Boolean).join(" "),
+    className: [Q, e].filter(Boolean).join(" "),
     "data-component": "command-palette",
-    ...a
+    "data-component-id": a,
+    ...r
   }
 ));
-D.displayName = "CommandPalette";
-const V = [
+L.displayName = "CommandPalette";
+const H = [
   "ds:flex ds:items-center",
   "ds:border-block-end ds:border-[var(--border)]",
   "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-sm)]"
-].join(" "), $ = [
+].join(" "), J = [
   "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)]",
@@ -65,24 +66,24 @@ const V = [
   "ds:outline-none",
   "ds:disabled:cursor-not-allowed ds:disabled:opacity-50",
   "ds:border-0"
-].join(" "), M = u(({ className: e, placeholder: t, ...a }, n) => {
-  const { t: r } = w();
-  return /* @__PURE__ */ c("div", { className: V, children: [
-    /* @__PURE__ */ s(F, { "aria-hidden": "true", className: "ds:size-4 ds:me-2 ds:text-[var(--muted-foreground)]" }),
+].join(" "), P = p(({ className: e, placeholder: t, ...a }, r) => {
+  const { t: n } = w();
+  return /* @__PURE__ */ c("div", { className: H, children: [
+    /* @__PURE__ */ s(q, { "aria-hidden": "true", className: "ds:size-4 ds:me-2 ds:text-[var(--muted-foreground)]" }),
     /* @__PURE__ */ s(
-      p.Input,
+      u.Input,
       {
-        ref: n,
-        placeholder: t ?? r("navigation.cmdk.placeholder", "Type a command or search…"),
-        className: [$, e].filter(Boolean).join(" "),
+        ref: r,
+        placeholder: t ?? n("navigation.cmdk.placeholder", "Type a command or search…"),
+        className: [J, e].filter(Boolean).join(" "),
         ...a
       }
     )
   ] });
 });
-M.displayName = "CommandInput";
-const P = u(({ className: e, ...t }, a) => /* @__PURE__ */ s(
-  p.List,
+P.displayName = "CommandInput";
+const D = p(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  u.List,
   {
     ref: a,
     className: [
@@ -94,28 +95,28 @@ const P = u(({ className: e, ...t }, a) => /* @__PURE__ */ s(
     ...t
   }
 ));
-P.displayName = "CommandList";
-const T = u(({ className: e, children: t, ...a }, n) => {
-  const { t: r } = w();
+D.displayName = "CommandList";
+const M = p(({ className: e, children: t, ...a }, r) => {
+  const { t: n } = w();
   return /* @__PURE__ */ s(
-    p.Empty,
+    u.Empty,
     {
-      ref: n,
+      ref: r,
       className: [
         "ds:py-[var(--spacing-lg)] ds:text-center",
         "type-body-sm ds:text-[var(--muted-foreground)]",
         e ?? ""
       ].filter(Boolean).join(" "),
       ...a,
-      children: t ?? r("navigation.cmdk.empty", "No results found")
+      children: t ?? n("navigation.cmdk.empty", "No results found")
     }
   );
 });
-T.displayName = "CommandEmpty";
-const C = u(({ className: e, heading: t, ...a }, n) => /* @__PURE__ */ s(
-  p.Group,
+M.displayName = "CommandEmpty";
+const C = p(({ className: e, heading: t, ...a }, r) => /* @__PURE__ */ s(
+  u.Group,
   {
-    ref: n,
+    ref: r,
     heading: t,
     className: [
       "ds:overflow-hidden",
@@ -131,7 +132,7 @@ const C = u(({ className: e, heading: t, ...a }, n) => /* @__PURE__ */ s(
   }
 ));
 C.displayName = "CommandGroup";
-const Q = [
+const V = [
   "ds:relative ds:flex ds:items-center",
   "ds:gap-[var(--spacing-sm)]",
   "ds:min-h-[var(--min-target-size)]",
@@ -143,17 +144,17 @@ const Q = [
   "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(" "), x = u(({ className: e, ...t }, a) => /* @__PURE__ */ s(
-  p.Item,
+].join(" "), y = p(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  u.Item,
   {
     ref: a,
-    className: [Q, e].filter(Boolean).join(" "),
+    className: [V, e].filter(Boolean).join(" "),
     ...t
   }
 ));
-x.displayName = "CommandItem";
-const A = u(({ className: e, ...t }, a) => /* @__PURE__ */ s(
-  p.Separator,
+y.displayName = "CommandItem";
+const O = p(({ className: e, ...t }, a) => /* @__PURE__ */ s(
+  u.Separator,
   {
     ref: a,
     className: [
@@ -165,12 +166,12 @@ const A = u(({ className: e, ...t }, a) => /* @__PURE__ */ s(
     ...t
   }
 ));
-A.displayName = "CommandSeparator";
-const k = u(
-  ({ className: e, children: t, ...a }, n) => /* @__PURE__ */ s(
+O.displayName = "CommandSeparator";
+const k = p(
+  ({ className: e, children: t, ...a }, r) => /* @__PURE__ */ s(
     "kbd",
     {
-      ref: n,
+      ref: r,
       className: [
         "ds:ms-auto",
         "ds:inline-flex ds:items-center",
@@ -188,24 +189,24 @@ const k = u(
   )
 );
 k.displayName = "CommandShortcut";
-function W(e, t) {
+function $(e, t) {
   if (!t) return e;
-  const a = h(e), n = h(t), r = a.indexOf(n);
-  if (r === -1) return e;
-  const l = e.slice(0, r), g = e.slice(r, r + n.length), m = e.slice(r + n.length);
-  return /* @__PURE__ */ c(I, { children: [
+  const a = h(e), r = h(t), n = a.indexOf(r);
+  if (n === -1) return e;
+  const l = e.slice(0, n), g = e.slice(n, n + r.length), m = e.slice(n + r.length);
+  return /* @__PURE__ */ c(_, { children: [
     l,
     /* @__PURE__ */ s("mark", { className: "ds:bg-[var(--accent)]/20 ds:text-inherit ds:rounded-[var(--radius-sm)] ds:px-[0.125em]", children: g }),
     m
   ] });
 }
-const X = [
+const W = [
   "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(" "), Y = [
+].join(" "), X = [
   "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
@@ -221,98 +222,98 @@ const X = [
   "ds:data-[state=open]:zoom-in-95 ds:data-[state=closed]:zoom-out-95",
   "ds:motion-reduce:animate-none",
   "ds:focus:outline-none"
-].join(" "), _ = ({ children: e }) => /* @__PURE__ */ s("span", { className: "ds:sr-only", children: e });
+].join(" "), I = ({ children: e }) => /* @__PURE__ */ s("span", { className: "ds:sr-only", children: e });
 function se({
   open: e,
   onOpenChange: t,
   commands: a,
-  header: n
+  header: r
 }) {
-  const { t: r } = w(), [l, g] = b(""), [m, v] = b(H);
+  const { t: n } = w(), [l, g] = b(""), [m, v] = b(F);
   B(() => {
     e || g("");
   }, [e]);
-  const y = E(() => {
-    const d = /* @__PURE__ */ new Map();
+  const x = E(() => {
+    const o = /* @__PURE__ */ new Map();
     return a.forEach((i) => {
-      const o = d.get(i.group) ?? [];
-      o.push(i), d.set(i.group, o);
-    }), d;
+      const d = o.get(i.group) ?? [];
+      d.push(i), o.set(i.group, d);
+    }), o;
   }, [a]), S = E(() => {
     if (l) return [];
-    const d = new Map(a.map((i) => [i.id, i]));
-    return m.map((i) => d.get(i)).filter(Boolean);
+    const o = new Map(a.map((i) => [i.id, i]));
+    return m.map((i) => o.get(i)).filter(Boolean);
   }, [a, m, l]), j = z(
-    (d) => {
+    (o) => {
       t(!1);
-      const i = [d.id, ...m.filter((o) => o !== d.id)].slice(0, N);
-      v(i), R(i), setTimeout(() => d.onSelect(), 0);
+      const i = [o.id, ...m.filter((d) => d !== o.id)].slice(0, N);
+      v(i), R(i), setTimeout(() => o.onSelect(), 0);
     },
     [m, t]
-  ), K = z(() => {
+  ), A = z(() => {
     v([]), R([]);
   }, []);
   return /* @__PURE__ */ s(f.Root, { open: e, onOpenChange: t, children: /* @__PURE__ */ c(f.Portal, { children: [
-    /* @__PURE__ */ s(f.Overlay, { className: X }),
+    /* @__PURE__ */ s(f.Overlay, { className: W }),
     /* @__PURE__ */ c(
       f.Content,
       {
-        className: Y,
-        "aria-label": r("navigation.cmdk.title", "Command palette"),
+        className: X,
+        "aria-label": n("navigation.cmdk.title", "Command palette"),
         children: [
-          /* @__PURE__ */ s(f.Title, { asChild: !0, children: /* @__PURE__ */ s(_, { children: r("navigation.cmdk.title", "Command palette") }) }),
-          /* @__PURE__ */ s(f.Description, { asChild: !0, children: /* @__PURE__ */ s(_, { children: r(
+          /* @__PURE__ */ s(f.Title, { asChild: !0, children: /* @__PURE__ */ s(I, { children: n("navigation.cmdk.title", "Command palette") }) }),
+          /* @__PURE__ */ s(f.Description, { asChild: !0, children: /* @__PURE__ */ s(I, { children: n(
             "navigation.cmdk.description",
             "Search for commands, pages, and actions"
           ) }) }),
-          /* @__PURE__ */ c(D, { label: r("navigation.cmdk.title", "Command palette"), children: [
-            n,
-            /* @__PURE__ */ s(M, { value: l, onValueChange: g }),
-            /* @__PURE__ */ c(P, { children: [
-              /* @__PURE__ */ s(T, {}),
-              S.length > 0 ? /* @__PURE__ */ c(I, { children: [
-                /* @__PURE__ */ c(C, { heading: r("navigation.cmdk.recents", "Recent"), children: [
-                  S.map((d) => /* @__PURE__ */ c(
-                    x,
+          /* @__PURE__ */ c(L, { label: n("navigation.cmdk.title", "Command palette"), children: [
+            r,
+            /* @__PURE__ */ s(P, { value: l, onValueChange: g }),
+            /* @__PURE__ */ c(D, { children: [
+              /* @__PURE__ */ s(M, {}),
+              S.length > 0 ? /* @__PURE__ */ c(_, { children: [
+                /* @__PURE__ */ c(C, { heading: n("navigation.cmdk.recents", "Recent"), children: [
+                  S.map((o) => /* @__PURE__ */ c(
+                    y,
                     {
-                      value: `recent-${d.label}`,
-                      onSelect: () => j(d),
+                      value: `recent-${o.label}`,
+                      onSelect: () => j(o),
                       children: [
-                        d.icon ? /* @__PURE__ */ s("span", { "aria-hidden": "true", children: d.icon }) : null,
-                        /* @__PURE__ */ s("span", { children: d.label }),
-                        d.shortcut ? /* @__PURE__ */ s(k, { children: d.shortcut }) : null
+                        o.icon ? /* @__PURE__ */ s("span", { "aria-hidden": "true", children: o.icon }) : null,
+                        /* @__PURE__ */ s("span", { children: o.label }),
+                        o.shortcut ? /* @__PURE__ */ s(k, { children: o.shortcut }) : null
                       ]
                     },
-                    `recent-${d.id}`
+                    `recent-${o.id}`
                   )),
                   /* @__PURE__ */ s(
-                    x,
+                    y,
                     {
                       value: "__clear-recents",
-                      onSelect: K,
-                      children: /* @__PURE__ */ s("span", { children: r(
+                      onSelect: A,
+                      children: /* @__PURE__ */ s("span", { children: n(
                         "navigation.cmdk.clearRecents",
                         "Clear recent commands"
                       ) })
                     }
                   )
                 ] }),
-                /* @__PURE__ */ s(A, {})
+                /* @__PURE__ */ s(O, {})
               ] }) : null,
-              Array.from(y.entries()).map(([d, i]) => /* @__PURE__ */ s(C, { heading: d, children: i.map((o) => /* @__PURE__ */ c(
-                x,
+              Array.from(x.entries()).map(([o, i]) => /* @__PURE__ */ s(C, { heading: o, children: i.map((d) => /* @__PURE__ */ c(
+                y,
                 {
-                  value: o.label,
-                  keywords: o.keywords,
-                  onSelect: () => j(o),
+                  value: d.label,
+                  keywords: d.keywords,
+                  onSelect: () => j(d),
                   children: [
-                    o.icon ? /* @__PURE__ */ s("span", { "aria-hidden": "true", children: o.icon }) : null,
-                    /* @__PURE__ */ s("span", { children: W(o.label, l) }),
-                    o.shortcut ? /* @__PURE__ */ s(k, { children: o.shortcut }) : null
+                    d.icon ? /* @__PURE__ */ s("span", { "aria-hidden": "true", children: d.icon }) : null,
+                    /* @__PURE__ */ s("span", { children: $(d.label, l) }),
+                    d.shortcut ? /* @__PURE__ */ s(k, { children: d.shortcut }) : null
                   ]
                 },
-                o.id
-              )) }, d))
+                d.id
+              )) }, o))
             ] })
           ] })
         ]
@@ -323,10 +324,49 @@ function se({
 const ne = {
   id: "command-palette",
   capabilities: ["open", "close", "filter", "pick", "submit"],
-  state: {},
-  actions: {},
+  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."
@@ -334,18 +374,18 @@ const ne = {
   }
 };
 export {
-  T as C,
+  M as C,
   C as a,
-  M as b,
-  x as c,
-  P as d,
-  D as e,
+  P as b,
+  y as c,
+  D as d,
+  L as e,
   se as f,
-  A as g,
+  O as g,
   k as h,
   ne as i,
-  O as j,
-  W as k,
-  te as u
+  G as j,
+  $ as k,
+  ae as u
 };
-//# sourceMappingURL=command-palette.agent-js2rxgeR.js.map
+//# sourceMappingURL=command-palette.agent-HatEt_EM.js.map