@visulima/tui 1.0.0-alpha.1 → 1.0.0-alpha.2

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## @visulima/tui [1.0.0-alpha.2](https://github.com/visulima/visulima/compare/@visulima/tui@1.0.0-alpha.1...@visulima/tui@1.0.0-alpha.2) (2026-04-09)
+
+### Features
+
+* **tui:** add controlled value prop to Tabs component ([df1158d](https://github.com/visulima/visulima/commit/df1158dc036f7159ef909f497453e2e5dd1058df))
+
 ## @visulima/tui 1.0.0-alpha.1 (2026-04-08)
 
 ### Features

package/dist/ink/components/Tabs.d.ts

@@ -55,7 +55,8 @@ export type Props = {
      */
     readonly colors?: TabColors;
     /**
-     * Name of the tab to select initially.
+     * Name of the tab to select initially (uncontrolled mode).
+     * Ignored when `value` is provided.
      */
     readonly defaultValue?: string;
     /**
@@ -84,6 +85,12 @@ export type Props = {
      * @default true
      */
     readonly showIndex?: boolean;
+    /**
+     * Controlled active tab name. When provided, the component is controlled —
+     * the parent owns the active tab state and must update it via `onChange`.
+     * When omitted, the component manages its own state (uncontrolled mode).
+     */
+    readonly value?: string;
     /**
      * Width of the container Box. Also determines the separator width in column layouts.
      */
@@ -94,4 +101,4 @@ export type Props = {
  * navigation (arrow keys, Tab, number keys) and calls `onChange` when the
  * active tab changes.
  */
-export default function Tabs({ children, colors: colorsProp, defaultValue, flexDirection, isFocused, keyMap: keyMapProp, onChange, showIndex, width, }: Props): ReactElement;
+export default function Tabs({ children, colors: colorsProp, defaultValue, flexDirection, isFocused, keyMap: keyMapProp, onChange, showIndex, value, width, }: Props): ReactElement;

package/dist/ink/index.js

@@ -31,7 +31,7 @@ export { default as StatusMessage } from '../packem_shared/StatusMessage-BtSYxzw
 export { default as Stopwatch } from '../packem_shared/Stopwatch-DjtTCyHn.js';
 export { default as Tab } from '../packem_shared/Tab-C6r5q4hR.js';
 export { default as Table } from '../packem_shared/Table-D-rSVlzb.js';
-export { default as Tabs } from '../packem_shared/Tabs-BXpZwLWo.js';
+export { default as Tabs } from '../packem_shared/Tabs-hki-KRnx.js';
 export { default as Text } from '../packem_shared/Text-DvAUdZcK.js';
 export { default as Timer } from '../packem_shared/Timer-wi9zuh4n.js';
 export { default as Textarea } from '../packem_shared/Textarea-Dj06R6Zd.js';

package/dist/packem_shared/{Tabs-BXpZwLWo.js → Tabs-hki-KRnx.js}

@@ -37,6 +37,7 @@ function Tabs({
   keyMap: keyMapProp,
   onChange,
   showIndex = true,
+  value,
   width
 }) {
   const tabs = collectTabs(children);
@@ -44,16 +45,24 @@ function Tabs({
   const tabsRef = useRef(tabs);
   tabsRef.current = tabs;
   const isColumn = flexDirection === "column" || flexDirection === "column-reverse";
-  const [activeTab, setActiveTab] = useState(() => {
-    if (defaultValue == null || tabCount === 0) {
+  const isControlled = value !== void 0;
+  const [internalTab, setInternalTab] = useState(() => {
+    const initial = value ?? defaultValue;
+    if (initial == null || tabCount === 0) {
       return 0;
     }
-    const foundIndex = tabs.findIndex((tab) => tab.props.name === defaultValue);
+    const foundIndex = tabs.findIndex((tab) => tab.props.name === initial);
     return foundIndex === -1 ? 0 : foundIndex;
   });
+  const activeTab = isControlled ? Math.max(0, tabs.findIndex((tab) => tab.props.name === value)) : internalTab;
+  const setActiveTab = isControlled ? () => {
+  } : setInternalTab;
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
   useEffect(() => {
+    if (isControlled) {
+      return;
+    }
     const tab = tabsRef.current[activeTab];
     if (tab) {
       onChangeRef.current(tab.props.name, tab);
@@ -63,33 +72,31 @@ function Tabs({
   const nextKeys = useMemo(() => keyMapProp?.next ?? [isColumn ? "downArrow" : "rightArrow"], [keyMapProp?.next, isColumn]);
   const useNumbers = keyMapProp?.useNumbers ?? true;
   const useTab = keyMapProp?.useTab ?? true;
+  const activeTabRef = useRef(activeTab);
+  activeTabRef.current = activeTab;
   const handleTabChange = useCallback((index) => {
     setActiveTab(index);
     const tab = tabsRef.current[index];
     if (tab) {
       onChangeRef.current(tab.props.name, tab);
     }
-  }, []);
+  }, [setActiveTab]);
   const moveToNext = useCallback(() => {
-    setActiveTab((current) => {
-      const next = current + 1 >= tabCount ? 0 : current + 1;
-      const tab = tabsRef.current[next];
-      if (tab) {
-        onChangeRef.current(tab.props.name, tab);
-      }
-      return next;
-    });
-  }, [tabCount]);
+    const next = (activeTabRef.current + 1) % tabCount;
+    setActiveTab(next);
+    const tab = tabsRef.current[next];
+    if (tab) {
+      onChangeRef.current(tab.props.name, tab);
+    }
+  }, [tabCount, setActiveTab]);
   const moveToPrevious = useCallback(() => {
-    setActiveTab((current) => {
-      const previous = current - 1 < 0 ? tabCount - 1 : current - 1;
-      const tab = tabsRef.current[previous];
-      if (tab) {
-        onChangeRef.current(tab.props.name, tab);
-      }
-      return previous;
-    });
-  }, [tabCount]);
+    const previous = (activeTabRef.current - 1 + tabCount) % tabCount;
+    setActiveTab(previous);
+    const tab = tabsRef.current[previous];
+    if (tab) {
+      onChangeRef.current(tab.props.name, tab);
+    }
+  }, [tabCount, setActiveTab]);
   useInput(
     useCallback(
       (input, key) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visulima/tui",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "description": "React-based TUI library powered by a native Rust diff engine, drop-in Ink-compatible API",
   "keywords": [
     "visulima",
@@ -101,14 +101,14 @@
     }
   },
   "optionalDependencies": {
-    "@visulima/tui-binding-darwin-arm64": "1.0.0-alpha.1",
-    "@visulima/tui-binding-darwin-x64": "1.0.0-alpha.1",
-    "@visulima/tui-binding-linux-arm64-gnu": "1.0.0-alpha.1",
-    "@visulima/tui-binding-linux-arm64-musl": "1.0.0-alpha.1",
-    "@visulima/tui-binding-linux-x64-gnu": "1.0.0-alpha.1",
-    "@visulima/tui-binding-linux-x64-musl": "1.0.0-alpha.1",
-    "@visulima/tui-binding-win32-arm64-msvc": "1.0.0-alpha.1",
-    "@visulima/tui-binding-win32-x64-msvc": "1.0.0-alpha.1"
+    "@visulima/tui-binding-darwin-arm64": "1.0.0-alpha.2",
+    "@visulima/tui-binding-darwin-x64": "1.0.0-alpha.2",
+    "@visulima/tui-binding-linux-arm64-gnu": "1.0.0-alpha.2",
+    "@visulima/tui-binding-linux-x64-gnu": "1.0.0-alpha.2",
+    "@visulima/tui-binding-linux-arm64-musl": "1.0.0-alpha.2",
+    "@visulima/tui-binding-linux-x64-musl": "1.0.0-alpha.2",
+    "@visulima/tui-binding-win32-arm64-msvc": "1.0.0-alpha.2",
+    "@visulima/tui-binding-win32-x64-msvc": "1.0.0-alpha.2"
   },
   "engines": {
     "node": ">=22.13 <=25.x"