@drivy/cobalt/components/Tabs/index.js

Opinionated design system for Drivy's projects.

import { jsx, jsxs } from 'react/jsx-runtime';
import { Tabs as Tabs$1 } from '@ark-ui/react';
import cx from 'classnames';
import React from 'react';

// Only for the API, render nothing, we use InternalTab component internally
const Tab = (_props) => null;
Tab.displayName = "Tab";
const isTabComponent = (component) => React.isValidElement(component) && component.type === Tab;
const Tabs = ({ defaultTabId, subLevel, children, onChange, }) => {
    var _a;
    const tabsPropsArray = [];
    const tabsChildren = [];
    let matchedHrefId;
    React.Children.forEach(children, (child) => {
        if (isTabComponent(child)) {
            const { children: tabChildren, ...tabProps } = child.props;
            tabsPropsArray.push(tabProps);
            // if no children, it will be null, nothing will be rendered
            tabsChildren.push(jsx(Tabs$1.Content, { value: tabProps.id, className: "cobalt-tabs__panel", children: tabChildren }, tabProps.id));
            if (tabProps.href === window.location.pathname) {
                matchedHrefId = tabProps.id;
            }
        }
    });
    const getOnLinkClick = (href) => {
        if (!href)
            return;
        return () => {
            window.location.pathname = href;
        };
    };
    return (jsxs(Tabs$1.Root, { className: "cobalt-tabs", defaultValue: matchedHrefId || (defaultTabId === null || defaultTabId === void 0 ? void 0 : defaultTabId.toString()) || ((_a = tabsPropsArray === null || tabsPropsArray === void 0 ? void 0 : tabsPropsArray[0]) === null || _a === void 0 ? void 0 : _a.id), onValueChange: (details) => onChange === null || onChange === void 0 ? void 0 : onChange(details.value), children: [jsxs(Tabs$1.List, { className: cx("cobalt-tabs__labels", {
                    "cobalt-tabs__labels--subLevel": subLevel,
                }), children: [tabsPropsArray.map((props) => (jsx(Tabs$1.Trigger, { className: "cobalt-tabs__label", value: props.id, onClick: getOnLinkClick(props.href), children: props.label }, props.id))), jsx(Tabs$1.Indicator, { className: "cobalt-tabs__indicator" })] }), tabsChildren] }));
};
Tabs.Tab = Tab;

export { Tab, Tabs as default };
//# sourceMappingURL=index.js.map