@soroush.tech/design-system 2.0.0-rc.1 → 2.0.0-rc.3

package/dist/Tabs-D4tWCq78.cjs

@@ -0,0 +1,646 @@
+const require_src = require("./src-DU81aGy9.cjs");
+const require_View = require("./View.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_Icon = require("./Icon-D-EWsBVg.cjs");
+const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
+const require_MenuItem = require("./MenuItem-BTP7Ijwi.cjs");
+const require_Menu = require("./Menu-Cgg-sX4W.cjs");
+const require_dividerLine = require("./dividerLine-BNljcGlv.cjs");
+const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
+const require_surfaceSystem = require("./surfaceSystem-BGQBoXv_.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Tabs/utils/fitTabs.ts
+/**
+* The tabs that don't fit **whole** in `room` pixels along the row, with `gap` between them -
+* the ones its menu lists. The selected tab counts first, then the others in order while the
+* next still fits; the first that doesn't ends the row, and every one after it goes too, even a
+* later short one, so the row never reads out of order. A tab not measured yet counts as nothing,
+* so it is drawn and measured. With no room measured - nothing laid out - every tab fits.
+*/
+const fitTabs = (values, selected, sizes, room, gap) => {
+	if (room <= 0) return [];
+	const sizeOf = (value) => sizes.get(value) ?? 0;
+	const shown = /* @__PURE__ */ new Set();
+	let used = 0;
+	if (selected !== null && values.includes(selected)) {
+		shown.add(selected);
+		used = sizeOf(selected);
+	}
+	for (const value of values) {
+		if (value === selected) continue;
+		const next = used + (shown.size > 0 ? gap : 0) + sizeOf(value);
+		if (next > room) break;
+		shown.add(value);
+		used = next;
+	}
+	return values.filter((value) => !shown.has(value));
+};
+//#endregion
+//#region src/Tabs/hooks/useTabsOverflow.ts
+const px = (value) => Number.parseFloat(value) || 0;
+/**
+* The tabs of a row that don't fit whole in its list, for the row's menu - none unless
+* `isEnabled`. Each drawn tab is measured along the row (its `data-tab-value` root) and its size
+* kept, so a tab put in the menu comes back when the room grows. The room is the list's size less
+* its padding, and the gap its own, so the row's own content and the menu's button take their
+* room first. Measured after every render - a tab added, closed or renamed changes the answer -
+* and on every resize of the list; a measurement that changes nothing renders nothing, so the
+* button appearing can't make the row go back and forth. `update` measures again on demand.
+*/
+function useTabsOverflow(listRef, isEnabled, isVertical, values, selected) {
+	const sizes = (0, react.useRef)(/* @__PURE__ */ new Map());
+	const [hidden, setHidden] = (0, react.useState)([]);
+	const measure = () => {
+		const list = listRef.current;
+		let out = [];
+		if (isEnabled && list) {
+			const valueOf = new Map(values.map((value) => [String(value), value]));
+			for (const tab of list.querySelectorAll("[data-tab-value]")) {
+				const box = tab.getBoundingClientRect();
+				sizes.current.set(valueOf.get(tab.dataset.tabValue), isVertical ? box.height : box.width);
+			}
+			const style = getComputedStyle(list);
+			const room = isVertical ? list.clientHeight - px(style.paddingTop) - px(style.paddingBottom) : list.clientWidth - px(style.paddingLeft) - px(style.paddingRight);
+			const gap = px(isVertical ? style.rowGap : style.columnGap);
+			out = fitTabs(values, selected, sizes.current, room, gap);
+		}
+		setHidden((before) => before.length === out.length && before.every((value, at) => value === out[at]) ? before : out);
+	};
+	const measureRef = (0, react.useRef)(measure);
+	(0, react.useLayoutEffect)(() => {
+		measureRef.current = measure;
+		measure();
+	});
+	(0, react.useLayoutEffect)(() => {
+		const list = listRef.current;
+		if (!isEnabled || !list || typeof ResizeObserver === "undefined") return void 0;
+		const observer = new ResizeObserver(() => measureRef.current());
+		observer.observe(list);
+		return () => observer.disconnect();
+	}, [listRef, isEnabled]);
+	return {
+		hidden,
+		update: (0, react.useCallback)(() => measureRef.current(), [])
+	};
+}
+//#endregion
+//#region src/Tabs/hooks/useTabsScroll.ts
+const AT_REST = {
+	isOverflowing: false,
+	canScrollStart: false,
+	canScrollEnd: false
+};
+/** Where a scrolling list stands, its start edge first whatever the direction. */
+function readScroll(list, isVertical) {
+	const size = isVertical ? list.clientHeight : list.clientWidth;
+	const total = isVertical ? list.scrollHeight : list.scrollWidth;
+	const offset = Math.abs(isVertical ? list.scrollTop : list.scrollLeft);
+	return {
+		isOverflowing: total > size,
+		canScrollStart: offset > 0,
+		canScrollEnd: offset + size < total - 1
+	};
+}
+/**
+* Keeps track of a scrolling tab list - whether its tabs overflow, and on which side some
+* are out of view - as it scrolls, resizes and re-renders.
+*/
+function useTabsScroll(listRef, isEnabled, isVertical) {
+	const [state, setState] = (0, react.useState)(AT_REST);
+	const update = (0, react.useCallback)(() => {
+		if (!isEnabled) return;
+		const next = readScroll(listRef.current, isVertical);
+		setState((previous) => previous.isOverflowing === next.isOverflowing && previous.canScrollStart === next.canScrollStart && previous.canScrollEnd === next.canScrollEnd ? previous : next);
+	}, [
+		listRef,
+		isEnabled,
+		isVertical
+	]);
+	(0, react.useLayoutEffect)(update);
+	(0, react.useEffect)(() => {
+		if (!isEnabled) return void 0;
+		const list = listRef.current;
+		list.addEventListener("scroll", update);
+		window.addEventListener("resize", update);
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+		observer?.observe(list);
+		return () => {
+			list.removeEventListener("scroll", update);
+			window.removeEventListener("resize", update);
+			observer?.disconnect();
+		};
+	}, [
+		listRef,
+		isEnabled,
+		update
+	]);
+	const scrollByView = (direction) => {
+		const list = listRef.current;
+		const isReduced = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+		const distance = (!isVertical && require_isRtl.isRtl(list) ? -direction : direction) * (isVertical ? list.clientHeight : list.clientWidth);
+		list.scrollBy({
+			[isVertical ? "top" : "left"]: distance,
+			behavior: isReduced ? "auto" : "smooth"
+		});
+	};
+	return {
+		...state,
+		update,
+		scrollByView
+	};
+}
+//#endregion
+//#region src/Tabs/TabListContext.ts
+const TabListContext = (0, react.createContext)(null);
+/** The `TabList` these tabs render for, if any - which links them to their panels. */
+const useTabList = () => (0, react.useContext)(TabListContext);
+//#endregion
+//#region src/Tabs/utils/getNextTab.ts
+/** A tab the keys can reach: not disabled. */
+const isTabEnabled = (tab) => tab.getAttribute("aria-disabled") !== "true";
+/**
+* The enabled tab a key moves focus to from `current`. Disabled tabs are skipped, and
+* `next` past the last tab comes round to the first (and `previous` the other way).
+*/
+function getNextTab(tabs, current, step) {
+	const enabled = tabs.filter(isTabEnabled);
+	if (step === "first") return enabled[0];
+	if (step === "last") return enabled.at(-1);
+	const index = enabled.indexOf(current);
+	if (index === -1) return step === "next" ? enabled[0] : enabled.at(-1);
+	const offset = step === "next" ? 1 : -1;
+	return enabled.at((index + offset) % enabled.length);
+}
+//#endregion
+//#region src/Tabs/Tabs/Tabs.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"variant",
+	"color",
+	"size",
+	"orientation",
+	"fullWidth",
+	"hasDivider",
+	"isCentered"
+]);
+const TabsRoot = require_src.styled("div", {
+	name: "Tabs",
+	label: "Tabs",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space, require_surfaceSystem.surfaceSystem]
+})(({ theme, orientation, variant, color, hasDivider }) => {
+	const isVertical = orientation === "vertical";
+	return {
+		display: "flex",
+		flexDirection: isVertical ? "column" : "row",
+		alignItems: "stretch",
+		minWidth: 0,
+		...hasDivider && variant !== "enclosed" && { boxShadow: require_dividerLine.getDividerShadow(theme, isVertical, require_dividerLine.getDividerColor(theme, variant, color)) }
+	};
+});
+const TabsList = require_src.styled("div", {
+	name: "Tabs",
+	slot: "list",
+	label: "TabsList",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		..._soroush_tech_styled_system_should_forward_prop.props,
+		"variant",
+		"color",
+		"size",
+		"orientation",
+		"fullWidth",
+		"hasDivider",
+		"isCentered",
+		"isScrolling",
+		"isFitting",
+		"hasVisibleScrollbar"
+	])
+})((styleProps) => {
+	const { theme, orientation, isCentered, variant, fullWidth, isScrolling, isFitting, hasVisibleScrollbar } = styleProps;
+	const isVertical = orientation === "vertical";
+	const enclosedEnds = {
+		"&::before, &::after": {
+			content: "\"\"",
+			flexShrink: 0,
+			...require_dividerLine.getEnclosedPieceStyle(theme, styleProps)
+		},
+		"&::before": { flexGrow: isCentered ? 1 : 0 },
+		"&::after": { flexGrow: isCentered || !fullWidth ? 1 : 0 }
+	};
+	return {
+		position: "relative",
+		display: "flex",
+		flexDirection: isVertical ? "column" : "row",
+		justifyContent: isCentered ? "center" : "flex-start",
+		gap: variant === "boxed" ? theme.space[.5] : 0,
+		flex: 1,
+		minWidth: 0,
+		...variant === "enclosed" && enclosedEnds,
+		...isFitting && { overflow: "hidden" },
+		...isScrolling && {
+			[isVertical ? "overflowY" : "overflowX"]: "auto",
+			[isVertical ? "overflowX" : "overflowY"]: "hidden",
+			...!hasVisibleScrollbar && {
+				scrollbarWidth: "none",
+				"&::-webkit-scrollbar": { display: "none" }
+			}
+		}
+	};
+});
+const TabsIndicator = require_src.styled("span", {
+	name: "Tabs",
+	slot: "indicator",
+	label: "TabsIndicator",
+	shouldForwardProp
+})(({ theme, color, orientation }) => {
+	const isVertical = orientation === "vertical";
+	return {
+		position: "absolute",
+		backgroundColor: (0, require_src.src_exports.get)(theme, `palette.${color}.main`),
+		pointerEvents: "none",
+		transition: "left 0.15s ease, width 0.15s ease, top 0.15s ease, height 0.15s ease",
+		...isVertical ? {
+			insetInlineEnd: 0,
+			width: theme.borderWidths.base
+		} : {
+			bottom: 0,
+			height: theme.borderWidths.base
+		},
+		"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+	};
+});
+const StartContent = require_src.styled("div", {
+	name: "Tabs",
+	slot: "startContent",
+	label: "TabsStart",
+	shouldForwardProp
+})(({ theme, ...styleProps }) => ({
+	display: "flex",
+	alignItems: "center",
+	flexShrink: 0,
+	[styleProps.orientation === "vertical" ? "paddingBlockEnd" : "paddingInlineEnd"]: theme.space[2],
+	...require_dividerLine.getEnclosedPieceStyle(theme, styleProps)
+}));
+const EndContent = require_src.styled("div", {
+	name: "Tabs",
+	slot: "endContent",
+	label: "TabsEnd",
+	shouldForwardProp
+})(({ theme, ...styleProps }) => ({
+	display: "flex",
+	alignItems: "center",
+	flexShrink: 0,
+	[styleProps.orientation === "vertical" ? "paddingBlockStart" : "paddingInlineStart"]: theme.space[2],
+	...require_dividerLine.getEnclosedPieceStyle(theme, styleProps)
+}));
+const OverflowButton = require_src.styled("button", {
+	name: "Tabs",
+	slot: "overflowButton",
+	label: "TabsOverflowButton",
+	shouldForwardProp
+})(({ theme, ...styleProps }) => {
+	const main = (0, require_src.src_exports.get)(theme, `palette.${styleProps.color}.main`);
+	return {
+		...require_dividerLine.getEnclosedPieceStyle(theme, styleProps),
+		appearance: "none",
+		display: "grid",
+		placeItems: "center",
+		flex: "1 1 auto",
+		...styleProps.orientation === "vertical" ? { minHeight: theme.space[5] } : { minWidth: theme.icon.lg },
+		padding: 0,
+		border: "none",
+		backgroundColor: "transparent",
+		color: (0, require_src.src_exports.get)(theme, "text.primary"),
+		cursor: "pointer",
+		outline: "none",
+		"&:focus-visible": {
+			outline: `${theme.borderWidths.base} solid ${main}`,
+			outlineOffset: `-${theme.borderWidths.base}`
+		}
+	};
+});
+const OverflowClose = require_src.styled("button", {
+	name: "Tabs",
+	slot: "overflowClose",
+	label: "TabsOverflowClose",
+	shouldForwardProp
+})(({ theme, color }) => {
+	const main = (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		appearance: "none",
+		display: "grid",
+		placeItems: "center",
+		width: theme.icon.sm,
+		height: theme.icon.sm,
+		padding: 0,
+		border: "none",
+		borderRadius: theme.radii.sm,
+		backgroundColor: "transparent",
+		color: (0, require_src.src_exports.get)(theme, "text.secondary"),
+		cursor: "pointer",
+		"&:hover": { backgroundColor: `${main}1F` }
+	};
+});
+const readTabs = (children) => react.Children.toArray(children).flatMap((child, index) => {
+	if (!(0, react.isValidElement)(child)) return [];
+	const { value, disabled, label, icon, closeLabel, color, size } = child.props;
+	return [{
+		value: value ?? index,
+		disabled: disabled ?? false,
+		label,
+		icon,
+		closeLabel,
+		color,
+		size
+	}];
+});
+const getLargestSpace = (steps) => steps.reduce((largest, step) => largest === void 0 || Number(step) > Number(largest) ? step : largest, void 0);
+const getFocusableValue = (children, selectedValue) => {
+	const enabled = readTabs(children).filter((tab) => !tab.disabled);
+	return enabled.find((tab) => tab.value === selectedValue)?.value ?? enabled[0]?.value ?? null;
+};
+const STEP_BY_KEY = {
+	Home: "first",
+	End: "last"
+};
+/**
+* @description A row of tabs. By default a `tablist`: one tab in the page's tab order, the
+* arrow keys of its orientation moving between tabs, Enter or Space selecting (or moving
+* focus selecting, with `shouldSelectOnFocus`). With `as="nav"`, the same look as a
+* navigation, its current tab marked `aria-current="page"`. Content of the row's own sits
+* before and after the tabs.
+*/
+function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, as = "div", orientation = "horizontal", variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth = false, isCentered = false, shouldSelectOnFocus = false, overflowBehavior = "none", overflowLabel, scrollButtons = "auto", shouldShowScrollButtonsOnMobile = false, hasVisibleScrollbar = false, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, id, className, "data-testid": dataTestid, ...spaceProps }) {
+	const theme = require_theme.useTheme();
+	const dp = require_theme.useDefaultProps("Tabs");
+	const variant = variantProp ?? dp.variant ?? "underline";
+	const color = colorProp ?? dp.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
+	const size = sizeProp ?? dp.size ?? require_themeDefault.themeDefault(theme, "size", "md");
+	const hasDivider = hasDividerProp ?? dp.hasDivider ?? variant !== "boxed";
+	const isFilled = variant === "boxed" || variant === "enclosed" && !hasDivider;
+	const selectedBg = selectedBgProp ?? dp.selectedBg ?? (isFilled ? "paper" : void 0);
+	const tabList = useTabList();
+	const isControlled = valueProp !== void 0;
+	const [ownValue, setOwnValue] = (0, react.useState)(defaultValue ?? null);
+	const selectedValue = isControlled ? valueProp : ownValue;
+	const ownId = (0, react.useId)();
+	const baseId = tabList?.baseId ?? ownId;
+	const listRef = (0, react.useRef)(null);
+	const indicatorRef = (0, react.useRef)(null);
+	const isNavigation = as === "nav";
+	const isVertical = orientation === "vertical";
+	const select = (0, react.useCallback)((next) => {
+		if (!isControlled) setOwnValue(next);
+		onChange?.(next);
+	}, [isControlled, onChange]);
+	const focusableValue = getFocusableValue(children, selectedValue);
+	const tabDp = require_theme.useDefaultProps("Tab");
+	const selectedColor = readTabs(children).find((tab) => tab.value === selectedValue)?.color ?? colorProp ?? tabDp.color ?? color;
+	const tabSizes = readTabs(children).map((tab) => theme.sizes[tab.size ?? sizeProp ?? tabDp.size ?? size]);
+	const rowPaddingTop = getLargestSpace(tabSizes.map((tabSize) => tabSize.paddingTop)) ?? theme.sizes[size].paddingTop;
+	const rowPaddingBottom = getLargestSpace(tabSizes.map((tabSize) => tabSize.paddingBottom)) ?? theme.sizes[size].paddingBottom;
+	const rowProps = (0, react.useMemo)(() => ({
+		color: colorProp,
+		textColor,
+		size: sizeProp,
+		selectedBg: selectedBgProp
+	}), [
+		colorProp,
+		textColor,
+		sizeProp,
+		selectedBgProp
+	]);
+	const context = (0, react.useMemo)(() => ({
+		selectedValue,
+		focusableValue,
+		select,
+		onTabClose,
+		getTabId: (value) => require_surfaceSystem.getTabId(baseId, value),
+		getPanelId: (value) => tabList ? require_surfaceSystem.getPanelId(baseId, value) : void 0,
+		isNavigation,
+		isVertical,
+		variant,
+		color,
+		textColor,
+		size,
+		fullWidth,
+		hasDivider,
+		selectedBg,
+		selectedColor,
+		rowPaddingTop,
+		rowPaddingBottom,
+		rowProps,
+		shouldSelectOnFocus,
+		shouldShowScrollButtonsOnMobile
+	}), [
+		selectedValue,
+		focusableValue,
+		select,
+		onTabClose,
+		baseId,
+		tabList,
+		isNavigation,
+		isVertical,
+		variant,
+		color,
+		textColor,
+		size,
+		fullWidth,
+		hasDivider,
+		selectedBg,
+		selectedColor,
+		rowPaddingTop,
+		rowPaddingBottom,
+		rowProps,
+		shouldSelectOnFocus,
+		shouldShowScrollButtonsOnMobile
+	]);
+	const updateIndicator = (0, react.useCallback)(() => {
+		const indicator = indicatorRef.current;
+		if (!indicator) return;
+		const selected = listRef.current.querySelector("[data-tab-selected]");
+		if (!selected) {
+			indicator.style.display = "none";
+			return;
+		}
+		indicator.style.display = "block";
+		if (isVertical) {
+			indicator.style.left = "";
+			indicator.style.width = "";
+			indicator.style.top = `${selected.offsetTop}px`;
+			indicator.style.height = `${selected.offsetHeight}px`;
+		} else {
+			indicator.style.top = "";
+			indicator.style.height = "";
+			indicator.style.left = `${selected.offsetLeft}px`;
+			indicator.style.width = `${selected.offsetWidth}px`;
+		}
+	}, [isVertical]);
+	(0, react.useLayoutEffect)(updateIndicator);
+	const isScrolling = overflowBehavior === "scroll";
+	const scroll = useTabsScroll(listRef, isScrolling, isVertical);
+	const isFitting = overflowBehavior === "menu";
+	const tabs = readTabs(children);
+	const overflow = useTabsOverflow(listRef, isFitting, isVertical, tabs.map((tab) => tab.value), focusableValue);
+	const hiddenTabs = tabs.filter((tab) => overflow.hidden.includes(tab.value));
+	const handleOverflowKeyDown = (event) => {
+		if (event.key !== "Delete") return;
+		const row = event.target.dataset.value;
+		const tab = hiddenTabs.find((hidden) => String(hidden.value) === row);
+		if (tab?.closeLabel === void 0) return;
+		event.preventDefault();
+		onTabClose?.(tab.value);
+	};
+	const updateOverflow = isFitting ? overflow.update : scroll.update;
+	(0, react.useImperativeHandle)(action, () => ({
+		updateIndicator,
+		updateOverflow
+	}), [updateIndicator, updateOverflow]);
+	(0, react.useEffect)(() => {
+		if (!isScrolling) return;
+		const selected = listRef.current.querySelector("[data-tab-selected]");
+		if (typeof selected?.scrollIntoView === "function") selected.scrollIntoView({
+			block: "nearest",
+			inline: "nearest"
+		});
+	}, [isScrolling, selectedValue]);
+	const hasScrollButtons = isScrolling && (scrollButtons === "always" || scrollButtons === "auto" && scroll.isOverflowing);
+	const ScrollButton = slots?.scrollButton ?? require_Tabs_TabScrollButton.TabScrollButton;
+	const renderScrollButton = (direction) => {
+		const canScroll = direction === -1 ? scroll.canScrollStart : scroll.canScrollEnd;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ScrollButton, {
+			direction: direction === -1 ? "start" : "end",
+			orientation,
+			disabled: scrollButtons === "always" && !canScroll,
+			isHidden: scrollButtons === "auto" && !canScroll,
+			onClick: () => scroll.scrollByView(direction)
+		});
+	};
+	const handleKeyDown = (event) => {
+		if (isNavigation || event.target.dataset.tab === void 0) return;
+		const list = event.currentTarget;
+		const forward = require_isRtl.isRtl(list) ? "ArrowLeft" : "ArrowRight";
+		const backward = require_isRtl.isRtl(list) ? "ArrowRight" : "ArrowLeft";
+		const nextKey = isVertical ? "ArrowDown" : forward;
+		const previousKey = isVertical ? "ArrowUp" : backward;
+		let step = STEP_BY_KEY[event.key];
+		if (event.key === nextKey) step = "next";
+		if (event.key === previousKey) step = "previous";
+		if (!step) return;
+		const target = getNextTab(Array.from(list.querySelectorAll("[data-tab]")), list.ownerDocument.activeElement, step);
+		event.preventDefault();
+		target?.focus();
+	};
+	const styleProps = {
+		variant,
+		color: selectedColor,
+		size,
+		orientation,
+		fullWidth,
+		hasDivider
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dividerLine.TabsContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TabsRoot, {
+			...spaceProps,
+			...styleProps,
+			bg,
+			as,
+			id,
+			className,
+			"data-testid": dataTestid,
+			"aria-label": isNavigation ? ariaLabel : void 0,
+			"aria-labelledby": isNavigation ? ariaLabelledBy : void 0,
+			children: [
+				startContent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StartContent, {
+					...styleProps,
+					children: startContent
+				}),
+				hasScrollButtons && renderScrollButton(-1),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TabsList, {
+					...styleProps,
+					ref: listRef,
+					isCentered,
+					isScrolling,
+					isFitting,
+					hasVisibleScrollbar,
+					role: isNavigation ? void 0 : "tablist",
+					"aria-orientation": isNavigation ? void 0 : orientation,
+					"aria-label": isNavigation ? void 0 : ariaLabel,
+					"aria-labelledby": isNavigation ? void 0 : ariaLabelledBy,
+					onKeyDown: handleKeyDown,
+					children: [react.Children.toArray(children).map((child, index) => {
+						const value = (0, react.isValidElement)(child) ? child.props.value ?? index : index;
+						if (overflow.hidden.includes(value)) return null;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_dividerLine.TabIndexContext.Provider, {
+							value: index,
+							children: child
+						}, (0, react.isValidElement)(child) ? child.key : index);
+					}), variant === "underline" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TabsIndicator, {
+						...styleProps,
+						ref: indicatorRef,
+						"aria-hidden": true
+					})]
+				}),
+				hasScrollButtons && renderScrollButton(1),
+				hiddenTabs.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_View.View, {
+					display: "contents",
+					onKeyDown: handleOverflowKeyDown,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.Menu, {
+						align: "end",
+						onSelect: select,
+						trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowButton, {
+							type: "button",
+							...styleProps,
+							"aria-label": overflowLabel,
+							title: overflowLabel,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+								name: "expand_more",
+								size: "sm",
+								color: "inherit"
+							})
+						}),
+						children: hiddenTabs.map((tab) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_MenuItem.MenuItem, {
+							value: tab.value,
+							disabled: tab.disabled,
+							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OverflowClose, {
+								type: "button",
+								color: selectedColor,
+								"aria-hidden": true,
+								title: tab.closeLabel,
+								tabIndex: -1,
+								onClick: () => onTabClose?.(tab.value),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+									name: "close",
+									size: "0.75rem",
+									color: "inherit"
+								})
+							}),
+							children: tab.label ?? tab.icon
+						}, tab.value))
+					})
+				}),
+				endContent != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EndContent, {
+					...styleProps,
+					children: endContent
+				})
+			]
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "TabListContext", {
+	enumerable: true,
+	get: function() {
+		return TabListContext;
+	}
+});
+Object.defineProperty(exports, "Tabs", {
+	enumerable: true,
+	get: function() {
+		return Tabs;
+	}
+});

package/dist/Tabs.cjs

@@ -0,0 +1,13 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Tabs_Tab = require("./Tabs/Tab.cjs");
+const require_Tabs_TabContext = require("./Tabs/TabContext.cjs");
+const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
+const require_Tabs = require("./Tabs-D4tWCq78.cjs");
+const require_Tabs_TabList = require("./Tabs/TabList.cjs");
+const require_Tabs_TabPanel = require("./Tabs/TabPanel.cjs");
+exports.Tab = require_Tabs_Tab.Tab;
+exports.TabContext = require_Tabs_TabContext.TabContext;
+exports.TabList = require_Tabs_TabList.TabList;
+exports.TabPanel = require_Tabs_TabPanel.TabPanel;
+exports.TabScrollButton = require_Tabs_TabScrollButton.TabScrollButton;
+exports.Tabs = require_Tabs.Tabs;

package/dist/Tabs.d.cts

@@ -0,0 +1,8 @@
+import { t as TabValue } from "./TabsContext-B_XHbjcS.cjs";
+import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.cjs";
+import { TabContext, TabContextProps } from "./Tabs/TabContext.cjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-KnXhlKMr.cjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-WHFhjfgy.cjs";
+import { TabList, TabListProps } from "./Tabs/TabList.cjs";
+import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.cjs";
+export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.d.mts

@@ -0,0 +1,8 @@
+import { t as TabValue } from "./TabsContext-Dn2kqUwr.mjs";
+import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.mjs";
+import { TabContext, TabContextProps } from "./Tabs/TabContext.mjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-CE5JG1us.mjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-bpnLB_4K.mjs";
+import { TabList, TabListProps } from "./Tabs/TabList.mjs";
+import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.mjs";
+export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.mjs

@@ -0,0 +1,7 @@
+import { Tab } from "./Tabs/Tab.mjs";
+import { TabContext } from "./Tabs/TabContext.mjs";
+import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
+import { t as Tabs } from "./Tabs-BTNOJx5v.mjs";
+import { TabList } from "./Tabs/TabList.mjs";
+import { TabPanel } from "./Tabs/TabPanel.mjs";
+export { Tab, TabContext, TabList, TabPanel, TabScrollButton, Tabs };