@conform-to/react 0.9.1 → 1.0.0-pre.1

package/helpers.d.ts

@@ -1,72 +1,228 @@
-import { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED } from '@conform-to/dom';
-import type { FieldConfig, Primitive } from './hooks.js';
-import type { CSSProperties, HTMLInputTypeAttribute } from 'react';
-interface FormElementProps {
-    id?: string;
+/// <reference types="react" />
+import { type Intent } from '@conform-to/dom';
+import type { FormMetadata, FieldMetadata, Metadata, Pretty, Primitive } from './context';
+type FormControlProps = {
+    id: string;
     name: string;
-    form?: string;
-    'aria-describedby'?: string;
-    'aria-invalid'?: boolean;
-}
-interface FormControlProps extends FormElementProps {
+    form: string;
     required?: boolean;
     autoFocus?: boolean;
     tabIndex?: number;
-    style?: CSSProperties;
-    'aria-hidden'?: boolean;
-}
-interface InputProps<Schema> extends FormControlProps {
-    type?: HTMLInputTypeAttribute;
+    'aria-describedby'?: string;
+    'aria-invalid'?: boolean;
+};
+type FormControlOptions = {
+    /**
+     * Decide whether to include `aria-invalid` and `aria-describedby` in the result.
+     */
+    ariaAttributes?: true;
+    /**
+     * Decide whether the aria attributes should be based on `field.valid` or `field.allValid`.
+     * @default 'field'
+     */
+    ariaInvalid?: 'all' | 'field';
+    /**
+     * Assign additional `id` to the `aria-describedby` attribute. If `true`, it will use the `descriptionId` from the metadata.
+     */
+    ariaDescribedBy?: boolean | string;
+} | {
+    ariaAttributes: false;
+};
+type InputProps = Pretty<FormControlProps & {
+    type?: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
     minLength?: number;
     maxLength?: number;
-    min?: Schema extends number ? number : string | number;
-    max?: Schema extends number ? number : string | number;
-    step?: Schema extends number ? number : string | number;
+    min?: string | number;
+    max?: string | number;
+    step?: string | number;
     pattern?: string;
     multiple?: boolean;
     value?: string;
     defaultChecked?: boolean;
     defaultValue?: string;
-}
-interface SelectProps extends FormControlProps {
+}>;
+type InputOptions = Pretty<FormControlOptions & ({
+    type: 'checkbox' | 'radio';
+    /**
+     * The value of the checkbox or radio button. Pass `false` if you want to mange the checked state yourself.
+     * @default 'on'
+     */
+    value?: string | boolean;
+} | {
+    type?: Exclude<InputProps['type'], 'checkbox' | 'radio'>;
+    /**
+     * Decide whether defaultValue should be returned. Pass `false` if you want to mange the value yourself.
+     */
+    value?: boolean;
+})>;
+type SelectProps = Pretty<FormControlProps & {
     defaultValue?: string | number | readonly string[] | undefined;
     multiple?: boolean;
-}
-interface TextareaProps extends FormControlProps {
+}>;
+type SelectOptions = Pretty<FormControlOptions & {
+    /**
+     * Decide whether defaultValue should be returned. Pass `false` if you want to mange the value yourself.
+     */
+    value?: boolean;
+}>;
+type TextareaProps = Pretty<FormControlProps & {
     minLength?: number;
     maxLength?: number;
     defaultValue?: string;
-}
-type BaseOptions = {
-    ariaAttributes?: true;
-    description?: boolean;
-} | {
-    ariaAttributes: false;
+}>;
+type TextareaOptions = Pretty<FormControlOptions & {
+    /**
+     * Decide whether defaultValue should be returned. Pass `false` if you want to mange the value yourself.
+     */
+    value?: true;
+}>;
+/**
+ * Derives aria attributes of a form control based on the field metadata.
+ */
+export declare function getAriaAttributes<Schema, Error>(metadata: Metadata<Schema, Error>, options?: FormControlOptions): {
+    'aria-invalid'?: boolean;
+    'aria-describedby'?: string;
 };
-type ControlOptions = BaseOptions & {
-    hidden?: boolean;
+/**
+ * Derives the properties of a form element based on the form metadata,
+ * including `id`, `onSubmit`, `noValidate`, `aria-invalid` and `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <form {...getFormProps(metadata)} />
+ * ```
+ */
+export declare function getFormProps<Schema extends Record<string, any>, Error>(metadata: FormMetadata<Schema, Error>, options?: FormControlOptions): {
+    'aria-invalid'?: boolean | undefined;
+    'aria-describedby'?: string | undefined;
+    id: import("@conform-to/dom").FormId<Schema, Error>;
+    onSubmit: (event: import("react").FormEvent<HTMLFormElement>) => void;
+    noValidate: boolean;
 };
-type InputOptions = ControlOptions & ({
-    type: 'checkbox' | 'radio';
-    value?: string;
-} | {
-    type?: Exclude<HTMLInputTypeAttribute, 'button' | 'submit' | 'hidden'>;
-    value?: never;
-});
-export declare const hiddenProps: {
-    style: CSSProperties;
-    tabIndex: number;
-    'aria-hidden': boolean;
+/**
+ * Derives the properties of a fieldset element based on the field metadata,
+ * including `id`, `name`, `form`, `aria-invalid` and `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <fieldset {...getFieldsetProps(metadata)} />
+ * ```
+ */
+export declare function getFieldsetProps<Schema extends Record<string, any> | undefined | unknown, Error>(metadata: FieldMetadata<Schema, Error, any>, options?: FormControlOptions): {
+    'aria-invalid'?: boolean | undefined;
+    'aria-describedby'?: string | undefined;
+    id: string;
+    name: import("@conform-to/dom").FieldName<Schema>;
+    form: import("@conform-to/dom").FormId<any, Error>;
+};
+/**
+ * Derives common properties of a form control based on the field metadata,
+ * including `key`, `id`, `name`, `form`, `required`, `autoFocus`, `aria-invalid` and `aria-describedby`.
+ */
+export declare function getFormControlProps<Schema, Error>(metadata: FieldMetadata<Schema, Error, any>, options?: FormControlOptions): {
+    'aria-invalid'?: boolean | undefined;
+    'aria-describedby'?: string | undefined;
+    id: string;
+    name: import("@conform-to/dom").FieldName<Schema>;
+    form: import("@conform-to/dom").FormId<any, Error>;
+    key: string | undefined;
+    required: true | undefined;
+    autoFocus: true | undefined;
 };
-export declare function input<Schema extends Primitive | unknown>(config: FieldConfig<Schema>, options?: InputOptions): InputProps<Schema>;
-export declare function input<Schema extends File | File[]>(config: FieldConfig<Schema>, options: InputOptions & {
+/**
+ * Derives the properties of an input element based on the field metadata,
+ * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
+ * and constraint attributes such as `type`, `required`, `minLength`, `maxLength`, `min`, `max`, `step`, `pattern`, `multiple`.
+ * Depends on the provided options, it will also set `defaultChecked` / `checked` if it is a checkbox or radio button,
+ * or otherwise `defaultValue` / `value`.
+ *
+ * @see https://conform.guide/api/react/get-input-props
+ * @example
+ * ```tsx
+ * // To setup an uncontrolled input
+ * <input {...getInputProps(metadata)} />
+ * // To setup an uncontrolled checkbox
+ * <input {...getInputProps(metadata, { type: 'checkbox' })} />
+ * // To setup an input without defaultValue
+ * <input {...getInputProps(metadata, { value: false })} />
+ * // To setup a radio button without defaultChecked state
+ * <input {...getInputProps(metadata, { type: 'radio', value: false })} />
+ * ```
+ */
+export declare function getInputProps<Schema extends Exclude<Primitive, File>>(metadata: FieldMetadata<Schema, any, any>, options?: InputOptions): InputProps;
+export declare function getInputProps<Schema extends File | File[]>(metadata: FieldMetadata<Schema, any, any>, options: InputOptions & {
     type: 'file';
-}): InputProps<Schema>;
-export declare function select<Schema extends Primitive | Primitive[] | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): SelectProps;
-export declare function textarea<Schema extends Primitive | undefined | unknown>(config: FieldConfig<Schema>, options?: ControlOptions): TextareaProps;
-export declare function fieldset<Schema extends Record<string, unknown> | undefined | unknown>(config: FieldConfig<Schema>, options?: BaseOptions): FormControlProps;
-export declare function collection<Schema extends Array<string | boolean> | string | boolean | undefined | unknown>(config: FieldConfig<Schema>, options: BaseOptions & {
+}): InputProps;
+/**
+ * Derives the properties of a select element based on the field metadata,
+ * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
+ * and constraint attributes such as `required` or `multiple`.
+ * Depends on the provided options, it will also set `defaultValue` / `value`.
+ *
+ * @see https://conform.guide/api/react/get-select-props
+ * @example
+ * ```tsx
+ * // To setup an uncontrolled select
+ * <select {...getSelectProps(metadata)} />
+ * // To setup a select without defaultValue
+ * <select {...getSelectProps(metadata, { value: false })} />
+ * ```
+ */
+export declare function getSelectProps<Schema extends Exclude<Primitive, File> | Array<Exclude<Primitive, File>> | undefined>(metadata: FieldMetadata<Schema, any, any>, options?: SelectOptions): SelectProps;
+/**
+ * Derives the properties of a textarea element based on the field metadata,
+ * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
+ * and constraint attributes such as `required`, `minLength` or `maxLength`.
+ * Depends on the provided options, it will also set `defaultValue` / `value`.
+ *
+ * @see https://conform.guide/api/react/get-textarea-props
+ * @example
+ * ```tsx
+ * // To setup an uncontrolled textarea
+ * <textarea {...getTextareaProps(metadata)} />
+ * // To setup a textarea without defaultValue
+ * <textarea {...getTextareaProps(metadata, { value: false })} />
+ * ```
+ */
+export declare function getTextareaProps<Schema extends Exclude<Primitive, File> | undefined>(metadata: FieldMetadata<Schema, any, any>, options?: TextareaOptions): TextareaProps;
+/**
+ * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
+ * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
+ *
+ * @see https://conform.guide/api/react/get-textarea-props
+ * @example
+ * ```tsx
+ * <fieldset>
+ *   {getCollectionProps(metadata, {
+ *     type: 'checkbox',
+ *     options: ['a', 'b', 'c']
+ *   }).map((props) => (
+ *     <div key={props.key}>
+ *       <label htmlFor={props.id}>{props.value}</label>
+ *       <input {...props} />
+ *     </div>
+ *  ))}
+ * </fieldset>
+ * ```
+ */
+export declare function getCollectionProps<Schema extends Array<string | boolean> | string | boolean | undefined | unknown>(metadata: FieldMetadata<Schema, any, any>, options: Pretty<FormControlOptions & {
+    /**
+     * The input type. Use `checkbox` for multiple selection or `radio` for single selection.
+     */
     type: 'checkbox' | 'radio';
+    /**
+     * The `value` assigned to each input element.
+     */
     options: string[];
-}): Array<InputProps<Schema> & Pick<Required<InputProps<Schema>>, 'type' | 'value'>>;
-export { INTENT, VALIDATION_UNDEFINED, VALIDATION_SKIPPED };
+    /**
+     * Decide whether defaultValue should be returned. Pass `false` if you want to mange the value yourself.
+     */
+    value?: boolean;
+}>): Array<InputProps & Pick<Required<InputProps>, 'type' | 'value'>>;
+export declare function getControlButtonProps(formId: string, intents: Array<Intent>): {
+    name: string;
+    value: string;
+    form: string;
+    formNoValidate: boolean;
+};
+export {};

package/helpers.js

@@ -6,10 +6,10 @@ var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js
 var dom = require('@conform-to/dom');
 
 /**
- * Cleanup `undefined` from the dervied props
+ * Cleanup `undefined` from the result.
  * To minimize conflicts when merging with user defined props
  */
-function cleanup(props) {
+function simplify(props) {
   for (var key in props) {
     if (props[key] === undefined) {
       delete props[key];
@@ -17,116 +17,221 @@ function cleanup(props) {
   }
   return props;
 }
-function getFormElementProps(config) {
-  var _options$ariaAttribut, _config$error, _config$error2;
+
+/**
+ * Derives aria attributes of a form control based on the field metadata.
+ */
+function getAriaAttributes(metadata) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var hasAriaAttributes = (_options$ariaAttribut = options.ariaAttributes) !== null && _options$ariaAttribut !== void 0 ? _options$ariaAttribut : true;
-  return cleanup({
-    id: config.id,
-    name: config.name,
-    form: config.form,
-    'aria-invalid': hasAriaAttributes && config.errorId && (_config$error = config.error) !== null && _config$error !== void 0 && _config$error.length ? true : undefined,
-    'aria-describedby': hasAriaAttributes ? [config.errorId && (_config$error2 = config.error) !== null && _config$error2 !== void 0 && _config$error2.length ? config.errorId : undefined, config.descriptionId && options.ariaAttributes !== false && options.description ? config.descriptionId : undefined].reduce((result, id) => {
-      if (!result) {
-        return id;
-      }
-      if (!id) {
-        return result;
-      }
-      return "".concat(result, " ").concat(id);
-    }) : undefined
+  if (typeof options.ariaAttributes !== 'undefined' && !options.ariaAttributes) {
+    return {};
+  }
+  var invalid = options.ariaInvalid === 'all' ? !metadata.allValid : !metadata.valid;
+  var ariaDescribedBy = typeof options.ariaDescribedBy === 'string' ? options.ariaDescribedBy : options.ariaDescribedBy ? metadata.descriptionId : undefined;
+  return simplify({
+    'aria-invalid': invalid || undefined,
+    'aria-describedby': invalid ? "".concat(metadata.errorId, " ").concat(ariaDescribedBy !== null && ariaDescribedBy !== void 0 ? ariaDescribedBy : '').trim() : ariaDescribedBy
   });
 }
-function getFormControlProps(config, options) {
-  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormElementProps(config, options)), {}, {
-    required: config.required,
-    autoFocus: config.initialError && Object.entries(config.initialError).length > 0 ? true : undefined
-  }, options !== null && options !== void 0 && options.hidden ? hiddenProps : undefined));
+
+/**
+ * Derives the properties of a form element based on the form metadata,
+ * including `id`, `onSubmit`, `noValidate`, `aria-invalid` and `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <form {...getFormProps(metadata)} />
+ * ```
+ */
+function getFormProps(metadata, options) {
+  return simplify(_rollupPluginBabelHelpers.objectSpread2({
+    id: metadata.id,
+    onSubmit: metadata.onSubmit,
+    noValidate: metadata.noValidate
+  }, getAriaAttributes(metadata, options)));
 }
-var hiddenProps = {
-  /**
-   * Style to make the input element visually hidden
-   * Based on the `sr-only` class from tailwindcss
-   */
-  style: {
-    position: 'absolute',
-    width: '1px',
-    height: '1px',
-    padding: 0,
-    margin: '-1px',
-    overflow: 'hidden',
-    clip: 'rect(0,0,0,0)',
-    whiteSpace: 'nowrap',
-    border: 0
-  },
-  tabIndex: -1,
-  'aria-hidden': true
-};
-function input(config) {
+
+/**
+ * Derives the properties of a fieldset element based on the field metadata,
+ * including `id`, `name`, `form`, `aria-invalid` and `aria-describedby`.
+ *
+ * @example
+ * ```tsx
+ * <fieldset {...getFieldsetProps(metadata)} />
+ * ```
+ */
+function getFieldsetProps(metadata, options) {
+  return simplify(_rollupPluginBabelHelpers.objectSpread2({
+    id: metadata.id,
+    name: metadata.name,
+    form: metadata.formId
+  }, getAriaAttributes(metadata, options)));
+}
+
+/**
+ * Derives common properties of a form control based on the field metadata,
+ * 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,
+    autoFocus: !metadata.valid || undefined
+  }, getFieldsetProps(metadata, options)));
+}
+
+/**
+ * Derives the properties of an input element based on the field metadata,
+ * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
+ * and constraint attributes such as `type`, `required`, `minLength`, `maxLength`, `min`, `max`, `step`, `pattern`, `multiple`.
+ * Depends on the provided options, it will also set `defaultChecked` / `checked` if it is a checkbox or radio button,
+ * or otherwise `defaultValue` / `value`.
+ *
+ * @see https://conform.guide/api/react/get-input-props
+ * @example
+ * ```tsx
+ * // To setup an uncontrolled input
+ * <input {...getInputProps(metadata)} />
+ * // To setup an uncontrolled checkbox
+ * <input {...getInputProps(metadata, { type: 'checkbox' })} />
+ * // To setup an input without defaultValue
+ * <input {...getInputProps(metadata, { value: false })} />
+ * // To setup a radio button without defaultChecked state
+ * <input {...getInputProps(metadata, { type: 'radio', value: false })} />
+ * ```
+ */
+
+function getInputProps(metadata) {
+  var _metadata$constraint2, _metadata$constraint3, _metadata$constraint4, _metadata$constraint5, _metadata$constraint6, _metadata$constraint7, _metadata$constraint8;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
+  var props = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(metadata, options)), {}, {
     type: options.type,
-    minLength: config.minLength,
-    maxLength: config.maxLength,
-    min: config.min,
-    max: config.max,
-    step: config.step,
-    pattern: config.pattern,
-    multiple: config.multiple
+    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
   });
-  if (options.type === 'checkbox' || options.type === 'radio') {
-    var _options$value;
-    props.value = (_options$value = options.value) !== null && _options$value !== void 0 ? _options$value : 'on';
-    props.defaultChecked = config.defaultValue === props.value;
-  } else if (options.type !== 'file') {
-    props.defaultValue = config.defaultValue;
+  if (typeof options.value === 'undefined' || options.value) {
+    if (options.type === 'checkbox' || options.type === 'radio') {
+      props.value = typeof options.value === 'string' ? options.value : 'on';
+      props.defaultChecked = typeof metadata.initialValue === 'boolean' ? metadata.initialValue : metadata.initialValue === props.value;
+    } else if (typeof metadata.initialValue === 'string') {
+      props.defaultValue = metadata.initialValue;
+    }
   }
-  return cleanup(props);
+  return simplify(props);
 }
-function select(config, options) {
-  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
-    defaultValue: config.defaultValue,
-    multiple: config.multiple
-  }));
+
+/**
+ * Derives the properties of a select element based on the field metadata,
+ * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
+ * and constraint attributes such as `required` or `multiple`.
+ * Depends on the provided options, it will also set `defaultValue` / `value`.
+ *
+ * @see https://conform.guide/api/react/get-select-props
+ * @example
+ * ```tsx
+ * // To setup an uncontrolled select
+ * <select {...getSelectProps(metadata)} />
+ * // To setup a select without defaultValue
+ * <select {...getSelectProps(metadata, { value: false })} />
+ * ```
+ */
+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
+  });
+  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;
+  }
+  return simplify(props);
 }
-function textarea(config, options) {
-  return cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
-    defaultValue: config.defaultValue,
-    minLength: config.minLength,
-    maxLength: config.maxLength
-  }));
+
+/**
+ * Derives the properties of a textarea element based on the field metadata,
+ * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby`
+ * and constraint attributes such as `required`, `minLength` or `maxLength`.
+ * Depends on the provided options, it will also set `defaultValue` / `value`.
+ *
+ * @see https://conform.guide/api/react/get-textarea-props
+ * @example
+ * ```tsx
+ * // To setup an uncontrolled textarea
+ * <textarea {...getTextareaProps(metadata)} />
+ * // To setup a textarea without defaultValue
+ * <textarea {...getTextareaProps(metadata, { value: false })} />
+ * ```
+ */
+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
+  });
+  if (typeof options.value === 'undefined' || options.value) {
+    props.defaultValue = metadata.initialValue;
+  }
+  return simplify(props);
 }
-function fieldset(config, options) {
-  return getFormElementProps(config, options);
+
+/**
+ * Derives the properties of a collection of checkboxes or radio buttons based on the field metadata,
+ * including common form control attributes like `key`, `id`, `name`, `form`, `autoFocus`, `aria-invalid`, `aria-describedby` and `required`.
+ *
+ * @see https://conform.guide/api/react/get-textarea-props
+ * @example
+ * ```tsx
+ * <fieldset>
+ *   {getCollectionProps(metadata, {
+ *     type: 'checkbox',
+ *     options: ['a', 'b', 'c']
+ *   }).map((props) => (
+ *     <div key={props.key}>
+ *       <label htmlFor={props.id}>{props.value}</label>
+ *       <input {...props} />
+ *     </div>
+ *  ))}
+ * </fieldset>
+ * ```
+ */
+function getCollectionProps(metadata, options) {
+  return options.options.map(value => {
+    var _metadata$key, _metadata$constraint12;
+    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),
+      type: options.type,
+      value,
+      defaultChecked: typeof options.value === 'undefined' || options.value ? options.type === 'checkbox' && Array.isArray(metadata.initialValue) ? metadata.initialValue.includes(value) : metadata.initialValue === value : undefined,
+      // 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
+    }));
+  });
 }
-function collection(config, options) {
-  return options.options.map(value => cleanup(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getFormControlProps(config, options)), {}, {
-    id: config.id ? "".concat(config.id, "-").concat(value) : undefined,
-    type: options.type,
-    value,
-    defaultChecked: options.type === 'checkbox' && Array.isArray(config.defaultValue) ? config.defaultValue.includes(value) : config.defaultValue === value,
-    // The required attribute doesn't make sense for checkbox group
-    // As it would require all checkboxes to be checked instead of at least one
-    // overriden with `undefiend` so it gets cleaned up
-    required: options.type === 'checkbox' ? undefined : config.required
-  })));
+function getControlButtonProps(formId, intents) {
+  return {
+    name: dom.INTENT,
+    value: dom.serializeIntents(intents),
+    form: formId,
+    formNoValidate: true
+  };
 }
 
-Object.defineProperty(exports, 'INTENT', {
-	enumerable: true,
-	get: function () { return dom.INTENT; }
-});
-Object.defineProperty(exports, 'VALIDATION_SKIPPED', {
-	enumerable: true,
-	get: function () { return dom.VALIDATION_SKIPPED; }
-});
-Object.defineProperty(exports, 'VALIDATION_UNDEFINED', {
-	enumerable: true,
-	get: function () { return dom.VALIDATION_UNDEFINED; }
-});
-exports.collection = collection;
-exports.fieldset = fieldset;
-exports.hiddenProps = hiddenProps;
-exports.input = input;
-exports.select = select;
-exports.textarea = textarea;
+exports.getAriaAttributes = getAriaAttributes;
+exports.getCollectionProps = getCollectionProps;
+exports.getControlButtonProps = getControlButtonProps;
+exports.getFieldsetProps = getFieldsetProps;
+exports.getFormControlProps = getFormControlProps;
+exports.getFormProps = getFormProps;
+exports.getInputProps = getInputProps;
+exports.getSelectProps = getSelectProps;
+exports.getTextareaProps = getTextareaProps;