@tamagui/field 0.0.0-bootstrap.0 → 3.0.0-beta.1091.1

package/dist/cjs/Field.cjs

@@ -0,0 +1,856 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Field_exports = {};
+__export(Field_exports, {
+	Field: () => Field2,
+	FieldDescriptionFrame: () => FieldDescriptionFrame,
+	FieldErrorFrame: () => FieldErrorFrame,
+	FieldFrame: () => FieldFrame,
+	FieldItemFrame: () => FieldItemFrame,
+	FieldLabelFrame: () => FieldLabelFrame
+});
+module.exports = __toCommonJS(Field_exports);
+var import_core = require("@tamagui/core");
+var import_form = require("@tamagui/form");
+var import_focusable = require("@tamagui/focusable");
+var React = __toESM(require("react"), 1);
+var import_FieldContext = require("./FieldContext.cjs");
+var import_validation = require("./validation.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const fieldStateVariants = {
+	valid: { true: {} },
+	invalid: { true: {} },
+	touched: { true: {} },
+	dirty: { true: {} },
+	filled: { true: {} },
+	focused: { true: {} },
+	disabled: { true: {} }
+};
+const FieldFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "Field",
+	context: import_FieldContext.FieldStyledContext,
+	variants: fieldStateVariants
+});
+const FieldLabelFrame = (0, import_core.styled)(import_core.Text, {
+	displayName: "FieldLabel",
+	render: "label",
+	context: import_FieldContext.FieldStyledContext,
+	variants: fieldStateVariants
+});
+const FieldDescriptionFrame = (0, import_core.styled)(import_core.Text, {
+	displayName: "FieldDescription",
+	render: "p",
+	context: import_FieldContext.FieldStyledContext,
+	variants: fieldStateVariants
+});
+const FieldErrorFrame = (0, import_core.styled)(import_core.Text, {
+	displayName: "FieldError",
+	render: "span",
+	context: import_FieldContext.FieldStyledContext,
+	variants: fieldStateVariants
+});
+const FieldItemFrame = (0, import_core.styled)(import_core.View, {
+	displayName: "FieldItem",
+	context: import_FieldContext.FieldStyledContext,
+	variants: fieldStateVariants
+});
+const validityKeys = [
+	"badInput",
+	"customError",
+	"patternMismatch",
+	"rangeOverflow",
+	"rangeUnderflow",
+	"stepMismatch",
+	"tooLong",
+	"tooShort",
+	"typeMismatch",
+	"valueMissing"
+];
+const AssociationContext = React.createContext(null);
+const FieldRootContext = React.createContext(null);
+const FieldItemContext = React.createContext(false);
+function getText(children) {
+	const text = [];
+	React.Children.forEach(children, (child) => {
+		if (typeof child === "string" || typeof child === "number") {
+			text.push(String(child));
+			return;
+		}
+		if (React.isValidElement(child)) {
+			const nested = getText(child.props.children);
+			if (nested) {
+				text.push(nested);
+			}
+		}
+	});
+	return text.join(" ").trim() || void 0;
+}
+function useAssociation(prefix, parent) {
+	const defaultControlId = `${prefix}-control`;
+	const controlIdsRef = React.useRef(/* @__PURE__ */ new Map());
+	const labelsRef = React.useRef(/* @__PURE__ */ new Map());
+	const messagesRef = React.useRef(/* @__PURE__ */ new Map());
+	const [, update] = React.useReducer((value) => value + 1, 0);
+	const registerControlId = React.useCallback((id) => {
+		const source = /* @__PURE__ */ Symbol();
+		controlIdsRef.current.set(source, id);
+		update();
+		return () => {
+			controlIdsRef.current.delete(source);
+			update();
+		};
+	}, []);
+	const registerLabel = React.useCallback((id, text) => {
+		const source = /* @__PURE__ */ Symbol();
+		labelsRef.current.set(source, {
+			id,
+			text
+		});
+		update();
+		return () => {
+			labelsRef.current.delete(source);
+			update();
+		};
+	}, []);
+	const registerMessage = React.useCallback((id, text) => {
+		const source = /* @__PURE__ */ Symbol();
+		messagesRef.current.set(source, {
+			id,
+			text
+		});
+		update();
+		return () => {
+			messagesRef.current.delete(source);
+			update();
+		};
+	}, []);
+	const controlId = Array.from(controlIdsRef.current.values()).at(-1) ?? defaultControlId;
+	const label = Array.from(labelsRef.current.values()).at(-1);
+	const messages = Array.from(messagesRef.current.values());
+	return React.useMemo(() => ({
+		controlId,
+		labelId: [parent?.labelId, label?.id].filter(Boolean).join(" ") || void 0,
+		labelText: [parent?.labelText, label?.text].filter(Boolean).join(" ") || void 0,
+		messageIds: Array.from(/* @__PURE__ */ new Set([...parent?.messageIds ?? [], ...messages.map((message) => message.id)])),
+		messageTexts: [...parent?.messageTexts ?? [], ...messages.flatMap((message) => message.text ? [message.text] : [])],
+		registerControlId,
+		registerLabel,
+		registerMessage
+	}), [
+		controlId,
+		label?.id,
+		label?.text,
+		messages,
+		parent?.labelId,
+		parent?.labelText,
+		parent?.messageIds,
+		parent?.messageTexts,
+		registerControlId,
+		registerLabel,
+		registerMessage
+	]);
+}
+function getStyleState(state, disabled = state.disabled) {
+	return {
+		valid: state.valid === true,
+		invalid: state.valid === false,
+		touched: state.touched,
+		dirty: state.dirty,
+		filled: state.filled,
+		focused: state.focused,
+		disabled
+	};
+}
+function getDataProps(state, disabled = state.disabled) {
+	if (!import_core.isWeb) {
+		return {};
+	}
+	return {
+		"data-valid": state.valid === true ? "" : void 0,
+		"data-invalid": state.valid === false ? "" : void 0,
+		"data-touched": state.touched ? "" : void 0,
+		"data-dirty": state.dirty ? "" : void 0,
+		"data-filled": state.filled ? "" : void 0,
+		"data-focused": state.focused ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0
+	};
+}
+function useControlContext(root, association, itemDisabled = false, isItem = false) {
+	const disabled = root.state.disabled || itemDisabled;
+	const controlIdRef = React.useRef(association.controlId);
+	const registrationDisabledRef = React.useRef(root.rootDisabled || itemDisabled);
+	controlIdRef.current = association.controlId;
+	registrationDisabledRef.current = root.rootDisabled || itemDisabled;
+	const registerControl = React.useCallback((registration) => {
+		const id = registration.id ?? controlIdRef.current;
+		const unregisterId = association.registerControlId(id);
+		const nextRegistration = {
+			...registration,
+			id,
+			get disabled() {
+				return registrationDisabledRef.current || registration.disabled;
+			}
+		};
+		const unregisterControl = root.registerControl(nextRegistration, !isItem);
+		return () => {
+			unregisterControl();
+			unregisterId();
+		};
+	}, [
+		association.registerControlId,
+		isItem,
+		root.registerControl
+	]);
+	return React.useMemo(() => ({
+		name: root.name,
+		disabled,
+		ariaProps: {
+			id: association.controlId,
+			...import_core.isWeb ? {
+				"aria-labelledby": association.labelId,
+				"aria-describedby": association.messageIds.join(" ") || void 0,
+				"aria-invalid": root.state.valid === false ? true : void 0
+			} : {
+				accessibilityLabel: association.labelText,
+				accessibilityHint: association.messageTexts.join(" ") || void 0,
+				accessibilityState: disabled ? { disabled: true } : void 0
+			}
+		},
+		dataProps: getDataProps(root.state, disabled),
+		onFocus: root.onFocus,
+		onBlur: root.onBlur,
+		onChange: root.onChange,
+		onDisabledChange: isItem ? () => {} : root.onDisabledChange,
+		registerControl
+	}), [
+		association.controlId,
+		association.labelId,
+		association.labelText,
+		association.messageIds,
+		association.messageTexts,
+		disabled,
+		isItem,
+		registerControl,
+		root.name,
+		root.onBlur,
+		root.onChange,
+		root.onDisabledChange,
+		root.onFocus,
+		root.state
+	]);
+}
+function getRegistrationValue(registration) {
+	return registration?.getValue ? registration.getValue() : registration?.value;
+}
+function getInput(registration) {
+	return registration.inputRef?.current;
+}
+function canValidateInput(input) {
+	return Boolean(input && input.validity && typeof input.setCustomValidity === "function" && !input.disabled);
+}
+function isEligibleInput(input, formElement) {
+	if (input.matches?.(":disabled")) {
+		return false;
+	}
+	if (!formElement || input.form === formElement) {
+		return true;
+	}
+	return input.form === null && !input.hasAttribute?.("form");
+}
+function isEligibleRegistration(registration, formElement) {
+	if (registration.disabled) {
+		return false;
+	}
+	const input = getInput(registration);
+	return !canValidateInput(input) || isEligibleInput(input, formElement);
+}
+function getNativeValidity(input, showValueMissing) {
+	const state = (0, import_validation.createDefaultValidityState)(true);
+	for (const key of validityKeys) {
+		state[key] = Boolean(input.validity[key]);
+	}
+	state.valid = Boolean(input.validity.valid);
+	return (0, import_validation.normalizeNativeValidity)(state, showValueMissing);
+}
+function hasValidityError(state) {
+	return state.valid === false;
+}
+function hasError(errors) {
+	return Array.isArray(errors) ? errors.length > 0 : Boolean(errors);
+}
+const FieldComponent = (0, import_core.createStyledHOC)(FieldFrame, function Field({ name: nameProp, disabled: disabledProp = false, invalid = false, validate, validationMode: validationModeProp, validationDebounceTime = 0, children, ...fieldProps }, forwardedRef) {
+	const form = (0, import_form.useFormRegistryContext)();
+	const { clearErrors: clearFormErrors, errors: formErrors, formElementRef, getValues: getFormValues, registerField: registerFormField, submitAttemptedRef, validationMode: formValidationMode } = form;
+	const reactId = React.useId().replace(/:/g, "");
+	const association = useAssociation(`field-${reactId}`);
+	const fieldId = `field-${reactId}`;
+	const controlsRef = React.useRef(/* @__PURE__ */ new Map());
+	const reportsDisabledRef = React.useRef(/* @__PURE__ */ new WeakMap());
+	const activeControlRef = React.useRef(void 0);
+	const activeValidationControlRef = React.useRef(void 0);
+	const formControlRef = React.useRef(null);
+	const formValidityDataRef = React.useRef({ state: { valid: null } });
+	const initialValueRef = React.useRef(void 0);
+	const hasInitialValueRef = React.useRef(false);
+	const valueRef = React.useRef(void 0);
+	const dirtyRef = React.useRef(false);
+	const debounceRef = React.useRef(void 0);
+	const [registeredName, setRegisteredName] = React.useState();
+	const [controlDisabled, setControlDisabled] = React.useState(false);
+	const [touched, setTouched] = React.useState(false);
+	const [dirty, setDirty] = React.useState(false);
+	const [filled, setFilled] = React.useState(false);
+	const [focused, setFocused] = React.useState(false);
+	const [currentValue, setCurrentValue] = React.useState(void 0);
+	const [validityData, setValidityData] = React.useState({
+		state: (0, import_validation.createDefaultValidityState)(),
+		error: "",
+		errors: [],
+		value: void 0,
+		initialValue: void 0
+	});
+	const validityDataRef = React.useRef(validityData);
+	validityDataRef.current = validityData;
+	const effectiveName = nameProp ?? registeredName;
+	const effectiveNameRef = React.useRef(effectiveName);
+	effectiveNameRef.current = effectiveName;
+	const disabled = disabledProp || controlDisabled;
+	const disabledRef = React.useRef(disabled);
+	disabledRef.current = disabled;
+	const validationMode = validationModeProp ?? formValidationMode;
+	const externalError = effectiveName && effectiveName in formErrors ? formErrors[effectiveName] : void 0;
+	const externalErrors = Array.isArray(externalError) ? externalError : externalError ? [externalError] : [];
+	const externallyInvalid = invalid || hasError(externalError);
+	const externallyInvalidRef = React.useRef(externallyInvalid);
+	externallyInvalidRef.current = externallyInvalid;
+	const valid = externallyInvalid ? false : disabled ? null : validityData.state.valid;
+	formValidityDataRef.current.state.valid = disabled ? null : externallyInvalid ? false : validityData.state.valid;
+	const errors = externalErrors.length ? externalErrors : validityData.errors;
+	const error = errors[0] ?? "";
+	const state = React.useMemo(() => ({
+		name: effectiveName,
+		value: currentValue,
+		error,
+		errors,
+		validity: validityData.state,
+		valid,
+		touched,
+		dirty,
+		filled,
+		focused,
+		disabled
+	}), [
+		dirty,
+		disabled,
+		currentValue,
+		effectiveName,
+		error,
+		errors,
+		filled,
+		focused,
+		touched,
+		valid,
+		validityData.state
+	]);
+	const stateRef = React.useRef(state);
+	stateRef.current = state;
+	const publishValidityRef = React.useRef(() => {});
+	const validationCommitterRef = React.useRef(void 0);
+	if (!validationCommitterRef.current) {
+		validationCommitterRef.current = (0, import_validation.createValidationCommitter)((data) => {
+			publishValidityRef.current(data);
+		});
+	}
+	const getActiveControl = React.useCallback(() => {
+		let active;
+		for (const registration of controlsRef.current.values()) {
+			if (!isEligibleRegistration(registration, formElementRef.current)) {
+				continue;
+			}
+			active = registration;
+		}
+		return active;
+	}, [formElementRef]);
+	const syncControlDisabled = React.useCallback(() => {
+		let nextDisabled = false;
+		for (const registration of controlsRef.current.values()) {
+			if (reportsDisabledRef.current.get(registration)) {
+				nextDisabled = Boolean(registration.disabled);
+			}
+		}
+		setControlDisabled(nextDisabled);
+	}, []);
+	const getRepresentativeControl = React.useCallback(() => {
+		let fallback;
+		for (const registration of controlsRef.current.values()) {
+			const input = getInput(registration);
+			if (!isEligibleRegistration(registration, formElementRef.current)) {
+				continue;
+			}
+			fallback ??= registration;
+			if (canValidateInput(input) && !input.validity.valid) {
+				return registration;
+			}
+		}
+		return fallback ?? getActiveControl();
+	}, [formElementRef, getActiveControl]);
+	const clearCustomValidity = React.useCallback(() => {
+		for (const registration of controlsRef.current.values()) {
+			const input = getInput(registration);
+			if (canValidateInput(input)) {
+				input.setCustomValidity("");
+			}
+		}
+	}, []);
+	const setCustomValidity = React.useCallback((message) => {
+		for (const registration of controlsRef.current.values()) {
+			if (!isEligibleRegistration(registration, formElementRef.current)) {
+				continue;
+			}
+			const input = getInput(registration);
+			if (canValidateInput(input)) {
+				input.setCustomValidity(message);
+			}
+		}
+	}, [formElementRef]);
+	const publishValidity = React.useCallback((data) => {
+		if (data.state.customError) {
+			setCustomValidity(data.errors.join("\n"));
+		} else {
+			clearCustomValidity();
+		}
+		formValidityDataRef.current.state.valid = disabledRef.current ? null : externallyInvalidRef.current ? false : data.state.valid;
+		validityDataRef.current = data;
+		setCurrentValue(data.value);
+		setValidityData(data);
+	}, [clearCustomValidity, setCustomValidity]);
+	publishValidityRef.current = publishValidity;
+	const validateValue = React.useCallback((value, submit = false, fromChange = false) => {
+		if (debounceRef.current) {
+			clearTimeout(debounceRef.current);
+			debounceRef.current = void 0;
+		}
+		const showValueMissing = dirtyRef.current || submit || submitAttemptedRef.current;
+		if (fromChange) {
+			clearCustomValidity();
+		}
+		const representative = getRepresentativeControl();
+		activeValidationControlRef.current = representative;
+		formControlRef.current = representative?.controlRef.current ?? null;
+		const input = representative && getInput(representative);
+		let nativeState = (0, import_validation.createDefaultValidityState)(true);
+		let nativeMessage = "";
+		if (canValidateInput(input)) {
+			nativeState = getNativeValidity(input, showValueMissing);
+			nativeMessage = nativeState.valid === false ? input.validationMessage : "";
+		} else {
+			const required = Array.from(controlsRef.current.values()).some((registration) => registration.required && isEligibleRegistration(registration, formElementRef.current));
+			if (required && !(0, import_validation.isFilled)(value) && showValueMissing) {
+				nativeState = {
+					...(0, import_validation.createDefaultValidityState)(false),
+					valueMissing: true
+				};
+				nativeMessage = "Please fill out this field.";
+			}
+		}
+		const initialValue = initialValueRef.current;
+		const makeValidityData = (customErrors) => {
+			if (customErrors.length) {
+				return {
+					state: {
+						...nativeState,
+						valid: false,
+						customError: true
+					},
+					error: customErrors[0] ?? "",
+					errors: customErrors,
+					value,
+					initialValue
+				};
+			}
+			if (hasValidityError(nativeState)) {
+				return {
+					state: nativeState,
+					error: nativeMessage,
+					errors: nativeMessage ? [nativeMessage] : [],
+					value,
+					initialValue
+				};
+			}
+			return {
+				state: (0, import_validation.createDefaultValidityState)(true),
+				error: "",
+				errors: [],
+				value,
+				initialValue
+			};
+		};
+		if (nativeMessage && !fromChange) {
+			validationCommitterRef.current.run(makeValidityData([]));
+			return;
+		}
+		const result = validate ? (0, import_validation.getValidationResult)(validate, value, getFormValues()) : [];
+		if (result instanceof Promise) {
+			void validationCommitterRef.current.run(result.then((customErrors) => makeValidityData(customErrors)));
+		} else {
+			validationCommitterRef.current.run(makeValidityData(result));
+		}
+	}, [
+		clearCustomValidity,
+		formElementRef,
+		getFormValues,
+		getRepresentativeControl,
+		submitAttemptedRef,
+		validate
+	]);
+	const registerControl = React.useCallback((registration, reportDisabled = true) => {
+		const source = /* @__PURE__ */ Symbol();
+		controlsRef.current.set(source, registration);
+		reportsDisabledRef.current.set(registration, reportDisabled);
+		activeControlRef.current = getActiveControl();
+		formControlRef.current = activeControlRef.current?.controlRef.current ?? null;
+		const value = getRegistrationValue(registration);
+		valueRef.current = value;
+		setCurrentValue(value);
+		if (!hasInitialValueRef.current) {
+			hasInitialValueRef.current = true;
+			initialValueRef.current = value;
+			validityDataRef.current = {
+				...validityDataRef.current,
+				initialValue: value
+			};
+			setValidityData(validityDataRef.current);
+		}
+		if (!nameProp && registration.name) {
+			setRegisteredName(registration.name);
+		}
+		setFilled((0, import_validation.isFilled)(value));
+		syncControlDisabled();
+		return () => {
+			controlsRef.current.delete(source);
+			activeControlRef.current = getActiveControl();
+			activeValidationControlRef.current = void 0;
+			formControlRef.current = activeControlRef.current?.controlRef.current ?? null;
+			const next = activeControlRef.current;
+			const nextValue = getRegistrationValue(next);
+			valueRef.current = nextValue;
+			setCurrentValue(nextValue);
+			setFilled((0, import_validation.isFilled)(nextValue));
+			if (!nameProp) {
+				setRegisteredName(next?.name);
+			}
+			syncControlDisabled();
+		};
+	}, [
+		getActiveControl,
+		nameProp,
+		syncControlDisabled
+	]);
+	const onFocus = React.useCallback(() => {
+		setFocused(true);
+	}, []);
+	const onBlur = React.useCallback((value = valueRef.current) => {
+		valueRef.current = value;
+		setCurrentValue(value);
+		setTouched(true);
+		setFocused(false);
+		if (validationMode === "onBlur") {
+			validateValue(value);
+		}
+	}, [validateValue, validationMode]);
+	const onChange = React.useCallback((value) => {
+		valueRef.current = value;
+		setCurrentValue(value);
+		validationCommitterRef.current.invalidate();
+		if (debounceRef.current) {
+			clearTimeout(debounceRef.current);
+			debounceRef.current = void 0;
+		}
+		const nextDirty = !Object.is(value, initialValueRef.current);
+		dirtyRef.current = nextDirty;
+		setDirty(nextDirty);
+		setFilled((0, import_validation.isFilled)(value));
+		clearFormErrors(effectiveNameRef.current);
+		const validateOnChange = (0, import_validation.shouldValidateOnChange)(validationMode, submitAttemptedRef.current);
+		if (validateOnChange) {
+			if (validationMode === "onChange" && validationDebounceTime > 0 && value !== "") {
+				debounceRef.current = setTimeout(() => {
+					validateValue(value, false, true);
+				}, validationDebounceTime);
+			} else {
+				validateValue(value, false, true);
+			}
+			return;
+		}
+		if (stateRef.current.valid === false) {
+			const required = Array.from(controlsRef.current.values()).some((registration) => registration.required && isEligibleRegistration(registration, formElementRef.current));
+			if (required && !(0, import_validation.isFilled)(value) && dirtyRef.current) {
+				validateValue(value);
+				return;
+			}
+			clearCustomValidity();
+			publishValidity({
+				state: (0, import_validation.createDefaultValidityState)(true),
+				error: "",
+				errors: [],
+				value,
+				initialValue: initialValueRef.current
+			});
+		}
+	}, [
+		clearFormErrors,
+		clearCustomValidity,
+		formElementRef,
+		publishValidity,
+		submitAttemptedRef,
+		validateValue,
+		validationDebounceTime,
+		validationMode
+	]);
+	const onDisabledChange = React.useCallback((nextDisabled) => {
+		setControlDisabled(nextDisabled);
+	}, []);
+	React.useEffect(() => {
+		return () => {
+			validationCommitterRef.current?.invalidate();
+			if (debounceRef.current) {
+				clearTimeout(debounceRef.current);
+			}
+		};
+	}, []);
+	const formRegistration = React.useMemo(() => ({
+		controlRef: formControlRef,
+		validityData: formValidityDataRef.current,
+		get name() {
+			return stateRef.current.disabled ? void 0 : effectiveNameRef.current;
+		},
+		get controlId() {
+			return activeValidationControlRef.current?.id ?? getRepresentativeControl()?.id ?? association.controlId;
+		},
+		getValue() {
+			return getRegistrationValue(getActiveControl()) ?? valueRef.current;
+		},
+		validate() {
+			validateValue(getRegistrationValue(getActiveControl()) ?? valueRef.current, true);
+		}
+	}), [
+		association.controlId,
+		getActiveControl,
+		getRepresentativeControl,
+		validateValue
+	]);
+	React.useEffect(() => {
+		return registerFormField(fieldId, formRegistration);
+	}, [
+		fieldId,
+		formRegistration,
+		registerFormField
+	]);
+	const rootContext = React.useMemo(() => ({
+		state,
+		validityData,
+		name: effectiveName,
+		rootDisabled: disabledProp,
+		registerControl,
+		onFocus,
+		onBlur,
+		onChange,
+		onDisabledChange
+	}), [
+		disabledProp,
+		effectiveName,
+		onBlur,
+		onChange,
+		onDisabledChange,
+		onFocus,
+		registerControl,
+		state,
+		validityData
+	]);
+	const controlContext = useControlContext(rootContext, association);
+	const styleState = getStyleState(state);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FieldContext.FieldStateContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldRootContext.Provider, {
+			value: rootContext,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssociationContext.Provider, {
+				value: association,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FieldContext.FieldControlContext.Provider, {
+					value: controlContext,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FieldContext.FieldStyledContext.Provider, {
+						...styleState,
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldFrame, {
+							...fieldProps,
+							...getDataProps(state),
+							disabled,
+							ref: forwardedRef,
+							children
+						})
+					})
+				})
+			})
+		})
+	});
+});
+function usePartContexts() {
+	const root = React.useContext(FieldRootContext);
+	const association = React.useContext(AssociationContext);
+	const itemDisabled = React.useContext(FieldItemContext);
+	if (!root || !association) {
+		throw new Error("Field parts must be rendered inside <Field>.");
+	}
+	return {
+		root,
+		association,
+		itemDisabled
+	};
+}
+const FieldLabel = (0, import_core.createStyledHOC)(FieldLabelFrame, function FieldLabel2({ id: idProp, children, onPress, onMouseDown, ...labelProps }, forwardedRef) {
+	const { root, association, itemDisabled } = usePartContexts();
+	const generatedId = React.useId().replace(/:/g, "");
+	const id = idProp ?? `field-label-${generatedId}`;
+	const text = getText(children);
+	const disabled = root.state.disabled || itemDisabled;
+	(0, import_core.useIsomorphicLayoutEffect)(() => {
+		return association.registerLabel(id, text);
+	}, [
+		association.registerLabel,
+		id,
+		text
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabelFrame, {
+		...labelProps,
+		...getDataProps(root.state, disabled),
+		id,
+		ref: forwardedRef,
+		...import_core.isWeb ? { htmlFor: association.controlId } : void 0,
+		...!import_core.isWeb && disabled ? { accessibilityState: { disabled: true } } : void 0,
+		onMouseDown: (event) => {
+			onMouseDown?.(event);
+			if (!event.defaultPrevented && event.detail > 1) {
+				event.preventDefault();
+			}
+		},
+		onPress: (event) => {
+			onPress?.(event);
+			if (!import_core.isWeb && !event?.defaultPrevented) {
+				(0, import_focusable.focusFocusable)(association.controlId);
+			}
+		},
+		children
+	});
+});
+const FieldDescription = (0, import_core.createStyledHOC)(FieldDescriptionFrame, function FieldDescription2({ id: idProp, children, ...descriptionProps }, forwardedRef) {
+	const { root, association, itemDisabled } = usePartContexts();
+	const generatedId = React.useId().replace(/:/g, "");
+	const id = idProp ?? `field-description-${generatedId}`;
+	const text = getText(children);
+	const disabled = root.state.disabled || itemDisabled;
+	(0, import_core.useIsomorphicLayoutEffect)(() => {
+		return association.registerMessage(id, text);
+	}, [
+		association.registerMessage,
+		id,
+		text
+	]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldDescriptionFrame, {
+		...descriptionProps,
+		...getDataProps(root.state, disabled),
+		id,
+		ref: forwardedRef,
+		children
+	});
+});
+const FieldError = (0, import_core.createStyledHOC)(FieldErrorFrame, function FieldError2({ id: idProp, children, match, ...errorProps }, forwardedRef) {
+	const { root, association, itemDisabled } = usePartContexts();
+	const generatedId = React.useId().replace(/:/g, "");
+	const id = idProp ?? `field-error-${generatedId}`;
+	const disabled = root.state.disabled || itemDisabled;
+	const rendered = match === true || !disabled && (typeof match === "string" ? Boolean(root.validityData.state[match]) : root.state.valid === false);
+	const message = children ?? root.state.errors.join("\n");
+	const text = getText(message);
+	(0, import_core.useIsomorphicLayoutEffect)(() => {
+		if (!rendered) {
+			return;
+		}
+		return association.registerMessage(id, text);
+	}, [
+		association.registerMessage,
+		id,
+		rendered,
+		text
+	]);
+	if (!rendered) {
+		return null;
+	}
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldErrorFrame, {
+		...errorProps,
+		...getDataProps(root.state, disabled),
+		id,
+		ref: forwardedRef,
+		children: message
+	});
+});
+const FieldItem = (0, import_core.createStyledHOC)(FieldItemFrame, function FieldItem2({ disabled: disabledProp = false, children, ...itemProps }, forwardedRef) {
+	const root = React.useContext(FieldRootContext);
+	const parentAssociation = React.useContext(AssociationContext);
+	const reactId = React.useId().replace(/:/g, "");
+	const association = useAssociation(`field-item-${reactId}`, parentAssociation);
+	if (!root || !parentAssociation) {
+		throw new Error("Field.Item must be rendered inside <Field>.");
+	}
+	const disabled = root.state.disabled || disabledProp;
+	const controlContext = useControlContext(root, association, disabledProp, true);
+	const styleState = getStyleState(root.state, disabled);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldItemContext.Provider, {
+		value: disabledProp,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AssociationContext.Provider, {
+			value: association,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FieldContext.FieldControlContext.Provider, {
+				value: controlContext,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FieldContext.FieldStyledContext.Provider, {
+					...styleState,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldItemFrame, {
+						...itemProps,
+						...getDataProps(root.state, disabled),
+						disabled,
+						ref: forwardedRef,
+						children
+					})
+				})
+			})
+		})
+	});
+});
+const Field2 = (0, import_core.withStaticProperties)(FieldComponent, {
+	Label: FieldLabel,
+	Description: FieldDescription,
+	Error: FieldError,
+	Item: FieldItem,
+	useFieldState: import_FieldContext.useFieldState,
+	useFieldControl: import_FieldContext.useFieldControl
+});