@mangtre/ui 0.1.0

package/dist/chunk-BLYAFV45.js

@@ -0,0 +1,320 @@
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/charts/chart-utils.ts
+function axisMax(values) {
+  return Math.max(1, ...values.map((v) => Number.isFinite(v) ? v : 0));
+}
+function linePoints(values, w, h, pad = 2) {
+  if (values.length === 0) return "";
+  const max = axisMax(values);
+  const span = values.length > 1 ? values.length - 1 : 1;
+  return values.map((v, i) => {
+    const x = pad + i / span * (w - pad * 2);
+    const y = h - pad - Math.max(0, v) / max * (h - pad * 2);
+    return `${round(x)},${round(y)}`;
+  }).join(" ");
+}
+function barFractions(values) {
+  const max = axisMax(values);
+  return values.map((v) => Math.max(0, Math.min(1, (Number.isFinite(v) ? v : 0) / max)));
+}
+function pieSegments(values) {
+  const total = values.reduce((s, v) => s + Math.max(0, v), 0);
+  if (total <= 0) return [];
+  let acc = 0;
+  return values.map((v) => {
+    const frac = Math.max(0, v) / total;
+    const seg = { start: acc, end: acc + frac, frac };
+    acc += frac;
+    return seg;
+  });
+}
+function round(n) {
+  return Math.round(n * 100) / 100;
+}
+
+// src/charts/Charts.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-charts";
+var { color, semantic, font, fontSize, fontWeight, radius } = tokens;
+var SERIES = [
+  color.mangGreen,
+  color.sun,
+  color.soil,
+  semantic.state.info,
+  color.shoot,
+  color.bamboo
+];
+var seriesColor = (i) => SERIES[i % SERIES.length];
+var CSS = (
+  /* css */
+  `
+.mang-stat { display: grid; gap: 0.15rem; }
+.mang-stat-label { font-size: ${fontSize.xs}; color: var(--m-text-muted); font-weight: ${fontWeight.semibold}; text-transform: uppercase; letter-spacing: 0.08em; }
+.mang-stat-value { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; font-size: ${fontSize["2xl"]}; color: var(--m-text-strong); font-variant-numeric: tabular-nums; line-height: 1.1; }
+.mang-stat-delta { font-size: ${fontSize.xs}; font-weight: ${fontWeight.bold}; }
+.mang-stat-delta[data-dir="up"] { color: var(--m-success); }
+.mang-stat-delta[data-dir="down"] { color: var(--m-danger); }
+.mang-statgroup { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 1rem; }
+.mang-chart { display: block; width: 100%; height: auto; overflow: visible; }
+.mang-chart-bars { display: flex; align-items: flex-end; gap: 0.3rem; height: 100%; }
+.mang-chart-bar { flex: 1; border-radius: ${radius.sm} ${radius.sm} 0 0; background: var(--m-accent); min-height: 2px; transition: height 240ms var(--m-ease, cubic-bezier(0.16,1,0.3,1)); }
+.mang-barchart { height: 8rem; }
+.mang-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
+.mang-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; font-size: ${fontSize.sm}; color: var(--m-text); }
+.mang-legend-dot { width: 0.7rem; height: 0.7rem; border-radius: 3px; flex: none; }
+.mang-heatmap { display: grid; gap: 3px; grid-auto-flow: column; grid-template-rows: repeat(7, 0.85rem); }
+.mang-heatmap-cell { width: 0.85rem; height: 0.85rem; border-radius: 2px; background: var(--m-sunken); }
+@media (prefers-reduced-motion: reduce) { .mang-chart-bar { transition: none; } }
+`
+);
+function Stat({ label, value, delta, direction, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-stat", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "mang-stat-label", children: label }),
+    /* @__PURE__ */ jsx("span", { className: "mang-stat-value", children: value }),
+    delta != null && /* @__PURE__ */ jsx("span", { className: "mang-stat-delta", "data-dir": direction, children: delta })
+  ] });
+}
+function StatGroup({ children, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx("div", { ...scope, className: cx(scope.className, "mang-statgroup", className), children });
+}
+function Sparkline({
+  values,
+  width = 120,
+  height = 32,
+  colorIndex = 0,
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-chart", className),
+      viewBox: `0 0 ${width} ${height}`,
+      role: "img",
+      "aria-label": "sparkline",
+      preserveAspectRatio: "none",
+      children: /* @__PURE__ */ jsx(
+        "polyline",
+        {
+          points: linePoints(values, width, height, 2),
+          fill: "none",
+          stroke: seriesColor(colorIndex),
+          strokeWidth: 2,
+          strokeLinejoin: "round",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+function BarChart({ values, labels, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const fr = barFractions(values);
+  return /* @__PURE__ */ jsx("div", { ...scope, className: cx(scope.className, "mang-barchart", className), children: /* @__PURE__ */ jsx("div", { className: "mang-chart-bars", children: fr.map((f, i) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mang-chart-bar",
+      style: { height: `${Math.max(2, f * 100)}%` },
+      title: labels?.[i]
+    },
+    i
+  )) }) });
+}
+function LineChart({
+  values,
+  width = 280,
+  height = 120,
+  colorIndex = 0,
+  area,
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const pts = linePoints(values, width, height, 4);
+  const c = seriesColor(colorIndex);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-chart", className),
+      viewBox: `0 0 ${width} ${height}`,
+      role: "img",
+      "aria-label": "line chart",
+      children: [
+        area && pts && /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `${pts} ${width - 4},${height - 4} 4,${height - 4}`,
+            fill: c,
+            opacity: 0.16
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polyline",
+          {
+            points: pts,
+            fill: "none",
+            stroke: c,
+            strokeWidth: 2.5,
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function AreaChart(props) {
+  return /* @__PURE__ */ jsx(LineChart, { ...props, area: true });
+}
+function DonutChart({
+  values,
+  size = 120,
+  thickness = 16,
+  center,
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const r = (size - thickness) / 2;
+  const c = 2 * Math.PI * r;
+  const segs = pieSegments(values);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...scope,
+      className: cx(scope.className, className),
+      style: { position: "relative", width: size, height: size },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            viewBox: `0 0 ${size} ${size}`,
+            width: size,
+            height: size,
+            role: "img",
+            "aria-label": "donut chart",
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r,
+                  fill: "none",
+                  stroke: "var(--m-sunken)",
+                  strokeWidth: thickness
+                }
+              ),
+              segs.map((s, i) => /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx: size / 2,
+                  cy: size / 2,
+                  r,
+                  fill: "none",
+                  stroke: seriesColor(i),
+                  strokeWidth: thickness,
+                  strokeDasharray: `${s.frac * c} ${c}`,
+                  strokeDashoffset: -s.start * c,
+                  transform: `rotate(-90 ${size / 2} ${size / 2})`
+                },
+                i
+              ))
+            ]
+          }
+        ),
+        center != null && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              display: "grid",
+              placeItems: "center",
+              textAlign: "center"
+            },
+            children: center
+          }
+        )
+      ]
+    }
+  );
+}
+function Heatmap({ values, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-heatmap", className),
+      role: "img",
+      "aria-label": "activity heatmap",
+      children: values.map((v, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "mang-heatmap-cell",
+          style: v > 0 ? { background: color.mangGreen, opacity: 0.25 + Math.min(1, v) * 0.75 } : void 0
+        },
+        i
+      ))
+    }
+  );
+}
+function Legend({ items, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsx("div", { ...scope, className: cx(scope.className, "mang-legend", className), children: items.map((it, i) => /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "mang-legend-item",
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "mang-legend-dot",
+            style: { background: seriesColor(it.colorIndex ?? i) }
+          }
+        ),
+        it.label
+      ]
+    },
+    i
+  )) });
+}
+
+export {
+  axisMax,
+  linePoints,
+  barFractions,
+  pieSegments,
+  SERIES,
+  Stat,
+  StatGroup,
+  Sparkline,
+  BarChart,
+  LineChart,
+  AreaChart,
+  DonutChart,
+  Heatmap,
+  Legend
+};

package/dist/chunk-DLKEXWPA.js

@@ -0,0 +1,90 @@
+import {
+  Button
+} from "./chunk-YN5O6YL6.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/handoff/Handoff.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-handoff";
+var { fontSize, fontWeight, radius, font } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-handoff { display: grid; gap: 0.7rem; justify-items: center; text-align: center; padding: 1rem 1.1rem; border: 1px solid var(--m-line); border-radius: ${radius.lg}; background: var(--m-surface); color: var(--m-text); }
+.mang-handoff-title { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; color: var(--m-text-strong); font-size: ${fontSize.base}; }
+.mang-handoff-qr { padding: 0.6rem; background: #fff; border-radius: ${radius.md}; line-height: 0; }
+.mang-handoff-note { font-size: ${fontSize.sm}; color: var(--m-text-muted); max-width: 22rem; }
+.mang-handoff-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: ${fontSize.sm}; font-weight: ${fontWeight.semibold}; }
+.mang-handoff-status[data-on="true"] { color: var(--m-success); }
+.mang-handoff-status[data-on="false"] { color: var(--m-text-muted); }
+.mang-handoff-banner { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: ${radius.md}; border: 1px solid var(--m-line); border-left: 4px solid var(--m-accent); background: var(--m-accent-soft); color: var(--m-text); }
+.mang-handoff-banner-msg { flex: 1; font-size: ${fontSize.sm}; }
+.mang-handoff-banner-msg b { color: var(--m-text-strong); }
+`
+);
+function HandoffConnectionStatus({
+  connected,
+  device,
+  locale = "vi"
+}) {
+  const label = connected ? locale === "vi" ? `\u{1F4F1} ${device ?? "Thi\u1EBFt b\u1ECB"} \u0111\xE3 k\u1EBFt n\u1ED1i` : `\u{1F4F1} ${device ?? "Device"} connected` : locale === "vi" ? "Ch\u01B0a k\u1EBFt n\u1ED1i" : "Not connected";
+  return /* @__PURE__ */ jsx("span", { className: "mang-handoff-status", "data-on": connected ? "true" : "false", children: label });
+}
+function HandoffPairingPanel({
+  qr,
+  connected = false,
+  device,
+  title,
+  note,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("div", { ...scope, className: cx(scope.className, "mang-handoff", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "mang-handoff-title", children: title ?? (locale === "vi" ? "Qu\xE9t \u0111\u1EC3 g\u1EEDi t\u1EEB \u0111i\u1EC7n tho\u1EA1i" : "Scan to send from your phone") }),
+    qr != null && /* @__PURE__ */ jsx("div", { className: "mang-handoff-qr", children: qr }),
+    /* @__PURE__ */ jsx(HandoffConnectionStatus, { connected, device, locale }),
+    note != null && /* @__PURE__ */ jsx("span", { className: "mang-handoff-note", children: note })
+  ] });
+}
+function HandoffPayloadBanner({
+  kind,
+  device,
+  onPaste,
+  onDismiss,
+  locale = "vi",
+  theme,
+  className
+}) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  const live = { role: "status" };
+  return /* @__PURE__ */ jsxs("div", { ...scope, ...live, className: cx(scope.className, "mang-handoff-banner", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "mang-handoff-banner-msg", children: locale === "vi" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Nh\u1EADn ",
+      /* @__PURE__ */ jsx("b", { children: kind }),
+      device ? ` t\u1EEB ${device}` : ""
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      "Got ",
+      /* @__PURE__ */ jsx("b", { children: kind }),
+      device ? ` from ${device}` : ""
+    ] }) }),
+    /* @__PURE__ */ jsx(Button, { size: "sm", theme, onClick: onPaste, children: locale === "vi" ? "D\xE1n" : "Paste" }),
+    onDismiss && /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", theme, onClick: onDismiss, children: "\u2715" })
+  ] });
+}
+
+export {
+  HandoffConnectionStatus,
+  HandoffPairingPanel,
+  HandoffPayloadBanner
+};

package/dist/chunk-DTASXPTB.js

@@ -0,0 +1,70 @@
+import {
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+
+// src/overlay/Toast.tsx
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function toastReducer(state, action) {
+  switch (action.type) {
+    case "add":
+      return [...state, action.toast].slice(-4);
+    case "dismiss":
+      return state.filter((t) => t.id !== action.id);
+    default:
+      return state;
+  }
+}
+var Ctx = createContext(null);
+var nextId = 1;
+function ToastProvider({ theme, children }) {
+  const [items, dispatch] = useReducer(toastReducer, []);
+  const dismiss = useCallback((id) => dispatch({ type: "dismiss", id }), []);
+  const toast = useCallback((input) => {
+    const id = nextId++;
+    dispatch({ type: "add", toast: { id, ...input } });
+    return id;
+  }, []);
+  const api = useMemo(() => ({ toast, dismiss }), [toast, dismiss]);
+  return /* @__PURE__ */ jsxs(Ctx.Provider, { value: api, children: [
+    children,
+    /* @__PURE__ */ jsx(ToastViewport, { items, onDismiss: dismiss, theme })
+  ] });
+}
+function useToast() {
+  const c = useContext(Ctx);
+  if (!c) throw new Error("useToast must be used inside <ToastProvider>");
+  return c;
+}
+function ToastView({ item, onDismiss }) {
+  useEffect(() => {
+    const ms = item.duration ?? 4e3;
+    if (ms <= 0) return;
+    const t = setTimeout(() => onDismiss(item.id), ms);
+    return () => clearTimeout(t);
+  }, [item, onDismiss]);
+  const live = { role: "status" };
+  return /* @__PURE__ */ jsx("div", { className: "mang-toast", "data-tone": item.tone ?? "default", ...live, children: /* @__PURE__ */ jsx("span", { className: "mang-toast-msg", children: item.message }) });
+}
+function ToastViewport({ items, onDismiss, theme }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { ...scope, className: cx(scope.className, "mang-toast-viewport"), "aria-live": "polite", children: items.map((item) => /* @__PURE__ */ jsx(ToastView, { item, onDismiss }, item.id)) });
+}
+
+export {
+  toastReducer,
+  ToastProvider,
+  useToast,
+  ToastViewport
+};

package/dist/chunk-FZRXVRC7.js

@@ -0,0 +1,63 @@
+import {
+  cx,
+  useKitStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+
+// src/platform/Badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Badge({ tone = "accent", icon, theme, className, children }) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("span", { ...scope, className: cx(scope.className, "mang-badge", className), "data-tone": tone, children: [
+    icon != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { display: "inline-flex" }, children: icon }),
+    children
+  ] });
+}
+function VerifiedBadge({
+  label = "M\u0103ng Verified",
+  compact = false,
+  title,
+  theme,
+  className
+}) {
+  useKitStyles();
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-badge", "mang-verified", className),
+      title: title ?? label,
+      children: [
+        /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9 12l2 2 4-4M12 3l2.3 1.7 2.8-.2 1 2.7 2.3 1.6-.8 2.7.8 2.7-2.3 1.6-1 2.7-2.8-.2L12 21l-2.3-1.7-2.8.2-1-2.7L3.6 15.4l.8-2.7-.8-2.7 2.3-1.6 1-2.7 2.8.2z",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ) }),
+        compact ? /* @__PURE__ */ jsx("span", { style: srOnly, children: label }) : /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+var srOnly = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+export {
+  Badge,
+  VerifiedBadge
+};

package/dist/chunk-ID233AGM.js

@@ -0,0 +1,108 @@
+import {
+  Switch
+} from "./chunk-PQGUWJG4.js";
+import {
+  cx,
+  useAreaStyles,
+  useScope
+} from "./chunk-3AL4SUFD.js";
+import {
+  tokens
+} from "./chunk-PPOYMKV3.js";
+
+// src/analytics/Analytics.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var STYLE_ID = "mang-ui-analytics";
+var { fontSize, fontWeight, radius, font } = tokens;
+var CSS = (
+  /* css */
+  `
+.mang-gate-badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: ${radius.full}; font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.bold}; font-size: ${fontSize.xs}; }
+.mang-gate-badge[data-met="true"] { background: var(--m-success-soft); color: var(--m-success-on); }
+.mang-gate-badge[data-met="false"] { background: var(--m-sunken); color: var(--m-text-muted); }
+.mang-atable { width: 100%; border-collapse: collapse; font-size: ${fontSize.sm}; }
+.mang-atable th, .mang-atable td { text-align: left; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--m-line); }
+.mang-atable th { font-family: "${font.heading}", system-ui, sans-serif; font-weight: ${fontWeight.semibold}; color: var(--m-text-muted); font-size: ${fontSize.xs}; text-transform: uppercase; letter-spacing: 0.06em; }
+.mang-atable td { color: var(--m-text); font-variant-numeric: tabular-nums; }
+.mang-atable td b { color: var(--m-text-strong); }
+.mang-atable code { font-size: ${fontSize.xs}; color: var(--m-text-muted); }
+`
+);
+function AnalyticsConsentToggle({
+  enabled,
+  onChange,
+  locale = "vi",
+  theme,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    Switch,
+    {
+      theme,
+      className,
+      checked: enabled,
+      onChange: (e) => onChange(e.target.checked),
+      label: locale === "vi" ? "G\u1EEDi th\u1ED1ng k\xEA \u1EA9n danh \u0111\u1EC3 c\u1EA3i thi\u1EC7n M\u0103ng" : "Send anonymous usage stats to improve M\u0103ng"
+    }
+  );
+}
+function GateMetBadge({ met, locale = "vi", theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...scope,
+      className: cx(scope.className, "mang-gate-badge", className),
+      "data-met": met ? "true" : "false",
+      children: [
+        met ? "\u2705" : "\u2B1C",
+        " ",
+        met ? locale === "vi" ? "\u0110\u1EA1t c\u1ED5ng" : "Gate met" : locale === "vi" ? "Ch\u01B0a \u0111\u1EA1t" : "Not met"
+      ]
+    }
+  );
+}
+function GateReport({ rows, locale = "vi", theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("table", { ...scope, className: cx(scope.className, "mang-atable", className), children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: locale === "vi" ? "App" : "App" }),
+      /* @__PURE__ */ jsx("th", { children: locale === "vi" ? "Thi\u1EBFt b\u1ECB" : "Devices" }),
+      /* @__PURE__ */ jsx("th", { children: locale === "vi" ? "Quay l\u1EA1i" : "Returning" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((r) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("b", { children: r.app }) }),
+      /* @__PURE__ */ jsx("td", { children: r.devices }),
+      /* @__PURE__ */ jsx("td", { children: r.returning })
+    ] }, r.app)) })
+  ] });
+}
+function EventLogTable({ events, theme, className }) {
+  useAreaStyles(STYLE_ID, CSS);
+  const scope = useScope(theme);
+  return /* @__PURE__ */ jsxs("table", { ...scope, className: cx(scope.className, "mang-atable", className), children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { children: "event" }),
+      /* @__PURE__ */ jsx("th", { children: "props" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: events.map((e, i) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        children: [
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("b", { children: e.name }) }),
+          /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("code", { children: e.props ? JSON.stringify(e.props) : "\u2014" }) })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+
+export {
+  AnalyticsConsentToggle,
+  GateMetBadge,
+  GateReport,
+  EventLogTable
+};