@kud/ink-ui 0.21.0 → 0.23.0

package/dist/index.d.ts

@@ -267,6 +267,28 @@ type TabItem<T extends string = string> = {
      */
     marker?: string;
     markerColor?: string;
+    /**
+     * The true size of what `count` is a window onto, drawn as `(count/total)`.
+     *
+     * A field rather than something a caller folds into `label`, for the same
+     * reason `marker` is one — and this one was learned the hard way. A caller
+     * with no channel for "there are more than these" smuggled it into the label
+     * as `Issues +129 (20)`, and `+` is an operator: it tells the reader to add,
+     * with nothing on screen to add it to. The arithmetic even works, which is
+     * what makes it vicious — a reader who obeys gets a real number for a question
+     * nobody asked, with no signal they have misread anything.
+     *
+     * A fraction is part-of-whole, the most over-learned notation there is: page 3
+     * of 12. Nobody computes with a slash. The distinction rides on a glyph rather
+     * than a hue, so it survives dimming, greyscale and colourblindness — and the
+     * magnitude survives with it, which is the half that matters most. `(30/37)`
+     * and `(20/149)` say very different things about how far a tab can be trusted,
+     * where a bare truncation flag says only "incomplete".
+     *
+     * Omit it when the count IS the whole, so one number keeps meaning "complete"
+     * and two always mean "you are looking at a sample".
+     */
+    total?: number;
 };
 type TabsProps<T extends string> = {
     active: T;

package/dist/index.js

@@ -655,77 +655,32 @@ var ScrollView = ({
   ] });
 };
 var GAP = 2;
-var SLIDE_STEPS = 12;
-var SLIDE_MS = 28;
-var between = (from, to, t) => {
-  const ease = t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-  const lerp = (a, b) => Math.round(a + (b - a) * ease);
-  return {
-    start: lerp(from.start, to.start),
-    width: Math.max(1, lerp(from.width, to.width))
-  };
-};
-var useSlide = (rules, active) => {
-  const target = rules[active] ?? null;
-  const [step, setStep] = useState(SLIDE_STEPS);
-  const from = useRef(target);
-  const last = useRef(active);
-  const litIndex = useRef(active);
-  useEffect(() => {
-    if (last.current === active) return;
-    const settled = step >= SLIDE_STEPS;
-    from.current = settled ? rules[last.current] ?? target : between(
-      from.current ?? target,
-      rules[last.current] ?? target,
-      step / SLIDE_STEPS
-    );
-    if (settled) litIndex.current = last.current;
-    last.current = active;
-    setStep(0);
-  }, [active]);
-  useEffect(() => {
-    if (step >= SLIDE_STEPS) return;
-    const id = setTimeout(() => setStep((s) => s + 1), SLIDE_MS);
-    return () => clearTimeout(id);
-  }, [step]);
-  const arrived = step >= SLIDE_STEPS;
-  if (arrived) litIndex.current = active;
-  if (!target) return { rule: null, lit: litIndex.current };
-  if (arrived || !from.current) return { rule: target, lit: active };
-  return {
-    rule: between(from.current, target, step / SLIDE_STEPS),
-    lit: litIndex.current
-  };
-};
 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,
+    text: item.count === void 0 ? item.label : item.total === void 0 ? `${item.label} (${item.count})` : `${item.label} (${item.count}/${item.total})`,
     isActive: item.value === active
   }));
   const gutterOf = (cell) => [...cell.marker].length;
   const labelOf = (cell) => [...cell.text].length;
-  const rules = [];
   let x = 0;
+  let rule = { start: 0, width: 0 };
   for (const cell of cells) {
-    rules.push({ start: x + gutterOf(cell), width: labelOf(cell) });
+    if (cell.isActive)
+      rule = { start: x + gutterOf(cell), width: labelOf(cell) };
     x += gutterOf(cell) + labelOf(cell) + GAP;
   }
-  const activeIndex = cells.findIndex((c) => c.isActive);
-  const slide = useSlide(rules, activeIndex);
-  const rule = slide.rule ?? { start: 0, width: 0 };
-  const litIndex = slide.lit;
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx(Box, { gap: GAP, children: cells.map((cell, i) => /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Box, { gap: GAP, children: cells.map((cell) => /* @__PURE__ */ jsxs(Box, { children: [
       cell.marker ? /* @__PURE__ */ jsx(Text, { color: cell.markerColor, children: cell.marker }) : null,
       /* @__PURE__ */ jsx(
         Text,
         {
-          bold: i === litIndex,
-          color: i === litIndex ? colors.accent : void 0,
-          dimColor: i !== litIndex,
+          bold: cell.isActive,
+          color: cell.isActive ? colors.accent : void 0,
+          dimColor: !cell.isActive,
           children: cell.text
         }
       )

package/package.json

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