@memobit/libs 1.0.17 → 1.0.18

package/dist/index.d.ts

@@ -2329,7 +2329,7 @@ declare interface SplitPanelProps {
     className?: string;
 }
 
-export declare const StackedBar: ({ animated, height, normalize, orientation, segments, showLabels, showPercentage, thin, width, }: StackedBarProps) => JSX.Element;
+export declare const StackedBar: ({ animated, height, normalize, orientation, segments, separators, showLabels, showPercentage, thin, width, }: StackedBarProps) => JSX.Element;
 
 export declare type StackedBarOrientation = 'horizontal' | 'vertical';
 
@@ -2339,6 +2339,12 @@ export declare interface StackedBarProps {
     normalize?: boolean;
     orientation?: StackedBarOrientation;
     segments: StackedBarSegment[];
+    /**
+     * Draw a hairline between adjacent segments. Needed when a segment's colour encodes a *state*
+     * rather than an identity, since two neighbours can then share a colour and visually merge into
+     * one block. Opt-in, so existing bars keep their current look.
+     */
+    separators?: boolean;
     showLabels?: boolean;
     showPercentage?: boolean;
     thin?: boolean;

package/dist/index.esm.js

@@ -23349,38 +23349,39 @@ var ti = ({ variant: t = "text", animation: c = "pulse", width: l, height: a, bo
 }, sl = (t, c, l) => {
   const a = `${V0(c)}%`;
   return t.label && l ? `${t.label} - ${a}` : t.label ? t.label : a;
-}, li = ({ animated: t = !1, height: c, normalize: l = !0, orientation: a = "horizontal", segments: s, showLabels: o = !0, showPercentage: i = !0, thin: n = !1, width: d }) => {
-  const h = m1(() => {
+}, li = ({ animated: t = !1, height: c, normalize: l = !0, orientation: a = "horizontal", segments: s, separators: o = !1, showLabels: i = !0, showPercentage: n = !0, thin: d = !1, width: h }) => {
+  const m = m1(() => {
     if (s.length === 0) return [];
-    if (!l) return s.map((w) => Math.max(0, w.value));
-    const g = s.reduce((w, v) => w + Math.max(0, v.value), 0);
-    return g === 0 ? s.map(() => 0) : s.map((w) => Math.max(0, w.value) / g * 100);
-  }, [s, l]), m = a === "vertical", p = {};
-  return c !== void 0 && (p.height = c), d !== void 0 && (p.width = d), /* @__PURE__ */ e("div", {
+    if (!l) return s.map((v) => Math.max(0, v.value));
+    const w = s.reduce((v, u) => v + Math.max(0, u.value), 0);
+    return w === 0 ? s.map(() => 0) : s.map((v) => Math.max(0, v.value) / w * 100);
+  }, [s, l]), p = a === "vertical", g = {};
+  return c !== void 0 && (g.height = c), h !== void 0 && (g.width = h), /* @__PURE__ */ e("div", {
     className: [
       "stacked-bar",
       `stacked-bar--${a}`,
-      n ? "stacked-bar--thin" : ""
+      d ? "stacked-bar--thin" : "",
+      o ? "stacked-bar--separators" : ""
     ].filter(Boolean).join(" "),
-    style: p,
-    children: s.map((g, w) => {
-      const v = h[w];
-      if (v <= 0) return null;
-      const u = g.state || "default", f = g.pattern || "solid", C = sl(g, v, i);
+    style: g,
+    children: s.map((w, v) => {
+      const u = m[v];
+      if (u <= 0) return null;
+      const f = w.state || "default", C = w.pattern || "solid", x = sl(w, u, n);
       return /* @__PURE__ */ e("div", {
         className: [
           "stacked-bar__segment",
-          `stacked-bar__segment--${u}`,
           `stacked-bar__segment--${f}`,
-          t && f !== "solid" ? "stacked-bar__segment--animated" : ""
+          `stacked-bar__segment--${C}`,
+          t && C !== "solid" ? "stacked-bar__segment--animated" : ""
         ].filter(Boolean).join(" "),
-        style: m ? { height: `${v}%` } : { width: `${v}%` },
-        title: C,
-        children: o && /* @__PURE__ */ e("span", {
+        style: p ? { height: `${u}%` } : { width: `${u}%` },
+        title: x,
+        children: i && /* @__PURE__ */ e("span", {
           className: "stacked-bar__segment-label",
-          children: C
+          children: x
         })
-      }, `stacked-bar-segment-${w}`);
+      }, `stacked-bar-segment-${v}`);
     })
   });
 }, ai = ({ items: t, dividers: c = !0, align: l = "left", size: a = "medium", className: s = "" }) => t.length === 0 ? null : /* @__PURE__ */ e("div", {
@@ -25428,7 +25429,7 @@ var _i = (t, c, l) => {
   } catch {
     return t.trim();
   }
-}, _l = "1.0.17", Bi = 231, Ll = "64cf8ba", zl = "2026-07-01T14:08:46.911Z", Ri = "231", Vl = (t) => {
+}, _l = "1.0.18", Bi = 234, Ll = "de1b606", zl = "2026-07-10T11:04:36.025Z", Ri = "234", Vl = (t) => {
   const c = document.getElementById("mb-version-toast");
   if (c) {
     c.remove();
@@ -25452,7 +25453,7 @@ var _i = (t, c, l) => {
   const c = {
     ...t,
     lib: _l,
-    libBuildNumber: 231,
+    libBuildNumber: 234,
     libCommit: Ll,
     libBuildDate: zl
   };

package/dist/version.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.0.17",
-  "buildNumber": 231,
-  "commit": "64cf8ba",
-  "buildDate": "2026-07-01T14:08:46.911Z"
+  "version": "1.0.18",
+  "buildNumber": 234,
+  "commit": "de1b606",
+  "buildDate": "2026-07-10T11:04:36.025Z"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@memobit/libs",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "description": "React component library powering the Memobit apps — 100+ components, 470+ icons, 70+ themes, helpers and hooks. TypeScript-first, ESM-only, React 19.",
   "keywords": [
     "react",