@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/navigation/Tabs.js

@@ -0,0 +1,626 @@
+import { t } from "../config/theme/tokens.js";
+import { useLang } from "../config/context.js";
+import { useDefaults } from "../config/defaults.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { fontSizeStyles } from "../utils/style/typography.js";
+import { focusRingStyles } from "../utils/style/styles.js";
+import { useRecipe } from "../config/styles.js";
+import { ButtonBase } from "../base/ButtonBase.js";
+import { IconButton } from "../base/IconButton.js";
+import { startMove } from "../utils/dom/move.js";
+import { inlineArrows, isRtl } from "../utils/dom/direction.js";
+import { batchLayout } from "../utils/dom/layout-batch.js";
+import { useResizeObserver } from "../utils/dom/resize.js";
+import { announce } from "../utils/dom/announcer.js";
+import { useLazyContent } from "../utils/motion/presence.js";
+import { plainText } from "../utils/data/text.js";
+import { rovingFocus } from "../utils/dom/roving-focus.js";
+import { Menu as Menu$1, MenuRadioGroup, MenuRadioItem } from "../overlay/Menu.js";
+import { useActiveIndicator } from "../utils/motion/active-indicator.js";
+import { computed, createVNode, isVNode, mergeProps, nextTick, onBeforeUnmount, ref, shallowRef, useId, watch } from "vue";
+import { _component, bindable, childrenProp, createContext, effect, forwardChildren, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { ChevronDown, ChevronLeft, ChevronRight, Plus, X } from "@lucide/icons";
+//#region src/navigation/Tabs.tsx
+/**
+* 标签页（WAI-ARIA 的 Tabs 模式），复合组件：Tabs（状态）> TabList（role="tablist"）> Tab（role="tab"），
+* 加上与每个 Tab 对应的 TabPanel（role="tabpanel"）。各层都是独立的组件，可以自由排版、各自加属性。
+*
+*   <Tabs _value={tab}>
+*     <TabList aria-label="订单">
+*       <Tab value="all">全部</Tab>
+*       <Tab value="paid">已付款</Tab>
+*     </TabList>
+*     <TabPanel value="all">…</TabPanel>
+*     <TabPanel value="paid">…</TabPanel>
+*   </Tabs>
+*
+* 键盘：标签之间用方向键移动（漫游焦点，整组一个 Tab 位置），Home / End 到两端；
+* activation="automatic"（默认）时焦点移到哪个标签就切换到哪个，"manual" 时按 Enter / 空格才切换。
+*
+* line 样式的下划线是 TabList 里的一个指示条（Indicator）：跟着当前标签走（useActiveIndicator：
+* 切换时用 Anime.js 滑过去，时长取主题，减少动态效果时直接到位；尺寸变化时直接对齐）。
+*/
+/** 标签的排列方向 */
+/** 焦点移动时是否同时切换 */
+/** 标签的样式 */
+/** Tabs 的外观选项；可以用 createUi / Provider 的 defaults.Tabs 统一改默认值 */
+/** Tabs 交给 TabList、Tab、TabPanel 的状态 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** Tabs 的上下文：自定义的标签或面板可以 inject 它 */
+var TabsContext = createContext("Tabs");
+/** 值里的空格等字符不能出现在 id 里 */
+var idSafe = (value) => value.replace(/[^\w-]/g, "_");
+/** 未声明的属性落到外层 div 上 */
+/** Tabs 的样式：root、vertical */
+var tabsStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_md",
+		minWidth: 0
+	},
+	vertical: {
+		flexDirection: "row",
+		alignItems: "flex-start"
+	}
+});
+/** 标签页的状态容器：管理当前值，并把它交给 TabList、Tab、TabPanel */
+var Tabs = /*#__PURE__*/ _component((_props, _ctx) => {
+	const value = bindable(_props, "_value", () => void 0, _ctx.emit);
+	const orientation = readonlyProp(_props, "orientation", "horizontal");
+	const activation = readonlyProp(_props, "activation", "automatic");
+	const variant = readonlyProp(_props, "variant");
+	const size = readonlyProp(_props, "size");
+	const lazy = readonlyProp(_props, "lazy", false);
+	const ripple = readonlyProp(_props, "ripple");
+	const children = childrenProp(_props);
+	const rest = restProps(_props, _ctx, false);
+	const appearance = useDefaults("Tabs", () => ({
+		variant: variant.value,
+		size: size.value
+	}), { variant: "line" });
+	const baseId = useId();
+	let registered = shallowRef([]);
+	let panels = shallowRef([]);
+	let dragging = ref(void 0);
+	const labels = /* @__PURE__ */ new Map();
+	const current = computed(() => value.value ?? registered.value[0]);
+	const tabId = (tab) => `${baseId}-tab-${idSafe(tab)}`;
+	TabsContext.provide({
+		get value() {
+			return current.value;
+		},
+		get orientation() {
+			return orientation.value;
+		},
+		get activation() {
+			return activation.value;
+		},
+		get variant() {
+			return appearance().variant;
+		},
+		get lazy() {
+			return lazy.value;
+		},
+		get ripple() {
+			return ripple.value;
+		},
+		select: (next) => value.value = next,
+		id: (part, tab) => part === "tab" ? tabId(tab) : `${baseId}-${part}-${idSafe(tab)}`,
+		register(tab, label) {
+			registered.value = [...registered.value, tab];
+			labels.set(tab, label);
+			return (order = registered.value) => {
+				registered.value = registered.value.filter((item) => item !== tab);
+				labels.delete(tab);
+				if (current.value !== tab) return;
+				const index = order.indexOf(tab);
+				const rest = order.filter((item) => item !== tab && registered.value.includes(item));
+				value.value = rest[Math.min(Math.max(index, 0), rest.length - 1)];
+			};
+		},
+		registerPanel(tab) {
+			panels.value = [...panels.value, tab];
+			return () => panels.value = panels.value.filter((item) => item !== tab);
+		},
+		hasPanel: (tab) => panels.value.includes(tab),
+		label: (tab) => labels.get(tab)?.() ?? tab,
+		get values() {
+			return registered.value;
+		},
+		get dragging() {
+			return dragging.value;
+		},
+		setDragging: (next) => dragging.value = next,
+		refocus: () => void nextTick(() => {
+			if (current.value !== void 0) document.getElementById(tabId(current.value))?.focus();
+		})
+	});
+	return () => createVNode("div", mergeProps(mergeAttrs({ sx: [
+		tabsStyles.root,
+		orientation.value === "vertical" && tabsStyles.vertical,
+		appearance().size && fontSizeStyles[appearance().size]
+	] }, rest), { "data-orientation": orientation.value }), [children.value]);
+}, {
+	name: "Tabs",
+	props: [
+		"_value",
+		"onUpdate:_value",
+		"orientation",
+		"activation",
+		"variant",
+		"size",
+		"lazy",
+		"ripple"
+	]
+});
+/** 角色、方向由组件管理 */
+/** 未声明的属性落到 role="tablist" 的 div 上；aria-label 是这组标签的名称 */
+/** TabList 的样式：bar、barLine、root、scrollable、line、lineVertical、soft、softVertical、indicator、indicatorVertical */
+var tabListStyles = css.create({
+	bar: {
+		display: "flex",
+		alignItems: "center",
+		gap: "_xs",
+		minWidth: 0
+	},
+	barLine: {
+		borderBottomWidth: "_xs",
+		borderBottomStyle: "solid",
+		borderBottomColor: "_borderMuted"
+	},
+	root: {
+		display: "flex",
+		flexShrink: 0
+	},
+	scrollable: {
+		flexShrink: 1,
+		minWidth: 0,
+		overflowX: "auto",
+		overflowY: "hidden",
+		scrollbarWidth: "none"
+	},
+	line: {
+		position: "relative",
+		gap: "_md"
+	},
+	lineVertical: {
+		flexDirection: "column",
+		gap: "_xs",
+		borderInlineEndWidth: "_xs",
+		borderInlineEndStyle: "solid",
+		borderInlineEndColor: "_borderMuted"
+	},
+	soft: {
+		gap: "_xs",
+		padding: "_xs",
+		borderRadius: "_md",
+		backgroundColor: "_fill"
+	},
+	softVertical: { flexDirection: "column" },
+	indicator: {
+		position: "absolute",
+		left: 0,
+		bottom: 0,
+		width: 0,
+		height: "_borderWidths.sm",
+		borderRadius: "_sm",
+		backgroundColor: "_accent",
+		pointerEvents: "none"
+	},
+	indicatorVertical: {
+		left: "auto",
+		bottom: "auto",
+		top: 0,
+		insetInlineEnd: `calc(-1 * ${t.borderWidths.xs})`,
+		width: "_borderWidths.sm",
+		height: 0
+	}
+});
+/** 列表里各标签的 value，按显示的顺序（拖动排序后组件的登记顺序不再是显示顺序） */
+var tabOrder = (list) => [...list?.querySelectorAll("[role=\"tab\"]") ?? []].map((tab) => tab.dataset.value);
+/** 标签列表（role="tablist"）：方向键在标签之间移动；横排放不下时有滚动按钮，可以拖动排序、新建 */
+var TabList = /*#__PURE__*/ _component((_props2, _ctx2) => {
+	const _cache = [];
+	const loop = readonlyProp(_props2, "loop", true);
+	const onAdd = readonlyProp(_props2, "onAdd");
+	const onReorder = readonlyProp(_props2, "onReorder");
+	const showAllMenu = readonlyProp(_props2, "showAllMenu", false);
+	const propsIndicator = readonlyProp(_props2, "propsIndicator");
+	const propsBar = readonlyProp(_props2, "propsBar");
+	const propsAdd = readonlyProp(_props2, "propsAdd");
+	const children = childrenProp(_props2);
+	const rest = restProps(_props2, _ctx2, false);
+	const lang = useLang();
+	const tabs = TabsContext.inject();
+	let list = shallowRef(null);
+	let indicator = shallowRef(null);
+	let overflow = shallowRef({
+		overflowing: false,
+		start: false,
+		end: false
+	});
+	effect(() => list.value ? rovingFocus(list.value, {
+		items: "[role=\"tab\"]",
+		orientation: tabs.orientation,
+		loop: loop.value
+	}) : void 0);
+	useActiveIndicator(() => ({
+		container: list.value,
+		indicator: indicator.value,
+		active: "[role=\"tab\"][aria-selected=\"true\"]",
+		axis: tabs.orientation,
+		value: tabs.value
+	}));
+	function measure() {
+		batchLayout(() => {
+			if (!list.value || tabs.orientation === "vertical") return;
+			const scrolled = Math.abs(list.value.scrollLeft);
+			const max = list.value.scrollWidth - list.value.clientWidth;
+			const next = {
+				overflowing: max > 1,
+				start: scrolled > 1,
+				end: scrolled < max - 1
+			};
+			return () => {
+				if (Object.entries(next).some(([key, value]) => overflow.value[key] !== value)) overflow.value = next;
+			};
+		});
+	}
+	useResizeObserver(() => list.value ? [list.value, ...list.value.querySelectorAll("[role=\"tab\"]")] : [], measure);
+	watch(() => tabs.values.length, measure, { flush: "post" });
+	watch(() => tabs.value, (value) => {
+		const tab = value === void 0 ? null : document.getElementById(tabs.id("tab", value));
+		if (!list.value || !tab || list.value.scrollWidth <= list.value.clientWidth) return;
+		const outer = list.value.getBoundingClientRect();
+		const inner = tab.getBoundingClientRect();
+		if (inner.left < outer.left) list.value.scrollBy({ left: inner.left - outer.left - 16 });
+		else if (inner.right > outer.right) list.value.scrollBy({ left: inner.right - outer.right + 16 });
+	}, { flush: "post" });
+	/** 滚动按钮：往前（-1）或往后（1）滚大半屏 */
+	function scrollBy(direction) {
+		if (!list.value) return;
+		const sign = isRtl(list.value) ? -direction : direction;
+		list.value.scrollBy({
+			left: sign * list.value.clientWidth * .8,
+			behavior: "smooth"
+		});
+	}
+	/** 把 value 移到 to（按显示的顺序），交给使用方重排；键盘移动时告诉读屏 */
+	function moveTab(value, to, announceMove) {
+		const order = tabOrder(list.value);
+		const from = order.indexOf(value);
+		if (!onReorder.value || from < 0 || to < 0 || to >= order.length || to === from) return;
+		const next = order.filter((item) => item !== value);
+		next.splice(to, 0, value);
+		onReorder.value(next);
+		if (!announceMove) return;
+		const label = document.getElementById(tabs.id("tab", value))?.textContent ?? value;
+		announce(lang.tabMoved(label, to + 1, order.length));
+		nextTick(() => document.getElementById(tabs.id("tab", value))?.focus());
+	}
+	function onPointerdown(event) {
+		const tab = event.target.closest("[role=\"tab\"]");
+		if (!onReorder.value || !tab || !list.value || event.pointerType === "touch") return;
+		const value = tab.dataset.value;
+		startMove(event, {
+			threshold: 4,
+			captureTarget: list.value,
+			onMove: ({ clientX }) => {
+				tabs.setDragging(value);
+				const order = tabOrder(list.value);
+				const from = order.indexOf(value);
+				const over = [...list.value.querySelectorAll("[role=\"tab\"]")].find((item) => {
+					const rect = item.getBoundingClientRect();
+					return clientX >= rect.left && clientX <= rect.right;
+				});
+				const to = over ? order.indexOf(over.dataset.value) : -1;
+				if (!over || to === from) return;
+				const rect = over.getBoundingClientRect();
+				const center = rect.left + rect.width / 2;
+				const past = isRtl(list.value) ? clientX < center : clientX > center;
+				if (to > from === past) moveTab(value, to, false);
+			},
+			onEnd: () => tabs.setDragging(void 0)
+		});
+	}
+	function onKeydown(event) {
+		if (!onReorder.value || !event.altKey || event.ctrlKey || event.metaKey || !list.value) return;
+		const tab = event.target.closest("[role=\"tab\"]");
+		const { forward, backward } = inlineArrows(isRtl(list.value));
+		if (!tab || event.key !== forward && event.key !== backward) return;
+		event.preventDefault();
+		const value = tab.dataset.value;
+		moveTab(value, tabOrder(list.value).indexOf(value) + (event.key === forward ? 1 : -1), true);
+	}
+	/** “全部标签页”菜单：按显示的顺序（刚加上、还没渲染出来的排在最后）列出标签的文字 */
+	function renderAllMenu() {
+		let _slot;
+		const shown = tabOrder(list.value).filter((value) => tabs.values.includes(value));
+		const items = [...shown, ...tabs.values.filter((value) => !shown.includes(value))].map((value) => ({
+			value,
+			label: tabs.label(value)
+		}));
+		return createVNode(Menu$1, {
+			"trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergeProps(props, {
+				"icon": ChevronDown,
+				"size": "sm",
+				"variant": "ghost",
+				"aria-label": lang.tabList
+			}), null)),
+			"placement": "bottom-end"
+		}, { default: () => [createVNode(MenuRadioGroup, {
+			"label": lang.tabList,
+			"_value": tabs.value ?? "",
+			"onUpdate:_value": _cache[1] || (_cache[1] = (next) => tabs.select(next))
+		}, _isSlot(_slot = items.map((item) => createVNode(MenuRadioItem, {
+			"key": item.value,
+			"value": item.value
+		}, { default: () => [item.label] }))) ? _slot : { default: () => [_slot] })] });
+	}
+	return () => {
+		const vertical = tabs.orientation === "vertical";
+		const tablist = createVNode("div", mergeAttrs({ sx: [
+			tabListStyles.root,
+			!vertical && tabListStyles.scrollable,
+			tabs.variant === "line" ? [tabListStyles.line, vertical && tabListStyles.lineVertical] : [tabListStyles.soft, vertical && tabListStyles.softVertical]
+		] }, rest, {
+			ref: list,
+			role: "tablist",
+			"aria-orientation": tabs.orientation,
+			onScroll: measure,
+			onPointerdown,
+			onKeydown
+		}), [children.value, tabs.variant === "line" && createVNode("span", mergeAttrs({ sx: [tabListStyles.indicator, vertical && tabListStyles.indicatorVertical] }, propsIndicator.value, {
+			ref: indicator,
+			"aria-hidden": true
+		}), null)]);
+		if (vertical) return tablist;
+		const scrollButton = (direction) => overflow.value.overflowing && createVNode(IconButton, {
+			"icon": direction === 1 ? ChevronRight : ChevronLeft,
+			"propsIcon": _cache[2] || (_cache[2] = { flipInRtl: true }),
+			"size": "sm",
+			"variant": "ghost",
+			"tabindex": -1,
+			"aria-label": direction === 1 ? lang.tabScrollNext : lang.tabScrollPrevious,
+			"disabled": direction === 1 ? !overflow.value.end : !overflow.value.start,
+			"onClick": () => scrollBy(direction)
+		}, null);
+		return createVNode("div", mergeAttrs({ sx: [tabListStyles.bar, tabs.variant === "line" && tabListStyles.barLine] }, propsBar.value), [
+			scrollButton(-1),
+			tablist,
+			scrollButton(1),
+			showAllMenu.value && renderAllMenu(),
+			onAdd.value && createVNode(IconButton, mergePartProps({
+				icon: Plus,
+				size: "sm",
+				variant: "ghost",
+				"aria-label": lang.tabAdd
+			}, propsAdd.value, { onClick: onAdd.value }), null)
+		]);
+	};
+}, {
+	name: "TabList",
+	props: [
+		"loop",
+		"onAdd",
+		"onReorder",
+		"showAllMenu",
+		"propsIndicator",
+		"propsBar",
+		"propsAdd"
+	]
+});
+/** 角色、选中、关联与可聚焦由组件管理 */
+/** 未声明的属性落到 role="tab" 的 button 上 */
+/** Tabs 的样式：root、hover、line、lineVertical、lineActive、soft 等 */
+/**
+* 标签的配方：状态（选中、禁用、拖动中）由 DOM 上的 aria-selected、disabled、data-dragging 决定，
+* 样式、方向、可关闭是档位
+*/
+var tabRecipe = css.recipe({
+	name: "Tab",
+	parts: [
+		"root",
+		"closeWrapper",
+		"close"
+	],
+	base: {
+		root: {
+			display: "inline-flex",
+			alignItems: "center",
+			justifyContent: "center",
+			gap: "_sm",
+			minHeight: `max(${t.sizes.control}, ${t.sizes.minTarget})`,
+			paddingInline: "_md",
+			color: {
+				default: "_textMuted",
+				_hover: "_text",
+				_selected: "_text"
+			},
+			fontWeight: "_medium",
+			whiteSpace: "nowrap",
+			borderRadius: "_sm",
+			opacity: {
+				default: null,
+				_dragging: .6,
+				_disabled: "_disabled"
+			}
+		},
+		closeWrapper: {
+			display: "inline-grid",
+			flexShrink: 0
+		},
+		close: {
+			gridArea: "1 / 1",
+			justifySelf: "end",
+			alignSelf: "center",
+			marginInlineEnd: "_xs"
+		}
+	},
+	variants: {
+		variant: {
+			line: { root: {
+				marginBottom: `calc(-1 * ${t.borderWidths.xs})`,
+				borderBottomWidth: "_sm",
+				borderBottomStyle: "solid",
+				borderBottomColor: "transparent"
+			} },
+			soft: { root: {
+				backgroundColor: {
+					default: "transparent",
+					_selected: "_surface"
+				},
+				boxShadow: {
+					default: null,
+					_selected: "_xs"
+				}
+			} }
+		},
+		orientation: {
+			horizontal: {},
+			vertical: {}
+		},
+		closable: { true: { root: {
+			gridArea: "1 / 1",
+			paddingInlineEnd: `calc(${t.space.md} + 1.25em)`
+		} } }
+	},
+	compound: [{
+		when: {
+			variant: "line",
+			orientation: "vertical"
+		},
+		root: {
+			justifyContent: "flex-start",
+			marginBottom: 0,
+			marginInlineEnd: `calc(-1 * ${t.borderWidths.xs})`,
+			borderBottomWidth: 0,
+			borderInlineEndWidth: "_sm",
+			borderInlineEndStyle: "solid",
+			borderInlineEndColor: "transparent"
+		}
+	}]
+});
+/** 标签的部件（createUi / Provider 的 styles.Tab 按它定制） */
+/** 标签（role="tab" 的 button） */
+var Tab = /*#__PURE__*/ _component((_props3, _ctx3) => {
+	const value = readonlyProp(_props3, "value");
+	const disabled = readonlyProp(_props3, "disabled", false);
+	const onClose = readonlyProp(_props3, "onClose");
+	const propsClose = readonlyProp(_props3, "propsClose");
+	const children = childrenProp(_props3);
+	const rest = restProps(_props3, _ctx3, false);
+	const lang = useLang();
+	const tabs = TabsContext.inject();
+	const recipe = useRecipe(tabRecipe);
+	const unregister = tabs.register(untrack(() => value.value), () => plainText(children.value) || value.value);
+	onBeforeUnmount(() => {
+		const element = document.getElementById(tabs.id("tab", value.value));
+		if (element && element === document.activeElement) tabs.refocus();
+		unregister(tabOrder(element?.closest("[role=\"tablist\"]")));
+	});
+	function onKeydown(event) {
+		if (event.key === "Delete" && onClose.value && !disabled.value) {
+			event.preventDefault();
+			onClose.value();
+		}
+	}
+	return () => {
+		let _slot2;
+		const selected = tabs.value === value.value;
+		const styles = recipe({
+			variant: tabs.variant,
+			orientation: tabs.orientation,
+			closable: !!onClose.value
+		});
+		const tab = createVNode(ButtonBase, mergeProps(mergePartProps({
+			...styles.root,
+			ripple: tabs.ripple
+		}, rest, {
+			role: "tab",
+			id: tabs.id("tab", value.value),
+			"aria-selected": selected,
+			"aria-controls": tabs.hasPanel(value.value) ? tabs.id("panel", value.value) : void 0,
+			disabled: disabled.value,
+			onClick: () => tabs.select(value.value),
+			onFocus: () => {
+				if (tabs.activation === "automatic") tabs.select(value.value);
+			},
+			onKeydown,
+			"aria-keyshortcuts": onClose.value ? "Delete" : void 0,
+			onAuxclick: (event) => {
+				if (event.button === 1 && onClose.value && !disabled.value) onClose.value();
+			}
+		}), {
+			"data-state": selected ? "active" : "inactive",
+			"data-value": value.value,
+			"data-dragging": tabs.dragging === value.value || void 0
+		}), _isSlot(_slot2 = forwardChildren(_props3)) ? _slot2 : { default: () => [_slot2] });
+		if (!onClose.value) return tab;
+		return createVNode("span", mergeProps({ "role": "presentation" }, mergeAttrs(styles.closeWrapper)), [tab, createVNode(IconButton, mergePartProps({
+			icon: X,
+			size: "xs",
+			variant: "ghost",
+			radius: "full",
+			...styles.close,
+			"aria-label": lang.tabClose(plainText(children.value) || value.value)
+		}, propsClose.value, {
+			tabindex: -1,
+			"aria-hidden": true,
+			disabled: disabled.value,
+			onPointerdown: (event) => event.preventDefault(),
+			onClick: (event) => {
+				event.stopPropagation();
+				onClose.value();
+			}
+		}), null)]);
+	};
+}, {
+	name: "Tab",
+	props: [
+		"value",
+		"disabled",
+		"onClose",
+		"propsClose"
+	]
+});
+/** 角色、关联与显示由组件管理 */
+/** 未声明的属性落到 role="tabpanel" 的 div 上 */
+/** Tabs 的样式：root */
+var tabPanelStyles = css.create({ root: {
+	flexGrow: 1,
+	minWidth: 0,
+	borderRadius: "_sm"
+} });
+/** 标签面板（role="tabpanel"）：只显示当前标签的那一个 */
+var TabPanel = /*#__PURE__*/ _component((_props4, _ctx4) => {
+	const value = readonlyProp(_props4, "value");
+	const children = childrenProp(_props4);
+	const rest = restProps(_props4, _ctx4, false);
+	const tabs = TabsContext.inject();
+	onBeforeUnmount(tabs.registerPanel(untrack(() => value.value)));
+	const showContent = useLazyContent(() => tabs.value === value.value, () => tabs.lazy);
+	return () => {
+		const selected = tabs.value === value.value;
+		return createVNode("div", mergeProps(mergeAttrs({
+			sx: [tabPanelStyles.root, focusRingStyles.visible],
+			tabindex: 0
+		}, rest, {
+			role: "tabpanel",
+			id: tabs.id("panel", value.value),
+			"aria-labelledby": tabs.id("tab", value.value),
+			hidden: !selected
+		}), { "data-state": selected ? "active" : "inactive" }), [showContent() && children.value]);
+	};
+}, {
+	name: "TabPanel",
+	props: ["value"]
+});
+//#endregion
+export { Tab, TabList, TabPanel, Tabs, TabsContext, tabListStyles, tabPanelStyles, tabRecipe, tabsStyles };
+
+//# sourceMappingURL=Tabs.js.map