@kud/ink-ui 0.20.2 → 0.21.0

package/dist/index.js

@@ -665,26 +665,21 @@ var between = (from, to, t) => {
     width: Math.max(1, lerp(from.width, to.width))
   };
 };
-var nearestTo = (rules, rule, fallback) => {
-  const centre = (r) => r.start + r.width / 2;
-  if (rules.length === 0) return fallback;
-  return rules.reduce(
-    (best, r, i) => Math.abs(centre(r) - centre(rule)) < Math.abs(centre(rules[best]) - centre(rule)) ? i : best,
-    Math.min(fallback, rules.length - 1)
-  );
-};
 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]);
@@ -693,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) => ({
@@ -714,8 +714,9 @@ 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 litIndex = nearestTo(rules, rule, Math.max(0, activeIndex));
+  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: [
       cell.marker ? /* @__PURE__ */ jsx(Text, { color: cell.markerColor, children: cell.marker }) : null,

package/package.json

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