@hybridcore/ui 1.6.19 → 1.6.21

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

@@ -3294,6 +3294,7 @@ declare module "@mui/material/styles" {
     HCGeometryPicker:
       | "root"
       | "topLabel"
+      | "header"
       | "container"
       | "actions"
       | "actionButton"
@@ -3648,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.19",
+  "version": "1.6.21",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",