@kanso-labs/react-native-kanso-ui 0.9.0 → 0.11.0

package/dist/components/tabs/index.js

@@ -0,0 +1,1137 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { withOpacity } from "../../theme/color.js";
+import { Badge } from "../badge/index.js";
+import { useLinkPress } from "../../router/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { Children, createContext, isValidElement, use, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTabListState } from "react-stately/useTabListState";
+//#region src/components/tabs/index.tsx
+const PRIMARY_THICKNESS = 3;
+const SECONDARY_THICKNESS = 2;
+const LEAST_INDICATOR = 24;
+const ICON_SIZE = 24;
+const STACKED_HEIGHT = 64;
+const SCROLLABLE_LEAST = 72;
+const SCROLLABLE_MOST = 264;
+const NO_MEASUREMENTS = /* @__PURE__ */ new Map();
+const NO_HEIGHTS = /* @__PURE__ */ new Map();
+const NO_TABS = [];
+const TabsContext = createContext(null);
+const PanelHeightContext = createContext(null);
+const styles = StyleSheet.create({
+	atLeft: { left: 0 },
+	atRight: { right: 0 },
+	badge: { flexShrink: 0 },
+	besideBar: {
+		flexGrow: 1,
+		flexShrink: 1,
+		minWidth: 0
+	},
+	clip: { overflow: "hidden" },
+	icon: {
+		alignItems: "center",
+		flexShrink: 0,
+		height: ICON_SIZE,
+		justifyContent: "center",
+		width: ICON_SIZE
+	},
+	label: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 1,
+		minWidth: 0
+	},
+	line: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 1,
+		minWidth: 0
+	},
+	listVertical: {
+		flexDirection: "column",
+		flexShrink: 0
+	},
+	rootVertical: { flexDirection: "row" },
+	row: { flexDirection: "row" },
+	scroll: {
+		flexGrow: 1,
+		flexShrink: 1,
+		minWidth: 0
+	},
+	tabScrollable: {
+		flexGrow: 0,
+		flexShrink: 0,
+		maxWidth: SCROLLABLE_MOST,
+		minWidth: SCROLLABLE_LEAST
+	},
+	tabShared: {
+		flex: 1,
+		minWidth: 0
+	},
+	tabStacked: { minHeight: STACKED_HEIGHT },
+	tabVertical: { justifyContent: "flex-start" },
+	text: {
+		flexShrink: 1,
+		textAlign: "center"
+	},
+	textVertical: { textAlign: "auto" }
+});
+const stylesOf = themedStyles(({ colors, sizing, spacing }) => StyleSheet.create({
+	divider: {
+		backgroundColor: colors.outlineVariant,
+		bottom: 0,
+		height: 1,
+		left: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		right: 0
+	},
+	dividerVertical: {
+		backgroundColor: colors.outlineVariant,
+		bottom: 0,
+		end: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		top: 0,
+		width: 1
+	},
+	indicator: {
+		backgroundColor: colors.primary,
+		borderTopLeftRadius: PRIMARY_THICKNESS,
+		borderTopRightRadius: PRIMARY_THICKNESS,
+		bottom: 0,
+		height: PRIMARY_THICKNESS,
+		pointerEvents: "none",
+		position: "absolute"
+	},
+	indicatorSecondary: {
+		backgroundColor: colors.primary,
+		bottom: 0,
+		height: SECONDARY_THICKNESS,
+		pointerEvents: "none",
+		position: "absolute"
+	},
+	indicatorSecondaryVertical: {
+		backgroundColor: colors.primary,
+		end: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		top: 0,
+		width: SECONDARY_THICKNESS
+	},
+	indicatorVertical: {
+		backgroundColor: colors.primary,
+		borderBottomStartRadius: PRIMARY_THICKNESS,
+		borderTopStartRadius: PRIMARY_THICKNESS,
+		end: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		top: 0,
+		width: PRIMARY_THICKNESS
+	},
+	labelInline: {
+		flexDirection: "row-reverse",
+		gap: spacing.sm
+	},
+	labelStacked: {
+		flexDirection: "column-reverse",
+		gap: spacing.xxs
+	},
+	lineBadged: { gap: spacing.xs },
+	tab: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		flexDirection: "row",
+		justifyContent: "center",
+		minHeight: sizing.controlMd,
+		paddingHorizontal: spacing.lg
+	}
+}));
+const ringStyles = StyleSheet.create({ ring: { outlineOffset: -2 } });
+/**
+* A tab bar and the panels it switches between. Pass `selectedKey` with
+* `onSelectionChange` to hold the selection, or `defaultSelectedKey` to let
+* the bar keep its own. Each `Tabs.Tab` names the `Tabs.Panel` it shows
+* through a shared `id`, and a bar may stand alone without panels.
+*
+* ```tsx
+* <Tabs defaultSelectedKey="first">
+*   <Tabs.List aria-label="Sections">
+*     <Tabs.Tab id="first">First item</Tabs.Tab>
+*     <Tabs.Tab id="second">Second item</Tabs.Tab>
+*   </Tabs.List>
+*   <Tabs.Panel id="first">
+*     <Text>Supporting line</Text>
+*   </Tabs.Panel>
+*   <Tabs.Panel id="second">
+*     <Text>Supporting line</Text>
+*   </Tabs.Panel>
+* </Tabs>
+* ```
+*
+* Write the `Tabs.List` among the children of `Tabs`, inside any view or
+* fragment, rather than in a component of the call site's own: the bar is
+* found there, and its tabs are what the selection is built from.
+*
+* `style`, `ref` and `testID` land on the root view, the one a layout
+* positions.
+*/
+function Tabs(t0) {
+	const $ = c(28);
+	const { children, defaultSelectedKey, disabledKeys, isDisabled, layout: t1, onSelectionChange, orientation: t2, ref, selectedKey, style, testID, variant: t3 } = t0;
+	const layout = t1 === void 0 ? "fixed" : t1;
+	const orientation = t2 === void 0 ? "horizontal" : t2;
+	const variant = t3 === void 0 ? "primary" : t3;
+	let t4;
+	if ($[0] !== children) {
+		t4 = listOf(children);
+		$[0] = children;
+		$[1] = t4;
+	} else t4 = $[1];
+	const list = t4;
+	const t5 = list?.props.children ?? NO_TABS;
+	const t6 = list?.props.items;
+	const t7 = selectedKey ?? void 0;
+	let t8;
+	if ($[2] !== defaultSelectedKey || $[3] !== disabledKeys || $[4] !== isDisabled || $[5] !== onSelectionChange || $[6] !== t5 || $[7] !== t6 || $[8] !== t7) {
+		t8 = {
+			children: t5,
+			defaultSelectedKey,
+			disabledKeys,
+			isDisabled,
+			items: t6,
+			onSelectionChange,
+			selectedKey: t7
+		};
+		$[2] = defaultSelectedKey;
+		$[3] = disabledKeys;
+		$[4] = isDisabled;
+		$[5] = onSelectionChange;
+		$[6] = t5;
+		$[7] = t6;
+		$[8] = t7;
+		$[9] = t8;
+	} else t8 = $[9];
+	const state = useTabListState(t8);
+	const ids = useId();
+	let t9;
+	if ($[10] !== ids || $[11] !== layout || $[12] !== list || $[13] !== orientation || $[14] !== state || $[15] !== variant) {
+		t9 = contextOf({
+			layout,
+			orientation,
+			variant
+		}, list !== void 0, ids, state);
+		$[10] = ids;
+		$[11] = layout;
+		$[12] = list;
+		$[13] = orientation;
+		$[14] = state;
+		$[15] = variant;
+		$[16] = t9;
+	} else t9 = $[16];
+	const context = t9;
+	const t10 = orientation === "vertical" ? styles.rootVertical : void 0;
+	let t11;
+	if ($[17] !== style || $[18] !== t10) {
+		t11 = composeStyles(t10, style);
+		$[17] = style;
+		$[18] = t10;
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== children || $[21] !== ref || $[22] !== t11 || $[23] !== testID) {
+		t12 = /* @__PURE__ */ jsx(View, {
+			ref,
+			style: t11,
+			testID,
+			children
+		});
+		$[20] = children;
+		$[21] = ref;
+		$[22] = t11;
+		$[23] = testID;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== context || $[26] !== t12) {
+		t13 = /* @__PURE__ */ jsx(TabsContext, {
+			value: context,
+			children: t12
+		});
+		$[25] = context;
+		$[26] = t12;
+		$[27] = t13;
+	} else t13 = $[27];
+	return t13;
+}
+/**
+* The bar: every tab, drawn from the entries its `Tabs.Tab` children gave
+* the root, with the divider and the indicator. Name it with `aria-label` or
+* `aria-labelledby`.
+*
+* `style`, `ref` and `testID` land on the bar's own view.
+*/
+function TabsList(t0) {
+	const $ = c(57);
+	const { "aria-label": ariaLabel, "aria-labelledby": labelledBy, ref, style, testID } = t0;
+	const { bar, ids, state } = useTabs("Tabs.List", true);
+	const theme = useTheme();
+	let t1;
+	if ($[0] !== theme) {
+		t1 = stylesOf(theme);
+		$[0] = theme;
+		$[1] = t1;
+	} else t1 = $[1];
+	const own = t1;
+	const reduceMotion = useReducedMotion();
+	const [measured, setMeasured] = useState(NO_MEASUREMENTS);
+	const [viewport, setViewport] = useState(0);
+	const scroll = useRef(null);
+	const scrolled = useRef(0);
+	const revealed = useRef(void 0);
+	const vertical = bar.orientation === "vertical";
+	const scrollable = bar.layout === "scrollable";
+	const { selectedKey } = state;
+	let selected;
+	let t2;
+	if ($[2] !== bar || $[3] !== measured || $[4] !== selectedKey || $[5] !== theme.spacing.xxs) {
+		selected = selectedKey === null ? void 0 : measured.get(selectedKey);
+		t2 = placementOf(bar, selected, theme.spacing.xxs);
+		$[2] = bar;
+		$[3] = measured;
+		$[4] = selectedKey;
+		$[5] = theme.spacing.xxs;
+		$[6] = selected;
+		$[7] = t2;
+	} else {
+		selected = $[6];
+		t2 = $[7];
+	}
+	const placement = t2;
+	let t3;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = (key, part, layout) => {
+			setMeasured((previous) => withMeasurement(previous, key, part, layout));
+		};
+		$[8] = t3;
+	} else t3 = $[8];
+	const measure = t3;
+	let t4;
+	if ($[9] !== vertical) {
+		t4 = (event) => {
+			const { contentOffset } = event.nativeEvent;
+			scrolled.current = vertical ? contentOffset.y : contentOffset.x;
+		};
+		$[9] = vertical;
+		$[10] = t4;
+	} else t4 = $[10];
+	const onScroll = t4;
+	let t5;
+	if ($[11] !== reduceMotion || $[12] !== scrollable || $[13] !== selected?.tab || $[14] !== selectedKey || $[15] !== vertical || $[16] !== viewport) {
+		t5 = () => {
+			const tab = selected?.tab;
+			if (!scrollable || tab === void 0 || viewport === 0 || revealed.current === selectedKey) return;
+			const first = revealed.current === void 0;
+			revealed.current = selectedKey;
+			const target = revealOffset(scrolled.current, viewport, vertical ? tab.y : tab.x, vertical ? tab.height : tab.width);
+			if (target !== void 0) {
+				const animated = !first && !reduceMotion;
+				scroll.current?.scrollTo(vertical ? {
+					animated,
+					y: target
+				} : {
+					animated,
+					x: target
+				});
+			}
+		};
+		$[11] = reduceMotion;
+		$[12] = scrollable;
+		$[13] = selected?.tab;
+		$[14] = selectedKey;
+		$[15] = vertical;
+		$[16] = viewport;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== reduceMotion || $[19] !== scrollable || $[20] !== selected || $[21] !== selectedKey || $[22] !== vertical || $[23] !== viewport) {
+		t6 = [
+			reduceMotion,
+			scrollable,
+			selected,
+			selectedKey,
+			vertical,
+			viewport
+		];
+		$[18] = reduceMotion;
+		$[19] = scrollable;
+		$[20] = selected;
+		$[21] = selectedKey;
+		$[22] = vertical;
+		$[23] = viewport;
+		$[24] = t6;
+	} else t6 = $[24];
+	useEffect(t5, t6);
+	let t7;
+	if ($[25] !== state.collection) {
+		t7 = [...state.collection];
+		$[25] = state.collection;
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== bar || $[28] !== ids || $[29] !== state || $[30] !== t7) {
+		t8 = t7.map((node) => /* @__PURE__ */ jsx(ListTab, {
+			bar,
+			ids,
+			node,
+			onMeasure: measure,
+			state
+		}, node.key));
+		$[27] = bar;
+		$[28] = ids;
+		$[29] = state;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	let t9;
+	if ($[32] !== bar || $[33] !== placement || $[34] !== selectedKey) {
+		t9 = placement === void 0 ? null : /* @__PURE__ */ jsx(Indicator, {
+			bar,
+			placement,
+			selectedKey
+		});
+		$[32] = bar;
+		$[33] = placement;
+		$[34] = selectedKey;
+		$[35] = t9;
+	} else t9 = $[35];
+	let t10;
+	if ($[36] !== t8 || $[37] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t8, t9] });
+		$[36] = t8;
+		$[37] = t9;
+		$[38] = t10;
+	} else t10 = $[38];
+	const tabs = t10;
+	const t11 = vertical ? styles.listVertical : styles.row;
+	let t12;
+	if ($[39] !== style || $[40] !== t11) {
+		t12 = composeStyles(t11, style);
+		$[39] = style;
+		$[40] = t11;
+		$[41] = t12;
+	} else t12 = $[41];
+	const t13 = vertical ? own.dividerVertical : own.divider;
+	let t14;
+	if ($[42] !== t13) {
+		t14 = /* @__PURE__ */ jsx(View, { style: t13 });
+		$[42] = t13;
+		$[43] = t14;
+	} else t14 = $[43];
+	let t15;
+	if ($[44] !== onScroll || $[45] !== scrollable || $[46] !== tabs || $[47] !== vertical) {
+		t15 = scrollable ? /* @__PURE__ */ jsx(ScrollView, {
+			horizontal: !vertical,
+			onLayout: viewportOf(setViewport, vertical),
+			onScroll,
+			ref: scroll,
+			scrollEventThrottle: 16,
+			showsHorizontalScrollIndicator: false,
+			showsVerticalScrollIndicator: false,
+			style: styles.scroll,
+			children: tabs
+		}) : tabs;
+		$[44] = onScroll;
+		$[45] = scrollable;
+		$[46] = tabs;
+		$[47] = vertical;
+		$[48] = t15;
+	} else t15 = $[48];
+	let t16;
+	if ($[49] !== ariaLabel || $[50] !== labelledBy || $[51] !== ref || $[52] !== t12 || $[53] !== t14 || $[54] !== t15 || $[55] !== testID) {
+		t16 = /* @__PURE__ */ jsxs(View, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": labelledBy,
+			ref,
+			role: "tablist",
+			style: t12,
+			testID,
+			children: [t14, t15]
+		});
+		$[49] = ariaLabel;
+		$[50] = labelledBy;
+		$[51] = ref;
+		$[52] = t12;
+		$[53] = t14;
+		$[54] = t15;
+		$[55] = testID;
+		$[56] = t16;
+	} else t16 = $[56];
+	return t16;
+}
+/**
+* One tab of a `Tabs.List`, which draws it: the root builds its selection
+* from these, so one renders nothing on its own. Give every tab an `id`,
+* which is the key selection reports and its `Tabs.Panel` shares.
+*/
+function TabsTab(_props) {
+	return null;
+}
+TabsTab.getCollectionNode = function* getCollectionNode(props) {
+	yield {
+		"aria-label": props["aria-label"],
+		hasChildNodes: false,
+		key: props.id,
+		props,
+		rendered: props.children,
+		textValue: props.textValue ?? (typeof props.children === "string" ? props.children : ""),
+		type: "item"
+	};
+};
+function badgeFor(badge, icon) {
+	if (badge === void 0 || badge === false) return icon ?? null;
+	return /* @__PURE__ */ jsx(Badge, {
+		count: badge === true ? void 0 : badge,
+		style: icon === void 0 ? styles.badge : void 0,
+		children: icon
+	});
+}
+/**
+* The colour a tab draws its label and icon in: primary for the active tab
+* of a primary bar and on surface for a secondary one's, on surface for an
+* inactive tab a pointer, a focus or a press engages, on surface variant at
+* rest, and on surface at the disabled content opacity while disabled.
+*/
+function colorOf({ colors, stateLayerOpacity }, variant, { disabled, engaged, selected }) {
+	if (disabled) return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+	if (selected) return variant === "primary" ? colors.primary : colors.onSurface;
+	return engaged ? colors.onSurface : colors.onSurfaceVariant;
+}
+function contextOf(bar, found, ids, state) {
+	return {
+		bar,
+		found,
+		ids,
+		state
+	};
+}
+function heightOf(report, key) {
+	if (report === null) return;
+	return (event) => {
+		report(key, event.nativeEvent.layout.height);
+	};
+}
+function iconStyleOf(color) {
+	return {
+		color,
+		size: ICON_SIZE
+	};
+}
+/**
+* The active indicator: one view, which moves to the selected tab's place
+* when the selection does, and is put there at once when the bar is only
+* laid out again.
+*/
+function Indicator(t0) {
+	const $ = c(12);
+	const { bar, placement, selectedKey } = t0;
+	const theme = useTheme();
+	const { motion } = theme;
+	const own = stylesOf(theme);
+	const reduceMotion = useReducedMotion();
+	const offset = useSharedValue(placement.offset);
+	const length = useSharedValue(placement.length);
+	const placed = useRef(selectedKey);
+	const vertical = bar.orientation === "vertical";
+	let t1;
+	let t2;
+	if ($[0] !== length || $[1] !== motion || $[2] !== offset || $[3] !== placement.length || $[4] !== placement.offset || $[5] !== reduceMotion || $[6] !== selectedKey) {
+		t1 = () => {
+			const moved = placed.current !== selectedKey;
+			placed.current = selectedKey;
+			if (!moved || reduceMotion) {
+				offset.set(placement.offset);
+				length.set(placement.length);
+				return;
+			}
+			const timing = {
+				duration: motion.durationMedium1,
+				easing: Easing.bezier(...motion.easingEmphasized)
+			};
+			offset.set(withTiming(placement.offset, timing));
+			length.set(withTiming(placement.length, timing));
+		};
+		t2 = [
+			length,
+			motion,
+			offset,
+			placement.length,
+			placement.offset,
+			reduceMotion,
+			selectedKey
+		];
+		$[0] = length;
+		$[1] = motion;
+		$[2] = offset;
+		$[3] = placement.length;
+		$[4] = placement.offset;
+		$[5] = reduceMotion;
+		$[6] = selectedKey;
+		$[7] = t1;
+		$[8] = t2;
+	} else {
+		t1 = $[7];
+		t2 = $[8];
+	}
+	useEffect(t1, t2);
+	const motionStyle = useAnimatedStyle(() => {
+		"worklet";
+		return vertical ? {
+			height: length.get(),
+			transform: [{ translateY: offset.get() }]
+		} : {
+			transform: [{ translateX: offset.get() }],
+			width: length.get()
+		};
+	});
+	const t3 = Animated;
+	const t4 = composeStyles(indicatorStyleOf(own, bar), vertical ? void 0 : leftEdgeOf(), motionStyle);
+	let t5;
+	if ($[9] !== t3.View || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(t3.View, { style: t4 });
+		$[9] = t3.View;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+}
+function indicatorStyleOf(own, bar) {
+	if (bar.variant === "primary") return bar.orientation === "vertical" ? own.indicatorVertical : own.indicator;
+	return bar.orientation === "vertical" ? own.indicatorSecondaryVertical : own.indicatorSecondary;
+}
+/**
+* The style that puts a horizontal indicator at the bar's left edge, which is
+* where a layout measures a tab's `x` from in either direction, so that the
+* indicator's translation is the tab's own `x`. React Native swaps `left` and
+* `right` under a right-to-left layout unless the app turns that off, so
+* there `right` is the one naming the left edge. React Native Web reports no
+* right-to-left layout here and keeps `left` where CSS has it.
+*/
+function leftEdgeOf() {
+	return I18nManager.isRTL && I18nManager.getConstants().doLeftAndRightSwapInRTL ? styles.atRight : styles.atLeft;
+}
+function listOf(children) {
+	for (const child of Children.toArray(children)) {
+		if (isValidElement(child) && child.type === TabsList) return child;
+		if (isValidElement(child) && child.type !== Tabs) {
+			const nested = listOf(child.props.children);
+			if (nested !== void 0) return nested;
+		}
+	}
+}
+/**
+* One tab as the bar draws it, from its entry in the collection: a `tab`
+* that selects itself when pressed, and reports where it and its label lie
+* so the indicator can follow them.
+*/
+function ListTab(t0) {
+	const $ = c(57);
+	const { bar, ids, node, onMeasure, state } = t0;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const role = useTypeRole("titleSmall");
+	let ariaLabel;
+	let badge;
+	let children;
+	let href;
+	let icon;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onLayout;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let props;
+	let ref;
+	let style;
+	if ($[0] !== node.props) {
+		const { "aria-label": t1, badge: t2, children: t3, href: t4, icon: t5, id: _id, isDisabled: _isDisabled, onBlur: t6, onFocus: t7, onHoverIn: t8, onHoverOut: t9, onLayout: t10, onPress: t11, onPressIn: t12, onPressOut: t13, ref: t14, style: t15, textValue: _textValue, ...t16 } = node.props;
+		ariaLabel = t1;
+		badge = t2;
+		children = t3;
+		href = t4;
+		icon = t5;
+		onBlur = t6;
+		onFocus = t7;
+		onHoverIn = t8;
+		onHoverOut = t9;
+		onLayout = t10;
+		onPress = t11;
+		onPressIn = t12;
+		onPressOut = t13;
+		ref = t14;
+		style = t15;
+		props = t16;
+		$[0] = node.props;
+		$[1] = ariaLabel;
+		$[2] = badge;
+		$[3] = children;
+		$[4] = href;
+		$[5] = icon;
+		$[6] = onBlur;
+		$[7] = onFocus;
+		$[8] = onHoverIn;
+		$[9] = onHoverOut;
+		$[10] = onLayout;
+		$[11] = onPress;
+		$[12] = onPressIn;
+		$[13] = onPressOut;
+		$[14] = props;
+		$[15] = ref;
+		$[16] = style;
+	} else {
+		ariaLabel = $[1];
+		badge = $[2];
+		children = $[3];
+		href = $[4];
+		icon = $[5];
+		onBlur = $[6];
+		onFocus = $[7];
+		onHoverIn = $[8];
+		onHoverOut = $[9];
+		onLayout = $[10];
+		onPress = $[11];
+		onPressIn = $[12];
+		onPressOut = $[13];
+		props = $[14];
+		ref = $[15];
+		style = $[16];
+	}
+	const { key } = node;
+	const disabled = state.isDisabled || state.selectionManager.isDisabled(key);
+	const selected = state.selectedKey === key;
+	const { variant } = bar;
+	const feedback = usePressFeedback({
+		color: variant === "primary" && selected ? theme.colors.primary : theme.colors.onSurface,
+		disabled,
+		onBlur,
+		onFocus,
+		onHoverIn,
+		onHoverOut,
+		onPressIn,
+		onPressOut,
+		pressedColor: variant === "primary" ? theme.colors.primary : theme.colors.onSurface
+	});
+	const press = useLinkPress(href, onPress);
+	const vertical = bar.orientation === "vertical";
+	const hasIcon = icon !== void 0 && icon !== null;
+	const stacked = hasIcon && variant === "primary";
+	const color = colorOf(theme, variant, {
+		disabled,
+		engaged: feedback.hovered || feedback.pressed || feedback.ring !== void 0,
+		selected
+	});
+	let t1;
+	if ($[17] !== badge || $[18] !== stacked) {
+		t1 = stacked ? null : badgeFor(badge);
+		$[17] = badge;
+		$[18] = stacked;
+		$[19] = t1;
+	} else t1 = $[19];
+	const after = t1;
+	const text = /* @__PURE__ */ jsx(Text, {
+		numberOfLines: stacked ? 1 : 2,
+		style: composeStyles(role, styles.text, vertical ? styles.textVertical : void 0, { color }),
+		children
+	});
+	const T0 = Pressable;
+	let t2;
+	if ($[20] !== ariaLabel || $[21] !== children) {
+		t2 = ariaLabel ?? nameOf(children);
+		$[20] = ariaLabel;
+		$[21] = children;
+		$[22] = t2;
+	} else t2 = $[22];
+	let t3;
+	if ($[23] !== ids || $[24] !== key) {
+		t3 = tabIdOf(ids, key);
+		$[23] = ids;
+		$[24] = key;
+		$[25] = t3;
+	} else t3 = $[25];
+	const t4 = "tab";
+	const t5 = feedback.handlers;
+	let t6;
+	if ($[26] !== key || $[27] !== onLayout || $[28] !== onMeasure) {
+		t6 = measureThen(onMeasure, key, "tab", onLayout);
+		$[26] = key;
+		$[27] = onLayout;
+		$[28] = onMeasure;
+		$[29] = t6;
+	} else t6 = $[29];
+	let t7;
+	if ($[30] !== key || $[31] !== press || $[32] !== state) {
+		t7 = selectThen(state, key, press);
+		$[30] = key;
+		$[31] = press;
+		$[32] = state;
+		$[33] = t7;
+	} else t7 = $[33];
+	const t8 = composeStyles(own.tab, vertical ? styles.tabVertical : tabWidthOf(bar.layout), stacked ? styles.tabStacked : void 0, feedback.ring, feedback.ring === void 0 ? void 0 : ringStyles.ring, style);
+	const t9 = feedback.layer;
+	const T1 = View;
+	let t10;
+	if ($[34] !== key || $[35] !== onMeasure) {
+		t10 = measureThen(onMeasure, key, "label");
+		$[34] = key;
+		$[35] = onMeasure;
+		$[36] = t10;
+	} else t10 = $[36];
+	const t11 = composeStyles(styles.label, hasIcon ? stacked ? own.labelStacked : own.labelInline : void 0);
+	const t12 = after === null ? text : /* @__PURE__ */ jsxs(View, {
+		style: composeStyles(styles.line, own.lineBadged),
+		children: [text, after]
+	});
+	const t13 = hasIcon ? /* @__PURE__ */ jsx(View, {
+		style: styles.icon,
+		children: /* @__PURE__ */ jsx(IconStyleContext, {
+			value: iconStyleOf(color),
+			children: stacked ? badgeFor(badge, icon) : icon
+		})
+	}) : null;
+	let t14;
+	if ($[37] !== T1 || $[38] !== t10 || $[39] !== t11 || $[40] !== t12 || $[41] !== t13) {
+		t14 = /* @__PURE__ */ jsxs(T1, {
+			onLayout: t10,
+			style: t11,
+			children: [t12, t13]
+		});
+		$[37] = T1;
+		$[38] = t10;
+		$[39] = t11;
+		$[40] = t12;
+		$[41] = t13;
+		$[42] = t14;
+	} else t14 = $[42];
+	let t15;
+	if ($[43] !== T0 || $[44] !== disabled || $[45] !== feedback.handlers || $[46] !== feedback.layer || $[47] !== props || $[48] !== ref || $[49] !== selected || $[50] !== t14 || $[51] !== t2 || $[52] !== t3 || $[53] !== t6 || $[54] !== t7 || $[55] !== t8) {
+		t15 = /* @__PURE__ */ jsxs(T0, {
+			"aria-label": t2,
+			"aria-selected": selected,
+			id: t3,
+			ref,
+			role: t4,
+			...props,
+			...t5,
+			disabled,
+			onLayout: t6,
+			onPress: t7,
+			style: t8,
+			children: [t9, t14]
+		});
+		$[43] = T0;
+		$[44] = disabled;
+		$[45] = feedback.handlers;
+		$[46] = feedback.layer;
+		$[47] = props;
+		$[48] = ref;
+		$[49] = selected;
+		$[50] = t14;
+		$[51] = t2;
+		$[52] = t3;
+		$[53] = t6;
+		$[54] = t7;
+		$[55] = t8;
+		$[56] = t15;
+	} else t15 = $[56];
+	return t15;
+}
+function measureThen(onMeasure, key, part, onLayout) {
+	return (event) => {
+		onMeasure(key, part, event.nativeEvent.layout);
+		onLayout?.(event);
+	};
+}
+function nameOf(children) {
+	return typeof children === "string" ? children : void 0;
+}
+/**
+* Where the indicator lies along the bar, from the selected tab's measured
+* place: under its label on a horizontal primary bar, 2dp short of it at
+* either end and at least 24dp, and along the tab's whole length on a
+* secondary bar. Down a vertical bar the same two, along the tab's height.
+* Nothing until what it follows has been measured.
+*/
+function placementOf({ orientation, variant }, measured, inset) {
+	const tab = measured?.tab;
+	if (tab === void 0) return;
+	if (orientation === "vertical") {
+		if (variant === "secondary") return {
+			length: tab.height,
+			offset: tab.y
+		};
+		const length = Math.max(LEAST_INDICATOR, tab.height - 2 * inset);
+		return {
+			length,
+			offset: tab.y + (tab.height - length) / 2
+		};
+	}
+	if (variant === "secondary") return {
+		length: tab.width,
+		offset: tab.x
+	};
+	const label = measured?.label;
+	if (label === void 0) return;
+	const length = Math.max(LEAST_INDICATOR, label.width - 2 * inset);
+	return {
+		length,
+		offset: tab.x + label.x + (label.width - length) / 2
+	};
+}
+function revealOffset(scrolled, viewport, start, size) {
+	if (start < scrolled) return start;
+	if (start + size > scrolled + viewport) return start + size - viewport;
+}
+function selectThen(state, key, press) {
+	return (event) => {
+		state.setSelectedKey(key);
+		press(event);
+	};
+}
+function tabIdOf(ids, key) {
+	return `${ids}-tab-${String(key).replaceAll(/\s+/gu, "")}`;
+}
+/**
+* The content of one tab, drawn while its tab is selected. Its `id` is the
+* tab's.
+*
+* `style`, `ref` and `testID` land on the panel's own view.
+*/
+function TabsPanel(t0) {
+	const $ = c(21);
+	const { children, id, ref, style, testID } = t0;
+	const { bar, ids, state } = useTabs("Tabs.Panel");
+	const report = use(PanelHeightContext);
+	const key = id ?? state.selectedKey;
+	const shown = key !== null && key === state.selectedKey;
+	let t1;
+	let t2;
+	if ($[0] !== key || $[1] !== report || $[2] !== shown) {
+		t1 = () => {
+			if (report === null || !shown) return;
+			return () => {
+				report(key, void 0);
+			};
+		};
+		t2 = [
+			key,
+			report,
+			shown
+		];
+		$[0] = key;
+		$[1] = report;
+		$[2] = shown;
+		$[3] = t1;
+		$[4] = t2;
+	} else {
+		t1 = $[3];
+		t2 = $[4];
+	}
+	useEffect(t1, t2);
+	if (!shown) return null;
+	let t3;
+	if ($[5] !== ids || $[6] !== key) {
+		t3 = tabIdOf(ids, key);
+		$[5] = ids;
+		$[6] = key;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== key || $[9] !== report) {
+		t4 = heightOf(report, key);
+		$[8] = key;
+		$[9] = report;
+		$[10] = t4;
+	} else t4 = $[10];
+	const t5 = bar.orientation === "vertical" ? styles.besideBar : void 0;
+	let t6;
+	if ($[11] !== style || $[12] !== t5) {
+		t6 = composeStyles(t5, style);
+		$[11] = style;
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== children || $[15] !== ref || $[16] !== t3 || $[17] !== t4 || $[18] !== t6 || $[19] !== testID) {
+		t7 = /* @__PURE__ */ jsx(View, {
+			"aria-labelledby": t3,
+			onLayout: t4,
+			ref,
+			role: "tabpanel",
+			style: t6,
+			testID,
+			children
+		});
+		$[14] = children;
+		$[15] = ref;
+		$[16] = t3;
+		$[17] = t4;
+		$[18] = t6;
+		$[19] = testID;
+		$[20] = t7;
+	} else t7 = $[20];
+	return t7;
+}
+/**
+* An optional box around the panels, which moves its height as one panel
+* gives way to the next, over medium1 on the emphasized curve and at once
+* under reduced motion. Without it the panels still work; the box around
+* them simply jumps from one height to the other.
+*
+* `style`, `ref` and `testID` land on the box.
+*/
+function TabsPanels(t0) {
+	const $ = c(22);
+	const { children, ref, style, testID } = t0;
+	const { bar, state } = useTabs("Tabs.Panels");
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const [heights, setHeights] = useState(NO_HEIGHTS);
+	const height = useSharedValue(-1);
+	const placed = useRef(void 0);
+	const { selectedKey } = state;
+	let t1;
+	if ($[0] !== heights || $[1] !== selectedKey) {
+		t1 = selectedKey === null ? void 0 : heights.get(selectedKey);
+		$[0] = heights;
+		$[1] = selectedKey;
+		$[2] = t1;
+	} else t1 = $[2];
+	const target = t1;
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (key, next) => {
+			setHeights((previous) => withHeight(previous, key, next));
+		};
+		$[3] = t2;
+	} else t2 = $[3];
+	const report = t2;
+	let t3;
+	let t4;
+	if ($[4] !== height || $[5] !== motion || $[6] !== reduceMotion || $[7] !== selectedKey || $[8] !== target) {
+		t3 = () => {
+			if (target === void 0) return;
+			const moved = placed.current !== void 0 && placed.current !== selectedKey;
+			placed.current = selectedKey;
+			height.set(moved && !reduceMotion ? withTiming(target, {
+				duration: motion.durationMedium1,
+				easing: Easing.bezier(...motion.easingEmphasized)
+			}) : target);
+		};
+		t4 = [
+			height,
+			motion,
+			reduceMotion,
+			selectedKey,
+			target
+		];
+		$[4] = height;
+		$[5] = motion;
+		$[6] = reduceMotion;
+		$[7] = selectedKey;
+		$[8] = target;
+		$[9] = t3;
+		$[10] = t4;
+	} else {
+		t3 = $[9];
+		t4 = $[10];
+	}
+	useEffect(t3, t4);
+	const box = useAnimatedStyle(() => {
+		"worklet";
+		const measuredHeight = height.get();
+		return measuredHeight < 0 ? {} : { height: measuredHeight };
+	});
+	const t5 = bar.orientation === "vertical" ? styles.besideBar : void 0;
+	let t6;
+	if ($[11] !== box || $[12] !== style || $[13] !== t5) {
+		t6 = composeStyles(styles.clip, t5, box, style);
+		$[11] = box;
+		$[12] = style;
+		$[13] = t5;
+		$[14] = t6;
+	} else t6 = $[14];
+	let t7;
+	if ($[15] !== children) {
+		t7 = /* @__PURE__ */ jsx(View, { children });
+		$[15] = children;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== ref || $[18] !== t6 || $[19] !== t7 || $[20] !== testID) {
+		t8 = /* @__PURE__ */ jsx(PanelHeightContext, {
+			value: report,
+			children: /* @__PURE__ */ jsx(Animated.View, {
+				ref,
+				style: t6,
+				testID,
+				children: t7
+			})
+		});
+		$[17] = ref;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = testID;
+		$[21] = t8;
+	} else t8 = $[21];
+	return t8;
+}
+function tabWidthOf(layout) {
+	return layout === "scrollable" ? styles.tabScrollable : styles.tabShared;
+}
+function useTabs(part, list = false) {
+	const value = use(TabsContext);
+	if (value === null) throw new Error(`${part} is drawn inside Tabs.`);
+	if (list && !value.found) throw new Error("Tabs.List is written among the children of Tabs, inside any view or fragment, rather than in a component of its own.");
+	return value;
+}
+function viewportOf(setViewport, vertical) {
+	return (event) => {
+		const { height, width } = event.nativeEvent.layout;
+		setViewport(vertical ? height : width);
+	};
+}
+function withHeight(previous, key, height) {
+	if (previous.get(key) === height) return previous;
+	const next = new Map(previous);
+	if (height === void 0) next.delete(key);
+	else next.set(key, height);
+	return next;
+}
+function withMeasurement(previous, key, part, layout) {
+	const known = previous.get(key)?.[part];
+	if (known !== void 0 && known.x === layout.x && known.y === layout.y && known.width === layout.width && known.height === layout.height) return previous;
+	const next = new Map(previous);
+	next.set(key, {
+		...previous.get(key),
+		[part]: layout
+	});
+	return next;
+}
+Tabs.List = TabsList;
+Tabs.Panel = TabsPanel;
+Tabs.Panels = TabsPanels;
+Tabs.Tab = TabsTab;
+//#endregion
+export { Tabs, TabsList, TabsPanel, TabsPanels, TabsTab };
+
+//# sourceMappingURL=index.js.map