@veracity/vui/dist/tabs/tabsNavBar.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../utils/styles.js";
import theme_default from "./theme.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { Icon } from "../icon/icon.js";
import { DismissButton } from "../dismissButton/DismissButton.js";
import { ListItem } from "../list/listItem.js";
import { List } from "../list/list.js";
import { colors, iconSizeMapper } from "./consts.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/tabs/tabsNavBar.tsx
const { activeBg, border, color, hover, main } = colors;
const TabsNavBar = vui((props, ref) => {
	const { actions, tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = "md" } = props;
	const iconSize = iconSizeMapper?.[size] || "md";
	const { sizes } = theme_default ?? {};
	const fontSize = sizes[size ?? "md"].tabsNavBar.fontSize;
	const h = sizes[size ?? "md"].tabsNavBar.h;
	const borderWidth = sizes[size ?? "md"].tabsNavBar.borderWidth;
	const py = sizes[size ?? "md"].tabsNavBar.py;
	const iconMarginRight = size === "xxl" ? "16px" : "8px";
	const isActive = (tab) => !tab.disabled && tab?.index === activeNavItem;
	return /* @__PURE__ */ jsxs(List, {
		alignItems: "end",
		borderBottom: showBorder ? `1px solid ${border}` : "none",
		className: cs("vui-tabsNavBar"),
		display: "flex",
		isInteractive: true,
		mb: "20px",
		ref,
		w: 1,
		children: [tabs?.map?.((tab) => /* @__PURE__ */ jsxs(ListItem, {
			activeBg: tab.disabled ? void 0 : activeBg,
			bg: "white",
			className: `vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`,
			color: isActive(tab) ? main : color,
			disabled: tab.disabled,
			display: "inline-flex",
			fontSize,
			lineHeight: "125%",
			fontWeight: 400,
			h,
			hoverBg: tab.disabled ? void 0 : hover,
			onClick: (e) => onNavItemClick?.(tab.index || 0, e),
			position: "relative",
			px: "16px",
			py,
			children: [
				/* @__PURE__ */ jsxs(Box, {
					alignItems: "center",
					children: [!!tab.icon && /* @__PURE__ */ jsx(Icon, {
						mr: iconMarginRight,
						name: tab.icon,
						size: iconSize
					}), tab.title]
				}),
				!!tab.onDelete && /* @__PURE__ */ jsx(DismissButton, {
					"aria-label": "Delete",
					disabled: tab.disabled,
					ml: 1,
					onClick: (e) => {
						e?.stopPropagation();
						tab?.onDelete?.(e);
					},
					title: "Delete"
				}),
				isActive(tab) && /* @__PURE__ */ jsx(Box, {
					animation: animationDirection,
					bg: main,
					bottom: "-1px",
					className: "vui-tabsNavBarItemActiveIndicator",
					h: borderWidth,
					left: 0,
					position: "absolute",
					w: 1,
					children: "\xA0"
				})
			]
		}, tab.index)), !!actions && /* @__PURE__ */ jsx(Box, {
			ml: "auto",
			px: .75,
			py: .5,
			children: actions
		})]
	});
});
TabsNavBar.displayName = "TabsNavBar";

//#endregion
export { TabsNavBar, TabsNavBar as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=tabsNavBar.js.map