@delacour/react-native-ui 0.1.0-alpha.20260925053522

package/src/components/tabs/tabs-list.tsx

@@ -0,0 +1,139 @@
+import { Children, isValidElement, type ReactElement, type ReactNode, useCallback, useMemo, useRef } from "react";
+import { View, type ViewProps } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { cn } from "../../lib/cn";
+import { TabsListProvider, type TabsListValue, useTabsPart } from "./tabs.context";
+import {
+	isTriggerOrderConsistent,
+	resolveMeasurementTracks,
+	type TabMeasurement,
+	type TabTracks,
+	tabsVariants,
+} from "./tabs.variants";
+import { TabsScrollView } from "./tabs-scroll-view";
+
+export type TabsListProps = ViewProps & {
+	className?: string;
+	children?: ReactNode;
+};
+
+/**
+ * The bar itself: the track, and the frame every trigger measures itself into.
+ *
+ * It owns the measurement registry, which is why `Tabs.Indicator` and
+ * `Tabs.Trigger` throw by name outside one — an indicator with nothing to measure
+ * has no other way of saying so.
+ *
+ * **The registry is a JS-side map published as one shared value, coalesced to one
+ * write per tick.** Every `onLayout` in a layout pass lands in the same tick, so
+ * without the coalescing an eight-tab bar writes the shared value eight times and
+ * the UI thread can render between two of them — showing an indicator built from
+ * four new positions and four old ones. A microtask still runs before paint, so
+ * the coalescing costs nothing.
+ *
+ * **The track and the row are always two elements, never one.** It is tempting to
+ * put the track's padding and the row's layout on a single View when nothing
+ * scrolls — and it is wrong, silently. `Tabs.Indicator` is absolutely positioned,
+ * and an absolute child resolves its insets against its parent's *padding box*:
+ * `inset-y-0` would span the track's full height while the triggers sat inside
+ * the padding, so the capsule and the track would come out exactly the same
+ * height. Two pills of equal radius offset horizontally do not nest — their
+ * curves cross, and the ends show a sliver of track between them. Measured on a
+ * simulator at 3×: 12px of gap at the sides and 0px top and bottom.
+ *
+ * With the row as its own element the indicator's containing block is the row, so
+ * `inset-y-0` is exactly the trigger's height and the capsule is concentric on
+ * every axis. A `Tabs.ScrollView` already had this shape — its content container
+ * is the row — which is why the bug only ever showed on a bar that did not
+ * scroll. The two paths are now identical.
+ */
+export function TabsList({ className, children, ...props }: TabsListProps): ReactElement {
+	const { order, size, variant } = useTabsPart("Tabs.List");
+
+	// The JS-side source of truth. A ref rather than state: a layout re-renders
+	// nothing here, and the same map is what the indicator and the bar's own
+	// auto-scroll both read — one measurement, two consumers, so they can never
+	// disagree about where a tab is.
+	const measured = useRef<Record<string, TabMeasurement>>({});
+	const tracks = useSharedValue<TabTracks | null>(null);
+	const isPublishQueued = useRef(false);
+
+	// Read inside the microtask rather than captured when it was queued: a tab
+	// removed in between would otherwise publish a track for a value that no
+	// longer exists.
+	const orderRef = useRef(order);
+	orderRef.current = order;
+
+	const scrollX = useSharedValue(0);
+	const viewportWidth = useSharedValue(0);
+	const contentWidth = useSharedValue(0);
+	const isBarDragging = useSharedValue(false);
+
+	const publish = useCallback(() => {
+		if (isPublishQueued.current) return;
+		isPublishQueued.current = true;
+		queueMicrotask(() => {
+			isPublishQueued.current = false;
+			const next = resolveMeasurementTracks(orderRef.current, measured.current);
+			tracks.value = next;
+
+			if (process.env.NODE_ENV !== "production" && next && !isTriggerOrderConsistent(next.x)) {
+				console.warn(
+					"Tabs: the triggers do not run left to right in the order their panels are written, so the indicator will land on the wrong tab. Write <Tabs.Trigger> in the same order as <Tabs.Content>, and do not wrap a trigger in a view of its own — a wrapped trigger measures itself against the wrapper rather than the row."
+				);
+			}
+		});
+	}, [tracks]);
+
+	const measure = useCallback(
+		(value: string, measurement: TabMeasurement) => {
+			const previous = measured.current[value];
+			// A re-layout reporting identical numbers is not a change, and writing the
+			// shared value anyway would invalidate every worklet reading it.
+			if (previous && previous.x === measurement.x && previous.width === measurement.width) return;
+			measured.current[value] = measurement;
+			publish();
+		},
+		[publish]
+	);
+
+	const unmeasure = useCallback(
+		(value: string) => {
+			if (!(value in measured.current)) return;
+			delete measured.current[value];
+			publish();
+		},
+		[publish]
+	);
+
+	const context = useMemo<TabsListValue>(
+		() => ({ contentWidth, isBarDragging, measure, scrollX, tracks, unmeasure, viewportWidth }),
+		[contentWidth, isBarDragging, measure, scrollX, tracks, unmeasure, viewportWidth]
+	);
+
+	const isScrollable = useMemo(() => holdsScrollView(children), [children]);
+	const slots = tabsVariants({ isScrollable, size, variant });
+
+	return (
+		<TabsListProvider value={context}>
+			<View accessibilityRole="tablist" className={cn(slots.list(), className)} {...props}>
+				{isScrollable ? children : <View className={slots.row()}>{children}</View>}
+			</View>
+		</TabsListProvider>
+	);
+}
+TabsList.displayName = "DelacourUI.Tabs.List";
+
+/**
+ * Whether the row is rendered by a `Tabs.ScrollView` inside this list.
+ *
+ * The scroller lays the triggers out in its own content container, so a list that
+ * also wore the row's layout would put a second flex row around it — a gap and a
+ * stretch that belong to a row of triggers, applied to a single scroll view.
+ */
+function holdsScrollView(children: ReactNode): boolean {
+	for (const child of Children.toArray(children)) {
+		if (isValidElement(child) && child.type === TabsScrollView) return true;
+	}
+	return false;
+}

package/src/components/tabs/tabs-pager.tsx

@@ -0,0 +1,59 @@
+import { type ReactElement, type ReactNode, useCallback } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useTabsMotionPart, useTabsPart } from "./tabs.context";
+import { resolvePagerTranslate, tabsVariants } from "./tabs.variants";
+
+export type TabsPagerProps = {
+	children: ReactNode;
+};
+
+/**
+ * The clipped viewport the panels travel through, and the surface the pan is
+ * claimed on.
+ *
+ * Internal: the root wraps its own run of `Tabs.Content` children in one of these,
+ * so there is no key for it on the compound surface and nothing for a caller to
+ * configure that `isSwipeable` does not already decide — `Checkbox.Indicator`'s
+ * argument. It has a file of its own because it owns every animated value on the
+ * panel side, and keeping those in the root would make the root a component that
+ * changes for two unrelated reasons.
+ *
+ * **The row needs no measurement to lay out.** Each page is `w-full shrink-0`
+ * against a row whose width is the viewport's, so the very first paint is right.
+ * A row sized from a measurement would land one commit after the first layout and
+ * show every panel collapsed to nothing in between — the same class of bug as a
+ * chat list with no seeded composer height, wrong only sometimes.
+ *
+ * `pageWidth` is therefore read by the gesture and by the translation, and by
+ * nothing that lays anything out.
+ */
+export function TabsPager({ children }: TabsPagerProps): ReactElement {
+	const { size, variant } = useTabsPart("Tabs.Pager");
+	const { position, pageWidth, panGesture } = useTabsMotionPart("Tabs.Pager");
+
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			pageWidth.value = event.nativeEvent.layout.width;
+		},
+		[pageWidth]
+	);
+
+	const rowStyle = useAnimatedStyle(() => ({
+		transform: [{ translateX: resolvePagerTranslate(position.value, pageWidth.value) }],
+	}));
+
+	const slots = tabsVariants({ size, variant });
+
+	return (
+		<Animated.View className={slots.pager()} onLayout={handleLayout}>
+			<GestureDetector gesture={panGesture}>
+				<Animated.View className={slots.pageRow()} style={rowStyle}>
+					{children}
+				</Animated.View>
+			</GestureDetector>
+		</Animated.View>
+	);
+}
+TabsPager.displayName = "DelacourUI.Tabs.Pager";

package/src/components/tabs/tabs-scroll-view.tsx

@@ -0,0 +1,171 @@
+import { type ComponentRef, type ReactElement, type ReactNode, type Ref, useCallback, useEffect } from "react";
+import type { LayoutChangeEvent, ScrollViewProps } from "react-native";
+import Animated, {
+	Extrapolation,
+	interpolate,
+	scrollTo,
+	useAnimatedReaction,
+	useAnimatedRef,
+	useAnimatedScrollHandler,
+} from "react-native-reanimated";
+import { TabsScrollableProvider, useTabsListPart, useTabsMotionPart, useTabsPart } from "./tabs.context";
+import { resolveScrollOffset, TABS_DEFAULT_SCROLL_ALIGN, type TabsScrollAlign, tabsVariants } from "./tabs.variants";
+
+export type TabsScrollViewProps = Omit<ScrollViewProps, "children" | "horizontal"> & {
+	/**
+	 * Where the selected trigger is scrolled to when the selection changes.
+	 *
+	 * `none` leaves the bar exactly where it is — for a row the caller drives
+	 * itself. Every alignment is clamped at both ends, so the first and last tabs
+	 * never scroll the row past its own content.
+	 */
+	scrollAlign?: TabsScrollAlign;
+	className?: string;
+	/** Merged after the row's own layout, never instead of it. */
+	contentContainerClassName?: string;
+	children?: ReactNode;
+	ref?: Ref<ComponentRef<typeof Animated.ScrollView>>;
+};
+
+/**
+ * The horizontal scroller a bar with more tabs than room puts its row in.
+ *
+ * `horizontal` is `Omit`ed rather than defaulted. Every measurement in this
+ * component is an `x` and a width, so `horizontal={false}` would leave all of that
+ * arithmetic intact and silently wrong — a bar that scrolled the wrong way with an
+ * indicator that did not move.
+ *
+ * **It scrolls from the UI thread**, through the package's only `useAnimatedRef`.
+ * The reaction interpolates the *fractional* trigger geometry off the same
+ * `position` the indicator reads, so the row tracks a finger through a drag rather
+ * than jumping once the swipe has settled. Mirroring the offset back to JS and
+ * calling `scrollTo` there would be a round trip per frame, which is the one thing
+ * this whole component is arranged to avoid.
+ *
+ * **A hand-scroll always wins, and the flag it sets clears on momentum end rather
+ * than on the finger lifting.** A flick leaves the bar coasting after the touch is
+ * gone, and retargeting into that coast is a tug-of-war the user feels as the row
+ * snapping backwards mid-flight.
+ *
+ * The caller's `ref` is composed rather than taken: this needs an animated handle
+ * of its own, and someone who wants the same handle should not have to give one up.
+ */
+export function TabsScrollView({
+	scrollAlign = TABS_DEFAULT_SCROLL_ALIGN,
+	className,
+	contentContainerClassName,
+	children,
+	ref,
+	onLayout,
+	onContentSizeChange,
+	...props
+}: TabsScrollViewProps): ReactElement {
+	const { size, variant } = useTabsPart("Tabs.ScrollView");
+	const { position } = useTabsMotionPart("Tabs.ScrollView");
+	const { tracks, scrollX, viewportWidth, contentWidth, isBarDragging } = useTabsListPart("Tabs.ScrollView");
+
+	const scrollRef = useAnimatedRef<ComponentRef<typeof Animated.ScrollView>>();
+
+	// The animated ref is the one this ScrollView has to carry — `scrollTo`
+	// resolves a view tag through it and a composed callback is not that — so a
+	// caller's ref is forwarded after mount rather than merged into the prop.
+	useEffect(() => {
+		if (!ref) return;
+		const node = scrollRef.current;
+		if (typeof ref === "function") {
+			ref(node);
+			return () => {
+				ref(null);
+			};
+		}
+		ref.current = node;
+		return () => {
+			ref.current = null;
+		};
+	}, [ref, scrollRef]);
+
+	const scrollHandler = useAnimatedScrollHandler({
+		onScroll: (event) => {
+			scrollX.value = event.contentOffset.x;
+			viewportWidth.value = event.layoutMeasurement.width;
+			contentWidth.value = event.contentSize.width;
+		},
+		onBeginDrag: () => {
+			isBarDragging.value = true;
+		},
+		onEndDrag: (event) => {
+			// Only when the finger left nothing behind it. Anything else is handed to
+			// `onMomentumEnd`, which is the callback that knows the bar has stopped.
+			if (!event.velocity || event.velocity.x === 0) isBarDragging.value = false;
+		},
+		onMomentumEnd: () => {
+			isBarDragging.value = false;
+		},
+	});
+
+	// Seeded here as well as from `onScroll`, because a bar whose row fits never
+	// fires a scroll event at all — and would then auto-scroll against a content
+	// width of zero.
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			onLayout?.(event);
+			viewportWidth.value = event.nativeEvent.layout.width;
+		},
+		[onLayout, viewportWidth]
+	);
+
+	const handleContentSizeChange = useCallback(
+		(width: number, height: number) => {
+			onContentSizeChange?.(width, height);
+			contentWidth.value = width;
+		},
+		[contentWidth, onContentSizeChange]
+	);
+
+	useAnimatedReaction(
+		() => position.value,
+		(current) => {
+			if (scrollAlign === "none" || isBarDragging.value) return;
+			const measured = tracks.value;
+			if (!measured) return;
+
+			scrollTo(
+				scrollRef,
+				resolveScrollOffset({
+					align: scrollAlign,
+					contentWidth: contentWidth.value,
+					currentOffset: scrollX.value,
+					viewportWidth: viewportWidth.value,
+					width: interpolate(current, measured.index, measured.width, Extrapolation.CLAMP),
+					x: interpolate(current, measured.index, measured.x, Extrapolation.CLAMP),
+				}),
+				0,
+				// The spring is already animating `position`; a second animated scroll
+				// on top of it would be two easing curves fighting for the same pixels.
+				false
+			);
+		},
+		[scrollAlign]
+	);
+
+	const slots = tabsVariants({ isScrollable: true, size, variant });
+
+	return (
+		<TabsScrollableProvider value={true}>
+			<Animated.ScrollView
+				className={slots.scroll({ className })}
+				contentContainerClassName={slots.row({ className: contentContainerClassName })}
+				horizontal
+				onContentSizeChange={handleContentSizeChange}
+				onLayout={handleLayout}
+				onScroll={scrollHandler}
+				ref={scrollRef}
+				showsHorizontalScrollIndicator={false}
+				{...props}
+			>
+				{children}
+			</Animated.ScrollView>
+		</TabsScrollableProvider>
+	);
+}
+TabsScrollView.displayName = "DelacourUI.Tabs.ScrollView";

package/src/components/tabs/tabs-separator.tsx

@@ -0,0 +1,73 @@
+import { type ReactElement, useMemo } from "react";
+import type { ViewProps } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { Separator, type SeparatorProps } from "../separator";
+import { useTabsMotionPart, useTabsPart } from "./tabs.context";
+import { resolveSeparatorIndices, resolveSeparatorOpacity, tabsVariants } from "./tabs.variants";
+
+export type TabsSeparatorProps = Omit<ViewProps, "children"> & {
+	/**
+	 * The two tabs this rule sits between.
+	 *
+	 * Named rather than inferred: a separator is a leaf and cannot see its
+	 * siblings, and having the row walk its children to work it out would put the
+	 * ordering in a second place — the one thing this component keeps in exactly
+	 * one.
+	 */
+	betweenValues: readonly [string, string];
+	className?: string;
+	/** Props for the rule itself, for a caller restyling it in place. */
+	separatorProps?: Omit<SeparatorProps, "orientation">;
+};
+
+/**
+ * A hairline between two tabs, which retreats as either one is approached.
+ *
+ * It renders a `Separator` rather than a second one-pixel rule of its own — the
+ * line is already a component, and a second definition of it is a second thing to
+ * keep in step. This part is the positioning and the fade.
+ *
+ * **The fade is driven by the pager's position, not by the settled value.** So the
+ * rule withdraws as a finger drags a tab up against it and comes back if the drag
+ * is abandoned, rather than blinking away at release — which is the whole reason
+ * it is an animation and not a conditional render. `opacity` is not a layout
+ * prop, so this costs nothing.
+ *
+ * A pair naming a tab nothing claims renders at full opacity and warns in
+ * development: a separator that vanished for a reason unexplainable from the call
+ * site would be worse than one that never fades.
+ */
+export function TabsSeparator({
+	betweenValues,
+	className,
+	separatorProps,
+	...props
+}: TabsSeparatorProps): ReactElement {
+	const { order, size, variant } = useTabsPart("Tabs.Separator");
+	const { position } = useTabsMotionPart("Tabs.Separator");
+
+	const { left, right } = useMemo(() => resolveSeparatorIndices(order, betweenValues), [order, betweenValues]);
+
+	if (process.env.NODE_ENV !== "production" && order.length > 0 && (left < 0 || right < 0)) {
+		console.warn(
+			`Tabs.Separator: betweenValues [${betweenValues[0]}, ${betweenValues[1]}] names a tab this <Tabs> has no panel or trigger for, so the rule will never fade.`
+		);
+	}
+
+	const fadeStyle = useAnimatedStyle(
+		() => ({ opacity: resolveSeparatorOpacity(position.value, left, right) }),
+		[left, right]
+	);
+
+	const slots = tabsVariants({ size, variant });
+
+	// The slot is positioning and a height, and it goes on the wrapper: a vertical
+	// `Separator` is `self-stretch`, so it takes its length from whatever holds it
+	// rather than naming one — see ../separator/AGENTS.md.
+	return (
+		<Animated.View className={slots.separator({ className })} style={fadeStyle} {...props}>
+			<Separator orientation="vertical" {...separatorProps} />
+		</Animated.View>
+	);
+}
+TabsSeparator.displayName = "DelacourUI.Tabs.Separator";

package/src/components/tabs/tabs-trigger.tsx

@@ -0,0 +1,210 @@
+import { Children, type ReactElement, type ReactNode, useCallback, useEffect, useMemo } from "react";
+import type { LayoutChangeEvent } from "react-native";
+import { type IconDefaults, IconDefaultsProvider } from "../icon";
+import { Pressable, type PressableProps } from "../pressable";
+import { TextClassProvider } from "../text/text.context";
+import { resolveTextClass } from "../text/text.variants";
+import {
+	type TabsTriggerContextValue,
+	TabsTriggerProvider,
+	useTabsIsScrollable,
+	useTabsListPart,
+	useTabsPart,
+} from "./tabs.context";
+import { resolveTabsTriggerState, TABS_FOREGROUND_TOKEN, TABS_LABEL_TEXT_SIZE, tabsVariants } from "./tabs.variants";
+import { TabsLabel } from "./tabs-label";
+
+export type TabsTriggerRenderProps = {
+	/** What this trigger is called. */
+	value: string;
+	/** Whether this trigger is the settled selection. */
+	isSelected: boolean;
+	/** Whether this trigger is unavailable. */
+	isDisabled: boolean;
+};
+
+export type TabsTriggerProps = Omit<PressableProps, "asChild" | "busy" | "children" | "disabled"> & {
+	/** Identifies this trigger, and the `Tabs.Content` it selects. Required. */
+	value: string;
+	/** Wins over the enclosing `Tabs`. `false` opts one trigger out of a disabled bar. */
+	isDisabled?: boolean;
+	/**
+	 * Nodes, or a function called with this trigger's settled state.
+	 *
+	 * The render prop is the escape hatch for anything a class cannot express — a
+	 * count that only shows while selected, a glyph that swaps. Bare strings are
+	 * wrapped in a `Tabs.Label` automatically.
+	 */
+	children?: ReactNode | ((props: TabsTriggerRenderProps) => ReactNode);
+};
+
+/**
+ * One tab, and the surface its press is claimed on.
+ *
+ * **Its `onLayout` is the indicator's geometry.** The frame it reports — an `x`
+ * and a width in the row's own space — is what the capsule interpolates over, so
+ * there is no table of tab widths anywhere and none could be right: a trigger's
+ * width is its label's, which depends on the string and on the OS font scale.
+ * That is also half the reason there is no `asChild` here; the other half is that
+ * `Pressable`'s own `useAnimatedStyle` already writes `opacity` and `transform`
+ * on the node a donated element would become, and two animated styles on one node
+ * fight for the same props.
+ *
+ * **Two defaults differ from a bare `Pressable` and only two.** `feedback` is
+ * `fade`, because a wide flat trigger that scales reads as the whole track
+ * flexing rather than as one tab responding — `ListGroup.Item`'s reason. `haptic`
+ * is `selection`, because a tab change is a selection change. Both are ordinary
+ * props, so `haptic={false}` silences it.
+ *
+ * **`onPress` is forwarded, not swallowed.** The press selects and then the
+ * caller's handler runs, so a re-press of the already-active tab still reaches
+ * them — which is where a scroll-to-top goes. `shouldEmitTabChange` is what keeps
+ * `onValueChange` quiet for it.
+ *
+ * Icons are composed, never passed as props: the trigger wraps its subtree in an
+ * `IconDefaultsProvider` carrying the bar's own glyph step and its variant's
+ * foreground, beside a `TextClassProvider` carrying the resolved label treatment.
+ * A bare `<Icon>` or `<Text>` inside a trigger therefore needs nothing said at the
+ * call site.
+ */
+export function TabsTrigger({
+	value,
+	isDisabled,
+	children,
+	className,
+	feedback = "fade",
+	haptic = "selection",
+	onPress,
+	onLayout,
+	...props
+}: TabsTriggerProps): ReactElement {
+	const bar = useTabsPart("Tabs.Trigger");
+	const { measure, unmeasure } = useTabsListPart("Tabs.Trigger");
+	const isScrollable = useTabsIsScrollable();
+
+	const { isDisabled: settledIsDisabled } = resolveTabsTriggerState({ own: isDisabled, root: bar.isDisabled });
+	const isSelected = bar.value === value;
+	const isVisuallySelected = bar.order[bar.visualIndex] === value;
+	const index = bar.order.indexOf(value);
+
+	const { registerValue } = bar;
+	useEffect(() => registerValue(value), [registerValue, value]);
+
+	useEffect(() => () => unmeasure(value), [unmeasure, value]);
+
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			// The caller's runs first and always, the way `Screen.Navbar` forwards its
+			// own — a component that measured itself and swallowed the event would
+			// take a prop away that has nothing to do with the measurement.
+			onLayout?.(event);
+			measure(value, { width: event.nativeEvent.layout.width, x: event.nativeEvent.layout.x });
+		},
+		[measure, onLayout, value]
+	);
+
+	const handlePress = useCallback(() => {
+		bar.select(value);
+		onPress?.();
+	}, [bar, onPress, value]);
+
+	const context = useMemo<TabsTriggerContextValue>(
+		() => ({ index, isDisabled: settledIsDisabled, isSelected, isVisuallySelected, value }),
+		[index, settledIsDisabled, isSelected, isVisuallySelected, value]
+	);
+
+	const slots = tabsVariants({
+		isDisabled: settledIsDisabled,
+		isScrollable,
+		size: bar.size,
+		variant: bar.variant,
+	});
+
+	const iconClassName = slots.icon();
+	const iconDefaults = useMemo<IconDefaults>(
+		() => ({
+			className: iconClassName,
+			color: isVisuallySelected
+				? TABS_FOREGROUND_TOKEN[bar.variant].selected
+				: TABS_FOREGROUND_TOKEN[bar.variant].unselected,
+		}),
+		[bar.variant, iconClassName, isVisuallySelected]
+	);
+
+	// One treatment covers the whole subtree — a tab has a label and no description
+	// part — which is the condition for publishing into the cascade.
+	//
+	// It carries no colour, because the `label` slot no longer names one: the
+	// label's colour fades, and a class here would be a second source for it. A
+	// bare `<Text>` composed into a trigger therefore takes the page colour; reach
+	// for `Tabs.Label` when it should read as part of the tab.
+	const labelClassName = slots.label();
+	const labelClass = useMemo(
+		() => resolveTextClass({ className: labelClassName, size: TABS_LABEL_TEXT_SIZE[bar.size], variant: "label" }),
+		[bar.size, labelClassName]
+	);
+
+	const content = useMemo(() => {
+		if (typeof children === "function") {
+			return children({ isDisabled: settledIsDisabled, isSelected, value });
+		}
+		return wrapTextChildren(children);
+	}, [children, settledIsDisabled, isSelected, value]);
+
+	return (
+		<TabsTriggerProvider value={context}>
+			<Pressable
+				accessibilityRole="tab"
+				accessibilityState={{ disabled: settledIsDisabled, selected: isSelected }}
+				className={slots.trigger({ className })}
+				disabled={settledIsDisabled}
+				feedback={feedback}
+				haptic={haptic}
+				onLayout={handleLayout}
+				onPress={handlePress}
+				{...props}
+			>
+				<IconDefaultsProvider value={iconDefaults}>
+					<TextClassProvider value={labelClass}>{content}</TextClassProvider>
+				</IconDefaultsProvider>
+			</Pressable>
+		</TabsTriggerProvider>
+	);
+}
+TabsTrigger.displayName = "DelacourUI.Tabs.Trigger";
+
+/**
+ * Wraps bare text in a `Tabs.Label`.
+ *
+ * React Native cannot render a string outside a `<Text>`, so `<Tabs.Trigger
+ * value="a">All</Tabs.Trigger>` would otherwise crash. Consecutive strings and
+ * numbers collapse into one label rather than one each — `Tab {n}` is a single
+ * piece of text, and wrapping the parts separately would space them apart by the
+ * trigger's own gap.
+ *
+ * Lives here rather than with the label: it is the trigger that wraps its own
+ * children, and importing it from the part would close a cycle. See AGENTS.md.
+ */
+function wrapTextChildren(children: ReactNode): ReactNode {
+	const items = Children.toArray(children);
+	const output: ReactNode[] = [];
+	let run: (string | number)[] = [];
+
+	const flushRun = () => {
+		if (run.length === 0) return;
+		output.push(<TabsLabel key={`label-${output.length}`}>{run.join("")}</TabsLabel>);
+		run = [];
+	};
+
+	for (const child of items) {
+		if (typeof child === "string" || typeof child === "number") {
+			run.push(child);
+			continue;
+		}
+		flushRun();
+		output.push(child);
+	}
+	flushRun();
+
+	return output;
+}