@hybridcore/ui 1.6.2 → 1.6.4

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

@@ -1,160 +1,118 @@
-import { styled as o, alpha as t, Stack as e, Typography as s } from "@mui/material";
-const c = o("div", {
+import { styled as i, alpha as p, Stack as C, Typography as d } from "@mui/material";
+import { Widget as g } from "../widget/styled.js";
+import { variantColor as s, trendColor as f } from "./helpers.js";
+const e = {
+  shouldForwardProp: (o) => o !== "ownerState"
+}, x = i(g.Root, {
   name: "HCMetricCard",
-  slot: "Root"
-})(({ theme: a, ownerState: i }) => {
-  const r = {
+  slot: "Root",
+  ...e
+})(({ theme: o, ownerState: t }) => {
+  const n = s(o, t.variant), a = t.layout === "panel";
+  let r;
+  return n ? r = p(n, 0.05) : a && (r = o.palette.background.default), {
     position: "relative",
     overflow: "hidden",
-    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,
-    [a.breakpoints.down("md")]: {
-      padding: a.spacing(1.5, 1.5)
-    },
-    [a.breakpoints.up("md")]: {
-      padding: a.spacing(1.5, 2)
+    padding: o.spacing(1.5, 2),
+    ...r && { backgroundColor: r },
+    [o.breakpoints.down("md")]: {
+      padding: o.spacing(1.5)
     }
   };
-  let n = {};
-  switch (i.variant) {
-    case "primary":
-      n = {
-        backgroundColor: t(a.palette.primary.main, 0.05),
-        borderColor: t(a.palette.primary.main, 0.2)
-      };
-      break;
-    case "success":
-      n = {
-        backgroundColor: t(a.palette.success.main, 0.05),
-        borderColor: t(a.palette.success.main, 0.2)
-      };
-      break;
-    case "warning":
-      n = {
-        backgroundColor: t(a.palette.warning.main, 0.05),
-        borderColor: t(a.palette.warning.main, 0.2)
-      };
-      break;
-    case "danger":
-      n = {
-        backgroundColor: t(a.palette.error.main, 0.05),
-        borderColor: t(a.palette.error.main, 0.2)
-      };
-      break;
-    default:
-      n = {
-        backgroundColor: a.palette.background.paper,
-        borderColor: a.palette.divider
-      };
-      break;
-  }
-  return {
-    ...r,
-    ...n
-  };
-}), d = o(e, {
+}), m = i(C, {
   name: "HCMetricCard",
   slot: "Content"
-})(({ theme: a }) => ({
+})(() => ({
   flex: 1,
   width: "100%",
-  zIndex: 1,
-  [a.breakpoints.down("md")]: {}
-})), p = o(s, {
+  minWidth: 0,
+  zIndex: 1
+})), v = i(d, {
   name: "HCMetricCard",
   slot: "Label"
-})(({ theme: a }) => ({
-  color: a.palette.text.secondary,
-  marginBottom: a.spacing(0.5),
+})(({ theme: o }) => ({
+  color: o.palette.text.secondary,
+  marginBottom: o.spacing(0.5),
   fontWeight: 500
-})), g = o(s, {
+})), y = i(d, {
   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: 500,
-    marginBottom: a.spacing(0.5)
-  };
-}), C = o("div", {
+  slot: "Value",
+  ...e
+})(({ theme: o, ownerState: t }) => ({
+  color: s(o, t.variant) ?? o.palette.text.primary,
+  fontWeight: 500,
+  marginBottom: o.spacing(0.5),
+  whiteSpace: "nowrap",
+  [o.breakpoints.down("md")]: { fontSize: "1.35rem" },
+  [o.breakpoints.up("md")]: { fontSize: "2rem" }
+})), I = i("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"
-    },
+  slot: "TrendContainer",
+  ...e
+})(({ theme: o, ownerState: t }) => {
+  const n = f(o, t.calculatedTrend), a = t.layout === "panel";
+  return {
     display: "inline-flex",
     alignItems: "center",
-    gap: a.spacing(0.5),
+    gap: o.spacing(0.5),
     fontWeight: 500,
-    color: r
+    color: n,
+    ...a ? {
+      backgroundColor: p(n, 0.14),
+      borderRadius: 999,
+      padding: o.spacing(0.25, 1),
+      fontSize: "0.8125rem",
+      whiteSpace: "nowrap"
+    } : {
+      fontSize: "0.875rem",
+      [o.breakpoints.down("md")]: {
+        fontSize: "0.7rem",
+        ".MuiSvgIcon-root": { display: "none" }
+      }
+    }
   };
-}), f = o(s, {
+}), k = i(d, {
   name: "HCMetricCard",
   slot: "Description"
-})(({ theme: a }) => ({
-  color: a.palette.text.secondary,
+})(({ theme: o }) => ({
+  color: o.palette.text.secondary,
   display: "block",
   position: "relative",
   zIndex: 1
-})), b = o("div", {
+})), w = i("div", {
   name: "HCMetricCard",
-  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
-    }
-  };
-}), u = o("div", {
+  slot: "Icon",
+  ...e
+})(({ theme: o, ownerState: t }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: s(o, t.variant) ?? o.palette.text.secondary,
+  marginRight: t.iconPosition === "left" ? o.spacing(2) : 0,
+  marginLeft: t.iconPosition === "right" ? o.spacing(2) : 0,
+  [o.breakpoints.down("sm")]: {
+    position: "absolute",
+    top: o.spacing(2),
+    left: o.spacing(2),
+    margin: 0
+  }
+})), H = i("div", {
   name: "HCMetricCard",
-  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)), {
+  slot: "CornerIcon",
+  ...e
+})(({ theme: o, ownerState: t }) => {
+  var c, l;
+  const n = {}, a = (c = t.iconPosition) != null && c.startsWith("top") ? "top" : "bottom", r = (l = t.iconPosition) != null && l.endsWith("left") ? "left" : "right";
+  return n[a] = o.spacing(2), n[r] = o.spacing(2), {
     position: "absolute",
     ...n,
-    color: r,
+    color: s(o, t.variant) ?? o.palette.text.secondary,
     zIndex: 2
   };
-}), y = o("div", {
+}), P = i("div", {
   name: "HCMetricCard",
-  slot: "ChartContainer"
-})(({ theme: a }) => ({
+  slot: "Chart"
+})(({ theme: o }) => ({
   position: "absolute",
   right: 0,
   bottom: 0,
@@ -163,16 +121,46 @@ const c = o("div", {
   display: "flex",
   alignItems: "flex-end",
   overflow: "hidden",
-  borderRadius: a.shape.borderRadius
+  borderRadius: o.shape.borderRadius
+})), S = i("div", {
+  name: "HCMetricCard",
+  slot: "Panel"
+})(({ theme: o }) => ({
+  display: "flex",
+  flexDirection: "row",
+  alignItems: "stretch",
+  gap: o.spacing(2),
+  flex: 1,
+  minHeight: 0,
+  marginTop: o.spacing(1),
+  padding: o.spacing(2),
+  borderRadius: o.shape.borderRadius * 2,
+  border: `1px solid ${o.palette.divider}`,
+  backgroundColor: o.palette.background.paper,
+  boxShadow: o.shadows[1],
+  overflow: "hidden"
+})), z = i("div", {
+  name: "HCMetricCard",
+  slot: "SideChart"
+})(() => ({
+  // Take only the space the value/trend column leaves: grow into the gap, shrink to 0
+  // when the left content is wide (basis 0 + minWidth 0), so the value/pill never wrap.
+  flex: "1 1 0",
+  minWidth: 0,
+  alignSelf: "stretch",
+  display: "flex",
+  alignItems: "flex-end"
 }));
 export {
-  y as MetricCardChartContainer,
-  d as MetricCardContent,
-  u as MetricCardCornerIconContainer,
-  f as MetricCardDescription,
-  b as MetricCardIconContainer,
-  p as MetricCardLabel,
-  c as MetricCardRoot,
-  C as MetricCardTrendContainer,
-  g as MetricCardValue
+  P as MetricCardChartContainer,
+  m as MetricCardContent,
+  H as MetricCardCornerIconContainer,
+  k as MetricCardDescription,
+  w as MetricCardIconContainer,
+  v as MetricCardLabel,
+  S as MetricCardPanel,
+  x as MetricCardRoot,
+  z as MetricCardSideChart,
+  I as MetricCardTrendContainer,
+  y as MetricCardValue
 };