@hybridcore/ui 1.6.4 → 1.6.6

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

@@ -1,5 +1,5 @@
-const e = (r, a = "default") => {
-  switch (a) {
+const n = (r, t = "default") => {
+  switch (t) {
     case "primary":
       return r.palette.primary.main;
     case "success":
@@ -11,8 +11,15 @@ const e = (r, a = "default") => {
     default:
       return;
   }
-}, t = (r, a) => a === "up" ? r.palette.success.main : a === "down" ? r.palette.error.main : r.palette.text.secondary;
+}, o = (r, t) => {
+  if (!t) return;
+  let e = r.palette;
+  for (const a of t.split("."))
+    e = e && typeof e == "object" ? e[a] : void 0;
+  return typeof e == "string" ? e : t;
+}, s = (r, t) => t === "up" ? r.palette.success.main : t === "down" ? r.palette.error.main : r.palette.text.secondary;
 export {
-  t as trendColor,
-  e as variantColor
+  o as resolvePaletteColor,
+  s as trendColor,
+  n as variantColor
 };

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

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

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

@@ -1,16 +1,16 @@
-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";
+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";
 const e = {
   shouldForwardProp: (o) => o !== "ownerState"
-}, x = i(g.Root, {
+}, v = a(f.Root, {
   name: "HCMetricCard",
   slot: "Root",
   ...e
-})(({ theme: o, ownerState: t }) => {
-  const n = s(o, t.variant), a = t.layout === "panel";
+})(({ theme: o, ownerState: i }) => {
+  const n = d(o, i.variant), t = i.layout === "panel";
   let r;
-  return n ? r = p(n, 0.05) : a && (r = o.palette.background.default), {
+  return n ? r = C(n, 0.05) : t && (r = o.palette.background.default), {
     position: "relative",
     overflow: "hidden",
     padding: o.spacing(1.5, 2),
@@ -19,7 +19,7 @@ const e = {
       padding: o.spacing(1.5)
     }
   };
-}), m = i(C, {
+}), y = a(g, {
   name: "HCMetricCard",
   slot: "Content"
 })(() => ({
@@ -27,38 +27,46 @@ const e = {
   width: "100%",
   minWidth: 0,
   zIndex: 1
-})), v = i(d, {
+})), m = a(s, {
   name: "HCMetricCard",
   slot: "Label"
 })(({ theme: o }) => ({
   color: o.palette.text.secondary,
   marginBottom: o.spacing(0.5),
   fontWeight: 500
-})), y = i(d, {
+})), k = a(s, {
   name: "HCMetricCard",
   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", {
+})(({ theme: o, ownerState: i }) => {
+  const n = p(o, i.calculatedValueColor), t = p(o, i.calculatedValueBg);
+  return {
+    color: n ?? d(o, i.variant) ?? o.palette.text.primary,
+    fontWeight: 500,
+    marginBottom: o.spacing(0.5),
+    whiteSpace: "nowrap",
+    ...t && {
+      backgroundColor: t,
+      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", {
   name: "HCMetricCard",
   slot: "TrendContainer",
   ...e
-})(({ theme: o, ownerState: t }) => {
-  const n = f(o, t.calculatedTrend), a = t.layout === "panel";
+})(({ theme: o, ownerState: i }) => {
+  const n = u(o, i.calculatedTrend), t = i.layout === "panel";
   return {
     display: "inline-flex",
     alignItems: "center",
     gap: o.spacing(0.5),
     fontWeight: 500,
     color: n,
-    ...a ? {
-      backgroundColor: p(n, 0.14),
+    ...t ? {
+      backgroundColor: C(n, 0.14),
       borderRadius: 999,
       padding: o.spacing(0.25, 1),
       fontSize: "0.8125rem",
@@ -71,7 +79,7 @@ const e = {
       }
     }
   };
-}), k = i(d, {
+}), H = a(s, {
   name: "HCMetricCard",
   slot: "Description"
 })(({ theme: o }) => ({
@@ -79,37 +87,37 @@ const e = {
   display: "block",
   position: "relative",
   zIndex: 1
-})), w = i("div", {
+})), P = a("div", {
   name: "HCMetricCard",
   slot: "Icon",
   ...e
-})(({ theme: o, ownerState: t }) => ({
+})(({ theme: o, ownerState: i }) => ({
   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,
+  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,
   [o.breakpoints.down("sm")]: {
     position: "absolute",
     top: o.spacing(2),
     left: o.spacing(2),
     margin: 0
   }
-})), H = i("div", {
+})), R = a("div", {
   name: "HCMetricCard",
   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), {
+})(({ 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), {
     position: "absolute",
     ...n,
-    color: s(o, t.variant) ?? o.palette.text.secondary,
+    color: d(o, i.variant) ?? o.palette.text.secondary,
     zIndex: 2
   };
-}), P = i("div", {
+}), w = a("div", {
   name: "HCMetricCard",
   slot: "Chart"
 })(({ theme: o }) => ({
@@ -122,7 +130,7 @@ const e = {
   alignItems: "flex-end",
   overflow: "hidden",
   borderRadius: o.shape.borderRadius
-})), S = i("div", {
+})), z = a("div", {
   name: "HCMetricCard",
   slot: "Panel"
 })(({ theme: o }) => ({
@@ -139,7 +147,7 @@ const e = {
   backgroundColor: o.palette.background.paper,
   boxShadow: o.shadows[1],
   overflow: "hidden"
-})), z = i("div", {
+})), S = a("div", {
   name: "HCMetricCard",
   slot: "SideChart"
 })(() => ({
@@ -152,15 +160,15 @@ const e = {
   alignItems: "flex-end"
 }));
 export {
-  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,
+  w as MetricCardChartContainer,
+  y as MetricCardContent,
+  R as MetricCardCornerIconContainer,
+  H as MetricCardDescription,
+  P as MetricCardIconContainer,
+  m as MetricCardLabel,
+  z as MetricCardPanel,
+  v as MetricCardRoot,
+  S as MetricCardSideChart,
   I as MetricCardTrendContainer,
-  y as MetricCardValue
+  k as MetricCardValue
 };

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

@@ -1,66 +1,141 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Typography as r, Divider as p, TableContainer as S, Table as x, TableBody as y, TableRow as u, TableCell as b } from "@mui/material";
-import { useSimplePivotTableLogic as P } from "./logic.js";
-import { SimplePivotTableRoot as C, SimplePivotTableHeader as F, SimplePivotTableContent as N, SimplePivotTableFooter as j } from "./styled.js";
-const z = (n) => {
+import { jsxs as o, 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";
+import { I as A } from "../../IconX-C2wmVYSK.js";
+const Z = (s) => {
   const {
-    title: d,
-    dimensions: m,
+    title: m,
+    dimensions: n,
     values: c,
-    data: s,
-    aggregations: h,
-    formatCell: v,
-    ownerState: a,
-    sx: T,
-    other: g
-  } = P(n), f = {
-    title: d,
-    description: n.description,
-    dimensions: m,
+    data: h,
+    summaries: v,
+    selectedField: p,
+    selectedSummary: d,
+    selectColumn: b,
+    clearSelection: S,
+    dimensionLabel: x,
+    valueLabel: T,
+    formatDimensionValue: y,
+    formatCell: C,
+    getCellStyle: F,
+    ownerState: t,
+    scrollRef: N,
+    canScroll: k,
+    scrollModifierLabel: P,
+    sx: H,
+    other: L
+  } = J(s), W = {
+    title: m,
+    description: s.description,
+    dimensions: n,
     values: c,
-    data: s,
-    aggregations: h
+    data: h,
+    summaries: v
   };
-  return /* @__PURE__ */ l(
-    C,
+  return /* @__PURE__ */ o(
+    M,
     {
-      ownerState: a,
-      sx: T,
-      "data-snapshot": JSON.stringify(f),
-      ...g,
+      ownerState: t,
+      sx: H,
+      "data-snapshot": JSON.stringify(W),
+      ...L,
       children: [
-        /* @__PURE__ */ e(F, { ownerState: a, children: /* @__PURE__ */ e(r, { sx: { paddingLeft: "0.5rem" }, variant: "h3", children: d }) }),
-        /* @__PURE__ */ e(p, {}),
-        /* @__PURE__ */ e(N, { ownerState: a, children: /* @__PURE__ */ e(S, { children: /* @__PURE__ */ e(x, { size: "small", children: /* @__PURE__ */ e(y, { children: s.map((i, o) => /* @__PURE__ */ l(
-          u,
-          {
-            hover: !0,
-            sx: { "&:last-child td": { borderBottom: 0 } },
-            children: [
-              m.map((t) => /* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(r, { variant: "body2", children: i[t.value] ?? "—" }) }, t.value)),
-              c.map((t) => /* @__PURE__ */ e(b, { align: "right", children: /* @__PURE__ */ e(
-                r,
-                {
-                  variant: "body2",
-                  fontWeight: 500,
-                  color: "primary.main",
-                  children: v(i[t.dataFieldName])
-                }
-              ) }, t.dataFieldName))
-            ]
-          },
-          o
-        )) }) }) }) }),
-        /* @__PURE__ */ e(p, {}),
-        /* @__PURE__ */ e(j, { ownerState: a, children: h.map(({ label: i, value: o }) => /* @__PURE__ */ l(r, { variant: "caption", color: "text.disabled", children: [
-          i,
-          ": ",
-          o
-        ] }, i)) })
+        /* @__PURE__ */ e(O, { ownerState: t, 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: [
+            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,
+              {
+                align: "right",
+                onClick: () => b(l.dataFieldName),
+                sx: {
+                  cursor: "pointer",
+                  ...p === l.dataFieldName && {
+                    backgroundColor: "action.selected"
+                  }
+                },
+                children: /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: T(l) })
+              },
+              l.dataFieldName
+            ))
+          ] }) }),
+          /* @__PURE__ */ e(w, { children: h.map((l, z) => /* @__PURE__ */ o(
+            g,
+            {
+              hover: !0,
+              sx: { "&:last-child td": { borderBottom: 0 } },
+              children: [
+                n.map((a) => /* @__PURE__ */ e(r, { children: /* @__PURE__ */ e(i, { variant: "body2", children: y(l[a.value], a) }) }, a.value)),
+                c.map((a) => {
+                  const u = F(
+                    l[a.dataFieldName],
+                    a.format
+                  ), B = p === a.dataFieldName;
+                  return /* @__PURE__ */ e(
+                    r,
+                    {
+                      align: "right",
+                      onClick: () => b(a.dataFieldName),
+                      sx: {
+                        cursor: "pointer",
+                        // Conditional background wins; otherwise tint the
+                        // selected column.
+                        backgroundColor: u.backgroundColor ?? (B ? "action.hover" : void 0)
+                      },
+                      children: /* @__PURE__ */ e(
+                        i,
+                        {
+                          variant: "body2",
+                          fontWeight: 500,
+                          color: u.color ?? "primary.main",
+                          children: C(l[a.dataFieldName], a.format)
+                        }
+                      )
+                    },
+                    a.dataFieldName
+                  );
+                })
+              ]
+            },
+            z
+          )) })
+        ] }) }) }),
+        /* @__PURE__ */ e(f, {}),
+        /* @__PURE__ */ o(X, { ownerState: t, children: [
+          k && /* @__PURE__ */ e(q, { ownerState: t, children: /* @__PURE__ */ o(i, { variant: "caption", children: [
+            "Hold ",
+            P,
+            " to scroll"
+          ] }) }),
+          d ? /* @__PURE__ */ o(
+            D,
+            {
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                flexWrap: "wrap",
+                columnGap: 1.5,
+                rowGap: 0.5
+              },
+              children: [
+                /* @__PURE__ */ e(i, { variant: "caption", fontWeight: 600, children: d.name }),
+                d.items.map((l) => /* @__PURE__ */ o(i, { variant: "caption", color: "text.secondary", children: [
+                  l.label,
+                  ": ",
+                  l.value
+                ] }, l.label)),
+                /* @__PURE__ */ e(G, { size: "small", onClick: S, sx: { p: 0.25 }, children: /* @__PURE__ */ e(A, { size: 14 }) })
+              ]
+            }
+          ) : /* @__PURE__ */ e(i, { variant: "caption", color: "text.disabled", children: "Select a column to summarize" })
+        ] })
       ]
     }
   );
 };
 export {
-  z as SimplePivotTable
+  Z as SimplePivotTable
 };