@alfadocs/ui-kit 0.70.0 → 0.71.0

package/dist/_chunks/reviews-panel-DxkSrgMl.js

@@ -0,0 +1,559 @@
+import { jsx as t, jsxs as n, Fragment as K } from "react/jsx-runtime";
+import { forwardRef as J, useState as H, useCallback as L, useMemo as C, useRef as F, useImperativeHandle as Q, useId as B, useEffect as W } from "react";
+import { c as _ } from "./index-D2ZczOXr.js";
+import { useTranslation as E } from "react-i18next";
+import { u as X } from "./registry-DvAUVLHh.js";
+import { R as k } from "./rating-BRD7O74e.js";
+import { C as A } from "./card-DPmk26CL.js";
+import { C as Y, b as Z, a as ee } from "./collapsible-BrnRiCC6.js";
+import { D as l } from "./description-list-gkNGWk5G.js";
+import { E as te } from "./empty-state-BLy7tigq.js";
+import { S as T } from "./skeleton-CZbwyJAA.js";
+import { B as se } from "./button-DD_0Xdmr.js";
+import { P as re } from "./panel-header-D313n_9-.js";
+import { S as ae } from "./star-vav0SJ9e.js";
+import { C as ne } from "./chevron-down-BX_NP2Yh.js";
+const ie = {
+  id: "reviews-panel",
+  capabilities: ["filter"],
+  state: {
+    filter: {
+      type: "string",
+      descriptionKey: "ui.agent.reviewsPanel.state.filter",
+      description: 'Active star-bucket filter — `"all"` or an integer 1..5. Reads the controlled `filter` prop.',
+      read: (e) => e.getFilter()
+    },
+    visibleCount: {
+      type: "number",
+      descriptionKey: "ui.agent.reviewsPanel.state.visibleCount",
+      description: "Number of reviews currently rendered after the filter is applied.",
+      read: (e) => e.getVisibleCount()
+    }
+  },
+  actions: {
+    set_filter: {
+      // Pure ephemeral narrowing of the visible list — no data loss.
+      safety: "read",
+      argsType: '{ filter: "all" | 1 | 2 | 3 | 4 | 5 }',
+      argsSchema: {
+        type: "object",
+        properties: {
+          filter: {
+            description: 'Star bucket to show, or "all" to clear the filter.',
+            oneOf: [
+              { type: "string", enum: ["all"] },
+              { type: "integer", enum: [1, 2, 3, 4, 5] }
+            ]
+          }
+        },
+        required: ["filter"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.reviewsPanel.actions.setFilter",
+      description: 'Narrow the visible review list to a star bucket, or `"all"` to clear the filter.',
+      examples: [
+        { args: { filter: 5 }, note: "Show only 5-star reviews." },
+        { args: { filter: "all" }, note: "Clear the star filter." }
+      ],
+      invoke: (e, i) => {
+        e.setFilter(i.filter);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "reviews-panel",
+      description: "Marks the ReviewsPanel root region."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, w = ["all", 5, 4, 3, 2, 1];
+function $(e) {
+  return Math.min(5, Math.max(1, Math.floor(e)));
+}
+function le(e) {
+  const i = {
+    1: 0,
+    2: 0,
+    3: 0,
+    4: 0,
+    5: 0
+  };
+  for (const a of e) i[$(a.overallScore)] += 1;
+  return i;
+}
+const oe = _(
+  [
+    "ds:relative ds:inline-flex ds:items-center ds:justify-center",
+    "ds:gap-[var(--spacing-xs)]",
+    "ds:min-h-[var(--min-target-size)]",
+    "ds:rounded-[var(--radius-md)]",
+    "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+    "ds:pt-[var(--spacing-2xs)] ds:pb-[var(--spacing-2xs)]",
+    "ds:text-start",
+    "ds:transition-[background-color,color]",
+    "ds:duration-[var(--animation-duration)]",
+    "ds:motion-reduce:transition-none",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)]",
+    "ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-[var(--ring)]",
+    "ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:cursor-pointer"
+  ].join(" "),
+  {
+    variants: {
+      state: {
+        idle: "ds:hover:bg-[var(--muted)]/30 ds:text-[var(--foreground)]",
+        selected: [
+          "ds:bg-[var(--primary)]",
+          "ds:text-[var(--primary-foreground)]",
+          "ds:font-[var(--font-weight-semibold)]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { state: "idle" }
+  }
+);
+function de({
+  filter: e,
+  histogram: i,
+  totalCount: a,
+  onChange: c
+}) {
+  const { t: g } = E(), y = B(), [N, o] = H(
+    () => Math.max(0, w.indexOf(e))
+  );
+  W(() => {
+    const r = w.indexOf(e);
+    r >= 0 && o(r);
+  }, [e]);
+  const u = F(/* @__PURE__ */ new Map()), f = L((r) => {
+    var d;
+    (d = u.current.get(r)) == null || d.focus();
+  }, []), p = w.length, P = L(
+    (r, d) => {
+      switch (r.key) {
+        case "ArrowDown":
+        case "ArrowRight": {
+          r.preventDefault();
+          const s = (d + 1) % p;
+          o(s), f(s), c(w[s]);
+          break;
+        }
+        case "ArrowUp":
+        case "ArrowLeft": {
+          r.preventDefault();
+          const s = (d - 1 + p) % p;
+          o(s), f(s), c(w[s]);
+          break;
+        }
+        case "Home": {
+          r.preventDefault(), o(0), f(0), c(w[0]);
+          break;
+        }
+        case "End": {
+          r.preventDefault();
+          const s = p - 1;
+          o(s), f(s), c(w[s]);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          r.preventDefault(), c(w[d]);
+          break;
+        }
+      }
+    },
+    [p, f, c]
+  );
+  return /* @__PURE__ */ n(K, { children: [
+    /* @__PURE__ */ t(
+      "h3",
+      {
+        id: y,
+        className: "type-label ds:font-[var(--font-weight-semibold)] ds:text-[var(--foreground)] ds:m-0",
+        children: g("reviewsPanel.filterTitle")
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-labelledby": y,
+        className: "ds:flex ds:flex-wrap ds:items-center ds:gap-[var(--spacing-2xs)]",
+        children: w.map((r, d) => {
+          const s = r === "all", x = s ? 0 : r, v = s ? a : i[x], S = r === e, V = N === d, m = s ? g("reviewsPanel.filter.allLabel", { count: v }) : g("reviewsPanel.filter.starsLabel", { stars: x, count: v });
+          return /* @__PURE__ */ n(
+            "button",
+            {
+              ref: (b) => {
+                b ? u.current.set(d, b) : u.current.delete(d);
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": S,
+              "aria-label": m,
+              tabIndex: V ? 0 : -1,
+              onClick: () => {
+                o(d), c(r);
+              },
+              onFocus: () => o(d),
+              onKeyDown: (b) => P(b, d),
+              "data-filter-bucket": String(r),
+              className: oe({
+                state: S ? "selected" : "idle"
+              }),
+              children: [
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+                    children: s ? /* @__PURE__ */ t("span", { className: "type-label", children: g("reviewsPanel.filter.allShort") }) : /* @__PURE__ */ t(k, { value: x, size: "sm", decorative: !0 })
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: [
+                      "type-meta",
+                      // Idle row: count is dimmed (--muted-foreground over
+                      // --background ≈ 4.5:1, AA passes). Selected row
+                      // paints violet bg + white text on the BUTTON, but
+                      // the count's own explicit color override would
+                      // otherwise win the cascade and leave dark navy-grey
+                      // text on the violet pill (~3:1, AA-fail). Match the
+                      // row's foreground when selected; slight opacity
+                      // keeps the count secondary to the label.
+                      S ? "ds:text-[color:var(--primary-foreground)]" : "ds:text-[var(--muted-foreground)]"
+                    ].join(" "),
+                    children: v
+                  }
+                )
+              ]
+            },
+            String(r)
+          );
+        })
+      }
+    )
+  ] });
+}
+function ce({ review: e, locale: i }) {
+  var r, d, s, x;
+  const { t: a } = E(), c = B(), g = B(), [y, N] = H(!1), o = !!(e.breakdown && Object.values(e.breakdown).some((v) => v != null)), u = !!e.reply || o || !!e.futureVisit || !!e.recommendation, f = C(() => {
+    if (!e.authoredAt) return "";
+    try {
+      const v = new Date(e.authoredAt);
+      return Number.isNaN(v.getTime()) ? e.authoredAt : new Intl.DateTimeFormat(i, { dateStyle: "medium" }).format(
+        v
+      );
+    } catch {
+      return e.authoredAt;
+    }
+  }, [e.authoredAt, i]), p = e.pseudonym ?? a("reviewsPanel.anonymous"), P = /* @__PURE__ */ n(
+    Y,
+    {
+      open: u ? y : !1,
+      onOpenChange: u ? N : void 0,
+      children: [
+        /* @__PURE__ */ n(A.Footer, { children: [
+          /* @__PURE__ */ t("span", { className: "type-meta ds:text-[var(--muted-foreground)]", children: f }),
+          u ? /* @__PURE__ */ t(Z, { asChild: !0, children: /* @__PURE__ */ n(
+            "button",
+            {
+              id: c,
+              type: "button",
+              "data-review-trigger": !0,
+              className: "ds:ms-auto ds:inline-flex ds:items-center ds:gap-[var(--spacing-2xs)] ds:rounded-[var(--radius-sm)] ds:ps-[var(--spacing-2xs)] ds:pe-[var(--spacing-2xs)] ds:pt-[var(--spacing-2xs)] ds:pb-[var(--spacing-2xs)] ds:bg-transparent ds:border-0 ds:text-[length:var(--font-size-sm)] ds:text-[var(--primary)] ds:hover:underline ds:cursor-pointer ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)] ds:forced-colors:focus-visible:outline-[CanvasText]",
+              children: [
+                a(y ? "reviewsPanel.card.collapse" : "reviewsPanel.card.expand"),
+                /* @__PURE__ */ t(
+                  ne,
+                  {
+                    "aria-hidden": "true",
+                    className: [
+                      "ds:size-4 ds:transition-transform ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+                      y ? "ds:rotate-180" : ""
+                    ].filter(Boolean).join(" ")
+                  }
+                )
+              ]
+            }
+          ) }) : null
+        ] }),
+        u ? /* @__PURE__ */ t(ee, { id: g, "aria-labelledby": c, children: /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pb-[var(--spacing-md)]", children: [
+          o || e.futureVisit || e.recommendation ? /* @__PURE__ */ n(l, { layout: "inline", density: "compact", children: [
+            ((r = e.breakdown) == null ? void 0 : r.appointmentScore) != null ? /* @__PURE__ */ n(l.Row, { children: [
+              /* @__PURE__ */ t(l.Term, { children: a("reviewsPanel.breakdown.appointment") }),
+              /* @__PURE__ */ t(l.Detail, { children: /* @__PURE__ */ t(
+                k,
+                {
+                  value: e.breakdown.appointmentScore,
+                  size: "sm"
+                }
+              ) })
+            ] }) : null,
+            ((d = e.breakdown) == null ? void 0 : d.communicationScore) != null ? /* @__PURE__ */ n(l.Row, { children: [
+              /* @__PURE__ */ t(l.Term, { children: a("reviewsPanel.breakdown.communication") }),
+              /* @__PURE__ */ t(l.Detail, { children: /* @__PURE__ */ t(
+                k,
+                {
+                  value: e.breakdown.communicationScore,
+                  size: "sm"
+                }
+              ) })
+            ] }) : null,
+            ((s = e.breakdown) == null ? void 0 : s.staffScore) != null ? /* @__PURE__ */ n(l.Row, { children: [
+              /* @__PURE__ */ t(l.Term, { children: a("reviewsPanel.breakdown.staff") }),
+              /* @__PURE__ */ t(l.Detail, { children: /* @__PURE__ */ t(k, { value: e.breakdown.staffScore, size: "sm" }) })
+            ] }) : null,
+            ((x = e.breakdown) == null ? void 0 : x.overallScore) != null ? /* @__PURE__ */ n(l.Row, { children: [
+              /* @__PURE__ */ t(l.Term, { children: a("reviewsPanel.breakdown.overall") }),
+              /* @__PURE__ */ t(l.Detail, { children: /* @__PURE__ */ t(k, { value: e.breakdown.overallScore, size: "sm" }) })
+            ] }) : null,
+            e.futureVisit ? /* @__PURE__ */ n(l.Row, { children: [
+              /* @__PURE__ */ t(l.Term, { children: a("reviewsPanel.breakdown.futureVisit") }),
+              /* @__PURE__ */ t(l.Detail, { children: a(`reviewsPanel.answer.${e.futureVisit}`) })
+            ] }) : null,
+            e.recommendation ? /* @__PURE__ */ n(l.Row, { children: [
+              /* @__PURE__ */ t(l.Term, { children: a("reviewsPanel.breakdown.recommendation") }),
+              /* @__PURE__ */ t(l.Detail, { children: a(`reviewsPanel.answer.${e.recommendation}`) })
+            ] }) : null
+          ] }) : null,
+          e.reply ? /* @__PURE__ */ n("div", { className: "ds:rounded-[var(--radius-sm)] ds:bg-[var(--muted)]/40 ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)] ds:pt-[var(--spacing-sm)] ds:pb-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ t("p", { className: "type-label ds:m-0 ds:mb-[var(--spacing-2xs)] ds:text-[var(--muted-foreground)] ds:font-[var(--font-weight-semibold)]", children: a("reviewsPanel.replyTitle") }),
+            /* @__PURE__ */ t("p", { className: "type-body-sm ds:m-0 ds:text-[var(--foreground)] ds:[white-space:pre-line]", children: e.reply })
+          ] }) : null
+        ] }) }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ n(A, { variant: "default", className: "ds:shadow-[var(--shadow-sm)]", children: [
+    /* @__PURE__ */ t(A.Header, { children: /* @__PURE__ */ n("div", { className: "ds:flex ds:items-start ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ t("h4", { className: "type-title-item ds:m-0 ds:text-[var(--foreground)]", children: p }),
+      /* @__PURE__ */ t(k, { value: e.overallScore, size: "sm" })
+    ] }) }),
+    e.comment ? /* @__PURE__ */ t(A.Body, { children: /* @__PURE__ */ t("p", { className: "type-body ds:m-0 ds:text-[var(--foreground)] ds:line-clamp-2", children: e.comment }) }) : null,
+    P
+  ] });
+}
+function ue({ hideFilter: e }) {
+  return /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+    /* @__PURE__ */ n("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ t(T, { variant: "text", width: "40%" }),
+      /* @__PURE__ */ t(T, { variant: "text", width: "20%" })
+    ] }),
+    e ? null : /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-wrap ds:gap-[var(--spacing-xs)]", children: Array.from({ length: 6 }, (i, a) => /* @__PURE__ */ t(
+      T,
+      {
+        variant: "rounded",
+        width: "4rem",
+        height: "2.5rem"
+      },
+      `rp-fs-${a}`
+    )) }),
+    /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: Array.from({ length: 3 }, (i, a) => /* @__PURE__ */ t(T, { variant: "rounded", height: "6rem" }, `rp-rs-${a}`)) })
+  ] });
+}
+const z = _(
+  // No root padding: the shared `PanelHeader` owns the header's edge
+  // padding (px/pt/pb) and the body wrapper below owns the content
+  // padding, so the header divider can span flush to the panel edge.
+  "ds:flex ds:w-full ds:flex-col ds:text-[var(--foreground)]",
+  {
+    variants: {
+      // `surface="elevated"` matches `Card variant="elevated"` — same
+      // chrome tokens — so consumers can drop their own Card wraps
+      // without producing a double-card look. Padding is supplied by the
+      // header + body, not the root, so the header divider reaches the
+      // card edge. Default `'flat'` adds no chrome.
+      surface: {
+        flat: "",
+        elevated: [
+          "ds:overflow-hidden",
+          "ds:rounded-[var(--radius-lg)]",
+          "ds:bg-[var(--card)] ds:text-[var(--card-foreground)]",
+          "ds:border ds:border-[color:var(--card-border)]",
+          "ds:shadow-[var(--shadow-card)]"
+        ].join(" ")
+      }
+    },
+    defaultVariants: { surface: "flat" }
+  }
+), me = J(
+  ({
+    reviews: e,
+    aggregate: i,
+    filter: a,
+    onFilterChange: c,
+    introSlot: g,
+    headerActionSlot: y,
+    "aria-label": N,
+    id: o,
+    className: u,
+    hideFilter: f = !1,
+    surface: p = "flat",
+    loading: P = !1,
+    ...r
+  }, d) => {
+    const { t: s, i18n: x } = E(), v = x.language ?? "en", [S, V] = H("all"), m = a ?? S, b = L(
+      (h) => {
+        a === void 0 && V(h), c == null || c(h);
+      },
+      [a, c]
+    ), U = C(
+      () => i.histogram ?? le(e),
+      [i.histogram, e]
+    ), R = C(() => m === "all" ? e : e.filter((h) => $(h.overallScore) === m), [e, m]), M = F(m);
+    M.current = m;
+    const O = F(R.length);
+    O.current = R.length;
+    const q = C(
+      () => ({
+        getFilter: () => M.current,
+        setFilter: (h) => b(h),
+        getVisibleCount: () => O.current
+      }),
+      [b]
+    ), D = F(null);
+    Q(d, () => D.current, []), X(ie, q, o);
+    const j = N ?? s("reviewsPanel.regionLabel"), I = String(m);
+    if (P)
+      return /* @__PURE__ */ t(
+        "section",
+        {
+          ref: D,
+          "aria-label": j,
+          "aria-busy": "true",
+          id: o,
+          "data-component": "reviews-panel",
+          "data-component-id": o,
+          "data-filter": I,
+          "data-state": "loading",
+          className: z({ surface: p, className: u }),
+          ...r,
+          children: /* @__PURE__ */ t("div", { className: "ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ t(ue, { hideFilter: f }) })
+        }
+      );
+    if (i.count === 0 && e.length === 0)
+      return /* @__PURE__ */ t(
+        "section",
+        {
+          ref: D,
+          "aria-label": j,
+          id: o,
+          "data-component": "reviews-panel",
+          "data-component-id": o,
+          "data-filter": I,
+          "data-state": "empty",
+          className: z({ surface: p, className: u }),
+          ...r,
+          children: /* @__PURE__ */ t("div", { className: "ds:p-[var(--spacing-md)]", children: /* @__PURE__ */ t(
+            te,
+            {
+              variant: "no-results",
+              title: s("reviewsPanel.empty.title"),
+              description: s("reviewsPanel.empty.description")
+            }
+          ) })
+        }
+      );
+    const G = !f;
+    return /* @__PURE__ */ n(
+      "section",
+      {
+        ref: D,
+        "aria-label": j,
+        id: o,
+        "data-component": "reviews-panel",
+        "data-component-id": o,
+        "data-filter": I,
+        className: z({ surface: p, className: u }),
+        ...r,
+        children: [
+          /* @__PURE__ */ t(
+            re,
+            {
+              title: s("reviewsPanel.title"),
+              icon: /* @__PURE__ */ t(ae, { "aria-hidden": "true" }),
+              titleScale: "section",
+              sticky: !0,
+              actions: /* @__PURE__ */ n(K, { children: [
+                y,
+                /* @__PURE__ */ t(
+                  k,
+                  {
+                    value: i.averageScore,
+                    reviews: { count: i.count },
+                    size: "md"
+                  }
+                )
+              ] }),
+              filters: G ? /* @__PURE__ */ t(
+                de,
+                {
+                  filter: m,
+                  histogram: U,
+                  totalCount: i.count,
+                  onChange: b
+                }
+              ) : void 0
+            }
+          ),
+          /* @__PURE__ */ n("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:min-w-0 ds:p-[var(--spacing-md)]", children: [
+            g || null,
+            R.length === 0 ? (
+              // `role="status"` already implies `aria-live="polite"` —
+              // declaring both would queue two announcements when the
+              // filter changes (the radio's aria-checked flip + this
+              // container's text). Keeping `role` only.
+              /* @__PURE__ */ n(
+                "div",
+                {
+                  role: "status",
+                  "data-state": "no-match",
+                  className: "ds:flex ds:flex-col ds:items-center ds:gap-[var(--spacing-sm)] ds:rounded-[var(--radius-md)] ds:border ds:border-dashed ds:border-[var(--border)] ds:p-[var(--spacing-lg)] ds:text-center",
+                  children: [
+                    /* @__PURE__ */ t("p", { className: "type-body ds:m-0 ds:text-[var(--muted-foreground)]", children: m === "all" ? s("reviewsPanel.empty.title") : s("reviewsPanel.empty.filterDescription", {
+                      stars: m
+                    }) }),
+                    m !== "all" ? /* @__PURE__ */ t(
+                      se,
+                      {
+                        intent: "secondary",
+                        size: "sm",
+                        onClick: () => b("all"),
+                        children: s("reviewsPanel.empty.resetFilter")
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ) : /* @__PURE__ */ t(
+              "ol",
+              {
+                "aria-label": s("reviewsPanel.listLabel"),
+                className: "ds:list-none ds:m-0 ds:p-0 ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+                children: R.map((h) => /* @__PURE__ */ t("li", { "data-review-id": h.id, children: /* @__PURE__ */ t(ce, { review: h, locale: v }) }, h.id))
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+me.displayName = "ReviewsPanel";
+export {
+  me as R,
+  ie as r
+};
+//# sourceMappingURL=reviews-panel-DxkSrgMl.js.map