@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.0

package/dist/components/segmented-button/index.js

@@ -0,0 +1,937 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { CheckGlyph } from "../../glyphs/index.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { toggleState } from "../../button/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { c } from "react/compiler-runtime";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { Children, Fragment, createContext, isValidElement, use, useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useToggleGroupState } from "react-stately/useToggleGroupState";
+//#region src/components/segmented-button/index.tsx
+const GLYPH_SIZE = 18;
+const RULE_WIDTH = 1;
+const CHECK = /* @__PURE__ */ jsx(CheckGlyph, {});
+const GroupContext = createContext(null);
+const IndexContext = createContext(0);
+const styles = StyleSheet.create({
+	glyph: {
+		alignItems: "center",
+		flexShrink: 0,
+		height: GLYPH_SIZE,
+		justifyContent: "center",
+		width: GLYPH_SIZE
+	},
+	glyphSlot: {
+		alignItems: "center",
+		flexShrink: 0,
+		height: GLYPH_SIZE,
+		justifyContent: "center",
+		overflow: "hidden"
+	},
+	indicator: {
+		bottom: 0,
+		position: "absolute",
+		start: 0,
+		top: 0
+	},
+	label: {
+		flexShrink: 0,
+		minWidth: 0
+	},
+	measurer: {
+		alignItems: "flex-start",
+		opacity: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		start: 0,
+		top: 0
+	},
+	ownIndicator: {
+		bottom: 0,
+		end: 0,
+		position: "absolute",
+		start: 0,
+		top: 0
+	},
+	spacer: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexShrink: 1,
+		justifyContent: "flex-end"
+	}
+});
+const stylesOf = themedStyles(({ colors, radii, sizing, spacing }) => StyleSheet.create({
+	clip: {
+		borderRadius: radii.pill,
+		bottom: 0,
+		end: 0,
+		overflow: "hidden",
+		pointerEvents: "none",
+		position: "absolute",
+		start: 0,
+		top: 0
+	},
+	first: { borderStartWidth: RULE_WIDTH },
+	segment: {
+		alignItems: "center",
+		borderColor: colors.outline,
+		borderStartWidth: 0,
+		borderWidth: RULE_WIDTH,
+		flexDirection: "row",
+		flexShrink: 1,
+		justifyContent: "center",
+		minHeight: sizing.controlSm,
+		minWidth: 0,
+		paddingHorizontal: spacing.sm
+	},
+	track: {
+		alignSelf: "flex-start",
+		flexDirection: "row",
+		maxWidth: "100%"
+	}
+}));
+const reachOf = themedStyles(({ sizing }) => hitSlop(sizing.controlSm));
+/**
+* The width every segment takes: the widest one's, which is its label, its
+* padding, the room it keeps for a glyph and its rule. Undefined until every
+* label has been measured.
+*/
+function basisOf(segments, labels, showSelectedIcon, { spacing }) {
+	let basis = 0;
+	for (const [index, { props }] of segments.entries()) {
+		const labelled = hasLabel(props.children);
+		const label = labels.get(props.id);
+		if (labelled && label === void 0) return;
+		const content = labelled ? (label ?? 0) + (reservesGlyph(props, showSelectedIcon) ? GLYPH_SIZE + spacing.sm : 0) : props.icon === void 0 ? 0 : GLYPH_SIZE;
+		basis = Math.max(basis, content + spacing.md * 2 + ruleOf(index) + RULE_WIDTH);
+	}
+	return basis;
+}
+/**
+* The chosen container's colour: the page's secondary container, the
+* stronger secondary where no check marks the choice, and on-surface at the
+* disabled opacity while the segment is disabled.
+*/
+function containerOf({ colors, stateLayerOpacity }, disabled, marked) {
+	if (disabled) return withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer);
+	return marked ? colors.secondaryContainer : colors.secondary;
+}
+/**
+* The label's colour, which the glyph, the state layer and the ripple take
+* too.
+*/
+function contentOf({ colors, stateLayerOpacity }, { disabled, marked, selected }) {
+	if (disabled) return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+	if (!selected) return colors.onSurface;
+	return marked ? colors.onSecondaryContainer : colors.onSecondary;
+}
+/** A segment's corners: rounded at the ends of the track, square between. */
+function cornersOf(radius, first, last) {
+	return {
+		borderBottomEndRadius: last ? radius : 0,
+		borderBottomStartRadius: first ? radius : 0,
+		borderTopEndRadius: last ? radius : 0,
+		borderTopStartRadius: first ? radius : 0
+	};
+}
+function hasLabel(children) {
+	return children !== void 0 && children !== null && children !== false && children !== "";
+}
+function iconStyleOf(color) {
+	return {
+		color,
+		size: GLYPH_SIZE
+	};
+}
+/**
+* The chosen container of a set that chooses one, which slides to the
+* segment chosen from the one chosen before it, fades in where nothing was
+* chosen, and fades out where nothing now is.
+*/
+function Indicator(t0) {
+	const $ = c(27);
+	const { color, place, selected } = t0;
+	const theme = useTheme();
+	const { motion } = theme;
+	const reduceMotion = useReducedMotion();
+	const [rest, setRest] = useState(void 0);
+	const shift = useSharedValue(0);
+	const shown = useSharedValue(0);
+	const drawnAt = useRef(void 0);
+	const drawn = useRef(false);
+	const offset = place === void 0 || rest === void 0 || Math.abs(rest.width - place.width) >= 1 ? void 0 : place.x - rest.x;
+	let t1;
+	if ($[0] !== motion.durationMedium1 || $[1] !== motion.easingEmphasized || $[2] !== offset || $[3] !== reduceMotion || $[4] !== selected || $[5] !== shift || $[6] !== shown) {
+		t1 = () => {
+			const slide = {
+				duration: motion.durationMedium1,
+				easing: Easing.bezier(...motion.easingEmphasized)
+			};
+			if (selected === void 0) {
+				if (drawnAt.current !== void 0) shown.set(reduceMotion ? 0 : withTiming(0, slide));
+				drawnAt.current = void 0;
+				return;
+			}
+			if (offset === void 0) return;
+			const from = drawnAt.current;
+			const moves = from !== void 0 && from !== selected && !reduceMotion;
+			shift.set(moves ? withTiming(offset, slide) : offset);
+			if (from === void 0) shown.set(drawn.current && !reduceMotion ? withTiming(1, slide) : 1);
+			drawnAt.current = selected;
+			drawn.current = true;
+		};
+		$[0] = motion.durationMedium1;
+		$[1] = motion.easingEmphasized;
+		$[2] = offset;
+		$[3] = reduceMotion;
+		$[4] = selected;
+		$[5] = shift;
+		$[6] = shown;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== motion || $[9] !== offset || $[10] !== reduceMotion || $[11] !== selected || $[12] !== shift || $[13] !== shown) {
+		t2 = [
+			motion,
+			offset,
+			reduceMotion,
+			selected,
+			shift,
+			shown
+		];
+		$[8] = motion;
+		$[9] = offset;
+		$[10] = reduceMotion;
+		$[11] = selected;
+		$[12] = shift;
+		$[13] = shown;
+		$[14] = t2;
+	} else t2 = $[14];
+	useLayoutEffect(t1, t2);
+	const motionStyle = useAnimatedStyle(() => {
+		"worklet";
+		return {
+			opacity: shown.get(),
+			transform: [{ translateX: shift.get() }]
+		};
+	});
+	let t3;
+	if ($[15] !== theme) {
+		t3 = stylesOf(theme);
+		$[15] = theme;
+		$[16] = t3;
+	} else t3 = $[16];
+	const t4 = t3.clip;
+	let t5;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = restThen(setRest);
+		$[17] = t5;
+	} else t5 = $[17];
+	const t6 = place?.width ?? 0;
+	let t7;
+	if ($[18] !== color || $[19] !== motionStyle || $[20] !== t6) {
+		t7 = composeStyles(styles.indicator, {
+			backgroundColor: color,
+			width: t6
+		}, motionStyle);
+		$[18] = color;
+		$[19] = motionStyle;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	let t8;
+	if ($[22] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Animated.View, {
+			onLayout: t5,
+			style: t7
+		});
+		$[22] = t7;
+		$[23] = t8;
+	} else t8 = $[23];
+	let t9;
+	if ($[24] !== t3.clip || $[25] !== t8) {
+		t9 = /* @__PURE__ */ jsx(View, {
+			style: t4,
+			children: t8
+		});
+		$[24] = t3.clip;
+		$[25] = t8;
+		$[26] = t9;
+	} else t9 = $[26];
+	return t9;
+}
+/**
+* Records a label's width off screen, for the basis. Built by a call rather
+* than written inline at the prop, which is what react-perf's
+* jsx-no-new-function-as-prop is after; the React Compiler memoises the
+* result on its inputs.
+*/
+function measureThen(setLabels, key) {
+	return (event) => {
+		const { width } = event.nativeEvent.layout;
+		setLabels((labels) => labels.get(key) === width ? labels : new Map(labels).set(key, width));
+	};
+}
+/**
+* Records where a segment was laid out, then calls the call site's own
+* `onLayout`.
+*/
+function placeThen(onPlace, key, onLayout) {
+	return (event) => {
+		const { width, x } = event.nativeEvent.layout;
+		onPlace(key, {
+			width,
+			x
+		});
+		onLayout?.(event);
+	};
+}
+function reservesGlyph({ children, icon }, showSelectedIcon) {
+	return showSelectedIcon && hasLabel(children) || icon !== void 0;
+}
+/** Records where the chosen container rests before it is moved. */
+function restThen(setRest) {
+	return (event) => {
+		const { width, x } = event.nativeEvent.layout;
+		setRest({
+			width,
+			x
+		});
+	};
+}
+function ruleOf(index) {
+	return index === 0 ? RULE_WIDTH : 0;
+}
+function samePlace(known, place) {
+	return known !== void 0 && known.width === place.width && known.x === place.x;
+}
+/**
+* A row of two to five joined segments, of which one, or with
+* `selectionMode="multiple"` several, is chosen. Pass `selectedKeys` with
+* `onSelectionChange` to hold the choice, or `defaultSelectedKeys` to let the
+* set keep its own. Give every segment an `id`, which is the key the choice
+* is reported by.
+*
+* ```tsx
+* <SegmentedButton aria-label="Label" defaultSelectedKeys={['first']}>
+*   <SegmentedButton.Segment id="first">First item</SegmentedButton.Segment>
+*   <SegmentedButton.Segment id="second">Second item</SegmentedButton.Segment>
+* </SegmentedButton>
+* ```
+*
+* Name the set with `aria-label` or `aria-labelledby`, one of which the
+* props require. Choosing one is announced as a radio group, and choosing
+* several as a toolbar of buttons that each say whether they are selected.
+*
+* `style`, `ref` and `testID` land on the track.
+*/
+function SegmentedButton(t0) {
+	const $ = c(80);
+	let children;
+	let defaultSelectedKeys;
+	let disallowEmptySelection;
+	let onSelectionChange;
+	let props;
+	let selectedKeys;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({children, defaultSelectedKeys, disallowEmptySelection, isDisabled: t1, onSelectionChange, selectedKeys, selectionMode: t2, showSelectedIcon: t3, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultSelectedKeys;
+		$[3] = disallowEmptySelection;
+		$[4] = onSelectionChange;
+		$[5] = props;
+		$[6] = selectedKeys;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else {
+		children = $[1];
+		defaultSelectedKeys = $[2];
+		disallowEmptySelection = $[3];
+		onSelectionChange = $[4];
+		props = $[5];
+		selectedKeys = $[6];
+		style = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+	}
+	const isDisabled = t1 === void 0 ? false : t1;
+	const selectionMode = t2 === void 0 ? "single" : t2;
+	const showSelectedIcon = t3 === void 0 ? true : t3;
+	const theme = useTheme();
+	const role = useTypeRole("labelLarge");
+	const single = selectionMode === "single";
+	const t4 = disallowEmptySelection ?? single;
+	let t5;
+	if ($[11] !== defaultSelectedKeys || $[12] !== isDisabled || $[13] !== onSelectionChange || $[14] !== selectedKeys || $[15] !== selectionMode || $[16] !== t4) {
+		t5 = {
+			defaultSelectedKeys,
+			disallowEmptySelection: t4,
+			isDisabled,
+			onSelectionChange,
+			selectedKeys,
+			selectionMode
+		};
+		$[11] = defaultSelectedKeys;
+		$[12] = isDisabled;
+		$[13] = onSelectionChange;
+		$[14] = selectedKeys;
+		$[15] = selectionMode;
+		$[16] = t4;
+		$[17] = t5;
+	} else t5 = $[17];
+	const state = useToggleGroupState(t5);
+	const segments = segmentsOf(children);
+	let t6;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ new Map();
+		$[18] = t6;
+	} else t6 = $[18];
+	const [labels, setLabels] = useState(t6);
+	let t7;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ new Map();
+		$[19] = t7;
+	} else t7 = $[19];
+	const [places, setPlaces] = useState(t7);
+	let t8;
+	if ($[20] !== state.selectedKeys) {
+		t8 = [...state.selectedKeys].at(0);
+		$[20] = state.selectedKeys;
+		$[21] = t8;
+	} else t8 = $[21];
+	const chosen = t8;
+	const [held, setHeld] = useState(chosen);
+	if (chosen !== void 0 && chosen !== held) setHeld(chosen);
+	const [opening, setOpening] = useState(chosen);
+	if (opening !== void 0 && opening !== chosen) setOpening(void 0);
+	const basis = basisOf(segments, labels, showSelectedIcon, theme);
+	let t9;
+	if ($[22] !== setPlaces) {
+		t9 = (key, place) => {
+			setPlaces((current) => samePlace(current.get(key), place) ? current : new Map(current).set(key, place));
+		};
+		$[22] = setPlaces;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== basis || $[25] !== opening || $[26] !== places || $[27] !== segments.length || $[28] !== selectionMode || $[29] !== showSelectedIcon || $[30] !== state || $[31] !== t9) {
+		t10 = {
+			basis,
+			count: segments.length,
+			onPlace: t9,
+			opening,
+			places,
+			selectionMode,
+			showSelectedIcon,
+			state
+		};
+		$[24] = basis;
+		$[25] = opening;
+		$[26] = places;
+		$[27] = segments.length;
+		$[28] = selectionMode;
+		$[29] = showSelectedIcon;
+		$[30] = state;
+		$[31] = t9;
+		$[32] = t10;
+	} else t10 = $[32];
+	const context = t10;
+	let T0;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	if ($[33] !== chosen || $[34] !== held || $[35] !== isDisabled || $[36] !== places || $[37] !== props || $[38] !== segments || $[39] !== showSelectedIcon || $[40] !== single || $[41] !== style || $[42] !== theme) {
+		let t16;
+		if ($[49] !== chosen || $[50] !== held) {
+			t16 = (t17) => {
+				const { props: own } = t17;
+				return own.id === (chosen ?? held);
+			};
+			$[49] = chosen;
+			$[50] = held;
+			$[51] = t16;
+		} else t16 = $[51];
+		const segment = segments.find(t16);
+		T0 = View;
+		if ($[52] !== theme) {
+			t11 = reachOf(theme);
+			$[52] = theme;
+			$[53] = t11;
+		} else t11 = $[53];
+		t12 = single ? "radiogroup" : "toolbar";
+		t13 = props;
+		if ($[54] !== style || $[55] !== theme) {
+			t14 = composeStyles(stylesOf(theme).track, style);
+			$[54] = style;
+			$[55] = theme;
+			$[56] = t14;
+		} else t14 = $[56];
+		t15 = single ? /* @__PURE__ */ jsx(Indicator, {
+			color: containerOf(theme, isDisabled || segment?.props.isDisabled === true, showSelectedIcon && hasLabel(segment?.props.children)),
+			place: segment === void 0 ? void 0 : places.get(segment.props.id),
+			selected: segment === void 0 ? void 0 : chosen
+		}) : null;
+		$[33] = chosen;
+		$[34] = held;
+		$[35] = isDisabled;
+		$[36] = places;
+		$[37] = props;
+		$[38] = segments;
+		$[39] = showSelectedIcon;
+		$[40] = single;
+		$[41] = style;
+		$[42] = theme;
+		$[43] = T0;
+		$[44] = t11;
+		$[45] = t12;
+		$[46] = t13;
+		$[47] = t14;
+		$[48] = t15;
+	} else {
+		T0 = $[43];
+		t11 = $[44];
+		t12 = $[45];
+		t13 = $[46];
+		t14 = $[47];
+		t15 = $[48];
+	}
+	let t16;
+	if ($[57] !== segments) {
+		t16 = segments.map(_temp);
+		$[57] = segments;
+		$[58] = t16;
+	} else t16 = $[58];
+	let t17;
+	if ($[59] !== context || $[60] !== t16) {
+		t17 = /* @__PURE__ */ jsx(GroupContext, {
+			value: context,
+			children: t16
+		});
+		$[59] = context;
+		$[60] = t16;
+		$[61] = t17;
+	} else t17 = $[61];
+	let t18;
+	if ($[62] !== role || $[63] !== segments || $[64] !== setLabels) {
+		let t19;
+		if ($[66] !== role || $[67] !== setLabels) {
+			t19 = (t20) => {
+				const { props: own_0 } = t20;
+				return hasLabel(own_0.children) ? /* @__PURE__ */ jsx(Text, {
+					numberOfLines: 1,
+					onLayout: measureThen(setLabels, own_0.id),
+					style: role,
+					children: own_0.children
+				}, own_0.id) : null;
+			};
+			$[66] = role;
+			$[67] = setLabels;
+			$[68] = t19;
+		} else t19 = $[68];
+		t18 = segments.map(t19);
+		$[62] = role;
+		$[63] = segments;
+		$[64] = setLabels;
+		$[65] = t18;
+	} else t18 = $[65];
+	let t19;
+	if ($[69] !== t18) {
+		t19 = /* @__PURE__ */ jsx(View, {
+			"aria-hidden": true,
+			style: styles.measurer,
+			children: t18
+		});
+		$[69] = t18;
+		$[70] = t19;
+	} else t19 = $[70];
+	let t20;
+	if ($[71] !== T0 || $[72] !== t11 || $[73] !== t12 || $[74] !== t13 || $[75] !== t14 || $[76] !== t15 || $[77] !== t17 || $[78] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(T0, {
+			hitSlop: t11,
+			role: t12,
+			...t13,
+			style: t14,
+			children: [
+				t15,
+				t17,
+				t19
+			]
+		});
+		$[71] = T0;
+		$[72] = t11;
+		$[73] = t12;
+		$[74] = t13;
+		$[75] = t14;
+		$[76] = t15;
+		$[77] = t17;
+		$[78] = t19;
+		$[79] = t20;
+	} else t20 = $[79];
+	return t20;
+}
+/**
+* One segment. Its `id` is the key the choice reports it by, and its label is
+* what names it. A chosen segment draws a check before its label; one not
+* chosen draws its `icon`, if it has one. Renders nothing outside a
+* `SegmentedButton`.
+*
+* `style`, `ref` and `testID` land on the segment's `Pressable`.
+*/
+function _temp(each, at) {
+	return /* @__PURE__ */ jsx(IndexContext, {
+		value: at,
+		children: each
+	}, each.props.id);
+}
+function SegmentedButtonSegment(t0) {
+	const $ = c(55);
+	let children;
+	let icon;
+	let id;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onLayout;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let ownHitSlop;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, disableRipple: t1, hitSlop: ownHitSlop, icon, id, isDisabled: t2, onBlur, onFocus, onHoverIn, onHoverOut, onLayout, onPress, onPressIn, onPressOut, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = icon;
+		$[3] = id;
+		$[4] = onBlur;
+		$[5] = onFocus;
+		$[6] = onHoverIn;
+		$[7] = onHoverOut;
+		$[8] = onLayout;
+		$[9] = onPress;
+		$[10] = onPressIn;
+		$[11] = onPressOut;
+		$[12] = ownHitSlop;
+		$[13] = props;
+		$[14] = style;
+		$[15] = t1;
+		$[16] = t2;
+	} else {
+		children = $[1];
+		icon = $[2];
+		id = $[3];
+		onBlur = $[4];
+		onFocus = $[5];
+		onHoverIn = $[6];
+		onHoverOut = $[7];
+		onLayout = $[8];
+		onPress = $[9];
+		onPressIn = $[10];
+		onPressOut = $[11];
+		ownHitSlop = $[12];
+		props = $[13];
+		style = $[14];
+		t1 = $[15];
+		t2 = $[16];
+	}
+	const disableRipple = t1 === void 0 ? false : t1;
+	const ownDisabled = t2 === void 0 ? false : t2;
+	const theme = useTheme();
+	const group = use(GroupContext);
+	const index = use(IndexContext);
+	const role = useTypeRole("labelLarge");
+	const state = group?.state;
+	const several = group?.selectionMode === "multiple";
+	const showSelectedIcon = group?.showSelectedIcon ?? true;
+	const selected = state?.selectedKeys.has(id) ?? false;
+	const disabled = ownDisabled || state?.isDisabled === true;
+	const labelled = hasLabel(children);
+	const marked = showSelectedIcon && labelled;
+	let t3;
+	if ($[17] !== children || $[18] !== icon || $[19] !== id || $[20] !== showSelectedIcon) {
+		t3 = reservesGlyph({
+			children,
+			icon,
+			id
+		}, showSelectedIcon);
+		$[17] = children;
+		$[18] = icon;
+		$[19] = id;
+		$[20] = showSelectedIcon;
+		$[21] = t3;
+	} else t3 = $[21];
+	const reserves = t3;
+	const glyph = selected && marked ? CHECK : icon ?? null;
+	const drawn = glyph !== null;
+	const first = index === 0;
+	const last = index === (group?.count ?? 0) - 1;
+	const { radii, spacing } = theme;
+	const content = contentOf(theme, {
+		disabled,
+		marked,
+		selected
+	});
+	const corners = cornersOf(radii.pill, first, last);
+	const own = stylesOf(theme);
+	const give = spacing.md - spacing.sm;
+	const reserve = GLYPH_SIZE + spacing.sm;
+	const leading = reserves ? drawn ? give + (labelled ? reserve : GLYPH_SIZE) : give + reserve / 2 : give;
+	const leadingFloor = drawn ? labelled ? reserve : GLYPH_SIZE : 0;
+	const trailing = reserves && !drawn ? give + reserve / 2 : give;
+	let t4;
+	if ($[22] !== group?.places || $[23] !== id) {
+		t4 = group?.places.get(id)?.width;
+		$[22] = group?.places;
+		$[23] = id;
+		$[24] = t4;
+	} else t4 = $[24];
+	const width = t4;
+	const room = width === void 0 ? void 0 : width - ruleOf(index) - RULE_WIDTH - spacing.sm * 2 - (drawn && labelled ? reserve : 0);
+	const motion = useSegmentMotion({
+		content,
+		drawn,
+		fades: several,
+		filled: several ? selected : id === group?.opening,
+		labelled,
+		leading,
+		leadingFloor,
+		room,
+		trailing
+	});
+	const feedback = usePressFeedback({
+		color: content,
+		corners,
+		disabled,
+		disableRipple,
+		onBlur,
+		onFocus,
+		onHoverIn,
+		onHoverOut,
+		onPressIn,
+		onPressOut
+	});
+	if (group === null) return null;
+	const t5 = feedback.handlers;
+	let t6;
+	if ($[25] !== ownHitSlop || $[26] !== theme) {
+		t6 = ownHitSlop ?? reachOf(theme);
+		$[25] = ownHitSlop;
+		$[26] = theme;
+		$[27] = t6;
+	} else t6 = $[27];
+	let t7;
+	if ($[28] !== group.onPlace || $[29] !== id || $[30] !== onLayout) {
+		t7 = placeThen(group.onPlace, id, onLayout);
+		$[28] = group.onPlace;
+		$[29] = id;
+		$[30] = onLayout;
+		$[31] = t7;
+	} else t7 = $[31];
+	let t8;
+	if ($[32] !== group.state || $[33] !== id || $[34] !== onPress) {
+		t8 = toggleThen(group.state, id, onPress);
+		$[32] = group.state;
+		$[33] = id;
+		$[34] = onPress;
+		$[35] = t8;
+	} else t8 = $[35];
+	const t9 = composeStyles(own.segment, first ? own.first : void 0, corners, disabled ? { borderColor: withOpacity(theme.colors.onSurface, theme.stateLayerOpacity.disabledContainer) } : void 0, group.basis === void 0 ? void 0 : {
+		flexGrow: 0,
+		width: group.basis
+	}, feedback.ring, style);
+	const t10 = feedback.layer;
+	const t11 = Animated;
+	let t12;
+	if ($[36] !== motion.leading) {
+		t12 = composeStyles(styles.spacer, motion.leading);
+		$[36] = motion.leading;
+		$[37] = t12;
+	} else t12 = $[37];
+	const t13 = reserves ? /* @__PURE__ */ jsx(Animated.View, {
+		style: composeStyles(styles.glyphSlot, motion.slot),
+		children: /* @__PURE__ */ jsx(IconStyleContext, {
+			value: iconStyleOf(content),
+			children: /* @__PURE__ */ jsx(View, {
+				style: styles.glyph,
+				children: glyph
+			})
+		})
+	}) : null;
+	let t14;
+	if ($[38] !== motion.gap || $[39] !== reserves) {
+		t14 = reserves ? /* @__PURE__ */ jsx(Animated.View, { style: motion.gap }) : null;
+		$[38] = motion.gap;
+		$[39] = reserves;
+		$[40] = t14;
+	} else t14 = $[40];
+	let t15;
+	if ($[41] !== t11.View || $[42] !== t12 || $[43] !== t13 || $[44] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(t11.View, {
+			style: t12,
+			children: [t13, t14]
+		});
+		$[41] = t11.View;
+		$[42] = t12;
+		$[43] = t13;
+		$[44] = t14;
+		$[45] = t15;
+	} else t15 = $[45];
+	let t16;
+	if ($[46] !== children || $[47] !== labelled || $[48] !== motion.label || $[49] !== role) {
+		t16 = labelled ? /* @__PURE__ */ jsx(Animated.Text, {
+			numberOfLines: 1,
+			style: composeStyles(role, styles.label, motion.label),
+			children
+		}) : null;
+		$[46] = children;
+		$[47] = labelled;
+		$[48] = motion.label;
+		$[49] = role;
+		$[50] = t16;
+	} else t16 = $[50];
+	let t17;
+	if ($[51] !== motion.trailing) {
+		t17 = composeStyles(styles.spacer, motion.trailing);
+		$[51] = motion.trailing;
+		$[52] = t17;
+	} else t17 = $[52];
+	let t18;
+	if ($[53] !== t17) {
+		t18 = /* @__PURE__ */ jsx(Animated.View, { style: t17 });
+		$[53] = t17;
+		$[54] = t18;
+	} else t18 = $[54];
+	return /* @__PURE__ */ jsxs(Pressable, {
+		role: several ? "button" : "radio",
+		...several ? toggleState(selected) : { "aria-checked": selected },
+		...props,
+		...t5,
+		disabled,
+		hitSlop: t6,
+		onLayout: t7,
+		onPress: t8,
+		style: t9,
+		children: [
+			/* @__PURE__ */ jsx(Animated.View, { style: composeStyles(styles.ownIndicator, corners, { backgroundColor: containerOf(theme, disabled, marked) }, motion.fill) }),
+			t10,
+			t15,
+			t16,
+			t18
+		]
+	});
+}
+/**
+* The segments among a set's children, with any fragment between them opened,
+* so a set can take its segments as one fragment.
+*/
+function segmentsOf(children) {
+	return Children.toArray(children).flatMap((child) => {
+		if (!isValidElement(child)) return [];
+		if (child.type === Fragment) return segmentsOf(child.props.children);
+		return isValidElement(child) ? [child] : [];
+	});
+}
+/**
+* A press on a segment: the call site's own `onPress`, then the choice, which
+* chooses the segment, or clears it if it was chosen and the set allows that.
+*/
+function toggleThen(state, key, onPress) {
+	return (event) => {
+		onPress?.(event);
+		state.toggleKey(key);
+	};
+}
+/**
+* What a segment eases: the room either side of its label and the glyph slot
+* between them over `durationShort2`, the label's colour and the most it
+* takes with them, and its own chosen container where it `fades`, in a set
+* that chooses several. All of it is there at once under reduced motion, and
+* the container is in a set that chooses one, where it only stands in for the
+* track's until the choice first moves.
+*/
+function useSegmentMotion(t0) {
+	const $ = c(7);
+	const { content, drawn, fades, filled, labelled, leading, leadingFloor, room, trailing } = t0;
+	const { motion, spacing } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const timing = {
+		duration: motion.durationShort2,
+		easing: Easing.bezier(...motion.easingStandard)
+	};
+	const gap = drawn && labelled ? spacing.sm : 0;
+	const slot = drawn ? GLYPH_SIZE : 0;
+	const opacity = filled ? 1 : 0;
+	const t1 = useAnimatedStyle(() => {
+		"worklet";
+		return { opacity: reduceMotion || !fades ? opacity : withTiming(opacity, timing) };
+	});
+	const t2 = useAnimatedStyle(() => {
+		"worklet";
+		return { width: reduceMotion ? gap : withTiming(gap, timing) };
+	});
+	const t3 = useAnimatedStyle(() => {
+		"worklet";
+		return {
+			color: reduceMotion ? content : withTiming(content, timing),
+			...room === void 0 ? void 0 : { maxWidth: reduceMotion ? room : withTiming(room, timing) }
+		};
+	});
+	const t4 = useAnimatedStyle(() => {
+		"worklet";
+		return {
+			minWidth: reduceMotion ? leadingFloor : withTiming(leadingFloor, timing),
+			width: reduceMotion ? leading : withTiming(leading, timing)
+		};
+	});
+	const t5 = useAnimatedStyle(() => {
+		"worklet";
+		return { width: reduceMotion ? slot : withTiming(slot, timing) };
+	});
+	const t6 = useAnimatedStyle(() => {
+		"worklet";
+		return { width: reduceMotion ? trailing : withTiming(trailing, timing) };
+	});
+	let t7;
+	if ($[0] !== t1 || $[1] !== t2 || $[2] !== t3 || $[3] !== t4 || $[4] !== t5 || $[5] !== t6) {
+		t7 = {
+			fill: t1,
+			gap: t2,
+			label: t3,
+			leading: t4,
+			slot: t5,
+			trailing: t6
+		};
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t4;
+		$[4] = t5;
+		$[5] = t6;
+		$[6] = t7;
+	} else t7 = $[6];
+	return t7;
+}
+SegmentedButton.Segment = SegmentedButtonSegment;
+//#endregion
+export { SegmentedButton, SegmentedButtonSegment };
+
+//# sourceMappingURL=index.js.map