@hybridcore/ui 1.6.16 → 1.6.17

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

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

package/dist/components/prr-map/components/controls/index.js

@@ -1,10 +1,11 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { Container as t, Button as r } from "./styled.js";
-import { I as s, a as l } from "../../../../IconPlus-yPkff_Vj.js";
-const m = ({ mapRef: n }) => n ? /* @__PURE__ */ i(t, { children: [
-  /* @__PURE__ */ o(r, { onClick: n.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
-  /* @__PURE__ */ o(r, { onClick: n.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
+import { Container as t, Button as n } from "./styled.js";
+import { I as s } from "../../../../IconPlus-7KPPhzOb.js";
+import { I as l } from "../../../../IconMinus-B6OPYVyo.js";
+const I = ({ mapRef: r }) => r ? /* @__PURE__ */ i(t, { children: [
+  /* @__PURE__ */ o(n, { onClick: r.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
+  /* @__PURE__ */ o(n, { onClick: r.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
 ] }) : null;
 export {
-  m as Controls
+  I as Controls
 };

package/dist/components/raster-grid-map/components/controls/index.js

@@ -1,10 +1,11 @@
 import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { Container as t, Button as r } from "./styled.js";
-import { I as s, a as l } from "../../../../IconPlus-yPkff_Vj.js";
-const m = ({ mapRef: n }) => n ? /* @__PURE__ */ i(t, { children: [
-  /* @__PURE__ */ o(r, { onClick: n.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
-  /* @__PURE__ */ o(r, { onClick: n.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
+import { Container as t, Button as n } from "./styled.js";
+import { I as s } from "../../../../IconPlus-7KPPhzOb.js";
+import { I as l } from "../../../../IconMinus-B6OPYVyo.js";
+const I = ({ mapRef: r }) => r ? /* @__PURE__ */ i(t, { children: [
+  /* @__PURE__ */ o(n, { onClick: r.zoomIn, children: /* @__PURE__ */ o(s, { size: 18 }) }),
+  /* @__PURE__ */ o(n, { onClick: r.zoomOut, children: /* @__PURE__ */ o(l, { size: 18 }) })
 ] }) : null;
 export {
-  m as Controls
+  I as Controls
 };

package/dist/components/status-indicator/index.js

@@ -0,0 +1,44 @@
+import { jsx as t, jsxs as e, Fragment as m } from "react/jsx-runtime";
+import { Stack as x, Skeleton as d } from "@mui/material";
+import { useStatusIndicatorLogic as v } from "./logic.js";
+import { StatusIndicatorRoot as o, StatusIndicatorCaption as b, StatusIndicatorDescription as f, StatusIndicatorIconContainer as h, StatusIndicatorContent as g, StatusIndicatorLabel as u, StatusIndicatorValue as I, StatusIndicatorBadge as w } from "./styled.js";
+const j = (i) => {
+  const { state: S } = v(i), { ownerState: n, variant: r, activeLabel: c, Icon: a } = S;
+  if (i.loading)
+    return /* @__PURE__ */ t(o, { ownerState: n, sx: i.sx, children: /* @__PURE__ */ e(
+      x,
+      {
+        spacing: 1,
+        alignItems: r === "prominent" ? "center" : "flex-start",
+        children: [
+          /* @__PURE__ */ t(d, { variant: "text", width: "50%" }),
+          /* @__PURE__ */ t(d, { variant: "circular", width: 40, height: 40 }),
+          /* @__PURE__ */ t(d, { variant: "text", width: "70%" })
+        ]
+      }
+    ) });
+  const l = i.caption && /* @__PURE__ */ t(b, { variant: "caption", children: i.caption }), s = i.description && /* @__PURE__ */ t(f, { variant: "body2", children: i.description });
+  return r === "split" ? /* @__PURE__ */ e(o, { ownerState: n, sx: i.sx, children: [
+    a && /* @__PURE__ */ t(h, { ownerState: n, children: /* @__PURE__ */ t(a, { size: 28 }) }),
+    /* @__PURE__ */ e(g, { children: [
+      i.label && /* @__PURE__ */ t(u, { variant: "body2", children: i.label }),
+      /* @__PURE__ */ t(I, { variant: "h5", ownerState: n, children: c }),
+      l,
+      s
+    ] })
+  ] }) : /* @__PURE__ */ e(o, { ownerState: n, sx: i.sx, children: [
+    i.label && /* @__PURE__ */ t(u, { variant: "body2", children: i.label }),
+    r === "prominent" ? /* @__PURE__ */ e(m, { children: [
+      a && /* @__PURE__ */ t(h, { ownerState: n, children: /* @__PURE__ */ t(a, { size: 48 }) }),
+      /* @__PURE__ */ t(I, { variant: "h4", ownerState: n, children: c })
+    ] }) : /* @__PURE__ */ e(w, { ownerState: n, children: [
+      a && /* @__PURE__ */ t(a, { size: 18 }),
+      c
+    ] }),
+    l,
+    s
+  ] });
+};
+export {
+  j as StatusIndicator
+};

package/dist/components/status-indicator/logic.js

@@ -0,0 +1,105 @@
+import { useThemeProps as u } from "@mui/material";
+import { a as w, b as k, I as v } from "../../IconTrendingUp-CW4SFYmc.js";
+import { c as n } from "../../createReactComponent-C7L-DMHj.js";
+import { I } from "../../IconMinus-B6OPYVyo.js";
+import { I as y } from "../../IconCircle-HcgE1lHy.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 M = [["path", { d: "M12 9v4", key: "svg-0" }], ["path", { d: "M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0", key: "svg-1" }], ["path", { d: "M12 16h.01", key: "svg-2" }]], m = n("outline", "alert-triangle", "AlertTriangle", M);
+/**
+ * @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 C = [["path", { d: "M12 5l0 14", key: "svg-0" }], ["path", { d: "M18 13l-6 6", key: "svg-1" }], ["path", { d: "M6 13l6 6", key: "svg-2" }]], _ = n("outline", "arrow-down", "ArrowDown", C);
+/**
+ * @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 $ = [["path", { d: "M12 5l0 14", key: "svg-0" }], ["path", { d: "M18 11l-6 -6", key: "svg-1" }], ["path", { d: "M6 11l6 -6", key: "svg-2" }]], N = n("outline", "arrow-up", "ArrowUp", $);
+/**
+ * @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 b = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 1 0 -18 0", key: "svg-0" }], ["path", { d: "M5.7 5.7l12.6 12.6", key: "svg-1" }]], f = n("outline", "ban", "Ban", b);
+/**
+ * @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: "M6 10l6 6l6 -6h-12", key: "svg-0" }]], D = n("outline", "caret-down", "CaretDown", A);
+/**
+ * @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 L = [["path", { d: "M18 14l-6 -6l-6 6h12", key: "svg-0" }]], T = n("outline", "caret-up", "CaretUp", L);
+/**
+ * @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 U = [["path", { d: "M5 12l5 5l10 -10", key: "svg-0" }]], B = n("outline", "check", "Check", U);
+/**
+ * @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 H = [["path", { d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", key: "svg-0" }], ["path", { d: "M12 16v.01", key: "svg-1" }], ["path", { d: "M12 13a2 2 0 0 0 .914 -3.782a1.98 1.98 0 0 0 -2.414 .483", key: "svg-2" }]], R = n("outline", "help-circle", "HelpCircle", H), x = {
+  "trending-up": w,
+  "trending-down": k,
+  "arrow-right": v,
+  "arrow-up": N,
+  "arrow-down": _,
+  "caret-up": T,
+  "caret-down": D,
+  minus: I,
+  ban: f,
+  help: R,
+  check: B,
+  alert: m,
+  circle: y
+}, z = (p) => {
+  const t = u({ props: p, name: "HCStatusIndicator" }), {
+    value: e,
+    states: d = [],
+    variant: c = "prominent",
+    showIcon: s = !0,
+    emptyLabel: a = "—"
+  } = t, r = e != null && `${e}`.trim() !== "", o = r ? d.find((g) => `${g.value}`.toLowerCase() === `${e}`.toLowerCase()) : void 0, l = (o == null ? void 0 : o.label) ?? (r ? `${e}` : a), i = s && (o != null && o.icon) ? x[o.icon] : void 0, h = {
+    ...t,
+    variant: c,
+    showIcon: s,
+    emptyLabel: a,
+    activeLabel: l,
+    resolvedColor: o == null ? void 0 : o.color,
+    resolvedBackgroundColor: o == null ? void 0 : o.backgroundColor,
+    hasValue: r
+  };
+  return {
+    refs: {},
+    state: {
+      ownerState: h,
+      variant: c,
+      activeLabel: l,
+      Icon: i
+    },
+    actions: {}
+  };
+};
+export {
+  z as useStatusIndicatorLogic
+};

package/dist/components/status-indicator/styled.js

@@ -0,0 +1,114 @@
+import { styled as a, Typography as i, alpha as l } from "@mui/material";
+import { resolvePaletteColor as r } from "../metric-card/helpers.js";
+import { Widget as d } from "../widget/styled.js";
+const s = {
+  shouldForwardProp: (t) => t !== "ownerState"
+}, C = a(d.Root, {
+  name: "HCStatusIndicator",
+  slot: "Root",
+  ...s
+})(({ theme: t, ownerState: o }) => {
+  const n = {
+    padding: t.spacing(2),
+    display: "flex",
+    gap: t.spacing(0.5)
+  };
+  return o.variant === "prominent" ? {
+    ...n,
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    textAlign: "center"
+  } : o.variant === "split" ? {
+    ...n,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: t.spacing(2)
+  } : {
+    ...n,
+    flexDirection: "column",
+    alignItems: "flex-start",
+    justifyContent: "center"
+  };
+}), f = a(i, {
+  name: "HCStatusIndicator",
+  slot: "Label"
+})(({ theme: t }) => ({
+  color: t.palette.text.secondary,
+  fontWeight: 500
+})), I = a("div", {
+  name: "HCStatusIndicator",
+  slot: "IconContainer",
+  ...s
+})(({ theme: t, ownerState: o }) => {
+  const n = r(t, o.resolvedColor) ?? t.palette.text.primary, e = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    color: n
+  };
+  if (o.variant === "split") {
+    const c = r(t, o.resolvedBackgroundColor) ?? l(n, 0.12);
+    return {
+      ...e,
+      flexShrink: 0,
+      width: 56,
+      height: 56,
+      borderRadius: t.shape.borderRadius * 2,
+      backgroundColor: c
+    };
+  }
+  return e;
+}), x = a("div", {
+  name: "HCStatusIndicator",
+  slot: "Content"
+})(() => ({
+  display: "flex",
+  flexDirection: "column",
+  minWidth: 0,
+  flex: 1
+})), m = a(i, {
+  name: "HCStatusIndicator",
+  slot: "Value",
+  ...s
+})(({ theme: t, ownerState: o }) => ({
+  fontWeight: 600,
+  lineHeight: 1.2,
+  color: r(t, o.resolvedColor) ?? t.palette.text.primary
+})), y = a("div", {
+  name: "HCStatusIndicator",
+  slot: "Badge",
+  ...s
+})(({ theme: t, ownerState: o }) => {
+  const n = r(t, o.resolvedColor) ?? t.palette.text.primary, e = r(t, o.resolvedBackgroundColor) ?? l(n, 0.12);
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: t.spacing(0.75),
+    padding: t.spacing(0.5, 1.25),
+    borderRadius: 999,
+    backgroundColor: e,
+    color: n,
+    fontWeight: 600
+  };
+}), S = a(i, {
+  name: "HCStatusIndicator",
+  slot: "Caption"
+})(({ theme: t }) => ({
+  color: t.palette.text.secondary
+})), v = a(i, {
+  name: "HCStatusIndicator",
+  slot: "Description"
+})(({ theme: t }) => ({
+  color: t.palette.text.secondary
+}));
+export {
+  y as StatusIndicatorBadge,
+  S as StatusIndicatorCaption,
+  x as StatusIndicatorContent,
+  v as StatusIndicatorDescription,
+  I as StatusIndicatorIconContainer,
+  f as StatusIndicatorLabel,
+  C as StatusIndicatorRoot,
+  m as StatusIndicatorValue
+};

package/dist/main.d.ts

@@ -1936,6 +1936,58 @@ export declare interface StatsBoxProps extends BoxProps {
     icon?: default_2.ReactNode;
 }
 
+export declare type StatusIconName =
+| "trending-up"
+| "trending-down"
+| "arrow-right"
+| "arrow-up"
+| "arrow-down"
+| "caret-up"
+| "caret-down"
+| "minus"
+| "ban"
+| "help"
+| "check"
+| "alert"
+| "circle";
+
+export declare const StatusIndicator: (props: StatusIndicatorProps) => JSX_2.Element;
+
+export declare type StatusIndicatorComponentOverride<Theme = unknown> = {
+    defaultProps?: StatusIndicatorProps;
+    styleOverrides?: ComponentsOverrides_2<Theme>["HCStatusIndicator"];
+};
+
+export declare interface StatusIndicatorProps {
+    // The current categorical value, e.g. "DOWN". Bound at runtime from an ontology
+    // instance's enum variable (response.variables.enum.priceDirection).
+    value?: string;
+    // Heading shown above the state (e.g. "Gold Price Direction").
+    label?: string;
+    // Optional subtitle beneath the state.
+    description?: string;
+    // Small supporting line (e.g. the forecast date).
+    caption?: string;
+    // The state map — which value renders which label/color/icon.
+    states?: StatusState[];
+    variant?: StatusIndicatorVariant;
+    showIcon?: boolean;
+    // Text rendered when `value` matches no configured state.
+    emptyLabel?: string;
+    loading?: boolean;
+    sx?: SxProps<Theme>;
+}
+
+export declare type StatusIndicatorVariant = "prominent" | "badge" | "split";
+
+export declare interface StatusState {
+    value: string;
+    label?: string;
+    color?: string;
+    backgroundColor?: string;
+    icon?: StatusIconName;
+}
+
 export declare interface StringRangeProps {
     value: SIMULATION.RandomInfoString;
     variant?: RangeSelectorVariant;
@@ -3549,6 +3601,30 @@ declare module "@mui/material/styles" {
 
 
 
+declare module "@mui/material/styles" {
+  interface ComponentNameToClassKey {
+    HCStatusIndicator:
+      | "root"
+      | "label"
+      | "iconContainer"
+      | "content"
+      | "value"
+      | "badge"
+      | "caption"
+      | "description";
+  }
+
+  interface ComponentsPropsList {
+    HCStatusIndicator: StatusIndicatorProps;
+  }
+
+  interface Components<Theme = unknown> {
+    HCStatusIndicator?: StatusIndicatorComponentOverride<Theme>;
+  }
+}
+
+
+
 declare module "@mui/material/styles" {
   interface ComponentNameToClassKey {
     HCPlaceholder: "root";