@hybridcore/ui 1.5.79 → 1.5.82

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

@@ -1,190 +1,103 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { TrendingUp as C, TrendingDown as S, Remove as z } from "@mui/icons-material";
-import { useTheme as j, Card as R, Stack as h, Box as o, Typography as s, alpha as t } from "@mui/material";
-const W = ({
-  label: g,
-  value: u,
-  change: d,
-  changeType: m = "percentage",
-  trend: c,
-  icon: i,
-  iconPosition: n = "right",
-  description: p,
-  variant: b = "default",
-  sx: f
-}) => {
-  const r = j(), x = () => c === "up" ? /* @__PURE__ */ e(C, { sx: { fontSize: 16 } }) : c === "down" ? /* @__PURE__ */ e(S, { sx: { fontSize: 16 } }) : /* @__PURE__ */ e(z, { sx: { fontSize: 16 } }), y = () => c === "up" ? {
-    color: r.palette.success.main,
-    bgcolor: t(r.palette.success.main, 0.1)
-  } : c === "down" ? {
-    color: r.palette.error.main,
-    bgcolor: t(r.palette.error.main, 0.1)
-  } : {
-    color: r.palette.text.secondary,
-    bgcolor: r.palette.action.hover
-  }, v = () => {
-    const l = {
-      p: 3,
-      borderRadius: 2,
-      boxShadow: 1,
-      transition: "all 0.3s",
-      "&:hover": { boxShadow: 3 },
-      border: 1
-    };
-    switch (b) {
-      case "primary":
-        return {
-          ...l,
-          bgcolor: t(r.palette.primary.main, 0.05),
-          borderColor: t(r.palette.primary.main, 0.2)
-        };
-      case "success":
-        return {
-          ...l,
-          bgcolor: t(r.palette.success.main, 0.05),
-          borderColor: t(r.palette.success.main, 0.2)
-        };
-      case "warning":
-        return {
-          ...l,
-          bgcolor: t(r.palette.warning.main, 0.05),
-          borderColor: t(r.palette.warning.main, 0.2)
-        };
-      case "danger":
-        return {
-          ...l,
-          bgcolor: t(r.palette.error.main, 0.05),
-          borderColor: t(r.palette.error.main, 0.2)
-        };
-      default:
-        return {
-          ...l,
-          bgcolor: "background.paper",
-          borderColor: "divider"
-        };
-    }
-  }, w = () => !i || !["top-left", "top-right", "bottom-left", "bottom-right"].includes(
-    n
-  ) ? null : /* @__PURE__ */ e(
-    o,
-    {
-      sx: {
-        position: "absolute",
-        top: n.includes("top") ? 24 : void 0,
-        bottom: n.includes("bottom") ? 24 : void 0,
-        left: n.includes("left") ? 24 : void 0,
-        right: n.includes("right") ? 24 : void 0,
-        zIndex: 1
-      },
-      children: /* @__PURE__ */ e(
-        o,
+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 { 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) => {
+    const {
+      label: y,
+      value: d,
+      calculatedValue: b,
+      calculatedChange: h,
+      description: m,
+      variant: c,
+      loading: T,
+      showChange: p,
+      showTrend: C,
+      Icon: i,
+      iconPosition: f,
+      showChart: x,
+      chartType: g,
+      sx: w,
+      other: u,
+      ownerState: r,
+      TrendIcon: z,
+      showCornerIcon: j,
+      showSideIcon: M
+    } = L(S), n = R();
+    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,
         {
-          sx: {
-            width: 48,
-            height: 48,
-            borderRadius: "50%",
-            bgcolor: "action.hover",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center"
-          },
-          children: /* @__PURE__ */ e(i, { sx: { fontSize: 24, color: "text.secondary" } })
+          variant: "rectangular",
+          height: 40,
+          width: "100%",
+          sx: { mt: 2 }
         }
       )
-    }
-  );
-  return /* @__PURE__ */ a(
-    R,
-    {
-      sx: {
-        ...v(),
-        position: "relative",
-        overflow: "hidden",
-        ...f
-      },
-      children: [
-        w(),
-        /* @__PURE__ */ a(
-          h,
-          {
-            direction: "row",
-            justifyContent: "space-between",
-            alignItems: "flex-start",
-            children: [
-              i && n === "left" && /* @__PURE__ */ e(o, { mr: 2, children: /* @__PURE__ */ e(
-                o,
-                {
-                  sx: {
-                    width: 48,
-                    height: 48,
-                    borderRadius: "50%",
-                    bgcolor: "action.hover",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
-                  children: /* @__PURE__ */ e(i, { sx: { fontSize: 24, color: "text.secondary" } })
-                }
-              ) }),
-              /* @__PURE__ */ a(o, { flex: 1, children: [
-                /* @__PURE__ */ e(s, { variant: "subtitle2", color: "text.secondary", mb: 0.5, children: g }),
-                /* @__PURE__ */ e(
-                  s,
-                  {
-                    variant: "h4",
-                    fontWeight: "bold",
-                    color: "text.primary",
-                    mb: 1,
-                    children: u
-                  }
-                ),
-                d !== void 0 && /* @__PURE__ */ a(h, { direction: "row", alignItems: "center", spacing: 1, children: [
-                  /* @__PURE__ */ a(
-                    o,
-                    {
-                      sx: {
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: 0.5,
-                        px: 1,
-                        py: 0.5,
-                        borderRadius: 10,
-                        typography: "caption",
-                        fontWeight: "medium",
-                        ...y()
-                      },
-                      children: [
-                        x(),
-                        d,
-                        m === "percentage" ? "%" : ""
-                      ]
-                    }
-                  ),
-                  p && /* @__PURE__ */ e(s, { variant: "caption", color: "text.secondary", children: p })
-                ] })
-              ] }),
-              i && n === "right" && /* @__PURE__ */ e(o, { ml: 2, children: /* @__PURE__ */ e(
+    ] }) }) : /* @__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__ */ t(
                 o,
                 {
-                  sx: {
-                    width: 48,
-                    height: 48,
-                    borderRadius: "50%",
-                    bgcolor: "action.hover",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
-                  children: /* @__PURE__ */ e(i, { sx: { fontSize: 24, color: "text.secondary" } })
+                  direction: "row",
+                  alignItems: "baseline",
+                  spacing: 1,
+                  flexWrap: "wrap",
+                  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
+                    ] })
+                  ]
                 }
-              ) })
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
+              )
+            ] }),
+            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 {
-  W as MetricCard
+  N as MetricCard
 };

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

@@ -0,0 +1,91 @@
+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,
+    value: e = [],
+    description: b,
+    variant: f = "default",
+    loading: v = !1,
+    showChange: p = !1,
+    changeType: r = "percentage",
+    showTrend: d = !1,
+    showIcon: l = !1,
+    icon: c,
+    iconPosition: i = "right",
+    showChart: T = !1,
+    chartType: C,
+    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", {
+      maximumFractionDigits: 2
+    }).format(t));
+  }
+  let s;
+  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 = "—";
+      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" ? "%" : ""}`;
+      }
+    } 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");
+  }
+  const F = {
+    ...u,
+    calculatedValue: h,
+    calculatedChange: s,
+    calculatedTrend: o,
+    hasData: m,
+    changeType: r,
+    iconPosition: i,
+    variant: f
+  };
+  let g = S;
+  o === "up" ? g = $ : o === "down" && (g = y);
+  const M = l && !!c && ["top-left", "top-right", "bottom-left", "bottom-right"].includes(
+    i || ""
+  ), D = l && !!c && ["left", "right"].includes(i || "");
+  return {
+    label: w,
+    value: e,
+    calculatedValue: h,
+    calculatedChange: s,
+    calculatedTrend: o,
+    description: b,
+    variant: f,
+    loading: v,
+    showChange: p,
+    changeType: r,
+    showTrend: d,
+    showIcon: l,
+    Icon: c,
+    iconPosition: i,
+    showChart: T,
+    chartType: C,
+    sx: I,
+    other: x,
+    ownerState: F,
+    TrendIcon: g,
+    showCornerIcon: M,
+    showSideIcon: D
+  };
+};
+export {
+  L as useMetricCardLogic
+};

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

@@ -0,0 +1,155 @@
+import { styled as t, alpha as o, Stack as s, Typography as e } from "@mui/material";
+const c = t("div", {
+  name: "MuiMetricCard",
+  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",
+    "&:hover": { boxShadow: a.shadows[3] },
+    border: `1px solid ${a.palette.divider}`,
+    backgroundColor: a.palette.background.paper,
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 120
+  };
+  let n = {};
+  switch (i.variant) {
+    case "primary":
+      n = {
+        backgroundColor: o(a.palette.primary.main, 0.05),
+        borderColor: o(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)
+      };
+      break;
+    case "warning":
+      n = {
+        backgroundColor: o(a.palette.warning.main, 0.05),
+        borderColor: o(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)
+      };
+      break;
+    default:
+      n = {
+        backgroundColor: a.palette.background.paper,
+        borderColor: a.palette.divider
+      };
+      break;
+  }
+  return {
+    ...r,
+    ...n
+  };
+}), p = t(s, {
+  name: "MuiMetricCard",
+  slot: "Content"
+})(({ theme: a }) => ({
+  flex: 1,
+  width: "100%",
+  zIndex: 1,
+  [a.breakpoints.down("sm")]: {
+    alignItems: "center",
+    textAlign: "center"
+  }
+})), d = t(e, {
+  name: "MuiMetricCard",
+  slot: "Label"
+})(({ theme: a }) => ({
+  color: a.palette.text.secondary,
+  marginBottom: a.spacing(0.5),
+  fontWeight: 500
+})), g = t(e, {
+  name: "MuiMetricCard",
+  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), {
+    color: r,
+    fontWeight: "bold",
+    marginBottom: a.spacing(0.5)
+  };
+}), u = t("div", {
+  name: "MuiMetricCard",
+  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), {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: a.spacing(0.5),
+    fontSize: "0.875rem",
+    fontWeight: 500,
+    color: r
+  };
+}), C = t(e, {
+  name: "MuiMetricCard",
+  slot: "Description"
+})(({ theme: a }) => ({
+  color: a.palette.text.secondary,
+  display: "block"
+})), f = t("div", {
+  name: "MuiMetricCard",
+  slot: "Icon"
+})(({ theme: a, ownerState: i }) => {
+  let r = a.palette.text.secondary;
+  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), {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: r,
+    marginRight: i.iconPosition === "left" ? a.spacing(2) : 0,
+    marginLeft: i.iconPosition === "right" ? a.spacing(2) : 0,
+    [a.breakpoints.down("sm")]: {
+      position: "absolute",
+      top: a.spacing(2),
+      left: a.spacing(2),
+      margin: 0
+    }
+  };
+}), b = t("div", {
+  name: "MuiMetricCard",
+  slot: "CornerIcon"
+})(({ theme: a, ownerState: i }) => {
+  let r = a.palette.text.secondary;
+  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);
+  const n = {};
+  return i.iconPosition === "top-left" ? (n.top = a.spacing(2), n.left = a.spacing(2)) : i.iconPosition === "top-right" ? (n.top = a.spacing(2), n.right = a.spacing(2)) : i.iconPosition === "bottom-left" ? (n.bottom = a.spacing(2), n.left = a.spacing(2)) : i.iconPosition === "bottom-right" && (n.bottom = a.spacing(2), n.right = a.spacing(2)), {
+    position: "absolute",
+    ...n,
+    color: r,
+    zIndex: 2
+  };
+}), y = t("div", {
+  name: "MuiMetricCard",
+  slot: "ChartContainer"
+})(() => ({
+  height: 40,
+  width: "100%",
+  display: "flex",
+  alignItems: "flex-end"
+}));
+export {
+  y as MetricCardChartContainer,
+  p as MetricCardContent,
+  b as MetricCardCornerIconContainer,
+  C as MetricCardDescription,
+  f as MetricCardIconContainer,
+  d as MetricCardLabel,
+  c as MetricCardRoot,
+  u as MetricCardTrendContainer,
+  g as MetricCardValue
+};