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

package/README.md

@@ -0,0 +1,13 @@
+# `react-form`
+
+## Installation
+
+```sh
+$ yarn add @radix-ui/react-form
+# or
+$ npm install @radix-ui/react-form
+```
+
+## Usage
+
+View docs [here](https://radix-ui.com/primitives/docs/components/form).

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Label } from "@radix-ui/react-label";
+import * as Radix from "@radix-ui/react-primitive";
+import { Primitive } from "@radix-ui/react-primitive";
+import { Scope } from "@radix-ui/react-context";
+type ScopedProps<P> = P & {
+    __scopeForm?: Scope;
+};
+export const createFormScope: import("@radix-ui/react-context").CreateScope;
+type PrimitiveFormProps = Radix.ComponentPropsWithoutRef<typeof Primitive.form>;
+export interface FormProps extends PrimitiveFormProps {
+    onClearServerErrors?(): void;
+}
+export const Root: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
+export interface FormFieldProps extends PrimitiveDivProps {
+    name: string;
+    serverInvalid?: boolean;
+}
+export const Field: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
+type LabelProps = Radix.ComponentPropsWithoutRef<typeof Label>;
+export interface FormLabelProps extends LabelProps {
+}
+export const FormLabel: React.ForwardRefExoticComponent<FormLabelProps & React.RefAttributes<HTMLLabelElement>>;
+type PrimitiveInputProps = Radix.ComponentPropsWithoutRef<typeof Primitive.input>;
+export interface FormControlProps extends PrimitiveInputProps {
+}
+export const Control: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLInputElement>>;
+declare const validityMatchers: readonly ["badInput", "patternMismatch", "rangeOverflow", "rangeUnderflow", "stepMismatch", "tooLong", "tooShort", "typeMismatch", "valid", "valueMissing"];
+type ValidityMatcher = typeof validityMatchers[number];
+export interface FormMessageProps extends Omit<FormMessageImplProps, 'name'> {
+    match?: ValidityMatcher | CustomMatcher;
+    forceMatch?: boolean;
+    name?: string;
+}
+export const Message: React.ForwardRefExoticComponent<FormMessageProps & React.RefAttributes<HTMLSpanElement>>;
+type PrimitiveSpanProps = Radix.ComponentPropsWithoutRef<typeof Primitive.span>;
+interface FormMessageImplProps extends PrimitiveSpanProps {
+    name: string;
+}
+export interface FormValidityStateProps {
+    children(validity: ValidityState | undefined): React.ReactNode;
+    name?: string;
+}
+export const ValidityState: {
+    (props: ScopedProps<FormValidityStateProps>): JSX.Element;
+    displayName: string;
+};
+type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;
+export interface FormSubmitProps extends PrimitiveButtonProps {
+}
+export const Submit: React.ForwardRefExoticComponent<FormSubmitProps & React.RefAttributes<HTMLButtonElement>>;
+type SyncCustomMatcher = (value: string, formData: FormData) => boolean;
+type AsyncCustomMatcher = (value: string, formData: FormData) => Promise<boolean>;
+type CustomMatcher = SyncCustomMatcher | AsyncCustomMatcher;
+
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"mappings":";;;;;AAWA,iBAAiB,CAAC,IAAI,CAAC,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AAClD,OAAA,sFAAuE,CAAC;AAuCxE,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,UAAU,IAAI,CAAC,CAAC;AAChF,0BAAoB,SAAQ,kBAAkB;IAC5C,mBAAmB,CAAC,IAAI,IAAI,CAAC;CAC9B;AAED,OAAA,MAAM,uFAiIL,CAAC;AAmBF,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,+BAAyB,SAAQ,iBAAiB;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,OAAA,MAAM,4FAkBL,CAAC;AAWF,kBAAkB,MAAM,wBAAwB,CAAC,YAAY,CAAC,CAAC;AAC/D,+BAAyB,SAAQ,UAAU;CAAG;AAE9C,OAAA,MAAM,kGAkBL,CAAC;AAWF,2BAA2B,MAAM,wBAAwB,CAAC,OAAO,UAAU,KAAK,CAAC,CAAC;AAClF,iCAA2B,SAAQ,mBAAmB;CAAG;AAEzD,OAAA,MAAM,kGA+IL,CAAC;AAQF,QAAA,MAAM,6KAWI,CAAC;AACX,uBAAuB,uBAAuB,CAAC,MAAM,CAAC,CAAC;AAmBvD,iCAA2B,SAAQ,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC;IACnE,KAAK,CAAC,EAAE,eAAe,GAAG,aAAa,CAAC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,OAAA,MAAM,iGAkBL,CAAC;AAwEF,0BAA0B,MAAM,wBAAwB,CAAC,OAAO,UAAU,IAAI,CAAC,CAAC;AAChF,8BAA+B,SAAQ,kBAAkB;IACvD,IAAI,EAAE,MAAM,CAAC;CACd;AAyBD;IACE,QAAQ,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS,GAAG,MAAM,SAAS,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,OAAA,MAAM;YAA4B,YAAY,sBAAsB,CAAC;;CAOpE,CAAC;AAWF,4BAA4B,MAAM,wBAAwB,CAAC,OAAO,UAAU,MAAM,CAAC,CAAC;AACpF,gCAA0B,SAAQ,oBAAoB;CAAG;AAEzD,OAAA,MAAM,iGAKL,CAAC;AAOF,yBAAyB,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC;AACxE,0BAA0B,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;AAClF,qBAAqB,iBAAiB,GAAG,kBAAkB,CAAC","sources":["packages/react/form/src/packages/react/form/src/Form.tsx","packages/react/form/src/packages/react/form/src/index.ts","packages/react/form/src/index.ts"],"sourcesContent":[null,null,"export {\n  createFormScope,\n  //\n  Form,\n  FormField,\n  FormLabel,\n  FormControl,\n  FormMessage,\n  FormValidityState,\n  FormSubmit,\n  //\n  Root,\n  Field,\n  Label,\n  Control,\n  Message,\n  ValidityState,\n  Submit,\n} from './Form';\n\nexport type {\n  FormProps,\n  FormFieldProps,\n  FormLabelProps,\n  FormControlProps,\n  FormMessageProps,\n  FormValidityStateProps,\n  FormSubmitProps,\n} from './Form';\n"],"names":[],"version":3,"file":"index.d.ts.map"}

package/dist/index.js

@@ -0,0 +1,575 @@
+var $c9wdm$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
+var $c9wdm$react = require("react");
+var $c9wdm$radixuiprimitive = require("@radix-ui/primitive");
+var $c9wdm$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
+var $c9wdm$radixuireactcontext = require("@radix-ui/react-context");
+var $c9wdm$radixuireactid = require("@radix-ui/react-id");
+var $c9wdm$radixuireactlabel = require("@radix-ui/react-label");
+var $c9wdm$radixuireactprimitive = require("@radix-ui/react-primitive");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "createFormScope", () => $5bb15a153bd9c45e$export$299997c7551e97cb);
+$parcel$export(module.exports, "Form", () => $5bb15a153bd9c45e$export$a7fed597f4b8afd8);
+$parcel$export(module.exports, "FormField", () => $5bb15a153bd9c45e$export$56e87bf42978147a);
+$parcel$export(module.exports, "FormLabel", () => $5bb15a153bd9c45e$export$842aba50ed0ce9d7);
+$parcel$export(module.exports, "FormControl", () => $5bb15a153bd9c45e$export$fe5d99d8691b3f62);
+$parcel$export(module.exports, "FormMessage", () => $5bb15a153bd9c45e$export$2e8ae7a1a126169a);
+$parcel$export(module.exports, "FormValidityState", () => $5bb15a153bd9c45e$export$7a93102810e06862);
+$parcel$export(module.exports, "FormSubmit", () => $5bb15a153bd9c45e$export$d0861e5bd09bd9e4);
+$parcel$export(module.exports, "Root", () => $5bb15a153bd9c45e$export$a7fed597f4b8afd8);
+$parcel$export(module.exports, "Field", () => $5bb15a153bd9c45e$export$56e87bf42978147a);
+$parcel$export(module.exports, "Label", () => $5bb15a153bd9c45e$export$842aba50ed0ce9d7);
+$parcel$export(module.exports, "Control", () => $5bb15a153bd9c45e$export$fe5d99d8691b3f62);
+$parcel$export(module.exports, "Message", () => $5bb15a153bd9c45e$export$2e8ae7a1a126169a);
+$parcel$export(module.exports, "ValidityState", () => $5bb15a153bd9c45e$export$7a93102810e06862);
+$parcel$export(module.exports, "Submit", () => $5bb15a153bd9c45e$export$d0861e5bd09bd9e4);
+
+
+
+
+
+
+
+
+const [$5bb15a153bd9c45e$var$createFormContext, $5bb15a153bd9c45e$export$299997c7551e97cb] = $c9wdm$radixuireactcontext.createContextScope('Form');
+/* -------------------------------------------------------------------------------------------------
+ * Form
+ * -----------------------------------------------------------------------------------------------*/ const $5bb15a153bd9c45e$var$FORM_NAME = 'Form';
+const [$5bb15a153bd9c45e$var$ValidationProvider, $5bb15a153bd9c45e$var$useValidationContext] = $5bb15a153bd9c45e$var$createFormContext($5bb15a153bd9c45e$var$FORM_NAME);
+const [$5bb15a153bd9c45e$var$AriaDescriptionProvider, $5bb15a153bd9c45e$var$useAriaDescriptionContext] = $5bb15a153bd9c45e$var$createFormContext($5bb15a153bd9c45e$var$FORM_NAME);
+const $5bb15a153bd9c45e$export$a7fed597f4b8afd8 = /*#__PURE__*/ $c9wdm$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , onClearServerErrors: onClearServerErrors = ()=>{} , ...rootProps } = props;
+    const formRef = $c9wdm$react.useRef(null);
+    const composedFormRef = $c9wdm$radixuireactcomposerefs.useComposedRefs(forwardedRef, formRef); // native validity per field
+    const [validityMap, setValidityMap] = $c9wdm$react.useState({});
+    const getFieldValidity = $c9wdm$react.useCallback((fieldName)=>validityMap[fieldName]
+    , [
+        validityMap
+    ]);
+    const handleFieldValidityChange = $c9wdm$react.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 = $c9wdm$react.useCallback((fieldName)=>{
+        setValidityMap((prevValidityMap)=>({
+                ...prevValidityMap,
+                [fieldName]: undefined
+            })
+        );
+        setCustomErrorsMap((prevCustomErrorsMap)=>({
+                ...prevCustomErrorsMap,
+                [fieldName]: {}
+            })
+        );
+    }, []); // custom matcher entries per field
+    const [customMatcherEntriesMap, setCustomMatcherEntriesMap] = $c9wdm$react.useState({});
+    const getFieldCustomMatcherEntries = $c9wdm$react.useCallback((fieldName)=>{
+        var _customMatcherEntries;
+        return (_customMatcherEntries = customMatcherEntriesMap[fieldName]) !== null && _customMatcherEntries !== void 0 ? _customMatcherEntries : [];
+    }, [
+        customMatcherEntriesMap
+    ]);
+    const handleFieldCustomMatcherAdd = $c9wdm$react.useCallback((fieldName, matcherEntry)=>{
+        setCustomMatcherEntriesMap((prevCustomMatcherEntriesMap)=>{
+            var _prevCustomMatcherEnt;
+            return {
+                ...prevCustomMatcherEntriesMap,
+                [fieldName]: [
+                    ...(_prevCustomMatcherEnt = prevCustomMatcherEntriesMap[fieldName]) !== null && _prevCustomMatcherEnt !== void 0 ? _prevCustomMatcherEnt : [],
+                    matcherEntry
+                ]
+            };
+        });
+    }, []);
+    const handleFieldCustomMatcherRemove = $c9wdm$react.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] = $c9wdm$react.useState({});
+    const getFieldCustomErrors = $c9wdm$react.useCallback((fieldName)=>{
+        var _customErrorsMap$fiel;
+        return (_customErrorsMap$fiel = customErrorsMap[fieldName]) !== null && _customErrorsMap$fiel !== void 0 ? _customErrorsMap$fiel : {};
+    }, [
+        customErrorsMap
+    ]);
+    const handleFieldCustomErrorsChange = $c9wdm$react.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] = $c9wdm$react.useState({});
+    const handleFieldMessageIdAdd = $c9wdm$react.useCallback((fieldName, id)=>{
+        setMessageIdsMap((prevMessageIdsMap)=>{
+            const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]).add(id);
+            return {
+                ...prevMessageIdsMap,
+                [fieldName]: fieldDescriptionIds
+            };
+        });
+    }, []);
+    const handleFieldMessageIdRemove = $c9wdm$react.useCallback((fieldName, id)=>{
+        setMessageIdsMap((prevMessageIdsMap)=>{
+            const fieldDescriptionIds = new Set(prevMessageIdsMap[fieldName]);
+            fieldDescriptionIds.delete(id);
+            return {
+                ...prevMessageIdsMap,
+                [fieldName]: fieldDescriptionIds
+            };
+        });
+    }, []);
+    const getFieldDescription = $c9wdm$react.useCallback((fieldName)=>{
+        var _messageIdsMap$fieldN;
+        return Array.from((_messageIdsMap$fieldN = messageIdsMap[fieldName]) !== null && _messageIdsMap$fieldN !== void 0 ? _messageIdsMap$fieldN : []).join(' ') || undefined;
+    }, [
+        messageIdsMap
+    ]);
+    return /*#__PURE__*/ $c9wdm$react.createElement($5bb15a153bd9c45e$var$ValidationProvider, {
+        scope: __scopeForm,
+        getFieldValidity: getFieldValidity,
+        onFieldValidityChange: handleFieldValidityChange,
+        getFieldCustomMatcherEntries: getFieldCustomMatcherEntries,
+        onFieldCustomMatcherEntryAdd: handleFieldCustomMatcherAdd,
+        onFieldCustomMatcherEntryRemove: handleFieldCustomMatcherRemove,
+        getFieldCustomErrors: getFieldCustomErrors,
+        onFieldCustomErrorsChange: handleFieldCustomErrorsChange,
+        onFieldValiditionClear: handleFieldValiditionClear
+    }, /*#__PURE__*/ $c9wdm$react.createElement($5bb15a153bd9c45e$var$AriaDescriptionProvider, {
+        scope: __scopeForm,
+        onFieldMessageIdAdd: handleFieldMessageIdAdd,
+        onFieldMessageIdRemove: handleFieldMessageIdRemove,
+        getFieldDescription: getFieldDescription
+    }, /*#__PURE__*/ $c9wdm$react.createElement($c9wdm$radixuireactprimitive.Primitive.form, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({}, rootProps, {
+        ref: composedFormRef // focus first invalid control when the form is submitted
+        ,
+        onInvalid: $c9wdm$radixuiprimitive.composeEventHandlers(props.onInvalid, (event)=>{
+            const firstInvalidControl = $5bb15a153bd9c45e$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: $c9wdm$radixuiprimitive.composeEventHandlers(props.onSubmit, onClearServerErrors, {
+            checkForDefaultPrevented: false
+        }) // clear server errors when the form is reset
+        ,
+        onReset: $c9wdm$radixuiprimitive.composeEventHandlers(props.onReset, onClearServerErrors)
+    }))));
+});
+/*#__PURE__*/ Object.assign($5bb15a153bd9c45e$export$a7fed597f4b8afd8, {
+    displayName: $5bb15a153bd9c45e$var$FORM_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormField
+ * -----------------------------------------------------------------------------------------------*/ const $5bb15a153bd9c45e$var$FIELD_NAME = 'FormField';
+const [$5bb15a153bd9c45e$var$FormFieldProvider, $5bb15a153bd9c45e$var$useFormFieldContext] = $5bb15a153bd9c45e$var$createFormContext($5bb15a153bd9c45e$var$FIELD_NAME);
+const $5bb15a153bd9c45e$export$56e87bf42978147a = /*#__PURE__*/ $c9wdm$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , name: name , serverInvalid: serverInvalid = false , ...fieldProps } = props;
+    const validationContext = $5bb15a153bd9c45e$var$useValidationContext($5bb15a153bd9c45e$var$FIELD_NAME, __scopeForm);
+    const validity = validationContext.getFieldValidity(name);
+    const id = $c9wdm$radixuireactid.useId();
+    return /*#__PURE__*/ $c9wdm$react.createElement($5bb15a153bd9c45e$var$FormFieldProvider, {
+        scope: __scopeForm,
+        id: id,
+        name: name,
+        serverInvalid: serverInvalid
+    }, /*#__PURE__*/ $c9wdm$react.createElement($c9wdm$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({
+        "data-valid": $5bb15a153bd9c45e$var$getValidAttribute(validity, serverInvalid),
+        "data-invalid": $5bb15a153bd9c45e$var$getInvalidAttribute(validity, serverInvalid)
+    }, fieldProps, {
+        ref: forwardedRef
+    })));
+});
+/*#__PURE__*/ Object.assign($5bb15a153bd9c45e$export$56e87bf42978147a, {
+    displayName: $5bb15a153bd9c45e$var$FIELD_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormLabel
+ * -----------------------------------------------------------------------------------------------*/ const $5bb15a153bd9c45e$var$LABEL_NAME = 'FormLabel';
+const $5bb15a153bd9c45e$export$842aba50ed0ce9d7 = /*#__PURE__*/ $c9wdm$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , ...labelProps } = props;
+    const validationContext = $5bb15a153bd9c45e$var$useValidationContext($5bb15a153bd9c45e$var$LABEL_NAME, __scopeForm);
+    const fieldContext = $5bb15a153bd9c45e$var$useFormFieldContext($5bb15a153bd9c45e$var$LABEL_NAME, __scopeForm);
+    const htmlFor = labelProps.htmlFor || fieldContext.id;
+    const validity = validationContext.getFieldValidity(fieldContext.name);
+    return /*#__PURE__*/ $c9wdm$react.createElement($c9wdm$radixuireactlabel.Label, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({
+        "data-valid": $5bb15a153bd9c45e$var$getValidAttribute(validity, fieldContext.serverInvalid),
+        "data-invalid": $5bb15a153bd9c45e$var$getInvalidAttribute(validity, fieldContext.serverInvalid)
+    }, labelProps, {
+        ref: forwardedRef,
+        htmlFor: htmlFor
+    }));
+});
+/*#__PURE__*/ Object.assign($5bb15a153bd9c45e$export$842aba50ed0ce9d7, {
+    displayName: $5bb15a153bd9c45e$var$LABEL_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormControl
+ * -----------------------------------------------------------------------------------------------*/ const $5bb15a153bd9c45e$var$CONTROL_NAME = 'FormControl';
+const $5bb15a153bd9c45e$export$fe5d99d8691b3f62 = /*#__PURE__*/ $c9wdm$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , ...controlProps } = props;
+    const validationContext = $5bb15a153bd9c45e$var$useValidationContext($5bb15a153bd9c45e$var$CONTROL_NAME, __scopeForm);
+    const fieldContext = $5bb15a153bd9c45e$var$useFormFieldContext($5bb15a153bd9c45e$var$CONTROL_NAME, __scopeForm);
+    const ariaDescriptionContext = $5bb15a153bd9c45e$var$useAriaDescriptionContext($5bb15a153bd9c45e$var$CONTROL_NAME, __scopeForm);
+    const ref = $c9wdm$react.useRef(null);
+    const composedRef = $c9wdm$radixuireactcomposerefs.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 = $c9wdm$react.useCallback(async (control)=>{
+        //------------------------------------------------------------------------------------------
+        // 1. first, if we have built-in errors we stop here
+        if ($5bb15a153bd9c45e$var$hasBuiltInError(control.validity)) {
+            const controlValidity = $5bb15a153bd9c45e$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 ($5bb15a153bd9c45e$var$isAsyncCustomMatcherEntry(customMatcherEntry, matcherArgs)) ayncCustomMatcherEntries.push(customMatcherEntry);
+            else if ($5bb15a153bd9c45e$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 ? $5bb15a153bd9c45e$var$DEFAULT_INVALID_MESSAGE : '');
+        const controlValidity = $5bb15a153bd9c45e$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 ? $5bb15a153bd9c45e$var$DEFAULT_INVALID_MESSAGE : '');
+            const controlValidity = $5bb15a153bd9c45e$var$validityStateToObject(control.validity);
+            onFieldValidityChange(name, controlValidity);
+            onFieldCustomErrorsChange(name, asyncCustomErrorsById);
+        }
+    }, [
+        customMatcherEntries,
+        name,
+        onFieldCustomErrorsChange,
+        onFieldValidityChange
+    ]);
+    $c9wdm$react.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 = $c9wdm$react.useCallback(()=>{
+        const control = ref.current;
+        if (control) {
+            control.setCustomValidity('');
+            onFieldValiditionClear(name);
+        }
+    }, [
+        name,
+        onFieldValiditionClear
+    ]); // reset validity and errors when the form is reset
+    $c9wdm$react.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
+    $c9wdm$react.useEffect(()=>{
+        const control = ref.current;
+        const form = control === null || control === void 0 ? void 0 : control.closest('form');
+        if (form && fieldContext.serverInvalid) {
+            const firstInvalidControl = $5bb15a153bd9c45e$var$getFirstInvalidControl(form);
+            if (firstInvalidControl === control) firstInvalidControl.focus();
+        }
+    }, [
+        fieldContext.serverInvalid
+    ]);
+    const validity = validationContext.getFieldValidity(name);
+    return /*#__PURE__*/ $c9wdm$react.createElement($c9wdm$radixuireactprimitive.Primitive.input, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({
+        "data-valid": $5bb15a153bd9c45e$var$getValidAttribute(validity, fieldContext.serverInvalid),
+        "data-invalid": $5bb15a153bd9c45e$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: $c9wdm$radixuiprimitive.composeEventHandlers(props.onInvalid, (event)=>{
+            const control = event.currentTarget;
+            updateControlValidity(control);
+        }),
+        onChange: $c9wdm$radixuiprimitive.composeEventHandlers(props.onChange, (event)=>{
+            // reset validity when user changes value
+            resetControlValidity();
+        })
+    }));
+});
+/*#__PURE__*/ Object.assign($5bb15a153bd9c45e$export$fe5d99d8691b3f62, {
+    displayName: $5bb15a153bd9c45e$var$CONTROL_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormMessage
+ * -----------------------------------------------------------------------------------------------*/ const $5bb15a153bd9c45e$var$validityMatchers = [
+    'badInput',
+    'patternMismatch',
+    'rangeOverflow',
+    'rangeUnderflow',
+    'stepMismatch',
+    'tooLong',
+    'tooShort',
+    'typeMismatch',
+    'valid',
+    'valueMissing'
+];
+const $5bb15a153bd9c45e$var$DEFAULT_INVALID_MESSAGE = 'This value is not valid';
+const $5bb15a153bd9c45e$var$DEFAULT_BUILT_IN_MESSAGES = {
+    badInput: $5bb15a153bd9c45e$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 $5bb15a153bd9c45e$var$MESSAGE_NAME = 'FormMessage';
+const $5bb15a153bd9c45e$export$2e8ae7a1a126169a = /*#__PURE__*/ $c9wdm$react.forwardRef((props, forwardedRef)=>{
+    const { match: match , name: nameProp , ...messageProps } = props;
+    const fieldContext = $5bb15a153bd9c45e$var$useFormFieldContext($5bb15a153bd9c45e$var$MESSAGE_NAME, props.__scopeForm);
+    const name = nameProp !== null && nameProp !== void 0 ? nameProp : fieldContext.name;
+    if (match === undefined) return /*#__PURE__*/ $c9wdm$react.createElement($5bb15a153bd9c45e$var$FormMessageImpl, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({}, messageProps, {
+        ref: forwardedRef,
+        name: name
+    }), props.children || $5bb15a153bd9c45e$var$DEFAULT_INVALID_MESSAGE);
+    else if (typeof match === 'function') return /*#__PURE__*/ $c9wdm$react.createElement($5bb15a153bd9c45e$var$FormCustomMessage, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({
+        match: match
+    }, messageProps, {
+        ref: forwardedRef,
+        name: name
+    }));
+    else return /*#__PURE__*/ $c9wdm$react.createElement($5bb15a153bd9c45e$var$FormBuiltInMessage, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({
+        match: match
+    }, messageProps, {
+        ref: forwardedRef,
+        name: name
+    }));
+});
+/*#__PURE__*/ Object.assign($5bb15a153bd9c45e$export$2e8ae7a1a126169a, {
+    displayName: $5bb15a153bd9c45e$var$MESSAGE_NAME
+});
+const $5bb15a153bd9c45e$var$FormBuiltInMessage = /*#__PURE__*/ $c9wdm$react.forwardRef((props, forwardedRef)=>{
+    const { match: match , forceMatch: forceMatch = false , name: name , children: children , ...messageProps } = props;
+    const validationContext = $5bb15a153bd9c45e$var$useValidationContext($5bb15a153bd9c45e$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__*/ $c9wdm$react.createElement($5bb15a153bd9c45e$var$FormMessageImpl, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({
+        ref: forwardedRef
+    }, messageProps, {
+        name: name
+    }), children !== null && children !== void 0 ? children : $5bb15a153bd9c45e$var$DEFAULT_BUILT_IN_MESSAGES[match]);
+    return null;
+});
+const $5bb15a153bd9c45e$var$FormCustomMessage = /*#__PURE__*/ $c9wdm$react.forwardRef((props, forwardedRef)=>{
+    const { match: match , forceMatch: forceMatch = false , name: name , id: idProp , children: children , ...messageProps } = props;
+    const validationContext = $5bb15a153bd9c45e$var$useValidationContext($5bb15a153bd9c45e$var$MESSAGE_NAME, messageProps.__scopeForm);
+    const ref = $c9wdm$react.useRef(null);
+    const composedRef = $c9wdm$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
+    const _id = $c9wdm$radixuireactid.useId();
+    const id = idProp !== null && idProp !== void 0 ? idProp : _id;
+    const customMatcherEntry = $c9wdm$react.useMemo(()=>({
+            id: id,
+            match: match
+        })
+    , [
+        id,
+        match
+    ]);
+    const { onFieldCustomMatcherEntryAdd: onFieldCustomMatcherEntryAdd , onFieldCustomMatcherEntryRemove: onFieldCustomMatcherEntryRemove  } = validationContext;
+    $c9wdm$react.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 && !$5bb15a153bd9c45e$var$hasBuiltInError(validity) && hasMatchingCustomError;
+    if (matches) return /*#__PURE__*/ $c9wdm$react.createElement($5bb15a153bd9c45e$var$FormMessageImpl, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({
+        id: id,
+        ref: composedRef
+    }, messageProps, {
+        name: name
+    }), children !== null && children !== void 0 ? children : $5bb15a153bd9c45e$var$DEFAULT_INVALID_MESSAGE);
+    return null;
+});
+const $5bb15a153bd9c45e$var$FormMessageImpl = /*#__PURE__*/ $c9wdm$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , id: idProp , name: name , ...messageProps } = props;
+    const ariaDescriptionContext = $5bb15a153bd9c45e$var$useAriaDescriptionContext($5bb15a153bd9c45e$var$MESSAGE_NAME, __scopeForm);
+    const _id = $c9wdm$radixuireactid.useId();
+    const id = idProp !== null && idProp !== void 0 ? idProp : _id;
+    const { onFieldMessageIdAdd: onFieldMessageIdAdd , onFieldMessageIdRemove: onFieldMessageIdRemove  } = ariaDescriptionContext;
+    $c9wdm$react.useEffect(()=>{
+        onFieldMessageIdAdd(name, id);
+        return ()=>onFieldMessageIdRemove(name, id)
+        ;
+    }, [
+        name,
+        id,
+        onFieldMessageIdAdd,
+        onFieldMessageIdRemove
+    ]);
+    return /*#__PURE__*/ $c9wdm$react.createElement($c9wdm$radixuireactprimitive.Primitive.span, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({
+        id: id
+    }, messageProps, {
+        ref: forwardedRef
+    }));
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormValidityState
+ * -----------------------------------------------------------------------------------------------*/ const $5bb15a153bd9c45e$var$VALIDITY_STATE_NAME = 'FormValidityState';
+const $5bb15a153bd9c45e$export$7a93102810e06862 = (props)=>{
+    const { __scopeForm: __scopeForm , name: nameProp , children: children  } = props;
+    const validationContext = $5bb15a153bd9c45e$var$useValidationContext($5bb15a153bd9c45e$var$VALIDITY_STATE_NAME, __scopeForm);
+    const fieldContext = $5bb15a153bd9c45e$var$useFormFieldContext($5bb15a153bd9c45e$var$VALIDITY_STATE_NAME, __scopeForm);
+    const name = nameProp !== null && nameProp !== void 0 ? nameProp : fieldContext.name;
+    const validity = validationContext.getFieldValidity(name);
+    return /*#__PURE__*/ $c9wdm$react.createElement($c9wdm$react.Fragment, null, children(validity));
+};
+/*#__PURE__*/ Object.assign($5bb15a153bd9c45e$export$7a93102810e06862, {
+    displayName: $5bb15a153bd9c45e$var$VALIDITY_STATE_NAME
+});
+/* -------------------------------------------------------------------------------------------------
+ * FormSubmit
+ * -----------------------------------------------------------------------------------------------*/ const $5bb15a153bd9c45e$var$SUBMIT_NAME = 'FormSubmit';
+const $5bb15a153bd9c45e$export$d0861e5bd09bd9e4 = /*#__PURE__*/ $c9wdm$react.forwardRef((props, forwardedRef)=>{
+    const { __scopeForm: __scopeForm , ...submitProps } = props;
+    return /*#__PURE__*/ $c9wdm$react.createElement($c9wdm$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($c9wdm$babelruntimehelpersextends))({
+        type: "submit"
+    }, submitProps, {
+        ref: forwardedRef
+    }));
+});
+/*#__PURE__*/ Object.assign($5bb15a153bd9c45e$export$d0861e5bd09bd9e4, {
+    displayName: $5bb15a153bd9c45e$var$SUBMIT_NAME
+});
+/* -----------------------------------------------------------------------------------------------*/ function $5bb15a153bd9c45e$var$validityStateToObject(validity) {
+    const object = {};
+    for(const key in validity)object[key] = validity[key];
+    return object;
+}
+function $5bb15a153bd9c45e$var$isHTMLElement(element) {
+    return element instanceof HTMLElement;
+}
+function $5bb15a153bd9c45e$var$isFormControl(element) {
+    return 'validity' in element;
+}
+function $5bb15a153bd9c45e$var$isInvalid(control) {
+    return $5bb15a153bd9c45e$var$isFormControl(control) && (control.validity.valid === false || control.getAttribute('aria-invalid') === 'true');
+}
+function $5bb15a153bd9c45e$var$getFirstInvalidControl(form) {
+    const elements = form.elements;
+    const [firstInvalidControl] = Array.from(elements).filter($5bb15a153bd9c45e$var$isHTMLElement).filter($5bb15a153bd9c45e$var$isInvalid);
+    return firstInvalidControl;
+}
+function $5bb15a153bd9c45e$var$isAsyncCustomMatcherEntry(entry, args) {
+    return entry.match.constructor.name === 'AsyncFunction' || $5bb15a153bd9c45e$var$returnsPromise(entry.match, args);
+}
+function $5bb15a153bd9c45e$var$isSyncCustomMatcherEntry(entry) {
+    return entry.match.constructor.name === 'Function';
+}
+function $5bb15a153bd9c45e$var$returnsPromise(func, args) {
+    return func(...args) instanceof Promise;
+}
+function $5bb15a153bd9c45e$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 $5bb15a153bd9c45e$var$getValidAttribute(validity, serverInvalid) {
+    if ((validity === null || validity === void 0 ? void 0 : validity.valid) === true && !serverInvalid) return true;
+    return undefined;
+}
+function $5bb15a153bd9c45e$var$getInvalidAttribute(validity, serverInvalid) {
+    if ((validity === null || validity === void 0 ? void 0 : validity.valid) === false || serverInvalid) return true;
+    return undefined;
+}
+
+
+
+
+//# sourceMappingURL=index.js.map