@hybridcore/ui 1.6.7 → 1.6.8

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

@@ -42,7 +42,7 @@ const G = (t) => {
       children: [
         /* @__PURE__ */ n(r, { direction: "row", alignItems: "baseline", spacing: 0.5, children: [
           /* @__PURE__ */ e(z, { variant: "h4", ownerState: i, children: y }),
-          l && /* @__PURE__ */ e(V, { variant: "h5", children: l })
+          l && /* @__PURE__ */ e(V, { variant: "h5", ownerState: i, children: l })
         ] }),
         T && /* @__PURE__ */ n(k, { ownerState: i, children: [
           d === "overlay" && t.showTrend && /* @__PURE__ */ e(S, { size: 16 }),

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

@@ -1,112 +1,119 @@
-import { useThemeProps as q } from "@mui/material";
-import { formatValue as V, resolveConditionalStyle as z } from "../charts/_common/format.js";
-import { c as N } from "../../createReactComponent-C7L-DMHj.js";
+import { useThemeProps as K } from "@mui/material";
+import { formatValue as $, resolveConditionalStyle as B } from "../charts/_common/format.js";
+import { c as y } from "../../createReactComponent-C7L-DMHj.js";
 /**
  * @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 E = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], G = N("outline", "arrow-right", "ArrowRight", E);
+const Q = [["path", { d: "M5 12l14 0", key: "svg-0" }], ["path", { d: "M13 18l6 -6", key: "svg-1" }], ["path", { d: "M13 6l6 6", key: "svg-2" }]], W = y("outline", "arrow-right", "ArrowRight", Q);
 /**
  * @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 K = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], Q = N("outline", "trending-down", "TrendingDown", K);
+const X = [["path", { d: "M3 7l6 6l4 -4l8 8", key: "svg-0" }], ["path", { d: "M21 10l0 7l-7 0", key: "svg-1" }]], Y = y("outline", "trending-down", "TrendingDown", X);
 /**
  * @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 W = [["path", { d: "M3 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], X = N("outline", "trending-up", "TrendingUp", W), ne = (_) => {
-  const i = q({ props: _, name: "HCMetricCard" }), {
-    value: l = [],
-    secondValue: y = [],
-    secondValueFormat: R,
-    variant: $ = "default",
+const ee = [["path", { d: "M3 17l6 -6l4 4l8 -8", key: "svg-0" }], ["path", { d: "M14 7l7 0l0 7", key: "svg-1" }]], oe = y("outline", "trending-up", "TrendingUp", ee), ce = (D) => {
+  const r = K({ props: D, name: "HCMetricCard" }), {
+    value: c = [],
+    secondValue: C = [],
+    secondValueFormat: F,
+    variant: P = "default",
     layout: w = "overlay",
-    valuePrefix: D,
-    valueSuffix: P,
+    valuePrefix: A,
+    valueSuffix: O,
     format: e,
-    showChange: B = !1,
-    changeType: c = "percentage",
-    showTrend: F = !1,
-    showIcon: C = !1,
-    icon: r,
-    iconPosition: d = "right"
-  } = i, A = l.length > 0, u = l[l.length - 1], b = l[l.length - 2], o = u ? Number(u.v) : NaN, n = b ? Number(b.v) : NaN, k = !isNaN(o) && !isNaN(n), g = {
-    prefix: (e == null ? void 0 : e.prefix) ?? D,
-    suffix: (e == null ? void 0 : e.suffix) ?? P,
+    showChange: U = !1,
+    changeType: s = "percentage",
+    showTrend: Z = !1,
+    showIcon: b = !1,
+    icon: d,
+    iconPosition: u = "right"
+  } = r, H = c.length > 0, g = c[c.length - 1], k = c[c.length - 2], o = g ? Number(g.v) : NaN, t = k ? Number(k.v) : NaN, m = !isNaN(o) && !isNaN(t), p = {
+    prefix: (e == null ? void 0 : e.prefix) ?? A,
+    suffix: (e == null ? void 0 : e.suffix) ?? O,
     decimals: e == null ? void 0 : e.decimals,
     color: e == null ? void 0 : e.color,
     backgroundColor: e == null ? void 0 : e.backgroundColor,
     conditionalRules: e == null ? void 0 : e.conditionalRules
   };
-  let a = "—", m = "", M, I;
+  let i = "—", S = "", M, V;
   if (!isNaN(o)) {
-    a = V(o, g), m = u.t;
-    const f = z(o, g);
-    M = f.color, I = f.backgroundColor;
+    i = $(o, p), S = g.t;
+    const l = B(o, p);
+    M = l.color, V = l.backgroundColor;
   }
-  let p;
-  const T = y[y.length - 1], x = T ? Number(T.v) : NaN;
-  isNaN(x) || (p = V(x, R ?? g));
-  let s;
-  if (B)
-    if (k && !(n === 0 && c === "percentage")) {
-      const v = c === "absolute" ? o - n : (o - n) / n * 100, J = v > 0 ? "+" : v < 0 ? "−" : "", L = c === "percentage" ? 1 : 2, j = c === "percentage" ? "%" : "";
-      s = `${J}${Math.abs(v).toFixed(L)}${j}`;
+  const I = F ?? p;
+  let h, T, x;
+  const _ = C[C.length - 1], f = _ ? Number(_.v) : NaN;
+  if (!isNaN(f)) {
+    h = $(f, I);
+    const l = B(f, I);
+    T = l.color, x = l.backgroundColor;
+  }
+  let a;
+  if (U)
+    if (m && !(t === 0 && s === "percentage")) {
+      const N = s === "absolute" ? o - t : (o - t) / t * 100, z = N > 0 ? "+" : N < 0 ? "−" : "", E = s === "percentage" ? 1 : 2, G = s === "percentage" ? "%" : "";
+      a = `${z}${Math.abs(N).toFixed(E)}${G}`;
     } else
-      s = "—";
-  let t;
-  F && k && (o > n ? t = "up" : o < n ? t = "down" : t = "neutral");
-  let h = G;
-  t === "up" ? h = X : t === "down" && (h = Q);
-  const S = [
+      a = "—";
+  let n;
+  Z && m && (o > t ? n = "up" : o < t ? n = "down" : n = "neutral");
+  let v = W;
+  n === "up" ? v = oe : n === "down" && (v = Y);
+  const R = [
     "top-left",
     "top-right",
     "bottom-left",
     "bottom-right"
-  ].includes(d), O = C && !!r && S, U = C && !!r && !S, Z = JSON.stringify({
-    metric: i.label,
-    value: a,
-    change: s,
-    asOf: m
-  }), H = {
-    ...i,
-    variant: $,
+  ].includes(u), J = b && !!d && R, L = b && !!d && !R, j = JSON.stringify({
+    metric: r.label,
+    value: i,
+    change: a,
+    asOf: S
+  }), q = {
+    ...r,
+    variant: P,
     layout: w,
-    changeType: c,
-    iconPosition: d,
-    calculatedValue: a,
-    calculatedSecondValue: p,
-    calculatedChange: s,
-    calculatedTrend: t,
+    changeType: s,
+    iconPosition: u,
+    calculatedValue: i,
+    calculatedSecondValue: h,
+    calculatedSecondValueColor: T,
+    calculatedSecondValueBg: x,
+    calculatedChange: a,
+    calculatedTrend: n,
     calculatedValueColor: M,
-    calculatedValueBg: I,
-    hasData: A
+    calculatedValueBg: V,
+    hasData: H
   };
   return {
     refs: {},
     state: {
-      ownerState: H,
+      ownerState: q,
       layout: w,
-      calculatedValue: a,
-      calculatedSecondValue: p,
-      calculatedChange: s,
-      TrendIcon: h,
-      Icon: r,
-      showCornerIcon: O,
-      showSideIcon: U,
-      iconPosition: d,
-      snapshotPayload: Z
+      calculatedValue: i,
+      calculatedSecondValue: h,
+      calculatedChange: a,
+      TrendIcon: v,
+      Icon: d,
+      showCornerIcon: J,
+      showSideIcon: L,
+      iconPosition: u,
+      snapshotPayload: j
     },
     actions: {}
   };
 };
 export {
-  ne as useMetricCardLogic
+  ce as useMetricCardLogic
 };

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

@@ -1,25 +1,25 @@
-import { styled as i, alpha as C, Stack as g, Typography as d } from "@mui/material";
-import { Widget as f } from "../widget/styled.js";
-import { variantColor as s, resolvePaletteColor as p, trendColor as u } from "./helpers.js";
+import { styled as i, alpha as g, Stack as C, Typography as c } from "@mui/material";
+import { Widget as u } from "../widget/styled.js";
+import { variantColor as l, resolvePaletteColor as d, trendColor as f } from "./helpers.js";
 const e = {
   shouldForwardProp: (o) => o !== "ownerState"
-}, v = i(f.Root, {
+}, v = i(u.Root, {
   name: "HCMetricCard",
   slot: "Root",
   ...e
 })(({ theme: o, ownerState: n }) => {
-  const t = s(o, n.variant), a = n.layout === "panel";
-  let r;
-  return t ? r = C(t, 0.05) : a && (r = o.palette.background.default), {
+  const a = l(o, n.variant), r = n.layout === "panel";
+  let t;
+  return a ? t = g(a, 0.05) : r && (t = o.palette.background.default), {
     position: "relative",
     overflow: "hidden",
     padding: o.spacing(1.5, 2),
-    ...r && { backgroundColor: r },
+    ...t && { backgroundColor: t },
     [o.breakpoints.down("md")]: {
       padding: o.spacing(1.5)
     }
   };
-}), y = i(g, {
+}), y = i(C, {
   name: "HCMetricCard",
   slot: "Content"
 })(() => ({
@@ -27,55 +27,64 @@ const e = {
   width: "100%",
   minWidth: 0,
   zIndex: 1
-})), m = i(d, {
+})), k = i(c, {
   name: "HCMetricCard",
   slot: "Label"
 })(({ theme: o }) => ({
   color: o.palette.text.secondary,
   marginBottom: o.spacing(0.5),
   fontWeight: 500
-})), k = i(d, {
+})), m = i(c, {
   name: "HCMetricCard",
   slot: "Value",
   ...e
 })(({ theme: o, ownerState: n }) => {
-  const t = p(o, n.calculatedValueColor), a = p(o, n.calculatedValueBg);
+  const a = d(o, n.calculatedValueColor), r = d(o, n.calculatedValueBg);
   return {
-    color: t ?? s(o, n.variant) ?? o.palette.text.primary,
+    color: a ?? l(o, n.variant) ?? o.palette.text.primary,
     fontWeight: 500,
     marginBottom: o.spacing(0.5),
     whiteSpace: "nowrap",
-    ...a && {
-      backgroundColor: a,
+    ...r && {
+      backgroundColor: r,
       borderRadius: o.shape.borderRadius,
       padding: o.spacing(0, 0.75)
     },
     [o.breakpoints.down("md")]: { fontSize: "1.35rem" },
     [o.breakpoints.up("md")]: { fontSize: "2rem" }
   };
-}), w = i(d, {
+}), S = i(c, {
   name: "HCMetricCard",
-  slot: "SecondValue"
-})(({ theme: o }) => ({
-  color: o.palette.text.secondary,
-  fontWeight: 400,
-  whiteSpace: "nowrap",
-  [o.breakpoints.down("md")]: { fontSize: "0.95rem" },
-  [o.breakpoints.up("md")]: { fontSize: "1.25rem" }
-})), H = i("div", {
+  slot: "SecondValue",
+  ...e
+})(({ theme: o, ownerState: n }) => {
+  const a = d(o, n.calculatedSecondValueColor), r = d(o, n.calculatedSecondValueBg);
+  return {
+    color: a ?? o.palette.text.secondary,
+    fontWeight: 400,
+    whiteSpace: "nowrap",
+    ...r && {
+      backgroundColor: r,
+      borderRadius: o.shape.borderRadius,
+      padding: o.spacing(0, 0.75)
+    },
+    [o.breakpoints.down("md")]: { fontSize: "0.95rem" },
+    [o.breakpoints.up("md")]: { fontSize: "1.25rem" }
+  };
+}), H = i("div", {
   name: "HCMetricCard",
   slot: "TrendContainer",
   ...e
 })(({ theme: o, ownerState: n }) => {
-  const t = u(o, n.calculatedTrend), a = n.layout === "panel";
+  const a = f(o, n.calculatedTrend), r = n.layout === "panel";
   return {
     display: "inline-flex",
     alignItems: "center",
     gap: o.spacing(0.5),
     fontWeight: 500,
-    color: t,
-    ...a ? {
-      backgroundColor: C(t, 0.14),
+    color: a,
+    ...r ? {
+      backgroundColor: g(a, 0.14),
       borderRadius: 999,
       padding: o.spacing(0.25, 1),
       fontSize: "0.8125rem",
@@ -88,7 +97,7 @@ const e = {
       }
     }
   };
-}), I = i(d, {
+}), I = i(c, {
   name: "HCMetricCard",
   slot: "Description"
 })(({ theme: o }) => ({
@@ -96,7 +105,7 @@ const e = {
   display: "block",
   position: "relative",
   zIndex: 1
-})), S = i("div", {
+})), R = i("div", {
   name: "HCMetricCard",
   slot: "Icon",
   ...e
@@ -104,7 +113,7 @@ const e = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  color: s(o, n.variant) ?? o.palette.text.secondary,
+  color: l(o, n.variant) ?? o.palette.text.secondary,
   marginRight: n.iconPosition === "left" ? o.spacing(2) : 0,
   marginLeft: n.iconPosition === "right" ? o.spacing(2) : 0,
   [o.breakpoints.down("sm")]: {
@@ -113,20 +122,20 @@ const e = {
     left: o.spacing(2),
     margin: 0
   }
-})), z = i("div", {
+})), w = i("div", {
   name: "HCMetricCard",
   slot: "CornerIcon",
   ...e
 })(({ theme: o, ownerState: n }) => {
-  var c, l;
-  const t = {}, a = (c = n.iconPosition) != null && c.startsWith("top") ? "top" : "bottom", r = (l = n.iconPosition) != null && l.endsWith("left") ? "left" : "right";
-  return t[a] = o.spacing(2), t[r] = o.spacing(2), {
+  var s, p;
+  const a = {}, r = (s = n.iconPosition) != null && s.startsWith("top") ? "top" : "bottom", t = (p = n.iconPosition) != null && p.endsWith("left") ? "left" : "right";
+  return a[r] = o.spacing(2), a[t] = o.spacing(2), {
     position: "absolute",
-    ...t,
-    color: s(o, n.variant) ?? o.palette.text.secondary,
+    ...a,
+    color: l(o, n.variant) ?? o.palette.text.secondary,
     zIndex: 2
   };
-}), P = i("div", {
+}), z = i("div", {
   name: "HCMetricCard",
   slot: "Chart"
 })(({ theme: o }) => ({
@@ -139,7 +148,7 @@ const e = {
   alignItems: "flex-end",
   overflow: "hidden",
   borderRadius: o.shape.borderRadius
-})), R = i("div", {
+})), P = i("div", {
   name: "HCMetricCard",
   slot: "Panel"
 })(({ theme: o }) => ({
@@ -169,16 +178,16 @@ const e = {
   alignItems: "flex-end"
 }));
 export {
-  P as MetricCardChartContainer,
+  z as MetricCardChartContainer,
   y as MetricCardContent,
-  z as MetricCardCornerIconContainer,
+  w as MetricCardCornerIconContainer,
   I as MetricCardDescription,
-  S as MetricCardIconContainer,
-  m as MetricCardLabel,
-  R as MetricCardPanel,
+  R as MetricCardIconContainer,
+  k as MetricCardLabel,
+  P as MetricCardPanel,
   v as MetricCardRoot,
-  w as MetricCardSecondValue,
+  S as MetricCardSecondValue,
   W as MetricCardSideChart,
   H as MetricCardTrendContainer,
-  k as MetricCardValue
+  m as MetricCardValue
 };

package/package.json

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