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

package/dist/field/index.js

@@ -0,0 +1,1007 @@
+import { IconStyleContext } from "../glyphs/icon-style.js";
+import { useTheme } from "../theme/scope.js";
+import { composeStyles } from "../theme/styles.js";
+import { useFontFamily } from "../typography/fonts.js";
+import { useTypeRole } from "../typography/roles.js";
+import { useInsideForm } from "../form/index.js";
+import { withOpacity } from "../theme/color.js";
+import { usePressFeedback } from "../press/index.js";
+import { fieldStylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, Platform, Pressable, Text, TextInput, View, useWindowDimensions } from "react-native";
+import { createContext, use, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Animated, { Easing, useAnimatedStyle, useDerivedValue, useReducedMotion, withTiming } from "react-native-reanimated";
+//#region src/field/index.tsx
+const ICON_SIZE = 24;
+const OUTSIDE_BOX = {
+	disabled: false,
+	floated: true,
+	invalid: false,
+	label: "none",
+	required: false,
+	underLabel: false
+};
+const BoxContext = createContext(OUTSIDE_BOX);
+const NO_PARTS = [];
+let counterFormat;
+/**
+* How a field's control is described by the line under it: the error while
+* there is one, otherwise the description, then the limit where there is a
+* `maxLength`. Hand the result to {@link FieldInput} as `described`, and the
+* same `id` to {@link FieldMessage}.
+*/
+function describedBy(id, { characterLimitLabel, description, error, maxLength }) {
+	const ids = idsOf(id);
+	const message = error === void 0 ? {
+		id: ids.description,
+		text: description ?? ""
+	} : {
+		id: ids.error,
+		text: error
+	};
+	const limit = limitOf(maxLength, characterLimitLabel);
+	return [...message.text === "" ? [] : [message], ...limit === void 0 ? [] : [{
+		id: ids.limit,
+		text: limit
+	}]];
+}
+/**
+* The box a control sits in, filled or outlined, with its label. Pressed
+* anywhere, it focuses its control. The states it draws are handed to it,
+* since the field around it is what knows them.
+*/
+function FieldBox(t0) {
+	const $ = c(72);
+	const { children, control, end, floatingLabel: t1, isDisabled: t2, isFocused: t3, isInvalid: t4, isPopulated: t5, isRequired: t6, label, leading, trailing, variant: t7 } = t0;
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const isFocused = t3 === void 0 ? false : t3;
+	const isInvalid = t4 === void 0 ? false : t4;
+	const isPopulated = t5 === void 0 ? false : t5;
+	const isRequired = t6 === void 0 ? false : t6;
+	const variant = t7 === void 0 ? "filled" : t7;
+	const theme = useTheme();
+	const styles = fieldStylesOf(theme);
+	const { fontScale } = useWindowDimensions();
+	const [notch, setNotch] = useState(0);
+	const { colors, radii, spacing, stateLayerOpacity, typography } = theme;
+	let t8;
+	if ($[0] !== radii.xs) {
+		t8 = {
+			borderTopEndRadius: radii.xs,
+			borderTopStartRadius: radii.xs
+		};
+		$[0] = radii.xs;
+		$[1] = t8;
+	} else t8 = $[1];
+	let t9;
+	if ($[2] !== colors.onSurface || $[3] !== isDisabled || $[4] !== t8) {
+		t9 = {
+			color: colors.onSurface,
+			corners: t8,
+			disabled: isDisabled,
+			disableRipple: true
+		};
+		$[2] = colors.onSurface;
+		$[3] = isDisabled;
+		$[4] = t8;
+		$[5] = t9;
+	} else t9 = $[5];
+	const feedback = usePressFeedback(t9);
+	const outlined = variant === "outlined";
+	const floated = !floatingLabel || isFocused || isPopulated;
+	let t10;
+	if ($[6] !== feedback.hovered || $[7] !== isDisabled || $[8] !== isFocused || $[9] !== isInvalid) {
+		t10 = {
+			disabled: isDisabled,
+			focused: isFocused,
+			hovered: feedback.hovered,
+			invalid: isInvalid
+		};
+		$[6] = feedback.hovered;
+		$[7] = isDisabled;
+		$[8] = isFocused;
+		$[9] = isInvalid;
+		$[10] = t10;
+	} else t10 = $[10];
+	const rule = useRuleMotion(theme, t10);
+	const t11 = !outlined;
+	let t12;
+	if ($[11] !== floated || $[12] !== floatingLabel || $[13] !== isDisabled || $[14] !== isInvalid || $[15] !== isRequired || $[16] !== t11) {
+		t12 = boxControlOf(floatingLabel, floated, isDisabled, isInvalid, isRequired, t11);
+		$[11] = floated;
+		$[12] = floatingLabel;
+		$[13] = isDisabled;
+		$[14] = isInvalid;
+		$[15] = isRequired;
+		$[16] = t11;
+		$[17] = t12;
+	} else t12 = $[17];
+	const boxControl = t12;
+	let t13;
+	if ($[18] !== colors.onSurface || $[19] !== stateLayerOpacity.disabledContent) {
+		t13 = withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+		$[18] = colors.onSurface;
+		$[19] = stateLayerOpacity.disabledContent;
+		$[20] = t13;
+	} else t13 = $[20];
+	const disabledContent = t13;
+	const T0 = Pressable;
+	const t14 = false;
+	const t15 = false;
+	const t16 = feedback.handlers.onHoverIn;
+	const t17 = feedback.handlers.onHoverOut;
+	let t18;
+	if ($[21] !== control) {
+		t18 = focusOf(control);
+		$[21] = control;
+		$[22] = t18;
+	} else t18 = $[22];
+	const t19 = composeStyles(styles.box, leading === void 0 ? void 0 : styles.boxLeading, trailing === void 0 ? void 0 : styles.boxTrailing, outlined ? styles.boxOutlined : void 0, isDisabled && !outlined ? styles.boxDisabled : void 0, minHeightOf(outlined ? 2 * spacing.lg + typography.bodyLargeLineHeight * fontScale : 2 * spacing.sm + (typography.bodySmallLineHeight + typography.bodyLargeLineHeight) * fontScale));
+	const t20 = outlined ? /* @__PURE__ */ jsxs(View, {
+		"aria-hidden": true,
+		style: styles.outline,
+		children: [
+			/* @__PURE__ */ jsx(View, {
+				style: composeStyles(styles.outlineStart, widthOf(outlineInset(spacing, leading))),
+				children: /* @__PURE__ */ jsx(FieldStroke, {
+					color: rule.color,
+					sides: "all",
+					style: styles.outlineStartBox,
+					width: rule.width
+				})
+			}),
+			/* @__PURE__ */ jsx(View, {
+				style: composeStyles(styles.outlineNotch, widthOf(floated ? notch : 0)),
+				children: /* @__PURE__ */ jsx(FieldStroke, {
+					color: rule.color,
+					sides: "all",
+					style: styles.outlineNotchBox,
+					width: rule.width
+				})
+			}),
+			/* @__PURE__ */ jsx(View, {
+				style: composeStyles(styles.outlineEnd, minWidthOf(outlineInset(spacing, trailing))),
+				children: /* @__PURE__ */ jsx(FieldStroke, {
+					color: rule.color,
+					sides: "all",
+					style: styles.outlineEndBox,
+					width: rule.width
+				})
+			})
+		]
+	}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [feedback.layer, /* @__PURE__ */ jsx(FieldStroke, {
+		color: rule.color,
+		sides: "top",
+		style: styles.indicator,
+		width: rule.width
+	})] });
+	let t21;
+	if ($[23] !== colors.onSurfaceVariant || $[24] !== disabledContent || $[25] !== isDisabled || $[26] !== leading || $[27] !== styles.icon) {
+		t21 = leading === void 0 ? null : /* @__PURE__ */ jsx(View, {
+			style: styles.icon,
+			children: /* @__PURE__ */ jsx(IconStyleContext, {
+				value: iconStyleOf(isDisabled ? disabledContent : colors.onSurfaceVariant),
+				children: leading
+			})
+		});
+		$[23] = colors.onSurfaceVariant;
+		$[24] = disabledContent;
+		$[25] = isDisabled;
+		$[26] = leading;
+		$[27] = styles.icon;
+		$[28] = t21;
+	} else t21 = $[28];
+	let t22;
+	if ($[29] !== floated || $[30] !== floatingLabel || $[31] !== isDisabled || $[32] !== isFocused || $[33] !== isInvalid || $[34] !== isRequired || $[35] !== label || $[36] !== variant) {
+		t22 = /* @__PURE__ */ jsx(BoxLabel, {
+			floated,
+			floatingLabel,
+			isDisabled,
+			isFocused,
+			isInvalid,
+			isRequired,
+			variant,
+			children: label
+		});
+		$[29] = floated;
+		$[30] = floatingLabel;
+		$[31] = isDisabled;
+		$[32] = isFocused;
+		$[33] = isInvalid;
+		$[34] = isRequired;
+		$[35] = label;
+		$[36] = variant;
+		$[37] = t22;
+	} else t22 = $[37];
+	let t23;
+	if ($[38] !== floatingLabel || $[39] !== isRequired || $[40] !== label || $[41] !== outlined || $[42] !== setNotch) {
+		t23 = outlined ? /* @__PURE__ */ jsx(NotchMeasure, {
+			floatingLabel,
+			isRequired,
+			onMeasure: setNotch,
+			children: label
+		}) : null;
+		$[38] = floatingLabel;
+		$[39] = isRequired;
+		$[40] = label;
+		$[41] = outlined;
+		$[42] = setNotch;
+		$[43] = t23;
+	} else t23 = $[43];
+	let t24;
+	if ($[44] !== boxControl || $[45] !== children) {
+		t24 = /* @__PURE__ */ jsx(BoxContext, {
+			value: boxControl,
+			children
+		});
+		$[44] = boxControl;
+		$[45] = children;
+		$[46] = t24;
+	} else t24 = $[46];
+	let t25;
+	if ($[47] !== styles.column || $[48] !== t22 || $[49] !== t23 || $[50] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(View, {
+			style: styles.column,
+			children: [
+				t22,
+				t23,
+				t24
+			]
+		});
+		$[47] = styles.column;
+		$[48] = t22;
+		$[49] = t23;
+		$[50] = t24;
+		$[51] = t25;
+	} else t25 = $[51];
+	let t26;
+	if ($[52] !== colors.error || $[53] !== colors.onSurfaceVariant || $[54] !== disabledContent || $[55] !== isDisabled || $[56] !== isInvalid || $[57] !== styles.icon || $[58] !== trailing) {
+		t26 = trailing === void 0 ? null : /* @__PURE__ */ jsx(View, {
+			style: styles.icon,
+			children: /* @__PURE__ */ jsx(IconStyleContext, {
+				value: iconStyleOf(isDisabled ? disabledContent : isInvalid ? colors.error : colors.onSurfaceVariant),
+				children: trailing
+			})
+		});
+		$[52] = colors.error;
+		$[53] = colors.onSurfaceVariant;
+		$[54] = disabledContent;
+		$[55] = isDisabled;
+		$[56] = isInvalid;
+		$[57] = styles.icon;
+		$[58] = trailing;
+		$[59] = t26;
+	} else t26 = $[59];
+	let t27;
+	if ($[60] !== T0 || $[61] !== end || $[62] !== feedback.handlers.onHoverIn || $[63] !== feedback.handlers.onHoverOut || $[64] !== isDisabled || $[65] !== t18 || $[66] !== t19 || $[67] !== t20 || $[68] !== t21 || $[69] !== t25 || $[70] !== t26) {
+		t27 = /* @__PURE__ */ jsxs(T0, {
+			accessible: t14,
+			disabled: isDisabled,
+			focusable: t15,
+			onHoverIn: t16,
+			onHoverOut: t17,
+			onPress: t18,
+			style: t19,
+			children: [
+				t20,
+				t21,
+				t25,
+				end,
+				t26
+			]
+		});
+		$[60] = T0;
+		$[61] = end;
+		$[62] = feedback.handlers.onHoverIn;
+		$[63] = feedback.handlers.onHoverOut;
+		$[64] = isDisabled;
+		$[65] = t18;
+		$[66] = t19;
+		$[67] = t20;
+		$[68] = t21;
+		$[69] = t25;
+		$[70] = t26;
+		$[71] = t27;
+	} else t27 = $[71];
+	return t27;
+}
+/**
+* A field's text control, in a {@link FieldBox}, or in {@link FieldStates}
+* inside a container of a field's own. In a box it clears the label at the
+* top where the box is filled, and shows a prefix and a suffix only while the
+* label has floated, since at rest the label sits on their line. It takes the
+* error role for its caret while the field has an error, and draws a
+* placeholder in the muted role.
+*
+* It is described by its prefix and suffix, ahead of what the field hands it
+* in `described`, so a reader hears the unit the value is read against as a
+* sighted one sees it beside the value: on iOS and Android as its hint, and
+* under React Native Web through `aria-describedby`, which drops the hint.
+*/
+function FieldInput(t0) {
+	const $ = c(23);
+	let prefix;
+	let props;
+	let suffix;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({described: t1, numeric: t2, prefix, suffix, ...props} = t0);
+		$[0] = t0;
+		$[1] = prefix;
+		$[2] = props;
+		$[3] = suffix;
+		$[4] = t1;
+		$[5] = t2;
+	} else {
+		prefix = $[1];
+		props = $[2];
+		suffix = $[3];
+		t1 = $[4];
+		t2 = $[5];
+	}
+	const described = t1 === void 0 ? NO_PARTS : t1;
+	const numeric = t2 === void 0 ? false : t2;
+	const box = use(BoxContext);
+	const theme = useTheme();
+	const styles = fieldStylesOf(theme);
+	const { fontScale } = useWindowDimensions();
+	const role = useTypeRole("bodyLarge");
+	const mono = useFontFamily(theme.typography.fontFamilyMono);
+	const id = useId();
+	const { colors, stateLayerOpacity, typography } = theme;
+	const content = box.disabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurface;
+	const caret = box.invalid ? colors.error : colors.primary;
+	const muted = box.disabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurfaceVariant;
+	const affixed = prefix !== void 0 || suffix !== void 0;
+	const clearance = box.underLabel ? marginTopOf(typography.bodySmallLineHeight * fontScale) : void 0;
+	const affixStyle = composeStyles(role, colorOf(muted));
+	let t3;
+	if ($[6] !== described || $[7] !== id || $[8] !== prefix || $[9] !== suffix) {
+		t3 = descriptionOf([
+			...affixPart(`${id}-prefix`, prefix),
+			...affixPart(`${id}-suffix`, suffix),
+			...described
+		]);
+		$[6] = described;
+		$[7] = id;
+		$[8] = prefix;
+		$[9] = suffix;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== box) {
+		t4 = webStateOf(box);
+		$[11] = box;
+		$[12] = t4;
+	} else t4 = $[12];
+	const control = /* @__PURE__ */ jsx(TextInput, {
+		...Platform.OS === "web" ? INHERITS_DIRECTION : void 0,
+		...props,
+		...t3,
+		...t4,
+		"aria-disabled": box.disabled,
+		cursorColor: caret,
+		placeholderTextColor: muted,
+		selectionColor: caret,
+		style: composeStyles(role, styles.input, colorOf(content), numeric ? numericOf(mono) : void 0, minHeightOf(typography.bodyLargeLineHeight * fontScale), affixed ? void 0 : clearance),
+		underlineColorAndroid: "transparent"
+	});
+	if (!affixed) return control;
+	let t5;
+	if ($[13] !== affixStyle || $[14] !== box.floated || $[15] !== id || $[16] !== prefix) {
+		t5 = prefix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
+			floated: box.floated,
+			id: `${id}-prefix`,
+			style: affixStyle,
+			children: prefix
+		});
+		$[13] = affixStyle;
+		$[14] = box.floated;
+		$[15] = id;
+		$[16] = prefix;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== affixStyle || $[19] !== box.floated || $[20] !== id || $[21] !== suffix) {
+		t6 = suffix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
+			floated: box.floated,
+			id: `${id}-suffix`,
+			style: affixStyle,
+			children: suffix
+		});
+		$[18] = affixStyle;
+		$[19] = box.floated;
+		$[20] = id;
+		$[21] = suffix;
+		$[22] = t6;
+	} else t6 = $[22];
+	return /* @__PURE__ */ jsxs(View, {
+		style: composeStyles(styles.affixLine, clearance),
+		children: [
+			t5,
+			control,
+			t6
+		]
+	});
+}
+/**
+* The line under a field: the error while there is one, the description
+* otherwise, and the count of characters at its end. With nothing to show it
+* is out of the flow, so the field ends at its box. Inside a form it is drawn
+* anyway, empty, since a form is where an error arrives after the fact, from
+* a server or on a submission, and every field below this one would
+* otherwise move by the line's height when it does.
+*
+* On iOS and Android the control reads the line out as its hint, so the line
+* itself is hidden from VoiceOver and TalkBack rather than read twice. An
+* error is announced as it arrives, since a hint that changes is not read
+* again: on iOS through `announceForAccessibility`, and on Android, where the
+* error is left reachable for it, by a polite live region around it, which
+* is also what announces it under React Native Web. An error the field opens
+* with is not announced, as a live region in a browser does not read what it
+* was mounted holding.
+*
+* The count is hidden everywhere. It changes on every keystroke, and read
+* back at that rate it is worse than not hearing it, so the limit is said
+* once in the control's description instead.
+*/
+function FieldMessage(t0) {
+	const $ = c(18);
+	const { characterCount: t1, characterLimitLabel, description, error, id, length: t2, maxLength } = t0;
+	const characterCount = t1 === void 0 ? false : t1;
+	const length = t2 === void 0 ? 0 : t2;
+	const theme = useTheme();
+	const styles = fieldStylesOf(theme);
+	const role = useTypeRole("bodySmall");
+	const { fontScale } = useWindowDimensions();
+	let t3;
+	if ($[0] !== id) {
+		t3 = idsOf(id);
+		$[0] = id;
+		$[1] = t3;
+	} else t3 = $[1];
+	const ids = t3;
+	const invalid = error !== void 0;
+	let t4;
+	if ($[2] !== characterLimitLabel || $[3] !== maxLength) {
+		t4 = limitOf(maxLength, characterLimitLabel);
+		$[2] = characterLimitLabel;
+		$[3] = maxLength;
+		$[4] = t4;
+	} else t4 = $[4];
+	const limit = t4;
+	const insideForm = useInsideForm();
+	const collapsed = !invalid && description === void 0 && !characterCount && !insideForm;
+	const { colors, typography } = theme;
+	const messageStyle = composeStyles(role, colorOf(invalid ? colors.error : colors.onSurfaceVariant), SHRINKS);
+	useErrorAnnouncement(error);
+	const T0 = View;
+	const t5 = composeStyles(styles.messageLine, collapsed ? styles.messageLineCollapsed : minHeightOf(typography.bodySmallLineHeight * fontScale));
+	const t6 = invalid && error !== "" ? SHRINKS : OUT_OF_FLOW;
+	const t7 = invalid && error !== "" ? /* @__PURE__ */ jsx(Text, {
+		id: ids.error,
+		style: messageStyle,
+		children: error
+	}) : null;
+	let t8;
+	if ($[5] !== t6 || $[6] !== t7) {
+		t8 = /* @__PURE__ */ jsx(View, {
+			"aria-live": "polite",
+			...Platform.OS === "web" ? ATOMIC : void 0,
+			...Platform.OS === "ios" ? HIDDEN : void 0,
+			style: t6,
+			children: t7
+		});
+		$[5] = t6;
+		$[6] = t7;
+		$[7] = t8;
+	} else t8 = $[7];
+	const t9 = invalid || description === void 0 ? null : /* @__PURE__ */ jsx(Text, {
+		...Platform.OS === "web" ? void 0 : HIDDEN,
+		id: ids.description,
+		style: messageStyle,
+		children: description
+	});
+	let t10;
+	if ($[8] !== ids || $[9] !== limit) {
+		t10 = limit === void 0 || Platform.OS !== "web" ? null : /* @__PURE__ */ jsx(Text, {
+			id: ids.limit,
+			style: NOT_DRAWN,
+			children: limit
+		});
+		$[8] = ids;
+		$[9] = limit;
+		$[10] = t10;
+	} else t10 = $[10];
+	const t11 = characterCount ? /* @__PURE__ */ jsx(Text, {
+		"aria-hidden": true,
+		style: composeStyles(messageStyle, styles.counter),
+		children: countOf(length, maxLength)
+	}) : null;
+	let t12;
+	if ($[11] !== T0 || $[12] !== t10 || $[13] !== t11 || $[14] !== t5 || $[15] !== t8 || $[16] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(T0, {
+			style: t5,
+			children: [
+				t8,
+				t9,
+				t10,
+				t11
+			]
+		});
+		$[11] = T0;
+		$[12] = t10;
+		$[13] = t11;
+		$[14] = t5;
+		$[15] = t8;
+		$[16] = t9;
+		$[17] = t12;
+	} else t12 = $[17];
+	return t12;
+}
+/**
+* Hands a control outside a box the states it is drawn in, for a field that
+* draws a container of its own around the control, as SearchField's bar is.
+* The control takes its colours and the state a screen reader reads from
+* these, as it does from the box around it.
+*/
+function FieldStates(t0) {
+	const $ = c(7);
+	const { children, isDisabled: t1, isInvalid: t2, isRequired: t3 } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const isInvalid = t2 === void 0 ? false : t2;
+	const isRequired = t3 === void 0 ? false : t3;
+	let t4;
+	if ($[0] !== isDisabled || $[1] !== isInvalid || $[2] !== isRequired) {
+		t4 = {
+			...OUTSIDE_BOX,
+			disabled: isDisabled,
+			invalid: isInvalid,
+			required: isRequired
+		};
+		$[0] = isDisabled;
+		$[1] = isInvalid;
+		$[2] = isRequired;
+		$[3] = t4;
+	} else t4 = $[3];
+	const states = t4;
+	let t5;
+	if ($[4] !== children || $[5] !== states) {
+		t5 = /* @__PURE__ */ jsx(BoxContext, {
+			value: states,
+			children
+		});
+		$[4] = children;
+		$[5] = states;
+		$[6] = t5;
+	} else t5 = $[6];
+	return t5;
+}
+/**
+* Tracks whether the control has focus, around the handlers the field was
+* given, which are called after.
+*/
+function useFieldFocus(t0) {
+	const $ = c(10);
+	const { onBlur, onFocus } = t0;
+	const [focused, setFocused] = useState(false);
+	let t1;
+	if ($[0] !== onBlur) {
+		t1 = (event) => {
+			setFocused(false);
+			onBlur?.(event);
+		};
+		$[0] = onBlur;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = t1;
+	let t3;
+	if ($[2] !== onFocus) {
+		t3 = (event_0) => {
+			setFocused(true);
+			onFocus?.(event_0);
+		};
+		$[2] = onFocus;
+		$[3] = t3;
+	} else t3 = $[3];
+	const t4 = t3;
+	let t5;
+	if ($[4] !== t2 || $[5] !== t4) {
+		t5 = {
+			onBlur: t2,
+			onFocus: t4
+		};
+		$[4] = t2;
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== focused || $[8] !== t5) {
+		t6 = {
+			focused,
+			handlers: t5
+		};
+		$[7] = focused;
+		$[8] = t5;
+		$[9] = t6;
+	} else t6 = $[9];
+	return t6;
+}
+const ATOMIC = { "aria-atomic": true };
+const HIDDEN = { "aria-hidden": true };
+const INHERITS_DIRECTION = { dir: null };
+const NOT_DRAWN = { display: "none" };
+const OUT_OF_FLOW = { position: "absolute" };
+const SHRINKS = { flexShrink: 1 };
+/**
+* A prefix or a suffix, faded in once the label has floated and out when it
+* comes back to rest, over the label's own `durationShort3`.
+*/
+function Affix(t0) {
+	const $ = c(7);
+	const { children, floated, id, style } = t0;
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const opacity = floated ? 1 : 0;
+	const timing = {
+		duration: motion.durationShort3,
+		easing: Easing.bezier(...motion.easingStandard)
+	};
+	const fade = useAnimatedStyle(() => {
+		"worklet";
+		return { opacity: reduceMotion ? opacity : withTiming(opacity, timing) };
+	});
+	let t1;
+	if ($[0] !== fade || $[1] !== style) {
+		t1 = composeStyles(style, fade);
+		$[0] = fade;
+		$[1] = style;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== children || $[4] !== id || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Animated.Text, {
+			id,
+			style: t1,
+			children
+		});
+		$[3] = children;
+		$[4] = id;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+function affixPart(id, affix) {
+	if (affix === void 0) return [];
+	return [{
+		id,
+		text: typeof affix === "string" || typeof affix === "number" ? String(affix) : ""
+	}];
+}
+function boxControlOf(floatingLabel, floated, disabled, invalid, required, underLabel) {
+	return {
+		disabled,
+		floated,
+		invalid,
+		label: floatingLabel ? "floating" : "fixed",
+		required,
+		underLabel
+	};
+}
+/**
+* The box's label: one line, cut short with an ellipsis, moving between its
+* resting place and its floated one. Hidden from screen readers, since the
+* control is named by the same words.
+*/
+function BoxLabel(t0) {
+	const $ = c(9);
+	const { children, floated, floatingLabel, isDisabled, isFocused, isInvalid, isRequired, variant } = t0;
+	const theme = useTheme();
+	const styles = fieldStylesOf(theme);
+	const { fontScale } = useWindowDimensions();
+	const reduceMotion = useReducedMotion();
+	const large = useTypeRole("bodyLarge");
+	const small = useTypeRole(floatingLabel ? "bodySmall" : "labelMedium");
+	const { colors, motion, spacing, stateLayerOpacity, typography } = theme;
+	const outlined = variant === "outlined";
+	const smallRole = floatingLabel ? "bodySmall" : "labelMedium";
+	const place = floated ? {
+		fontSize: typography[`${smallRole}Size`],
+		letterSpacing: typography[`${smallRole}Tracking`],
+		lineHeight: typography[`${smallRole}LineHeight`],
+		top: outlined ? -(spacing.lg + typography[`${smallRole}LineHeight`] * fontScale / 2) : 0
+	} : {
+		fontSize: typography.bodyLargeSize,
+		letterSpacing: typography.bodyLargeTracking,
+		lineHeight: typography.bodyLargeLineHeight,
+		top: outlined ? 0 : typography.bodySmallLineHeight * fontScale / 2
+	};
+	const color = isDisabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : isInvalid ? colors.error : isFocused ? colors.primary : colors.onSurfaceVariant;
+	const timing = {
+		duration: motion.durationShort3,
+		easing: Easing.bezier(...motion.easingStandard)
+	};
+	const motionStyle = useAnimatedStyle(() => {
+		"worklet";
+		return {
+			color: reduceMotion ? color : withTiming(color, timing),
+			fontSize: reduceMotion ? place.fontSize : withTiming(place.fontSize, timing),
+			letterSpacing: reduceMotion ? place.letterSpacing : withTiming(place.letterSpacing, timing),
+			lineHeight: reduceMotion ? place.lineHeight : withTiming(place.lineHeight, timing),
+			top: reduceMotion ? place.top : withTiming(place.top, timing)
+		};
+	});
+	const T0 = View;
+	const t1 = true;
+	const t2 = composeStyles(styles.label, outlined ? styles.labelOutlined : void 0);
+	const t3 = Animated;
+	const t4 = 1;
+	const t5 = composeStyles(floated ? small : large, outlined ? styles.labelTextOutlined : void 0, motionStyle);
+	const t6 = isRequired ? REQUIRED_MARK : null;
+	let t7;
+	if ($[0] !== children || $[1] !== t3.Text || $[2] !== t5 || $[3] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(t3.Text, {
+			numberOfLines: t4,
+			style: t5,
+			children: [children, t6]
+		});
+		$[0] = children;
+		$[1] = t3.Text;
+		$[2] = t5;
+		$[3] = t6;
+		$[4] = t7;
+	} else t7 = $[4];
+	let t8;
+	if ($[5] !== T0 || $[6] !== t2 || $[7] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			"aria-hidden": t1,
+			style: t2,
+			children: t7
+		});
+		$[5] = T0;
+		$[6] = t2;
+		$[7] = t7;
+		$[8] = t8;
+	} else t8 = $[8];
+	return t8;
+}
+function colorOf(color) {
+	return { color };
+}
+function countOf(length, maxLength) {
+	counterFormat ??= new Intl.NumberFormat();
+	return maxLength === void 0 ? counterFormat.format(length) : `${counterFormat.format(length)}/${counterFormat.format(maxLength)}`;
+}
+function descriptionOf(parts) {
+	if (Platform.OS === "web") return parts.length === 0 ? void 0 : { "aria-describedby": parts.map((part) => part.id).join(" ") };
+	const said = parts.map((part) => part.text).filter((text) => text !== "");
+	return said.length === 0 ? void 0 : { accessibilityHint: said.join(" ") };
+}
+function focusOf(control) {
+	return () => {
+		control.current?.focus();
+	};
+}
+function iconStyleOf(color) {
+	return {
+		color,
+		size: ICON_SIZE
+	};
+}
+function idsOf(id) {
+	return {
+		description: `${id}-description`,
+		error: `${id}-error`,
+		limit: `${id}-limit`
+	};
+}
+/**
+* The limit in words where there is one: the field's own, or English, which
+* an app in another language replaces through `characterLimitLabel`.
+*/
+function limitOf(maxLength, label) {
+	if (maxLength === void 0) return;
+	return label ?? (maxLength === 1 ? "Up to 1 character" : `Up to ${String(maxLength)} characters`);
+}
+function marginTopOf(marginTop) {
+	return { marginTop };
+}
+function minHeightOf(minHeight) {
+	return { minHeight };
+}
+function minWidthOf(minWidth) {
+	return { minWidth };
+}
+/**
+* The label's text in its floated type, out of sight, measured for the
+* outlined box's notch.
+*/
+function NotchMeasure(t0) {
+	const $ = c(12);
+	const { children, floatingLabel, isRequired, onMeasure } = t0;
+	const styles = fieldStylesOf(useTheme());
+	const small = useTypeRole(floatingLabel ? "bodySmall" : "labelMedium");
+	const T0 = View;
+	const t1 = true;
+	const t2 = composeStyles(styles.label, styles.labelOutlined, styles.notchMeasure);
+	const T1 = Text;
+	const t3 = 1;
+	let t4;
+	if ($[0] !== onMeasure) {
+		t4 = widthTo(onMeasure);
+		$[0] = onMeasure;
+		$[1] = t4;
+	} else t4 = $[1];
+	const t5 = composeStyles(small, styles.labelTextOutlined);
+	const t6 = isRequired ? REQUIRED_MARK : null;
+	let t7;
+	if ($[2] !== T1 || $[3] !== children || $[4] !== t4 || $[5] !== t5 || $[6] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(T1, {
+			numberOfLines: t3,
+			onLayout: t4,
+			style: t5,
+			children: [children, t6]
+		});
+		$[2] = T1;
+		$[3] = children;
+		$[4] = t4;
+		$[5] = t5;
+		$[6] = t6;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== T0 || $[9] !== t2 || $[10] !== t7) {
+		t8 = /* @__PURE__ */ jsx(T0, {
+			"aria-hidden": t1,
+			style: t2,
+			children: t7
+		});
+		$[8] = T0;
+		$[9] = t2;
+		$[10] = t7;
+		$[11] = t8;
+	} else t8 = $[11];
+	return t8;
+}
+function numericOf(fontFamily) {
+	return {
+		fontFamily,
+		fontVariant: ["tabular-nums"]
+	};
+}
+function outlineInset(spacing, icon) {
+	return (icon === void 0 ? spacing.lg : spacing.md + ICON_SIZE + spacing.lg) - spacing.xs;
+}
+const REQUIRED_MARK = "*";
+/**
+* One view drawing a field's rule in its eased colour and width, from
+* {@link useStrokeMotion}: on every side, for the outlined box's outline,
+* which the piece around it clips, and a bar's ring, or on the top alone,
+* for the filled box's indicator.
+*/
+function FieldStroke(t0) {
+	const $ = c(5);
+	const { color, sides, style, width } = t0;
+	const stroke = useAnimatedStyle(() => {
+		"worklet";
+		return sides === "all" ? {
+			borderColor: color.get(),
+			borderWidth: width.get()
+		} : {
+			borderColor: color.get(),
+			borderTopWidth: width.get()
+		};
+	});
+	let t1;
+	if ($[0] !== stroke || $[1] !== style) {
+		t1 = composeStyles(style, stroke);
+		$[0] = stroke;
+		$[1] = style;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Animated.View, {
+			"aria-hidden": true,
+			style: t1
+		});
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+function useErrorAnnouncement(error) {
+	const $ = c(3);
+	const said = useRef(error);
+	let t0;
+	let t1;
+	if ($[0] !== error) {
+		t0 = () => {
+			if (Platform.OS === "ios" && error !== void 0 && error !== "" && error !== said.current) AccessibilityInfo.announceForAccessibility(error);
+			said.current = error;
+		};
+		t1 = [error];
+		$[0] = error;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+}
+/**
+* The rule the box draws, the filled box's indicator or the outlined box's
+* outline: its colour and its width by state.
+*/
+function useRuleMotion(theme, state) {
+	const $ = c(11);
+	const { colors, stateLayerOpacity } = theme;
+	const width = !state.disabled && state.focused ? 2 : 1;
+	let t0;
+	if ($[0] !== colors.error || $[1] !== colors.onErrorContainer || $[2] !== colors.onSurface || $[3] !== colors.outline || $[4] !== colors.primary || $[5] !== state.disabled || $[6] !== state.focused || $[7] !== state.hovered || $[8] !== state.invalid || $[9] !== stateLayerOpacity) {
+		t0 = state.disabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer) : state.focused ? state.invalid ? colors.error : colors.primary : state.hovered ? state.invalid ? colors.onErrorContainer : colors.onSurface : state.invalid ? colors.error : colors.outline;
+		$[0] = colors.error;
+		$[1] = colors.onErrorContainer;
+		$[2] = colors.onSurface;
+		$[3] = colors.outline;
+		$[4] = colors.primary;
+		$[5] = state.disabled;
+		$[6] = state.focused;
+		$[7] = state.hovered;
+		$[8] = state.invalid;
+		$[9] = stateLayerOpacity;
+		$[10] = t0;
+	} else t0 = $[10];
+	return useStrokeMotion(t0, width);
+}
+/**
+* A rule's colour and width, eased to each new pair over `durationShort2` as
+* web transitions them, and moved at once under reduced motion. Hand the
+* result to {@link FieldStroke}.
+*/
+function useStrokeMotion(color, width) {
+	const $ = c(3);
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const timing = {
+		duration: motion.durationShort2,
+		easing: Easing.bezier(...motion.easingStandard)
+	};
+	const t0 = useDerivedValue(() => reduceMotion ? color : withTiming(color, timing));
+	const t1 = useDerivedValue(() => reduceMotion ? width : withTiming(width, timing));
+	let t2;
+	if ($[0] !== t0 || $[1] !== t1) {
+		t2 = {
+			color: t0,
+			width: t1
+		};
+		$[0] = t0;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+function webStateOf(box) {
+	if (Platform.OS !== "web") return;
+	return {
+		...box.invalid ? { "aria-invalid": true } : void 0,
+		...box.required ? { "aria-required": true } : void 0
+	};
+}
+function widthOf(width) {
+	return { width };
+}
+function widthTo(onMeasure) {
+	return (event) => {
+		onMeasure(event.nativeEvent.layout.width);
+	};
+}
+//#endregion
+export { FieldBox, FieldInput, FieldMessage, FieldStates, FieldStroke, describedBy, useFieldFocus, useStrokeMotion };
+
+//# sourceMappingURL=index.js.map