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

package/dist/Tabs-BTNOJx5v.mjs

@@ -0,0 +1,634 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { View } from "./View.mjs";
+import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-Z9_QludW.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
+import { t as MenuItem } from "./MenuItem-DUn4IZKK.mjs";
+import { t as Menu } from "./Menu-CrzHc_cn.mjs";
+import { a as TabsContext, i as TabIndexContext, n as getDividerShadow, r as getEnclosedPieceStyle, t as getDividerColor } from "./dividerLine-FahY-M6_.mjs";
+import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
+import { n as getPanelId, r as getTabId, t as surfaceSystem } from "./surfaceSystem-D8TbmKy3.mjs";
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#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 = useRef(/* @__PURE__ */ new Map());
+	const [hidden, setHidden] = 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 = useRef(measure);
+	useLayoutEffect(() => {
+		measureRef.current = measure;
+		measure();
+	});
+	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: 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] = useState(AT_REST);
+	const update = 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
+	]);
+	useLayoutEffect(update);
+	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 && 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 = createContext(null);
+/** The `TabList` these tabs render for, if any - which links them to their panels. */
+const useTabList = () => 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 = createShouldForwardProp([
+	...props,
+	"variant",
+	"color",
+	"size",
+	"orientation",
+	"fullWidth",
+	"hasDivider",
+	"isCentered"
+]);
+const TabsRoot = styled("div", {
+	name: "Tabs",
+	label: "Tabs",
+	shouldForwardProp,
+	systemProps: [src_exports.space, 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: getDividerShadow(theme, isVertical, getDividerColor(theme, variant, color)) }
+	};
+});
+const TabsList = styled("div", {
+	name: "Tabs",
+	slot: "list",
+	label: "TabsList",
+	shouldForwardProp: createShouldForwardProp([
+		...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,
+			...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 = styled("span", {
+	name: "Tabs",
+	slot: "indicator",
+	label: "TabsIndicator",
+	shouldForwardProp
+})(({ theme, color, orientation }) => {
+	const isVertical = orientation === "vertical";
+	return {
+		position: "absolute",
+		backgroundColor: (0, 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 = 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],
+	...getEnclosedPieceStyle(theme, styleProps)
+}));
+const EndContent = 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],
+	...getEnclosedPieceStyle(theme, styleProps)
+}));
+const OverflowButton = styled("button", {
+	name: "Tabs",
+	slot: "overflowButton",
+	label: "TabsOverflowButton",
+	shouldForwardProp
+})(({ theme, ...styleProps }) => {
+	const main = (0, src_exports.get)(theme, `palette.${styleProps.color}.main`);
+	return {
+		...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, src_exports.get)(theme, "text.primary"),
+		cursor: "pointer",
+		outline: "none",
+		"&:focus-visible": {
+			outline: `${theme.borderWidths.base} solid ${main}`,
+			outlineOffset: `-${theme.borderWidths.base}`
+		}
+	};
+});
+const OverflowClose = styled("button", {
+	name: "Tabs",
+	slot: "overflowClose",
+	label: "TabsOverflowClose",
+	shouldForwardProp
+})(({ theme, color }) => {
+	const main = (0, 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, src_exports.get)(theme, "text.secondary"),
+		cursor: "pointer",
+		"&:hover": { backgroundColor: `${main}1F` }
+	};
+});
+const readTabs = (children) => Children.toArray(children).flatMap((child, index) => {
+	if (!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 = useTheme();
+	const dp = useDefaultProps("Tabs");
+	const variant = variantProp ?? dp.variant ?? "underline";
+	const color = colorProp ?? dp.color ?? themeDefault(theme, "color", "primary");
+	const size = sizeProp ?? dp.size ?? 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] = useState(defaultValue ?? null);
+	const selectedValue = isControlled ? valueProp : ownValue;
+	const ownId = useId();
+	const baseId = tabList?.baseId ?? ownId;
+	const listRef = useRef(null);
+	const indicatorRef = useRef(null);
+	const isNavigation = as === "nav";
+	const isVertical = orientation === "vertical";
+	const select = useCallback((next) => {
+		if (!isControlled) setOwnValue(next);
+		onChange?.(next);
+	}, [isControlled, onChange]);
+	const focusableValue = getFocusableValue(children, selectedValue);
+	const tabDp = 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 = useMemo(() => ({
+		color: colorProp,
+		textColor,
+		size: sizeProp,
+		selectedBg: selectedBgProp
+	}), [
+		colorProp,
+		textColor,
+		sizeProp,
+		selectedBgProp
+	]);
+	const context = useMemo(() => ({
+		selectedValue,
+		focusableValue,
+		select,
+		onTabClose,
+		getTabId: (value) => getTabId(baseId, value),
+		getPanelId: (value) => tabList ? 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 = 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]);
+	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;
+	useImperativeHandle(action, () => ({
+		updateIndicator,
+		updateOverflow
+	}), [updateIndicator, updateOverflow]);
+	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 ?? TabScrollButton;
+	const renderScrollButton = (direction) => {
+		const canScroll = direction === -1 ? scroll.canScrollStart : scroll.canScrollEnd;
+		return /* @__PURE__ */ 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 = isRtl(list) ? "ArrowLeft" : "ArrowRight";
+		const backward = 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__ */ jsx(TabsContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ 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__ */ jsx(StartContent, {
+					...styleProps,
+					children: startContent
+				}),
+				hasScrollButtons && renderScrollButton(-1),
+				/* @__PURE__ */ 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: [Children.toArray(children).map((child, index) => {
+						const value = isValidElement(child) ? child.props.value ?? index : index;
+						if (overflow.hidden.includes(value)) return null;
+						return /* @__PURE__ */ jsx(TabIndexContext.Provider, {
+							value: index,
+							children: child
+						}, isValidElement(child) ? child.key : index);
+					}), variant === "underline" && /* @__PURE__ */ jsx(TabsIndicator, {
+						...styleProps,
+						ref: indicatorRef,
+						"aria-hidden": true
+					})]
+				}),
+				hasScrollButtons && renderScrollButton(1),
+				hiddenTabs.length > 0 && /* @__PURE__ */ jsx(View, {
+					display: "contents",
+					onKeyDown: handleOverflowKeyDown,
+					children: /* @__PURE__ */ jsx(Menu, {
+						align: "end",
+						onSelect: select,
+						trigger: /* @__PURE__ */ jsx(OverflowButton, {
+							type: "button",
+							...styleProps,
+							"aria-label": overflowLabel,
+							title: overflowLabel,
+							children: /* @__PURE__ */ jsx(Icon, {
+								name: "expand_more",
+								size: "sm",
+								color: "inherit"
+							})
+						}),
+						children: hiddenTabs.map((tab) => /* @__PURE__ */ jsx(MenuItem, {
+							value: tab.value,
+							disabled: tab.disabled,
+							secondaryAction: tab.closeLabel === void 0 ? void 0 : /* @__PURE__ */ jsx(OverflowClose, {
+								type: "button",
+								color: selectedColor,
+								"aria-hidden": true,
+								title: tab.closeLabel,
+								tabIndex: -1,
+								onClick: () => onTabClose?.(tab.value),
+								children: /* @__PURE__ */ jsx(Icon, {
+									name: "close",
+									size: "0.75rem",
+									color: "inherit"
+								})
+							}),
+							children: tab.label ?? tab.icon
+						}, tab.value))
+					})
+				}),
+				endContent != null && /* @__PURE__ */ jsx(EndContent, {
+					...styleProps,
+					children: endContent
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { TabListContext as n, Tabs as t };