@smitch/fluid/lib/tabs/Tabs.js

A lightweight, Tailwind-powered React/Next.js UI component library.

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState, useEffect, useMemo } from "react";
import { twMerge } from "tailwind-merge";
import TabBar from "./TabBar";
var defaultTabStyles = "border border-transparent px-4 py-2 rounded-t w-full";
var defaultActiveTabStyles = "border-x-neutral border-t-neutral bg-light dark:bg-dark";
var minimalTabStyles = "border-b-4 border-b-transparent px-4 py-2 dark:text-light hover:border-b-accent";
var minimalActiveTabStyles = "!border-b-info hover:cursor-default font-bold";
var sizes = {
    sm: "text-sm",
    md: "text-base",
    lg: "text-xl",
    xl: "text-2xl",
    xxl: "text-4xl",
};
var Tabs = function (_a) {
    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.defaultActiveId, defaultActiveId = _c === void 0 ? "" : _c, _d = _a.tabStyles, tabStyles = _d === void 0 ? defaultTabStyles : _d, _e = _a.activeTabStyles, activeTabStyles = _e === void 0 ? defaultActiveTabStyles : _e, icons = _a.icons, children = _a.children, _f = _a.minimalTabs, minimalTabs = _f === void 0 ? false : _f, _g = _a.contentBorder, contentBorder = _g === void 0 ? false : _g, _h = _a.tabSize, tabSize = _h === void 0 ? "md" : _h, tabsPosition = _a.tabsPosition;
    var _j = useState([]), tabs = _j[0], setTabs = _j[1];
    var _k = useState(defaultActiveId), activeId = _k[0], setActiveId = _k[1];
    var _l = useState([]), nodes = _l[0], setNodes = _l[1];
    var content = useCallback(function (contentRefNode) {
        var arrTabs = [];
        if (contentRefNode) {
            var buildTabs = function (item, index) {
                var el = item;
                var tabObject = {
                    id: el.id,
                    title: icons ? icons[index] : el.getAttribute("data-title") || el.id,
                };
                arrTabs.push(tabObject);
            };
            var children_1 = Array.from(contentRefNode.children);
            setNodes(children_1);
            children_1.forEach(buildTabs);
            setTabs(arrTabs);
        }
    }, [icons]);
    useEffect(function () {
        var setDisplay = function (item) {
            if (item.id === activeId) {
                item.classList.add("block");
                item.classList.remove("hidden");
            }
            else {
                item.classList.add("hidden");
                item.classList.remove("block");
            }
        };
        var setActive = function (item) { return setDisplay(item); };
        if (activeId && nodes)
            nodes.forEach(setActive);
    }, [activeId, nodes]);
    var handleClick = function (id) { return setActiveId(id); };
    var sizeClasses = useMemo(function () { return sizes[tabSize]; }, [tabSize]);
    return (_jsxs("div", { className: twMerge("tabs mx-auto w-full ".concat(minimalTabs ? "minimal" : ""), className), children: [_jsx(TabBar, { tabs: tabs, tabStyles: "".concat(minimalTabs ? minimalTabStyles : tabStyles, " ").concat(sizeClasses), activeTabStyles: "".concat(minimalTabs ? minimalActiveTabStyles : activeTabStyles, " "), activeId: activeId, onClick: handleClick, tabsPosition: tabsPosition }), _jsx("div", { ref: content, className: "tabwrapper bg-light dark:bg-dark p-0 ".concat(contentBorder ? "border rounded" : "border-t", " border-neutral"), children: children })] }));
};
export default Tabs;
//# sourceMappingURL=Tabs.js.map