@hybridcore/ui 1.6.6 → 1.6.8

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

@@ -1,25 +1,25 @@
-import { styled as a, alpha as C, Stack as g, Typography as s } from "@mui/material";
-import { Widget as f } from "../widget/styled.js";
-import { variantColor as d, 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 = a(f.Root, {
+}, v = i(u.Root, {
   name: "HCMetricCard",
   slot: "Root",
   ...e
-})(({ theme: o, ownerState: i }) => {
-  const n = d(o, i.variant), t = i.layout === "panel";
-  let r;
-  return n ? r = C(n, 0.05) : t && (r = o.palette.background.default), {
+})(({ theme: o, ownerState: n }) => {
+  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 = a(g, {
+}), y = i(C, {
   name: "HCMetricCard",
   slot: "Content"
 })(() => ({
@@ -27,46 +27,64 @@ const e = {
   width: "100%",
   minWidth: 0,
   zIndex: 1
-})), m = a(s, {
+})), k = i(c, {
   name: "HCMetricCard",
   slot: "Label"
 })(({ theme: o }) => ({
   color: o.palette.text.secondary,
   marginBottom: o.spacing(0.5),
   fontWeight: 500
-})), k = a(s, {
+})), m = i(c, {
   name: "HCMetricCard",
   slot: "Value",
   ...e
-})(({ theme: o, ownerState: i }) => {
-  const n = p(o, i.calculatedValueColor), t = p(o, i.calculatedValueBg);
+})(({ theme: o, ownerState: n }) => {
+  const a = d(o, n.calculatedValueColor), r = d(o, n.calculatedValueBg);
   return {
-    color: n ?? d(o, i.variant) ?? o.palette.text.primary,
+    color: a ?? l(o, n.variant) ?? o.palette.text.primary,
     fontWeight: 500,
     marginBottom: o.spacing(0.5),
     whiteSpace: "nowrap",
-    ...t && {
-      backgroundColor: t,
+    ...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" }
   };
-}), I = a("div", {
+}), S = i(c, {
+  name: "HCMetricCard",
+  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: i }) => {
-  const n = u(o, i.calculatedTrend), t = i.layout === "panel";
+})(({ theme: o, ownerState: n }) => {
+  const a = f(o, n.calculatedTrend), r = n.layout === "panel";
   return {
     display: "inline-flex",
     alignItems: "center",
     gap: o.spacing(0.5),
     fontWeight: 500,
-    color: n,
-    ...t ? {
-      backgroundColor: C(n, 0.14),
+    color: a,
+    ...r ? {
+      backgroundColor: g(a, 0.14),
       borderRadius: 999,
       padding: o.spacing(0.25, 1),
       fontSize: "0.8125rem",
@@ -79,7 +97,7 @@ const e = {
       }
     }
   };
-}), H = a(s, {
+}), I = i(c, {
   name: "HCMetricCard",
   slot: "Description"
 })(({ theme: o }) => ({
@@ -87,37 +105,37 @@ const e = {
   display: "block",
   position: "relative",
   zIndex: 1
-})), P = a("div", {
+})), R = i("div", {
   name: "HCMetricCard",
   slot: "Icon",
   ...e
-})(({ theme: o, ownerState: i }) => ({
+})(({ theme: o, ownerState: n }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  color: d(o, i.variant) ?? o.palette.text.secondary,
-  marginRight: i.iconPosition === "left" ? o.spacing(2) : 0,
-  marginLeft: i.iconPosition === "right" ? o.spacing(2) : 0,
+  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")]: {
     position: "absolute",
     top: o.spacing(2),
     left: o.spacing(2),
     margin: 0
   }
-})), R = a("div", {
+})), w = i("div", {
   name: "HCMetricCard",
   slot: "CornerIcon",
   ...e
-})(({ theme: o, ownerState: i }) => {
-  var l, c;
-  const n = {}, t = (l = i.iconPosition) != null && l.startsWith("top") ? "top" : "bottom", r = (c = i.iconPosition) != null && c.endsWith("left") ? "left" : "right";
-  return n[t] = o.spacing(2), n[r] = o.spacing(2), {
+})(({ theme: o, ownerState: n }) => {
+  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",
-    ...n,
-    color: d(o, i.variant) ?? o.palette.text.secondary,
+    ...a,
+    color: l(o, n.variant) ?? o.palette.text.secondary,
     zIndex: 2
   };
-}), w = a("div", {
+}), z = i("div", {
   name: "HCMetricCard",
   slot: "Chart"
 })(({ theme: o }) => ({
@@ -130,7 +148,7 @@ const e = {
   alignItems: "flex-end",
   overflow: "hidden",
   borderRadius: o.shape.borderRadius
-})), z = a("div", {
+})), P = i("div", {
   name: "HCMetricCard",
   slot: "Panel"
 })(({ theme: o }) => ({
@@ -147,7 +165,7 @@ const e = {
   backgroundColor: o.palette.background.paper,
   boxShadow: o.shadows[1],
   overflow: "hidden"
-})), S = a("div", {
+})), W = i("div", {
   name: "HCMetricCard",
   slot: "SideChart"
 })(() => ({
@@ -160,15 +178,16 @@ const e = {
   alignItems: "flex-end"
 }));
 export {
-  w as MetricCardChartContainer,
+  z as MetricCardChartContainer,
   y as MetricCardContent,
-  R as MetricCardCornerIconContainer,
-  H as MetricCardDescription,
-  P as MetricCardIconContainer,
-  m as MetricCardLabel,
-  z as MetricCardPanel,
+  w as MetricCardCornerIconContainer,
+  I as MetricCardDescription,
+  R as MetricCardIconContainer,
+  k as MetricCardLabel,
+  P as MetricCardPanel,
   v as MetricCardRoot,
-  S as MetricCardSideChart,
-  I as MetricCardTrendContainer,
-  k as MetricCardValue
+  S as MetricCardSecondValue,
+  W as MetricCardSideChart,
+  H as MetricCardTrendContainer,
+  m as MetricCardValue
 };

package/dist/components/simple-pivot-table/index.js

@@ -1,4 +1,4 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { Typography as i, Divider as f, TableContainer as I, Table as R, TableHead as j, TableRow as g, TableCell as r, TableBody as w, Box as D, IconButton as G } from "@mui/material";
 import { useSimplePivotTableLogic as J } from "./logic.js";
 import { SimplePivotTableRoot as M, SimplePivotTableHeader as O, SimplePivotTableContent as V, SimplePivotTableFooter as X, SimplePivotTableScrollHint as q } from "./styled.js";
@@ -19,7 +19,7 @@ const Z = (s) => {
     formatDimensionValue: y,
     formatCell: C,
     getCellStyle: F,
-    ownerState: t,
+    ownerState: o,
     scrollRef: N,
     canScroll: k,
     scrollModifierLabel: P,
@@ -33,18 +33,18 @@ const Z = (s) => {
     data: h,
     summaries: v
   };
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ t(
     M,
     {
-      ownerState: t,
+      ownerState: o,
       sx: H,
       "data-snapshot": JSON.stringify(W),
       ...L,
       children: [
-        /* @__PURE__ */ e(O, { ownerState: t, children: /* @__PURE__ */ e(i, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: m }) }),
+        /* @__PURE__ */ e(O, { ownerState: o, children: /* @__PURE__ */ e(i, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: m }) }),
         /* @__PURE__ */ e(f, {}),
-        /* @__PURE__ */ e(V, { ownerState: t, children: /* @__PURE__ */ e(I, { ref: N, children: /* @__PURE__ */ o(R, { size: "small", stickyHeader: !0, children: [
-          /* @__PURE__ */ e(j, { children: /* @__PURE__ */ o(g, { children: [
+        /* @__PURE__ */ e(V, { ownerState: o, children: /* @__PURE__ */ e(I, { ref: N, children: /* @__PURE__ */ t(R, { size: "small", stickyHeader: !0, children: [
+          /* @__PURE__ */ e(j, { children: /* @__PURE__ */ t(g, { children: [
             n.map((l) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: x(l) }) }, l.value)),
             c.map((l) => /* @__PURE__ */ e(
               r,
@@ -62,7 +62,7 @@ const Z = (s) => {
               l.dataFieldName
             ))
           ] }) }),
-          /* @__PURE__ */ e(w, { children: h.map((l, z) => /* @__PURE__ */ o(
+          /* @__PURE__ */ e(w, { children: h.map((l, z) => /* @__PURE__ */ t(
             g,
             {
               hover: !0,
@@ -90,7 +90,7 @@ const Z = (s) => {
                         {
                           variant: "body2",
                           fontWeight: 500,
-                          color: u.color ?? "primary.main",
+                          color: u.color ?? "text.primary",
                           children: C(l[a.dataFieldName], a.format)
                         }
                       )
@@ -104,13 +104,13 @@ const Z = (s) => {
           )) })
         ] }) }) }),
         /* @__PURE__ */ e(f, {}),
-        /* @__PURE__ */ o(X, { ownerState: t, children: [
-          k && /* @__PURE__ */ e(q, { ownerState: t, children: /* @__PURE__ */ o(i, { variant: "caption", children: [
+        /* @__PURE__ */ t(X, { ownerState: o, children: [
+          k && /* @__PURE__ */ e(q, { ownerState: o, children: /* @__PURE__ */ t(i, { variant: "caption", children: [
             "Hold ",
             P,
             " to scroll"
           ] }) }),
-          d ? /* @__PURE__ */ o(
+          d ? /* @__PURE__ */ t(
             D,
             {
               sx: {
@@ -122,7 +122,7 @@ const Z = (s) => {
               },
               children: [
                 /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: d.name }),
-                d.items.map((l) => /* @__PURE__ */ o(i, { variant: "caption", color: "text.secondary", children: [
+                d.items.map((l) => /* @__PURE__ */ t(i, { variant: "caption", color: "text.secondary", children: [
                   l.label,
                   ": ",
                   l.value

package/dist/main.d.ts

@@ -260,6 +260,15 @@ export declare interface ChartProps {
      * a custom theme to override per-deployment.
      */
     colors?: readonly string[];
+    /**
+     * Controls whether a line series bridges gaps in the data. When `true` (the
+     * default) the line is drawn continuously across missing points. When `false`,
+     * the line breaks wherever data is missing — on a date axis a gap is detected
+     * when the spacing between adjacent points exceeds the base interval, so
+     * absent dates become visible breaks instead of a straight fill. Line-type
+     * charts only.
+     */
+    connectMissingData?: boolean;
     sx?: SxProps<Theme>;
 }
 
@@ -1191,6 +1200,12 @@ export declare interface MetricCardDataPoint {
 export declare interface MetricCardProps {
     label: string;
     value: MetricCardDataPoint[];
+    // Optional denominator series rendered as a muted "value / secondValue" pair.
+    // Like `value`, only the latest point is shown; it never picks up conditional
+    // coloring. Formatted by `secondValueFormat` when set, else falls back to
+    // `format` (so a "/ " separator can be carried as `secondValueFormat.prefix`).
+    secondValue?: MetricCardDataPoint[];
+    secondValueFormat?: ValueFormat;
     description?: string;
     variant?: MetricVariant;
     loading?: boolean;
@@ -1634,9 +1649,11 @@ export declare type RelativeDatePreset =
 export declare const removeNotification: (id: string) => void;
 
 /**
- * Resolve the color/background contributed by the first matching conditional
- * rule. Returns an empty object when the value is non-numeric or nothing
- * matches, so callers can spread it safely.
+ * Resolve a value's text/background color: the format's base `color`/
+ * `backgroundColor` apply unconditionally, then the first matching conditional
+ * rule overrides them per-field (a rule that only sets one color keeps the base
+ * for the other). Returns an empty object when nothing is configured, so callers
+ * can spread it safely.
  */
 export declare const resolveConditionalStyle: (value: unknown, format?: ValueFormat) => {
     color?: string;
@@ -2176,7 +2193,12 @@ export declare interface ValueFormat {
     suffix?: string;
     /** Fixed number of fraction digits; defaults to "up to 2" when unset. */
     decimals?: number;
-    /** First matching rule wins. */
+    /** Base text color applied unconditionally (theme token path or CSS color). A
+     * matching `conditionalRules` entry overrides it. */
+    color?: string;
+    /** Base background color applied unconditionally. A matching rule overrides it. */
+    backgroundColor?: string;
+    /** First matching rule wins; its colors override the base `color`/`backgroundColor`. */
     conditionalRules?: ConditionalRule[];
 }
 
@@ -3321,6 +3343,7 @@ declare module "@mui/material/styles" {
       | "content"
       | "label"
       | "value"
+      | "secondValue"
       | "trendContainer"
       | "description"
       | "icon"

package/package.json

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