@alfadocs/ui-kit 1.67.0 → 1.68.0

package/dist/_chunks/notice-group-DkYzKyAZ.js

@@ -0,0 +1,291 @@
+import { jsx as u, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as me, useMemo as L, isValidElement as g, useEffect as N, useState as v, useRef as m, useCallback as ge, Fragment as Q, cloneElement as he, Children as ve } from "react";
+import { c as T } from "./index-D2ZczOXr.js";
+import { useTranslation as ye } from "react-i18next";
+import { u as we } from "./use-controllable-state-BiY4xTzM.js";
+import { c as J, d as be } from "./use-dismissed-CTOWqA0e.js";
+import { i as xe } from "./is-development-CLUAnsU7.js";
+import { u as Ce } from "./registry-DvAUVLHh.js";
+import { A as U } from "./alert-9kEwDza3.js";
+import { C as ke, b as Se, a as Ge } from "./collapsible-DVPM46bq.js";
+import { P as Ne } from "./progress-notice-DiHWZ8Ms.js";
+import { C as Te } from "./chevron-down-DWE7GSq9.js";
+const Oe = {
+  id: "notice-group",
+  capabilities: ["expand"],
+  state: {
+    noteCount: {
+      type: "number",
+      descriptionKey: "ui.agent.noticeGroup.state.noteCount",
+      description: "How many folding notes (not errors or progress notices) are still shown, dismissed ones excluded.",
+      read: (s) => s.getState().noteCount
+    },
+    grouped: {
+      type: "boolean",
+      descriptionKey: "ui.agent.noticeGroup.state.grouped",
+      description: "True while the notes sit behind one summary row (two or more notes).",
+      read: (s) => s.getState().grouped
+    },
+    open: {
+      type: "boolean",
+      descriptionKey: "ui.agent.noticeGroup.state.open",
+      description: "Whether the summary row is open (expanded), so every note is visible.",
+      read: (s) => s.getState().open
+    }
+  },
+  actions: {
+    set_open: {
+      // Shows or hides notes already on the page; changes no data.
+      safety: "read",
+      argsType: "open",
+      argsSchema: {
+        type: "object",
+        properties: {
+          open: {
+            type: "boolean",
+            description: "True to show every note, false to fold them."
+          }
+        },
+        required: ["open"]
+      },
+      returns: "boolean (applied)",
+      returnsSchema: {
+        type: "boolean",
+        description: "True when applied (with a controlled open, when asked of the host); false when there is no summary row (fewer than two notes)."
+      },
+      idempotent: !0,
+      errors: ["Fewer than two notes (grouped is false): returns false."],
+      descriptionKey: "ui.agent.noticeGroup.actions.setOpen",
+      description: "Open (expand) or fold the notes behind the summary row. With a controlled open the host decides.",
+      invoke: (s, o) => s.setOpen(o.open)
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "notice-group",
+      description: 'Marks the NoticeGroup. Carries data-grouped="true" while the notes fold behind the summary row, whose Alert carries data-notice-group-summary.'
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, Re = T(
+  [
+    "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+    "ds:rounded-[var(--radius-md)]",
+    "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)]"
+  ].join(" ")
+), Ae = T("ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", {
+  variants: {
+    grouped: {
+      true: "ds:pt-[var(--spacing-sm)]",
+      false: ""
+    }
+  },
+  defaultVariants: { grouped: !1 }
+}), Ee = T(
+  [
+    "ds:flex ds:w-full ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]",
+    "ds:-my-[var(--spacing-sm)] ds:min-h-[var(--min-target-size)]",
+    "ds:rounded-[var(--radius-sm)] ds:text-start type-body-sm ds:font-semibold ds:text-current",
+    "ds:cursor-pointer ds:hover:underline ds:underline-offset-2",
+    "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]",
+    "ds:[&_svg]:size-4 ds:[&_svg]:shrink-0",
+    "ds:[&_svg]:transition-transform ds:[&_svg]:duration-[var(--animation-duration)] ds:motion-reduce:[&_svg]:transition-none",
+    "ds:data-[state=open]:[&_svg]:rotate-180"
+  ].join(" ")
+);
+function X(s, o = []) {
+  return ve.forEach(s, (r) => {
+    g(r) && r.type === Q ? X(r.props.children, o) : r != null && r !== !1 && o.push(r);
+  }), o;
+}
+function Ke(s) {
+  return X(s).map((o, r) => {
+    const p = g(o) && o.key !== null ? `key:${o.key}` : `at:${r}`;
+    if (g(o) && o.type === U) {
+      const y = o.props;
+      return {
+        identity: p,
+        element: o,
+        notice: o,
+        folds: y.variant !== "error"
+      };
+    }
+    return g(o) && o.type === Ne ? {
+      identity: p,
+      element: o,
+      notice: o,
+      folds: !1
+    } : { identity: p, element: o, folds: !1 };
+  });
+}
+const je = me(
+  ({
+    children: s,
+    summary: o,
+    open: r,
+    defaultOpen: p = !1,
+    onOpenChange: y,
+    id: O,
+    className: Y,
+    ...Z
+  }, f) => {
+    var H;
+    const { t: R } = ye("ui"), [ee, w] = we({
+      value: r,
+      defaultValue: p,
+      onChange: y
+    }), b = ee ?? !1, c = L(() => Ke(s), [s]), A = c.filter(
+      (e) => !e.notice && g(e.element)
+    ).length, E = c.filter((e) => e.notice), K = E.length > 1 && E.some((e) => e.identity.startsWith("at:"));
+    N(() => {
+      xe() && (A > 0 && console.warn(
+        "NoticeGroup: pass Alert and ProgressNotice elements directly. A component of your own that renders one shows as given and is never grouped."
+      ), K && console.warn(
+        "NoticeGroup: give every notice a `key`, so a closed notice stays closed when the notices around it change."
+      ));
+    }, [A, K]);
+    const oe = c.map(
+      (e) => e.notice ? J(
+        e.notice.props.dismissKey
+      ) : void 0
+    ), te = be(oe), [j, _] = v(() => /* @__PURE__ */ new Set());
+    N(() => {
+      _((e) => {
+        if (e.size === 0) return e;
+        const n = new Set(c.map((a) => a.identity)), t = new Set([...e].filter((a) => n.has(a)));
+        return t.size === e.size ? e : t;
+      });
+    }, [c]);
+    const V = c.map((e, n) => e.notice ? e.notice.props.open !== !1 && !te[n] && !j.has(e.identity) : !0), x = m(null), ne = ge(
+      (e) => {
+        x.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
+      },
+      [f]
+    ), z = (e) => [...e.querySelectorAll("[data-alert-dismiss]")].filter(
+      (n) => !n.closest("[hidden]")
+    ), C = m(null), [se, re] = v(0);
+    N(() => {
+      const e = C.current;
+      if (e === null) return;
+      C.current = null;
+      const n = x.current;
+      if (!n) return;
+      const t = z(n);
+      (t[Math.min(e, t.length - 1)] ?? n.querySelector("[data-notice-group-summary] button") ?? n).focus();
+    }, [se]);
+    const ie = (e) => {
+      if (!e.notice) return e.element;
+      const n = e.notice, t = n.props, a = e.folds && t.announce === void 0 && t.live === void 0;
+      return he(n, {
+        ...a ? { announce: "off" } : {},
+        onOpenChange: (M) => {
+          var $;
+          if (($ = t.onOpenChange) == null || $.call(t, M), M) return;
+          t.open === void 0 && J(t.dismissKey) === void 0 && _((G) => new Set(G).add(e.identity));
+          const P = x.current, W = typeof document > "u" ? null : document.activeElement, I = P && W instanceof HTMLElement ? z(P).indexOf(W) : -1;
+          I !== -1 && (C.current = I, re((G) => G + 1));
+        }
+      });
+    }, F = [], q = [];
+    let d = 0, l = 0;
+    c.forEach((e, n) => {
+      var a;
+      if (j.has(e.identity)) return;
+      const t = /* @__PURE__ */ u(Q, { children: ie(e) }, e.identity);
+      if (!e.folds) {
+        F.push(t);
+        return;
+      }
+      q.push(t), V[n] && (d += 1, ((a = e.notice) == null ? void 0 : a.props).variant === "warning" && (l += 1));
+    });
+    const i = d > 1, ae = V.some(Boolean), B = m(null), k = m(!1), [ce, de] = v(i), [ue, D] = v(!1);
+    if (ce !== i) {
+      de(i);
+      const e = typeof document > "u" ? null : document.activeElement;
+      D(
+        i && k.current && (e === null || e === document.body || !!((H = B.current) != null && H.contains(e)))
+      );
+    }
+    const le = i ? b || ue : !0, S = m({ noteCount: d, grouped: i, open: b });
+    S.current = { noteCount: d, grouped: i, open: b };
+    const pe = L(
+      () => ({
+        getState: () => ({ ...S.current }),
+        setOpen: (e) => S.current.grouped ? (w(e), !0) : !1
+      }),
+      [w]
+    );
+    if (Ce(Oe, pe, O), !ae) return null;
+    const fe = typeof o == "function" ? o(d, l) : o ?? R("noticeGroup.summary", { count: d });
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        ref: ne,
+        "data-component": "notice-group",
+        "data-component-id": O,
+        "data-grouped": i || void 0,
+        tabIndex: -1,
+        className: [Re(), Y].filter(Boolean).join(" "),
+        ...Z,
+        children: [
+          F,
+          d > 0 ? /* @__PURE__ */ h(
+            ke,
+            {
+              open: le,
+              onOpenChange: (e) => {
+                i && (D(!1), w(e));
+              },
+              children: [
+                i ? /* @__PURE__ */ u(
+                  U,
+                  {
+                    variant: l > 0 ? "warning" : "info",
+                    announce: "off",
+                    "data-notice-group-summary": "",
+                    children: /* @__PURE__ */ h(Se, { className: Ee(), children: [
+                      /* @__PURE__ */ h("span", { className: "ds:flex ds:min-w-0 ds:flex-wrap ds:items-baseline ds:gap-x-[var(--spacing-sm)]", children: [
+                        /* @__PURE__ */ u("span", { children: fe }),
+                        l > 0 ? " " : null,
+                        l > 0 ? /* @__PURE__ */ u("span", { className: "ds:font-normal", children: R("noticeGroup.warnings", { count: l }) }) : null
+                      ] }),
+                      /* @__PURE__ */ u(Te, { "aria-hidden": "true" })
+                    ] })
+                  }
+                ) : null,
+                /* @__PURE__ */ u(Ge, { children: /* @__PURE__ */ u(
+                  "div",
+                  {
+                    ref: B,
+                    className: Ae({ grouped: i }),
+                    onFocus: () => {
+                      k.current = !0;
+                    },
+                    onBlur: (e) => {
+                      e.currentTarget.contains(e.relatedTarget) || (k.current = !1);
+                    },
+                    children: q
+                  }
+                ) })
+              ]
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+je.displayName = "NoticeGroup";
+export {
+  je as N,
+  Oe as n
+};
+//# sourceMappingURL=notice-group-DkYzKyAZ.js.map

package/dist/_chunks/{notification-tray-BR3seWA7.js → notification-tray-Cp18MW5b.js}

@@ -9,7 +9,7 @@ import { u as me } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
 import { I as ue } from "./icon-button-C_1TgRiK.js";
 import { B as A } from "./button-D-MQxsA_.js";
 import { S as F } from "./separator-CYU_bGFn.js";
-import { S as T } from "./skeleton-B1KTdJ4N.js";
+import { S as T } from "./skeleton-tTWJpvAq.js";
 import { C as ge } from "./counter-WsvRuum1.js";
 import { S as ve } from "./scroll-area-CY5SLYNw.js";
 import { N as he } from "./notification-card-c2oX8j3F.js";
@@ -503,4 +503,4 @@ export {
   ke as N,
   Te as n
 };
-//# sourceMappingURL=notification-tray-BR3seWA7.js.map
+//# sourceMappingURL=notification-tray-Cp18MW5b.js.map

package/dist/_chunks/{operator-hero-3_RG4Dkj.js → operator-hero-6aAIQaFZ.js}

@@ -1,15 +1,16 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { forwardRef as w, useId as A, useRef as O } from "react";
-import { c as P } from "./index-D2ZczOXr.js";
-import { useTranslation as z } from "react-i18next";
-import { A as j } from "./avatar-WZY3eGE7.js";
-import { B as I } from "./badge-BUk4RjTS.js";
-import { C as T } from "./card-BA4Ig_kn.js";
-import { R as B } from "./rating-C1Vrmpsi.js";
-import { u as F } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
-import { u as K } from "./registry-DvAUVLHh.js";
-import { c as S } from "./entity-card-fpm-KUKc.js";
-const V = {
+import { forwardRef as O, useId as P, useRef as z } from "react";
+import { c as j } from "./index-D2ZczOXr.js";
+import { useTranslation as I } from "react-i18next";
+import { A as T } from "./avatar-BPiPL7ND.js";
+import { B as V } from "./badge-BUk4RjTS.js";
+import { C as B } from "./card-BA4Ig_kn.js";
+import { R as K } from "./rating-CGYpg5dj.js";
+import { f as S } from "./format-number-DdzqwMs1.js";
+import { u as E } from "./use-isomorphic-layout-effect-BGfaCOP1.js";
+import { u as M } from "./registry-DvAUVLHh.js";
+import { c as W } from "./entity-card-fpm-KUKc.js";
+const $ = {
   id: "operator-hero",
   // Purely observable hero region — no interactive affordances and no
   // imperative actions on the handle (getName / getHasColor are read-only
@@ -43,7 +44,7 @@ const V = {
       description: "Sourced from the id prop."
     }
   }
-}, E = P("ds:w-full ds:text-[color:var(--foreground)]", {
+}, q = j("ds:w-full ds:text-[color:var(--foreground)]", {
   variants: {
     // Density toggle. Default `comfortable` matches the practice hero's
     // visual weight minus the cover strip. `compact` is for embedded
@@ -64,49 +65,51 @@ const V = {
     density: "comfortable",
     surface: "elevated"
   }
-}), M = w(
+}), D = O(
   ({
     name: r,
     colorId: l,
     tagline: p,
-    imageUrl: h,
+    imageUrl: x,
     rating: a,
     badges: i,
     actionSlot: m,
     density: s = "comfortable",
     surface: u = "elevated",
-    "aria-label": x,
+    "aria-label": b,
     id: n,
-    className: b,
-    ...y
-  }, N) => {
-    const { t: c } = z("ui"), v = A(), H = x ?? c("operatorHero.regionLabel"), d = l != null, f = O(null);
-    K(
-      V,
+    className: y,
+    ...N
+  }, H) => {
+    const { t: c, i18n: C } = I("ui"), f = P(), k = b ?? c("operatorHero.regionLabel"), d = l != null, v = z(null);
+    M(
+      $,
       { getName: () => r, getHasColor: () => d },
       n
-    ), F(() => {
-      const o = f.current;
-      o && (d ? o.style.setProperty("--operator-hero-color", S(l)) : o.style.removeProperty("--operator-hero-color"));
+    ), E(() => {
+      const o = v.current;
+      o && (d ? o.style.setProperty("--operator-hero-color", W(l)) : o.style.removeProperty("--operator-hero-color"));
     }, [d, l]);
-    const C = a ? c("operatorHero.ratingLabel", {
-      value: a.value.toFixed(1),
+    const g = a ? S(a.value, C.language) : void 0, R = a ? c("operatorHero.ratingLabel", {
+      value: g,
       count: a.count
-    }) : void 0, k = s === "comfortable" ? "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]" : "ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]", L = s === "comfortable" ? "2xl" : "xl", R = s === "comfortable" ? "type-title-page" : "type-title-card", g = /* @__PURE__ */ t(
+    }) : void 0, L = s === "comfortable" ? "ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]" : "ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]", w = s === "comfortable" ? "2xl" : "xl", A = s === "comfortable" ? "type-title-page" : "type-title-card", h = /* @__PURE__ */ t(
       "div",
       {
         className: [
           "ds:flex ds:items-start ds:gap-[var(--spacing-lg)]",
-          k,
+          L,
           "ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)]"
         ].join(" "),
         children: [
           /* @__PURE__ */ e(
-            j,
+            T,
             {
-              size: L,
+              size: w,
+              shape: "rounded",
+              ratio: "3:4",
               name: r,
-              src: h,
+              src: x,
               className: "ds:shrink-0"
             }
           ),
@@ -115,54 +118,68 @@ const V = {
               /* @__PURE__ */ t(
                 "h1",
                 {
-                  id: v,
-                  className: `${R} ds:m-0 ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:text-[color:var(--foreground)]`,
+                  id: f,
+                  className: `${A} ds:m-0 ds:flex ds:items-center ds:gap-[var(--spacing-xs)] ds:text-[color:var(--foreground)]`,
                   children: [
                     d ? /* @__PURE__ */ e(
                       "span",
                       {
-                        ref: f,
+                        ref: v,
                         role: "img",
                         "aria-label": c("operatorHero.colorLabel", "Calendar colour"),
                         className: "ds:inline-block ds:size-[var(--spacing-sm)] ds:shrink-0 ds:rounded-[var(--radius-full)] ds:bg-[var(--operator-hero-color)]"
                       }
                     ) : null,
-                    r
+                    /* @__PURE__ */ e("span", { dir: "auto", children: r })
                   ]
                 }
               ),
               m ? /* @__PURE__ */ e("div", { className: "ds:ms-auto ds:flex ds:shrink-0 ds:items-center ds:gap-[var(--spacing-xs)]", children: m }) : null
             ] }),
-            p ? /* @__PURE__ */ e("p", { className: "type-body ds:m-0 ds:text-[color:var(--foreground)]", children: p }) : null,
-            a ? /* @__PURE__ */ t(
-              "div",
+            p ? /* @__PURE__ */ e(
+              "p",
               {
-                className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
-                "aria-label": C,
-                children: [
-                  /* @__PURE__ */ e(
-                    B,
-                    {
-                      value: a.value,
-                      max: 5,
-                      size: s === "comfortable" ? "md" : "sm"
-                    }
-                  ),
-                  /* @__PURE__ */ t("span", { className: "type-body-sm ds:text-[color:var(--muted-foreground)]", children: [
-                    a.value.toFixed(1),
-                    " · ",
-                    a.count
-                  ] })
-                ]
+                dir: "auto",
+                className: "type-body ds:m-0 ds:text-[color:var(--foreground)]",
+                children: p
               }
             ) : null,
+            a ? (
+              // One image with one name ("4,9 out of 5 stars. Reviews: 7."):
+              // a name on a div without a role is ignored by screen readers,
+              // which then read the stars and "4,9 · 7" with no "reviews".
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  role: "img",
+                  className: "ds:flex ds:items-center ds:gap-[var(--spacing-xs)]",
+                  "aria-label": R,
+                  children: [
+                    /* @__PURE__ */ e(
+                      K,
+                      {
+                        value: a.value,
+                        max: 5,
+                        size: s === "comfortable" ? "md" : "sm",
+                        decorative: !0
+                      }
+                    ),
+                    /* @__PURE__ */ t("span", { className: "type-body-sm ds:text-[color:var(--muted-foreground)]", children: [
+                      g,
+                      " · ",
+                      a.count
+                    ] })
+                  ]
+                }
+              )
+            ) : null,
             i && i.length > 0 ? /* @__PURE__ */ e(
               "div",
               {
                 role: "list",
                 className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)] ds:mt-[var(--spacing-2xs)]",
                 children: i.map((o) => /* @__PURE__ */ e(
-                  I,
+                  V,
                   {
                     variant: o.variant ?? "neutral",
                     role: "listitem",
@@ -179,24 +196,24 @@ const V = {
     return /* @__PURE__ */ e(
       "div",
       {
-        ref: N,
+        ref: H,
         role: "region",
-        "aria-label": H,
-        "aria-labelledby": v,
+        "aria-label": k,
+        "aria-labelledby": f,
         "data-component": "operator-hero",
         "data-component-id": n,
         "data-density": s,
         id: n,
-        className: E({ surface: u, density: s, className: b }),
-        ...y,
-        children: u === "elevated" ? /* @__PURE__ */ e(T, { variant: "elevated", children: g }) : g
+        className: q({ surface: u, density: s, className: y }),
+        ...N,
+        children: u === "elevated" ? /* @__PURE__ */ e(B, { variant: "elevated", children: h }) : h
       }
     );
   }
 );
-M.displayName = "OperatorHero";
+D.displayName = "OperatorHero";
 export {
-  M as O,
-  V as o
+  D as O,
+  $ as o
 };
-//# sourceMappingURL=operator-hero-3_RG4Dkj.js.map
+//# sourceMappingURL=operator-hero-6aAIQaFZ.js.map