@alfadocs/ui-kit 0.70.0 → 0.71.0

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

@@ -1,555 +0,0 @@
-import { jsx as s, jsxs as r } from "react/jsx-runtime";
-import { forwardRef as G, useState as E, useCallback as L, useMemo as C, useRef as V, useImperativeHandle as J, useId as B, useEffect as Q } from "react";
-import { c as K } from "./index-D2ZczOXr.js";
-import { useTranslation as H } from "react-i18next";
-import { u as W } from "./registry-DvAUVLHh.js";
-import { R as k } from "./rating-BRD7O74e.js";
-import { C as A } from "./card-DPmk26CL.js";
-import { C as X, b as Y, a as Z } from "./collapsible-BrnRiCC6.js";
-import { D as l } from "./description-list-gkNGWk5G.js";
-import { E as ee } from "./empty-state-BLy7tigq.js";
-import { S as T } from "./skeleton-CZbwyJAA.js";
-import { B as se } from "./button-DD_0Xdmr.js";
-import { C as ae } from "./chevron-down-BX_NP2Yh.js";
-const te = {
-  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."
-    }
-  }
-}, x = ["all", 5, 4, 3, 2, 1];
-function $(e) {
-  return Math.min(5, Math.max(1, Math.floor(e)));
-}
-function re(e) {
-  const i = {
-    1: 0,
-    2: 0,
-    3: 0,
-    4: 0,
-    5: 0
-  };
-  for (const n of e) i[$(n.overallScore)] += 1;
-  return i;
-}
-const ne = 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 ie({
-  filter: e,
-  histogram: i,
-  totalCount: n,
-  onChange: c
-}) {
-  const { t: h } = H(), w = B(), [N, d] = E(
-    () => Math.max(0, x.indexOf(e))
-  );
-  Q(() => {
-    const t = x.indexOf(e);
-    t >= 0 && d(t);
-  }, [e]);
-  const m = V(/* @__PURE__ */ new Map()), f = L((t) => {
-    var o;
-    (o = m.current.get(t)) == null || o.focus();
-  }, []), p = x.length, P = L(
-    (t, o) => {
-      switch (t.key) {
-        case "ArrowDown":
-        case "ArrowRight": {
-          t.preventDefault();
-          const a = (o + 1) % p;
-          d(a), f(a), c(x[a]);
-          break;
-        }
-        case "ArrowUp":
-        case "ArrowLeft": {
-          t.preventDefault();
-          const a = (o - 1 + p) % p;
-          d(a), f(a), c(x[a]);
-          break;
-        }
-        case "Home": {
-          t.preventDefault(), d(0), f(0), c(x[0]);
-          break;
-        }
-        case "End": {
-          t.preventDefault();
-          const a = p - 1;
-          d(a), f(a), c(x[a]);
-          break;
-        }
-        case "Enter":
-        case " ": {
-          t.preventDefault(), c(x[o]);
-          break;
-        }
-      }
-    },
-    [p, f, c]
-  );
-  return /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
-    /* @__PURE__ */ s(
-      "h3",
-      {
-        id: w,
-        className: "type-label ds:font-[var(--font-weight-semibold)] ds:text-[var(--foreground)] ds:m-0",
-        children: h("reviewsPanel.filterTitle")
-      }
-    ),
-    /* @__PURE__ */ s(
-      "div",
-      {
-        role: "radiogroup",
-        "aria-labelledby": w,
-        className: "ds:flex ds:flex-col ds:gap-[var(--spacing-2xs)]",
-        children: x.map((t, o) => {
-          const a = t === "all", y = a ? 0 : t, v = a ? n : i[y], S = t === e, j = N === o, u = a ? h("reviewsPanel.filter.allLabel", { count: v }) : h("reviewsPanel.filter.starsLabel", { stars: y, count: v });
-          return /* @__PURE__ */ r(
-            "button",
-            {
-              ref: (b) => {
-                b ? m.current.set(o, b) : m.current.delete(o);
-              },
-              type: "button",
-              role: "radio",
-              "aria-checked": S,
-              "aria-label": u,
-              tabIndex: j ? 0 : -1,
-              onClick: () => {
-                d(o), c(t);
-              },
-              onFocus: () => d(o),
-              onKeyDown: (b) => P(b, o),
-              "data-filter-bucket": String(t),
-              className: ne({
-                state: S ? "selected" : "idle"
-              }),
-              children: [
-                /* @__PURE__ */ s(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: "ds:inline-flex ds:items-center ds:gap-[var(--spacing-xs)]",
-                    children: a ? /* @__PURE__ */ s("span", { className: "type-label", children: h("reviewsPanel.filter.allShort") }) : /* @__PURE__ */ s(k, { value: y, size: "sm", decorative: !0 })
-                  }
-                ),
-                /* @__PURE__ */ s(
-                  "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(t)
-          );
-        })
-      }
-    )
-  ] });
-}
-function le({ review: e, locale: i }) {
-  var t, o, a, y;
-  const { t: n } = H(), c = B(), h = B(), [w, N] = E(!1), d = !!(e.breakdown && Object.values(e.breakdown).some((v) => v != null)), m = !!e.reply || d || !!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 ?? n("reviewsPanel.anonymous"), P = /* @__PURE__ */ r(
-    X,
-    {
-      open: m ? w : !1,
-      onOpenChange: m ? N : void 0,
-      children: [
-        /* @__PURE__ */ r(A.Footer, { children: [
-          /* @__PURE__ */ s("span", { className: "type-meta ds:text-[var(--muted-foreground)]", children: f }),
-          m ? /* @__PURE__ */ s(Y, { asChild: !0, children: /* @__PURE__ */ r(
-            "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: [
-                n(w ? "reviewsPanel.card.collapse" : "reviewsPanel.card.expand"),
-                /* @__PURE__ */ s(
-                  ae,
-                  {
-                    "aria-hidden": "true",
-                    className: [
-                      "ds:size-4 ds:transition-transform ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
-                      w ? "ds:rotate-180" : ""
-                    ].filter(Boolean).join(" ")
-                  }
-                )
-              ]
-            }
-          ) }) : null
-        ] }),
-        m ? /* @__PURE__ */ s(Z, { id: h, "aria-labelledby": c, children: /* @__PURE__ */ r("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: [
-          d || e.futureVisit || e.recommendation ? /* @__PURE__ */ r(l, { layout: "inline", density: "compact", children: [
-            ((t = e.breakdown) == null ? void 0 : t.appointmentScore) != null ? /* @__PURE__ */ r(l.Row, { children: [
-              /* @__PURE__ */ s(l.Term, { children: n("reviewsPanel.breakdown.appointment") }),
-              /* @__PURE__ */ s(l.Detail, { children: /* @__PURE__ */ s(
-                k,
-                {
-                  value: e.breakdown.appointmentScore,
-                  size: "sm"
-                }
-              ) })
-            ] }) : null,
-            ((o = e.breakdown) == null ? void 0 : o.communicationScore) != null ? /* @__PURE__ */ r(l.Row, { children: [
-              /* @__PURE__ */ s(l.Term, { children: n("reviewsPanel.breakdown.communication") }),
-              /* @__PURE__ */ s(l.Detail, { children: /* @__PURE__ */ s(
-                k,
-                {
-                  value: e.breakdown.communicationScore,
-                  size: "sm"
-                }
-              ) })
-            ] }) : null,
-            ((a = e.breakdown) == null ? void 0 : a.staffScore) != null ? /* @__PURE__ */ r(l.Row, { children: [
-              /* @__PURE__ */ s(l.Term, { children: n("reviewsPanel.breakdown.staff") }),
-              /* @__PURE__ */ s(l.Detail, { children: /* @__PURE__ */ s(k, { value: e.breakdown.staffScore, size: "sm" }) })
-            ] }) : null,
-            ((y = e.breakdown) == null ? void 0 : y.overallScore) != null ? /* @__PURE__ */ r(l.Row, { children: [
-              /* @__PURE__ */ s(l.Term, { children: n("reviewsPanel.breakdown.overall") }),
-              /* @__PURE__ */ s(l.Detail, { children: /* @__PURE__ */ s(k, { value: e.breakdown.overallScore, size: "sm" }) })
-            ] }) : null,
-            e.futureVisit ? /* @__PURE__ */ r(l.Row, { children: [
-              /* @__PURE__ */ s(l.Term, { children: n("reviewsPanel.breakdown.futureVisit") }),
-              /* @__PURE__ */ s(l.Detail, { children: n(`reviewsPanel.answer.${e.futureVisit}`) })
-            ] }) : null,
-            e.recommendation ? /* @__PURE__ */ r(l.Row, { children: [
-              /* @__PURE__ */ s(l.Term, { children: n("reviewsPanel.breakdown.recommendation") }),
-              /* @__PURE__ */ s(l.Detail, { children: n(`reviewsPanel.answer.${e.recommendation}`) })
-            ] }) : null
-          ] }) : null,
-          e.reply ? /* @__PURE__ */ r("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: n("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__ */ r(A, { variant: "default", className: "ds:shadow-[var(--shadow-sm)]", children: [
-    /* @__PURE__ */ s(A.Header, { children: /* @__PURE__ */ r("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: p }),
-      /* @__PURE__ */ s(k, { value: e.overallScore, size: "sm" })
-    ] }) }),
-    e.comment ? /* @__PURE__ */ s(A.Body, { children: /* @__PURE__ */ s("p", { className: "type-body ds:m-0 ds:text-[var(--foreground)] ds:line-clamp-2", children: e.comment }) }) : null,
-    P
-  ] });
-}
-function de({ hideFilter: e }) {
-  return /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)]", children: [
-    /* @__PURE__ */ r("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
-      /* @__PURE__ */ s(T, { variant: "text", width: "40%" }),
-      /* @__PURE__ */ s(T, { variant: "text", width: "20%" })
-    ] }),
-    /* @__PURE__ */ r(
-      "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 }, (i, n) => /* @__PURE__ */ s(T, { variant: "rounded", height: "2.5rem" }, `rp-fs-${n}`)) }),
-          /* @__PURE__ */ s("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: Array.from({ length: 3 }, (i, n) => /* @__PURE__ */ s(T, { variant: "rounded", height: "6rem" }, `rp-rs-${n}`)) })
-        ]
-      }
-    )
-  ] });
-}
-const z = K(
-  "ds:flex ds:w-full ds:flex-col ds:gap-[var(--spacing-md)] ds:text-[var(--foreground)]",
-  {
-    variants: {
-      // `surface="elevated"` matches `Card variant="elevated"` — same
-      // tokens, same padding, same boundary behaviour — so consumers can
-      // drop their own Card wraps without producing a double-card look.
-      // Default `'flat'` preserves 0.30.x rendering (no wrapping).
-      surface: {
-        flat: "",
-        elevated: [
-          "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)]",
-          "ds:p-[var(--spacing-md)]"
-        ].join(" ")
-      }
-    },
-    defaultVariants: { surface: "flat" }
-  }
-), oe = G(
-  ({
-    reviews: e,
-    aggregate: i,
-    filter: n,
-    onFilterChange: c,
-    introSlot: h,
-    headerActionSlot: w,
-    "aria-label": N,
-    id: d,
-    className: m,
-    hideFilter: f = !1,
-    surface: p = "flat",
-    loading: P = !1,
-    ...t
-  }, o) => {
-    const { t: a, i18n: y } = H(), v = y.language ?? "en", [S, j] = E("all"), u = n ?? S, b = L(
-      (g) => {
-        n === void 0 && j(g), c == null || c(g);
-      },
-      [n, c]
-    ), U = C(
-      () => i.histogram ?? re(e),
-      [i.histogram, e]
-    ), R = C(() => u === "all" ? e : e.filter((g) => $(g.overallScore) === u), [e, u]), M = V(u);
-    M.current = u;
-    const O = V(R.length);
-    O.current = R.length;
-    const q = C(
-      () => ({
-        getFilter: () => M.current,
-        setFilter: (g) => b(g),
-        getVisibleCount: () => O.current
-      }),
-      [b]
-    ), D = V(null);
-    J(o, () => D.current, []), W(te, q, d);
-    const F = N ?? a("reviewsPanel.regionLabel"), I = String(u);
-    if (P)
-      return /* @__PURE__ */ s(
-        "section",
-        {
-          ref: D,
-          "aria-label": F,
-          "aria-busy": "true",
-          id: d,
-          "data-component": "reviews-panel",
-          "data-component-id": d,
-          "data-filter": I,
-          "data-state": "loading",
-          className: z({ surface: p, className: m }),
-          ...t,
-          children: /* @__PURE__ */ s(de, { hideFilter: f })
-        }
-      );
-    if (i.count === 0 && e.length === 0)
-      return /* @__PURE__ */ s(
-        "section",
-        {
-          ref: D,
-          "aria-label": F,
-          id: d,
-          "data-component": "reviews-panel",
-          "data-component-id": d,
-          "data-filter": I,
-          "data-state": "empty",
-          className: z({ surface: p, className: m }),
-          ...t,
-          children: /* @__PURE__ */ s(
-            ee,
-            {
-              variant: "no-results",
-              title: a("reviewsPanel.empty.title"),
-              description: a("reviewsPanel.empty.description")
-            }
-          )
-        }
-      );
-    const _ = !f;
-    return /* @__PURE__ */ r(
-      "section",
-      {
-        ref: D,
-        "aria-label": F,
-        id: d,
-        "data-component": "reviews-panel",
-        "data-component-id": d,
-        "data-filter": I,
-        className: z({ surface: p, className: m }),
-        ...t,
-        children: [
-          /* @__PURE__ */ r("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__ */ r("div", { className: "ds:flex ds:items-center ds:gap-[var(--spacing-md)]", children: [
-              w,
-              /* @__PURE__ */ s(
-                k,
-                {
-                  value: i.averageScore,
-                  reviews: { count: i.count },
-                  size: "md"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ r(
-            "div",
-            {
-              className: _ ? "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: [
-                _ ? /* @__PURE__ */ s(
-                  ie,
-                  {
-                    filter: u,
-                    histogram: U,
-                    totalCount: i.count,
-                    onChange: b
-                  }
-                ) : null,
-                /* @__PURE__ */ r("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-md)] ds:min-w-0", children: [
-                  h || 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__ */ r(
-                      "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(
-                            se,
-                            {
-                              intent: "secondary",
-                              size: "sm",
-                              onClick: () => b("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: R.map((g) => /* @__PURE__ */ s("li", { "data-review-id": g.id, children: /* @__PURE__ */ s(le, { review: g, locale: v }) }, g.id))
-                    }
-                  )
-                ] })
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-oe.displayName = "ReviewsPanel";
-export {
-  oe as R,
-  te as r
-};
-//# sourceMappingURL=reviews-panel-Dq7LMDcH.js.map