@hybridcore/ui 1.5.87 → 1.5.89

package/dist/components/metric-card/index.js

@@ -1,39 +1,41 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { useTheme as R, Stack as o, Skeleton as l } from "@mui/material";
-import * as k from "react";
-import { useMetricCardLogic as L } from "./logic.js";
+import { useTheme as k, Stack as c, Skeleton as s } from "@mui/material";
+import * as L from "react";
+import { Widget as I } from "../widget/styled.js";
+import { useMetricCardLogic as O } from "./logic.js";
 import { MetricChart as V } from "./MetricChart.js";
-import { MetricCardRoot as v, MetricCardCornerIconContainer as A, MetricCardIconContainer as I, MetricCardContent as D, MetricCardLabel as P, MetricCardValue as W, MetricCardTrendContainer as q, MetricCardDescription as B, MetricCardChartContainer as E } from "./styled.js";
-const N = k.forwardRef(
-  (S, s) => {
+import { MetricCardRoot as W, MetricCardCornerIconContainer as A, MetricCardIconContainer as S, MetricCardContent as D, MetricCardLabel as J, MetricCardValue as N, MetricCardTrendContainer as P, MetricCardDescription as q, MetricCardChartContainer as B } from "./styled.js";
+const U = L.forwardRef(
+  (b, l) => {
     const {
-      label: y,
-      value: d,
-      calculatedValue: b,
-      calculatedChange: h,
-      description: m,
-      variant: c,
+      label: h,
+      value: m,
+      calculatedValue: p,
+      calculatedChange: d,
+      description: C,
+      variant: o,
       loading: T,
-      showChange: p,
-      showTrend: C,
+      showChange: f,
+      showTrend: x,
       Icon: i,
-      iconPosition: f,
-      showChart: x,
-      chartType: g,
-      sx: w,
-      other: u,
+      iconPosition: g,
+      showChart: w,
+      chartType: u,
+      sx: M,
+      other: v,
       ownerState: r,
       TrendIcon: z,
-      showCornerIcon: j,
-      showSideIcon: M
-    } = L(S), n = R();
+      showCornerIcon: R,
+      showSideIcon: y,
+      asOf: j
+    } = O(b), n = k();
     let a = n.palette.text.secondary;
-    return c === "primary" && (a = n.palette.primary.main), c === "success" && (a = n.palette.success.main), c === "warning" && (a = n.palette.warning.main), c === "danger" && (a = n.palette.error.main), T ? /* @__PURE__ */ e(v, { ref: s, ownerState: r, sx: w, ...u, children: /* @__PURE__ */ t(o, { spacing: 1, children: [
-      /* @__PURE__ */ e(l, { variant: "text", width: "60%" }),
-      /* @__PURE__ */ e(l, { variant: "rectangular", height: 40, width: "40%" }),
-      /* @__PURE__ */ e(l, { variant: "text", width: "80%" }),
-      x && /* @__PURE__ */ e(
-        l,
+    return o === "primary" && (a = n.palette.primary.main), o === "success" && (a = n.palette.success.main), o === "warning" && (a = n.palette.warning.main), o === "danger" && (a = n.palette.error.main), T ? /* @__PURE__ */ e(W, { ref: l, ownerState: r, sx: M, ...v, children: /* @__PURE__ */ t(c, { spacing: 1, children: [
+      /* @__PURE__ */ e(s, { variant: "text", width: "60%" }),
+      /* @__PURE__ */ e(s, { variant: "rectangular", height: 40, width: "40%" }),
+      /* @__PURE__ */ e(s, { variant: "text", width: "80%" }),
+      w && /* @__PURE__ */ e(
+        s,
         {
           variant: "rectangular",
           height: 40,
@@ -41,63 +43,86 @@ const N = k.forwardRef(
           sx: { mt: 2 }
         }
       )
-    ] }) }) : /* @__PURE__ */ t(v, { ref: s, ownerState: r, sx: w, ...u, children: [
-      j && i && /* @__PURE__ */ e(A, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) }),
-      /* @__PURE__ */ t(
-        o,
-        {
-          direction: "row",
-          justifyContent: "space-between",
-          alignItems: "flex-start",
-          sx: { flex: 1 },
-          children: [
-            M && i && f === "left" && /* @__PURE__ */ e(I, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) }),
-            /* @__PURE__ */ t(D, { ownerState: r, children: [
-              /* @__PURE__ */ e(P, { variant: "subtitle2", ownerState: r, children: y }),
+    ] }) }) : /* @__PURE__ */ e(
+      I.Root,
+      {
+        ref: l,
+        sx: M,
+        ...v,
+        "data-snapshot": JSON.stringify({
+          metric: h,
+          value: p,
+          change: d,
+          asOf: j
+        }),
+        children: /* @__PURE__ */ t(
+          I.Content,
+          {
+            sx: {
+              py: { xs: 1, md: 1.5 },
+              px: { xs: 1, md: 2 }
+            },
+            children: [
+              R && i && /* @__PURE__ */ e(A, { ownerState: r, children: /* @__PURE__ */ e(i, { size: 24 }) }),
               /* @__PURE__ */ t(
-                o,
+                c,
                 {
                   direction: "row",
-                  alignItems: "baseline",
+                  justifyContent: "space-between",
+                  alignItems: "flex-start",
+                  sx: { flex: 1 },
+                  children: [
+                    y && i && g === "left" && /* @__PURE__ */ e(S, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) }),
+                    /* @__PURE__ */ t(D, { ownerState: r, children: [
+                      /* @__PURE__ */ e(J, { variant: "body2", ownerState: r, children: h }),
+                      /* @__PURE__ */ t(
+                        c,
+                        {
+                          direction: "row",
+                          alignItems: "baseline",
+                          spacing: 1,
+                          flexWrap: "wrap",
+                          children: [
+                            /* @__PURE__ */ e(N, { variant: "h4", ownerState: r, children: p }),
+                            (f || x) && d !== "—" && /* @__PURE__ */ t(P, { ownerState: r, children: [
+                              x && /* @__PURE__ */ e(z, { size: 16 }),
+                              f && d
+                            ] })
+                          ]
+                        }
+                      )
+                    ] }),
+                    y && i && g === "right" && /* @__PURE__ */ e(S, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ t(
+                c,
+                {
+                  direction: { xs: "column-reverse", sm: "column" },
                   spacing: 1,
-                  flexWrap: "wrap",
+                  sx: { width: "100%", mt: 2 },
                   children: [
-                    /* @__PURE__ */ e(W, { variant: "h4", ownerState: r, children: b }),
-                    (p || C) && h !== "—" && /* @__PURE__ */ t(q, { ownerState: r, children: [
-                      C && /* @__PURE__ */ e(z, { sx: { fontSize: 16 } }),
-                      p && h
-                    ] })
+                    C && /* @__PURE__ */ e(
+                      q,
+                      {
+                        variant: "caption",
+                        ownerState: r,
+                        sx: { textAlign: { xs: "center", sm: "left" } },
+                        children: C
+                      }
+                    ),
+                    w && u && m.length >= 2 && /* @__PURE__ */ e(B, { ownerState: r, children: /* @__PURE__ */ e(V, { type: u, data: m, color: a }) })
                   ]
                 }
               )
-            ] }),
-            M && i && f === "right" && /* @__PURE__ */ e(I, { ownerState: r, children: /* @__PURE__ */ e(i, { sx: { fontSize: 24 } }) })
-          ]
-        }
-      ),
-      /* @__PURE__ */ t(
-        o,
-        {
-          direction: { xs: "column-reverse", sm: "column" },
-          spacing: 1,
-          sx: { width: "100%", mt: 2 },
-          children: [
-            m && /* @__PURE__ */ e(
-              B,
-              {
-                variant: "caption",
-                ownerState: r,
-                sx: { textAlign: { xs: "center", sm: "left" } },
-                children: m
-              }
-            ),
-            x && g && d.length >= 2 && /* @__PURE__ */ e(E, { ownerState: r, children: /* @__PURE__ */ e(V, { type: g, data: d, color: a }) })
-          ]
-        }
-      )
-    ] });
+            ]
+          }
+        )
+      }
+    );
   }
 );
 export {
-  N as MetricCard
+  U as MetricCard
 };

package/dist/components/metric-card/logic.js

@@ -1,91 +1,168 @@
-import { ArrowForward as S, TrendingUp as $, TrendingDown as y } from "@mui/icons-material";
-import { useThemeProps as P } from "@mui/material";
-const L = (N) => {
-  const u = P({ props: N, name: "MuiMetricCard" }), {
-    label: w,
+import { useThemeProps as D } from "@mui/material";
+import { forwardRef as R, createElement as y } from "react";
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var F = {
+  outline: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  },
+  filled: {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    stroke: "none"
+  }
+};
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const C = (w, g, m, e) => {
+  const h = R(
+    ({ color: d = "currentColor", size: u = 24, stroke: p = 2, title: o, className: f, children: r, ...a }, i) => y(
+      "svg",
+      {
+        ref: i,
+        ...F[w],
+        width: u,
+        height: u,
+        className: ["tabler-icon", `tabler-icon-${g}`, f].join(" "),
+        strokeWidth: p,
+        stroke: d,
+        ...a
+      },
+      [
+        o && y("title", { key: "svg-title" }, o),
+        ...e.map(([v, N]) => y(v, N)),
+        ...Array.isArray(r) ? r : [r]
+      ]
+    )
+  );
+  return h.displayName = `${m}`, h;
+};
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const L = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], S = C("outline", "arrow-right", "ArrowRight", L);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const U = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], j = C("outline", "trending-down", "TrendingDown", U);
+/**
+ * @license @tabler/icons-react v3.44.0 - MIT
+ *
+ * This source code is licensed under the MIT license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const B = [["path", { d: "M3 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], P = C("outline", "trending-up", "TrendingUp", B), H = (w) => {
+  const g = D({ props: w, name: "HCMetricCard" }), {
+    label: m,
     value: e = [],
-    description: b,
-    variant: f = "default",
-    loading: v = !1,
+    description: h,
+    variant: d = "default",
+    loading: u = !1,
     showChange: p = !1,
-    changeType: r = "percentage",
-    showTrend: d = !1,
-    showIcon: l = !1,
-    icon: c,
+    changeType: o = "percentage",
+    showTrend: f = !1,
+    showIcon: r = !1,
+    icon: a,
     iconPosition: i = "right",
-    showChart: T = !1,
-    chartType: C,
+    showChart: v = !1,
+    chartType: N,
     sx: I,
     ...x
-  } = u, m = e.length > 0;
-  let h = "—";
-  if (m) {
-    const t = Number(e[e.length - 1].v);
-    isNaN(t) || (h = new Intl.NumberFormat("en-US", {
+  } = g, M = e.length > 0;
+  let k = "—", T = "";
+  if (M) {
+    const n = e[e.length - 1], t = Number(n.v);
+    isNaN(t) || (k = new Intl.NumberFormat("en-US", {
       maximumFractionDigits: 2
-    }).format(t));
+    }).format(t), T = n.t);
   }
-  let s;
+  let l;
   if (p)
     if (e.length >= 2) {
-      const t = Number(e[e.length - 1].v), n = Number(e[e.length - 2].v);
-      if (isNaN(t) || isNaN(n))
-        s = "—";
-      else if (n === 0 && r === "percentage")
-        s = "—";
+      const n = Number(e[e.length - 1].v), t = Number(e[e.length - 2].v);
+      if (isNaN(n) || isNaN(t))
+        l = "—";
+      else if (t === 0 && o === "percentage")
+        l = "—";
       else {
-        let a = 0;
-        r === "absolute" ? a = t - n : a = (t - n) / n * 100, s = `${a > 0 ? "+" : a < 0 ? "−" : ""}${Math.abs(a).toFixed(
-          r === "percentage" ? 1 : 2
-        )}${r === "percentage" ? "%" : ""}`;
+        let c = 0;
+        o === "absolute" ? c = n - t : c = (n - t) / t * 100, l = `${c > 0 ? "+" : c < 0 ? "−" : ""}${Math.abs(c).toFixed(
+          o === "percentage" ? 1 : 2
+        )}${o === "percentage" ? "%" : ""}`;
       }
     } else
-      s = "—";
-  let o;
-  if (d && e.length >= 2) {
-    const t = Number(e[e.length - 1].v), n = Number(e[e.length - 2].v);
-    !isNaN(t) && !isNaN(n) && (t > n ? o = "up" : t < n ? o = "down" : o = "neutral");
+      l = "—";
+  let s;
+  if (f && e.length >= 2) {
+    const n = Number(e[e.length - 1].v), t = Number(e[e.length - 2].v);
+    !isNaN(n) && !isNaN(t) && (n > t ? s = "up" : n < t ? s = "down" : s = "neutral");
   }
-  const F = {
-    ...u,
-    calculatedValue: h,
-    calculatedChange: s,
-    calculatedTrend: o,
-    hasData: m,
-    changeType: r,
+  const $ = {
+    ...g,
+    calculatedValue: k,
+    calculatedChange: l,
+    calculatedTrend: s,
+    hasData: M,
+    changeType: o,
     iconPosition: i,
-    variant: f
+    variant: d
   };
-  let g = S;
-  o === "up" ? g = $ : o === "down" && (g = y);
-  const M = l && !!c && ["top-left", "top-right", "bottom-left", "bottom-right"].includes(
+  let b = S;
+  s === "up" ? b = P : s === "down" && (b = j);
+  const _ = r && !!a && ["top-left", "top-right", "bottom-left", "bottom-right"].includes(
     i || ""
-  ), D = l && !!c && ["left", "right"].includes(i || "");
+  ), A = r && !!a && ["left", "right"].includes(i || "");
   return {
-    label: w,
+    label: m,
     value: e,
-    calculatedValue: h,
-    calculatedChange: s,
-    calculatedTrend: o,
-    description: b,
-    variant: f,
-    loading: v,
+    calculatedValue: k,
+    calculatedChange: l,
+    calculatedTrend: s,
+    description: h,
+    variant: d,
+    loading: u,
     showChange: p,
-    changeType: r,
-    showTrend: d,
-    showIcon: l,
-    Icon: c,
+    changeType: o,
+    showTrend: f,
+    showIcon: r,
+    Icon: a,
     iconPosition: i,
-    showChart: T,
-    chartType: C,
+    showChart: v,
+    chartType: N,
     sx: I,
     other: x,
-    ownerState: F,
-    TrendIcon: g,
-    showCornerIcon: M,
-    showSideIcon: D
+    ownerState: $,
+    TrendIcon: b,
+    showCornerIcon: _,
+    showSideIcon: A,
+    asOf: T
   };
 };
 export {
-  L as useMetricCardLogic
+  H as useMetricCardLogic
 };

package/dist/components/metric-card/styled.js

@@ -1,12 +1,11 @@
-import { styled as t, alpha as o, Stack as s, Typography as e } from "@mui/material";
-const c = t("div", {
-  name: "MuiMetricCard",
+import { styled as o, alpha as t, Stack as e, Typography as s } from "@mui/material";
+const c = o("div", {
+  name: "HCMetricCard",
   slot: "Root"
 })(({ theme: a, ownerState: i }) => {
   const r = {
     position: "relative",
     overflow: "hidden",
-    padding: a.spacing(2, 3),
     borderRadius: a.shape.borderRadius * 2,
     boxShadow: a.shadows[1],
     transition: "all 0.3s",
@@ -15,32 +14,38 @@ const c = t("div", {
     backgroundColor: a.palette.background.paper,
     display: "flex",
     flexDirection: "column",
-    minHeight: 120
+    minHeight: 120,
+    [a.breakpoints.down("md")]: {
+      padding: a.spacing(1.5, 1.5)
+    },
+    [a.breakpoints.up("md")]: {
+      padding: a.spacing(1.5, 2)
+    }
   };
   let n = {};
   switch (i.variant) {
     case "primary":
       n = {
-        backgroundColor: o(a.palette.primary.main, 0.05),
-        borderColor: o(a.palette.primary.main, 0.2)
+        backgroundColor: t(a.palette.primary.main, 0.05),
+        borderColor: t(a.palette.primary.main, 0.2)
       };
       break;
     case "success":
       n = {
-        backgroundColor: o(a.palette.success.main, 0.05),
-        borderColor: o(a.palette.success.main, 0.2)
+        backgroundColor: t(a.palette.success.main, 0.05),
+        borderColor: t(a.palette.success.main, 0.2)
       };
       break;
     case "warning":
       n = {
-        backgroundColor: o(a.palette.warning.main, 0.05),
-        borderColor: o(a.palette.warning.main, 0.2)
+        backgroundColor: t(a.palette.warning.main, 0.05),
+        borderColor: t(a.palette.warning.main, 0.2)
       };
       break;
     case "danger":
       n = {
-        backgroundColor: o(a.palette.error.main, 0.05),
-        borderColor: o(a.palette.error.main, 0.2)
+        backgroundColor: t(a.palette.error.main, 0.05),
+        borderColor: t(a.palette.error.main, 0.2)
       };
       break;
     default:
@@ -54,55 +59,68 @@ const c = t("div", {
     ...r,
     ...n
   };
-}), p = t(s, {
-  name: "MuiMetricCard",
+}), d = o(e, {
+  name: "HCMetricCard",
   slot: "Content"
 })(({ theme: a }) => ({
   flex: 1,
   width: "100%",
   zIndex: 1,
-  [a.breakpoints.down("sm")]: {
-    alignItems: "center",
-    textAlign: "center"
-  }
-})), d = t(e, {
-  name: "MuiMetricCard",
+  [a.breakpoints.down("md")]: {}
+})), p = o(s, {
+  name: "HCMetricCard",
   slot: "Label"
 })(({ theme: a }) => ({
   color: a.palette.text.secondary,
   marginBottom: a.spacing(0.5),
   fontWeight: 500
-})), g = t(e, {
-  name: "MuiMetricCard",
+})), g = o(s, {
+  name: "HCMetricCard",
   slot: "Value"
 })(({ theme: a, ownerState: i }) => {
   let r = a.palette.text.primary;
   return i.variant === "primary" && (r = a.palette.primary.main), i.variant === "success" && (r = a.palette.success.main), i.variant === "warning" && (r = a.palette.warning.main), i.variant === "danger" && (r = a.palette.error.main), {
+    [a.breakpoints.down("md")]: {
+      fontSize: "1.35rem"
+    },
+    [a.breakpoints.up("md")]: {
+      fontSize: "2rem"
+    },
     color: r,
-    fontWeight: "bold",
+    fontWeight: 500,
     marginBottom: a.spacing(0.5)
   };
-}), u = t("div", {
-  name: "MuiMetricCard",
+}), C = o("div", {
+  name: "HCMetricCard",
   slot: "TrendContainer"
 })(({ theme: a, ownerState: i }) => {
   let r = a.palette.text.secondary;
   return i.calculatedTrend === "up" ? r = a.palette.success.main : i.calculatedTrend === "down" ? r = a.palette.error.main : i.calculatedTrend === "neutral" && (r = a.palette.text.secondary), {
+    [a.breakpoints.down("md")]: {
+      fontSize: "0.7rem",
+      ".MuiSvgIcon-root": {
+        display: "none"
+      }
+    },
+    [a.breakpoints.up("md")]: {
+      fontSize: "0.875rem"
+    },
     display: "inline-flex",
     alignItems: "center",
     gap: a.spacing(0.5),
-    fontSize: "0.875rem",
     fontWeight: 500,
     color: r
   };
-}), C = t(e, {
-  name: "MuiMetricCard",
+}), f = o(s, {
+  name: "HCMetricCard",
   slot: "Description"
 })(({ theme: a }) => ({
   color: a.palette.text.secondary,
-  display: "block"
-})), f = t("div", {
-  name: "MuiMetricCard",
+  display: "block",
+  position: "relative",
+  zIndex: 1
+})), b = o("div", {
+  name: "HCMetricCard",
   slot: "Icon"
 })(({ theme: a, ownerState: i }) => {
   let r = a.palette.text.secondary;
@@ -120,8 +138,8 @@ const c = t("div", {
       margin: 0
     }
   };
-}), b = t("div", {
-  name: "MuiMetricCard",
+}), u = o("div", {
+  name: "HCMetricCard",
   slot: "CornerIcon"
 })(({ theme: a, ownerState: i }) => {
   let r = a.palette.text.secondary;
@@ -133,23 +151,28 @@ const c = t("div", {
     color: r,
     zIndex: 2
   };
-}), y = t("div", {
-  name: "MuiMetricCard",
+}), y = o("div", {
+  name: "HCMetricCard",
   slot: "ChartContainer"
-})(() => ({
-  height: 40,
-  width: "100%",
+})(({ theme: a }) => ({
+  position: "absolute",
+  right: 0,
+  bottom: 0,
+  left: 0,
+  height: "75%",
   display: "flex",
-  alignItems: "flex-end"
+  alignItems: "flex-end",
+  overflow: "hidden",
+  borderRadius: a.shape.borderRadius
 }));
 export {
   y as MetricCardChartContainer,
-  p as MetricCardContent,
-  b as MetricCardCornerIconContainer,
-  C as MetricCardDescription,
-  f as MetricCardIconContainer,
-  d as MetricCardLabel,
+  d as MetricCardContent,
+  u as MetricCardCornerIconContainer,
+  f as MetricCardDescription,
+  b as MetricCardIconContainer,
+  p as MetricCardLabel,
   c as MetricCardRoot,
-  u as MetricCardTrendContainer,
+  C as MetricCardTrendContainer,
   g as MetricCardValue
 };