@hybridcore/ui 1.6.20 → 1.6.22

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

@@ -1,25 +1,25 @@
-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";
+import { styled as t, alpha as g, Stack as C, Typography as l } from "@mui/material";
+import { Widget as f } from "../widget/styled.js";
+import { variantColor as s, resolvePaletteColor as d, trendColor as u } from "./helpers.js";
 const e = {
   shouldForwardProp: (o) => o !== "ownerState"
-}, v = i(u.Root, {
+}, M = t(f.Root, {
   name: "HCMetricCard",
   slot: "Root",
   ...e
-})(({ 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), {
+})(({ theme: o, ownerState: i }) => {
+  const n = s(o, i.variant), a = i.layout === "panel";
+  let r;
+  return n ? r = g(n, 0.05) : a && (r = o.palette.background.default), {
     position: "relative",
     overflow: "hidden",
     padding: o.spacing(1.5, 2),
-    ...t && { backgroundColor: t },
+    ...r && { backgroundColor: r },
     [o.breakpoints.down("md")]: {
       padding: o.spacing(1.5)
     }
   };
-}), y = i(C, {
+}), w = t(C, {
   name: "HCMetricCard",
   slot: "Content"
 })(() => ({
@@ -27,64 +27,79 @@ const e = {
   width: "100%",
   minWidth: 0,
   zIndex: 1
-})), k = i(c, {
+})), m = t(l, {
   name: "HCMetricCard",
   slot: "Label"
 })(({ theme: o }) => ({
   color: o.palette.text.secondary,
   marginBottom: o.spacing(0.5),
-  fontWeight: 500
-})), m = i(c, {
+  fontWeight: 500,
+  // Widgets live in a resizable grid with no character limit — clip to one line
+  // so a long label never wraps into a messy multi-row block. Full text on hover.
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  minWidth: 0
+})), y = t(l, {
   name: "HCMetricCard",
   slot: "Value",
   ...e
-})(({ theme: o, ownerState: n }) => {
-  const a = d(o, n.calculatedValueColor), r = d(o, n.calculatedValueBg);
+})(({ theme: o, ownerState: i }) => {
+  const n = d(o, i.calculatedValueColor), a = d(o, i.calculatedValueBg);
   return {
-    color: a ?? l(o, n.variant) ?? o.palette.text.primary,
+    color: n ?? s(o, i.variant) ?? o.palette.text.primary,
     fontWeight: 500,
     marginBottom: o.spacing(0.5),
     whiteSpace: "nowrap",
-    ...r && {
-      backgroundColor: r,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "100%",
+    minWidth: 0,
+    ...a && {
+      backgroundColor: a,
       borderRadius: o.shape.borderRadius,
       padding: o.spacing(0, 0.75)
     },
     [o.breakpoints.down("md")]: { fontSize: "1.35rem" },
     [o.breakpoints.up("md")]: { fontSize: "2rem" }
   };
-}), S = i(c, {
+}), W = t(l, {
   name: "HCMetricCard",
   slot: "SecondValue",
   ...e
-})(({ theme: o, ownerState: n }) => {
-  const a = d(o, n.calculatedSecondValueColor), r = d(o, n.calculatedSecondValueBg);
+})(({ theme: o, ownerState: i }) => {
+  const n = d(o, i.calculatedSecondValueColor), a = d(o, i.calculatedSecondValueBg);
   return {
-    color: a ?? o.palette.text.secondary,
+    color: n ?? o.palette.text.secondary,
     fontWeight: 400,
     whiteSpace: "nowrap",
-    ...r && {
-      backgroundColor: r,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    maxWidth: "100%",
+    minWidth: 0,
+    ...a && {
+      backgroundColor: a,
       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", {
+}), S = t("div", {
   name: "HCMetricCard",
   slot: "TrendContainer",
   ...e
-})(({ theme: o, ownerState: n }) => {
-  const a = f(o, n.calculatedTrend), r = n.layout === "panel";
+})(({ theme: o, ownerState: i }) => {
+  const n = u(o, i.calculatedTrend), a = i.layout === "panel";
   return {
     display: "inline-flex",
     alignItems: "center",
     gap: o.spacing(0.5),
     fontWeight: 500,
-    color: a,
-    ...r ? {
-      backgroundColor: g(a, 0.14),
+    color: n,
+    ...a ? {
+      backgroundColor: g(n, 0.14),
       borderRadius: 999,
       padding: o.spacing(0.25, 1),
       fontSize: "0.8125rem",
@@ -97,45 +112,49 @@ const e = {
       }
     }
   };
-}), I = i(c, {
+}), h = t(l, {
   name: "HCMetricCard",
   slot: "Description"
 })(({ theme: o }) => ({
   color: o.palette.text.secondary,
-  display: "block",
   position: "relative",
-  zIndex: 1
-})), R = i("div", {
+  zIndex: 1,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  minWidth: 0
+})), k = t("div", {
   name: "HCMetricCard",
   slot: "Icon",
   ...e
-})(({ theme: o, ownerState: n }) => ({
+})(({ theme: o, ownerState: i }) => ({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  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,
+  color: s(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
   }
-})), w = i("div", {
+})), H = t("div", {
   name: "HCMetricCard",
   slot: "CornerIcon",
   ...e
-})(({ 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), {
+})(({ theme: o, ownerState: i }) => {
+  var c, p;
+  const n = {}, a = (c = i.iconPosition) != null && c.startsWith("top") ? "top" : "bottom", r = (p = i.iconPosition) != null && p.endsWith("left") ? "left" : "right";
+  return n[a] = o.spacing(2), n[r] = o.spacing(2), {
     position: "absolute",
-    ...a,
-    color: l(o, n.variant) ?? o.palette.text.secondary,
+    ...n,
+    color: s(o, i.variant) ?? o.palette.text.secondary,
     zIndex: 2
   };
-}), z = i("div", {
+}), I = t("div", {
   name: "HCMetricCard",
   slot: "Chart"
 })(({ theme: o }) => ({
@@ -148,7 +167,7 @@ const e = {
   alignItems: "flex-end",
   overflow: "hidden",
   borderRadius: o.shape.borderRadius
-})), P = i("div", {
+})), R = t("div", {
   name: "HCMetricCard",
   slot: "Panel"
 })(({ theme: o }) => ({
@@ -165,7 +184,7 @@ const e = {
   backgroundColor: o.palette.background.paper,
   boxShadow: o.shadows[1],
   overflow: "hidden"
-})), W = i("div", {
+})), z = t("div", {
   name: "HCMetricCard",
   slot: "SideChart"
 })(() => ({
@@ -178,16 +197,16 @@ const e = {
   alignItems: "flex-end"
 }));
 export {
-  z as MetricCardChartContainer,
-  y as MetricCardContent,
-  w as MetricCardCornerIconContainer,
-  I as MetricCardDescription,
-  R as MetricCardIconContainer,
-  k as MetricCardLabel,
-  P as MetricCardPanel,
-  v as MetricCardRoot,
-  S as MetricCardSecondValue,
-  W as MetricCardSideChart,
-  H as MetricCardTrendContainer,
-  m as MetricCardValue
+  I as MetricCardChartContainer,
+  w as MetricCardContent,
+  H as MetricCardCornerIconContainer,
+  h as MetricCardDescription,
+  k as MetricCardIconContainer,
+  m as MetricCardLabel,
+  R as MetricCardPanel,
+  M as MetricCardRoot,
+  W as MetricCardSecondValue,
+  z as MetricCardSideChart,
+  S as MetricCardTrendContainer,
+  y as MetricCardValue
 };

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

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

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

@@ -1,65 +1,72 @@
-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 = {
+import { styled as n, Typography as r, alpha as s } from "@mui/material";
+import { resolvePaletteColor as a } from "../metric-card/helpers.js";
+import { Widget as c } from "../widget/styled.js";
+const l = {
   shouldForwardProp: (t) => t !== "ownerState"
-}, C = a(d.Root, {
+}, g = n(c.Root, {
   name: "HCStatusIndicator",
   slot: "Root",
-  ...s
+  ...l
 })(({ theme: t, ownerState: o }) => {
-  const n = {
+  const e = {
     padding: t.spacing(2),
     display: "flex",
     gap: t.spacing(0.5)
   };
   return o.variant === "prominent" ? {
-    ...n,
+    ...e,
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
     textAlign: "center"
   } : o.variant === "split" ? {
-    ...n,
+    ...e,
     flexDirection: "row",
     alignItems: "center",
     gap: t.spacing(2)
   } : {
-    ...n,
+    ...e,
     flexDirection: "column",
     alignItems: "flex-start",
     justifyContent: "center"
   };
-}), f = a(i, {
+}), x = n(r, {
   name: "HCStatusIndicator",
   slot: "Label"
 })(({ theme: t }) => ({
   color: t.palette.text.secondary,
-  fontWeight: 500
-})), I = a("div", {
+  fontWeight: 500,
+  // Widgets live in a resizable grid with no character limit — clip to one line
+  // so long text never overflows or wraps into a messy block. Full text on hover.
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  minWidth: 0
+})), m = n("div", {
   name: "HCStatusIndicator",
   slot: "IconContainer",
-  ...s
+  ...l
 })(({ theme: t, ownerState: o }) => {
-  const n = r(t, o.resolvedColor) ?? t.palette.text.primary, e = {
+  const e = a(t, o.resolvedColor) ?? t.palette.text.primary, i = {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    color: n
+    color: e
   };
   if (o.variant === "split") {
-    const c = r(t, o.resolvedBackgroundColor) ?? l(n, 0.12);
+    const d = a(t, o.resolvedBackgroundColor) ?? s(e, 0.12);
     return {
-      ...e,
+      ...i,
       flexShrink: 0,
       width: 56,
       height: 56,
       borderRadius: t.shape.borderRadius * 2,
-      backgroundColor: c
+      backgroundColor: d
     };
   }
-  return e;
-}), x = a("div", {
+  return i;
+}), C = n("div", {
   name: "HCStatusIndicator",
   slot: "Content"
 })(() => ({
@@ -67,48 +74,77 @@ const s = {
   flexDirection: "column",
   minWidth: 0,
   flex: 1
-})), m = a(i, {
+})), h = n(r, {
   name: "HCStatusIndicator",
   slot: "Value",
-  ...s
+  ...l
 })(({ theme: t, ownerState: o }) => ({
   fontWeight: 600,
   lineHeight: 1.2,
-  color: r(t, o.resolvedColor) ?? t.palette.text.primary
-})), y = a("div", {
+  color: a(t, o.resolvedColor) ?? t.palette.text.primary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  minWidth: 0
+})), I = n("div", {
   name: "HCStatusIndicator",
   slot: "Badge",
-  ...s
+  ...l
 })(({ theme: t, ownerState: o }) => {
-  const n = r(t, o.resolvedColor) ?? t.palette.text.primary, e = r(t, o.resolvedBackgroundColor) ?? l(n, 0.12);
+  const e = a(t, o.resolvedColor) ?? t.palette.text.primary, i = a(t, o.resolvedBackgroundColor) ?? s(e, 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
+    backgroundColor: i,
+    color: e,
+    fontWeight: 600,
+    maxWidth: "100%",
+    overflow: "hidden",
+    // The icon must never shrink; only the label text ellipsizes.
+    "& > svg": { flexShrink: 0 }
   };
-}), S = a(i, {
+}), v = n("span", {
+  name: "HCStatusIndicator",
+  slot: "BadgeLabel"
+})(() => ({
+  flex: "0 1 auto",
+  minWidth: 0,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+})), S = n(r, {
   name: "HCStatusIndicator",
   slot: "Caption"
 })(({ theme: t }) => ({
-  color: t.palette.text.secondary
-})), v = a(i, {
+  color: t.palette.text.secondary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  minWidth: 0
+})), w = n(r, {
   name: "HCStatusIndicator",
   slot: "Description"
 })(({ theme: t }) => ({
-  color: t.palette.text.secondary
+  color: t.palette.text.secondary,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  maxWidth: "100%",
+  minWidth: 0
 }));
 export {
-  y as StatusIndicatorBadge,
+  I as StatusIndicatorBadge,
+  v as StatusIndicatorBadgeLabel,
   S as StatusIndicatorCaption,
-  x as StatusIndicatorContent,
-  v as StatusIndicatorDescription,
-  I as StatusIndicatorIconContainer,
-  f as StatusIndicatorLabel,
-  C as StatusIndicatorRoot,
-  m as StatusIndicatorValue
+  C as StatusIndicatorContent,
+  w as StatusIndicatorDescription,
+  m as StatusIndicatorIconContainer,
+  x as StatusIndicatorLabel,
+  g as StatusIndicatorRoot,
+  h as StatusIndicatorValue
 };

package/dist/main.d.ts

@@ -97,7 +97,7 @@ export declare interface BaseInterval {
     count: number;
 }
 
-export declare const Button: (props: ButtonProps) => JSX_2.Element;
+export declare const Button: (props: ButtonProps & default_2.RefAttributes<HTMLButtonElement>) => default_2.ReactNode | null;
 
 export declare type ButtonComponentOverride<Theme = unknown> = {
     defaultProps?: Partial<ButtonProps>;
@@ -232,6 +232,7 @@ export declare interface ChartDimension {
 
 export declare type ChartNameType =
 | "HeatLegend"
+| "Histogram"
 | "XYChart"
 | "XYChartHorizontal"
 | "MultipleValueAxes"
@@ -955,6 +956,36 @@ export declare interface HighlightLineChartProps {
     sx?: SxProps<Theme>;
 }
 
+export declare const Histogram: (inProps: HistogramProps) => JSX_2.Element;
+
+export declare type HistogramComponentOverride<Theme = unknown> = {
+    defaultProps?: Partial<HistogramProps>;
+    styleOverrides?: ComponentsOverrides_2<Theme>["HCHistogram"];
+};
+
+export declare type HistogramProps = ChartProps & {
+    /**
+     * Explicit bin width, in dimension units. When omitted, the width is inferred
+     * from the smallest positive gap between adjacent bin starts — correct for
+     * uniformly pre-binned data (e.g. 250-wide buckets). Set this when bins are
+     * non-uniform, or when a single bin makes the gap impossible to infer.
+     */
+    binWidth?: number;
+    /**
+     * Fractional gap between adjacent bars, `0`–`1`. `0` (default) makes bars
+     * touch edge-to-edge — the defining histogram look. Raise it toward a spaced
+     * bar chart if a visual separation is wanted.
+     */
+    barGap?: number;
+    /**
+     * Draw the frequency (Y) axis on a logarithmic scale. Useful when one bin
+     * dwarfs the rest (e.g. a large zero/overflow bucket) and a linear axis would
+     * flatten every other bar. Zero-count bins are treated as the axis floor, so
+     * they simply render as no bar. Default `false` (linear, zero-baselined).
+     */
+    logarithmic?: boolean;
+};
+
 /**
  * Turn a raw field key into a human label: snake_case / kebab-case / camelCase
  * → Title Case (e.g. "total_revenue" / "totalRevenue" → "Total Revenue"). Used
@@ -2690,6 +2721,22 @@ declare module "@mui/material/styles" {
 
 
 
+declare module "@mui/material/styles" {
+  interface ComponentNameToClassKey {
+    HCHistogram: "root";
+  }
+
+  interface ComponentsPropsList {
+    HCHistogram: Partial<HistogramProps>;
+  }
+
+  interface Components<Theme = unknown> {
+    HCHistogram?: HistogramComponentOverride<Theme>;
+  }
+}
+
+
+
 declare module "@mui/material/styles" {
   interface ComponentNameToClassKey {
     HCLineChart: "root";
@@ -3649,6 +3696,7 @@ declare module "@mui/material/styles" {
       | "content"
       | "value"
       | "badge"
+      | "badgeLabel"
       | "caption"
       | "description";
   }