@hybridcore/ui 1.6.20 → 1.6.21

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

@@ -1,29 +1,29 @@
-import { jsx as e, jsxs as n, Fragment as u } from "react/jsx-runtime";
-import { Stack as r, Skeleton as c } from "@mui/material";
-import { MetricChart as x } from "./MetricChart.js";
-import { useMetricCardLogic as j } from "./logic.js";
-import { MetricCardRoot as m, MetricCardValue as z, MetricCardSecondValue as V, MetricCardTrendContainer as k, MetricCardLabel as w, MetricCardPanel as P, MetricCardDescription as f, MetricCardSideChart as L, MetricCardCornerIconContainer as A, MetricCardIconContainer as v, MetricCardContent as D, MetricCardChartContainer as F } from "./styled.js";
-const G = (t) => {
-  const { state: M } = j(t), {
-    ownerState: i,
+import { jsx as e, jsxs as i, Fragment as m } from "react/jsx-runtime";
+import { Stack as a, Skeleton as l, Tooltip as c } from "@mui/material";
+import { MetricChart as w } from "./MetricChart.js";
+import { useMetricCardLogic as z } from "./logic.js";
+import { MetricCardRoot as f, MetricCardValue as V, MetricCardSecondValue as k, MetricCardTrendContainer as P, MetricCardLabel as v, MetricCardPanel as W, MetricCardDescription as M, MetricCardSideChart as L, MetricCardCornerIconContainer as A, MetricCardIconContainer as y, MetricCardContent as D, MetricCardChartContainer as F } from "./styled.js";
+const H = (t) => {
+  const { state: S } = z(t), {
+    ownerState: n,
     layout: d,
-    calculatedValue: y,
-    calculatedSecondValue: l,
-    calculatedChange: h,
-    TrendIcon: S,
-    Icon: a,
+    calculatedValue: o,
+    calculatedSecondValue: h,
+    calculatedChange: s,
+    TrendIcon: b,
+    Icon: r,
     showCornerIcon: I,
-    showSideIcon: o,
-    iconPosition: s,
-    snapshotPayload: b
-  } = M, C = !!t.showChart && !!t.chartType && (t.value ?? []).length >= 2, T = (t.showChange || t.showTrend) && h !== "—";
+    showSideIcon: C,
+    iconPosition: x,
+    snapshotPayload: T
+  } = S, g = !!t.showChart && !!t.chartType && (t.value ?? []).length >= 2, j = (t.showChange || t.showTrend) && s !== "—";
   if (t.loading)
-    return /* @__PURE__ */ e(m, { ownerState: i, sx: t.sx, children: /* @__PURE__ */ n(r, { spacing: 1, children: [
-      /* @__PURE__ */ e(c, { variant: "text", width: "60%" }),
-      /* @__PURE__ */ e(c, { variant: "rectangular", height: 40, width: "40%" }),
-      /* @__PURE__ */ e(c, { variant: "text", width: "80%" }),
+    return /* @__PURE__ */ e(f, { ownerState: n, sx: t.sx, children: /* @__PURE__ */ i(a, { spacing: 1, children: [
+      /* @__PURE__ */ e(l, { variant: "text", width: "60%" }),
+      /* @__PURE__ */ e(l, { variant: "rectangular", height: 40, width: "40%" }),
+      /* @__PURE__ */ e(l, { variant: "text", width: "80%" }),
       t.showChart && /* @__PURE__ */ e(
-        c,
+        l,
         {
           variant: "rectangular",
           height: 40,
@@ -32,40 +32,50 @@ const G = (t) => {
         }
       )
     ] }) });
-  const g = /* @__PURE__ */ n(
-    r,
+  const u = /* @__PURE__ */ i(
+    a,
     {
       direction: "row",
       alignItems: "center",
       spacing: 1,
       flexWrap: d === "panel" ? "nowrap" : "wrap",
+      sx: { minWidth: 0 },
       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", ownerState: i, children: l })
-        ] }),
-        T && /* @__PURE__ */ n(k, { ownerState: i, children: [
-          d === "overlay" && t.showTrend && /* @__PURE__ */ e(S, { size: 16 }),
-          t.showChange && h
+        /* @__PURE__ */ i(
+          a,
+          {
+            direction: "row",
+            alignItems: "baseline",
+            spacing: 0.5,
+            sx: { minWidth: 0 },
+            children: [
+              /* @__PURE__ */ e(c, { title: o, children: /* @__PURE__ */ e(V, { variant: "h4", ownerState: n, children: o }) }),
+              h && /* @__PURE__ */ e(c, { title: h, children: /* @__PURE__ */ e(k, { variant: "h5", ownerState: n, children: h }) })
+            ]
+          }
+        ),
+        j && /* @__PURE__ */ i(P, { ownerState: n, children: [
+          d === "overlay" && t.showTrend && /* @__PURE__ */ e(b, { size: 16 }),
+          t.showChange && s
         ] })
       ]
     }
   );
   return /* @__PURE__ */ e(
-    m,
+    f,
     {
-      ownerState: i,
+      ownerState: n,
       sx: t.sx,
-      "data-snapshot": b,
-      children: d === "panel" ? /* @__PURE__ */ n(u, { children: [
-        /* @__PURE__ */ e(w, { variant: "body2", children: t.label }),
-        /* @__PURE__ */ n(P, { children: [
-          /* @__PURE__ */ n(r, { justifyContent: "center", spacing: 0.5, sx: { flexShrink: 0 }, children: [
-            g,
-            t.description && /* @__PURE__ */ e(f, { variant: "caption", children: t.description })
+      "data-snapshot": T,
+      children: d === "panel" ? /* @__PURE__ */ i(m, { children: [
+        /* @__PURE__ */ e(c, { title: t.label, children: /* @__PURE__ */ e(v, { variant: "body2", children: t.label }) }),
+        /* @__PURE__ */ i(W, { children: [
+          /* @__PURE__ */ i(a, { justifyContent: "center", spacing: 0.5, sx: { flexShrink: 0 }, children: [
+            u,
+            t.description && /* @__PURE__ */ e(c, { title: t.description, children: /* @__PURE__ */ e(M, { variant: "caption", children: t.description }) })
           ] }),
-          C && /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
-            x,
+          g && /* @__PURE__ */ e(L, { children: /* @__PURE__ */ e(
+            w,
             {
               type: t.chartType,
               data: t.value,
@@ -74,41 +84,41 @@ const G = (t) => {
             }
           ) })
         ] })
-      ] }) : /* @__PURE__ */ n(u, { children: [
-        I && a && /* @__PURE__ */ e(A, { ownerState: i, children: /* @__PURE__ */ e(a, { size: 24 }) }),
-        /* @__PURE__ */ n(
-          r,
+      ] }) : /* @__PURE__ */ i(m, { children: [
+        I && r && /* @__PURE__ */ e(A, { ownerState: n, children: /* @__PURE__ */ e(r, { size: 24 }) }),
+        /* @__PURE__ */ i(
+          a,
           {
             direction: "row",
             justifyContent: "space-between",
             alignItems: "flex-start",
             sx: { flex: 1 },
             children: [
-              o && a && s === "left" && /* @__PURE__ */ e(v, { ownerState: i, children: /* @__PURE__ */ e(a, { sx: { fontSize: 24 } }) }),
-              /* @__PURE__ */ n(D, { children: [
-                /* @__PURE__ */ e(w, { variant: "body2", children: t.label }),
-                g
+              C && r && x === "left" && /* @__PURE__ */ e(y, { ownerState: n, children: /* @__PURE__ */ e(r, { sx: { fontSize: 24 } }) }),
+              /* @__PURE__ */ i(D, { children: [
+                /* @__PURE__ */ e(c, { title: t.label, children: /* @__PURE__ */ e(v, { variant: "body2", children: t.label }) }),
+                u
               ] }),
-              o && a && s === "right" && /* @__PURE__ */ e(v, { ownerState: i, children: /* @__PURE__ */ e(a, { sx: { fontSize: 24 } }) })
+              C && r && x === "right" && /* @__PURE__ */ e(y, { ownerState: n, children: /* @__PURE__ */ e(r, { sx: { fontSize: 24 } }) })
             ]
           }
         ),
-        /* @__PURE__ */ n(
-          r,
+        /* @__PURE__ */ i(
+          a,
           {
             direction: { xs: "column-reverse", sm: "column" },
             spacing: 1,
             sx: { width: "100%", mt: 2 },
             children: [
-              t.description && /* @__PURE__ */ e(
-                f,
+              t.description && /* @__PURE__ */ e(c, { title: t.description, children: /* @__PURE__ */ e(
+                M,
                 {
                   variant: "caption",
                   sx: { textAlign: { xs: "center", sm: "left" } },
                   children: t.description
                 }
-              ),
-              C && /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(x, { type: t.chartType, data: t.value }) })
+              ) }),
+              g && /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(w, { type: t.chartType, data: t.value }) })
             ]
           }
         )
@@ -117,5 +127,5 @@ const G = (t) => {
   );
 };
 export {
-  G as MetricCard
+  H as MetricCard
 };

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

@@ -3649,6 +3649,7 @@ declare module "@mui/material/styles" {
       | "content"
       | "value"
       | "badge"
+      | "badgeLabel"
       | "caption"
       | "description";
   }

package/package.json

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