@kud/ink-ui 0.18.0 → 0.19.0

package/dist/index.d.ts

@@ -249,6 +249,24 @@ type TabItem<T extends string = string> = {
     value: T;
     label: string;
     count?: number;
+    /**
+     * A marker drawn immediately before the label, in its own colour.
+     *
+     * Give every tab one of the SAME WIDTH, or none at all. A marker that appears
+     * on one tab alone pushes every tab after it sideways — which is the whole
+     * reason this is a field rather than something a caller prepends to `label`:
+     * a bar that shifts when news arrives is a bar you have to re-find. A blank of
+     * the right width is how you say "not this one".
+     *
+     * Its own `Text` because the label's colour answers "is this tab active" and a
+     * marker usually answers something else; folded together, the marker would
+     * have to borrow the answer to the wrong question.
+     *
+     * Animating one costs nothing: the cell is already reserved, so a caller
+     * cycling the glyph or the colour per frame moves no layout at all.
+     */
+    marker?: string;
+    markerColor?: string;
 };
 type TabsProps<T extends string> = {
     active: T;

package/dist/index.js

@@ -657,21 +657,26 @@ var ScrollView = ({
 var Tabs = ({ active, items }) => {
   const cells = items.map((item) => ({
     key: item.value,
+    marker: item.marker ?? "",
+    markerColor: item.markerColor,
     text: item.count !== void 0 ? `${item.label} (${item.count})` : item.label,
     isActive: item.value === active
   }));
+  const widthOf = (cell) => [...cell.marker].length + [...cell.text].length;
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsx(
-      Text,
-      {
-        bold: cell.isActive,
-        color: cell.isActive ? colors.accent : void 0,
-        dimColor: !cell.isActive,
-        children: cell.text
-      },
-      cell.key
-    )) }),
-    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsx(Text, { color: colors.accent, children: cell.isActive ? "\u2500".repeat(cell.text.length) : " ".repeat(cell.text.length) }, cell.key)) })
+    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsxs(Box, { children: [
+      cell.marker ? /* @__PURE__ */ jsx(Text, { color: cell.markerColor, children: cell.marker }) : null,
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          bold: cell.isActive,
+          color: cell.isActive ? colors.accent : void 0,
+          dimColor: !cell.isActive,
+          children: cell.text
+        }
+      )
+    ] }, cell.key)) }),
+    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__PURE__ */ jsx(Text, { color: colors.accent, children: (cell.isActive ? "\u2500" : " ").repeat(widthOf(cell)) }, cell.key)) })
   ] });
 };
 var useTabs = (items, { initial, isActive = true } = {}) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kud/ink-ui",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description": "React component library for Ink CLIs",
   "type": "module",
   "main": "dist/index.js",