beez-ui 2.5.0 → 2.6.1

package/dist/components/tabs.js

@@ -1,183 +1,650 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import * as React from "react";
+/**
+* Arc's Tabs (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md): its segmented list on Arc's tokens, a
+* highlight that glides between triggers with Arc's morph spring, a list that scrolls sideways and keeps the active
+* tab in view, and panels that slide in from the side of the chosen tab while their height morphs from the previous
+* panel. Radix keeps the roles, keyboard navigation and controlled or uncontrolled value.
+*/
+import { createContext, useContext, useLayoutEffect, useRef, useState } from "react";
 import { cva } from "class-variance-authority";
-import { Tabs as TabsPrimitive } from "radix-ui";
-import { GlideSlot } from "../motion/glide-slot.js";
-import { MotionSlot } from "../motion/motion-slot.js";
+import { Slot, Tabs as TabsPrimitive } from "radix-ui";
+import { AnimatePresence, animate, motion, useIsPresent } from "motion/react";
+import { TABS_DIRECTION, TABS_PANEL_HEIGHT_TOLERANCE_PX, TABS_PANEL_OFFSET_PX, TABS_PANEL_REDUCED_EXIT_DURATION_S, TABS_REVEAL_MARGIN_PX } from "../constants/tabs.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
 import { cn } from "../lib/utils.js";
+import { ARC_DURATION, ARC_EASE, ARC_SPRING_SMOOTH } from "../motion/arc-tokens.js";
+import { GlideSlot } from "../motion/glide-slot.js";
+import { useAttachedElement } from "../motion/use-attached-element.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const TabsMotionContext = createContext(null);
+/** Returns the elements of a slot that belong to this Tabs instance, never to a nested one. */
+function getOwnElements(root, selector) {
+	return Array.from(root.querySelectorAll(selector)).filter((element) => element.closest("[data-slot=\"tabs\"]") === root);
+}
+/**
+* Reads which way the selection travels from the order of this instance's triggers.
+* @param root - The tabs root, or null before it is attached.
+* @param fromValue - Value of the previously active tab.
+* @param toValue - Value of the newly active tab.
+* @returns The travel direction, or null when either tab is not rendered.
+*/
+function getTravelDirection(root, fromValue, toValue) {
+	if (!root) return null;
+	const order = getOwnElements(root, "[data-slot=\"tabs-trigger\"]").map((trigger) => trigger.getAttribute("data-value"));
+	const fromIndex = order.indexOf(fromValue);
+	const toIndex = order.indexOf(toValue);
+	if (fromIndex < 0 || toIndex < 0 || fromIndex === toIndex) return null;
+	return toIndex > fromIndex ? TABS_DIRECTION.forward : TABS_DIRECTION.backward;
+}
+/**
+* Groups a tab list with its panels. Accepts Radix's `value`/`defaultValue`/`onValueChange` contract unchanged.
+* @param props - Radix root props, including `orientation` and `ref`.
+* @returns The tabs root.
+*/
 function Tabs(t0) {
-	const $ = _c(10);
+	const $ = _c(28);
 	let className;
+	let defaultValue;
+	let onValueChange;
 	let props;
+	let ref;
 	let t1;
+	let value;
 	if ($[0] !== t0) {
-		({className, orientation: t1, ...props} = t0);
+		({className, orientation: t1, value, defaultValue, onValueChange, ref, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
+		$[2] = defaultValue;
+		$[3] = onValueChange;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = t1;
+		$[7] = value;
 	} else {
 		className = $[1];
-		props = $[2];
-		t1 = $[3];
+		defaultValue = $[2];
+		onValueChange = $[3];
+		props = $[4];
+		ref = $[5];
+		t1 = $[6];
+		value = $[7];
 	}
 	const orientation = t1 === undefined ? "horizontal" : t1;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+	const [direction, setDirection] = useState(TABS_DIRECTION.forward);
+	const [root, attachRoot] = useAttachedElement(ref);
+	const panelHeightRef = useRef(null);
+	const leavingRectRef = useRef(null);
+	const activeValue = value ?? uncontrolledValue;
+	const [renderedValue, setRenderedValue] = useState(activeValue);
+	if (renderedValue !== activeValue) {
+		setRenderedValue(activeValue);
+		const travelDirection = getTravelDirection(root, renderedValue, activeValue);
+		if (travelDirection !== null) {
+			setDirection(travelDirection);
+		}
+	}
 	let t2;
-	if ($[4] !== className) {
-		t2 = cn("group/tabs flex gap-2 data-horizontal:flex-col", className);
-		$[4] = className;
-		$[5] = t2;
+	if ($[8] !== onValueChange || $[9] !== root || $[10] !== value) {
+		t2 = function handleValueChange(nextValue) {
+			const activePanel = root ? getOwnElements(root, "[data-slot=\"tabs-content\"][data-state=\"active\"]")[0] : undefined;
+			leavingRectRef.current = activePanel ? {
+				value: nextValue,
+				rect: activePanel.getBoundingClientRect()
+			} : null;
+			if (value === undefined) {
+				setUncontrolledValue(nextValue);
+			}
+			onValueChange?.(nextValue);
+		};
+		$[8] = onValueChange;
+		$[9] = root;
+		$[10] = value;
+		$[11] = t2;
 	} else {
-		t2 = $[5];
+		t2 = $[11];
 	}
+	const handleValueChange = t2;
 	let t3;
-	if ($[6] !== orientation || $[7] !== props || $[8] !== t2) {
-		t3 = /* @__PURE__ */ _jsx(TabsPrimitive.Root, {
+	if ($[12] !== activeValue || $[13] !== direction || $[14] !== orientation) {
+		t3 = {
+			activeValue,
+			direction,
+			orientation,
+			panelHeightRef,
+			leavingRectRef
+		};
+		$[12] = activeValue;
+		$[13] = direction;
+		$[14] = orientation;
+		$[15] = t3;
+	} else {
+		t3 = $[15];
+	}
+	let t4;
+	if ($[16] !== className) {
+		t4 = cn("group/tabs relative flex gap-(--space-4) data-horizontal:flex-col", className);
+		$[16] = className;
+		$[17] = t4;
+	} else {
+		t4 = $[17];
+	}
+	let t5;
+	if ($[18] !== activeValue || $[19] !== attachRoot || $[20] !== handleValueChange || $[21] !== orientation || $[22] !== props || $[23] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(TabsPrimitive.Root, {
+			ref: attachRoot,
 			"data-slot": "tabs",
 			"data-orientation": orientation,
-			className: t2,
-			...props
+			orientation,
+			className: t4,
+			...props,
+			value: activeValue,
+			onValueChange: handleValueChange
 		});
-		$[6] = orientation;
-		$[7] = props;
-		$[8] = t2;
-		$[9] = t3;
+		$[18] = activeValue;
+		$[19] = attachRoot;
+		$[20] = handleValueChange;
+		$[21] = orientation;
+		$[22] = props;
+		$[23] = t4;
+		$[24] = t5;
 	} else {
-		t3 = $[9];
+		t5 = $[24];
 	}
-	return t3;
+	let t6;
+	if ($[25] !== t3 || $[26] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(TabsMotionContext.Provider, {
+			value: t3,
+			children: t5
+		});
+		$[25] = t3;
+		$[26] = t5;
+		$[27] = t6;
+	} else {
+		t6 = $[27];
+	}
+	return t6;
 }
-const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none", {
+/**
+* Arc's segmented list (`default`): a muted track whose active trigger is a raised surface. `line` keeps the
+* underline variant on the same tokens. Horizontal lists scroll sideways without a visible scrollbar.
+*/
+const tabsListVariants = cva("group/tabs-list inline-flex w-fit max-w-full min-w-0 items-center text-text-muted group-data-horizontal/tabs:overflow-x-auto group-data-horizontal/tabs:[scrollbar-width:none] group-data-horizontal/tabs:[&::-webkit-scrollbar]:hidden group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", {
 	variants: { variant: {
-		default: "bg-muted",
-		line: "gap-1 bg-transparent"
+		default: "gap-(--space-1) rounded-(--radius-control) border border-border bg-surface-muted p-(--space-1)",
+		line: "gap-(--space-1) bg-transparent"
 	} },
 	defaultVariants: { variant: "default" }
 });
+/**
+* Scrolls a horizontally overflowing list just enough to show the trigger, never the page around it. The target is an
+* absolute offset, so a second call while a smooth scroll is still running (focus and selection both reveal the
+* trigger on the same key press) aims at the same place instead of adding its delta to a moving position.
+* @param list - The scrolling tab list.
+* @param trigger - The trigger to reveal.
+* @param reduceMotion - True jumps instead of scrolling smoothly.
+*/
+function revealTrigger(list, trigger, reduceMotion) {
+	if (!trigger || list.scrollWidth <= list.clientWidth || typeof list.scrollTo !== "function") return;
+	const frame = list.getBoundingClientRect();
+	const item = trigger.getBoundingClientRect();
+	const itemStart = item.left - frame.left + list.scrollLeft;
+	const itemEnd = itemStart + item.width;
+	const visibleStart = list.scrollLeft;
+	const visibleEnd = visibleStart + list.clientWidth;
+	const target = itemStart < visibleStart + TABS_REVEAL_MARGIN_PX ? itemStart - TABS_REVEAL_MARGIN_PX : itemEnd > visibleEnd - TABS_REVEAL_MARGIN_PX ? itemEnd - list.clientWidth + TABS_REVEAL_MARGIN_PX : visibleStart;
+	if (target !== visibleStart) list.scrollTo({
+		left: target,
+		behavior: reduceMotion ? "instant" : "smooth"
+	});
+}
+/**
+* Holds the triggers. The active highlight glides to the newly selected trigger and the list scrolls to keep the
+* active or focused trigger visible.
+* @param props - Radix list props, the `variant` and `ref`.
+* @returns The tab list.
+*/
 function TabsList(t0) {
-	const $ = _c(11);
+	const $ = _c(31);
 	let className;
+	let onFocusCapture;
 	let props;
+	let ref;
 	let t1;
 	if ($[0] !== t0) {
-		({className, variant: t1, ...props} = t0);
+		({className, variant: t1, ref, onFocusCapture, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = props;
-		$[3] = t1;
+		$[2] = onFocusCapture;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
 	} else {
 		className = $[1];
-		props = $[2];
-		t1 = $[3];
+		onFocusCapture = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
 	}
 	const variant = t1 === undefined ? "default" : t1;
+	const motionState = useContext(TabsMotionContext);
+	const reduceMotion = usePrefersReducedMotion();
+	const [list, attachList] = useAttachedElement(ref);
+	const activeValue = motionState?.activeValue;
 	let t2;
-	if ($[4] !== className || $[5] !== variant) {
-		t2 = cn(tabsListVariants({ variant }), className);
-		$[4] = className;
-		$[5] = variant;
-		$[6] = t2;
+	if ($[6] !== list || $[7] !== motionState?.orientation || $[8] !== reduceMotion) {
+		t2 = () => {
+			if (!list || motionState?.orientation === "vertical") {
+				return;
+			}
+			const revealActiveTrigger = () => revealTrigger(list, list.querySelector("[data-slot=\"tabs-trigger\"][data-state=\"active\"]"), reduceMotion);
+			revealActiveTrigger();
+			const observer = new ResizeObserver(revealActiveTrigger);
+			for (const trigger of list.querySelectorAll("[data-slot=\"tabs-trigger\"]")) {
+				observer.observe(trigger);
+			}
+			return () => observer.disconnect();
+		};
+		$[6] = list;
+		$[7] = motionState?.orientation;
+		$[8] = reduceMotion;
+		$[9] = t2;
 	} else {
-		t2 = $[6];
+		t2 = $[9];
 	}
-	let t3;
-	if ($[7] !== props || $[8] !== t2 || $[9] !== variant) {
-		t3 = /* @__PURE__ */ _jsx(GlideSlot, {
+	const t3 = motionState?.orientation;
+	let t4;
+	if ($[10] !== activeValue || $[11] !== list || $[12] !== reduceMotion || $[13] !== t3) {
+		t4 = [
+			list,
+			activeValue,
+			t3,
+			reduceMotion
+		];
+		$[10] = activeValue;
+		$[11] = list;
+		$[12] = reduceMotion;
+		$[13] = t3;
+		$[14] = t4;
+	} else {
+		t4 = $[14];
+	}
+	useLayoutEffect(t2, t4);
+	let t5;
+	if ($[15] !== list || $[16] !== motionState?.orientation || $[17] !== onFocusCapture || $[18] !== reduceMotion) {
+		t5 = function handleFocusCapture(event) {
+			onFocusCapture?.(event);
+			if (!list || motionState?.orientation === "vertical") {
+				return;
+			}
+			if (event.target instanceof HTMLElement && event.target.getAttribute("role") === "tab") {
+				revealTrigger(list, event.target, reduceMotion);
+			}
+		};
+		$[15] = list;
+		$[16] = motionState?.orientation;
+		$[17] = onFocusCapture;
+		$[18] = reduceMotion;
+		$[19] = t5;
+	} else {
+		t5 = $[19];
+	}
+	const handleFocusCapture = t5;
+	let t6;
+	if ($[20] !== className || $[21] !== variant) {
+		t6 = cn(tabsListVariants({ variant }), className);
+		$[20] = className;
+		$[21] = variant;
+		$[22] = t6;
+	} else {
+		t6 = $[22];
+	}
+	let t7;
+	if ($[23] !== handleFocusCapture || $[24] !== props || $[25] !== t6 || $[26] !== variant) {
+		t7 = /* @__PURE__ */ _jsx(TabsPrimitive.List, {
+			"data-slot": "tabs-list",
+			"data-variant": variant,
+			className: t6,
+			onFocusCapture: handleFocusCapture,
+			...props
+		});
+		$[23] = handleFocusCapture;
+		$[24] = props;
+		$[25] = t6;
+		$[26] = variant;
+		$[27] = t7;
+	} else {
+		t7 = $[27];
+	}
+	let t8;
+	if ($[28] !== attachList || $[29] !== t7) {
+		t8 = /* @__PURE__ */ _jsx(GlideSlot, {
 			preset: "tabs",
-			children: /* @__PURE__ */ _jsx(TabsPrimitive.List, {
-				"data-slot": "tabs-list",
-				"data-variant": variant,
-				className: t2,
-				...props
-			})
+			ref: attachList,
+			children: t7
 		});
-		$[7] = props;
-		$[8] = t2;
-		$[9] = variant;
-		$[10] = t3;
+		$[28] = attachList;
+		$[29] = t7;
+		$[30] = t8;
 	} else {
-		t3 = $[10];
+		t8 = $[30];
 	}
-	return t3;
+	return t8;
 }
+/**
+* Selects a panel. Arc's trigger: muted label, accent label once active, hover only on fine pointers and the
+* shared keyboard focus outline.
+* @param props - Radix trigger props, including `value`.
+* @returns The tab.
+*/
 function TabsTrigger(t0) {
-	const $ = _c(8);
+	const $ = _c(10);
 	let className;
 	let props;
+	let value;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, value, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = props;
+		$[3] = value;
 	} else {
 		className = $[1];
 		props = $[2];
+		value = $[3];
 	}
 	let t1;
-	if ($[3] !== className) {
-		t1 = cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent", "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100 data-glide-target:after:opacity-0! data-glide-freeze:after:transition-none", className);
-		$[3] = className;
-		$[4] = t1;
+	if ($[4] !== className) {
+		t1 = cn("relative inline-flex min-h-(--control-height-sm) min-w-[5.5rem] flex-[1_0_auto] cursor-pointer items-center justify-center gap-1.5 rounded-[calc(var(--radius-control)-3px)] border border-transparent bg-transparent px-(--space-3) font-sans text-sm font-medium whitespace-nowrap text-text-muted [-webkit-tap-highlight-color:transparent] transition-[color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-(--ease-standard) select-none motion-reduce:transition-none hover-fine:text-foreground active:text-foreground disabled:cursor-not-allowed disabled:opacity-50 data-active:text-(--accent-strong) group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=default]/tabs-list:data-active:border-border group-data-[variant=default]/tabs-list:data-active:bg-surface group-data-[variant=default]/tabs-list:data-active:shadow-(--shadow-resting)", "after:absolute after:rounded-full after:bg-(--accent-strong) after:opacity-0 after:transition-opacity after:duration-(--duration-fast) group-data-horizontal/tabs:after:inset-x-(--space-2) group-data-horizontal/tabs:after:-bottom-px group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-(--space-2) group-data-vertical/tabs:after:-right-px group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100 data-glide-target:after:opacity-0! data-glide-freeze:after:transition-none motion-reduce:after:transition-none", className);
+		$[4] = className;
+		$[5] = t1;
 	} else {
-		t1 = $[4];
+		t1 = $[5];
 	}
 	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "subtle-press",
-			children: /* @__PURE__ */ _jsx(TabsPrimitive.Trigger, {
-				"data-slot": "tabs-trigger",
-				className: t1,
-				...props
-			})
+	if ($[6] !== props || $[7] !== t1 || $[8] !== value) {
+		t2 = /* @__PURE__ */ _jsx(TabsPrimitive.Trigger, {
+			"data-slot": "tabs-trigger",
+			"data-value": value,
+			value,
+			className: t1,
+			...props
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[6] = props;
+		$[7] = t1;
+		$[8] = value;
+		$[9] = t2;
 	} else {
-		t2 = $[7];
+		t2 = $[9];
 	}
 	return t2;
 }
+/** Panel classes: Arc's body text rhythm and a rounded keyboard focus outline. */
+const tabsContentClassName = "flex-1 text-sm leading-(--leading-body) [--focus-outline-offset:3px] focus-visible:rounded-(--radius-control) data-[state=inactive]:pointer-events-none";
+/** Places a slide offset on the axis the list runs along. */
+function slideOffset({ orientation }, distance) {
+	return orientation === "vertical" ? {
+		x: 0,
+		y: distance
+	} : {
+		x: distance,
+		y: 0
+	};
+}
+/** Arc's panel motion: slides in from the side of the chosen tab and leaves quickly the opposite way. */
+const panelVariants = {
+	enter: (custom) => ({
+		opacity: 0,
+		...slideOffset(custom, custom.direction * TABS_PANEL_OFFSET_PX.enter)
+	}),
+	center: {
+		opacity: 1,
+		x: 0,
+		y: 0,
+		transition: {
+			opacity: {
+				duration: ARC_DURATION.standard,
+				ease: [...ARC_EASE.enter]
+			},
+			x: ARC_SPRING_SMOOTH,
+			y: ARC_SPRING_SMOOTH
+		}
+	},
+	exit: (custom) => ({
+		opacity: 0,
+		...slideOffset(custom, custom.direction * -TABS_PANEL_OFFSET_PX.exit),
+		transition: {
+			duration: ARC_DURATION.instant,
+			ease: [...ARC_EASE.standard]
+		}
+	})
+};
+/** Reduced motion: a short crossfade in place. Keys match `panelVariants`, so server and client styles agree. */
+const reducedPanelVariants = {
+	enter: {
+		opacity: 0,
+		x: 0,
+		y: 0
+	},
+	center: {
+		opacity: 1,
+		x: 0,
+		y: 0,
+		transition: { duration: ARC_DURATION.instant }
+	},
+	exit: {
+		opacity: 0,
+		x: 0,
+		y: 0,
+		transition: { duration: TABS_PANEL_REDUCED_EXIT_DURATION_S }
+	}
+};
+/** Inline properties the height morph overrides on the panel and restores when it settles. */
+const MORPH_STYLE_PROPERTIES = [
+	"height",
+	"overflow",
+	"flex",
+	"min-height"
+];
+/** Animates the consumer's own element when `TabsContent` is used with `asChild`. */
+const MotionPanelSlot = motion.create(Slot.Root);
+/**
+* The animated element behind an active panel. While present it morphs from the previous panel's height to its
+* own; once leaving it stays pinned where it was, inert and hidden from assistive technology, until it fades out.
+*/
+function TabsPanel({ motionState, reduceMotion, asChild, ref, ...props }) {
+	const isPresent = useIsPresent();
+	const [panel, attachPanel] = useAttachedElement(ref);
+	const { panelHeightRef, leavingRectRef, direction, orientation } = motionState;
+	const activeValue = useContext(TabsMotionContext)?.activeValue ?? motionState.activeValue;
+	const PanelElement = asChild ? MotionPanelSlot : motion.div;
+	useLayoutEffect(() => {
+		if (!panel) return;
+		if (!isPresent) {
+			const leaving = leavingRectRef.current;
+			const before = leaving?.value === activeValue ? leaving.rect : null;
+			const now = panel.getBoundingClientRect();
+			if (before) panel.style.translate = `${before.left - now.left}px ${before.top - now.top}px`;
+			return;
+		}
+		panel.style.translate = "";
+		const fromHeight = panelHeightRef.current;
+		const toHeight = panel.offsetHeight;
+		let controls;
+		const inlineStyle = MORPH_STYLE_PROPERTIES.map((property) => ({
+			property,
+			value: panel.style.getPropertyValue(property),
+			priority: panel.style.getPropertyPriority(property)
+		}));
+		const release = () => {
+			for (const { property, value, priority } of inlineStyle) panel.style.setProperty(property, value, priority);
+		};
+		if (fromHeight !== null && Math.abs(fromHeight - toHeight) > TABS_PANEL_HEIGHT_TOLERANCE_PX && !reduceMotion) {
+			panel.style.flex = "none";
+			panel.style.minHeight = "0";
+			if (toHeight > fromHeight) panel.style.overflow = "clip";
+			panel.style.height = `${fromHeight}px`;
+			controls = animate(panel, { height: [fromHeight, toHeight] }, {
+				...ARC_SPRING_SMOOTH,
+				onComplete: release
+			});
+		}
+		panelHeightRef.current = controls && fromHeight !== null ? fromHeight : toHeight;
+		const observer = new ResizeObserver(() => {
+			panelHeightRef.current = panel.offsetHeight;
+		});
+		observer.observe(panel);
+		return () => {
+			observer.disconnect();
+			controls?.stop();
+			release();
+		};
+	}, [
+		panel,
+		isPresent,
+		reduceMotion,
+		panelHeightRef,
+		leavingRectRef,
+		activeValue
+	]);
+	return /* @__PURE__ */ _jsx(PanelElement, {
+		ref: attachPanel,
+		...props,
+		custom: {
+			direction,
+			orientation
+		},
+		variants: reduceMotion ? reducedPanelVariants : panelVariants,
+		initial: "enter",
+		animate: "center",
+		exit: "exit",
+		inert: !isPresent || undefined,
+		"aria-hidden": !isPresent || undefined
+	});
+}
+/**
+* Content of one tab. Inside `Tabs` it animates between panels; with `forceMount` it stays mounted and switches
+* without motion, as Radix renders it. With `asChild` the consumer's element is the panel in both cases.
+* @param props - Radix content props, including `value` and `forceMount`.
+* @returns The tab panel, or nothing while another tab is active.
+*/
 function TabsContent(t0) {
-	const $ = _c(8);
+	const $ = _c(31);
+	let asChild;
+	let children;
 	let className;
+	let forceMount;
 	let props;
+	let value;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({className, value, forceMount, asChild, children, ...props} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+		$[1] = asChild;
+		$[2] = children;
+		$[3] = className;
+		$[4] = forceMount;
+		$[5] = props;
+		$[6] = value;
 	} else {
-		className = $[1];
-		props = $[2];
+		asChild = $[1];
+		children = $[2];
+		className = $[3];
+		forceMount = $[4];
+		props = $[5];
+		value = $[6];
 	}
+	const motionState = useContext(TabsMotionContext);
+	const reduceMotion = usePrefersReducedMotion();
 	let t1;
-	if ($[3] !== className) {
-		t1 = cn("flex-1 text-sm outline-none", className);
-		$[3] = className;
-		$[4] = t1;
+	if ($[7] !== className) {
+		t1 = cn(tabsContentClassName, className);
+		$[7] = className;
+		$[8] = t1;
 	} else {
-		t1 = $[4];
+		t1 = $[8];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "content",
-			children: /* @__PURE__ */ _jsx(TabsPrimitive.Content, {
+	const classes = t1;
+	if (forceMount || !motionState) {
+		let t2;
+		if ($[9] !== asChild || $[10] !== children || $[11] !== classes || $[12] !== forceMount || $[13] !== props || $[14] !== value) {
+			t2 = /* @__PURE__ */ _jsx(TabsPrimitive.Content, {
 				"data-slot": "tabs-content",
-				className: t1,
-				...props
+				value,
+				forceMount,
+				asChild,
+				className: classes,
+				...props,
+				children
+			});
+			$[9] = asChild;
+			$[10] = children;
+			$[11] = classes;
+			$[12] = forceMount;
+			$[13] = props;
+			$[14] = value;
+			$[15] = t2;
+		} else {
+			t2 = $[15];
+		}
+		return t2;
+	}
+	const isSelected = motionState.activeValue === value;
+	let t2;
+	if ($[16] !== motionState.direction || $[17] !== motionState.orientation) {
+		t2 = {
+			direction: motionState.direction,
+			orientation: motionState.orientation
+		};
+		$[16] = motionState.direction;
+		$[17] = motionState.orientation;
+		$[18] = t2;
+	} else {
+		t2 = $[18];
+	}
+	const t3 = t2;
+	let t4;
+	if ($[19] !== asChild || $[20] !== children || $[21] !== classes || $[22] !== isSelected || $[23] !== motionState || $[24] !== props || $[25] !== reduceMotion || $[26] !== value) {
+		t4 = isSelected && /* @__PURE__ */ _jsx(TabsPrimitive.Content, {
+			"data-slot": "tabs-content",
+			...props,
+			value,
+			forceMount: true,
+			asChild: true,
+			children: /* @__PURE__ */ _jsx(TabsPanel, {
+				className: classes,
+				motionState,
+				reduceMotion,
+				asChild,
+				children
 			})
+		}, value);
+		$[19] = asChild;
+		$[20] = children;
+		$[21] = classes;
+		$[22] = isSelected;
+		$[23] = motionState;
+		$[24] = props;
+		$[25] = reduceMotion;
+		$[26] = value;
+		$[27] = t4;
+	} else {
+		t4 = $[27];
+	}
+	let t5;
+	if ($[28] !== t3 || $[29] !== t4) {
+		t5 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			mode: "popLayout",
+			custom: t3,
+			children: t4
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t5;
 	} else {
-		t2 = $[7];
+		t5 = $[30];
 	}
-	return t2;
+	return t5;
 }
 export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };