@hybridcore/ui 1.5.80 → 1.5.82

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

@@ -1,46 +1,91 @@
-import { Remove as f, TrendingUp as T, TrendingDown as w } from "@mui/icons-material";
-import { useThemeProps as b } from "@mui/material";
-const I = (s) => {
-  const n = b({ props: s, name: "MuiMetricCard" }), {
-    label: p,
-    value: a,
-    change: d,
+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",
-    trend: e,
-    icon: i,
-    iconPosition: o = "right",
-    description: g,
-    variant: c = "default",
-    sx: l,
-    ...m
-  } = n, h = {
-    ...n,
+    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: o,
-    variant: c
+    iconPosition: i,
+    variant: f
   };
-  let t = f;
-  e === "up" ? t = T : e === "down" && (t = w);
-  const u = !!i && ["top-left", "top-right", "bottom-left", "bottom-right"].includes(
-    o || ""
-  );
+  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: p,
-    value: a,
-    change: d,
+    label: w,
+    value: e,
+    calculatedValue: h,
+    calculatedChange: s,
+    calculatedTrend: o,
+    description: b,
+    variant: f,
+    loading: v,
+    showChange: p,
     changeType: r,
-    trend: e,
-    Icon: i,
-    iconPosition: o,
-    description: g,
-    variant: c,
-    sx: l,
-    other: m,
-    ownerState: h,
-    TrendIcon: t,
-    showCornerIcon: u
+    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 {
-  I as useMetricCardLogic
+  L as useMetricCardLogic
 };

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

@@ -1,136 +1,155 @@
-import { styled as n, alpha as i, Stack as l, Typography as e } from "@mui/material";
-const p = n("div", {
+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: o, ownerState: a }) => {
-  const t = {
+})(({ theme: a, ownerState: i }) => {
+  const r = {
     position: "relative",
     overflow: "hidden",
-    padding: o.spacing(3),
-    borderRadius: o.shape.borderRadius * 2,
-    boxShadow: o.shadows[1],
+    padding: a.spacing(2, 3),
+    borderRadius: a.shape.borderRadius * 2,
+    boxShadow: a.shadows[1],
     transition: "all 0.3s",
-    "&:hover": { boxShadow: o.shadows[3] },
-    border: `1px solid ${o.palette.divider}`,
-    backgroundColor: o.palette.background.paper
+    "&:hover": { boxShadow: a.shadows[3] },
+    border: `1px solid ${a.palette.divider}`,
+    backgroundColor: a.palette.background.paper,
+    display: "flex",
+    flexDirection: "column",
+    minHeight: 120
   };
-  let r = {};
-  switch (a.variant) {
+  let n = {};
+  switch (i.variant) {
     case "primary":
-      r = {
-        backgroundColor: i(o.palette.primary.main, 0.05),
-        borderColor: i(o.palette.primary.main, 0.2)
+      n = {
+        backgroundColor: o(a.palette.primary.main, 0.05),
+        borderColor: o(a.palette.primary.main, 0.2)
       };
       break;
     case "success":
-      r = {
-        backgroundColor: i(o.palette.success.main, 0.05),
-        borderColor: i(o.palette.success.main, 0.2)
+      n = {
+        backgroundColor: o(a.palette.success.main, 0.05),
+        borderColor: o(a.palette.success.main, 0.2)
       };
       break;
     case "warning":
-      r = {
-        backgroundColor: i(o.palette.warning.main, 0.05),
-        borderColor: i(o.palette.warning.main, 0.2)
+      n = {
+        backgroundColor: o(a.palette.warning.main, 0.05),
+        borderColor: o(a.palette.warning.main, 0.2)
       };
       break;
     case "danger":
-      r = {
-        backgroundColor: i(o.palette.error.main, 0.05),
-        borderColor: i(o.palette.error.main, 0.2)
+      n = {
+        backgroundColor: o(a.palette.error.main, 0.05),
+        borderColor: o(a.palette.error.main, 0.2)
       };
       break;
     default:
-      r = {
-        backgroundColor: o.palette.background.paper,
-        borderColor: o.palette.divider
+      n = {
+        backgroundColor: a.palette.background.paper,
+        borderColor: a.palette.divider
       };
       break;
   }
   return {
-    ...t,
-    ...r
+    ...r,
+    ...n
   };
-}), g = n(l, {
+}), p = t(s, {
   name: "MuiMetricCard",
   slot: "Content"
-})(() => ({
-  flex: 1
-})), u = n(e, {
+})(({ theme: a }) => ({
+  flex: 1,
+  width: "100%",
+  zIndex: 1,
+  [a.breakpoints.down("sm")]: {
+    alignItems: "center",
+    textAlign: "center"
+  }
+})), d = t(e, {
   name: "MuiMetricCard",
   slot: "Label"
-})(({ theme: o }) => ({
-  color: o.palette.text.secondary,
-  marginBottom: o.spacing(0.5)
-})), C = n(e, {
+})(({ theme: a }) => ({
+  color: a.palette.text.secondary,
+  marginBottom: a.spacing(0.5),
+  fontWeight: 500
+})), g = t(e, {
   name: "MuiMetricCard",
   slot: "Value"
-})(({ theme: o }) => ({
-  color: o.palette.text.primary,
-  fontWeight: "bold",
-  marginBottom: o.spacing(1)
-})), b = n("div", {
+})(({ 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: o, ownerState: a }) => {
-  let t = o.palette.text.secondary, r = o.palette.action.hover;
-  return a.trend === "up" ? (t = o.palette.success.main, r = i(o.palette.success.main, 0.1)) : a.trend === "down" && (t = o.palette.error.main, r = i(o.palette.error.main, 0.1)), {
+})(({ 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: o.spacing(0.5),
-    padding: o.spacing(0.5, 1),
-    borderRadius: 10,
-    ...o.typography.caption,
+    gap: a.spacing(0.5),
+    fontSize: "0.875rem",
     fontWeight: 500,
-    color: t,
-    backgroundColor: r
+    color: r
   };
-}), M = n(e, {
+}), C = t(e, {
   name: "MuiMetricCard",
   slot: "Description"
-})(({ theme: o }) => ({
-  color: o.palette.text.secondary
-})), y = n("div", {
+})(({ theme: a }) => ({
+  color: a.palette.text.secondary,
+  display: "block"
+})), f = t("div", {
   name: "MuiMetricCard",
   slot: "Icon"
-})(({ theme: o, ownerState: a }) => ({
-  width: 48,
-  height: 48,
-  borderRadius: "50%",
-  backgroundColor: o.palette.action.hover,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  marginRight: a.iconPosition === "left" ? o.spacing(2) : 0,
-  marginLeft: a.iconPosition === "right" ? o.spacing(2) : 0
-})), v = n("div", {
+})(({ 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: o, ownerState: a }) => {
-  var t, r, c, d;
-  return {
+})(({ 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",
-    top: (t = a.iconPosition) != null && t.includes("top") ? 24 : void 0,
-    bottom: (r = a.iconPosition) != null && r.includes("bottom") ? 24 : void 0,
-    left: (c = a.iconPosition) != null && c.includes("left") ? 24 : void 0,
-    right: (d = a.iconPosition) != null && d.includes("right") ? 24 : void 0,
-    zIndex: 1,
-    width: 48,
-    height: 48,
-    borderRadius: "50%",
-    backgroundColor: o.palette.action.hover,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
+    ...n,
+    color: r,
+    zIndex: 2
   };
-});
+}), y = t("div", {
+  name: "MuiMetricCard",
+  slot: "ChartContainer"
+})(() => ({
+  height: 40,
+  width: "100%",
+  display: "flex",
+  alignItems: "flex-end"
+}));
 export {
-  g as MetricCardContent,
-  v as MetricCardCornerIconContainer,
-  M as MetricCardDescription,
-  y as MetricCardIconContainer,
-  u as MetricCardLabel,
-  p as MetricCardRoot,
-  b as MetricCardTrendContainer,
-  C as MetricCardValue
+  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
 };

package/dist/components/paginated-list/styled.js

@@ -11,7 +11,7 @@ const s = t(e, {
   slot: "Header"
 })(({ theme: i }) => ({
   padding: i.spacing(3),
-  paddingBottom: 0,
+  paddingBottom: i.spacing(2),
   "& .MuiCardHeader-title": {
     fontSize: "1rem",
     fontWeight: 500
@@ -34,7 +34,7 @@ const s = t(e, {
 })(() => ({
   flex: 1,
   overflowY: "auto"
-})), m = t("div", {
+})), p = t("div", {
   name: "MuiPaginatedList",
   slot: "Pagination"
 })(({ theme: i }) => ({
@@ -44,6 +44,6 @@ export {
   l as PaginatedListContent,
   r as PaginatedListHeader,
   g as PaginatedListList,
-  m as PaginatedListPagination,
+  p as PaginatedListPagination,
   s as PaginatedListRoot
 };

package/dist/main.d.ts

@@ -195,6 +195,11 @@ export declare const ContextMenu: React.FC<Props_3>;
 
 export { createTheme }
 
+declare interface DataPointType {
+    t: string; // ISO date
+    v: number;
+}
+
 declare interface DataType extends ItemProps {
     idKey?: string;
     children?: DataType[];
@@ -676,26 +681,39 @@ export declare namespace Map_2 {
 export declare const MetricCard: (props: MetricCardProps & React_2.RefAttributes<HTMLDivElement>) => React_2.ReactNode | null;
 
 export declare interface MetricCardProps {
-    label?: string;
-    value?: string | number;
-    change?: number;
-    changeType?: MetricChangeType;
-    trend?: MetricTrend;
-    icon?: React.ElementType;
-    iconPosition?:
-    | "left"
-    | "right"
-    | "top-left"
-    | "top-right"
-    | "bottom-left"
-    | "bottom-right";
+    label: string;
+    value: DataPointType[];
     description?: string;
     variant?: MetricVariant;
+    loading?: boolean;
+
+    showChange?: boolean;
+    changeType?: MetricChangeType;
+
+    showTrend?: boolean;
+
+    showIcon?: boolean;
+    icon?: React.ElementType;
+    iconPosition?: MetricIconPosition;
+
+    showChart?: boolean;
+    chartType?: MetricChartType;
+
     sx?: SxProps<Theme>;
 }
 
 export declare type MetricChangeType = "percentage" | "absolute";
 
+declare type MetricChartType = "column" | "line";
+
+declare type MetricIconPosition =
+| "left"
+| "right"
+| "top-left"
+| "top-right"
+| "bottom-left"
+| "bottom-right";
+
 export declare type MetricTrend = "up" | "down" | "neutral";
 
 export declare type MetricVariant =
@@ -1306,7 +1324,8 @@ declare module "@mui/material/styles" {
       | "trendValue"
       | "description"
       | "icon"
-      | "cornerIcon";
+      | "cornerIcon"
+      | "chart";
   }
 
   interface ComponentsPropsList {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.5.80",
+  "version": "1.5.82",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",