@alfadocs/ui-kit 0.69.0 → 0.71.0

package/dist/_chunks/{multi-select-BdHHDrRN.js → multi-select-WE4S9FIF.js}

@@ -1,11 +1,11 @@
-import { jsx as n, jsxs as x } from "react/jsx-runtime";
+import { jsx as r, jsxs as w } from "react/jsx-runtime";
 import { forwardRef as Ke, useContext as Me, useState as B, useRef as I, useMemo as V, useEffect as U, useCallback as je } from "react";
 import * as q from "@radix-ui/react-popover";
 import { _ as u } from "./index-4xgbg-sn.js";
 import { c as le } from "./index-D2ZczOXr.js";
 import { useTranslation as Pe } from "react-i18next";
 import { u as $e, F as Be } from "./form-field-context-B3APVHKx.js";
-import { T as oe } from "./tooltip-DvmfrNvB.js";
+import { T as ie } from "./tooltip-DvmfrNvB.js";
 import { c as Ue } from "./compose-refs-C0k0tdqF.js";
 import { u as Qe } from "./use-controllable-state-BiY4xTzM.js";
 import { u as Ye } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
@@ -144,7 +144,7 @@ const Ze = {
     },
     defaultVariants: { size: "md" }
   }
-), ie = le(
+), oe = le(
   [
     "ds:inline-flex ds:items-center ds:gap-1",
     "ds:rounded-[var(--radius-sm)] ds:border ds:border-border ds:bg-muted",
@@ -196,7 +196,7 @@ const Ze = {
   "ds:rounded-[var(--radius-sm)] ds:ps-2 ds:pe-2 ds:py-1.5",
   "ds:text-[var(--font-size-sm)] ds:font-medium ds:text-primary ds:outline-none ds:select-none",
   "ds:data-[selected=true]:bg-muted"
-].join(" "), nt = "__ui-multiselect-select-all__", ot = "__ui-multiselect-clear-all__", de = Ke(
+].join(" "), nt = "__ui-multiselect-select-all__", it = "__ui-multiselect-clear-all__", de = Ke(
   function({
     options: c,
     value: ce,
@@ -227,30 +227,30 @@ const Ze = {
       value: ce,
       defaultValue: ue ?? [],
       onChange: pe
-    }), r = ye ?? [], [k, m] = B(!1), [f, K] = B(""), S = I(null), w = I([]), H = I(null), Se = Ue(be, H), h = y && b.disabled || !!fe, we = y && b.required, X = y && b.invalid, xe = y && b.describedBy ? b.describedBy : void 0, Ie = L ?? (y ? b.id : void 0), ke = V(() => {
+    }), n = ye ?? [], [k, m] = B(!1), [f, K] = B(""), S = I(null), x = I([]), H = I(null), Se = Ue(be, H), h = y && b.disabled || !!fe, xe = y && b.required, X = y && b.invalid, we = y && b.describedBy ? b.describedBy : void 0, Ie = L ?? (y ? b.id : void 0), ke = V(() => {
       const e = /* @__PURE__ */ new Map();
       for (const t of c) e.set(t.value, t.label);
       return e;
-    }, [c]), J = typeof v == "number" && r.length >= v, C = (e) => {
+    }, [c]), J = typeof v == "number" && n.length >= v, C = (e) => {
       z(e);
     }, Ce = (e) => {
-      if (r.includes(e)) {
-        C(r.filter((t) => t !== e));
+      if (n.includes(e)) {
+        C(n.filter((t) => t !== e));
         return;
       }
-      J || C([...r, e]);
+      J || C([...n, e]);
     }, M = (e) => {
-      const t = r.filter((s, o) => o !== e);
+      const t = n.filter((s, o) => o !== e);
       return C(t), t;
     }, Ae = () => {
       const e = c.filter((s) => !s.disabled).map((s) => s.value), t = typeof v == "number" ? v : e.length;
       C(e.slice(0, t));
     }, Ne = () => {
       C([]);
-    }, W = I(r);
+    }, W = I(n);
     U(() => {
-      W.current = r;
-    }, [r]);
+      W.current = n;
+    }, [n]);
     const Z = I(f);
     U(() => {
       Z.current = f;
@@ -288,22 +288,22 @@ const Ze = {
     ), Te = (e) => {
       var o;
       const t = e.currentTarget;
-      if (e.key === "Backspace" && f === "" && r.length > 0) {
+      if (e.key === "Backspace" && f === "" && n.length > 0) {
         e.preventDefault();
-        const i = r.length - 1, d = M(i).length - 1;
+        const i = n.length - 1, d = M(i).length - 1;
         d >= 0 && requestAnimationFrame(() => {
           var g;
-          (g = w.current[d]) == null || g.focus();
+          (g = x.current[d]) == null || g.focus();
         });
         return;
       }
       const s = t.selectionStart === 0 && t.selectionEnd === 0;
-      if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && s && r.length > 0) {
+      if ((e.key === "ArrowLeft" || e.key === "ArrowRight") && s && n.length > 0) {
         const i = document.dir === "rtl" || t.dir === "rtl";
         if (i && e.key === "ArrowRight" || !i && e.key === "ArrowLeft") {
           e.preventDefault();
-          const d = r.length - 1;
-          (o = w.current[d]) == null || o.focus();
+          const d = n.length - 1;
+          (o = x.current[d]) == null || o.focus();
         }
         return;
       }
@@ -327,7 +327,7 @@ const Ze = {
         const ze = Math.min(e, F.length - 1);
         requestAnimationFrame(() => {
           var _;
-          (_ = w.current[ze]) == null || _.focus();
+          (_ = x.current[ze]) == null || _.focus();
         });
         return;
       }
@@ -335,11 +335,11 @@ const Ze = {
       if (t.key === o) {
         t.preventDefault();
         const F = Math.max(0, e - 1);
-        (l = w.current[F]) == null || l.focus();
+        (l = x.current[F]) == null || l.focus();
         return;
       }
       if (t.key === i) {
-        t.preventDefault(), e < r.length - 1 ? (d = w.current[e + 1]) == null || d.focus() : (g = S.current) == null || g.focus();
+        t.preventDefault(), e < n.length - 1 ? (d = x.current[e + 1]) == null || d.focus() : (g = S.current) == null || g.focus();
         return;
       }
       t.key === "Escape" && (m(!1), (N = S.current) == null || N.focus());
@@ -367,8 +367,8 @@ const Ze = {
       t();
       const s = new ResizeObserver(t);
       return s.observe(e), () => s.disconnect();
-    }, [r.length, R]);
-    const E = r.map((e) => ({
+    }, [n.length, R]);
+    const E = n.map((e) => ({
       value: e,
       label: ke.get(e) ?? e
     })), re = T === Number.POSITIVE_INFINITY || T >= E.length, Fe = re ? E : E.slice(0, T), ne = re ? [] : E.slice(T), A = ne.length, Ve = (e) => {
@@ -381,13 +381,13 @@ const Ze = {
         m(!1);
         return;
       }
-      m(e), e || (K(""), O == null || O(r));
+      m(e), e || (K(""), O == null || O(n));
     }, Oe = Y || G, De = p("inputs.multiSelect.selected", {
-      count: r.length,
-      defaultValue: `${r.length} selected`
+      count: n.length,
+      defaultValue: `${n.length} selected`
     }), { onClick: $, ...Le } = ve;
-    return /* @__PURE__ */ n(u, { shouldFilter: !1, label: De, children: /* @__PURE__ */ x(q.Root, { open: k, onOpenChange: qe, children: [
-      /* @__PURE__ */ n(q.Anchor, { asChild: !0, children: /* @__PURE__ */ x(
+    return /* @__PURE__ */ r(u, { shouldFilter: !1, label: De, children: /* @__PURE__ */ w(q.Root, { open: k, onOpenChange: qe, children: [
+      /* @__PURE__ */ r(q.Anchor, { asChild: !0, children: /* @__PURE__ */ w(
         "div",
         {
           ref: Se,
@@ -403,20 +403,20 @@ const Ze = {
           children: [
             Fe.map((e, t) => (
               // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- chip pill receives focus via roving tabindex; chip removal uses an inner button
-              /* @__PURE__ */ x(
+              /* @__PURE__ */ w(
                 "span",
                 {
                   ref: (s) => {
-                    w.current[t] = s;
+                    x.current[t] = s;
                   },
                   tabIndex: h ? -1 : 0,
                   "data-ui-chip": "true",
-                  className: ie({ size: R }),
+                  className: oe({ size: R }),
                   onKeyDown: Ee(t),
                   "aria-label": e.label,
                   children: [
-                    /* @__PURE__ */ n("span", { children: e.label }),
-                    /* @__PURE__ */ n(
+                    /* @__PURE__ */ r("span", { children: e.label }),
+                    /* @__PURE__ */ r(
                       "button",
                       {
                         type: "button",
@@ -434,7 +434,7 @@ const Ze = {
                           });
                         },
                         className: tt,
-                        children: /* @__PURE__ */ n(Je, { "aria-hidden": "true", className: "ds:size-3.5" })
+                        children: /* @__PURE__ */ r(Je, { "aria-hidden": "true", className: "ds:size-3.5" })
                       }
                     )
                   ]
@@ -442,22 +442,22 @@ const Ze = {
                 e.value
               )
             )),
-            A > 0 ? /* @__PURE__ */ n(
-              oe,
+            A > 0 ? /* @__PURE__ */ r(
+              ie,
               {
                 label: ne.map((e) => e.label).join(", "),
                 delayDuration: 200,
-                children: /* @__PURE__ */ n(
+                children: /* @__PURE__ */ r(
                   "span",
                   {
-                    className: ie({ size: R }),
+                    className: oe({ size: R }),
                     tabIndex: 0,
                     role: "button",
                     "aria-label": p("inputs.multiSelect.overflow", {
                       count: A,
                       defaultValue: `+${A} more`
                     }),
-                    children: /* @__PURE__ */ n("span", { children: p("inputs.multiSelect.overflow", {
+                    children: /* @__PURE__ */ r("span", { children: p("inputs.multiSelect.overflow", {
                       count: A,
                       defaultValue: `+${A} more`
                     }) })
@@ -465,7 +465,7 @@ const Ze = {
                 )
               }
             ) : null,
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ r(
               u.Input,
               {
                 ref: S,
@@ -475,12 +475,12 @@ const Ze = {
                 onFocus: () => {
                   h || m(!0);
                 },
-                placeholder: r.length === 0 ? te : "",
+                placeholder: n.length === 0 ? te : "",
                 id: Ie,
                 "aria-label": y ? void 0 : he,
-                "aria-describedby": xe,
+                "aria-describedby": we,
                 "aria-invalid": X || void 0,
-                "aria-required": we || void 0,
+                "aria-required": xe || void 0,
                 disabled: h,
                 className: [
                   "ds:flex-1 ds:min-w-[6rem] ds:bg-transparent ds:outline-none",
@@ -492,7 +492,7 @@ const Ze = {
           ]
         }
       ) }),
-      /* @__PURE__ */ n(q.Portal, { children: /* @__PURE__ */ n(
+      /* @__PURE__ */ r(q.Portal, { children: /* @__PURE__ */ r(
         q.Content,
         {
           onOpenAutoFocus: (e) => e.preventDefault(),
@@ -500,7 +500,7 @@ const Ze = {
           align: "start",
           sideOffset: 4,
           className: st,
-          children: /* @__PURE__ */ x(
+          children: /* @__PURE__ */ w(
             u.List,
             {
               role: "listbox",
@@ -508,8 +508,8 @@ const Ze = {
               "aria-label": te,
               className: "ds:max-h-[20rem] ds:overflow-y-auto ds:p-1",
               children: [
-                Oe ? /* @__PURE__ */ x(u.Group, { children: [
-                  Y ? /* @__PURE__ */ n(
+                Oe ? /* @__PURE__ */ w(u.Group, { children: [
+                  Y ? /* @__PURE__ */ r(
                     u.Item,
                     {
                       value: nt,
@@ -518,20 +518,20 @@ const Ze = {
                       children: p("inputs.multiSelect.selectAll", "Select all")
                     }
                   ) : null,
-                  G ? /* @__PURE__ */ n(
+                  G ? /* @__PURE__ */ r(
                     u.Item,
                     {
-                      value: ot,
+                      value: it,
                       onSelect: Ne,
                       className: ae,
                       children: p("inputs.multiSelect.clearAll", "Clear all")
                     }
                   ) : null
                 ] }) : null,
-                /* @__PURE__ */ n(u.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: p("inputs.multiSelect.noOptions", "No options found") }),
+                /* @__PURE__ */ r(u.Empty, { className: "ds:ps-2 ds:pe-2 ds:py-2 type-body-sm ds:text-muted-foreground", children: p("inputs.multiSelect.noOptions", "No options found") }),
                 Re.map(({ group: e, items: t }, s) => {
                   const o = t.map((i) => {
-                    const l = r.includes(i.value), d = !l && J, g = !!i.disabled || d, N = /* @__PURE__ */ x(
+                    const l = n.includes(i.value), d = !l && J, g = !!i.disabled || d, N = /* @__PURE__ */ w(
                       u.Item,
                       {
                         value: i.value,
@@ -544,25 +544,37 @@ const Ze = {
                         "aria-disabled": g || void 0,
                         className: rt,
                         children: [
-                          /* @__PURE__ */ n(
+                          /* @__PURE__ */ r(
                             "span",
                             {
                               className: [
-                                "ds:inline-flex ds:items-center ds:justify-center ds:me-2 ds:shrink-0",
+                                "ds:inline-flex ds:items-center ds:justify-center ds:me-[var(--spacing-xs)] ds:shrink-0",
                                 "ds:size-4 ds:rounded-[var(--radius-sm)] ds:border ds:border-border",
                                 l ? "ds:bg-primary ds:border-primary ds:text-primary-foreground" : "ds:bg-background"
                               ].join(" "),
                               "aria-hidden": "true",
-                              children: l ? /* @__PURE__ */ n(We, { className: "ds:size-3.5" }) : null
+                              children: l ? /* @__PURE__ */ r(We, { className: "ds:size-3.5" }) : null
                             }
                           ),
-                          /* @__PURE__ */ n("span", { className: "ds:flex-1 ds:text-start", children: i.label })
+                          i.startAdornment ? (
+                            // Decorative by contract — the accessible name comes
+                            // from the option label.
+                            /* @__PURE__ */ r(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:inline-flex ds:items-center ds:shrink-0 ds:me-[var(--spacing-xs)]",
+                                children: i.startAdornment
+                              }
+                            )
+                          ) : null,
+                          /* @__PURE__ */ r("span", { className: "ds:flex-1 ds:text-start", children: i.label })
                         ]
                       },
                       i.value
                     );
-                    return d ? /* @__PURE__ */ n(
-                      oe,
+                    return d ? /* @__PURE__ */ r(
+                      ie,
                       {
                         label: p("inputs.multiSelect.maxReached", {
                           count: v,
@@ -574,7 +586,7 @@ const Ze = {
                       i.value
                     ) : N;
                   });
-                  return e ? /* @__PURE__ */ n(
+                  return e ? /* @__PURE__ */ r(
                     u.Group,
                     {
                       heading: e,
@@ -582,7 +594,7 @@ const Ze = {
                       children: o
                     },
                     `group-${e}`
-                  ) : /* @__PURE__ */ n(u.Group, { children: o }, `group-${s}`);
+                  ) : /* @__PURE__ */ r(u.Group, { children: o }, `group-${s}`);
                 })
               ]
             }
@@ -593,10 +605,10 @@ const Ze = {
   }
 );
 de.displayName = "MultiSelect";
-const wt = de;
+const xt = de;
 export {
-  wt as M,
+  xt as M,
   et as a,
   Ze as m
 };
-//# sourceMappingURL=multi-select-BdHHDrRN.js.map
+//# sourceMappingURL=multi-select-WE4S9FIF.js.map

package/dist/_chunks/nav-grid-9xphY3FM.js

@@ -0,0 +1,169 @@
+import { jsx as s, jsxs as x, Fragment as w } from "react/jsx-runtime";
+import { forwardRef as N, useMemo as l } from "react";
+import { c as p } from "./index-D2ZczOXr.js";
+import { L as C } from "./link-DrD_cRUg.js";
+import { u as G } from "./registry-DvAUVLHh.js";
+const I = {
+  id: "nav-grid",
+  capabilities: ["navigate"],
+  state: {
+    itemCount: {
+      type: "number",
+      descriptionKey: "ui.agent.navGrid.state.itemCount",
+      description: "Number of navigable tiles currently rendered in the grid.",
+      read: (d) => d.getItemCount()
+    }
+  },
+  actions: {
+    open_item: {
+      safety: "write",
+      openWorld: !1,
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "Stable opaque tile id (emitted as data-nav-item-id on each tile)."
+          }
+        },
+        required: ["id"]
+      },
+      descriptionKey: "ui.agent.navGrid.actions.openItem",
+      description: "Activate the tile with the given id (navigates or fires its select handler).",
+      examples: [
+        {
+          args: { id: "billing" },
+          note: 'Open the "billing" settings section.'
+        }
+      ],
+      invoke: (d, n) => {
+        d.openItem(n.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "nav-grid",
+      description: "Marks the NavGrid nav landmark."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop. Required to address a specific grid from the agent."
+    },
+    item: {
+      attr: "data-nav-item-id",
+      sourceProp: "item id",
+      description: "Stable opaque id of a tile, sourced from each item.id. open_item targets this attribute."
+    }
+  }
+}, S = p(
+  "ds:grid ds:list-none ds:m-0 ds:p-0 ds:gap-[var(--spacing-md)]",
+  {
+    variants: {
+      columns: {
+        // Responsive default: one column on mobile, two from sm, three from lg.
+        responsive: "ds:grid-cols-1 ds:sm:grid-cols-2 ds:lg:grid-cols-3",
+        1: "ds:grid-cols-1",
+        2: "ds:grid-cols-1 ds:sm:grid-cols-2",
+        3: "ds:grid-cols-1 ds:sm:grid-cols-2 ds:lg:grid-cols-3",
+        4: "ds:grid-cols-1 ds:sm:grid-cols-2 ds:lg:grid-cols-4"
+      }
+    },
+    defaultVariants: { columns: "responsive" }
+  }
+), c = p(
+  [
+    "ds:flex ds:flex-col ds:items-start ds:gap-[var(--spacing-xs)] ds:text-start",
+    "ds:h-full ds:w-full ds:min-h-[var(--min-target-size)] ds:p-[var(--spacing-md)]",
+    "ds:rounded-[var(--radius-lg)] ds:border ds:border-[color:var(--card-border)]",
+    "ds:[.theme-accessible_&]:border-2",
+    "ds:bg-[var(--card)] ds:text-[var(--card-foreground)] ds:no-underline",
+    "ds:transition-shadow ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:outline-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]"
+  ].join(" "),
+  {
+    variants: {
+      disabled: {
+        true: "ds:opacity-50 ds:cursor-not-allowed ds:pointer-events-none",
+        false: "ds:cursor-pointer ds:hover:shadow-[var(--shadow-hover)]"
+      }
+    },
+    defaultVariants: { disabled: !1 }
+  }
+);
+function u({ item: d }) {
+  return /* @__PURE__ */ x(w, { children: [
+    d.icon ? /* @__PURE__ */ s(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "ds:inline-flex ds:items-center ds:text-[var(--muted-foreground)] ds:[&_svg]:size-6",
+        children: d.icon
+      }
+    ) : null,
+    /* @__PURE__ */ s("span", { className: "type-body ds:font-medium ds:text-[var(--card-foreground)] ds:no-underline", children: d.label }),
+    d.description ? /* @__PURE__ */ s("span", { className: "type-body-sm ds:text-[var(--muted-foreground)] ds:no-underline", children: d.description }) : null
+  ] });
+}
+const k = N(function({ items: n, ariaLabel: g, columns: o, sort: a = "none", id: r, className: v }, f) {
+  const m = l(
+    () => a === "label" ? [...n].sort((e, i) => e.label.localeCompare(i.label)) : n,
+    [n, a]
+  ), b = l(
+    () => ({
+      getItemCount: () => n.length,
+      openItem: (e) => {
+        var t;
+        const i = n.find((y) => y.id === e);
+        !i || i.disabled || (i.href ? typeof window < "u" && (window.location.href = i.href) : (t = i.onSelect) == null || t.call(i));
+      }
+    }),
+    [n]
+  );
+  G(I, b, r);
+  const h = o === void 0 ? "responsive" : String(o);
+  return /* @__PURE__ */ s(
+    "nav",
+    {
+      ref: f,
+      id: r,
+      "aria-label": g,
+      "data-component": "nav-grid",
+      "data-component-id": r,
+      className: v,
+      children: /* @__PURE__ */ s("ul", { className: S({ columns: h }), children: m.map((e) => /* @__PURE__ */ s("li", { "data-nav-item-id": e.id, children: e.href !== void 0 ? /* @__PURE__ */ s(
+        C,
+        {
+          href: e.href,
+          intent: "subtle",
+          disabled: e.disabled,
+          className: c({ disabled: !!e.disabled }),
+          children: /* @__PURE__ */ s(u, { item: e })
+        }
+      ) : /* @__PURE__ */ s(
+        "button",
+        {
+          type: "button",
+          onClick: e.disabled ? void 0 : e.onSelect,
+          disabled: e.disabled,
+          "aria-disabled": e.disabled || void 0,
+          className: c({ disabled: !!e.disabled }),
+          children: /* @__PURE__ */ s(u, { item: e })
+        }
+      ) }, e.id)) })
+    }
+  );
+});
+k.displayName = "NavGrid";
+export {
+  k as N,
+  I as n,
+  c as t
+};
+//# sourceMappingURL=nav-grid-9xphY3FM.js.map