@rovula/ui 0.0.55 → 0.0.56

package/dist/esm/types/components/Tabs/Tabs.d.ts

@@ -10,6 +10,7 @@ type Tab = {
 };
 type TabsProps = {
     tabs: Tab[];
+    value?: number;
     initialTab?: number;
     tabBarSize?: number;
     tabMode?: "start" | "justify";

package/dist/esm/types/components/Tabs/Tabs.stories.d.ts

@@ -10,6 +10,7 @@ declare const meta: {
             disabled?: boolean | undefined;
             isLoading?: boolean | undefined;
         }[];
+        value?: number | undefined;
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
@@ -44,6 +45,7 @@ declare const meta: {
             disabled?: boolean | undefined;
             isLoading?: boolean | undefined;
         }[];
+        value?: number | undefined;
         initialTab?: number | undefined;
         tabBarSize?: number | undefined;
         tabMode?: "start" | "justify" | undefined;
@@ -144,3 +146,15 @@ export declare const Disabled: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Controller: {
+    args: {
+        initialTab: number;
+        value: number;
+        tabs: {
+            label: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        enableAddTabButton: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/index.d.ts

@@ -115,6 +115,7 @@ type Tab = {
 };
 type TabsProps = {
     tabs: Tab[];
+    value?: number;
     initialTab?: number;
     tabBarSize?: number;
     tabMode?: "start" | "justify";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Tabs/Tabs.stories.tsx

@@ -5,6 +5,7 @@ import { ChevronDownIcon, ArchiveBoxIcon } from "@heroicons/react/16/solid";
 import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
 import { useArgs } from "@storybook/preview-api";
+import { Button } from "@/index";
 
 const meta = {
   title: "Components/Tabs",
@@ -209,3 +210,50 @@ export const Disabled = {
     );
   },
 } satisfies StoryObj;
+
+export const Controller = {
+  args: {
+    initialTab: 1,
+    value: 0,
+    tabs,
+    enableAddTabButton: true,
+  },
+  render: (args) => {
+    const props: any = {
+      ...args,
+    };
+
+    const [, setArgs] = useArgs();
+    return (
+      <div className="flex flex-col gap-4  w-[500px]">
+        <div className="flex flex-row gap-2">
+          <Button onClick={() => setArgs({ ...props.tabs, value: 0 })}>
+            Set active tab 0
+          </Button>
+          <Button onClick={() => setArgs({ ...props.tabs, value: 1 })}>
+            Set active tab 1
+          </Button>
+          <Button onClick={() => setArgs({ ...props.tabs, value: 2 })}>
+            Set active tab 2
+          </Button>
+        </div>
+        <Tabs
+          tabs={tabs}
+          {...props}
+          tabMode="start"
+          onAddTab={() => {
+            setArgs({
+              tabs: [
+                ...props.tabs,
+                {
+                  label: "Tab" + (props.tabs.length + 1),
+                  content: <p>Tab {props.tabs.length + 1} content</p>,
+                },
+              ],
+            });
+          }}
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

package/src/components/Tabs/Tabs.tsx

@@ -16,6 +16,7 @@ type Tab = {
 
 type TabsProps = {
   tabs: Tab[];
+  value?: number;
   initialTab?: number;
   tabBarSize?: number;
   tabMode?: "start" | "justify";
@@ -40,6 +41,7 @@ type TabsProps = {
 
 const Tabs: React.FC<TabsProps> = ({
   tabs = [],
+  value,
   initialTab = 0,
   tabBarSize = 38,
   enableBorderLine = true,
@@ -69,6 +71,12 @@ const Tabs: React.FC<TabsProps> = ({
   const tabRefs = useRef<(HTMLButtonElement | null)[]>([]);
   const isInitialMount = useRef(true);
 
+  useEffect(() => {
+    if (value !== undefined) {
+      setActiveTab(value);
+    }
+  }, [value]);
+
   const updateSliderStyle = () => {
     const activeTabElement = tabRefs.current[activeTab];
     if (activeTabElement) {