@alfadocs/ui-kit 0.25.2 → 0.30.1

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

@@ -0,0 +1,513 @@
+import { jsx as s, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as q, useState as _, useCallback as L, useMemo as V, useRef as F, useImperativeHandle as G, useId as B, useEffect as J } from "react";
+import { c as K } from "./index-D2ZczOXr.js";
+import { useTranslation as E } from "react-i18next";
+import { u as Q } from "./registry-C9nwlNyL.js";
+import { R as N } from "./rating-BRD7O74e.js";
+import { C as T } from "./card-DKTMLVrw.js";
+import { C as W, b as X, a as Y } from "./collapsible-hHiyZp0b.js";
+import { D as d } from "./description-list-yl3y3QKg.js";
+import { E as Z } from "./empty-state-BLy7tigq.js";
+import { S as C } from "./skeleton-CZbwyJAA.js";
+import { B as ee } from "./button-DD_0Xdmr.js";
+import { C as se } from "./chevron-down-BX_NP2Yh.js";
+const ae = {
+  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: {
+      safety: "read",
+      argsType: '{ filter: "all" | 1 | 2 | 3 | 4 | 5 }',
+      descriptionKey: "ui.agent.reviewsPanel.actions.setFilter",
+      description: 'Narrow the visible review list to a star bucket, or `"all"` to clear the filter.',
+      invoke: (e, l) => {
+        e.setFilter(l.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."
+    }
+  }
+}, b = ["all", 5, 4, 3, 2, 1];
+function $(e) {
+  return Math.min(5, Math.max(1, Math.floor(e)));
+}
+function te(e) {
+  const l = {
+    1: 0,
+    2: 0,
+    3: 0,
+    4: 0,
+    5: 0
+  };
+  for (const r of e) l[$(r.overallScore)] += 1;
+  return l;
+}
+const re = K(
+  [
+    "ds:relative ds:flex ds:w-full ds:items-center ds:justify-between",
+    "ds:gap-[var(--spacing-sm)]",
+    "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 ne({
+  filter: e,
+  histogram: l,
+  totalCount: r,
+  onChange: c
+}) {
+  const { t: g } = E(), x = B(), [S, o] = _(
+    () => Math.max(0, b.indexOf(e))
+  );
+  J(() => {
+    const n = b.indexOf(e);
+    n >= 0 && o(n);
+  }, [e]);
+  const m = F(/* @__PURE__ */ new Map()), p = L((n) => {
+    var a;
+    (a = m.current.get(n)) == null || a.focus();
+  }, []), h = b.length, y = L(
+    (n, a) => {
+      switch (n.key) {
+        case "ArrowDown":
+        case "ArrowRight": {
+          n.preventDefault();
+          const i = (a + 1) % h;
+          o(i), p(i), c(b[i]);
+          break;
+        }
+        case "ArrowUp":
+        case "ArrowLeft": {
+          n.preventDefault();
+          const i = (a - 1 + h) % h;
+          o(i), p(i), c(b[i]);
+          break;
+        }
+        case "Home": {
+          n.preventDefault(), o(0), p(0), c(b[0]);
+          break;
+        }
+        case "End": {
+          n.preventDefault();
+          const i = h - 1;
+          o(i), p(i), c(b[i]);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          n.preventDefault(), c(b[a]);
+          break;
+        }
+      }
+    },
+    [h, p, c]
+  );
+  return /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+    /* @__PURE__ */ s(
+      "h3",
+      {
+        id: x,
+        className: "type-label ds:font-[var(--font-weight-semibold)] ds:text-[var(--foreground)] ds:m-0",
+        children: g("reviewsPanel.filterTitle")
+      }
+    ),
+    /* @__PURE__ */ s(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-labelledby": x,
+        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
+        children: b.map((n, a) => {
+          const i = n === "all", w = i ? 0 : n, f = i ? r : l[w], R = n === e, u = S === a, k = i ? g("reviewsPanel.filter.allLabel", { count: f }) : g("reviewsPanel.filter.starsLabel", { stars: w, count: f });
+          return /* @__PURE__ */ t(
+            "button",
+            {
+              ref: (P) => {
+                P ? m.current.set(a, P) : m.current.delete(a);
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": R,
+              "aria-label": k,
+              tabIndex: u ? 0 : -1,
+              onClick: () => {
+                o(a), c(n);
+              },
+              onFocus: () => o(a),
+              onKeyDown: (P) => y(P, a),
+              "data-filter-bucket": String(n),
+              className: re({
+                state: R ? "selected" : "idle"
+              }),
+              children: [
+                /* @__PURE__ */ s(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
+                    children: i ? /* @__PURE__ */ s("span", { className: "type-label", children: g("reviewsPanel.filter.allShort") }) : /* @__PURE__ */ s(N, { value: w, size: "sm", decorative: !0 })
+                  }
+                ),
+                /* @__PURE__ */ s(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "type-meta ds:text-[var(--muted-foreground)]",
+                    children: f
+                  }
+                )
+              ]
+            },
+            String(n)
+          );
+        })
+      }
+    )
+  ] });
+}
+function ie({ review: e, locale: l }) {
+  var n, a, i, w;
+  const { t: r } = E(), c = B(), g = B(), [x, S] = _(!1), o = !!(e.breakdown && Object.values(e.breakdown).some((f) => f != null)), m = !!e.reply || o || !!e.futureVisit || !!e.recommendation, p = V(() => {
+    if (!e.authoredAt) return "";
+    try {
+      const f = new Date(e.authoredAt);
+      return Number.isNaN(f.getTime()) ? e.authoredAt : new Intl.DateTimeFormat(l, { dateStyle: "medium" }).format(
+        f
+      );
+    } catch {
+      return e.authoredAt;
+    }
+  }, [e.authoredAt, l]), h = e.pseudonym ?? r("reviewsPanel.anonymous"), y = /* @__PURE__ */ t(
+    W,
+    {
+      open: m ? x : !1,
+      onOpenChange: m ? S : void 0,
+      children: [
+        /* @__PURE__ */ t(T.Footer, { children: [
+          /* @__PURE__ */ s("span", { className: "type-meta ds:text-[var(--muted-foreground)]", children: p }),
+          m ? /* @__PURE__ */ s(X, { asChild: !0, children: /* @__PURE__ */ t(
+            "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: [
+                r(x ? "reviewsPanel.card.collapse" : "reviewsPanel.card.expand"),
+                /* @__PURE__ */ s(
+                  se,
+                  {
+                    "aria-hidden": "true",
+                    className: [
+                      "ds:size-4 ds:transition-transform ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+                      x ? "ds:rotate-180" : ""
+                    ].filter(Boolean).join(" ")
+                  }
+                )
+              ]
+            }
+          ) }) : null
+        ] }),
+        m ? /* @__PURE__ */ s(Y, { id: g, "aria-labelledby": c, children: /* @__PURE__ */ t("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__ */ t(d, { layout: "inline", density: "compact", children: [
+            ((n = e.breakdown) == null ? void 0 : n.appointmentScore) != null ? /* @__PURE__ */ t(d.Row, { children: [
+              /* @__PURE__ */ s(d.Term, { children: r("reviewsPanel.breakdown.appointment") }),
+              /* @__PURE__ */ s(d.Detail, { children: /* @__PURE__ */ s(
+                N,
+                {
+                  value: e.breakdown.appointmentScore,
+                  size: "sm"
+                }
+              ) })
+            ] }) : null,
+            ((a = e.breakdown) == null ? void 0 : a.communicationScore) != null ? /* @__PURE__ */ t(d.Row, { children: [
+              /* @__PURE__ */ s(d.Term, { children: r("reviewsPanel.breakdown.communication") }),
+              /* @__PURE__ */ s(d.Detail, { children: /* @__PURE__ */ s(
+                N,
+                {
+                  value: e.breakdown.communicationScore,
+                  size: "sm"
+                }
+              ) })
+            ] }) : null,
+            ((i = e.breakdown) == null ? void 0 : i.staffScore) != null ? /* @__PURE__ */ t(d.Row, { children: [
+              /* @__PURE__ */ s(d.Term, { children: r("reviewsPanel.breakdown.staff") }),
+              /* @__PURE__ */ s(d.Detail, { children: /* @__PURE__ */ s(N, { value: e.breakdown.staffScore, size: "sm" }) })
+            ] }) : null,
+            ((w = e.breakdown) == null ? void 0 : w.overallScore) != null ? /* @__PURE__ */ t(d.Row, { children: [
+              /* @__PURE__ */ s(d.Term, { children: r("reviewsPanel.breakdown.overall") }),
+              /* @__PURE__ */ s(d.Detail, { children: /* @__PURE__ */ s(N, { value: e.breakdown.overallScore, size: "sm" }) })
+            ] }) : null,
+            e.futureVisit ? /* @__PURE__ */ t(d.Row, { children: [
+              /* @__PURE__ */ s(d.Term, { children: r("reviewsPanel.breakdown.futureVisit") }),
+              /* @__PURE__ */ s(d.Detail, { children: r(`reviewsPanel.answer.${e.futureVisit}`) })
+            ] }) : null,
+            e.recommendation ? /* @__PURE__ */ t(d.Row, { children: [
+              /* @__PURE__ */ s(d.Term, { children: r("reviewsPanel.breakdown.recommendation") }),
+              /* @__PURE__ */ s(d.Detail, { children: r(`reviewsPanel.answer.${e.recommendation}`) })
+            ] }) : null
+          ] }) : null,
+          e.reply ? /* @__PURE__ */ t("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__ */ s("p", { className: "type-label ds:m-0 ds:mb-[var(--spacing-2xs)] ds:text-[var(--muted-foreground)] ds:font-[var(--font-weight-semibold)]", children: r("reviewsPanel.replyTitle") }),
+            /* @__PURE__ */ s("p", { className: "type-body-sm ds:m-0 ds:text-[var(--foreground)] ds:[white-space:pre-line]", children: e.reply })
+          ] }) : null
+        ] }) }) : null
+      ]
+    }
+  );
+  return /* @__PURE__ */ t(T, { variant: "default", className: "ds:shadow-[var(--shadow-sm)]", children: [
+    /* @__PURE__ */ s(T.Header, { children: /* @__PURE__ */ t("div", { className: "ds:flex ds:items-start ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ s("h4", { className: "type-title-item ds:m-0 ds:text-[var(--foreground)]", children: h }),
+      /* @__PURE__ */ s(N, { value: e.overallScore, size: "sm" })
+    ] }) }),
+    e.comment ? /* @__PURE__ */ s(T.Body, { children: /* @__PURE__ */ s("p", { className: "type-body ds:m-0 ds:text-[var(--foreground)] ds:line-clamp-2", children: e.comment }) }) : null,
+    y
+  ] });
+}
+function le({ hideFilter: e }) {
+  return /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
+    /* @__PURE__ */ t("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+      /* @__PURE__ */ s(C, { variant: "text", width: "40%" }),
+      /* @__PURE__ */ s(C, { variant: "text", width: "20%" })
+    ] }),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: e ? "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]" : "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:md:grid-cols-[minmax(0,30%)_minmax(0,1fr)]",
+        children: [
+          e ? null : /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]", children: Array.from({ length: 6 }, (l, r) => /* @__PURE__ */ s(C, { variant: "rounded", height: "2.5rem" }, `rp-fs-${r}`)) }),
+          /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: Array.from({ length: 3 }, (l, r) => /* @__PURE__ */ s(C, { variant: "rounded", height: "6rem" }, `rp-rs-${r}`)) })
+        ]
+      }
+    )
+  ] });
+}
+const j = K(
+  "ds:flex ds:w-full ds:flex-col ds:gap-[var(--spacing-md)] ds:text-[var(--foreground)]"
+), de = q(
+  ({
+    reviews: e,
+    aggregate: l,
+    filter: r,
+    onFilterChange: c,
+    introSlot: g,
+    headerActionSlot: x,
+    "aria-label": S,
+    id: o,
+    className: m,
+    hideFilter: p = !1,
+    loading: h = !1,
+    ...y
+  }, n) => {
+    const { t: a, i18n: i } = E(), w = i.language ?? "en", [f, R] = _("all"), u = r ?? f, k = L(
+      (v) => {
+        r === void 0 && R(v), c == null || c(v);
+      },
+      [r, c]
+    ), P = V(
+      () => l.histogram ?? te(e),
+      [l.histogram, e]
+    ), D = V(() => u === "all" ? e : e.filter((v) => $(v.overallScore) === u), [e, u]), H = F(u);
+    H.current = u;
+    const M = F(D.length);
+    M.current = D.length;
+    const U = V(
+      () => ({
+        getFilter: () => H.current,
+        setFilter: (v) => k(v),
+        getVisibleCount: () => M.current
+      }),
+      [k]
+    ), A = F(null);
+    G(n, () => A.current, []), Q(ae, U, o);
+    const I = S ?? a("reviewsPanel.regionLabel"), z = String(u);
+    if (h)
+      return /* @__PURE__ */ s(
+        "section",
+        {
+          ref: A,
+          "aria-label": I,
+          "aria-busy": "true",
+          id: o,
+          "data-component": "reviews-panel",
+          "data-component-id": o,
+          "data-filter": z,
+          "data-state": "loading",
+          className: j({ className: m }),
+          ...y,
+          children: /* @__PURE__ */ s(le, { hideFilter: p })
+        }
+      );
+    if (l.count === 0 && e.length === 0)
+      return /* @__PURE__ */ s(
+        "section",
+        {
+          ref: A,
+          "aria-label": I,
+          id: o,
+          "data-component": "reviews-panel",
+          "data-component-id": o,
+          "data-filter": z,
+          "data-state": "empty",
+          className: j({ className: m }),
+          ...y,
+          children: /* @__PURE__ */ s(
+            Z,
+            {
+              variant: "no-results",
+              title: a("reviewsPanel.empty.title"),
+              description: a("reviewsPanel.empty.description")
+            }
+          )
+        }
+      );
+    const O = !p;
+    return /* @__PURE__ */ t(
+      "section",
+      {
+        ref: A,
+        "aria-label": I,
+        id: o,
+        "data-component": "reviews-panel",
+        "data-component-id": o,
+        "data-filter": z,
+        className: j({ className: m }),
+        ...y,
+        children: [
+          /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-wrap ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ s("h2", { className: "type-title-section ds:m-0 ds:text-[var(--foreground)]", children: a("reviewsPanel.title") }),
+            /* @__PURE__ */ t("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-md)]", children: [
+              x,
+              /* @__PURE__ */ s(
+                N,
+                {
+                  value: l.averageScore,
+                  reviews: { count: l.count },
+                  size: "md"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: O ? "ds:grid ds:grid-cols-1 ds:gap-[var(--spacing-md)] ds:md:grid-cols-[minmax(0,30%)_minmax(0,1fr)]" : "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]",
+              children: [
+                O ? /* @__PURE__ */ s(
+                  ne,
+                  {
+                    filter: u,
+                    histogram: P,
+                    totalCount: l.count,
+                    onChange: k
+                  }
+                ) : null,
+                /* @__PURE__ */ t("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:min-w-0", children: [
+                  g ? (
+                    // Plain div, not <aside>: axe's
+                    // `landmark-complementary-is-top-level` rule fires when an
+                    // `<aside>` lands inside another landmark (this panel's
+                    // <section role="region">), and the consumer's introSlot
+                    // already supplies its own semantics (e.g. an Alert with
+                    // role="status").
+                    /* @__PURE__ */ s("div", { className: "ds:rounded-[var(--radius-md)] ds:bg-[color-mix(in_srgb,var(--info)_8%,transparent)] ds:ps-[var(--spacing-md)] ds:pe-[var(--spacing-md)] ds:pt-[var(--spacing-md)] ds:pb-[var(--spacing-md)]", children: g })
+                  ) : null,
+                  D.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__ */ t(
+                      "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__ */ s("p", { className: "type-body ds:m-0 ds:text-[var(--muted-foreground)]", children: u === "all" ? a("reviewsPanel.empty.title") : a("reviewsPanel.empty.filterDescription", {
+                            stars: u
+                          }) }),
+                          u !== "all" ? /* @__PURE__ */ s(
+                            ee,
+                            {
+                              intent: "secondary",
+                              size: "sm",
+                              onClick: () => k("all"),
+                              children: a("reviewsPanel.empty.resetFilter")
+                            }
+                          ) : null
+                        ]
+                      }
+                    )
+                  ) : /* @__PURE__ */ s(
+                    "ol",
+                    {
+                      "aria-label": a("reviewsPanel.listLabel"),
+                      className: "ds:list-none ds:m-0 ds:p-0 ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]",
+                      children: D.map((v) => /* @__PURE__ */ s("li", { "data-review-id": v.id, children: /* @__PURE__ */ s(ie, { review: v, locale: w }) }, v.id))
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+de.displayName = "ReviewsPanel";
+export {
+  de as R,
+  ae as r
+};
+//# sourceMappingURL=reviews-panel-CFttsfuC.js.map