@rovula/ui 0.0.66 → 0.0.67

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 = [], value, initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = true, disabled = false, keepMounted = 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, keepMounted = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabButtonActiveDisableClassName, tabButtonDisableClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
     const [activeTab, setActiveTab] = useState(initialTab);
     const [sliderStyle, setSliderStyle] = useState({
         width: "0px",
@@ -62,25 +62,34 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
                     [`border-b-[1px] border-base-stroke`]: enableBorderLine,
                     "border-state-disable-outline": disabled,
                     "flex-1": tabMode === "justify",
-                    tabBarContainerClassName,
-                }), children: [leftAction, _jsx("div", { className: cn("relative flex flex-row  overflow-x-auto", {
+                }, tabBarContainerClassName), children: [leftAction, _jsx("div", { className: cn("relative flex flex-row  overflow-x-auto", {
                             "flex-1": tabMode === "justify",
                         }, tabBarWrapperClassName), children: _jsxs("div", { className: cn("tabs-scrollbar overflow-x-auto w-full", `relative flex gap-3 h-[${tabBarSize}px] box-border`, {
                                 "gap-0": tabMode === "justify",
                             }, tabBarClassName), style: {
                                 justifyContent: tabMode === "justify" ? "stretch" : tabMode,
-                            }, role: "tablist", children: [tabs.map((tab, index) => (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, disabled: disabled || tab.disabled, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitile6", {
-                                        "text-foreground": index === activeTab,
-                                        "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark": index !== activeTab,
-                                        "text-state-disable-solid pointer-events-none": disabled || tab.disabled,
-                                        "text-state-disable-outline": (index === activeTab && disabled) || tab.disabled,
-                                        [tabButtonClassName !== null && tabButtonClassName !== void 0 ? tabButtonClassName : ""]: true,
-                                        [tabButtonActiveClassName !== null && tabButtonActiveClassName !== void 0 ? tabButtonActiveClassName : ""]: index === activeTab,
-                                        "flex-1": tabMode === "justify",
-                                    }), onClick: () => {
-                                        setActiveTab(index);
-                                        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
-                                    }, children: [(keepIconSpace || tab.startTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.isLoading ? _jsx(Loading, {}) : tab.startTabContent })), tab.label, (keepIconSpace || tab.endTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.endTabContent }))] }, index))), _jsx("div", { className: cn(`absolute left-0 bottom-0 h-[2px]  rounded-full bg-foreground transition-all duration-300 ease-in-out`, {
+                            }, role: "tablist", children: [tabs.map((tab, index) => {
+                                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                                    return (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, disabled: disabled || tab.disabled, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitile6", {
+                                            "text-foreground": index === activeTab,
+                                            "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark": index !== activeTab,
+                                            // -- disabled
+                                            "text-state-disable-solid pointer-events-none": disabled || tab.disabled,
+                                            [(_b = (_a = tab.disableClassName) !== null && _a !== void 0 ? _a : tabButtonDisableClassName) !== null && _b !== void 0 ? _b : ""]: disabled || tab.disabled,
+                                            // --
+                                            "text-state-disable-outline": index === activeTab && (disabled || tab.disabled),
+                                            // -- active disabled --
+                                            [(_d = (_c = tab.activeDisableClassName) !== null && _c !== void 0 ? _c : tabButtonActiveDisableClassName) !== null && _d !== void 0 ? _d : ""]: index === activeTab && (disabled || tab.disabled),
+                                            // -- class name
+                                            [(_f = (_e = tab.className) !== null && _e !== void 0 ? _e : tabButtonClassName) !== null && _f !== void 0 ? _f : ""]: true,
+                                            // -- active --
+                                            [(_h = (_g = tab.activeClassName) !== null && _g !== void 0 ? _g : tabButtonActiveClassName) !== null && _h !== void 0 ? _h : ""]: index === activeTab,
+                                            "flex-1": tabMode === "justify",
+                                        }), onClick: () => {
+                                            setActiveTab(index);
+                                            onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
+                                        }, children: [(keepIconSpace || tab.startTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.isLoading ? _jsx(Loading, {}) : tab.startTabContent })), tab.label, (keepIconSpace || tab.endTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.endTabContent }))] }, index));
+                                }), _jsx("div", { className: cn(`absolute left-0 bottom-0 h-[2px]  rounded-full bg-foreground transition-all duration-300 ease-in-out`, {
                                         "bg-state-disable-solid": disabled,
                                     }, borderSliderClassName), style: sliderStyle })] }) }), enableAddTabButton && (_jsx("div", { className: cn("sticky right-0 flex content-center items-center mx-4", addTabButtonWrapperClassName), children: _jsx(ActionButton, { variant: "outline", size: "sm", onClick: () => onAddTab === null || onAddTab === void 0 ? void 0 : onAddTab(), disabled: disabled, children: _jsx(Icon, { name: "plus" }) }) })), rightAction] }), _jsx("div", { className: cn("mt-4 text-foreground", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: tabs.map((tab, idx) => {
                     var _a;

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

@@ -174,3 +174,15 @@ export const Controller = {
                     } }))] }));
     },
 };
+export const CustomClassname = {
+    args: {
+        initialTab: 0,
+        tabs: tabs.map((tab, i) => (Object.assign(Object.assign({}, tab), { disabled: i !== 0, activeClassName: "text-green-500", 
+            // className: "text-red-500",
+            disableClassName: i === 1 && "text-pink-200", activeDisableClassName: "text-red-500" }))),
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(Tabs, Object.assign({ tabs: tabs }, props, { tabButtonDisableClassName: "text-red-500", tabButtonActiveDisableClassName: "text-blue-500", tabBarContainerClassName: "border-red-500" })), _jsx(Tabs, Object.assign({ tabs: tabs }, props, { disabled: true, tabButtonDisableClassName: "text-red-500", tabButtonActiveDisableClassName: "text-blue-500", tabBarContainerClassName: "border-blue-500" }))] }));
+    },
+};