@kanso-labs/react-native-kanso-ui 0.8.0 → 0.10.0

package/dist/components/button/index.js

@@ -3,12 +3,14 @@ import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
-import { AnimatedPressable, HEIGHTS, OUTLINE_WIDTHS, PRESSED_CORNERS, buttonStyles, toggleState, useButtonAction, useCorner, useSlotTrigger } from "../../button/index.js";
+import { AnimatedPressable, HEIGHTS, OUTLINE_WIDTHS, PRESSED_CORNERS, buttonStyles, pressThen, toggleState, useButtonAction, useCorner, useSlotTrigger } from "../../button/index.js";
+import { ButtonGroupItemContext, groupCornersOf, groupPressHandlers, groupSelectionOf, groupStyles, groupWidthThen, useGroupShift } from "../../button/group.js";
 import { palettesOf } from "../../button/palettes.js";
 import { BUSY, CONCEALED, PendingContent, PendingRing, pendingStyles, usePending } from "../../button/pending.js";
 import { c } from "react/compiler-runtime";
 import { StyleSheet, Text, useWindowDimensions } from "react-native";
-import Animated from "react-native-reanimated";
+import Animated, { useSharedValue } from "react-native-reanimated";
+import { use } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button/index.tsx
 const DISABLED = {
@@ -161,12 +163,14 @@ const outlinedSizesOf = themedStyles((theme) => {
 * `style`, `ref` and `testID` land on the `Pressable`.
 */
 function Button(t0) {
-	const $ = c(89);
+	const $ = c(100);
+	let accessibilityHint;
 	let children;
 	let defaultSelected;
 	let delayLongPress;
 	let href;
 	let icon;
+	let id;
 	let isSelected;
 	let onBlur;
 	let onChange;
@@ -179,6 +183,7 @@ function Button(t0) {
 	let onPressIn;
 	let onPressOut;
 	let ownHitSlop;
+	let ownSize;
 	let pendingLabel;
 	let props;
 	let ref;
@@ -189,146 +194,167 @@ function Button(t0) {
 	let t3;
 	let t4;
 	let t5;
-	let t6;
 	let type;
 	if ($[0] !== t0) {
-		({children, defaultSelected, delayLongPress, disableRipple: t1, hitSlop: ownHitSlop, href, icon, isDisabled: t2, isPending: t3, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, ref, shape: t4, size: t5, slot, style, type, variant: t6, ...props} = t0);
+		({accessibilityHint, children, defaultSelected, delayLongPress, disableRipple: t1, hitSlop: ownHitSlop, href, icon, id, isDisabled: t2, isPending: t3, isSelected, onBlur, onChange, onFocus, onHoverIn, onHoverOut, onLayout, onLongPress, onPress, onPressIn, onPressOut, pendingLabel, ref, shape: t4, size: ownSize, slot, style, type, variant: t5, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = defaultSelected;
-		$[3] = delayLongPress;
-		$[4] = href;
-		$[5] = icon;
-		$[6] = isSelected;
-		$[7] = onBlur;
-		$[8] = onChange;
-		$[9] = onFocus;
-		$[10] = onHoverIn;
-		$[11] = onHoverOut;
-		$[12] = onLayout;
-		$[13] = onLongPress;
-		$[14] = onPress;
-		$[15] = onPressIn;
-		$[16] = onPressOut;
-		$[17] = ownHitSlop;
-		$[18] = pendingLabel;
-		$[19] = props;
-		$[20] = ref;
-		$[21] = slot;
-		$[22] = style;
-		$[23] = t1;
-		$[24] = t2;
-		$[25] = t3;
-		$[26] = t4;
-		$[27] = t5;
-		$[28] = t6;
-		$[29] = type;
+		$[1] = accessibilityHint;
+		$[2] = children;
+		$[3] = defaultSelected;
+		$[4] = delayLongPress;
+		$[5] = href;
+		$[6] = icon;
+		$[7] = id;
+		$[8] = isSelected;
+		$[9] = onBlur;
+		$[10] = onChange;
+		$[11] = onFocus;
+		$[12] = onHoverIn;
+		$[13] = onHoverOut;
+		$[14] = onLayout;
+		$[15] = onLongPress;
+		$[16] = onPress;
+		$[17] = onPressIn;
+		$[18] = onPressOut;
+		$[19] = ownHitSlop;
+		$[20] = ownSize;
+		$[21] = pendingLabel;
+		$[22] = props;
+		$[23] = ref;
+		$[24] = slot;
+		$[25] = style;
+		$[26] = t1;
+		$[27] = t2;
+		$[28] = t3;
+		$[29] = t4;
+		$[30] = t5;
+		$[31] = type;
 	} else {
-		children = $[1];
-		defaultSelected = $[2];
-		delayLongPress = $[3];
-		href = $[4];
-		icon = $[5];
-		isSelected = $[6];
-		onBlur = $[7];
-		onChange = $[8];
-		onFocus = $[9];
-		onHoverIn = $[10];
-		onHoverOut = $[11];
-		onLayout = $[12];
-		onLongPress = $[13];
-		onPress = $[14];
-		onPressIn = $[15];
-		onPressOut = $[16];
-		ownHitSlop = $[17];
-		pendingLabel = $[18];
-		props = $[19];
-		ref = $[20];
-		slot = $[21];
-		style = $[22];
-		t1 = $[23];
-		t2 = $[24];
-		t3 = $[25];
-		t4 = $[26];
-		t5 = $[27];
-		t6 = $[28];
-		type = $[29];
+		accessibilityHint = $[1];
+		children = $[2];
+		defaultSelected = $[3];
+		delayLongPress = $[4];
+		href = $[5];
+		icon = $[6];
+		id = $[7];
+		isSelected = $[8];
+		onBlur = $[9];
+		onChange = $[10];
+		onFocus = $[11];
+		onHoverIn = $[12];
+		onHoverOut = $[13];
+		onLayout = $[14];
+		onLongPress = $[15];
+		onPress = $[16];
+		onPressIn = $[17];
+		onPressOut = $[18];
+		ownHitSlop = $[19];
+		ownSize = $[20];
+		pendingLabel = $[21];
+		props = $[22];
+		ref = $[23];
+		slot = $[24];
+		style = $[25];
+		t1 = $[26];
+		t2 = $[27];
+		t3 = $[28];
+		t4 = $[29];
+		t5 = $[30];
+		type = $[31];
 	}
 	const disableRipple = t1 === void 0 ? false : t1;
-	const isDisabled = t2 === void 0 ? false : t2;
+	const ownDisabled = t2 === void 0 ? false : t2;
 	const isPending = t3 === void 0 ? false : t3;
 	const shape = t4 === void 0 ? "round" : t4;
-	const size = t5 === void 0 ? "md" : t5;
-	const variant = t6 === void 0 ? "filled" : t6;
+	const variant = t5 === void 0 ? "filled" : t5;
 	const theme = useTheme();
+	const group = use(ButtonGroupItemContext);
+	const size = ownSize ?? group?.size ?? "md";
+	const isDisabled = ownDisabled || group?.isDisabled === true;
+	const membership = groupSelectionOf(group, id);
 	const role = useTypeRole(ROLES[size]);
 	const { fontScale } = useWindowDimensions();
 	const pending = href === void 0 && isPending;
 	const ringLabel = usePending(pending, pendingLabel);
-	const isToggle = variant !== "text" && (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0);
-	const t7 = slot ?? "default";
-	let t8;
-	if ($[30] !== defaultSelected || $[31] !== href || $[32] !== isSelected || $[33] !== isToggle || $[34] !== onChange || $[35] !== onPress || $[36] !== t7 || $[37] !== type) {
-		t8 = {
+	const isToggle = membership === void 0 && variant !== "text" && (defaultSelected !== void 0 || isSelected !== void 0 || onChange !== void 0);
+	const t6 = slot ?? "default";
+	let t7;
+	if ($[32] !== defaultSelected || $[33] !== href || $[34] !== isSelected || $[35] !== isToggle || $[36] !== onChange || $[37] !== onPress || $[38] !== t6 || $[39] !== type) {
+		t7 = {
 			defaultSelected,
 			href,
 			isSelected,
 			isToggle,
 			onChange,
 			onPress,
-			slot: t7,
+			slot: t6,
 			type
 		};
-		$[30] = defaultSelected;
-		$[31] = href;
-		$[32] = isSelected;
-		$[33] = isToggle;
-		$[34] = onChange;
-		$[35] = onPress;
-		$[36] = t7;
-		$[37] = type;
-		$[38] = t8;
-	} else t8 = $[38];
-	const action = useButtonAction(t8);
-	let t9;
-	if ($[39] !== delayLongPress || $[40] !== href || $[41] !== onHoverIn || $[42] !== onHoverOut || $[43] !== onLongPress || $[44] !== ref || $[45] !== slot) {
-		t9 = {
+		$[32] = defaultSelected;
+		$[33] = href;
+		$[34] = isSelected;
+		$[35] = isToggle;
+		$[36] = onChange;
+		$[37] = onPress;
+		$[38] = t6;
+		$[39] = type;
+		$[40] = t7;
+	} else t7 = $[40];
+	const action = useButtonAction(t7);
+	let t8;
+	if ($[41] !== accessibilityHint || $[42] !== delayLongPress || $[43] !== href || $[44] !== onHoverIn || $[45] !== onHoverOut || $[46] !== onLongPress || $[47] !== onPressIn || $[48] !== onPressOut || $[49] !== ref || $[50] !== slot) {
+		t8 = {
+			accessibilityHint,
 			delayLongPress,
 			href,
 			onHoverIn,
 			onHoverOut,
 			onLongPress,
+			onPressIn,
+			onPressOut,
 			ref,
 			slot
 		};
-		$[39] = delayLongPress;
-		$[40] = href;
-		$[41] = onHoverIn;
-		$[42] = onHoverOut;
-		$[43] = onLongPress;
-		$[44] = ref;
-		$[45] = slot;
-		$[46] = t9;
-	} else t9 = $[46];
-	const t10 = useSlotTrigger(t9);
+		$[41] = accessibilityHint;
+		$[42] = delayLongPress;
+		$[43] = href;
+		$[44] = onHoverIn;
+		$[45] = onHoverOut;
+		$[46] = onLongPress;
+		$[47] = onPressIn;
+		$[48] = onPressOut;
+		$[49] = ref;
+		$[50] = slot;
+		$[51] = t8;
+	} else t8 = $[51];
+	const t9 = useSlotTrigger(t8);
 	let hoverIn;
 	let hoverOut;
 	let longPress;
+	let pressIn;
+	let pressOut;
 	let triggerProps;
-	if ($[47] !== t10) {
-		({onHoverIn: hoverIn, onHoverOut: hoverOut, onLongPress: longPress, ...triggerProps} = t10);
-		$[47] = t10;
-		$[48] = hoverIn;
-		$[49] = hoverOut;
-		$[50] = longPress;
-		$[51] = triggerProps;
+	if ($[52] !== t9) {
+		({onHoverIn: hoverIn, onHoverOut: hoverOut, onLongPress: longPress, onPressIn: pressIn, onPressOut: pressOut, ...triggerProps} = t9);
+		$[52] = t9;
+		$[53] = hoverIn;
+		$[54] = hoverOut;
+		$[55] = longPress;
+		$[56] = pressIn;
+		$[57] = pressOut;
+		$[58] = triggerProps;
 	} else {
-		hoverIn = $[48];
-		hoverOut = $[49];
-		longPress = $[50];
-		triggerProps = $[51];
+		hoverIn = $[53];
+		hoverOut = $[54];
+		longPress = $[55];
+		pressIn = $[56];
+		pressOut = $[57];
+		triggerProps = $[58];
 	}
-	const colors = palettesOf(theme)[isDisabled ? DISABLED[variant] : variant !== "text" && isToggle ? TOGGLE_PALETTES[variant][action.selected ? "selected" : "unselected"] : variant];
+	const toggles = variant !== "text" && (isToggle || membership !== void 0);
+	const selected = toggles && (membership?.selected ?? action.selected);
+	const colors = palettesOf(theme)[isDisabled ? DISABLED[variant] : variant !== "text" && toggles ? TOGGLE_PALETTES[variant][selected ? "selected" : "unselected"] : variant];
+	const width = useSharedValue(0);
 	const feedback = usePressFeedback({
 		color: colors.content,
 		disabled: isDisabled,
@@ -337,121 +363,134 @@ function Button(t0) {
 		onFocus,
 		onHoverIn: hoverIn,
 		onHoverOut: hoverOut,
-		onPressIn,
-		onPressOut,
+		...groupPressHandlers(group, width, pressIn, pressOut),
+		held: group?.held,
 		pending
 	});
 	const { radii } = theme;
-	const resting = shape === "square" !== action.selected ? radii[SQUARE_CORNERS[size]] : radii.pill;
-	const shaped = useCorner(feedback.pressed ? radii[PRESSED_CORNERS[size]] : resting, onLayout);
+	const resting = shape === "square" !== selected ? radii[SQUARE_CORNERS[size]] : radii.pill;
+	const shaped = useCorner(groupCornersOf(group, feedback, membership?.selected ?? action.selected) ?? (feedback.pressed ? radii[PRESSED_CORNERS[size]] : resting), groupWidthThen(group, width, onLayout));
+	const border = variant === "outlined" ? OUTLINE_WIDTHS[size] : 0;
+	let t10;
+	if ($[59] !== theme) {
+		t10 = inlinePaddings(theme);
+		$[59] = theme;
+		$[60] = t10;
+	} else t10 = $[60];
+	const shift = useGroupShift(group, t10[size] - border, "padding");
 	const T0 = AnimatedPressable;
 	const t11 = href === void 0 ? "button" : "link";
 	let t12;
-	if ($[52] !== action.selected || $[53] !== isToggle) {
+	if ($[61] !== action || $[62] !== isToggle) {
 		t12 = isToggle ? toggleState(action.selected) : void 0;
-		$[52] = action.selected;
-		$[53] = isToggle;
-		$[54] = t12;
-	} else t12 = $[54];
-	const t13 = pending ? BUSY : void 0;
-	const t14 = feedback.handlers;
-	let t15;
-	if ($[55] !== ownHitSlop || $[56] !== size || $[57] !== theme.sizing) {
-		t15 = ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]]);
-		$[55] = ownHitSlop;
-		$[56] = size;
-		$[57] = theme.sizing;
-		$[58] = t15;
-	} else t15 = $[58];
-	const t16 = shaped.onLayout;
-	const t17 = pending ? void 0 : longPress;
-	const t18 = pending ? void 0 : action.onPress;
-	const t19 = composeStyles(styles.base, sizesOf(theme)[size], variant === "outlined" ? outlinedSizesOf(theme)[size] : void 0, colors.container, shadowOf(variant, feedback, isDisabled, theme), shaped.corner, feedback.ring, style);
-	let t20;
-	if ($[59] !== shaped.corner) {
-		t20 = composeStyles(buttonStyles.clip, shaped.corner);
-		$[59] = shaped.corner;
-		$[60] = t20;
-	} else t20 = $[60];
+		$[61] = action;
+		$[62] = isToggle;
+		$[63] = t12;
+	} else t12 = $[63];
+	const t13 = membership?.accessibility;
+	const t14 = pending ? BUSY : void 0;
+	const t15 = feedback.handlers;
+	let t16;
+	if ($[64] !== ownHitSlop || $[65] !== size || $[66] !== theme.sizing) {
+		t16 = ownHitSlop ?? hitSlop(theme.sizing[HEIGHTS[size]]);
+		$[64] = ownHitSlop;
+		$[65] = size;
+		$[66] = theme.sizing;
+		$[67] = t16;
+	} else t16 = $[67];
+	const t17 = shaped.onLayout;
+	const t18 = pending ? void 0 : longPress;
+	const t19 = pending ? void 0 : membership === void 0 ? action.onPress : pressThen(action.onPress, membership.toggle);
+	const t20 = composeStyles(styles.base, sizesOf(theme)[size], variant === "outlined" ? outlinedSizesOf(theme)[size] : void 0, group?.style, colors.container, shadowOf(variant, feedback, isDisabled, theme), shaped.corner, shift, group?.keepsTarget === true ? groupStyles.target : void 0, feedback.ring, style);
 	let t21;
-	if ($[61] !== feedback.layer || $[62] !== t20) {
-		t21 = /* @__PURE__ */ jsx(Animated.View, {
-			style: t20,
+	if ($[68] !== shaped.corner) {
+		t21 = composeStyles(buttonStyles.clip, shaped.corner);
+		$[68] = shaped.corner;
+		$[69] = t21;
+	} else t21 = $[69];
+	let t22;
+	if ($[70] !== feedback.layer || $[71] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Animated.View, {
+			style: t21,
 			children: feedback.layer
 		});
-		$[61] = feedback.layer;
-		$[62] = t20;
-		$[63] = t21;
-	} else t21 = $[63];
-	const t22 = icon === void 0 ? null : /* @__PURE__ */ jsx(PendingContent, {
+		$[70] = feedback.layer;
+		$[71] = t21;
+		$[72] = t22;
+	} else t22 = $[72];
+	const t23 = icon === void 0 ? null : /* @__PURE__ */ jsx(PendingContent, {
 		isPending: pending,
 		children: /* @__PURE__ */ jsx(IconStyleContext, {
 			value: iconStyleOf(colors.content, size),
 			children: icon
 		})
 	});
-	const t23 = children === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+	const t24 = children === void 0 ? null : /* @__PURE__ */ jsx(Text, {
 		...pending ? CONCEALED : void 0,
 		style: composeStyles(role, styles.label, colors.label, pending ? pendingStyles.hidden : void 0),
 		children
 	});
-	let t24;
-	if ($[64] !== colors || $[65] !== fontScale || $[66] !== pending || $[67] !== ringLabel || $[68] !== size || $[69] !== theme.typography) {
-		t24 = pending ? /* @__PURE__ */ jsx(PendingRing, {
+	let t25;
+	if ($[73] !== colors || $[74] !== fontScale || $[75] !== pending || $[76] !== ringLabel || $[77] !== size || $[78] !== theme.typography) {
+		t25 = pending ? /* @__PURE__ */ jsx(PendingRing, {
 			color: colors.content,
 			diameter: theme.typography[`${ROLES[size]}Size`] * fontScale,
 			label: ringLabel
 		}) : null;
-		$[64] = colors;
-		$[65] = fontScale;
-		$[66] = pending;
-		$[67] = ringLabel;
-		$[68] = size;
-		$[69] = theme.typography;
-		$[70] = t24;
-	} else t24 = $[70];
-	let t25;
-	if ($[71] !== T0 || $[72] !== feedback.handlers || $[73] !== isDisabled || $[74] !== props || $[75] !== shaped.onLayout || $[76] !== t11 || $[77] !== t12 || $[78] !== t13 || $[79] !== t15 || $[80] !== t17 || $[81] !== t18 || $[82] !== t19 || $[83] !== t21 || $[84] !== t22 || $[85] !== t23 || $[86] !== t24 || $[87] !== triggerProps) {
-		t25 = /* @__PURE__ */ jsxs(T0, {
+		$[73] = colors;
+		$[74] = fontScale;
+		$[75] = pending;
+		$[76] = ringLabel;
+		$[77] = size;
+		$[78] = theme.typography;
+		$[79] = t25;
+	} else t25 = $[79];
+	let t26;
+	if ($[80] !== T0 || $[81] !== feedback.handlers || $[82] !== id || $[83] !== isDisabled || $[84] !== props || $[85] !== shaped.onLayout || $[86] !== t11 || $[87] !== t12 || $[88] !== t13 || $[89] !== t14 || $[90] !== t16 || $[91] !== t18 || $[92] !== t19 || $[93] !== t20 || $[94] !== t22 || $[95] !== t23 || $[96] !== t24 || $[97] !== t25 || $[98] !== triggerProps) {
+		t26 = /* @__PURE__ */ jsxs(T0, {
+			id,
 			role: t11,
 			...t12,
 			...t13,
+			...t14,
 			...props,
 			...triggerProps,
-			...t14,
+			...t15,
 			disabled: isDisabled,
-			hitSlop: t15,
-			onLayout: t16,
-			onLongPress: t17,
-			onPress: t18,
-			style: t19,
+			hitSlop: t16,
+			onLayout: t17,
+			onLongPress: t18,
+			onPress: t19,
+			style: t20,
 			children: [
-				t21,
 				t22,
 				t23,
-				t24
+				t24,
+				t25
 			]
 		});
-		$[71] = T0;
-		$[72] = feedback.handlers;
-		$[73] = isDisabled;
-		$[74] = props;
-		$[75] = shaped.onLayout;
-		$[76] = t11;
-		$[77] = t12;
-		$[78] = t13;
-		$[79] = t15;
-		$[80] = t17;
-		$[81] = t18;
-		$[82] = t19;
-		$[83] = t21;
-		$[84] = t22;
-		$[85] = t23;
-		$[86] = t24;
-		$[87] = triggerProps;
-		$[88] = t25;
-	} else t25 = $[88];
-	return t25;
+		$[80] = T0;
+		$[81] = feedback.handlers;
+		$[82] = id;
+		$[83] = isDisabled;
+		$[84] = props;
+		$[85] = shaped.onLayout;
+		$[86] = t11;
+		$[87] = t12;
+		$[88] = t13;
+		$[89] = t14;
+		$[90] = t16;
+		$[91] = t18;
+		$[92] = t19;
+		$[93] = t20;
+		$[94] = t22;
+		$[95] = t23;
+		$[96] = t24;
+		$[97] = t25;
+		$[98] = triggerProps;
+		$[99] = t26;
+	} else t26 = $[99];
+	return t26;
 }
 function iconStyleOf(color, size) {
 	return {