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

package/dist/components/switch/index.js

@@ -0,0 +1,591 @@
+import { CheckGlyph } from "../../glyphs/index.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { withOpacity } from "../../theme/color.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { controlStylesOf } from "../../control/styles.js";
+import { ControlLabel, ControlMessage, describedBy, messageOf } from "../../control/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, Platform, Pressable, StyleSheet, View } from "react-native";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useToggleState } from "react-stately/useToggleState";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+//#region src/components/switch/index.tsx
+const TRACK_WIDTH = 52;
+const TRACK_HEIGHT = 32;
+const TRACK_RULE = 2;
+const HANDLE_OFF = 16;
+const HANDLE_ON = 24;
+const HANDLE_PRESSED = 28;
+const ICON_SIZE = 16;
+const TRAVEL = 20;
+const DRAG_SLOP = TRAVEL / 2;
+const styles = StyleSheet.create({
+	control: {
+		flexShrink: 0,
+		height: 40,
+		width: TRACK_WIDTH
+	},
+	drag: {
+		alignItems: "center",
+		flexGrow: 1,
+		justifyContent: "center"
+	},
+	handle: {
+		alignItems: "center",
+		justifyContent: "center"
+	},
+	layer: {
+		height: 40,
+		position: "absolute",
+		start: -6,
+		top: -6,
+		width: 40
+	},
+	seat: {
+		alignItems: "center",
+		height: HANDLE_PRESSED,
+		justifyContent: "center",
+		position: "absolute",
+		start: 0,
+		top: 0,
+		width: HANDLE_PRESSED
+	},
+	track: {
+		borderWidth: TRACK_RULE,
+		height: TRACK_HEIGHT,
+		width: TRACK_WIDTH
+	}
+});
+const stylesOf = themedStyles(({ radii, spacing }) => StyleSheet.create({
+	handle: { borderRadius: radii.circle },
+	messages: { marginStart: TRACK_WIDTH + spacing.sm },
+	track: { borderRadius: radii.pill }
+}));
+function flipOf(state, took) {
+	return () => {
+		if (took.get()) {
+			took.set(false);
+			return;
+		}
+		state.toggle();
+	};
+}
+/**
+* What the switch is painted in: the track's fill and rule, the handle and
+* the icon. Where the page draws no rule it is the fill made clear rather than
+* plain transparent black, so the rule eases through its own colour rather
+* than through grey.
+*/
+function paintOf({ colors, stateLayerOpacity }, { active, isDisabled, on }) {
+	const disabledContent = withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+	if (isDisabled) {
+		const fill = withOpacity(on ? colors.onSurface : colors.surfaceContainerHighest, stateLayerOpacity.disabledContainer);
+		return {
+			fill,
+			glyph: disabledContent,
+			handle: on ? colors.surface : disabledContent,
+			rule: on ? withOpacity(fill, 0) : withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer)
+		};
+	}
+	if (on) return {
+		fill: colors.primary,
+		glyph: colors.onPrimaryContainer,
+		handle: active ? colors.primaryContainer : colors.onPrimary,
+		rule: colors.primary
+	};
+	return {
+		fill: colors.surfaceContainerHighest,
+		glyph: colors.onPrimaryContainer,
+		handle: active ? colors.onSurfaceVariant : colors.outline,
+		rule: colors.outline
+	};
+}
+/**
+* A switch that turns a setting on or off, with its label and optionally a
+* description or an error under it. Its state is React Stately's, as web's
+* is: pass `isSelected` with `onChange` to control it, or `defaultSelected` to
+* let it keep its own. A switch takes effect as it is flipped, which is what
+* sets it apart from a checkbox in a form.
+*
+* ```tsx
+* <Switch defaultSelected description="Supporting line">
+*   Label
+* </Switch>
+* ```
+*
+* A screen reader hears it as a switch named by its label, on or off,
+* followed by the line under it. A press anywhere on the track or the label
+* flips it, and the handle can be dragged across the track, settling on
+* whichever side it is let go. `style`, `ref` and `testID` land on the view
+* holding the row and the line under it, which is the element a layout
+* positions. With a `testID`, the drag is registered with Gesture Handler as
+* `<testID>-drag`, which its `getByGestureTestId` finds in a test.
+*/
+function Switch(t0) {
+	const $ = c(110);
+	let ariaLabel;
+	let children;
+	let defaultSelected;
+	let description;
+	let error;
+	let isSelected;
+	let onChange;
+	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let testID;
+	if ($[0] !== t0) {
+		({"aria-label": ariaLabel, children, defaultSelected, description, error, icon: t1, isDisabled: t2, isReadOnly: t3, isSelected, onChange, style, testID, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = children;
+		$[3] = defaultSelected;
+		$[4] = description;
+		$[5] = error;
+		$[6] = isSelected;
+		$[7] = onChange;
+		$[8] = props;
+		$[9] = style;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = testID;
+	} else {
+		ariaLabel = $[1];
+		children = $[2];
+		defaultSelected = $[3];
+		description = $[4];
+		error = $[5];
+		isSelected = $[6];
+		onChange = $[7];
+		props = $[8];
+		style = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		testID = $[13];
+	}
+	const icon = t1 === void 0 ? false : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const isReadOnly = t3 === void 0 ? false : t3;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	let t4;
+	if ($[14] !== defaultSelected || $[15] !== isReadOnly || $[16] !== isSelected || $[17] !== onChange) {
+		t4 = {
+			defaultSelected,
+			isReadOnly,
+			isSelected,
+			onChange
+		};
+		$[14] = defaultSelected;
+		$[15] = isReadOnly;
+		$[16] = isSelected;
+		$[17] = onChange;
+		$[18] = t4;
+	} else t4 = $[18];
+	const state = useToggleState(t4);
+	const messageId = useId();
+	const { colors, radii } = theme;
+	const on = state.isSelected;
+	const interactive = !isDisabled && !isReadOnly;
+	let t5;
+	if ($[19] !== interactive || $[20] !== on || $[21] !== state || $[22] !== testID) {
+		t5 = {
+			enabled: interactive,
+			on,
+			state,
+			testID
+		};
+		$[19] = interactive;
+		$[20] = on;
+		$[21] = state;
+		$[22] = testID;
+		$[23] = t5;
+	} else t5 = $[23];
+	const drag = useHandleDrag(t5);
+	const t6 = on ? colors.primary : colors.onSurface;
+	let t7;
+	if ($[24] !== radii.circle) {
+		t7 = { borderRadius: radii.circle };
+		$[24] = radii.circle;
+		$[25] = t7;
+	} else t7 = $[25];
+	const t8 = !interactive;
+	let t9;
+	if ($[26] !== drag.onPressIn || $[27] !== t6 || $[28] !== t7 || $[29] !== t8) {
+		t9 = {
+			color: t6,
+			corners: t7,
+			disabled: t8,
+			disc: 40,
+			onPressIn: drag.onPressIn
+		};
+		$[26] = drag.onPressIn;
+		$[27] = t6;
+		$[28] = t7;
+		$[29] = t8;
+		$[30] = t9;
+	} else t9 = $[30];
+	const feedback = usePressFeedback(t9);
+	const active = interactive && (drag.dragging || feedback.hovered || feedback.pressed || feedback.ring !== void 0);
+	let t10;
+	if ($[31] !== active || $[32] !== isDisabled || $[33] !== on || $[34] !== theme) {
+		t10 = paintOf(theme, {
+			active,
+			isDisabled,
+			on
+		});
+		$[31] = active;
+		$[32] = isDisabled;
+		$[33] = on;
+		$[34] = theme;
+		$[35] = t10;
+	} else t10 = $[35];
+	const paint = t10;
+	const size = drag.dragging || feedback.pressed ? HANDLE_PRESSED : on ? HANDLE_ON : HANDLE_OFF;
+	let t11;
+	if ($[36] !== drag.offset || $[37] !== on || $[38] !== size) {
+		t11 = {
+			offset: drag.offset,
+			on,
+			size
+		};
+		$[36] = drag.offset;
+		$[37] = on;
+		$[38] = size;
+		$[39] = t11;
+	} else t11 = $[39];
+	const motion = useSwitchMotion(paint, t11);
+	const T0 = View;
+	const T1 = Pressable;
+	const t12 = "switch";
+	let t13;
+	if ($[40] !== description || $[41] !== error || $[42] !== messageId) {
+		t13 = describedBy(messageId, messageOf(description, error));
+		$[40] = description;
+		$[41] = error;
+		$[42] = messageId;
+		$[43] = t13;
+	} else t13 = $[43];
+	const t14 = feedback.handlers;
+	let t15;
+	if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = hitSlop(40, TRACK_WIDTH);
+		$[44] = t15;
+	} else t15 = $[44];
+	let t16;
+	if ($[45] !== drag || $[46] !== state) {
+		t16 = drag.pressOf(state);
+		$[45] = drag;
+		$[46] = state;
+		$[47] = t16;
+	} else t16 = $[47];
+	let t17;
+	if ($[48] !== theme) {
+		t17 = controlStylesOf(theme);
+		$[48] = theme;
+		$[49] = t17;
+	} else t17 = $[49];
+	const t18 = t17.row;
+	const T2 = GestureHandlerRootView;
+	const t19 = styles;
+	const T3 = GestureDetector;
+	const t20 = drag.gesture;
+	const T4 = View;
+	const t21 = styles;
+	const t22 = Animated;
+	const t23 = composeStyles(styles.track, own.track, motion.track, feedback.ring);
+	const t24 = Animated;
+	let t25;
+	if ($[50] !== motion.seat) {
+		t25 = composeStyles(styles.seat, motion.seat);
+		$[50] = motion.seat;
+		$[51] = t25;
+	} else t25 = $[51];
+	let t26;
+	if ($[52] !== feedback.layer) {
+		t26 = /* @__PURE__ */ jsx(View, {
+			style: styles.layer,
+			children: feedback.layer
+		});
+		$[52] = feedback.layer;
+		$[53] = t26;
+	} else t26 = $[53];
+	const t27 = Animated;
+	const t28 = composeStyles(styles.handle, own.handle, motion.handle);
+	let t29;
+	if ($[54] !== icon || $[55] !== on || $[56] !== paint) {
+		t29 = icon && on ? /* @__PURE__ */ jsx(CheckGlyph, {
+			color: paint.glyph,
+			size: ICON_SIZE
+		}) : null;
+		$[54] = icon;
+		$[55] = on;
+		$[56] = paint;
+		$[57] = t29;
+	} else t29 = $[57];
+	let t30;
+	if ($[58] !== t27.View || $[59] !== t28 || $[60] !== t29) {
+		t30 = /* @__PURE__ */ jsx(t27.View, {
+			style: t28,
+			children: t29
+		});
+		$[58] = t27.View;
+		$[59] = t28;
+		$[60] = t29;
+		$[61] = t30;
+	} else t30 = $[61];
+	let t31;
+	if ($[62] !== t24.View || $[63] !== t25 || $[64] !== t26 || $[65] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(t24.View, {
+			style: t25,
+			children: [t26, t30]
+		});
+		$[62] = t24.View;
+		$[63] = t25;
+		$[64] = t26;
+		$[65] = t30;
+		$[66] = t31;
+	} else t31 = $[66];
+	let t32;
+	if ($[67] !== t22.View || $[68] !== t23 || $[69] !== t31) {
+		t32 = /* @__PURE__ */ jsx(t22.View, {
+			style: t23,
+			children: t31
+		});
+		$[67] = t22.View;
+		$[68] = t23;
+		$[69] = t31;
+		$[70] = t32;
+	} else t32 = $[70];
+	let t33;
+	if ($[71] !== T4 || $[72] !== t21.drag || $[73] !== t32) {
+		t33 = /* @__PURE__ */ jsx(T4, {
+			style: t21.drag,
+			children: t32
+		});
+		$[71] = T4;
+		$[72] = t21.drag;
+		$[73] = t32;
+		$[74] = t33;
+	} else t33 = $[74];
+	let t34;
+	if ($[75] !== T3 || $[76] !== drag.gesture || $[77] !== t33) {
+		t34 = /* @__PURE__ */ jsx(T3, {
+			gesture: t20,
+			children: t33
+		});
+		$[75] = T3;
+		$[76] = drag.gesture;
+		$[77] = t33;
+		$[78] = t34;
+	} else t34 = $[78];
+	let t35;
+	if ($[79] !== T2 || $[80] !== t19.control || $[81] !== t34) {
+		t35 = /* @__PURE__ */ jsx(T2, {
+			style: t19.control,
+			children: t34
+		});
+		$[79] = T2;
+		$[80] = t19.control;
+		$[81] = t34;
+		$[82] = t35;
+	} else t35 = $[82];
+	let t36;
+	if ($[83] !== children || $[84] !== isDisabled) {
+		t36 = /* @__PURE__ */ jsx(ControlLabel, {
+			isDisabled,
+			children
+		});
+		$[83] = children;
+		$[84] = isDisabled;
+		$[85] = t36;
+	} else t36 = $[85];
+	let t37;
+	if ($[86] !== T1 || $[87] !== ariaLabel || $[88] !== feedback.handlers || $[89] !== isDisabled || $[90] !== on || $[91] !== t13 || $[92] !== t15 || $[93] !== t16 || $[94] !== t17.row || $[95] !== t35 || $[96] !== t36) {
+		t37 = /* @__PURE__ */ jsxs(T1, {
+			"aria-checked": on,
+			"aria-label": ariaLabel,
+			role: t12,
+			...t13,
+			...t14,
+			disabled: isDisabled,
+			hitSlop: t15,
+			onPress: t16,
+			style: t18,
+			children: [t35, t36]
+		});
+		$[86] = T1;
+		$[87] = ariaLabel;
+		$[88] = feedback.handlers;
+		$[89] = isDisabled;
+		$[90] = on;
+		$[91] = t13;
+		$[92] = t15;
+		$[93] = t16;
+		$[94] = t17.row;
+		$[95] = t35;
+		$[96] = t36;
+		$[97] = t37;
+	} else t37 = $[97];
+	let t38;
+	if ($[98] !== description || $[99] !== error || $[100] !== messageId || $[101] !== own.messages) {
+		t38 = /* @__PURE__ */ jsx(ControlMessage, {
+			description,
+			error,
+			id: messageId,
+			style: own.messages
+		});
+		$[98] = description;
+		$[99] = error;
+		$[100] = messageId;
+		$[101] = own.messages;
+		$[102] = t38;
+	} else t38 = $[102];
+	let t39;
+	if ($[103] !== T0 || $[104] !== props || $[105] !== style || $[106] !== t37 || $[107] !== t38 || $[108] !== testID) {
+		t39 = /* @__PURE__ */ jsxs(T0, {
+			...props,
+			style,
+			testID,
+			children: [t37, t38]
+		});
+		$[103] = T0;
+		$[104] = props;
+		$[105] = style;
+		$[106] = t37;
+		$[107] = t38;
+		$[108] = testID;
+		$[109] = t39;
+	} else t39 = $[109];
+	return t39;
+}
+/**
+* The handle following a drag across the track, and settling from where it
+* is let go: on past the middle, off before it. `offset` is where the drag
+* has put the handle's seat while one is under way, measured from the start
+* of the track, and nothing otherwise, when the seat rests at the end the
+* switch is on.
+*
+* The drag is recognised once it has moved `DRAG_SLOP` across the track, and
+* on the JavaScript thread, since settling sets React state and a drag moves
+* one shared value.
+*/
+function useHandleDrag(t0) {
+	const $ = c(9);
+	const { enabled, on, state, testID } = t0;
+	const [dragging, setDragging] = useState(false);
+	const offset = useSharedValue(null);
+	const took = useSharedValue(false);
+	const began = useSharedValue(0);
+	const follow = function follow(x) {
+		const along = I18nManager.isRTL ? began.get() - x : x - began.get();
+		offset.set(Math.min(TRAVEL, Math.max(0, (on ? TRAVEL : 0) + along)));
+	};
+	const pan = Gesture.Pan().activeOffsetX([-10, DRAG_SLOP]).enabled(enabled).runOnJS(true).onBegin((t1) => {
+		const { x: x_0 } = t1;
+		began.set(x_0);
+	}).onStart((t2) => {
+		const { x: x_1 } = t2;
+		took.set(Platform.OS === "web");
+		setDragging(true);
+		follow(x_1);
+	}).onUpdate((t3) => {
+		const { x: x_2 } = t3;
+		follow(x_2);
+	}).onEnd((_event, success) => {
+		const stopped = offset.get();
+		if (success && stopped !== null && stopped > TRAVEL / 2 !== on) state.setSelected(!on);
+	}).onFinalize(() => {
+		offset.set(null);
+		setDragging(false);
+	});
+	const t4 = testID === void 0 ? pan : pan.withTestId(`${testID}-drag`);
+	let t5;
+	let t6;
+	if ($[0] !== took) {
+		t5 = () => {
+			took.set(false);
+		};
+		t6 = (toggle) => flipOf(toggle, took);
+		$[0] = took;
+		$[1] = t5;
+		$[2] = t6;
+	} else {
+		t5 = $[1];
+		t6 = $[2];
+	}
+	let t7;
+	if ($[3] !== dragging || $[4] !== offset || $[5] !== t4 || $[6] !== t5 || $[7] !== t6) {
+		t7 = {
+			dragging,
+			gesture: t4,
+			offset,
+			onPressIn: t5,
+			pressOf: t6
+		};
+		$[3] = dragging;
+		$[4] = offset;
+		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
+		$[8] = t7;
+	} else t7 = $[8];
+	return t7;
+}
+function useSwitchMotion(t0, t1) {
+	const $ = c(4);
+	const { fill, handle, rule } = t0;
+	const { offset, on, size } = t1;
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const timing = {
+		duration: motion.durationShort2,
+		easing: Easing.bezier(...motion.easingStandard)
+	};
+	const direction = I18nManager.isRTL ? -1 : 1;
+	const rest = (on ? TRAVEL : 0) * direction;
+	const track = useAnimatedStyle(() => {
+		"worklet";
+		return {
+			backgroundColor: reduceMotion ? fill : withTiming(fill, timing),
+			borderColor: reduceMotion ? rule : withTiming(rule, timing)
+		};
+	});
+	const seat = useAnimatedStyle(() => {
+		"worklet";
+		const dragged = offset.get();
+		return { transform: [{ translateX: dragged !== null ? dragged * direction : reduceMotion ? rest : withTiming(rest, timing) }] };
+	});
+	const handleMotion = useAnimatedStyle(() => {
+		"worklet";
+		return {
+			backgroundColor: reduceMotion ? handle : withTiming(handle, timing),
+			height: reduceMotion ? size : withTiming(size, timing),
+			width: reduceMotion ? size : withTiming(size, timing)
+		};
+	});
+	let t2;
+	if ($[0] !== handleMotion || $[1] !== seat || $[2] !== track) {
+		t2 = {
+			handle: handleMotion,
+			seat,
+			track
+		};
+		$[0] = handleMotion;
+		$[1] = seat;
+		$[2] = track;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=index.js.map

package/dist/components/switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","StyleProp","ViewProps","ViewStyle","AnimatedStyle","SharedValue","ToggleState","useId","useState","I18nManager","Platform","Pressable","StyleSheet","View","Gesture","GestureDetector","GestureHandlerRootView","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","useToggleState","ResolvedTheme","ControlLabel","ControlMessage","describedBy","LAYER_SIZE","messageOf","controlStylesOf","CheckGlyph","hitSlop","usePressFeedback","withOpacity","useTheme","composeStyles","themedStyles","Paint","fill","glyph","handle","rule","SwitchProps","Omit","children","defaultSelected","description","error","icon","isDisabled","isReadOnly","isSelected","onChange","ref","style","TRACK_WIDTH","TRACK_HEIGHT","TRACK_RULE","HANDLE_OFF","HANDLE_ON","HANDLE_PRESSED","ICON_SIZE","TRAVEL","DRAG_SLOP","styles","create","control","flexShrink","height","width","drag","alignItems","flexGrow","justifyContent","layer","position","start","top","seat","track","borderWidth","stylesOf","radii","spacing","borderRadius","circle","messages","marginStart","sm","pill","flipOf","state","took","get","set","toggle","paintOf","colors","stateLayerOpacity","active","on","disabledContent","onSurface","surfaceContainerHighest","disabledContainer","surface","primary","onPrimaryContainer","primaryContainer","onPrimary","onSurfaceVariant","outline","Switch","t0","$","_c","ariaLabel","props","t1","t2","t3","testID","undefined","theme","own","t4","messageId","interactive","t5","enabled","useHandleDrag","t6","t7","t8","t9","onPressIn","color","corners","disabled","disc","feedback","dragging","hovered","pressed","ring","t10","paint","size","t11","offset","motion","useSwitchMotion","T0","T1","t12","t13","t14","handlers","t15","Symbol","for","t16","pressOf","t17","t18","row","T2","T3","t20","gesture","T4","t22","t23","t24","t25","t26","t27","t28","t29","t30","t31","t32","t33","t21","t34","t35","t19","t36","t37","t38","t39","setDragging","began","follow","x","along","isRTL","Math","min","max","pan","Pan","activeOffsetX","runOnJS","onBegin","x_0","onStart","x_1","OS","onUpdate","x_2","onEnd","_event","success","stopped","setSelected","onFinalize","withTestId","reduceMotion","timing","duration","durationShort2","easing","bezier","easingStandard","direction","rest","backgroundColor","borderColor","dragged","transform","translateX","handleMotion","_c"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewProps, ViewStyle } from 'react-native'\nimport type { AnimatedStyle, SharedValue } from 'react-native-reanimated'\nimport type { ToggleState } from 'react-stately/useToggleState'\n\nimport { useId, useState } from 'react'\nimport {\n  I18nManager,\n  Platform,\n  Pressable,\n  StyleSheet,\n  View,\n} from 'react-native'\nimport {\n  Gesture,\n  GestureDetector,\n  GestureHandlerRootView,\n} from 'react-native-gesture-handler'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useToggleState } from 'react-stately/useToggleState'\n\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport {\n  ControlLabel,\n  ControlMessage,\n  describedBy,\n  LAYER_SIZE,\n  messageOf,\n} from '../../control'\nimport { controlStylesOf } from '../../control/styles'\nimport { CheckGlyph } from '../../glyphs'\nimport { hitSlop, usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// The switch page, as kanso-ui's Switch draws it: a 52 by 32dp track with a\n// 2dp outline and a full corner, a handle that is 16dp off, 24dp on and 28dp\n// while pressed, a 16dp icon in the handle when asked for, a 40dp state layer\n// around the handle and a 48dp target. Off, the track is surface container\n// highest inside an outline rule and the handle is outline, turning on surface\n// variant while hovered, pressed or focused; on, the track is primary and the\n// handle on primary, turning primary container in the same states, with the\n// icon in on primary container. Disabled, the track and its rule are on\n// surface at the disabled container opacity and the handle on surface at the\n// disabled content opacity, or surface when on. The state layer is on surface\n// off and primary on, at each state's opacity, and does not swap once pressed\n// as a checkbox's does.\n//\n// The handle travels between the two ends of the track and grows between its\n// three sizes over the motion tokens' short duration on the standard curve,\n// as web's transition does, and at once for a reader who asks the device for\n// reduced motion. The track's colours ease alongside. The state layer and the\n// ripple sit on a 40dp disc centred on the handle, so they travel with it.\n//\n// The handle follows a drag, as the page's pressed switch does: the switch\n// flips when it is let go past the middle of the track and springs back when\n// it is not. The drag is Gesture Handler's, over the whole track rather than\n// only the handle, as a drag on iOS's own switch is. A press that moves less\n// than half the travel is still a tap, which the row's `Pressable` takes and\n// which flips the switch on its own. Once a drag takes over, Gesture Handler\n// ends that press without a tap on iOS and Android, so letting go settles the\n// switch once, from where the handle is. React Native Web has nothing to end\n// the press with, and the click a pointer's release sends would flip it a\n// second time, so there the switch ignores the tap a drag took over.\n//\n// Under a right-to-left layout the handle starts from the right, and a drag\n// toward the left turns the switch on.\n//\n// Gesture Handler recognises a drag only under its root view, so the track\n// carries one of its own, as its guide asks of a library. An app that wraps\n// itself in one already makes this one a plain view.\n//\n// The row, the label and the line under it are src/control's, which Checkbox\n// and Radio draw through as well. The whole row is the `Pressable`, so a press\n// on the label flips the switch, as a press on web's label does. The line\n// under it starts where the label does, past the track.\n\ntype Paint = {\n  readonly fill: string\n  readonly glyph: string\n  readonly handle: string\n  readonly rule: string\n}\n\ntype SwitchProps = Omit<ViewProps, 'children' | 'style'> & {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  readonly children?: ReactNode\n  /**\n   * Whether the switch starts on, when it keeps its own state.\n   * @default false\n   */\n  readonly defaultSelected?: boolean\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state: the line under the label is the error, in\n   * the error colour.\n   */\n  readonly error?: string\n  /**\n   * Draws the check in the handle while the switch is on, the page's \"icon on\n   * selected switch\" form.\n   * @default false\n   */\n  readonly icon?: boolean\n  /**\n   * Draws the switch disabled, and takes no presses or drags.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the state without letting a press or a drag change it.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * Whether the switch is on, for a call site holding the state itself with\n   * `onChange`.\n   */\n  readonly isSelected?: boolean\n  /** Called with the new state whenever a press or a drag changes it. */\n  readonly onChange?: (isSelected: boolean) => void\n  readonly ref?: Ref<View>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n// The track's size and its rule, from the page.\nconst TRACK_WIDTH = 52\nconst TRACK_HEIGHT = 32\nconst TRACK_RULE = 2\n\n// The handle's three sizes and the icon's, from the page.\nconst HANDLE_OFF = 16\nconst HANDLE_ON = 24\nconst HANDLE_PRESSED = 28\nconst ICON_SIZE = 16\n\n// How far the handle's seat, the pressed handle's 28dp, travels: the track's\n// 48dp inside its rule, less the seat. Off, the seat's centre is 16dp from the\n// track's start, and on, 16dp from its end, which is where the page's handles\n// sit.\nconst TRAVEL = TRACK_WIDTH - 2 * TRACK_RULE - HANDLE_PRESSED\n\n// How far a press moves before it is a drag: half the travel, the platforms'\n// own touch slop, as web's is for a finger. A finger drifts several dp on an\n// ordinary tap, and a tap inside this flips the switch. A drag past it is past\n// the middle too, so it turns the switch over unless it comes back.\nconst DRAG_SLOP = TRAVEL / 2\n\nconst styles = StyleSheet.create({\n  // The 52 by 40 the switch takes in the row, the height of the state layer\n  // around the handle, with the track centred in it. Gesture Handler's root\n  // view, sized to the track rather than to the screen it fills by default.\n  control: {\n    flexShrink: 0,\n    height: LAYER_SIZE,\n    width: TRACK_WIDTH,\n  },\n  // What the drag is recognised over: the whole of the control.\n  drag: {\n    alignItems: 'center',\n    flexGrow: 1,\n    justifyContent: 'center',\n  },\n  handle: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  // The 40dp state layer, centred on the handle and so on its seat.\n  layer: {\n    height: LAYER_SIZE,\n    position: 'absolute',\n    start: (HANDLE_PRESSED - LAYER_SIZE) / 2,\n    top: (HANDLE_PRESSED - LAYER_SIZE) / 2,\n    width: LAYER_SIZE,\n  },\n  // The handle's seat, the pressed handle's size, at the start of the track\n  // inside its rule. It travels by a translation, so the layout never moves.\n  seat: {\n    alignItems: 'center',\n    height: HANDLE_PRESSED,\n    justifyContent: 'center',\n    position: 'absolute',\n    start: 0,\n    top: 0,\n    width: HANDLE_PRESSED,\n  },\n  track: {\n    borderWidth: TRACK_RULE,\n    height: TRACK_HEIGHT,\n    width: TRACK_WIDTH,\n  },\n})\n\nconst stylesOf = themedStyles(({ radii, spacing }) =>\n  StyleSheet.create({\n    handle: {\n      borderRadius: radii.circle,\n    },\n    // Past the track rather than the 40dp layer a checkbox draws, so the line\n    // starts where the label's text does.\n    messages: {\n      marginStart: TRACK_WIDTH + spacing.sm,\n    },\n    track: {\n      borderRadius: radii.pill,\n    },\n  }),\n)\n\n// A press's flip, unless a drag took the press over. Built by a call rather\n// than declared in the component, which is what react-perf's\n// jsx-no-new-function-as-prop is after.\nfunction flipOf(state: ToggleState, took: SharedValue<boolean>) {\n  return () => {\n    if (took.get()) {\n      took.set(false)\n      return\n    }\n    state.toggle()\n  }\n}\n\n/**\n * What the switch is painted in: the track's fill and rule, the handle and\n * the icon. Where the page draws no rule it is the fill made clear rather than\n * plain transparent black, so the rule eases through its own colour rather\n * than through grey.\n */\nfunction paintOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  {\n    active,\n    isDisabled,\n    on,\n  }: {\n    readonly active: boolean\n    readonly isDisabled: boolean\n    readonly on: boolean\n  },\n): Paint {\n  const disabledContent = withOpacity(\n    colors.onSurface,\n    stateLayerOpacity.disabledContent,\n  )\n\n  if (isDisabled) {\n    const fill = withOpacity(\n      on ? colors.onSurface : colors.surfaceContainerHighest,\n      stateLayerOpacity.disabledContainer,\n    )\n\n    return {\n      fill,\n      glyph: disabledContent,\n      handle: on ? colors.surface : disabledContent,\n      rule: on\n        ? withOpacity(fill, 0)\n        : withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer),\n    }\n  }\n\n  if (on) {\n    return {\n      fill: colors.primary,\n      glyph: colors.onPrimaryContainer,\n      handle: active ? colors.primaryContainer : colors.onPrimary,\n      rule: colors.primary,\n    }\n  }\n\n  return {\n    fill: colors.surfaceContainerHighest,\n    glyph: colors.onPrimaryContainer,\n    handle: active ? colors.onSurfaceVariant : colors.outline,\n    rule: colors.outline,\n  }\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Stately's, as web's\n * is: pass `isSelected` with `onChange` to control it, or `defaultSelected` to\n * let it keep its own. A switch takes effect as it is flipped, which is what\n * sets it apart from a checkbox in a form.\n *\n * ```tsx\n * <Switch defaultSelected description=\"Supporting line\">\n *   Label\n * </Switch>\n * ```\n *\n * A screen reader hears it as a switch named by its label, on or off,\n * followed by the line under it. A press anywhere on the track or the label\n * flips it, and the handle can be dragged across the track, settling on\n * whichever side it is let go. `style`, `ref` and `testID` land on the view\n * holding the row and the line under it, which is the element a layout\n * positions. With a `testID`, the drag is registered with Gesture Handler as\n * `<testID>-drag`, which its `getByGestureTestId` finds in a test.\n */\nfunction Switch({\n  'aria-label': ariaLabel,\n  children,\n  defaultSelected,\n  description,\n  error,\n  icon = false,\n  isDisabled = false,\n  isReadOnly = false,\n  isSelected,\n  onChange,\n  style,\n  testID,\n  ...props\n}: SwitchProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const state = useToggleState({\n    defaultSelected,\n    isReadOnly,\n    isSelected,\n    onChange,\n  })\n  const messageId = useId()\n\n  const { colors, radii } = theme\n  const on = state.isSelected\n  const interactive = !isDisabled && !isReadOnly\n  const drag = useHandleDrag({ enabled: interactive, on, state, testID })\n\n  const feedback = usePressFeedback({\n    color: on ? colors.primary : colors.onSurface,\n    corners: { borderRadius: radii.circle },\n    disabled: !interactive,\n    disc: LAYER_SIZE,\n    onPressIn: drag.onPressIn,\n  })\n  const active =\n    interactive &&\n    (drag.dragging ||\n      feedback.hovered ||\n      feedback.pressed ||\n      feedback.ring !== undefined)\n  const paint = paintOf(theme, { active, isDisabled, on })\n  const size =\n    drag.dragging || feedback.pressed\n      ? HANDLE_PRESSED\n      : on\n        ? HANDLE_ON\n        : HANDLE_OFF\n  const motion = useSwitchMotion(paint, { offset: drag.offset, on, size })\n\n  return (\n    <View {...props} style={style} testID={testID}>\n      <Pressable\n        aria-checked={on}\n        aria-label={ariaLabel}\n        role=\"switch\"\n        {...describedBy(messageId, messageOf(description, error))}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        hitSlop={hitSlop(LAYER_SIZE, TRACK_WIDTH)}\n        onPress={drag.pressOf(state)}\n        style={controlStylesOf(theme).row}\n      >\n        <GestureHandlerRootView style={styles.control}>\n          <GestureDetector gesture={drag.gesture}>\n            <View style={styles.drag}>\n              <Animated.View\n                style={composeStyles<AnimatedStyle<ViewStyle>>(\n                  styles.track,\n                  own.track,\n                  motion.track,\n                  feedback.ring,\n                )}\n              >\n                <Animated.View\n                  style={composeStyles<AnimatedStyle<ViewStyle>>(\n                    styles.seat,\n                    motion.seat,\n                  )}\n                >\n                  <View style={styles.layer}>{feedback.layer}</View>\n                  <Animated.View\n                    style={composeStyles<AnimatedStyle<ViewStyle>>(\n                      styles.handle,\n                      own.handle,\n                      motion.handle,\n                    )}\n                  >\n                    {icon && on ? (\n                      <CheckGlyph color={paint.glyph} size={ICON_SIZE} />\n                    ) : null}\n                  </Animated.View>\n                </Animated.View>\n              </Animated.View>\n            </View>\n          </GestureDetector>\n        </GestureHandlerRootView>\n        <ControlLabel isDisabled={isDisabled}>{children}</ControlLabel>\n      </Pressable>\n      <ControlMessage\n        description={description}\n        error={error}\n        id={messageId}\n        style={own.messages}\n      />\n    </View>\n  )\n}\n\n/**\n * The handle following a drag across the track, and settling from where it\n * is let go: on past the middle, off before it. `offset` is where the drag\n * has put the handle's seat while one is under way, measured from the start\n * of the track, and nothing otherwise, when the seat rests at the end the\n * switch is on.\n *\n * The drag is recognised once it has moved `DRAG_SLOP` across the track, and\n * on the JavaScript thread, since settling sets React state and a drag moves\n * one shared value.\n */\nfunction useHandleDrag({\n  enabled,\n  on,\n  state,\n  testID,\n}: {\n  readonly enabled: boolean\n  readonly on: boolean\n  readonly state: ToggleState\n  readonly testID: string | undefined\n}) {\n  const [dragging, setDragging] = useState(false)\n  const offset = useSharedValue<null | number>(null)\n  // Whether a drag has taken over the press in flight, whose click React\n  // Native Web would otherwise turn into a second flip. Cleared by the next\n  // press rather than by that click, which a touch dragged far enough never\n  // sends. A shared value rather than a ref: the gesture's callbacks are\n  // built while rendering, and the React Compiler lets no ref reach them.\n  const took = useSharedValue(false)\n\n  // Where the press began across the track. Gesture Handler measures its\n  // translation from where the drag was recognised, past the slop, so the\n  // distance is taken from here instead, as web's is from the press.\n  const began = useSharedValue(0)\n\n  // Puts the seat where the drag has carried it, from the end it started at,\n  // and no further than either end.\n  function follow(x: number) {\n    const along = I18nManager.isRTL ? began.get() - x : x - began.get()\n    offset.set(Math.min(TRAVEL, Math.max(0, (on ? TRAVEL : 0) + along)))\n  }\n\n  // oxlint-disable-next-line react/capitalized-calls -- a builder Gesture Handler names after the gesture, not a component\n  const pan = Gesture.Pan()\n    .activeOffsetX([-DRAG_SLOP, DRAG_SLOP])\n    .enabled(enabled)\n    .runOnJS(true)\n    .onBegin(({ x }) => {\n      began.set(x)\n    })\n    .onStart(({ x }) => {\n      took.set(Platform.OS === 'web')\n      setDragging(true)\n      follow(x)\n    })\n    .onUpdate(({ x }) => {\n      follow(x)\n    })\n    .onEnd((_event, success) => {\n      const stopped = offset.get()\n      if (success && stopped !== null && stopped > TRAVEL / 2 !== on) {\n        state.setSelected(!on)\n      }\n    })\n    .onFinalize(() => {\n      offset.set(null)\n      setDragging(false)\n    })\n\n  return {\n    dragging,\n    gesture: testID === undefined ? pan : pan.withTestId(`${testID}-drag`),\n    offset,\n    onPressIn: () => {\n      took.set(false)\n    },\n    pressOf: (toggle: ToggleState) => flipOf(toggle, took),\n  }\n}\n\n// The track's colours, the seat's travel and the handle's size and colour,\n// eased to as the state changes. While a drag is under way the seat follows it\n// at once, and once it ends the seat eases from wherever it was let go.\nfunction useSwitchMotion(\n  { fill, handle, rule }: Paint,\n  {\n    offset,\n    on,\n    size,\n  }: {\n    readonly offset: SharedValue<null | number>\n    readonly on: boolean\n    readonly size: number\n  },\n) {\n  const { motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const timing = {\n    duration: motion.durationShort2,\n    easing: Easing.bezier(...motion.easingStandard),\n  }\n  // A translation is not mirrored under a right-to-left layout, though the\n  // seat's start is, so the seat travels the other way there.\n  const direction = I18nManager.isRTL ? -1 : 1\n  const rest = (on ? TRAVEL : 0) * direction\n\n  const track = useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? fill : withTiming(fill, timing),\n      borderColor: reduceMotion ? rule : withTiming(rule, timing),\n    }\n  })\n  const seat = useAnimatedStyle(() => {\n    'worklet'\n    const dragged = offset.get()\n    return {\n      transform: [\n        {\n          translateX:\n            dragged !== null\n              ? dragged * direction\n              : reduceMotion\n                ? rest\n                : withTiming(rest, timing),\n        },\n      ],\n    }\n  })\n  const handleMotion = useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? handle : withTiming(handle, timing),\n      height: reduceMotion ? size : withTiming(size, timing),\n      width: reduceMotion ? size : withTiming(size, timing),\n    }\n  })\n\n  return { handle: handleMotion, seat, track }\n}\n\nexport { Switch }\nexport type { SwitchProps }\n"],"mappings":"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"}