@radix-ui/react-form 0.0.1-rc.1

package/dist/index.module.js

@@ -0,0 +1,554 @@
+import $RRrwT$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
+import {forwardRef as $RRrwT$forwardRef, useRef as $RRrwT$useRef, useState as $RRrwT$useState, useCallback as $RRrwT$useCallback, createElement as $RRrwT$createElement, useEffect as $RRrwT$useEffect, useMemo as $RRrwT$useMemo, Fragment as $RRrwT$Fragment} from "react";
+import {composeEventHandlers as $RRrwT$composeEventHandlers} from "@radix-ui/primitive";
+import {useComposedRefs as $RRrwT$useComposedRefs} from "@radix-ui/react-compose-refs";
+import {createContextScope as $RRrwT$createContextScope} from "@radix-ui/react-context";
+import {useId as $RRrwT$useId} from "@radix-ui/react-id";
+import {Label as $RRrwT$Label} from "@radix-ui/react-label";
+import {Primitive as $RRrwT$Primitive} from "@radix-ui/react-primitive";
+
+
+
+
+
+
+
+
+
+const [$d94698215c4408a7$var$createFormContext, $d94698215c4408a7$export$299997c7551e97cb] = $RRrwT$createContextScope('Form');
+/* -------------------------------------------------------------------------------------------------
+ * Form
+ * -----------------------------------------------------------------------------------------------*/ const $d94698215c4408a7$var$FORM_NAME = 'Form';
+const [$d94698215c4408a7$var$ValidationProvider, $d94698215c4408a7$var$useValidationContext] = $d94698215c4408a7$var$createFormContext($d94698215c4408a7$var$FORM_NAME);
+const [$d94698215c4408a7$var$AriaDescriptionProvider, $d94698215c4408a7$var$useAriaDescriptionContext] = $d94698215c4408a7$var$createFormContext($d94698215c4408a7$var$FORM_NAME);
+const $d94698215c4408a7$export$a7fed597f4b8afd8 = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , onClearServerErrors: onClearServerErrors = ()=>{} , ...rootProps } = props;
+    const formRef = $RRrwT$useRef(null);
+    const composedFormRef = $RRrwT$useComposedRefs(forwardedRef, formRef); // native validity per field
+    const [validityMap, setValidityMap] = $RRrwT$useState({});
+    const getFieldValidity = $RRrwT$useCallback((fieldName)=>validityMap[fieldName]
+    , [
+        validityMap
+    ]);
+    const handleFieldValidityChange = $RRrwT$useCallback((fieldName, validity)=>setValidityMap((prevValidityMap)=>{
+            var _prevValidityMap$fiel;
+            return {
+                ...prevValidityMap,
+                [fieldName]: {
+                    ...(_prevValidityMap$fiel = prevValidityMap[fieldName]) !== null && _prevValidityMap$fiel !== void 0 ? _prevValidityMap$fiel : {},
+                    ...validity
+                }
+            };
+        })
+    , []);
+    const handleFieldValiditionClear = $RRrwT$useCallback((fieldName)=>{
+        setValidityMap((prevValidityMap)=>({
+                ...prevValidityMap,
+                [fieldName]: undefined
+            })
+        );
+        setCustomErrorsMap((prevCustomErrorsMap)=>({
+                ...prevCustomErrorsMap,
+                [fieldName]: {}
+            })
+        );
+    }, []); // custom matcher entries per field
+    const [customMatcherEntriesMap, setCustomMatcherEntriesMap] = $RRrwT$useState({});
+    const getFieldCustomMatcherEntries = $RRrwT$useCallback((fieldName)=>{
+        var _customMatcherEntries;
+        return (_customMatcherEntries = customMatcherEntriesMap[fieldName]) !== null && _customMatcherEntries !== void 0 ? _customMatcherEntries : [];
+    }, [
+        customMatcherEntriesMap
+    ]);
+    const handleFieldCustomMatcherAdd = $RRrwT$useCallback((fieldName, matcherEntry)=>{
+        setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap)=>{
+            var _prevCustomMatcherEnt;
+            return {
+                ...prevCustomMatcherEntriesMap,
+                [fieldName]: [
+                    ...(_prevCustomMatcherEnt = prevCustomMatcherEntriesMap[fieldName]) !== null && _prevCustomMatcherEnt !== void 0 ? _prevCustomMatcherEnt : [],
+                    matcherEntry
+                ]
+            };
+        });
+    }, []);
+    const handleFieldCustomMatcherRemove = $RRrwT$useCallback((fieldName, matcherEntryId)=>{
+        setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap)=>{
+            var _prevCustomMatcherEnt2;
+            return {
+                ...prevCustomMatcherEntriesMap,
+                [fieldName]: ((_prevCustomMatcherEnt2 = prevCustomMatcherEntriesMap[fieldName]) !== null && _prevCustomMatcherEnt2 !== void 0 ? _prevCustomMatcherEnt2 : []).filter((matcherEntry)=>matcherEntry.id !== matcherEntryId
+                )
+            };
+        });
+    }, []); // custom errors per field
+    const [customErrorsMap, setCustomErrorsMap] = $RRrwT$useState({});
+    const getFieldCustomErrors = $RRrwT$useCallback((fieldName)=>{
+        var _customErrorsMap$fiel;
+        return (_customErrorsMap$fiel = customErrorsMap[fieldName]) !== null && _customErrorsMap$fiel !== void 0 ? _customErrorsMap$fiel : {};
+    }, [
+        customErrorsMap
+    ]);
+    const handleFieldCustomErrorsChange = $RRrwT$useCallback((fieldName, customErrors)=>{
+        setCustomErrorsMap((prevCustomErrorsMap)=>{
+            var _prevCustomErrorsMap$;
+            return {
+                ...prevCustomErrorsMap,
+                [fieldName]: {
+                    ...(_prevCustomErrorsMap$ = prevCustomErrorsMap[fieldName]) !== null && _prevCustomErrorsMap$ !== void 0 ? _prevCustomErrorsMap$ : {},
+                    ...customErrors
+                }
+            };
+        });
+    }, []); // messageIds per field
+    const [messageIdsMap, setMessageIdsMap] = $RRrwT$useState({});
+    const handleFieldMessageIdAdd = $RRrwT$useCallback((fieldName, id)=>{
+        setMessageIdsMap((prevMessageIdsMap)=>{
+            const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]).add(id);
+            return {
+                ...prevMessageIdsMap,
+                [fieldName]: fieldDescriptionIds
+            };
+        });
+    }, []);
+    const handleFieldMessageIdRemove = $RRrwT$useCallback((fieldName, id)=>{
+        setMessageIdsMap((prevMessageIdsMap)=>{
+            const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]);
+            fieldDescriptionIds.delete(id);
+            return {
+                ...prevMessageIdsMap,
+                [fieldName]: fieldDescriptionIds
+            };
+        });
+    }, []);
+    const getFieldDescription = $RRrwT$useCallback((fieldName)=>{
+        var _messageIdsMap$fieldN;
+        return Array.from((_messageIdsMap$fieldN = messageIdsMap[fieldName]) !== null && _messageIdsMap$fieldN !== void 0 ? _messageIdsMap$fieldN : []).join(' ') || undefined;
+    }, [
+        messageIdsMap
+    ]);
+    return /*#__PURE__*/ $RRrwT$createElement($d94698215c4408a7$var$ValidationProvider, {
+        scope: __scopeForm,
+        getFieldValidity: getFieldValidity,
+        onFieldValidityChange: handleFieldValidityChange,
+        getFieldCustomMatcherEntries: getFieldCustomMatcherEntries,
+        onFieldCustomMatcherEntryAdd: handleFieldCustomMatcherAdd,
+        onFieldCustomMatcherEntryRemove: handleFieldCustomMatcherRemove,
+        getFieldCustomErrors: getFieldCustomErrors,
+        onFieldCustomErrorsChange: handleFieldCustomErrorsChange,
+        onFieldValiditionClear: handleFieldValiditionClear
+    }, /*#__PURE__*/ $RRrwT$createElement($d94698215c4408a7$var$AriaDescriptionProvider, {
+        scope: __scopeForm,
+        onFieldMessageIdAdd: handleFieldMessageIdAdd,
+        onFieldMessageIdRemove: handleFieldMessageIdRemove,
+        getFieldDescription: getFieldDescription
+    }, /*#__PURE__*/ $RRrwT$createElement($RRrwT$Primitive.form, $RRrwT$babelruntimehelpersesmextends({}, rootProps, {
+        ref: composedFormRef // focus first invalid control when the form is submitted
+        ,
+        onInvalid: $RRrwT$composeEventHandlers(props.onInvalid, (event)=>{
+            const firstInvalidControl = $d94698215c4408a7$var$getFirstInvalidControl(event.currentTarget);
+            if (firstInvalidControl === event.target) firstInvalidControl.focus(); // prevent default browser UI for form validation
+            event.preventDefault();
+        }) // clear server errors when the form is re-submitted
+        ,
+        onSubmit: $RRrwT$composeEventHandlers(props.onSubmit, onClearServerErrors, {
+            checkForDefaultPrevented: false
+        }) // clear server errors when the form is reset
+        ,
+        onReset: $RRrwT$composeEventHandlers(props.onReset, onClearServerErrors)
+    }))));
+});
+/*#__PURE__*/ Object.assign($d94698215c4408a7$export$a7fed597f4b8afd8, {
+    displayName: $d94698215c4408a7$var$FORM_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormField
+ * -----------------------------------------------------------------------------------------------*/ const $d94698215c4408a7$var$FIELD_NAME = 'FormField';
+const [$d94698215c4408a7$var$FormFieldProvider, $d94698215c4408a7$var$useFormFieldContext] = $d94698215c4408a7$var$createFormContext($d94698215c4408a7$var$FIELD_NAME);
+const $d94698215c4408a7$export$56e87bf42978147a = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , name: name , serverInvalid: serverInvalid = false , ...fieldProps } = props;
+    const validationContext = $d94698215c4408a7$var$useValidationContext($d94698215c4408a7$var$FIELD_NAME, __scopeForm);
+    const validity = validationContext.getFieldValidity(name);
+    const id = $RRrwT$useId();
+    return /*#__PURE__*/ $RRrwT$createElement($d94698215c4408a7$var$FormFieldProvider, {
+        scope: __scopeForm,
+        id: id,
+        name: name,
+        serverInvalid: serverInvalid
+    }, /*#__PURE__*/ $RRrwT$createElement($RRrwT$Primitive.div, $RRrwT$babelruntimehelpersesmextends({
+        "data-valid": $d94698215c4408a7$var$getValidAttribute(validity, serverInvalid),
+        "data-invalid": $d94698215c4408a7$var$getInvalidAttribute(validity, serverInvalid)
+    }, fieldProps, {
+        ref: forwardedRef
+    })));
+});
+/*#__PURE__*/ Object.assign($d94698215c4408a7$export$56e87bf42978147a, {
+    displayName: $d94698215c4408a7$var$FIELD_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormLabel
+ * -----------------------------------------------------------------------------------------------*/ const $d94698215c4408a7$var$LABEL_NAME = 'FormLabel';
+const $d94698215c4408a7$export$842aba50ed0ce9d7 = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , ...labelProps } = props;
+    const validationContext = $d94698215c4408a7$var$useValidationContext($d94698215c4408a7$var$LABEL_NAME, __scopeForm);
+    const fieldContext = $d94698215c4408a7$var$useFormFieldContext($d94698215c4408a7$var$LABEL_NAME, __scopeForm);
+    const htmlFor = labelProps.htmlFor || fieldContext.id;
+    const validity = validationContext.getFieldValidity(fieldContext.name);
+    return /*#__PURE__*/ $RRrwT$createElement($RRrwT$Label, $RRrwT$babelruntimehelpersesmextends({
+        "data-valid": $d94698215c4408a7$var$getValidAttribute(validity, fieldContext.serverInvalid),
+        "data-invalid": $d94698215c4408a7$var$getInvalidAttribute(validity, fieldContext.serverInvalid)
+    }, labelProps, {
+        ref: forwardedRef,
+        htmlFor: htmlFor
+    }));
+});
+/*#__PURE__*/ Object.assign($d94698215c4408a7$export$842aba50ed0ce9d7, {
+    displayName: $d94698215c4408a7$var$LABEL_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormControl
+ * -----------------------------------------------------------------------------------------------*/ const $d94698215c4408a7$var$CONTROL_NAME = 'FormControl';
+const $d94698215c4408a7$export$fe5d99d8691b3f62 = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , ...controlProps } = props;
+    const validationContext = $d94698215c4408a7$var$useValidationContext($d94698215c4408a7$var$CONTROL_NAME, __scopeForm);
+    const fieldContext = $d94698215c4408a7$var$useFormFieldContext($d94698215c4408a7$var$CONTROL_NAME, __scopeForm);
+    const ariaDescriptionContext = $d94698215c4408a7$var$useAriaDescriptionContext($d94698215c4408a7$var$CONTROL_NAME, __scopeForm);
+    const ref = $RRrwT$useRef(null);
+    const composedRef = $RRrwT$useComposedRefs(forwardedRef, ref);
+    const name = controlProps.name || fieldContext.name;
+    const id1 = controlProps.id || fieldContext.id;
+    const customMatcherEntries = validationContext.getFieldCustomMatcherEntries(name);
+    const { onFieldValidityChange: onFieldValidityChange , onFieldCustomErrorsChange: onFieldCustomErrorsChange , onFieldValiditionClear: onFieldValiditionClear  } = validationContext;
+    const updateControlValidity = $RRrwT$useCallback(async (control)=>{
+        //------------------------------------------------------------------------------------------
+        // 1. first, if we have built-in errors we stop here
+        if ($d94698215c4408a7$var$hasBuiltInError(control.validity)) {
+            const controlValidity = $d94698215c4408a7$var$validityStateToObject(control.validity);
+            onFieldValidityChange(name, controlValidity);
+            return;
+        } //------------------------------------------------------------------------------------------
+        // 2. then gather the form data to give to custom matchers for cross-comparisons
+        const formData = control.form ? new FormData(control.form) : new FormData();
+        const matcherArgs = [
+            control.value,
+            formData
+        ]; //------------------------------------------------------------------------------------------
+        // 3. split sync and async custom matcher entries
+        const syncCustomMatcherEntries = [];
+        const ayncCustomMatcherEntries = [];
+        customMatcherEntries.forEach((customMatcherEntry)=>{
+            if ($d94698215c4408a7$var$isAsyncCustomMatcherEntry(customMatcherEntry, matcherArgs)) ayncCustomMatcherEntries.push(customMatcherEntry);
+            else if ($d94698215c4408a7$var$isSyncCustomMatcherEntry(customMatcherEntry)) syncCustomMatcherEntries.push(customMatcherEntry);
+        }); //------------------------------------------------------------------------------------------
+        // 4. run sync custom matchers and update control validity / internal validity + errors
+        const syncCustomErrors = syncCustomMatcherEntries.map(({ id: id , match: match  })=>{
+            return [
+                id,
+                match(...matcherArgs)
+            ];
+        });
+        const syncCustomErrorsById = Object.fromEntries(syncCustomErrors);
+        const hasSyncCustomErrors = Object.values(syncCustomErrorsById).some(Boolean);
+        const hasCustomError = hasSyncCustomErrors;
+        control.setCustomValidity(hasCustomError ? $d94698215c4408a7$var$DEFAULT_INVALID_MESSAGE : '');
+        const controlValidity = $d94698215c4408a7$var$validityStateToObject(control.validity);
+        onFieldValidityChange(name, controlValidity);
+        onFieldCustomErrorsChange(name, syncCustomErrorsById); //------------------------------------------------------------------------------------------
+        // 5. run async custom matchers and update control validity / internal validity + errors
+        if (!hasSyncCustomErrors && ayncCustomMatcherEntries.length > 0) {
+            const promisedCustomErrors = ayncCustomMatcherEntries.map(({ id: id , match: match  })=>match(...matcherArgs).then((matches)=>[
+                        id,
+                        matches
+                    ]
+                )
+            );
+            const asyncCustomErrors = await Promise.all(promisedCustomErrors);
+            const asyncCustomErrorsById = Object.fromEntries(asyncCustomErrors);
+            const hasAsyncCustomErrors = Object.values(asyncCustomErrorsById).some(Boolean);
+            const hasCustomError = hasAsyncCustomErrors;
+            control.setCustomValidity(hasCustomError ? $d94698215c4408a7$var$DEFAULT_INVALID_MESSAGE : '');
+            const controlValidity = $d94698215c4408a7$var$validityStateToObject(control.validity);
+            onFieldValidityChange(name, controlValidity);
+            onFieldCustomErrorsChange(name, asyncCustomErrorsById);
+        }
+    }, [
+        customMatcherEntries,
+        name,
+        onFieldCustomErrorsChange,
+        onFieldValidityChange
+    ]);
+    $RRrwT$useEffect(()=>{
+        const control = ref.current;
+        if (control) {
+            // We only want validate on change (native `change` event, not React's `onChange`). This is primarily
+            // a UX decision, we don't want to validate on every keystroke and React's `onChange` is the `input` event.
+            const handleChange = ()=>updateControlValidity(control)
+            ;
+            control.addEventListener('change', handleChange);
+            return ()=>control.removeEventListener('change', handleChange)
+            ;
+        }
+    }, [
+        updateControlValidity
+    ]);
+    const resetControlValidity = $RRrwT$useCallback(()=>{
+        const control = ref.current;
+        if (control) {
+            control.setCustomValidity('');
+            onFieldValiditionClear(name);
+        }
+    }, [
+        name,
+        onFieldValiditionClear
+    ]); // reset validity and errors when the form is reset
+    $RRrwT$useEffect(()=>{
+        var _ref$current;
+        const form = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.form;
+        if (form) {
+            form.addEventListener('reset', resetControlValidity);
+            return ()=>form.removeEventListener('reset', resetControlValidity)
+            ;
+        }
+    }, [
+        resetControlValidity
+    ]); // focus first invalid control when fields are set as invalid by server
+    $RRrwT$useEffect(()=>{
+        const control = ref.current;
+        const form = control === null || control === void 0 ? void 0 : control.closest('form');
+        if (form && fieldContext.serverInvalid) {
+            const firstInvalidControl = $d94698215c4408a7$var$getFirstInvalidControl(form);
+            if (firstInvalidControl === control) firstInvalidControl.focus();
+        }
+    }, [
+        fieldContext.serverInvalid
+    ]);
+    const validity = validationContext.getFieldValidity(name);
+    return /*#__PURE__*/ $RRrwT$createElement($RRrwT$Primitive.input, $RRrwT$babelruntimehelpersesmextends({
+        "data-valid": $d94698215c4408a7$var$getValidAttribute(validity, fieldContext.serverInvalid),
+        "data-invalid": $d94698215c4408a7$var$getInvalidAttribute(validity, fieldContext.serverInvalid),
+        "aria-invalid": fieldContext.serverInvalid ? true : undefined,
+        "aria-describedby": ariaDescriptionContext.getFieldDescription(name) // disable default browser behaviour of showing built-in error message on hover
+        ,
+        title: ""
+    }, controlProps, {
+        ref: composedRef,
+        id: id1,
+        name: name,
+        onInvalid: $RRrwT$composeEventHandlers(props.onInvalid, (event)=>{
+            const control = event.currentTarget;
+            updateControlValidity(control);
+        }),
+        onChange: $RRrwT$composeEventHandlers(props.onChange, (event)=>{
+            // reset validity when user changes value
+            resetControlValidity();
+        })
+    }));
+});
+/*#__PURE__*/ Object.assign($d94698215c4408a7$export$fe5d99d8691b3f62, {
+    displayName: $d94698215c4408a7$var$CONTROL_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormMessage
+ * -----------------------------------------------------------------------------------------------*/ const $d94698215c4408a7$var$validityMatchers = [
+    'badInput',
+    'patternMismatch',
+    'rangeOverflow',
+    'rangeUnderflow',
+    'stepMismatch',
+    'tooLong',
+    'tooShort',
+    'typeMismatch',
+    'valid',
+    'valueMissing'
+];
+const $d94698215c4408a7$var$DEFAULT_INVALID_MESSAGE = 'This value is not valid';
+const $d94698215c4408a7$var$DEFAULT_BUILT_IN_MESSAGES = {
+    badInput: $d94698215c4408a7$var$DEFAULT_INVALID_MESSAGE,
+    patternMismatch: 'This value does not match the required pattern',
+    rangeOverflow: 'This value is too large',
+    rangeUnderflow: 'This value is too small',
+    stepMismatch: 'This value does not match the required step',
+    tooLong: 'This value is too long',
+    tooShort: 'This value is too short',
+    typeMismatch: 'This value does not match the required type',
+    valid: undefined,
+    valueMissing: 'This value is missing'
+};
+const $d94698215c4408a7$var$MESSAGE_NAME = 'FormMessage';
+const $d94698215c4408a7$export$2e8ae7a1a126169a = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
+    const { match: match , name: nameProp , ...messageProps } = props;
+    const fieldContext = $d94698215c4408a7$var$useFormFieldContext($d94698215c4408a7$var$MESSAGE_NAME, props.__scopeForm);
+    const name = nameProp !== null && nameProp !== void 0 ? nameProp : fieldContext.name;
+    if (match === undefined) return /*#__PURE__*/ $RRrwT$createElement($d94698215c4408a7$var$FormMessageImpl, $RRrwT$babelruntimehelpersesmextends({}, messageProps, {
+        ref: forwardedRef,
+        name: name
+    }), props.children || $d94698215c4408a7$var$DEFAULT_INVALID_MESSAGE);
+    else if (typeof match === 'function') return /*#__PURE__*/ $RRrwT$createElement($d94698215c4408a7$var$FormCustomMessage, $RRrwT$babelruntimehelpersesmextends({
+        match: match
+    }, messageProps, {
+        ref: forwardedRef,
+        name: name
+    }));
+    else return /*#__PURE__*/ $RRrwT$createElement($d94698215c4408a7$var$FormBuiltInMessage, $RRrwT$babelruntimehelpersesmextends({
+        match: match
+    }, messageProps, {
+        ref: forwardedRef,
+        name: name
+    }));
+});
+/*#__PURE__*/ Object.assign($d94698215c4408a7$export$2e8ae7a1a126169a, {
+    displayName: $d94698215c4408a7$var$MESSAGE_NAME
+});
+const $d94698215c4408a7$var$FormBuiltInMessage = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
+    const { match: match , forceMatch: forceMatch = false , name: name , children: children , ...messageProps } = props;
+    const validationContext = $d94698215c4408a7$var$useValidationContext($d94698215c4408a7$var$MESSAGE_NAME, messageProps.__scopeForm);
+    const validity = validationContext.getFieldValidity(name);
+    const matches = forceMatch || (validity === null || validity === void 0 ? void 0 : validity[match]);
+    if (matches) return /*#__PURE__*/ $RRrwT$createElement($d94698215c4408a7$var$FormMessageImpl, $RRrwT$babelruntimehelpersesmextends({
+        ref: forwardedRef
+    }, messageProps, {
+        name: name
+    }), children !== null && children !== void 0 ? children : $d94698215c4408a7$var$DEFAULT_BUILT_IN_MESSAGES[match]);
+    return null;
+});
+const $d94698215c4408a7$var$FormCustomMessage = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
+    const { match: match , forceMatch: forceMatch = false , name: name , id: idProp , children: children , ...messageProps } = props;
+    const validationContext = $d94698215c4408a7$var$useValidationContext($d94698215c4408a7$var$MESSAGE_NAME, messageProps.__scopeForm);
+    const ref = $RRrwT$useRef(null);
+    const composedRef = $RRrwT$useComposedRefs(forwardedRef, ref);
+    const _id = $RRrwT$useId();
+    const id = idProp !== null && idProp !== void 0 ? idProp : _id;
+    const customMatcherEntry = $RRrwT$useMemo(()=>({
+            id: id,
+            match: match
+        })
+    , [
+        id,
+        match
+    ]);
+    const { onFieldCustomMatcherEntryAdd: onFieldCustomMatcherEntryAdd , onFieldCustomMatcherEntryRemove: onFieldCustomMatcherEntryRemove  } = validationContext;
+    $RRrwT$useEffect(()=>{
+        onFieldCustomMatcherEntryAdd(name, customMatcherEntry);
+        return ()=>onFieldCustomMatcherEntryRemove(name, customMatcherEntry.id)
+        ;
+    }, [
+        customMatcherEntry,
+        name,
+        onFieldCustomMatcherEntryAdd,
+        onFieldCustomMatcherEntryRemove
+    ]);
+    const validity = validationContext.getFieldValidity(name);
+    const customErrors = validationContext.getFieldCustomErrors(name);
+    const hasMatchingCustomError = customErrors[id];
+    const matches = forceMatch || validity && !$d94698215c4408a7$var$hasBuiltInError(validity) && hasMatchingCustomError;
+    if (matches) return /*#__PURE__*/ $RRrwT$createElement($d94698215c4408a7$var$FormMessageImpl, $RRrwT$babelruntimehelpersesmextends({
+        id: id,
+        ref: composedRef
+    }, messageProps, {
+        name: name
+    }), children !== null && children !== void 0 ? children : $d94698215c4408a7$var$DEFAULT_INVALID_MESSAGE);
+    return null;
+});
+const $d94698215c4408a7$var$FormMessageImpl = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , id: idProp , name: name , ...messageProps } = props;
+    const ariaDescriptionContext = $d94698215c4408a7$var$useAriaDescriptionContext($d94698215c4408a7$var$MESSAGE_NAME, __scopeForm);
+    const _id = $RRrwT$useId();
+    const id = idProp !== null && idProp !== void 0 ? idProp : _id;
+    const { onFieldMessageIdAdd: onFieldMessageIdAdd , onFieldMessageIdRemove: onFieldMessageIdRemove  } = ariaDescriptionContext;
+    $RRrwT$useEffect(()=>{
+        onFieldMessageIdAdd(name, id);
+        return ()=>onFieldMessageIdRemove(name, id)
+        ;
+    }, [
+        name,
+        id,
+        onFieldMessageIdAdd,
+        onFieldMessageIdRemove
+    ]);
+    return /*#__PURE__*/ $RRrwT$createElement($RRrwT$Primitive.span, $RRrwT$babelruntimehelpersesmextends({
+        id: id
+    }, messageProps, {
+        ref: forwardedRef
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormValidityState
+ * -----------------------------------------------------------------------------------------------*/ const $d94698215c4408a7$var$VALIDITY_STATE_NAME = 'FormValidityState';
+const $d94698215c4408a7$export$7a93102810e06862 = (props)=>{
+    const { __scopeForm: __scopeForm , name: nameProp , children: children  } = props;
+    const validationContext = $d94698215c4408a7$var$useValidationContext($d94698215c4408a7$var$VALIDITY_STATE_NAME, __scopeForm);
+    const fieldContext = $d94698215c4408a7$var$useFormFieldContext($d94698215c4408a7$var$VALIDITY_STATE_NAME, __scopeForm);
+    const name = nameProp !== null && nameProp !== void 0 ? nameProp : fieldContext.name;
+    const validity = validationContext.getFieldValidity(name);
+    return /*#__PURE__*/ $RRrwT$createElement($RRrwT$Fragment, null, children(validity));
+};
+/*#__PURE__*/ Object.assign($d94698215c4408a7$export$7a93102810e06862, {
+    displayName: $d94698215c4408a7$var$VALIDITY_STATE_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormSubmit
+ * -----------------------------------------------------------------------------------------------*/ const $d94698215c4408a7$var$SUBMIT_NAME = 'FormSubmit';
+const $d94698215c4408a7$export$d0861e5bd09bd9e4 = /*#__PURE__*/ $RRrwT$forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , ...submitProps } = props;
+    return /*#__PURE__*/ $RRrwT$createElement($RRrwT$Primitive.button, $RRrwT$babelruntimehelpersesmextends({
+        type: "submit"
+    }, submitProps, {
+        ref: forwardedRef
+    }));
+});
+/*#__PURE__*/ Object.assign($d94698215c4408a7$export$d0861e5bd09bd9e4, {
+    displayName: $d94698215c4408a7$var$SUBMIT_NAME
+});
+/* -----------------------------------------------------------------------------------------------*/ function $d94698215c4408a7$var$validityStateToObject(validity) {
+    const object = {};
+    for(const key in validity)object[key] = validity[key];
+    return object;
+}
+function $d94698215c4408a7$var$isHTMLElement(element) {
+    return element instanceof HTMLElement;
+}
+function $d94698215c4408a7$var$isFormControl(element) {
+    return 'validity' in element;
+}
+function $d94698215c4408a7$var$isInvalid(control) {
+    return $d94698215c4408a7$var$isFormControl(control) && (control.validity.valid === false || control.getAttribute('aria-invalid') === 'true');
+}
+function $d94698215c4408a7$var$getFirstInvalidControl(form) {
+    const elements = form.elements;
+    const [firstInvalidControl] = Array.from(elements).filter($d94698215c4408a7$var$isHTMLElement).filter($d94698215c4408a7$var$isInvalid);
+    return firstInvalidControl;
+}
+function $d94698215c4408a7$var$isAsyncCustomMatcherEntry(entry, args) {
+    return entry.match.constructor.name === 'AsyncFunction' || $d94698215c4408a7$var$returnsPromise(entry.match, args);
+}
+function $d94698215c4408a7$var$isSyncCustomMatcherEntry(entry) {
+    return entry.match.constructor.name === 'Function';
+}
+function $d94698215c4408a7$var$returnsPromise(func, args) {
+    return func(...args) instanceof Promise;
+}
+function $d94698215c4408a7$var$hasBuiltInError(validity) {
+    let error = false;
+    for(const validityKey in validity){
+        const key = validityKey;
+        if (key !== 'valid' && key !== 'customError' && validity[key]) {
+            error = true;
+            break;
+        }
+    }
+    return error;
+}
+function $d94698215c4408a7$var$getValidAttribute(validity, serverInvalid) {
+    if ((validity === null || validity === void 0 ? void 0 : validity.valid) === true && !serverInvalid) return true;
+    return undefined;
+}
+function $d94698215c4408a7$var$getInvalidAttribute(validity, serverInvalid) {
+    if ((validity === null || validity === void 0 ? void 0 : validity.valid) === false || serverInvalid) return true;
+    return undefined;
+}
+
+
+
+
+export {$d94698215c4408a7$export$299997c7551e97cb as createFormScope, $d94698215c4408a7$export$a7fed597f4b8afd8 as Form, $d94698215c4408a7$export$a7fed597f4b8afd8 as Root, $d94698215c4408a7$export$56e87bf42978147a as FormField, $d94698215c4408a7$export$56e87bf42978147a as Field, $d94698215c4408a7$export$842aba50ed0ce9d7 as FormLabel, $d94698215c4408a7$export$842aba50ed0ce9d7 as Label, $d94698215c4408a7$export$fe5d99d8691b3f62 as FormControl, $d94698215c4408a7$export$fe5d99d8691b3f62 as Control, $d94698215c4408a7$export$2e8ae7a1a126169a as FormMessage, $d94698215c4408a7$export$2e8ae7a1a126169a as Message, $d94698215c4408a7$export$7a93102810e06862 as FormValidityState, $d94698215c4408a7$export$7a93102810e06862 as ValidityState, $d94698215c4408a7$export$d0861e5bd09bd9e4 as FormSubmit, $d94698215c4408a7$export$d0861e5bd09bd9e4 as Submit};
+//# sourceMappingURL=index.module.js.map