@trinityui/design-system 2.1.4 → 2.2.3

package/dist/data.js

@@ -1,80 +1,81 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
-import { useTheme as B, Card as M, CardContent as O, Box as i, Skeleton as C, Typography as p, Tooltip as R, IconButton as L } from "@mui/material";
-import { InfoOutlined as A, MoreVert as F, TrendingFlat as G, TrendingDown as U, TrendingUp as Y } from "@mui/icons-material";
-import { s as x } from "./app-shell.js";
-const q = ({ data: r, color: l, height: o = 40 }) => {
-  if (!r || r.length < 2) return null;
-  const d = Math.min(...r), S = Math.max(...r) - d || 1, a = 100, h = r.map((g, y) => {
-    const s = y / (r.length - 1) * a, b = o - (g - d) / S * o;
-    return `${s},${b}`;
-  }).join(" "), f = `0,${o} ${h} ${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: `sparkline-gradient-${l}`, x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [
-      /* @__PURE__ */ e("stop", { offset: "0%", stopColor: l, stopOpacity: 0.3 }),
-      /* @__PURE__ */ e("stop", { offset: "100%", stopColor: l, stopOpacity: 0 })
+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 })
     ] }) }),
     /* @__PURE__ */ e(
       "polygon",
       {
-        points: f,
-        fill: `url(#sparkline-gradient-${l})`
+        points: g,
+        fill: `url(#sparkline-gradient-${s})`
       }
     ),
     /* @__PURE__ */ e(
       "polyline",
       {
-        points: h,
+        points: l,
         fill: "none",
-        stroke: l,
+        stroke: s,
         strokeWidth: 2,
         strokeLinecap: "round",
         strokeLinejoin: "round"
       }
     )
   ] });
-}, D = {
+}, J = {
   small: {
-    padding: x.density.standard.cellPadding,
+    padding: p.density.standard.cellPadding,
     titleSize: "caption",
     valueSize: "h5",
     iconSize: 32
   },
   medium: {
-    padding: x.density.comfortable.cellPadding,
+    padding: p.density.comfortable.cellPadding,
     titleSize: "body2",
     valueSize: "h4",
     iconSize: 40
   },
   large: {
-    padding: x.inline.relaxed,
+    padding: p.inline.relaxed,
     // 20px - relaxed breathing room
     titleSize: "body1",
     valueSize: "h3",
     iconSize: 48
   }
-}, Q = ({
-  title: r,
-  value: l,
-  unit: o,
-  trend: d,
-  trendValue: m,
-  trendLabel: S = "vs last period",
-  sparklineData: a,
-  subtitle: h,
-  icon: f,
-  iconColor: g = "primary",
-  comparison: y,
-  loading: s = !1,
-  infoTooltip: b,
-  onMoreClick: z,
-  onClick: v,
-  footer: $,
-  size: w = "medium",
-  variant: k = "default",
-  fullHeight: T = !1
-}) => {
-  const t = B(), u = D[w], I = () => {
-    switch (d) {
+}, _ = M.forwardRef(function({
+  title: s,
+  value: o,
+  unit: x,
+  trend: h,
+  trendValue: u,
+  trendLabel: m = "vs last period",
+  sparklineData: l,
+  subtitle: g,
+  icon: y,
+  iconColor: b = "primary",
+  comparison: S,
+  loading: i = !1,
+  infoTooltip: z,
+  onMoreClick: $,
+  onClick: w,
+  footer: k,
+  size: v = "medium",
+  variant: C = "default",
+  fullHeight: j = !1
+}, W) {
+  const t = O(), f = J[v], I = () => {
+    switch (h) {
       case "up":
         return t.palette.success.main;
       case "down":
@@ -82,27 +83,27 @@ const q = ({ data: r, color: l, height: o = 40 }) => {
       default:
         return t.palette.text.secondary;
     }
-  }, j = () => {
-    switch (d) {
+  }, P = () => {
+    switch (h) {
       case "up":
-        return /* @__PURE__ */ e(Y, { sx: { fontSize: 18 } });
+        return /* @__PURE__ */ e(E, { sx: { fontSize: 18 } });
       case "down":
-        return /* @__PURE__ */ e(U, { sx: { fontSize: 18 } });
+        return /* @__PURE__ */ e(q, { sx: { fontSize: 18 } });
       default:
-        return /* @__PURE__ */ e(G, { sx: { fontSize: 18 } });
+        return /* @__PURE__ */ e(Y, { sx: { fontSize: 18 } });
     }
-  }, W = () => {
-    const c = t.palette.trinity?.status;
+  }, R = () => {
+    const d = t.palette.trinity?.status;
     return {
       primary: t.palette.action.selected,
       // Theme-aware 12%
       secondary: t.palette.action.selected,
-      success: c?.success?.background || t.palette.action.selected,
-      warning: c?.warning?.background || t.palette.action.selected,
-      error: c?.error?.background || t.palette.action.selected,
-      info: c?.info?.background || t.palette.action.selected
-    }[g] || t.palette.action.selected;
-  }, P = {
+      success: d?.success?.background || t.palette.action.selected,
+      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 = {
     default: {},
     outlined: {
       border: `1px solid ${t.palette.divider}`,
@@ -115,25 +116,26 @@ const q = ({ data: r, color: l, height: o = 40 }) => {
     }
   };
   return /* @__PURE__ */ e(
-    M,
+    L,
     {
-      elevation: k === "default" ? 1 : 0,
-      onClick: v,
+      ref: W,
+      elevation: C === "default" ? 1 : 0,
+      onClick: w,
       sx: {
-        borderRadius: x.borders.radiusPx.lg,
+        borderRadius: p.borders.radiusPx.lg,
         // 12px to match AI StatCard
-        height: T ? "100%" : "auto",
-        cursor: v ? "pointer" : "default",
-        transition: `all ${x.motion.duration.fast} ${x.motion.easing.default}`,
-        "&:hover": v ? {
+        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)"
         } : {},
-        ...P[k]
+        ...B[C]
       },
-      children: /* @__PURE__ */ n(O, { sx: { p: `${u.padding}px !important` }, children: [
+      children: /* @__PURE__ */ n(A, { sx: { p: `${f.padding}px !important` }, children: [
         /* @__PURE__ */ n(
-          i,
+          r,
           {
             sx: {
               display: "flex",
@@ -142,36 +144,36 @@ const q = ({ data: r, color: l, height: o = 40 }) => {
               mb: 2
             },
             children: [
-              /* @__PURE__ */ n(i, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
-                f && /* @__PURE__ */ e(
-                  i,
+              /* @__PURE__ */ n(r, { sx: { display: "flex", alignItems: "center", gap: 1.5 }, children: [
+                y && /* @__PURE__ */ e(
+                  r,
                   {
                     sx: {
                       display: "flex",
                       alignItems: "center",
                       justifyContent: "center",
-                      width: u.iconSize,
-                      height: u.iconSize,
-                      borderRadius: `${x.borders.radius.iconContainer}px`,
-                      backgroundColor: W(),
-                      color: t.palette[g].main
+                      width: f.iconSize,
+                      height: f.iconSize,
+                      borderRadius: `${p.borders.radius.iconContainer}px`,
+                      backgroundColor: R(),
+                      color: t.palette[b].main
                     },
-                    children: f
+                    children: y
                   }
                 ),
-                /* @__PURE__ */ n(i, { children: [
-                  /* @__PURE__ */ n(i, { sx: { display: "flex", alignItems: "center", gap: 0.5 }, children: [
-                    s ? /* @__PURE__ */ e(C, { width: 80, height: 20 }) : /* @__PURE__ */ e(
-                      p,
+                /* @__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: u.titleSize,
+                        variant: f.titleSize,
                         color: "text.secondary",
-                        fontWeight: 500,
-                        children: r
+                        sx: { fontWeight: 500 },
+                        children: s
                       }
                     ),
-                    b && /* @__PURE__ */ e(R, { title: b, arrow: !0, children: /* @__PURE__ */ e(
-                      A,
+                    z && /* @__PURE__ */ e(D, { title: z, arrow: !0, children: /* @__PURE__ */ e(
+                      G,
                       {
                         sx: {
                           fontSize: 14,
@@ -181,58 +183,58 @@ const q = ({ data: r, color: l, height: o = 40 }) => {
                       }
                     ) })
                   ] }),
-                  h && !s && /* @__PURE__ */ e(p, { variant: "caption", color: "text.secondary", children: h })
+                  g && !i && /* @__PURE__ */ e(c, { variant: "caption", color: "text.secondary", children: g })
                 ] })
               ] }),
-              z && /* @__PURE__ */ e(
-                L,
+              $ && /* @__PURE__ */ e(
+                F,
                 {
                   size: "small",
-                  onClick: (c) => {
-                    c.stopPropagation(), z(c);
+                  onClick: (d) => {
+                    d.stopPropagation(), $(d);
                   },
                   sx: { mr: -1, mt: -0.5 },
-                  children: /* @__PURE__ */ e(F, { fontSize: "small" })
+                  children: /* @__PURE__ */ e(U, { fontSize: "small" })
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ e(i, { sx: { mb: a ? 2 : d ? 1 : 0 }, children: s ? /* @__PURE__ */ e(C, { width: 120, height: 40 }) : /* @__PURE__ */ n(
-          p,
+        /* @__PURE__ */ e(r, { sx: { mb: l ? 2 : h ? 1 : 0 }, children: i ? /* @__PURE__ */ e(T, { width: 120, height: 40 }) : /* @__PURE__ */ n(
+          c,
           {
-            variant: u.valueSize,
-            fontWeight: 700,
+            variant: f.valueSize,
             sx: {
               display: "flex",
               alignItems: "baseline",
-              gap: 0.5
+              gap: 0.5,
+              fontWeight: 700
             },
             children: [
-              l,
-              o && /* @__PURE__ */ e(
-                p,
+              o,
+              x && /* @__PURE__ */ e(
+                c,
                 {
                   component: "span",
                   variant: "body2",
                   color: "text.secondary",
-                  fontWeight: 400,
-                  children: o
+                  sx: { fontWeight: 400 },
+                  children: x
                 }
               )
             ]
           }
         ) }),
-        a && a.length > 1 && !s && /* @__PURE__ */ e(i, { sx: { mb: 2, mx: -1 }, children: /* @__PURE__ */ e(
-          q,
+        l && l.length > 1 && !i && /* @__PURE__ */ e(r, { sx: { mb: 2, mx: -1 }, children: /* @__PURE__ */ e(
+          H,
           {
-            data: a,
+            data: l,
             color: I(),
-            height: w === "small" ? 30 : w === "large" ? 50 : 40
+            height: v === "small" ? 30 : v === "large" ? 50 : 40
           }
         ) }),
-        d && !s && /* @__PURE__ */ n(
-          i,
+        h && !i && /* @__PURE__ */ n(
+          r,
           {
             sx: {
               display: "flex",
@@ -242,7 +244,7 @@ const q = ({ data: r, color: l, height: o = 40 }) => {
             },
             children: [
               /* @__PURE__ */ n(
-                i,
+                r,
                 {
                   sx: {
                     display: "flex",
@@ -251,25 +253,25 @@ const q = ({ data: r, color: l, height: o = 40 }) => {
                     color: I()
                   },
                   children: [
-                    j(),
-                    m !== void 0 && /* @__PURE__ */ n(p, { variant: "body2", fontWeight: 600, children: [
-                      m > 0 ? "+" : "",
-                      m,
+                    P(),
+                    u !== void 0 && /* @__PURE__ */ n(c, { variant: "body2", sx: { fontWeight: 600 }, children: [
+                      u > 0 ? "+" : "",
+                      u,
                       "%"
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ e(p, { variant: "caption", color: "text.secondary", children: S })
+              /* @__PURE__ */ e(c, { variant: "caption", color: "text.secondary", children: m })
             ]
           }
         ),
-        y && !s && /* @__PURE__ */ e(p, { variant: "caption", color: "text.secondary", sx: { mt: 1, display: "block" }, children: y }),
-        $ && /* @__PURE__ */ e(i, { sx: { mt: 2, pt: 2, borderTop: `1px solid ${t.palette.divider}` }, children: $ })
+        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 })
       ] })
     }
   );
-};
+});
 export {
-  Q as D
+  _ as D
 };