@wener/console/lib/daisy/DaisyTabs.js

Base console UI toolkit

import React, { forwardRef, Fragment } from "react";
import * as Tabs from "@radix-ui/react-tabs";
import { cn } from "@wener/console";
import { Daisy } from "@wener/console/daisy";
import { flexRender } from "@wener/reaction";
import { isNodeTypeOf } from "./isNodeTypeOf.js";
(function (DaisyTabs) {
    DaisyTabs.Composite = ({ children, renderContent = (props) => props.children, renderList = (props) => props.children, tabs = [], list, size, variant, title, action, ref, ...props }) => {
        if (!list) {
            list = /*#__PURE__*/ React.createElement(DaisyTabs.List, {
                size,
                variant,
                title,
                action
            }, tabs.map((item, index) => {
                const { label, href, icon } = item;
                const key = item.key ?? String(index);
                const Tag = item.href ? "a" : "button";
                let trigger;
                if (isNodeTypeOf(item.trigger, [
                    DaisyTabs.Trigger,
                    Tabs.Trigger
                ])) {
                    trigger = item.trigger;
                }
                else if (item.trigger) {
                    trigger = /*#__PURE__*/ React.createElement(DaisyTabs.Trigger, {
                        key: key,
                        value: key,
                        asChild: true
                    }, item.trigger);
                }
                else if (item.href) {
                    trigger = /*#__PURE__*/ React.createElement(DaisyTabs.Trigger, {
                        key: key,
                        value: key,
                        asChild: true
                    }, /*#__PURE__*/ React.createElement(Tag, {
                        href: href
                    }, flexRender(icon, {}), label));
                }
                else {
                    trigger = /*#__PURE__*/ React.createElement(DaisyTabs.Trigger, {
                        key: key,
                        value: key
                    }, flexRender(icon, {}), label);
                }
                return trigger;
            }));
        }
        let hasContent = tabs.some((v) => v.content);
        let content = null;
        if (hasContent) {
            content = /*#__PURE__*/ React.createElement(Fragment, null, tabs.map((item, index) => {
                const key = item.key ?? String(index);
                let c = isNodeTypeOf(item.content, [
                    DaisyTabs.Content,
                    Tabs.Content
                ]) ? item.content : /*#__PURE__*/ React.createElement(DaisyTabs.Content, {
                    key: index,
                    asChild: item.asChild,
                    value: key || String(index)
                }, item.content);
                return c;
            }));
        }
        return /*#__PURE__*/ React.createElement(DaisyTabs.Root, {
            ...props,
            ref: ref
        }, renderList({
            children: list
        }), children, renderContent({
            children: content
        }));
    };
    DaisyTabs.Root = /*#__PURE__*/ forwardRef(({ className, ...props }, ref) => {
        return /*#__PURE__*/ React.createElement(Tabs.Root, {
            className: cn("flex flex-col", className),
            ...props,
            ref: ref
        });
    });
    DaisyTabs.Content = /*#__PURE__*/ forwardRef(({ className, ...props }, ref) => {
        return /*#__PURE__*/ React.createElement(Tabs.Content, {
            className: cn("data-[state=inactive]:hidden", className),
            ...props,
            ref: ref
        });
    });
    DaisyTabs.List = /*#__PURE__*/ forwardRef(({ className, variant, size, action, title, children, ...props }, ref) => {
        const sz = Daisy.getSize(size);
        return /*#__PURE__*/ React.createElement(Tabs.List, {
            className: cn("flex", "data-[variant=boxed]:self-center"),
            "data-variant": variant,
            ...props,
            ref: ref
        }, variant === "lifted" && /*#__PURE__*/ React.createElement("div", {
            className: "border-color flex h-full items-center self-end px-2",
            style: {
                // border-b-[--tab-border]  not works
                borderBottomWidth: "var(--tab-border,1px)"
            }
        }, /*#__PURE__*/ React.createElement("h3", {
            className: "text-lg font-medium"
        }, title)), /*#__PURE__*/ React.createElement("div", {
            className: cn("tabs", variant === "boxed" && "tabs-boxed", variant === "bordered" && "tabs-bordered", variant === "lifted" && "tabs-lifted self-start", sz?.tabs, className)
        }, children), variant === "lifted" && /*#__PURE__*/ React.createElement("div", {
            className: "border-color flex-1 border-b",
            style: {
                // border-b-[--tab-border]  not works
                borderBottomWidth: "var(--tab-border,1px)"
            }
        }), variant === "lifted" && action && /*#__PURE__*/ React.createElement("div", {
            className: "border-color flex items-center self-stretch border-b pr-1",
            style: {
                borderBottomWidth: "var(--tab-border,1px)"
            }
        }, action));
    });
    DaisyTabs.Trigger = /*#__PURE__*/ forwardRef(({ className, ...props }, ref) => {
        return /*#__PURE__*/ React.createElement(Tabs.Trigger, {
            className: cn(//
            "tab", "data-[disabled]:tab-disabled", "data-[state=active]:tab-active", className),
            ...props,
            ref: ref
        });
    });
})(DaisyTabs || (DaisyTabs = {}));
export var DaisyTabs;
//# sourceMappingURL=DaisyTabs.js.map