@kud/ink-ui 0.20.1 → 0.21.0

package/dist/index.js

@@ -660,22 +660,26 @@ 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);
-  const left = lerp(from.start, to.start);
-  const right = lerp(from.start + from.width, to.start + to.width);
-  return { start: left, width: Math.max(1, right - left) };
+  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;
-    from.current = step >= SLIDE_STEPS ? rules[last.current] ?? target : between(
+    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]);
@@ -684,9 +688,14 @@ var useSlide = (rules, active) => {
     const id = setTimeout(() => setStep((s) => s + 1), SLIDE_MS);
     return () => clearTimeout(id);
   }, [step]);
-  if (!target) return null;
-  if (step >= SLIDE_STEPS || !from.current) return target;
-  return between(from.current, target, step / SLIDE_STEPS);
+  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) => ({
@@ -705,16 +714,18 @@ var Tabs = ({ active, items }) => {
     x += gutterOf(cell) + labelOf(cell) + GAP;
   }
   const activeIndex = cells.findIndex((c) => c.isActive);
-  const rule = useSlide(rules, activeIndex) ?? { start: 0, width: 0 };
+  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) => /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Box, { gap: GAP, children: cells.map((cell, i) => /* @__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,
+          bold: i === litIndex,
+          color: i === litIndex ? colors.accent : void 0,
+          dimColor: i !== litIndex,
           children: cell.text
         }
       )

package/package.json

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