import { jsx as _jsx } from "react/jsx-runtime";
import React from "react";
import { cn } from "../utils/css";
import { TabViewMode } from "./constants";
export const Tab = (props)=>{
    const { active, disabled, title, fullWidth, mode, className } = props;
    return /*#__PURE__*/ _jsx("button", {
        className: cn("orderly-text-base-contrast-36 desktop:orderly-text-base-contrast-54 orderly-h-full orderly-tab-item orderly-min-h-[32px] orderly-relative after:orderly-hidden after:orderly-content-[''] after:orderly-absolute after:orderly-bottom-0 after:orderly-left-0 after:orderly-right-0 after:orderly-h-[3px] after:desktop:orderly-h-[2px] after:orderly-bg-base-contrast", className, active && mode === TabViewMode.Tab && "orderly-text-base-contrast desktop:orderly-text-base-contrast active after:orderly-block", disabled && "orderly-cursor-not-allowed orderly-text-base-contrast-36 desktop:orderly-text-base-contrast-54", fullWidth && "orderly-flex-1"),
        "data-active": active,
        disabled: props.disabled,
        onClick: (event)=>{
            props.onClick(props.value, event);
        },
        id: `tab-${props.value}`,
        children: title
    });
};

//# sourceMappingURL=tab.js.map