@rovula/ui 0.0.55 → 0.0.56

package/dist/cjs/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/cjs/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/components/Tabs/Tabs.js

@@ -5,7 +5,7 @@ import "./Tabs.css";
 import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
 import { Loading } from "@/index";
-const Tabs = ({ tabs = [], initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = true, disabled = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
+const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = true, disabled = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
     var _a;
     const [activeTab, setActiveTab] = useState(initialTab);
     const [sliderStyle, setSliderStyle] = useState({
@@ -14,6 +14,11 @@ const Tabs = ({ tabs = [], initialTab = 0, tabBarSize = 38, enableBorderLine = t
     });
     const tabRefs = useRef([]);
     const isInitialMount = useRef(true);
+    useEffect(() => {
+        if (value !== undefined) {
+            setActiveTab(value);
+        }
+    }, [value]);
     const updateSliderStyle = () => {
         const activeTabElement = tabRefs.current[activeTab];
         if (activeTabElement) {

package/dist/components/Tabs/Tabs.stories.js

@@ -4,6 +4,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",
     component: Tabs,
@@ -114,3 +115,26 @@ export const Disabled = {
         return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(Tabs, Object.assign({ tabs: tabs }, props)), _jsx(Tabs, Object.assign({ tabs: tabs }, props, { disabled: true }))] }));
     },
 };
+export const Controller = {
+    args: {
+        initialTab: 1,
+        value: 0,
+        tabs,
+        enableAddTabButton: true,
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        const [, setArgs] = useArgs();
+        return (_jsxs("div", { className: "flex flex-col gap-4  w-[500px]", children: [_jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(Button, { onClick: () => setArgs(Object.assign(Object.assign({}, props.tabs), { value: 0 })), children: "Set active tab 0" }), _jsx(Button, { onClick: () => setArgs(Object.assign(Object.assign({}, props.tabs), { value: 1 })), children: "Set active tab 1" }), _jsx(Button, { onClick: () => setArgs(Object.assign(Object.assign({}, props.tabs), { value: 2 })), children: "Set active tab 2" })] }), _jsx(Tabs, Object.assign({ tabs: tabs }, props, { tabMode: "start", onAddTab: () => {
+                        setArgs({
+                            tabs: [
+                                ...props.tabs,
+                                {
+                                    label: "Tab" + (props.tabs.length + 1),
+                                    content: _jsxs("p", { children: ["Tab ", props.tabs.length + 1, " content"] }),
+                                },
+                            ],
+                        });
+                    } }))] }));
+    },
+};