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

package/dist/components/color-wheel/index.js

@@ -0,0 +1,407 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useLocaleOf } from "../../i18n/provider.js";
+import { HIDDEN } from "../../glyphs/hidden.js";
+import { ColorThumb } from "../../color-thumb/index.js";
+import { ADJUSTABLE } from "../../slider/index.js";
+import { usePickedColor } from "../../swatch/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, StyleSheet, View } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Svg, { Path } from "react-native-svg";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { useColorWheelState } from "react-stately/useColorWheelState";
+//#region src/components/color-wheel/index.tsx
+const DEFAULT_OUTER_RADIUS = 100;
+const DEFAULT_THICKNESS = 16;
+const SLOP = 10;
+const TARGET = 48;
+const OVERLAP = .5;
+const HUES = Array.from({ length: 360 }, (_, hue) => hue);
+const styles = StyleSheet.create({
+	root: { boxSizing: "border-box" },
+	seat: {
+		alignItems: "center",
+		height: TARGET,
+		justifyContent: "center",
+		marginStart: -24,
+		marginTop: -24,
+		position: "absolute",
+		width: TARGET
+	},
+	thumb: { pointerEvents: "none" }
+});
+const stylesOf = themedStyles(({ stateLayerOpacity }) => StyleSheet.create({ disabled: { opacity: stateLayerOpacity.disabledContent } }));
+function adjustOf(state, isDisabled) {
+	return (event) => {
+		const { actionName } = event.nativeEvent;
+		if (isDisabled || actionName !== "increment" && actionName !== "decrement") return;
+		state.setDragging(true);
+		if (actionName === "increment") state.increment(state.step);
+		else state.decrement(state.step);
+		state.setDragging(false);
+	};
+}
+/**
+* Hue as a ring, with a handle on it. Its state is React Stately's, as web's
+* is: pass `value` with `onChange` to control it, or `defaultValue`, as a
+* CSS colour string or a `Color` from `parseColor`, which this package
+* re-exports.
+*
+* ```tsx
+* <ColorWheel defaultValue="hsl(200, 100%, 50%)" />
+* ```
+*
+* A wheel moves hue and nothing else, so unlike `ColorSlider` and
+* `ColorArea` it names no channel and there is no space for one to be
+* missing from: a hex value works here.
+*
+* The middle is empty rather than filled, so a `ColorArea` or a
+* `ColorSwatch` can sit inside one. A press on the ring moves the handle
+* there, and a drag carries it round. A screen reader hears "Hue", or
+* `aria-label`, with the value. `style`, `ref` and `testID` land on the
+* wheel, whose size comes from `outerRadius`. With a `testID`, the drag and
+* the press are registered with Gesture Handler as `<testID>-pan` and
+* `<testID>-tap`, which its `getByGestureTestId` finds in a test.
+*
+* Inside a `ColorPicker` it takes the picker's colour where it is given no
+* `value`, and reports a change to the picker before its own `onChange`.
+*/
+function ColorWheel(t0) {
+	const $ = c(64);
+	const { "aria-label": ariaLabel, defaultValue, isDisabled: t1, onChange, onChangeEnd, outerRadius: t2, ref, style, testID, thickness: t3, value } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const outerRadius = t2 === void 0 ? DEFAULT_OUTER_RADIUS : t2;
+	const thickness = t3 === void 0 ? DEFAULT_THICKNESS : t3;
+	const own = stylesOf(useTheme());
+	const locale = useLocaleOf(void 0);
+	const picked = usePickedColor(value, onChange);
+	let t4;
+	if ($[0] !== defaultValue || $[1] !== isDisabled || $[2] !== onChangeEnd || $[3] !== picked.onChange || $[4] !== picked.value) {
+		t4 = {
+			defaultValue,
+			isDisabled,
+			onChange: picked.onChange,
+			onChangeEnd,
+			value: picked.value
+		};
+		$[0] = defaultValue;
+		$[1] = isDisabled;
+		$[2] = onChangeEnd;
+		$[3] = picked.onChange;
+		$[4] = picked.value;
+		$[5] = t4;
+	} else t4 = $[5];
+	const state = useColorWheelState(t4);
+	const innerRadius = Math.max(0, outerRadius - thickness);
+	const thumbRadius = (innerRadius + outerRadius) / 2;
+	const t5 = Math.max(outerRadius - innerRadius, TARGET) / 2;
+	let t6;
+	if ($[6] !== isDisabled || $[7] !== outerRadius || $[8] !== state || $[9] !== t5 || $[10] !== testID || $[11] !== thumbRadius) {
+		t6 = {
+			isDisabled,
+			outerRadius,
+			reach: t5,
+			state,
+			testID,
+			thumbRadius
+		};
+		$[6] = isDisabled;
+		$[7] = outerRadius;
+		$[8] = state;
+		$[9] = t5;
+		$[10] = testID;
+		$[11] = thumbRadius;
+		$[12] = t6;
+	} else t6 = $[12];
+	const gesture = useWheelGesture(t6);
+	let t7;
+	if ($[13] !== state || $[14] !== thumbRadius) {
+		t7 = state.getThumbPosition(thumbRadius);
+		$[13] = state;
+		$[14] = thumbRadius;
+		$[15] = t7;
+	} else t7 = $[15];
+	const { x, y } = t7;
+	const color = state.value;
+	let t8;
+	if ($[16] !== color) {
+		t8 = color.getChannelRange("hue");
+		$[16] = color;
+		$[17] = t8;
+	} else t8 = $[17];
+	const { maxValue, minValue } = t8;
+	const T0 = View;
+	const t9 = composeStyles(styles.root, {
+		height: outerRadius * 2,
+		width: outerRadius * 2
+	}, isDisabled ? own.disabled : void 0, style);
+	let t10;
+	if ($[18] !== innerRadius || $[19] !== outerRadius) {
+		t10 = /* @__PURE__ */ jsx(Ring, {
+			innerRadius,
+			outerRadius
+		});
+		$[18] = innerRadius;
+		$[19] = outerRadius;
+		$[20] = t10;
+	} else t10 = $[20];
+	let t11;
+	if ($[21] !== ariaLabel || $[22] !== color || $[23] !== locale) {
+		t11 = ariaLabel ?? color.getChannelName("hue", locale);
+		$[21] = ariaLabel;
+		$[22] = color;
+		$[23] = locale;
+		$[24] = t11;
+	} else t11 = $[24];
+	const t12 = state.hue;
+	let t13;
+	if ($[25] !== color || $[26] !== locale) {
+		t13 = color.formatChannelValue("hue", locale);
+		$[25] = color;
+		$[26] = locale;
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== color || $[29] !== locale) {
+		t14 = color.getHueName(locale);
+		$[28] = color;
+		$[29] = locale;
+		$[30] = t14;
+	} else t14 = $[30];
+	const t15 = `${t13}, ${t14}`;
+	let t16;
+	if ($[31] !== isDisabled || $[32] !== state) {
+		t16 = adjustOf(state, isDisabled);
+		$[31] = isDisabled;
+		$[32] = state;
+		$[33] = t16;
+	} else t16 = $[33];
+	const t17 = outerRadius + (I18nManager.isRTL ? -x : x);
+	const t18 = outerRadius + y;
+	let t19;
+	if ($[34] !== t17 || $[35] !== t18) {
+		t19 = composeStyles(styles.seat, {
+			start: t17,
+			top: t18
+		});
+		$[34] = t17;
+		$[35] = t18;
+		$[36] = t19;
+	} else t19 = $[36];
+	let t20;
+	if ($[37] !== state) {
+		t20 = state.getDisplayColor();
+		$[37] = state;
+		$[38] = t20;
+	} else t20 = $[38];
+	let t21;
+	if ($[39] !== state.isDragging || $[40] !== t20) {
+		t21 = /* @__PURE__ */ jsx(View, {
+			style: styles.thumb,
+			children: /* @__PURE__ */ jsx(ColorThumb, {
+				color: t20,
+				dragging: state.isDragging
+			})
+		});
+		$[39] = state.isDragging;
+		$[40] = t20;
+		$[41] = t21;
+	} else t21 = $[41];
+	let t22;
+	if ($[42] !== isDisabled || $[43] !== maxValue || $[44] !== minValue || $[45] !== state.hue || $[46] !== t11 || $[47] !== t15 || $[48] !== t16 || $[49] !== t19 || $[50] !== t21) {
+		t22 = /* @__PURE__ */ jsx(View, {
+			accessibilityActions: ADJUSTABLE,
+			accessible: true,
+			"aria-disabled": isDisabled,
+			"aria-label": t11,
+			"aria-valuemax": maxValue,
+			"aria-valuemin": minValue,
+			"aria-valuenow": t12,
+			"aria-valuetext": t15,
+			onAccessibilityAction: t16,
+			role: "slider",
+			style: t19,
+			children: t21
+		});
+		$[42] = isDisabled;
+		$[43] = maxValue;
+		$[44] = minValue;
+		$[45] = state.hue;
+		$[46] = t11;
+		$[47] = t15;
+		$[48] = t16;
+		$[49] = t19;
+		$[50] = t21;
+		$[51] = t22;
+	} else t22 = $[51];
+	let t23;
+	if ($[52] !== t10 || $[53] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(View, {
+			style: StyleSheet.absoluteFill,
+			children: [t10, t22]
+		});
+		$[52] = t10;
+		$[53] = t22;
+		$[54] = t23;
+	} else t23 = $[54];
+	let t24;
+	if ($[55] !== gesture || $[56] !== t23) {
+		t24 = /* @__PURE__ */ jsx(GestureHandlerRootView, {
+			style: StyleSheet.absoluteFill,
+			children: /* @__PURE__ */ jsx(GestureDetector, {
+				gesture,
+				children: t23
+			})
+		});
+		$[55] = gesture;
+		$[56] = t23;
+		$[57] = t24;
+	} else t24 = $[57];
+	let t25;
+	if ($[58] !== T0 || $[59] !== ref || $[60] !== t24 || $[61] !== t9 || $[62] !== testID) {
+		t25 = /* @__PURE__ */ jsx(T0, {
+			ref,
+			style: t9,
+			testID,
+			children: t24
+		});
+		$[58] = T0;
+		$[59] = ref;
+		$[60] = t24;
+		$[61] = t9;
+		$[62] = testID;
+		$[63] = t25;
+	} else t25 = $[63];
+	return t25;
+}
+function pointOf(outerRadius, radius, degrees) {
+	const radians = degrees * Math.PI / 180;
+	const across = outerRadius + radius * Math.cos(radians);
+	const down = outerRadius + radius * Math.sin(radians);
+	return `${across.toFixed(3)} ${down.toFixed(3)}`;
+}
+function Ring(t0) {
+	const $ = c(7);
+	const { innerRadius, outerRadius } = t0;
+	const t1 = outerRadius * 2;
+	const t2 = outerRadius * 2;
+	let t3;
+	if ($[0] !== innerRadius || $[1] !== outerRadius) {
+		t3 = HUES.map((hue) => /* @__PURE__ */ jsx(Path, {
+			d: sliceOf(hue, innerRadius, outerRadius),
+			fill: `hsl(${hue}, 100%, 50%)`
+		}, hue));
+		$[0] = innerRadius;
+		$[1] = outerRadius;
+		$[2] = t3;
+	} else t3 = $[2];
+	let t4;
+	if ($[3] !== t1 || $[4] !== t2 || $[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Svg, {
+			...HIDDEN,
+			height: t1,
+			style: StyleSheet.absoluteFill,
+			width: t2,
+			children: t3
+		});
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+}
+function sliceOf(hue, innerRadius, outerRadius) {
+	const from = hue - 1 / 2;
+	const to = hue + 1 / 2 + OVERLAP;
+	return [
+		`M ${pointOf(outerRadius, outerRadius, from)}`,
+		`A ${outerRadius} ${outerRadius} 0 0 1 ${pointOf(outerRadius, outerRadius, to)}`,
+		`L ${pointOf(outerRadius, innerRadius, to)}`,
+		`A ${innerRadius} ${innerRadius} 0 0 0 ${pointOf(outerRadius, innerRadius, from)}`,
+		"Z"
+	].join(" ");
+}
+/**
+* The wheel's pan and tap. Each reads a press against the wheel's centre and
+* sets the hue from its angle, and counts only a press that begins within
+* `reach` of the band's middle. The pan holds the wheel as dragged until it
+* lets go, which lifts the handle and is what `onChangeEnd` waits for; the
+* tap moves it and lets it go at once.
+*
+* Both run on the JavaScript thread, since every move sets React state.
+*/
+function useWheelGesture(t0) {
+	const $ = c(13);
+	const { isDisabled, outerRadius, reach, state, testID, thumbRadius } = t0;
+	const held = useSharedValue(false);
+	let t1;
+	if ($[0] !== outerRadius || $[1] !== reach || $[2] !== thumbRadius) {
+		t1 = function reaches(x, y) {
+			const distance = Math.hypot(x - outerRadius, y - outerRadius);
+			return Math.abs(distance - thumbRadius) <= reach;
+		};
+		$[0] = outerRadius;
+		$[1] = reach;
+		$[2] = thumbRadius;
+		$[3] = t1;
+	} else t1 = $[3];
+	const reaches = t1;
+	let t2;
+	if ($[4] !== outerRadius || $[5] !== state) {
+		t2 = function setFrom(x_0, y_0) {
+			const across = x_0 - outerRadius;
+			const down = y_0 - outerRadius;
+			const distance_0 = Math.hypot(across, down);
+			if (distance_0 > 0) state.setHueFromPoint(across, down, distance_0);
+		};
+		$[4] = outerRadius;
+		$[5] = state;
+		$[6] = t2;
+	} else t2 = $[6];
+	const setFrom = t2;
+	let t6;
+	if ($[7] !== state) {
+		t6 = () => {
+			state.setDragging(false);
+		};
+		$[7] = state;
+		$[8] = t6;
+	} else t6 = $[8];
+	const pan = Gesture.Pan().minDistance(SLOP).enabled(!isDisabled).runOnJS(true).onBegin((t3) => {
+		const { x: x_1, y: y_1 } = t3;
+		held.set(reaches(x_1, y_1));
+	}).onStart((t4) => {
+		const { x: x_2, y: y_2 } = t4;
+		if (held.get()) {
+			state.setDragging(true);
+			setFrom(x_2, y_2);
+		}
+	}).onUpdate((t5) => {
+		const { x: x_3, y: y_3 } = t5;
+		if (held.get()) setFrom(x_3, y_3);
+	}).onFinalize(t6);
+	let t7;
+	if ($[9] !== reaches || $[10] !== setFrom || $[11] !== state) {
+		t7 = (t8, success) => {
+			const { x: x_4, y: y_4 } = t8;
+			if (success && reaches(x_4, y_4)) {
+				state.setDragging(true);
+				setFrom(x_4, y_4);
+				state.setDragging(false);
+			}
+		};
+		$[9] = reaches;
+		$[10] = setFrom;
+		$[11] = state;
+		$[12] = t7;
+	} else t7 = $[12];
+	const tap = Gesture.Tap().maxDistance(SLOP).enabled(!isDisabled).runOnJS(true).onEnd(t7);
+	return Gesture.Race(testID === void 0 ? pan : pan.withTestId(`${testID}-pan`), testID === void 0 ? tap : tap.withTestId(`${testID}-tap`));
+}
+//#endregion
+export { ColorWheel };
+
+//# sourceMappingURL=index.js.map

package/dist/components/color-wheel/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","Ref","AccessibilityActionEvent","StyleProp","ViewStyle","SharedValue","Color","ColorWheelState","I18nManager","StyleSheet","View","Gesture","GestureDetector","GestureHandlerRootView","useSharedValue","Svg","Path","useColorWheelState","ColorThumb","HIDDEN","useLocaleOf","ADJUSTABLE","usePickedColor","useTheme","composeStyles","themedStyles","ColorWheelProps","defaultValue","isDisabled","onChange","value","onChangeEnd","outerRadius","ref","style","testID","thickness","DEFAULT_OUTER_RADIUS","DEFAULT_THICKNESS","SLOP","TARGET","OVERLAP","HUES","Array","from","length","_","hue","styles","create","root","boxSizing","seat","alignItems","height","justifyContent","marginStart","marginTop","position","width","thumb","pointerEvents","stylesOf","stateLayerOpacity","disabled","opacity","disabledContent","adjustOf","state","event","actionName","nativeEvent","setDragging","increment","step","decrement","ColorWheel","t0","$","_c","ariaLabel","t1","t2","t3","undefined","own","locale","picked","t4","innerRadius","Math","max","thumbRadius","t5","t6","reach","gesture","useWheelGesture","t7","getThumbPosition","x","y","color","t8","getChannelRange","maxValue","minValue","T0","t9","t10","t11","getChannelName","t12","t13","formatChannelValue","t14","getHueName","t15","t16","t17","isRTL","t18","t19","start","top","t20","getDisplayColor","t21","isDragging","t22","t23","absoluteFill","t24","t25","pointOf","radius","degrees","radians","PI","across","cos","down","sin","toFixed","Ring","map","sliceOf","to","join","held","reaches","distance","hypot","abs","setFrom","x_0","y_0","distance_0","setHueFromPoint","pan","Pan","minDistance","enabled","runOnJS","onBegin","x_1","y_1","set","onStart","x_2","y_2","get","onUpdate","x_3","y_3","onFinalize","success","x_4","y_4","tap","Tap","maxDistance","onEnd","Race","withTestId","_c"],"sources":["../../../src/components/color-wheel/index.tsx"],"sourcesContent":["import type { ComponentRef, Ref } from 'react'\nimport type {\n  AccessibilityActionEvent,\n  StyleProp,\n  ViewStyle,\n} from 'react-native'\nimport type { SharedValue } from 'react-native-reanimated'\nimport type { Color } from 'react-stately'\nimport type { ColorWheelState } from 'react-stately/useColorWheelState'\n\nimport { I18nManager, StyleSheet, View } from 'react-native'\nimport {\n  Gesture,\n  GestureDetector,\n  GestureHandlerRootView,\n} from 'react-native-gesture-handler'\nimport { useSharedValue } from 'react-native-reanimated'\nimport Svg, { Path } from 'react-native-svg'\nimport { useColorWheelState } from 'react-stately/useColorWheelState'\n\nimport { ColorThumb } from '../../color-thumb'\nimport { HIDDEN } from '../../glyphs/hidden'\nimport { useLocaleOf } from '../../i18n/provider'\nimport { ADJUSTABLE } from '../../slider'\nimport { usePickedColor } from '../../swatch'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's ColorWheel: hue as a ring, with ColorSlider's ringed handle on\n// it. No Material Design page draws one, so what is here is web's, each\n// choice for web's reason, drawn and pressed as the platform allows.\n//\n// **The band is the sliders page's 16dp track**, a hue slider's thickness,\n// since a hue wheel and a hue slider are one control in two shapes. The\n// thickness is a prop and the inner radius is not: it is the thickness in\n// from `outerRadius`, so the two cannot disagree, and a band wider than the\n// wheel leaves no hole rather than a negative one.\n//\n// **The ring is slices, and the middle is empty.** react-native-svg has no\n// conic gradient, so the band is drawn as 360 slices, one per degree of hue,\n// each the hue at its middle and a little wider than its degree, so no seam\n// shows between neighbours. React Aria's gradient runs straight between its\n// stops, which is what hue at full saturation does, so the slices draw it to\n// within half a degree. Nothing is drawn inside the band, so whatever the\n// wheel sits over shows through, and a ColorArea or a swatch can sit in it.\n//\n// **Hue runs as React Aria's does**: 0° at three o'clock, rising clockwise,\n// and the same right to left, since a ring has no reading direction.\n//\n// **A press counts across the 48dp target.** The 16dp band is narrower than\n// the target Material Design asks a touch to have, so a press or a drag that\n// begins within 24dp of the band's middle, or anywhere on a wider band, moves\n// the handle there, and one beginning in the hole or a corner moves nothing.\n// Once begun, a drag follows the angle wherever it goes, as web's does.\n//\n// **A screen reader adjusts the handle**, named \"Hue\", or by `aria-label` in\n// its place, as React Aria names it, and hears the hue and its name, \"200°,\n// cyan blue\", in the provider's locale. It steps by a degree, past 360 back\n// to 0. `onChangeEnd` comes once as a drag, a press or a step ends.\n// Disabled, the wheel fades and takes nothing.\n\ntype ColorWheelProps = {\n  /** What a screen reader calls the wheel, in place of \"Hue\". */\n  readonly 'aria-label'?: string\n  /**\n   * The colour the wheel starts at, when it keeps its own: a CSS colour\n   * string in any notation, or a `Color` from `parseColor`. Red when neither\n   * this nor `value` is given.\n   */\n  readonly defaultValue?: Color | string\n  /**\n   * Draws the wheel disabled, and takes no presses, drags or screen reader\n   * actions.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Called with the colour as its hue moves. */\n  readonly onChange?: (value: Color) => void\n  /** Called with the colour once a drag, a press or an action has ended. */\n  readonly onChangeEnd?: (value: Color) => void\n  /**\n   * How far the ring reaches from the centre, in dp. The wheel is twice this\n   * across.\n   * @default 100\n   */\n  readonly outerRadius?: number\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /** Lands on the wheel. Its size comes from `outerRadius`. */\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n  /**\n   * How wide the band is, in dp. The inner radius is this in from\n   * `outerRadius`, so the two cannot disagree.\n   * @default 16\n   */\n  readonly thickness?: number\n  /** The colour, for a call site holding it itself with `onChange`. */\n  readonly value?: Color | string\n}\n\nconst DEFAULT_OUTER_RADIUS = 100\n// The sliders page's track, which is what a hue slider draws.\nconst DEFAULT_THICKNESS = 16\n\n// How far a press moves before it is a drag rather than a tap: Gesture\n// Handler's own default distance for a pan, as Slider's.\nconst SLOP = 10\n\n// The target a press counts across, and the frame a screen reader outlines\n// the handle in: the sliders page's 48dp, centred on the band's middle.\nconst TARGET = 48\n\n// How far past its degree each slice reaches, which covers the hairline a\n// renderer can leave between two shapes that only meet.\nconst OVERLAP = 0.5\n\n// One slice per degree of hue.\nconst HUES = Array.from({ length: 360 }, (_, hue) => hue)\n\nconst styles = StyleSheet.create({\n  root: {\n    boxSizing: 'border-box',\n  },\n  // Where the handle sits: the frame centred on the band, with the handle\n  // centred in it.\n  seat: {\n    alignItems: 'center',\n    height: TARGET,\n    justifyContent: 'center',\n    marginStart: -TARGET / 2,\n    marginTop: -TARGET / 2,\n    position: 'absolute',\n    width: TARGET,\n  },\n  // The handle, taking none of the frame's presses.\n  thumb: {\n    pointerEvents: 'none',\n  },\n})\n\nconst stylesOf = themedStyles(({ stateLayerOpacity }) =>\n  StyleSheet.create({\n    disabled: {\n      opacity: stateLayerOpacity.disabledContent,\n    },\n  }),\n)\n\n// Runs the step a screen reader asks for, as a move that starts and ends at\n// once, so `onChangeEnd` comes once as it does for a key on web.\nfunction adjustOf(state: ColorWheelState, isDisabled: boolean) {\n  return (event: AccessibilityActionEvent) => {\n    const { actionName } = event.nativeEvent\n    if (\n      isDisabled ||\n      (actionName !== 'increment' && actionName !== 'decrement')\n    ) {\n      return\n    }\n    state.setDragging(true)\n    if (actionName === 'increment') {\n      state.increment(state.step)\n    } else {\n      state.decrement(state.step)\n    }\n    state.setDragging(false)\n  }\n}\n\n/**\n * Hue as a ring, with a handle on it. Its state is React Stately's, as web's\n * is: pass `value` with `onChange` to control it, or `defaultValue`, as a\n * CSS colour string or a `Color` from `parseColor`, which this package\n * re-exports.\n *\n * ```tsx\n * <ColorWheel defaultValue=\"hsl(200, 100%, 50%)\" />\n * ```\n *\n * A wheel moves hue and nothing else, so unlike `ColorSlider` and\n * `ColorArea` it names no channel and there is no space for one to be\n * missing from: a hex value works here.\n *\n * The middle is empty rather than filled, so a `ColorArea` or a\n * `ColorSwatch` can sit inside one. A press on the ring moves the handle\n * there, and a drag carries it round. A screen reader hears \"Hue\", or\n * `aria-label`, with the value. `style`, `ref` and `testID` land on the\n * wheel, whose size comes from `outerRadius`. With a `testID`, the drag and\n * the press are registered with Gesture Handler as `<testID>-pan` and\n * `<testID>-tap`, which its `getByGestureTestId` finds in a test.\n *\n * Inside a `ColorPicker` it takes the picker's colour where it is given no\n * `value`, and reports a change to the picker before its own `onChange`.\n */\nfunction ColorWheel({\n  'aria-label': ariaLabel,\n  defaultValue,\n  isDisabled = false,\n  onChange,\n  onChangeEnd,\n  outerRadius = DEFAULT_OUTER_RADIUS,\n  ref,\n  style,\n  testID,\n  thickness = DEFAULT_THICKNESS,\n  value,\n}: ColorWheelProps) {\n  const own = stylesOf(useTheme())\n  const locale = useLocaleOf(undefined)\n  const picked = usePickedColor(value, onChange)\n  const state = useColorWheelState({\n    defaultValue,\n    isDisabled,\n    onChange: picked.onChange,\n    onChangeEnd,\n    value: picked.value,\n  })\n  const innerRadius = Math.max(0, outerRadius - thickness)\n  // The middle of the band, which is where the handle rides.\n  const thumbRadius = (innerRadius + outerRadius) / 2\n  const gesture = useWheelGesture({\n    isDisabled,\n    outerRadius,\n    reach: Math.max(outerRadius - innerRadius, TARGET) / 2,\n    state,\n    testID,\n    thumbRadius,\n  })\n  const { x, y } = state.getThumbPosition(thumbRadius)\n  const color = state.value\n  const { maxValue, minValue } = color.getChannelRange('hue')\n\n  return (\n    <View\n      ref={ref}\n      style={composeStyles<ViewStyle>(\n        styles.root,\n        { height: outerRadius * 2, width: outerRadius * 2 },\n        isDisabled ? own.disabled : undefined,\n        style,\n      )}\n      testID={testID}\n    >\n      <GestureHandlerRootView style={StyleSheet.absoluteFill}>\n        <GestureDetector gesture={gesture}>\n          <View style={StyleSheet.absoluteFill}>\n            <Ring innerRadius={innerRadius} outerRadius={outerRadius} />\n            <View\n              accessibilityActions={ADJUSTABLE}\n              accessible\n              aria-disabled={isDisabled}\n              aria-label={ariaLabel ?? color.getChannelName('hue', locale)}\n              aria-valuemax={maxValue}\n              aria-valuemin={minValue}\n              aria-valuenow={state.hue}\n              aria-valuetext={`${color.formatChannelValue('hue', locale)}, ${color.getHueName(locale)}`}\n              onAccessibilityAction={adjustOf(state, isDisabled)}\n              role=\"slider\"\n              style={composeStyles<ViewStyle>(styles.seat, {\n                // `start` turns over right to left, so the handle is put\n                // back where its hue is.\n                start: outerRadius + (I18nManager.isRTL ? -x : x),\n                top: outerRadius + y,\n              })}\n            >\n              <View style={styles.thumb}>\n                <ColorThumb\n                  color={state.getDisplayColor()}\n                  dragging={state.isDragging}\n                />\n              </View>\n            </View>\n          </View>\n        </GestureDetector>\n      </GestureHandlerRootView>\n    </View>\n  )\n}\n\n// A point `radius` from the wheel's centre at `degrees` of hue, as React\n// Aria places hue: 0° at three o'clock, rising clockwise.\nfunction pointOf(outerRadius: number, radius: number, degrees: number) {\n  const radians = (degrees * Math.PI) / 180\n  const across = outerRadius + radius * Math.cos(radians)\n  const down = outerRadius + radius * Math.sin(radians)\n  return `${across.toFixed(3)} ${down.toFixed(3)}`\n}\n\n// The band, one slice of it per degree of hue.\nfunction Ring({\n  innerRadius,\n  outerRadius,\n}: {\n  readonly innerRadius: number\n  readonly outerRadius: number\n}) {\n  return (\n    <Svg\n      {...HIDDEN}\n      height={outerRadius * 2}\n      style={StyleSheet.absoluteFill}\n      width={outerRadius * 2}\n    >\n      {HUES.map((hue) => (\n        <Path\n          d={sliceOf(hue, innerRadius, outerRadius)}\n          fill={`hsl(${hue}, 100%, 50%)`}\n          key={hue}\n        />\n      ))}\n    </Svg>\n  )\n}\n\n// The band's slice for one degree of hue, centred on it: out along the outer\n// edge clockwise, in, and back along the inner edge.\nfunction sliceOf(hue: number, innerRadius: number, outerRadius: number) {\n  const from = hue - 1 / 2\n  const to = hue + 1 / 2 + OVERLAP\n  return [\n    `M ${pointOf(outerRadius, outerRadius, from)}`,\n    `A ${outerRadius} ${outerRadius} 0 0 1 ${pointOf(outerRadius, outerRadius, to)}`,\n    `L ${pointOf(outerRadius, innerRadius, to)}`,\n    `A ${innerRadius} ${innerRadius} 0 0 0 ${pointOf(outerRadius, innerRadius, from)}`,\n    'Z',\n  ].join(' ')\n}\n\n/**\n * The wheel's pan and tap. Each reads a press against the wheel's centre and\n * sets the hue from its angle, and counts only a press that begins within\n * `reach` of the band's middle. The pan holds the wheel as dragged until it\n * lets go, which lifts the handle and is what `onChangeEnd` waits for; the\n * tap moves it and lets it go at once.\n *\n * Both run on the JavaScript thread, since every move sets React state.\n */\nfunction useWheelGesture({\n  isDisabled,\n  outerRadius,\n  reach,\n  state,\n  testID,\n  thumbRadius,\n}: {\n  readonly isDisabled: boolean\n  readonly outerRadius: number\n  readonly reach: number\n  readonly state: ColorWheelState\n  readonly testID: string | undefined\n  readonly thumbRadius: number\n}) {\n  // Whether the pan began on the ring. A shared value rather than a ref: the\n  // gesture's callbacks are built while rendering, and the React Compiler\n  // lets no ref reach them.\n  const held: SharedValue<boolean> = useSharedValue(false)\n\n  function reaches(x: number, y: number) {\n    const distance = Math.hypot(x - outerRadius, y - outerRadius)\n    return Math.abs(distance - thumbRadius) <= reach\n  }\n\n  // Sets the hue from a press's angle. The very centre has none, and moves\n  // nothing.\n  function setFrom(x: number, y: number) {\n    const across = x - outerRadius\n    const down = y - outerRadius\n    const distance = Math.hypot(across, down)\n    if (distance > 0) {\n      state.setHueFromPoint(across, down, distance)\n    }\n  }\n\n  // Gesture Handler 3 deprecates these builders for hooks that version 2 does\n  // not have, and the peer range admits both, so the builders stay while it\n  // does.\n  // oxlint-disable-next-line react/capitalized-calls, typescript/no-deprecated -- a builder named after its gesture, not a component; see above\n  const pan = Gesture.Pan()\n    .minDistance(SLOP)\n    .enabled(!isDisabled)\n    .runOnJS(true)\n    .onBegin(({ x, y }) => {\n      held.set(reaches(x, y))\n    })\n    .onStart(({ x, y }) => {\n      if (held.get()) {\n        state.setDragging(true)\n        setFrom(x, y)\n      }\n    })\n    .onUpdate(({ x, y }) => {\n      if (held.get()) {\n        setFrom(x, y)\n      }\n    })\n    // A pan the tap beat, or one begun off the ring, never started, and\n    // letting go of a wheel nothing holds ends nothing, so this needs no\n    // guard.\n    .onFinalize(() => {\n      state.setDragging(false)\n    })\n  // oxlint-disable-next-line react/capitalized-calls, typescript/no-deprecated -- as above\n  const tap = Gesture.Tap()\n    .maxDistance(SLOP)\n    .enabled(!isDisabled)\n    .runOnJS(true)\n    .onEnd(({ x, y }, success) => {\n      if (success && reaches(x, y)) {\n        state.setDragging(true)\n        setFrom(x, y)\n        state.setDragging(false)\n      }\n    })\n\n  // oxlint-disable-next-line react/capitalized-calls, typescript/no-deprecated -- as above\n  return Gesture.Race(\n    testID === undefined ? pan : pan.withTestId(`${testID}-pan`),\n    testID === undefined ? tap : tap.withTestId(`${testID}-tap`),\n  )\n}\n\nexport { ColorWheel }\nexport type { ColorWheelProps }\n"],"mappings":"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"}

package/dist/components/combo-box/index.d.ts

@@ -0,0 +1,193 @@
+import { ValidationResult } from "../../form/index.js";
+import { FieldVariant } from "../../field/index.js";
+import { StyleProp, TextInput, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
+import { Key } from "react-stately";
+import { ComboBoxValidationValue, MenuTriggerAction } from "react-stately/useComboBoxState";
+import { ChangeValueType, ValueType } from "react-stately/useSelectState";
+//#region src/components/combo-box/index.d.ts
+type ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {
+  /**
+   * Lets the field keep text that matches no option. With it on, the text is
+   * what the field holds and submits; with it off, the text goes back to the
+   * chosen option's as the field loses focus.
+   * @default false
+   */
+  readonly allowsCustomValue?: boolean;
+  /**
+   * Lets the list open with no options in it, showing its empty state. Left
+   * off, the list closes when a search leaves nothing.
+   * @default false
+   */
+  readonly allowsEmptyCollection?: boolean;
+  /**
+   * Which options a search keeps, handed an option's text and what has been
+   * typed. Left out, an option is kept when its text contains what has been
+   * typed anywhere in it, ignoring case and accents.
+   */
+  readonly defaultFilter?: (textValue: string, inputValue: string) => boolean;
+  /** The text the field opens with, when it keeps its own. */
+  readonly defaultInputValue?: string;
+  /** The items the options are built from, when the field keeps its own. */
+  readonly defaultItems?: Iterable<T>;
+  /**
+   * What is chosen at first, when the field keeps its own value: an
+   * option's `id`, or a list of them with `selectionMode="multiple"`.
+   */
+  readonly defaultValue?: ValueType<M>;
+  /**
+   * A hint shown under the field. Replaced by `error` when there is one, so
+   * the two never stack.
+   */
+  readonly description?: string;
+  /** The `id`s of the options drawn disabled, which take no presses. */
+  readonly disabledKeys?: Iterable<Key>;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the field in its error state: the message, the error colours, and the
+   * error a screen reader reads with the field all follow from it. The line
+   * under the field arrives with the message, so the field grows when this
+   * does, unless it is inside a `Form`, which keeps the line drawn. It wins
+   * over what `validate` and the form say, and holds a `native` form back.
+   */
+  readonly error?: string;
+  /**
+   * Whether the label sits in the empty box and floats to the top once the
+   * field is focused or holds a value. `false` keeps it small at the top in
+   * every state.
+   * @default true
+   */
+  readonly floatingLabel?: boolean;
+  /**
+   * Whether the `Form` around the field submits the chosen option's `id` or
+   * the text in the field. A field allowing a custom value, which may hold
+   * text that is no option's, always submits the text, and one choosing
+   * several always submits the list of their `id`s.
+   * @default 'key'
+   */
+  readonly formValue?: 'key' | 'text';
+  /**
+   * A ref to the field's own `TextInput`, which is what a call site moves
+   * focus to, after a server's error, say. `ref` is the field as a whole.
+   */
+  readonly inputRef?: Ref<ComponentRef<typeof TextInput>>;
+  /** The text in the field, when the call site holds it. */
+  readonly inputValue?: string;
+  /**
+   * Draws the field disabled: it takes no focus and no input, and its list
+   * never opens.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Shows the value and takes focus, but takes no input, and its list never
+   * opens.
+   * @default false
+   */
+  readonly isReadOnly?: boolean;
+  /**
+   * Marks the label with an asterisk, as the text fields page marks a field
+   * that must be filled. Inside a `native` form, a field with nothing chosen
+   * holds the form back, or with nothing typed where it submits its text.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /** The items the options are built from, when the call site holds them. */
+  readonly items?: Iterable<T>;
+  /**
+   * What the field is for, and the name a screen reader reads for it.
+   * Required, since a combo box with no label is a box nobody can name.
+   */
+  readonly label: string;
+  /**
+   * An icon at the start of the box, before the label and the value: the
+   * page's 24dp leading icon, in the muted role. The slot hands it that
+   * colour and size through `useIconStyle()`.
+   */
+  readonly leadingIcon?: ReactNode;
+  /**
+   * What opens the list besides the chevron: typing into the field, the
+   * field taking focus, or nothing else.
+   * @default 'input'
+   */
+  readonly menuTrigger?: MenuTriggerAction;
+  /**
+   * The name the value is submitted under by the `Form` around the field,
+   * and the key its `validationErrors` reach the field by. What is
+   * submitted is set out under `formValue`.
+   */
+  readonly name?: string;
+  /**
+   * Called with what is chosen whenever it changes: an option's `id`, or
+   * the list of them with `selectionMode="multiple"`.
+   */
+  readonly onChange?: (value: ChangeValueType<M>) => void;
+  /** Called with the text in the field whenever an edit changes it. */
+  readonly onInputChange?: (value: string) => void;
+  /**
+   * Called with whether the list is open whenever that changes, and, as it
+   * opens, with what opened it.
+   */
+  readonly onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void;
+  /**
+   * The options, a `ListBox.Item` for each and `ListBox.Section` to group
+   * them. The list is a ListBox's, and draws every slot one does. Give
+   * every option an `id`, which is what the value holds. With `items` or
+   * `defaultItems`, a function from an item to its option.
+   */
+  readonly options?: ((item: T) => ReactElement) | ReactNode;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Whether one option is chosen, or several.
+   * @default 'single'
+   */
+  readonly selectionMode?: M;
+  /** Positions and sizes the field as a whole. */
+  readonly style?: StyleProp<ViewStyle>;
+  /** The test id of the field's `TextInput`, which is the control. */
+  readonly testID?: string;
+  /**
+   * Checks the value, handed the text in the field and what is chosen, and
+   * returns its problem in words, or several, where there is one, and
+   * `true`, `null` or `undefined` where there is none. Under the default
+   * `aria` validation the error shows as the value changes; inside a
+   * `native` form it shows once a submission is tried, or once the field
+   * loses focus after an edit, and holds the form back.
+   */
+  readonly validate?: (value: ComboBoxValidationValue<M>) => ValidationResult;
+  /** What is chosen, when the call site holds it. */
+  readonly value?: ValueType<M>;
+  /**
+   * The filled box, or the outlined one, as the text fields page draws them.
+   * @default 'filled'
+   */
+  readonly variant?: FieldVariant;
+};
+type ComboBoxSelectionMode = 'multiple' | 'single';
+/**
+ * A labelled text field that filters a list of options as it is typed. Its
+ * value is React Stately's: pass `value` with `onChange` to hold which
+ * option is chosen, `inputValue` with `onInputChange` to hold the text, or
+ * the `default` forms of either to let it keep its own. The value is an
+ * option's `id`, so give every option one; with `selectionMode="multiple"`
+ * it is a list of them.
+ *
+ * ```tsx
+ * <ComboBox
+ *   label="Label"
+ *   options={[
+ *     <ListBox.Item id="first" key="first">First item</ListBox.Item>,
+ *     <ListBox.Item id="second" key="second">Second item</ListBox.Item>,
+ *   ]}
+ * />
+ * ```
+ *
+ * The box, the label, the input, the supporting line and the error are the
+ * field chrome every field here draws; the list is a ListBox's, on the
+ * surface every anchored panel here draws. `style` and `ref` are the field
+ * as a whole, and `inputRef` and `testID` its `TextInput`.
+ */
+declare function ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({ allowsCustomValue, allowsEmptyCollection, defaultFilter, defaultInputValue, defaultItems, defaultValue, description, disabledKeys, error, floatingLabel, formValue, inputRef, inputValue, isDisabled, isReadOnly, isRequired, items, label, leadingIcon, menuTrigger, name, onChange, onInputChange, onOpenChange, options, ref, selectionMode, style, testID, validate, value, variant }: ComboBoxProps<T, M>): import("react").JSX.Element;
+//#endregion
+export { ComboBox, type ComboBoxProps, type ComboBoxSelectionMode };
+//# sourceMappingURL=index.d.ts.map