@kud/ink-ui 0.19.0 → 0.20.0

package/dist/index.js

@@ -654,6 +654,40 @@ var ScrollView = ({
     showIndicator && hasMore && /* @__PURE__ */ jsx(Text, { dimColor: true, children: `  ${clamped + 1}\u2013${clamped + visible.length} / ${lines.length}` + (atEnd ? "  (end)" : "  \u2193 j/space") })
   ] });
 };
+var GAP = 2;
+var SLIDE_STEPS = 6;
+var SLIDE_MS = 25;
+var between = (from, to, t) => {
+  const ease = 1 - Math.pow(1 - t, 3);
+  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) };
+};
+var useSlide = (rules, active) => {
+  const target = rules[active] ?? null;
+  const [step, setStep] = useState(SLIDE_STEPS);
+  const from = useRef(target);
+  const last = useRef(active);
+  useEffect(() => {
+    if (last.current === active) return;
+    from.current = step >= SLIDE_STEPS ? rules[last.current] ?? target : between(
+      from.current ?? target,
+      rules[last.current] ?? target,
+      step / SLIDE_STEPS
+    );
+    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]);
+  if (!target) return null;
+  if (step >= SLIDE_STEPS || !from.current) return target;
+  return between(from.current, target, step / SLIDE_STEPS);
+};
 var Tabs = ({ active, items }) => {
   const cells = items.map((item) => ({
     key: item.value,
@@ -662,9 +696,18 @@ var Tabs = ({ active, items }) => {
     text: item.count !== void 0 ? `${item.label} (${item.count})` : item.label,
     isActive: item.value === active
   }));
-  const widthOf = (cell) => [...cell.marker].length + [...cell.text].length;
+  const gutterOf = (cell) => [...cell.marker].length;
+  const labelOf = (cell) => [...cell.text].length;
+  const rules = [];
+  let x = 0;
+  for (const cell of cells) {
+    rules.push({ start: x + gutterOf(cell), width: labelOf(cell) });
+    x += gutterOf(cell) + labelOf(cell) + GAP;
+  }
+  const activeIndex = cells.findIndex((c) => c.isActive);
+  const rule = useSlide(rules, activeIndex) ?? { start: 0, width: 0 };
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", children: [
-    /* @__PURE__ */ jsx(Box, { gap: 2, children: cells.map((cell) => /* @__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,
@@ -676,7 +719,7 @@ var Tabs = ({ active, items }) => {
         }
       )
     ] }, 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)) })
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { color: colors.accent, children: " ".repeat(rule.start) + "\u2500".repeat(rule.width) }) })
   ] });
 };
 var useTabs = (items, { initial, isActive = true } = {}) => {

package/package.json

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