@alfadocs/ui-kit 0.70.0 → 0.71.0

package/dist/_chunks/{combobox-Clum7gJ1.js → combobox-DnqSF0IH.js}

@@ -1,20 +1,20 @@
 import { jsx as o, jsxs as S } from "react/jsx-runtime";
-import { forwardRef as De, useContext as Pe, useMemo as B, useState as oe, useRef as h, useEffect as I, useCallback as Ae } from "react";
+import { forwardRef as Ke, useContext as Oe, useMemo as B, useState as oe, useRef as g, useEffect as I, useCallback as Te } from "react";
 import * as _ from "@radix-ui/react-popover";
-import { R as Ke, _ as c, P as Oe } from "./index-4xgbg-sn.js";
+import { R as $e, _ as c, P as ke } from "./index-4xgbg-sn.js";
 import { c as F } from "./index-D2ZczOXr.js";
-import { useTranslation as Te } from "react-i18next";
-import { u as $e, F as ke } from "./form-field-context-B3APVHKx.js";
-import { c as Be } from "./compose-refs-C0k0tdqF.js";
+import { useTranslation as Be } from "react-i18next";
+import { u as Ue, F as He } from "./form-field-context-B3APVHKx.js";
+import { c as Ge } from "./compose-refs-C0k0tdqF.js";
 import { n as U } from "./normalize-diacritics-BNGbFNlJ.js";
-import { g as Ue } from "./group-options-BvKhQ3xb.js";
-import { u as He } from "./use-controllable-state-BiY4xTzM.js";
-import { u as Ge } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { I as Me, a as H, d as G, c as Le } from "./input-surface-xyERuLU_.js";
-import { u as Qe } from "./registry-DvAUVLHh.js";
-import { X as Xe } from "./x-CCcI3eJp.js";
-import { C as We } from "./check-DPdL_Sm7.js";
-const Je = {
+import { g as Me } from "./group-options-BvKhQ3xb.js";
+import { u as Le } from "./use-controllable-state-BiY4xTzM.js";
+import { u as Qe } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { I as Xe, a as H, d as G, c as We } from "./input-surface-xyERuLU_.js";
+import { u as Je } from "./registry-DvAUVLHh.js";
+import { X as Ye } from "./x-CCcI3eJp.js";
+import { C as Ze } from "./check-DPdL_Sm7.js";
+const et = {
   id: "combobox",
   // Persisted single choice (value state + set_value) → select_single + set_value,
   // plus type-to-filter and open/close of the option list.
@@ -58,8 +58,8 @@ const Je = {
       descriptionKey: "ui.agent.combobox.actions.setValue",
       description: "Set the selected value programmatically.",
       examples: [{ args: { value: "it" }, note: 'Select the "it" option.' }],
-      invoke: (t, r) => {
-        t.setValue(r.value);
+      invoke: (t, a) => {
+        t.setValue(a.value);
       }
     },
     apply_filter: {
@@ -76,8 +76,8 @@ const Je = {
       idempotent: !0,
       descriptionKey: "ui.agent.combobox.actions.applyFilter",
       description: "Set the filter query for the option list.",
-      invoke: (t, r) => {
-        t.setQuery(r.query);
+      invoke: (t, a) => {
+        t.setQuery(a.query);
       }
     },
     clear_selection: {
@@ -121,7 +121,7 @@ const Je = {
       description: "Each option emits its value as data-option-id."
     }
   }
-}, Ye = F(
+}, tt = F(
   [
     "ds:peer ds:w-full ds:bg-transparent ds:text-foreground ds:placeholder:text-muted-foreground",
     "ds:outline-none ds:border-0",
@@ -139,10 +139,10 @@ const Je = {
       size: "md"
     }
   }
-), Ze = F(
+), st = F(
   [
     "ds:group ds:relative ds:inline-flex ds:items-center ds:gap-[var(--spacing-sm)] ds:w-full",
-    Le
+    We
   ].join(" "),
   {
     variants: {
@@ -151,14 +151,14 @@ const Je = {
         md: `${H.md} ${G.md}`,
         lg: `${H.lg} ${G.lg}`
       },
-      tone: Me
+      tone: Xe
     },
     defaultVariants: {
       size: "md",
       tone: "default"
     }
   }
-), et = F(
+), ot = F(
   [
     "ds:z-[var(--z-popover)] ds:overflow-hidden ds:w-[var(--radix-popover-trigger-width)]",
     "ds:rounded-[var(--radius-md)] ds:border ds:border-border ds:bg-background ds:text-foreground",
@@ -192,22 +192,22 @@ const Je = {
       size: "md"
     }
   }
-), tt = [
+), nt = [
   "ds:ps-3 ds:pe-3 ds:py-1.5",
   "type-eyebrow ds:text-muted-foreground"
-].join(" "), st = "ds:max-h-[18rem] ds:overflow-y-auto ds:p-[var(--spacing-xs)]", ot = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", nt = {
+].join(" "), rt = "ds:max-h-[18rem] ds:overflow-y-auto ds:p-[var(--spacing-xs)]", at = "ds:ps-3 ds:pe-3 ds:py-2 type-body-sm ds:text-muted-foreground", it = {
   sm: "ds:size-3.5",
   md: "ds:size-4",
   lg: "ds:size-5"
 };
-function rt({
+function dt({
   search: t,
-  label: r,
+  label: a,
   iconClass: E,
   size: V,
   onSelect: j
 }) {
-  return Oe((q) => q.filtered.count) > 0 ? null : /* @__PURE__ */ S(
+  return ke((q) => q.filtered.count) > 0 ? null : /* @__PURE__ */ S(
     c.Item,
     {
       value: `__combobox-create__${t}`,
@@ -223,14 +223,14 @@ function rt({
             className: `ds:inline-flex ds:items-center ds:justify-center ${E}`
           }
         ),
-        /* @__PURE__ */ o("span", { className: "ds:flex-1 ds:truncate", children: r })
+        /* @__PURE__ */ o("span", { className: "ds:flex-1 ds:truncate", children: a })
       ]
     }
   );
 }
-const re = De(
+const re = Ke(
   function({
-    options: r,
+    options: a,
     value: E,
     defaultValue: V,
     onValueChange: j,
@@ -240,88 +240,91 @@ const re = De(
     readOnly: ie,
     required: de,
     name: le,
-    id: D,
+    id: A,
     size: v = "md",
     tone: ce = "default",
-    filter: P,
+    filter: D,
     allowCreate: ue = !1,
-    onCreate: A,
+    onCreate: P,
     open: L,
     onOpenChange: u,
     emptyMessage: me,
     className: pe,
-    "aria-label": Q
-  }, fe) {
-    const { t: y } = Te(), b = $e(), x = Pe(ke) !== null, [be, N] = He({
+    "aria-label": Q,
+    "aria-invalid": fe,
+    "aria-describedby": be,
+    autoComplete: he
+  }, ge) {
+    const { t: y } = Be(), b = Ue(), x = Oe(He) !== null, [ve, N] = Le({
       value: E,
       defaultValue: V ?? "",
       onChange: j
-    }), m = be ?? "", K = B(
-      () => r.find((e) => e.value === m),
-      [r, m]
-    ), C = (K == null ? void 0 : K.label) ?? "", [p, i] = oe(C), [ge, X] = oe(!1), z = L !== void 0, d = z ? L : ge, R = h(!1), w = h(null), W = h(null);
-    Ge(() => {
+    }), m = ve ?? "", K = B(
+      () => a.find((e) => e.value === m),
+      [a, m]
+    ), C = (K == null ? void 0 : K.label) ?? "", [p, i] = oe(C), [ye, X] = oe(!1), z = L !== void 0, d = z ? L : ye, R = g(!1), w = g(null), W = g(null);
+    Qe(() => {
       var e;
       (e = w.current) == null || e.setAttribute("aria-expanded", String(d));
     }), I(() => {
       d || i(C);
     }, [C, d]);
-    const he = D ?? (x ? b.id : void 0), O = (x ? b.disabled : !1) || !!ae, g = !!ie, ve = (x ? b.required : !1) || !!de, J = x ? b.invalid : !1, ye = J ? "error" : ce, xe = x && b.describedBy ? b.describedBy : void 0, Y = M ?? y("inputs.combobox.placeholder", "Search…"), Ce = B(
+    const xe = A ?? (x ? b.id : void 0), O = (x ? b.disabled : !1) || !!ae, h = !!ie, Ce = (x ? b.required : !1) || !!de, J = x ? b.invalid : !!fe, Se = J ? "error" : ce, Ne = x && b.describedBy ? b.describedBy : be, Y = M ?? y("inputs.combobox.placeholder", "Search…"), ze = B(
       () => (e, s, n) => {
         if (R.current) return 1;
-        const f = U(e), a = U(s), k = n == null ? void 0 : n.map(U);
-        return P ? P(f, a) : Ke(
+        const f = U(e), r = U(s), k = n == null ? void 0 : n.map(U);
+        return D ? D(f, r) : $e(
           f,
-          a,
+          r,
           k
         );
       },
-      [P]
+      [D]
     ), Z = (e) => {
       N(e);
     }, l = (e) => {
       z || X(e), u == null || u(e);
-    }, Se = (e) => {
-      const s = r.find((n) => n.value === e);
+    }, Re = (e) => {
+      const s = a.find((n) => n.value === e);
       Z(e), i((s == null ? void 0 : s.label) ?? ""), l(!1);
-    }, Ne = (e) => {
-      A == null || A(e), l(!1);
-    }, ze = (e) => {
-      g || (i(e), !d && e.length > 0 && !R.current && l(!0));
-    }, Re = () => {
-      !O && !g && l(!0);
-    }, we = () => {
+    }, we = (e) => {
+      P == null || P(e), l(!1);
+    }, Ie = (e) => {
+      h || (i(e), !d && e.length > 0 && !R.current && l(!0));
+    }, _e = () => {
+      !O && !h && l(!0);
+    }, Fe = () => {
       R.current = !0;
-    }, Ie = () => {
+    }, Ee = () => {
       var s;
-      if (R.current = !1, g) return;
+      if (R.current = !1, h) return;
       const e = ((s = w.current) == null ? void 0 : s.value) ?? "";
       i(e), e.length > 0 && l(!0);
-    }, _e = (e) => {
+    }, Ve = (e) => {
       e.nativeEvent.isComposing || e.key === "Escape" && d && (e.preventDefault(), l(!1), i(C));
-    }, Fe = (e) => {
+    }, je = (e) => {
       var s;
       e.preventDefault(), e.stopPropagation(), Z(""), i(""), l(!0), (s = w.current) == null || s.focus();
-    }, Ee = (e) => {
-      g && e || (l(e), e || i(C));
-    }, ee = h(m);
+    }, qe = (e) => {
+      h && e || (l(e), e || i(C));
+    }, ee = g(m);
     I(() => {
       ee.current = m;
     }, [m]);
-    const te = h(p);
+    const te = g(p);
     I(() => {
       te.current = p;
     }, [p]);
-    const se = h(d);
+    const se = g(d);
     I(() => {
       se.current = d;
     }, [d]);
-    const T = Ae(
+    const T = Te(
       (e) => {
         z || X(e), u == null || u(e);
       },
       [z, u]
-    ), Ve = B(
+    ), Ae = B(
       () => ({
         getValue: () => ee.current || null,
         getQuery: () => te.current,
@@ -329,7 +332,7 @@ const re = De(
         setValue: (e) => {
           const s = e ?? "";
           N(s);
-          const n = r.find((f) => f.value === s);
+          const n = a.find((f) => f.value === s);
           i((n == null ? void 0 : n.label) ?? "");
         },
         setQuery: (e) => {
@@ -341,14 +344,14 @@ const re = De(
         open: () => T(!0),
         close: () => T(!1)
       }),
-      [N, r, T]
+      [N, a, T]
     );
-    Qe(Je, Ve, D);
-    const je = q && !!m && !O && !g, qe = Ue(r), $ = nt[v];
-    return /* @__PURE__ */ o(_.Root, { open: d, onOpenChange: Ee, children: /* @__PURE__ */ S(
+    Je(et, Ae, A);
+    const De = q && !!m && !O && !h, Pe = Me(a), $ = it[v];
+    return /* @__PURE__ */ o(_.Root, { open: d, onOpenChange: qe, children: /* @__PURE__ */ S(
       c,
       {
-        filter: Ce,
+        filter: ze,
         shouldFilter: !0,
         loop: !0,
         label: Q ?? Y,
@@ -358,41 +361,42 @@ const re = De(
             "div",
             {
               ref: W,
-              className: Ze({
+              className: st({
                 size: v,
-                tone: ye,
+                tone: Se,
                 className: pe
               }),
               "data-component": "combobox",
-              "data-component-id": D,
+              "data-component-id": A,
               children: [
                 /* @__PURE__ */ o(
                   c.Input,
                   {
-                    ref: Be(fe, w),
+                    ref: Ge(ge, w),
                     value: p,
-                    onValueChange: ze,
-                    id: he,
+                    onValueChange: Ie,
+                    id: xe,
                     name: le,
                     placeholder: Y,
                     disabled: O,
-                    readOnly: g,
-                    required: ve,
-                    "aria-describedby": xe,
+                    readOnly: h,
+                    required: Ce,
+                    autoComplete: he,
+                    "aria-describedby": Ne,
                     "aria-invalid": J || void 0,
-                    onFocus: Re,
-                    onKeyDown: _e,
-                    onCompositionStart: we,
-                    onCompositionEnd: Ie,
-                    className: Ye({ size: v })
+                    onFocus: _e,
+                    onKeyDown: Ve,
+                    onCompositionStart: Fe,
+                    onCompositionEnd: Ee,
+                    className: tt({ size: v })
                   }
                 ),
-                je ? /* @__PURE__ */ o(
+                De ? /* @__PURE__ */ o(
                   "button",
                   {
                     type: "button",
                     "aria-label": y("inputs.combobox.clear", "Clear selection"),
-                    onClick: Fe,
+                    onClick: je,
                     onPointerDown: (e) => e.stopPropagation(),
                     className: [
                       "ds:inline-flex ds:items-center ds:justify-center ds:rounded-[var(--radius-sm)]",
@@ -402,7 +406,7 @@ const re = De(
                       "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
                       "ds:size-4"
                     ].join(" "),
-                    children: /* @__PURE__ */ o(Xe, { "aria-hidden": "true", className: "ds:size-3.5" })
+                    children: /* @__PURE__ */ o(Ye, { "aria-hidden": "true", className: "ds:size-3.5" })
                   }
                 ) : null
               ]
@@ -423,20 +427,20 @@ const re = De(
               },
               sideOffset: 4,
               align: "start",
-              className: et(),
-              children: /* @__PURE__ */ S(c.List, { className: st, children: [
-                /* @__PURE__ */ o(c.Empty, { className: ot, children: me ?? y("inputs.combobox.empty", "No results found") }),
-                qe.map(({ group: e, items: s }, n) => {
-                  const f = s.map((a) => {
-                    const k = a.value === m;
+              className: ot(),
+              children: /* @__PURE__ */ S(c.List, { className: rt, children: [
+                /* @__PURE__ */ o(c.Empty, { className: at, children: me ?? y("inputs.combobox.empty", "No results found") }),
+                Pe.map(({ group: e, items: s }, n) => {
+                  const f = s.map((r) => {
+                    const k = r.value === m;
                     return /* @__PURE__ */ S(
                       c.Item,
                       {
-                        value: a.value,
-                        "data-option-id": a.value,
-                        keywords: [a.label],
-                        disabled: a.disabled,
-                        onSelect: Se,
+                        value: r.value,
+                        "data-option-id": r.value,
+                        keywords: [r.label],
+                        disabled: r.disabled,
+                        onSelect: Re,
                         className: ne({ size: v }),
                         children: [
                           /* @__PURE__ */ o(
@@ -444,27 +448,40 @@ const re = De(
                             {
                               "aria-hidden": "true",
                               className: `ds:inline-flex ds:items-center ds:justify-center ${$}`,
-                              children: k ? /* @__PURE__ */ o(We, { className: $ }) : null
+                              children: k ? /* @__PURE__ */ o(Ze, { className: $ }) : null
                             }
                           ),
-                          /* @__PURE__ */ o("span", { className: "ds:flex-1 ds:truncate", children: a.label }),
-                          a.description ? /* @__PURE__ */ o("span", { className: "type-meta ds:text-muted-foreground", children: a.description }) : null
+                          r.startAdornment ? (
+                            // Decorative by contract — the option's accessible
+                            // name comes from its label. Hide so a text-bearing
+                            // adornment can't leak into the computed name.
+                            /* @__PURE__ */ o(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: "ds:inline-flex ds:items-center ds:shrink-0",
+                                children: r.startAdornment
+                              }
+                            )
+                          ) : null,
+                          /* @__PURE__ */ o("span", { className: "ds:flex-1 ds:truncate", children: r.label }),
+                          r.description ? /* @__PURE__ */ o("span", { className: "type-meta ds:text-muted-foreground", children: r.description }) : null
                         ]
                       },
-                      a.value
+                      r.value
                     );
                   });
                   return e ? /* @__PURE__ */ o(
                     c.Group,
                     {
-                      heading: /* @__PURE__ */ o("span", { className: tt, children: e }),
+                      heading: /* @__PURE__ */ o("span", { className: nt, children: e }),
                       children: f
                     },
                     `group-${e}`
                   ) : /* @__PURE__ */ o(c.Group, { children: f }, `group-${n}`);
                 }),
                 ue && p.length > 0 ? /* @__PURE__ */ o(
-                  rt,
+                  dt,
                   {
                     search: p,
                     label: y("inputs.combobox.create", 'Create "{{value}}"', {
@@ -472,7 +489,7 @@ const re = De(
                     }),
                     iconClass: $,
                     size: v,
-                    onSelect: Ne
+                    onSelect: we
                   }
                 ) : null
               ] })
@@ -484,13 +501,13 @@ const re = De(
   }
 );
 re.displayName = "Combobox";
-const Ct = re;
+const zt = re;
 export {
-  Ct as C,
-  et as a,
-  Ye as b,
-  Je as c,
+  zt as C,
+  ot as a,
+  tt as b,
+  et as c,
   ne as d,
-  Ze as e
+  st as e
 };
-//# sourceMappingURL=combobox-Clum7gJ1.js.map
+//# sourceMappingURL=combobox-DnqSF0IH.js.map

package/dist/_chunks/connection-status-CY1HV8Wg.js

@@ -0,0 +1,108 @@
+import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { forwardRef as k, useMemo as B } from "react";
+import { useTranslation as A } from "react-i18next";
+import { C as a } from "./card-DPmk26CL.js";
+import { B as C } from "./badge-DCOqV9mI.js";
+import { B as u } from "./button-DD_0Xdmr.js";
+import { D as d } from "./description-list-gkNGWk5G.js";
+import { u as N } from "./registry-DvAUVLHh.js";
+const w = {
+  id: "connection-status",
+  capabilities: ["submit", "dismiss"],
+  state: {
+    status: {
+      type: "string",
+      descriptionKey: "ui.agent.connectionStatus.state.status",
+      description: "Connection state of the external service: 'connected', 'disconnected', 'pending', or 'error'.",
+      read: (n) => n.getStatus()
+    }
+  },
+  actions: {
+    connect: {
+      // Reaches an external service (OAuth handoff / server write), so it is
+      // both a `write` and `openWorld`.
+      safety: "write",
+      openWorld: !0,
+      descriptionKey: "ui.agent.connectionStatus.actions.connect",
+      description: "Begin connecting the external service — invokes the consumer-supplied onConnect handler.",
+      invoke: (n) => {
+        n.connect();
+      }
+    },
+    disconnect: {
+      // Tears down an established external connection — irreversible from the
+      // agent's perspective, so `destructive` + `openWorld`.
+      safety: "destructive",
+      openWorld: !0,
+      descriptionKey: "ui.agent.connectionStatus.actions.disconnect",
+      description: "Disconnect the external service — invokes the consumer-supplied onDisconnect handler.",
+      invoke: (n) => {
+        n.disconnect();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "connection-status",
+      description: "Marks the ConnectionStatus wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, E = {
+  connected: "success",
+  disconnected: "neutral",
+  pending: "warning",
+  error: "error"
+}, T = {
+  connected: "connectionStatus.statusConnected",
+  disconnected: "connectionStatus.statusDisconnected",
+  pending: "connectionStatus.statusPending",
+  error: "connectionStatus.statusError"
+}, K = k(function({
+  service: g,
+  status: t,
+  description: p,
+  summary: c,
+  onConnect: i,
+  onDisconnect: o,
+  disabled: m = !1,
+  id: h,
+  className: f,
+  "aria-label": S
+}, v) {
+  const { t: s } = A(), y = B(
+    () => ({
+      getStatus: () => t,
+      connect: () => i == null ? void 0 : i(),
+      disconnect: () => o == null ? void 0 : o()
+    }),
+    [t, i, o]
+  );
+  N(w, y, h);
+  const x = t === "pending" ? /* @__PURE__ */ e(u, { intent: "primary", disabled: !0, children: s("connectionStatus.statusPending") }) : t === "connected" ? /* @__PURE__ */ e(u, { intent: "outline", disabled: m, onClick: o, children: s("connectionStatus.disconnect") }) : /* @__PURE__ */ e(u, { intent: "primary", disabled: m, onClick: i, children: s("connectionStatus.connect") }), b = t === "connected" && Array.isArray(c) && c.length > 0;
+  return /* @__PURE__ */ e("div", { ref: v, "data-component": "connection-status", "data-component-id": h, children: /* @__PURE__ */ r(a, { className: f, "aria-label": S, children: [
+    /* @__PURE__ */ e(a.Header, { children: /* @__PURE__ */ r("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ e("span", { className: "type-title-card ds:text-foreground", children: g }),
+      /* @__PURE__ */ e(C, { variant: E[t], children: s(T[t]) })
+    ] }) }),
+    /* @__PURE__ */ e(a.Body, { children: /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+      p ? /* @__PURE__ */ e("p", { className: "type-body-sm ds:text-muted-foreground", children: p }) : null,
+      b && c ? /* @__PURE__ */ e(d, { layout: "inline", density: "compact", children: c.map((l) => /* @__PURE__ */ r(d.Row, { children: [
+        /* @__PURE__ */ e(d.Term, { children: l.label }),
+        /* @__PURE__ */ e(d.Detail, { children: l.value })
+      ] }, l.label)) }) : null
+    ] }) }),
+    /* @__PURE__ */ e(a.Footer, { children: x })
+  ] }) });
+});
+K.displayName = "ConnectionStatus";
+export {
+  K as C,
+  w as c
+};
+//# sourceMappingURL=connection-status-CY1HV8Wg.js.map