@trinityui/design-system 2.11.1 → 2.13.1

package/dist/data.js

@@ -1,39 +1,40 @@
-import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import * as M from "react";
-import { useTheme as O, Card as L, CardContent as A, Box as r, Skeleton as T, Typography as c, Tooltip as D, IconButton as F } from "@mui/material";
-import { InfoOutlined as G, MoreVert as U, TrendingFlat as Y, TrendingDown as q, TrendingUp as E } from "@mui/icons-material";
-import { s as p } from "./app-shell.js";
-const H = ({ data: a, color: s, height: o = 40 }) => {
-  if (!a || a.length < 2) return null;
-  const x = Math.min(...a), u = Math.max(...a) - x || 1, m = 100, l = a.map((y, b) => {
-    const S = b / (a.length - 1) * m, i = o - (y - x) / u * o;
-    return `${S},${i}`;
-  }).join(" "), g = `0,${o} ${l} ${m},${o}`;
-  return /* @__PURE__ */ n("svg", { width: "100%", height: o, viewBox: `0 0 ${m} ${o}`, preserveAspectRatio: "none", children: [
-    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n("linearGradient", { id: `sparkline-gradient-${s}`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
-      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: s, stopOpacity: 0.3 }),
-      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: s, stopOpacity: 0 })
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import * as I from "react";
+import { useTheme as F, Card as G, ButtonBase as J, CardContent as K, Box as i, Skeleton as R, Typography as c, Tooltip as W, IconButton as L } from "@mui/material";
+import { InfoOutlined as U, MoreVert as Y, TrendingFlat as q, TrendingDown as E, TrendingUp as H } from "@mui/icons-material";
+import { s as p, K as N, I as Q, J as X } from "./foundation.js";
+const Z = ({ data: s, color: x, height: o = 40 }) => {
+  const h = `sparkline-gradient-${I.useId()}`;
+  if (!s || s.length < 2) return null;
+  const l = Math.min(...s), w = Math.max(...s) - l || 1, a = 100, m = s.map((S, b) => {
+    const r = b / (s.length - 1) * a, v = o - (S - l) / w * o;
+    return `${r},${v}`;
+  }).join(" "), y = `0,${o} ${m} ${a},${o}`;
+  return /* @__PURE__ */ n("svg", { width: "100%", height: o, viewBox: `0 0 ${a} ${o}`, preserveAspectRatio: "none", children: [
+    /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ n("linearGradient", { id: h, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
+      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: x, stopOpacity: 0.3 }),
+      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: x, stopOpacity: 0 })
     ] }) }),
     /* @__PURE__ */ e(
       "polygon",
       {
-        points: g,
-        fill: `url(#sparkline-gradient-${s})`
+        points: y,
+        fill: `url(#${h})`
       }
     ),
     /* @__PURE__ */ e(
       "polyline",
       {
-        points: l,
+        points: m,
         fill: "none",
-        stroke: s,
+        stroke: x,
         strokeWidth: 2,
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
     )
   ] });
-}, J = {
+}, _ = {
   small: {
     padding: p.density.standard.cellPadding,
     titleSize: "caption",
@@ -53,29 +54,30 @@ const H = ({ data: a, color: s, height: o = 40 }) => {
     valueSize: "h3",
     iconSize: 48
   }
-}, _ = M.forwardRef(function({
-  title: s,
+}, ie = /* @__PURE__ */ I.forwardRef(function({
+  title: x,
   value: o,
-  unit: x,
-  trend: h,
-  trendValue: u,
-  trendLabel: m = "vs last period",
-  sparklineData: l,
-  subtitle: g,
+  unit: h,
+  trend: l,
+  trendValue: g,
+  trendLabel: w = "vs last period",
+  sparklineData: a,
+  subtitle: m,
   icon: y,
-  iconColor: b = "primary",
-  comparison: S,
-  loading: i = !1,
-  infoTooltip: z,
+  iconColor: S = "primary",
+  comparison: b,
+  loading: r = !1,
+  infoTooltip: v,
   onMoreClick: $,
-  onClick: w,
-  footer: k,
-  size: v = "medium",
-  variant: C = "default",
-  fullHeight: j = !1
-}, W) {
-  const t = O(), f = J[v], I = () => {
-    switch (h) {
+  moreActionsLabel: C = "More actions",
+  onClick: u,
+  footer: T,
+  size: z = "medium",
+  variant: k = "default",
+  fullHeight: M = !1
+}, P) {
+  const t = F(), f = _[z], j = I.useId(), B = () => {
+    switch (l) {
       case "up":
         return t.palette.success.main;
       case "down":
@@ -83,16 +85,16 @@ const H = ({ data: a, color: s, height: o = 40 }) => {
       default:
         return t.palette.text.secondary;
     }
-  }, P = () => {
-    switch (h) {
+  }, O = () => {
+    switch (l) {
       case "up":
-        return /* @__PURE__ */ e(E, { sx: { fontSize: 18 } });
+        return /* @__PURE__ */ e(H, { sx: { fontSize: 18 } });
       case "down":
-        return /* @__PURE__ */ e(q, { sx: { fontSize: 18 } });
+        return /* @__PURE__ */ e(E, { sx: { fontSize: 18 } });
       default:
-        return /* @__PURE__ */ e(Y, { sx: { fontSize: 18 } });
+        return /* @__PURE__ */ e(q, { sx: { fontSize: 18 } });
     }
-  }, R = () => {
+  }, A = () => {
     const d = t.palette.trinity?.status;
     return {
       primary: t.palette.action.selected,
@@ -102,8 +104,8 @@ const H = ({ data: a, color: s, height: o = 40 }) => {
       warning: d?.warning?.background || t.palette.action.selected,
       error: d?.error?.background || t.palette.action.selected,
       info: d?.info?.background || t.palette.action.selected
-    }[b] || t.palette.action.selected;
-  }, B = {
+    }[S] || t.palette.action.selected;
+  }, D = {
     default: {},
     outlined: {
       border: `1px solid ${t.palette.divider}`,
@@ -115,163 +117,180 @@ const H = ({ data: a, color: s, height: o = 40 }) => {
       boxShadow: "none"
     }
   };
-  return /* @__PURE__ */ e(
-    L,
+  return /* @__PURE__ */ n(
+    G,
     {
-      ref: W,
-      elevation: C === "default" ? 1 : 0,
-      onClick: w,
-      sx: {
-        borderRadius: p.borders.radiusPx.lg,
-        // 12px to match AI StatCard
-        height: j ? "100%" : "auto",
-        cursor: w ? "pointer" : "default",
-        transition: `all ${p.motion.duration.fast} ${p.motion.easing.default}`,
-        "&:hover": w ? {
-          boxShadow: t.shadows[4],
-          transform: "translateY(-2px)"
-        } : {},
-        ...B[C]
-      },
-      children: /* @__PURE__ */ n(A, { sx: { p: `${f.padding}px !important` }, children: [
-        /* @__PURE__ */ n(
-          r,
+      ref: P,
+      elevation: k === "default" ? 1 : 0,
+      sx: [
+        {
+          borderRadius: p.borders.radiusPx.lg,
+          // 12px to match AI StatCard
+          height: M ? "100%" : "auto",
+          cursor: u ? "pointer" : "default",
+          transition: `all ${p.motion.duration.fast} ${p.motion.easing.default}`,
+          "&:hover": u ? {
+            boxShadow: t.shadows[4],
+            transform: "translateY(-2px)"
+          } : {},
+          ...D[k]
+        },
+        // B-24: the primary-action overlay (B-13) instead of onClick on the Card.
+        u ? N : null
+      ],
+      children: [
+        u && /* @__PURE__ */ e(
+          J,
           {
-            sx: {
-              display: "flex",
-              alignItems: "flex-start",
-              justifyContent: "space-between",
-              mb: 2
-            },
-            children: [
-              /* @__PURE__ */ n(r, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
-                y && /* @__PURE__ */ e(
-                  r,
+            disableRipple: !0,
+            onClick: u,
+            "aria-labelledby": r ? void 0 : j,
+            "aria-label": r ? x : void 0,
+            sx: Q
+          }
+        ),
+        /* @__PURE__ */ n(K, { sx: [{ p: `${f.padding}px !important` }, u ? X : null], children: [
+          /* @__PURE__ */ n(
+            i,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "space-between",
+                mb: 2
+              },
+              children: [
+                /* @__PURE__ */ n(i, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+                  y && /* @__PURE__ */ e(
+                    i,
+                    {
+                      sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: f.iconSize,
+                        height: f.iconSize,
+                        borderRadius: `${p.borders.radius.iconContainer}px`,
+                        backgroundColor: A(),
+                        color: t.palette[S].main
+                      },
+                      children: y
+                    }
+                  ),
+                  /* @__PURE__ */ n(i, { children: [
+                    /* @__PURE__ */ n(i, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
+                      r ? /* @__PURE__ */ e(R, { width: 80, height: 20 }) : /* @__PURE__ */ e(
+                        c,
+                        {
+                          id: j,
+                          variant: f.titleSize,
+                          color: "textSecondary",
+                          sx: { fontWeight: 500 },
+                          children: x
+                        }
+                      ),
+                      v && /* @__PURE__ */ e(W, { title: v, arrow: !0, children: /* @__PURE__ */ e(
+                        U,
+                        {
+                          sx: {
+                            fontSize: 14,
+                            color: t.palette.text.disabled,
+                            cursor: "help"
+                          }
+                        }
+                      ) })
+                    ] }),
+                    m && !r && /* @__PURE__ */ e(c, { variant: "caption", color: "textSecondary", children: m })
+                  ] })
+                ] }),
+                $ && /* @__PURE__ */ e(W, { title: C, children: /* @__PURE__ */ e(
+                  L,
+                  {
+                    size: "small",
+                    "aria-label": C,
+                    onClick: (d) => {
+                      d.stopPropagation(), $(d);
+                    },
+                    sx: { mr: -1, mt: -0.5 },
+                    children: /* @__PURE__ */ e(Y, { fontSize: "small" })
+                  }
+                ) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(i, { sx: { mb: a ? 2 : l ? 1 : 0 }, children: r ? /* @__PURE__ */ e(R, { width: 120, height: 40 }) : /* @__PURE__ */ n(
+            c,
+            {
+              variant: f.valueSize,
+              sx: {
+                display: "flex",
+                alignItems: "baseline",
+                gap: 0.5,
+                fontWeight: 700
+              },
+              children: [
+                o,
+                h && /* @__PURE__ */ e(
+                  c,
+                  {
+                    component: "span",
+                    variant: "body2",
+                    color: "textSecondary",
+                    sx: { fontWeight: 400 },
+                    children: h
+                  }
+                )
+              ]
+            }
+          ) }),
+          a && a.length > 1 && !r && /* @__PURE__ */ e(i, { sx: { mb: 2, mx: -1 }, children: /* @__PURE__ */ e(
+            Z,
+            {
+              data: a,
+              color: B(),
+              height: z === "small" ? 30 : z === "large" ? 50 : 40
+            }
+          ) }),
+          l && !r && /* @__PURE__ */ n(
+            i,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 1,
+                flexWrap: "wrap"
+              },
+              children: [
+                /* @__PURE__ */ n(
+                  i,
                   {
                     sx: {
                       display: "flex",
                       alignItems: "center",
-                      justifyContent: "center",
-                      width: f.iconSize,
-                      height: f.iconSize,
-                      borderRadius: `${p.borders.radius.iconContainer}px`,
-                      backgroundColor: R(),
-                      color: t.palette[b].main
+                      gap: 0.5,
+                      color: B()
                     },
-                    children: y
+                    children: [
+                      O(),
+                      g !== void 0 && /* @__PURE__ */ n(c, { variant: "body2", sx: { fontWeight: 600 }, children: [
+                        g > 0 ? "+" : "",
+                        g,
+                        "%"
+                      ] })
+                    ]
                   }
                 ),
-                /* @__PURE__ */ n(r, { children: [
-                  /* @__PURE__ */ n(r, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                    i ? /* @__PURE__ */ e(T, { width: 80, height: 20 }) : /* @__PURE__ */ e(
-                      c,
-                      {
-                        variant: f.titleSize,
-                        color: "text.secondary",
-                        sx: { fontWeight: 500 },
-                        children: s
-                      }
-                    ),
-                    z && /* @__PURE__ */ e(D, { title: z, arrow: !0, children: /* @__PURE__ */ e(
-                      G,
-                      {
-                        sx: {
-                          fontSize: 14,
-                          color: t.palette.text.disabled,
-                          cursor: "help"
-                        }
-                      }
-                    ) })
-                  ] }),
-                  g && !i && /* @__PURE__ */ e(c, { variant: "caption", color: "text.secondary", children: g })
-                ] })
-              ] }),
-              $ && /* @__PURE__ */ e(
-                F,
-                {
-                  size: "small",
-                  onClick: (d) => {
-                    d.stopPropagation(), $(d);
-                  },
-                  sx: { mr: -1, mt: -0.5 },
-                  children: /* @__PURE__ */ e(U, { fontSize: "small" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ e(r, { sx: { mb: l ? 2 : h ? 1 : 0 }, children: i ? /* @__PURE__ */ e(T, { width: 120, height: 40 }) : /* @__PURE__ */ n(
-          c,
-          {
-            variant: f.valueSize,
-            sx: {
-              display: "flex",
-              alignItems: "baseline",
-              gap: 0.5,
-              fontWeight: 700
-            },
-            children: [
-              o,
-              x && /* @__PURE__ */ e(
-                c,
-                {
-                  component: "span",
-                  variant: "body2",
-                  color: "text.secondary",
-                  sx: { fontWeight: 400 },
-                  children: x
-                }
-              )
-            ]
-          }
-        ) }),
-        l && l.length > 1 && !i && /* @__PURE__ */ e(r, { sx: { mb: 2, mx: -1 }, children: /* @__PURE__ */ e(
-          H,
-          {
-            data: l,
-            color: I(),
-            height: v === "small" ? 30 : v === "large" ? 50 : 40
-          }
-        ) }),
-        h && !i && /* @__PURE__ */ n(
-          r,
-          {
-            sx: {
-              display: "flex",
-              alignItems: "center",
-              gap: 1,
-              flexWrap: "wrap"
-            },
-            children: [
-              /* @__PURE__ */ n(
-                r,
-                {
-                  sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 0.5,
-                    color: I()
-                  },
-                  children: [
-                    P(),
-                    u !== void 0 && /* @__PURE__ */ n(c, { variant: "body2", sx: { fontWeight: 600 }, children: [
-                      u > 0 ? "+" : "",
-                      u,
-                      "%"
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ e(c, { variant: "caption", color: "text.secondary", children: m })
-            ]
-          }
-        ),
-        S && !i && /* @__PURE__ */ e(c, { variant: "caption", color: "text.secondary", sx: { mt: 1, display: "block" }, children: S }),
-        k && /* @__PURE__ */ e(r, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${t.palette.divider}` }, children: k })
-      ] })
+                /* @__PURE__ */ e(c, { variant: "caption", color: "textSecondary", children: w })
+              ]
+            }
+          ),
+          b && !r && /* @__PURE__ */ e(c, { variant: "caption", color: "textSecondary", sx: { mt: 1, display: "block" }, children: b }),
+          T && /* @__PURE__ */ e(i, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${t.palette.divider}` }, children: T })
+        ] })
+      ]
     }
   );
 });
 export {
-  _ as D
+  ie as D
 };