@conform-to/react 1.0.0-rc.0 → 1.0.0

package/README

@@ -8,9 +8,9 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.0-rc.0 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.0.0-rc.1 / License MIT / Copyright (c) 2024 Edmund Hung
 
-A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix route action and Next.js server actions.
+A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
 
 > Getting Started
 
@@ -21,7 +21,7 @@ Check out the overview and tutorial at our website https://conform.guide
 The documentation is divided into several sections:
 
 * Overview: https://conform.guide/overview
-* Example Usages: https://conform.guide/examples
+* Examples: https://conform.guide/examples
 * Complex structures: https://conform.guide/complex-structures
 * UI Integrations: https://conform.guide/integrations
 * Accessibility Guide: https://conform.guide/accessibility

package/context.d.ts

@@ -1,5 +1,5 @@
-import { type Constraint, type FormId, type FieldName, type FormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
-import { type ReactElement, type ReactNode, type MutableRefObject } from 'react';
+import { type Constraint, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType, type FormOptions as BaseFormOptions } from '@conform-to/dom';
+import { type FormEvent, type ReactElement, type ReactNode, type MutableRefObject } from 'react';
 export type Pretty<T> = {
     [K in keyof T]: T[K];
 } & {};
@@ -27,24 +27,23 @@ export type FormMetadata<Schema extends Record<string, unknown> = Record<string,
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     noValidate: boolean;
 };
-export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & {
+export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, any> = Record<string, unknown>, FormError = string[]> = Metadata<Schema, FormSchema, FormError> & Constraint & {
     formId: FormId<FormSchema, FormError>;
-    constraint?: Constraint;
     getFieldset: unknown extends Schema ? () => unknown : Schema extends Primitive | Array<any> ? never : () => {
         [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormSchema, FormError>;
     };
     getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormSchema, FormError>> : never;
 };
-export declare const Form: import("react").Context<FormContext[]>;
+export declare const Form: import("react").Context<FormContext<any, string[], any>[]>;
 declare const wrappedSymbol: unique symbol;
 export type Wrapped<Type> = {
     [wrappedSymbol]: Type;
 };
 export declare function getWrappedFormContext(context: Wrapped<FormContext>): FormContext;
-export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, unknown, FormError>;
-export declare function useFormState<FormError>(form: FormContext<any, any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
+export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, FormError, unknown>;
+export declare function useFormState<FormError>(form: FormContext<any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
 export declare function FormProvider(props: {
-    context: Wrapped<FormContext<any, any, any>>;
+    context: Wrapped<FormContext<any, any>>;
     children: ReactNode;
 }): ReactElement;
 export declare function FormStateInput(props: {
@@ -54,5 +53,16 @@ export declare function useSubjectRef(initialSubject?: SubscriptionSubject): Mut
 export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
 export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
 export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
-export declare function getFormMetadata<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormValue, FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormError, FormValue>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export type FormOptions<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = BaseFormOptions<Schema, FormError, FormValue> & {
+    /**
+     * A function to be called before the form is submitted.
+     */
+    onSubmit?: (event: FormEvent<HTMLFormElement>, context: ReturnType<BaseFormContext<Schema, FormError, FormValue>['submit']>) => void;
+};
+export type FormContext<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = Omit<BaseFormContext<Schema, FormError, FormValue>, 'submit' | 'onUpdate'> & {
+    submit: (event: FormEvent<HTMLFormElement>) => void;
+    onUpdate: (options: Partial<FormOptions<Schema, FormError, FormValue>>) => void;
+};
+export declare function createFormContext<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema>(options: FormOptions<Schema, FormError, FormValue>): FormContext<Schema, FormError, FormValue>;
 export {};

package/context.js

@@ -7,6 +7,7 @@ var dom = require('@conform-to/dom');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+var _excluded = ["onSubmit"];
 var Form = /*#__PURE__*/react.createContext([]);
 
 // To hide the FormContext type from the public API
@@ -73,9 +74,15 @@ function getMetadata(formId, state, subjectRef) {
     name,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
-    initialValue: state.initialValue[name],
-    value: state.value[name],
-    errors: state.error[name],
+    get initialValue() {
+      return state.initialValue[name];
+    },
+    get value() {
+      return state.value[name];
+    },
+    get errors() {
+      return state.error[name];
+    },
     get key() {
       return state.key[name];
     },
@@ -133,11 +140,19 @@ function getFieldMetadata(formId, state, subjectRef) {
   var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy({}, {
     get(_, key, receiver) {
+      var _state$constraint$nam;
       switch (key) {
         case 'formId':
           return formId;
-        case 'constraint':
-          return state.constraint[name];
+        case 'required':
+        case 'minLength':
+        case 'maxLength':
+        case 'min':
+        case 'max':
+        case 'pattern':
+        case 'step':
+        case 'multiple':
+          return (_state$constraint$nam = state.constraint[name]) === null || _state$constraint$nam === void 0 ? void 0 : _state$constraint$nam[key];
         case 'getFieldList':
           {
             return () => {
@@ -174,13 +189,7 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
         case 'reorder':
           return context[key];
         case 'onSubmit':
-          return event => {
-            var submitEvent = event.nativeEvent;
-            var submission = context.submit(submitEvent);
-            if (submission && submission.status !== 'success' && submission.error !== null) {
-              event.preventDefault();
-            }
-          };
+          return context.submit;
         case 'noValidate':
           return noValidate;
       }
@@ -188,10 +197,34 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
     }
   });
 }
+function createFormContext(options) {
+  var {
+      onSubmit
+    } = options,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);
+  var context = dom.unstable_createFormContext(rest);
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, context), {}, {
+    submit(event) {
+      var submitEvent = event.nativeEvent;
+      var result = context.submit(submitEvent);
+      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
+        event.preventDefault();
+      } else {
+        var _onSubmit;
+        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+      }
+    },
+    onUpdate(options) {
+      onSubmit = options.onSubmit;
+      context.onUpdate(options);
+    }
+  });
+}
 
 exports.Form = Form;
 exports.FormProvider = FormProvider;
 exports.FormStateInput = FormStateInput;
+exports.createFormContext = createFormContext;
 exports.getFieldMetadata = getFieldMetadata;
 exports.getFormMetadata = getFormMetadata;
 exports.getMetadata = getMetadata;

package/context.mjs

@@ -1,8 +1,9 @@
-import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { STATE, formatPaths, getPaths, isPrefix } from '@conform-to/dom';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+import { STATE, formatPaths, getPaths, unstable_createFormContext, isPrefix } from '@conform-to/dom';
 import { useContext, useMemo, createContext, useCallback, useSyncExternalStore, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+var _excluded = ["onSubmit"];
 var Form = /*#__PURE__*/createContext([]);
 
 // To hide the FormContext type from the public API
@@ -69,9 +70,15 @@ function getMetadata(formId, state, subjectRef) {
     name,
     errorId: "".concat(id, "-error"),
     descriptionId: "".concat(id, "-description"),
-    initialValue: state.initialValue[name],
-    value: state.value[name],
-    errors: state.error[name],
+    get initialValue() {
+      return state.initialValue[name];
+    },
+    get value() {
+      return state.value[name];
+    },
+    get errors() {
+      return state.error[name];
+    },
     get key() {
       return state.key[name];
     },
@@ -129,11 +136,19 @@ function getFieldMetadata(formId, state, subjectRef) {
   var metadata = getMetadata(formId, state, subjectRef, name);
   return new Proxy({}, {
     get(_, key, receiver) {
+      var _state$constraint$nam;
       switch (key) {
         case 'formId':
           return formId;
-        case 'constraint':
-          return state.constraint[name];
+        case 'required':
+        case 'minLength':
+        case 'maxLength':
+        case 'min':
+        case 'max':
+        case 'pattern':
+        case 'step':
+        case 'multiple':
+          return (_state$constraint$nam = state.constraint[name]) === null || _state$constraint$nam === void 0 ? void 0 : _state$constraint$nam[key];
         case 'getFieldList':
           {
             return () => {
@@ -170,13 +185,7 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
         case 'reorder':
           return context[key];
         case 'onSubmit':
-          return event => {
-            var submitEvent = event.nativeEvent;
-            var submission = context.submit(submitEvent);
-            if (submission && submission.status !== 'success' && submission.error !== null) {
-              event.preventDefault();
-            }
-          };
+          return context.submit;
         case 'noValidate':
           return noValidate;
       }
@@ -184,5 +193,28 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
     }
   });
 }
+function createFormContext(options) {
+  var {
+      onSubmit
+    } = options,
+    rest = _objectWithoutProperties(options, _excluded);
+  var context = unstable_createFormContext(rest);
+  return _objectSpread2(_objectSpread2({}, context), {}, {
+    submit(event) {
+      var submitEvent = event.nativeEvent;
+      var result = context.submit(submitEvent);
+      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
+        event.preventDefault();
+      } else {
+        var _onSubmit;
+        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+      }
+    },
+    onUpdate(options) {
+      onSubmit = options.onSubmit;
+      context.onUpdate(options);
+    }
+  });
+}
 
-export { Form, FormProvider, FormStateInput, getFieldMetadata, getFormMetadata, getMetadata, getWrappedFormContext, updateSubjectRef, useFormContext, useFormState, useSubjectRef };
+export { Form, FormProvider, FormStateInput, createFormContext, getFieldMetadata, getFormMetadata, getMetadata, getWrappedFormContext, updateSubjectRef, useFormContext, useFormState, useSubjectRef };

package/helpers.d.ts

@@ -27,7 +27,7 @@ type FormControlOptions = {
     ariaAttributes: false;
 };
 type InputProps = Pretty<FormControlProps & {
-    type: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    type: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
     minLength?: number;
     maxLength?: number;
     min?: string | number;

package/helpers.js

@@ -72,10 +72,9 @@ function getFieldsetProps(metadata, options) {
  * including `key`, `id`, `name`, `form`, `required`, `autoFocus`, `aria-invalid` and `aria-describedby`.
  */
 function getFormControlProps(metadata, options) {
-  var _metadata$constraint;
   return simplify(_rollupPluginBabelHelpers.objectSpread2({
     key: metadata.key,
-    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined
+    required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }
 
@@ -100,16 +99,15 @@ function getFormControlProps(metadata, options) {
  * ```
  */
 function getInputProps(metadata, options) {
-  var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
     type: options.type,
-    minLength: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.minLength,
-    maxLength: (_metadata$constraint3 = metadata.constraint) === null || _metadata$constraint3 === void 0 ? void 0 : _metadata$constraint3.maxLength,
-    min: (_metadata$constraint4 = metadata.constraint) === null || _metadata$constraint4 === void 0 ? void 0 : _metadata$constraint4.min,
-    max: (_metadata$constraint5 = metadata.constraint) === null || _metadata$constraint5 === void 0 ? void 0 : _metadata$constraint5.max,
-    step: (_metadata$constraint6 = metadata.constraint) === null || _metadata$constraint6 === void 0 ? void 0 : _metadata$constraint6.step,
-    pattern: (_metadata$constraint7 = metadata.constraint) === null || _metadata$constraint7 === void 0 ? void 0 : _metadata$constraint7.pattern,
-    multiple: (_metadata$constraint8 = metadata.constraint) === null || _metadata$constraint8 === void 0 ? void 0 : _metadata$constraint8.multiple
+    minLength: metadata.minLength,
+    maxLength: metadata.maxLength,
+    min: metadata.min,
+    max: metadata.max,
+    step: metadata.step,
+    pattern: metadata.pattern,
+    multiple: metadata.multiple
   });
   if (typeof options.value === 'undefined' || options.value) {
     if (options.type === 'checkbox' || options.type === 'radio') {
@@ -138,10 +136,9 @@ function getInputProps(metadata, options) {
  * ```
  */
 function getSelectProps(metadata) {
-  var _metadata$constraint9;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
-    multiple: (_metadata$constraint9 = metadata.constraint) === null || _metadata$constraint9 === void 0 ? void 0 : _metadata$constraint9.multiple
+    multiple: metadata.multiple
   });
   if (typeof options.value === 'undefined' || options.value) {
     props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : metadata.initialValue;
@@ -165,11 +162,10 @@ function getSelectProps(metadata) {
  * ```
  */
 function getTextareaProps(metadata) {
-  var _metadata$constraint10, _metadata$constraint11;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
-    minLength: (_metadata$constraint10 = metadata.constraint) === null || _metadata$constraint10 === void 0 ? void 0 : _metadata$constraint10.minLength,
-    maxLength: (_metadata$constraint11 = metadata.constraint) === null || _metadata$constraint11 === void 0 ? void 0 : _metadata$constraint11.maxLength
+    minLength: metadata.minLength,
+    maxLength: metadata.maxLength
   });
   if (typeof options.value === 'undefined' || options.value) {
     props.defaultValue = metadata.initialValue;
@@ -199,7 +195,7 @@ function getTextareaProps(metadata) {
  */
 function getCollectionProps(metadata, options) {
   return options.options.map(value => {
-    var _metadata$key, _metadata$constraint12;
+    var _metadata$key;
     return simplify(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
       key: "".concat((_metadata$key = metadata.key) !== null && _metadata$key !== void 0 ? _metadata$key : '').concat(value),
       id: "".concat(metadata.id, "-").concat(value),
@@ -209,7 +205,7 @@ function getCollectionProps(metadata, options) {
       // The required attribute doesn't make sense for checkbox group
       // As it would require all checkboxes to be checked instead of at least one
       // It is overriden with `undefiend` so it could be cleaned up properly
-      required: options.type === 'checkbox' ? undefined : (_metadata$constraint12 = metadata.constraint) === null || _metadata$constraint12 === void 0 ? void 0 : _metadata$constraint12.required
+      required: options.type === 'checkbox' ? undefined : metadata.required
     }));
   });
 }

package/helpers.mjs

@@ -68,10 +68,9 @@ function getFieldsetProps(metadata, options) {
  * including `key`, `id`, `name`, `form`, `required`, `autoFocus`, `aria-invalid` and `aria-describedby`.
  */
 function getFormControlProps(metadata, options) {
-  var _metadata$constraint;
   return simplify(_objectSpread2({
     key: metadata.key,
-    required: ((_metadata$constraint = metadata.constraint) === null || _metadata$constraint === void 0 ? void 0 : _metadata$constraint.required) || undefined
+    required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }
 
@@ -96,16 +95,15 @@ function getFormControlProps(metadata, options) {
  * ```
  */
 function getInputProps(metadata, options) {
-  var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
   var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
     type: options.type,
-    minLength: (_metadata$constraint2 = metadata.constraint) === null || _metadata$constraint2 === void 0 ? void 0 : _metadata$constraint2.minLength,
-    maxLength: (_metadata$constraint3 = metadata.constraint) === null || _metadata$constraint3 === void 0 ? void 0 : _metadata$constraint3.maxLength,
-    min: (_metadata$constraint4 = metadata.constraint) === null || _metadata$constraint4 === void 0 ? void 0 : _metadata$constraint4.min,
-    max: (_metadata$constraint5 = metadata.constraint) === null || _metadata$constraint5 === void 0 ? void 0 : _metadata$constraint5.max,
-    step: (_metadata$constraint6 = metadata.constraint) === null || _metadata$constraint6 === void 0 ? void 0 : _metadata$constraint6.step,
-    pattern: (_metadata$constraint7 = metadata.constraint) === null || _metadata$constraint7 === void 0 ? void 0 : _metadata$constraint7.pattern,
-    multiple: (_metadata$constraint8 = metadata.constraint) === null || _metadata$constraint8 === void 0 ? void 0 : _metadata$constraint8.multiple
+    minLength: metadata.minLength,
+    maxLength: metadata.maxLength,
+    min: metadata.min,
+    max: metadata.max,
+    step: metadata.step,
+    pattern: metadata.pattern,
+    multiple: metadata.multiple
   });
   if (typeof options.value === 'undefined' || options.value) {
     if (options.type === 'checkbox' || options.type === 'radio') {
@@ -134,10 +132,9 @@ function getInputProps(metadata, options) {
  * ```
  */
 function getSelectProps(metadata) {
-  var _metadata$constraint9;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
-    multiple: (_metadata$constraint9 = metadata.constraint) === null || _metadata$constraint9 === void 0 ? void 0 : _metadata$constraint9.multiple
+    multiple: metadata.multiple
   });
   if (typeof options.value === 'undefined' || options.value) {
     props.defaultValue = Array.isArray(metadata.initialValue) ? metadata.initialValue.map(item => "".concat(item !== null && item !== void 0 ? item : '')) : metadata.initialValue;
@@ -161,11 +158,10 @@ function getSelectProps(metadata) {
  * ```
  */
 function getTextareaProps(metadata) {
-  var _metadata$constraint10, _metadata$constraint11;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var props = _objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
-    minLength: (_metadata$constraint10 = metadata.constraint) === null || _metadata$constraint10 === void 0 ? void 0 : _metadata$constraint10.minLength,
-    maxLength: (_metadata$constraint11 = metadata.constraint) === null || _metadata$constraint11 === void 0 ? void 0 : _metadata$constraint11.maxLength
+    minLength: metadata.minLength,
+    maxLength: metadata.maxLength
   });
   if (typeof options.value === 'undefined' || options.value) {
     props.defaultValue = metadata.initialValue;
@@ -195,7 +191,7 @@ function getTextareaProps(metadata) {
  */
 function getCollectionProps(metadata, options) {
   return options.options.map(value => {
-    var _metadata$key, _metadata$constraint12;
+    var _metadata$key;
     return simplify(_objectSpread2(_objectSpread2({}, getFormControlProps(metadata, options)), {}, {
       key: "".concat((_metadata$key = metadata.key) !== null && _metadata$key !== void 0 ? _metadata$key : '').concat(value),
       id: "".concat(metadata.id, "-").concat(value),
@@ -205,7 +201,7 @@ function getCollectionProps(metadata, options) {
       // The required attribute doesn't make sense for checkbox group
       // As it would require all checkboxes to be checked instead of at least one
       // It is overriden with `undefiend` so it could be cleaned up properly
-      required: options.type === 'checkbox' ? undefined : (_metadata$constraint12 = metadata.constraint) === null || _metadata$constraint12 === void 0 ? void 0 : _metadata$constraint12.required
+      required: options.type === 'checkbox' ? undefined : metadata.required
     }));
   });
 }

package/hooks.d.ts

@@ -1,6 +1,6 @@
-import { type FormId, type FieldName, type FormOptions } from '@conform-to/dom';
+import { type FormId, type FieldName } from '@conform-to/dom';
 import { useEffect } from 'react';
-import { type FormMetadata, type FieldMetadata, type Pretty } from './context';
+import { type FormMetadata, type FieldMetadata, type Pretty, type FormOptions } from './context';
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server

package/hooks.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var dom = require('@conform-to/dom');
 var react = require('react');
 var context = require('./context.js');
 
@@ -37,7 +36,7 @@ function useForm(options) {
     } = options,
     formConfig = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);
   var formId = useFormId(id);
-  var [context$1] = react.useState(() => dom.unstable_createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
+  var [context$1] = react.useState(() => context.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
     formId
   })));
   useSafeLayoutEffect(() => {

package/hooks.mjs

@@ -1,7 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { unstable_createFormContext } from '@conform-to/dom';
 import { useState, useEffect, useLayoutEffect, useId } from 'react';
-import { useSubjectRef, useFormState, getFormMetadata, useFormContext, getFieldMetadata } from './context.mjs';
+import { createFormContext, useSubjectRef, useFormState, getFormMetadata, useFormContext, getFieldMetadata } from './context.mjs';
 
 var _excluded = ["id"];
 
@@ -33,7 +32,7 @@ function useForm(options) {
     } = options,
     formConfig = _objectWithoutProperties(options, _excluded);
   var formId = useFormId(id);
-  var [context] = useState(() => unstable_createFormContext(_objectSpread2(_objectSpread2({}, formConfig), {}, {
+  var [context] = useState(() => createFormContext(_objectSpread2(_objectSpread2({}, formConfig), {}, {
     formId
   })));
   useSafeLayoutEffect(() => {

package/index.d.ts

@@ -1,5 +1,5 @@
 export { type Submission, type SubmissionResult, type DefaultValue, type Intent, type FormId, type FieldName, parse, } from '@conform-to/dom';
 export { type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
 export { useForm, useFormMetadata, useField } from './hooks';
-export { type InputControlOptions, useInputControl } from './integrations';
+export { useInputControl } from './integrations';
 export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.0.0-rc.0",
+	"version": "1.0.0",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,7 +30,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "1.0.0-rc.0"
+		"@conform-to/dom": "1.0.0"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",