@saas-ui/forms 3.0.0-alpha.1 → 3.0.0-alpha.10

package/dist/ajv/index.js

@@ -1,57 +0,0 @@
-'use client'
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// ajv/src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Form: () => Form,
-  ajvFieldResolver: () => ajvFieldResolver,
-  ajvResolver: () => import_ajv.ajvResolver,
-  createAjvForm: () => createAjvForm
-});
-module.exports = __toCommonJS(src_exports);
-
-// ajv/src/ajv-resolver.ts
-var import_ajv = require("@hookform/resolvers/ajv");
-var import_forms = require("@saas-ui/forms");
-var ajvFieldResolver = (schema) => {
-  return (0, import_forms.objectFieldResolver)(schema.properties);
-};
-
-// ajv/src/create-ajv-form.ts
-var import_forms2 = require("@saas-ui/forms");
-function createAjvForm(options) {
-  return (0, import_forms2.createForm)({
-    resolver: (schema) => (0, import_ajv.ajvResolver)(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
-    fieldResolver: ajvFieldResolver,
-    ...options
-  });
-}
-
-// ajv/src/index.ts
-var Form = createAjvForm();
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Form,
-  ajvFieldResolver,
-  ajvResolver,
-  createAjvForm
-});
-//# sourceMappingURL=index.js.map

package/dist/ajv/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../ajv/src/index.ts","../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts"],"sourcesContent":["export { ajvFieldResolver, ajvResolver } from './ajv-resolver'\nexport { createAjvForm } from './create-ajv-form'\nexport type { CreateAjvFormProps } from './create-ajv-form'\nexport type { JTDDataType, JTDSchemaType } from 'ajv/dist/jtd'\n\nimport { createAjvForm } from './create-ajv-form'\n\nexport const Form = createAjvForm()\n","import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver } from '@saas-ui/forms'\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nexport const ajvFieldResolver = (schema: JSONSchemaType<unknown>) => {\n  return objectFieldResolver(schema.properties)\n}\n","import {\n  CreateFormProps,\n  FormProps,\n  WithFields,\n  createForm,\n} from '@saas-ui/forms'\nimport { JTDDataType } from 'ajv/dist/jtd'\n\nimport { ajvFieldResolver, ajvResolver } from './ajv-resolver'\n\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps<FieldDefs>\n  extends CreateFormProps<FieldDefs> {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\ntype ParseJsonSchema<T> = T extends { type: 'object' }\n  ? JTDDataType<T> extends infer R\n    ? R extends object\n      ? R\n      : never\n    : never\n  : never\n\nexport type AjvFormType<\n  FieldDefs,\n  ExtraProps = object,\n  JsonSchema extends Record<string, any> = Record<string, any>,\n> = (<\n  TSchema extends JsonSchema = JsonSchema,\n  TFieldValues extends ParseJsonSchema<TSchema> = ParseJsonSchema<TSchema>,\n  TContext extends object = object,\n>(\n  props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs> & {\n    ref?: React.ForwardedRef<HTMLFormElement>\n  } & ExtraProps,\n) => React.ReactElement) & {\n  displayName?: string\n  id?: string\n}\n\n/**\n * Create a Form component with AJV validation that accepts JSON Type Definition schema\n *\n * @see Docs https://saas-ui.dev/docs/components/forms/form\n * @see https://ajv.js.org/json-type-definition.html\n */\nexport function createAjvForm<FieldDefs>(\n  options?: CreateAjvFormProps<FieldDefs>,\n) {\n  return createForm({\n    resolver: (schema: any) =>\n      ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    fieldResolver: ajvFieldResolver,\n    ...options,\n  }) as AjvFormType<FieldDefs>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,iBAA4B;AAC5B,mBAAoC;AAK7B,IAAM,mBAAmB,CAAC,WAAoC;AACnE,aAAO,kCAAoB,OAAO,UAAU;AAC9C;;;ACRA,IAAAA,gBAKO;AA4CA,SAAS,cACd,SACA;AACA,aAAO,0BAAW;AAAA,IAChB,UAAU,CAAC,eACT,wBAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AACH;;;AFnDO,IAAM,OAAO,cAAc;","names":["import_forms"]}

package/dist/ajv/index.mjs

@@ -1,30 +0,0 @@
-'use client'
-
-// ajv/src/ajv-resolver.ts
-import { ajvResolver } from "@hookform/resolvers/ajv";
-import { objectFieldResolver } from "@saas-ui/forms";
-var ajvFieldResolver = (schema) => {
-  return objectFieldResolver(schema.properties);
-};
-
-// ajv/src/create-ajv-form.ts
-import {
-  createForm
-} from "@saas-ui/forms";
-function createAjvForm(options) {
-  return createForm({
-    resolver: (schema) => ajvResolver(schema, options == null ? void 0 : options.schemaOptions, options == null ? void 0 : options.resolverOptions),
-    fieldResolver: ajvFieldResolver,
-    ...options
-  });
-}
-
-// ajv/src/index.ts
-var Form = createAjvForm();
-export {
-  Form,
-  ajvFieldResolver,
-  ajvResolver,
-  createAjvForm
-};
-//# sourceMappingURL=index.mjs.map

package/dist/ajv/index.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../ajv/src/ajv-resolver.ts","../../ajv/src/create-ajv-form.ts","../../ajv/src/index.ts"],"sourcesContent":["import { ajvResolver } from '@hookform/resolvers/ajv'\nimport { objectFieldResolver } from '@saas-ui/forms'\nimport { JSONSchemaType } from 'ajv'\n\nexport { ajvResolver }\n\nexport const ajvFieldResolver = (schema: JSONSchemaType<unknown>) => {\n  return objectFieldResolver(schema.properties)\n}\n","import {\n  CreateFormProps,\n  FormProps,\n  WithFields,\n  createForm,\n} from '@saas-ui/forms'\nimport { JTDDataType } from 'ajv/dist/jtd'\n\nimport { ajvFieldResolver, ajvResolver } from './ajv-resolver'\n\ntype ResolverArgs = Parameters<typeof ajvResolver>\n\nexport interface CreateAjvFormProps<FieldDefs>\n  extends CreateFormProps<FieldDefs> {\n  schemaOptions?: ResolverArgs[1]\n  resolverOptions?: ResolverArgs[2]\n}\n\ntype ParseJsonSchema<T> = T extends { type: 'object' }\n  ? JTDDataType<T> extends infer R\n    ? R extends object\n      ? R\n      : never\n    : never\n  : never\n\nexport type AjvFormType<\n  FieldDefs,\n  ExtraProps = object,\n  JsonSchema extends Record<string, any> = Record<string, any>,\n> = (<\n  TSchema extends JsonSchema = JsonSchema,\n  TFieldValues extends ParseJsonSchema<TSchema> = ParseJsonSchema<TSchema>,\n  TContext extends object = object,\n>(\n  props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs> & {\n    ref?: React.ForwardedRef<HTMLFormElement>\n  } & ExtraProps,\n) => React.ReactElement) & {\n  displayName?: string\n  id?: string\n}\n\n/**\n * Create a Form component with AJV validation that accepts JSON Type Definition schema\n *\n * @see Docs https://saas-ui.dev/docs/components/forms/form\n * @see https://ajv.js.org/json-type-definition.html\n */\nexport function createAjvForm<FieldDefs>(\n  options?: CreateAjvFormProps<FieldDefs>,\n) {\n  return createForm({\n    resolver: (schema: any) =>\n      ajvResolver(schema, options?.schemaOptions, options?.resolverOptions),\n    fieldResolver: ajvFieldResolver,\n    ...options,\n  }) as AjvFormType<FieldDefs>\n}\n","export { ajvFieldResolver, ajvResolver } from './ajv-resolver'\nexport { createAjvForm } from './create-ajv-form'\nexport type { CreateAjvFormProps } from './create-ajv-form'\nexport type { JTDDataType, JTDSchemaType } from 'ajv/dist/jtd'\n\nimport { createAjvForm } from './create-ajv-form'\n\nexport const Form = createAjvForm()\n"],"mappings":";;;AAAA,SAAS,mBAAmB;AAC5B,SAAS,2BAA2B;AAK7B,IAAM,mBAAmB,CAAC,WAAoC;AACnE,SAAO,oBAAoB,OAAO,UAAU;AAC9C;;;ACRA;AAAA,EAIE;AAAA,OACK;AA4CA,SAAS,cACd,SACA;AACA,SAAO,WAAW;AAAA,IAChB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AACH;;;ACnDO,IAAM,OAAO,cAAc;","names":[]}

package/src/array-field.tsx

@@ -1,266 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import { Button, ButtonProps, chakra } from '@chakra-ui/react'
-import type { MaybeRenderProp } from '@saas-ui/core/utils'
-import { MinusIcon, PlusIcon } from '@saas-ui/react/icons'
-import { FieldPath, FieldValues } from 'react-hook-form'
-
-import { BaseField } from './base-field'
-import { useFieldProps } from './form-context'
-import { FormLayout, FormLayoutProps } from './form-layout'
-import { BaseFieldProps } from './types'
-import {
-  ArrayFieldOptions,
-  ArrayFieldProvider,
-  ArrayFieldRowProvider,
-  UseArrayFieldReturn,
-  useArrayField,
-  useArrayFieldAddButton,
-  useArrayFieldContext,
-  useArrayFieldRemoveButton,
-  useArrayFieldRow,
-  useArrayFieldRowContext,
-} from './use-array-field'
-import { mapNestedFields } from './utils'
-
-export interface ArrayFieldButtonProps extends ButtonProps {}
-
-interface ArrayField {
-  id: string
-  [key: string]: unknown
-}
-
-interface ArrayFieldRowProps extends FormLayoutProps {
-  /**
-   * The array index
-   */
-  index: number
-  /**
-   * The fields
-   */
-  children: React.ReactNode
-}
-
-/**
- * Render prop component, to get access to the internal fields state. Must be a child of ArrayFieldContainer.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/array-field
- */
-export const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({
-  children,
-  index,
-  ...rowFieldsProps
-}) => {
-  return (
-    <ArrayFieldRowContainer index={index}>
-      <ArrayFieldRowFields {...rowFieldsProps}>{children}</ArrayFieldRowFields>
-      <ArrayFieldRemoveButton />
-    </ArrayFieldRowContainer>
-  )
-}
-
-ArrayFieldRow.displayName = 'ArrayFieldRow'
-
-export interface ArrayFieldRowFieldsProps extends FormLayoutProps {
-  /**
-   * The fields
-   */
-  children: React.ReactNode
-}
-/**
- * Add the name prefix to the fields and acts as a horizontal form layout by default.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/array-field
- */
-export const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({
-  children,
-  ...layoutProps
-}) => {
-  const { name } = useArrayFieldRowContext()
-  return (
-    <FormLayout flex="1" mr="2" {...layoutProps}>
-      {mapNestedFields(name, children)}
-    </FormLayout>
-  )
-}
-
-ArrayFieldRowFields.displayName = 'ArrayFieldRowFields'
-
-/**
- * The row container component providers row context.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/array-field
- */
-export const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({
-  children,
-  index,
-  ...rest
-}) => {
-  const context = useArrayFieldRow({ index })
-
-  const styles = {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    width: '100%',
-    mb: 4,
-  }
-
-  return (
-    <ArrayFieldRowProvider value={context}>
-      <chakra.div {...rest} css={styles}>
-        {children}
-      </chakra.div>
-    </ArrayFieldRowProvider>
-  )
-}
-
-ArrayFieldRowContainer.displayName = 'ArrayFieldRowContainer'
-
-/**
- * The default remove button.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/array-field
- */
-export const ArrayFieldRemoveButton: React.FC<ArrayFieldButtonProps> = (
-  props,
-) => {
-  return (
-    <Button aria-label="Remove row" {...useArrayFieldRemoveButton()} {...props}>
-      {props.children || <MinusIcon />}
-    </Button>
-  )
-}
-
-ArrayFieldRemoveButton.displayName = 'ArrayFieldRemoveButton'
-
-/**
- * The default add button.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/array-field
- */
-export const ArrayFieldAddButton: React.FC<ArrayFieldButtonProps> = (props) => {
-  return (
-    <Button
-      aria-label="Add row"
-      float="right"
-      {...useArrayFieldAddButton()}
-      {...props}
-    >
-      {props.children || <PlusIcon />}
-    </Button>
-  )
-}
-
-ArrayFieldAddButton.displayName = 'ArrayFieldAddButton'
-
-export interface ArrayFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> extends ArrayFieldOptions<TFieldValues, TName>,
-    Omit<
-      BaseFieldProps<TFieldValues, TName>,
-      'name' | 'defaultValue' | 'children'
-    > {
-  children: MaybeRenderProp<ArrayField[]>
-}
-
-/**
- * The wrapper component that composes the default ArrayField functionality.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/array-field
- */
-export const ArrayField = forwardRef(
-  (props: ArrayFieldProps, ref: React.ForwardedRef<UseArrayFieldReturn>) => {
-    const { children, ...containerProps } = props
-
-    const rowFn =
-      typeof children === 'function'
-        ? children
-        : (fields: ArrayField[]) => (
-            <>
-              {fields.map(({ id }, index: number) => (
-                <ArrayFieldRow key={id} index={index}>
-                  {children}
-                </ArrayFieldRow>
-              )) || null}
-            </>
-          )
-
-    return (
-      <ArrayFieldContainer ref={ref} {...containerProps}>
-        <ArrayFieldRows>{rowFn as any}</ArrayFieldRows>
-        <ArrayFieldAddButton />
-      </ArrayFieldContainer>
-    )
-  },
-) as ((
-  props: ArrayFieldProps & {
-    ref?: React.ForwardedRef<UseArrayFieldReturn>
-  },
-) => React.ReactElement) & {
-  displayName: string
-}
-
-ArrayField.displayName = 'ArrayField'
-
-export interface ArrayFieldRowsProps {
-  children: (fields: ArrayField[]) => React.ReactElement | null
-}
-
-export const ArrayFieldRows = ({
-  children,
-}: ArrayFieldRowsProps): React.ReactElement | null => {
-  const { fields } = useArrayFieldContext()
-  return children(fields)
-}
-
-ArrayFieldRows.displayName = 'ArrayFieldRows'
-
-export interface ArrayFieldContainerProps
-  extends Omit<ArrayFieldProps, 'children'> {
-  children: React.ReactNode
-}
-
-/**
- * The container component provides context and state management.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/array-field
- */
-export const ArrayFieldContainer = React.forwardRef(
-  (
-    {
-      name,
-      defaultValue,
-      keyName,
-      min,
-      max,
-      children,
-      ...fieldProps
-    }: ArrayFieldContainerProps,
-    ref: React.ForwardedRef<UseArrayFieldReturn>,
-  ) => {
-    const overrides = useFieldProps(name)
-
-    const context = useArrayField({
-      name,
-      defaultValue,
-      keyName,
-      min: min || (overrides as any)?.min,
-      max: max || (overrides as any)?.max,
-    })
-
-    // This exposes the useArrayField api through the forwarded ref
-    React.useImperativeHandle(ref, () => context, [ref, context])
-
-    return (
-      <ArrayFieldProvider value={context}>
-        <BaseField name={name} {...fieldProps} {...overrides}>
-          {children}
-        </BaseField>
-      </ArrayFieldProvider>
-    )
-  },
-)
-
-ArrayFieldContainer.displayName = 'ArrayFieldContainer'

package/src/auto-form.tsx

@@ -1,71 +0,0 @@
-import React, { forwardRef } from 'react'
-
-import { FieldValues } from 'react-hook-form'
-
-import { AutoFields } from './fields'
-import { Form, FormProps } from './form'
-import { FormLayout } from './form-layout'
-import { SubmitButton } from './submit-button'
-
-interface AutoFormOptions {
-  /**
-   * The submit button label.
-   * Pass `null` to render no submit button.
-   */
-  submitLabel?: React.ReactNode
-  /**
-   * The schema.
-   * Supports object schema, Zod, Yup or Ajv (JSON Schema).
-   * @see https://www.saas-ui.dev/docs/forms/auto-form
-   */
-  schema: any
-  /**
-   * The field resolver.
-   */
-  fieldResolver?: any
-}
-
-export interface AutoFormProps<
-  TFieldValues extends FieldValues,
-  TContext extends object = object,
-> extends Omit<
-      FormProps<TFieldValues, TContext>,
-      'schema' | 'children' | 'fieldResolver'
-    >,
-    AutoFormOptions {
-  children?: React.ReactNode
-}
-/**
- * The wrapper component that manages context and state.
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/auto-form
- */
-export const AutoForm = forwardRef(
-  <
-    TFieldValues extends FieldValues = FieldValues,
-    TContext extends object = object,
-  >(
-    props: AutoFormProps<TFieldValues, TContext>,
-    ref: React.ForwardedRef<HTMLFormElement>,
-  ) => {
-    const {
-      schema,
-      submitLabel = 'Submit',
-      fieldResolver,
-      children,
-      ...rest
-    } = props
-
-    return (
-      <Form {...rest} schema={schema} ref={ref}>
-        <FormLayout>
-          {<AutoFields schema={schema} fieldResolver={fieldResolver} />}
-          {submitLabel && <SubmitButton>{submitLabel}</SubmitButton>}
-          {children}
-        </FormLayout>
-      </Form>
-    )
-  },
-)
-
-AutoForm.displayName = 'AutoForm'

package/src/base-field.tsx

@@ -1,69 +0,0 @@
-import * as React from 'react'
-
-import { Box, Field } from '@chakra-ui/react'
-import { splitProps } from '@saas-ui/core/utils'
-import { FormState, get } from 'react-hook-form'
-
-import { useFormContext } from './form-context'
-import type { BaseFieldProps } from './types'
-
-const getError = (name: string, formState: FormState<{ [x: string]: any }>) => {
-  return get(formState.errors, name)
-}
-
-const isTouched = (
-  name: string,
-  formState: FormState<{ [x: string]: any }>,
-) => {
-  return get(formState.touchedFields, name)
-}
-
-export const useBaseField = (props: BaseFieldProps) => {
-  const [fieldProps] = splitProps(props, ['name', 'label', 'help', 'hideLabel'])
-
-  const [controlProps] = splitProps(props, [
-    // 'id',
-    // 'orientation',
-    // 'disabled',
-    // 'invalid',
-    // 'readOnly',
-    // 'required',
-  ])
-
-  const { formState } = useFormContext()
-
-  const error = getError(fieldProps.name, formState)
-  const touched = isTouched(fieldProps.name, formState)
-
-  return {
-    ...fieldProps,
-    controlProps,
-    error,
-    touched,
-  }
-}
-
-/**
- * The default BaseField component
- * Composes the Chakra UI FormControl component, with FormLabel, FormHelperText and FormErrorMessage.
- */
-export const BaseField: React.FC<BaseFieldProps> = (props) => {
-  const { label, help, hideLabel, error } = useBaseField(props)
-
-  const isInvalid = !!error //|| controlProps.
-
-  return (
-    <Field.Root invalid={isInvalid} {...props}>
-      {label && !hideLabel ? <Field.Label>{label}</Field.Label> : null}
-      <Box width="full">
-        {props.children}
-        {help && !error?.message ? (
-          <Field.HelperText>{help}</Field.HelperText>
-        ) : null}
-        {error?.message && <Field.ErrorText>{error?.message}</Field.ErrorText>}
-      </Box>
-    </Field.Root>
-  )
-}
-
-BaseField.displayName = 'BaseField'

package/src/create-field.tsx

@@ -1,171 +0,0 @@
-import React, {
-  type ForwardRefRenderFunction,
-  type PropsWithoutRef,
-  forwardRef,
-} from 'react'
-
-import { callAll, mergeRefs, splitProps } from '@saas-ui/core/utils'
-import { Controller, type RegisterOptions } from 'react-hook-form'
-
-import { BaseField } from './base-field'
-import { useFieldsContext } from './fields-context'
-import { useFormContext } from './form-context'
-import { BaseFieldProps, GetBaseField } from './types'
-
-interface CreateFieldProps<ExtraFieldProps extends object = object> {
-  displayName: string
-  hideLabel?: boolean
-  getBaseField: GetBaseField<ExtraFieldProps>
-}
-
-const _createField = (
-  InputComponent: React.FC<any>,
-  { displayName, hideLabel, getBaseField: getBaseFieldProp }: CreateFieldProps,
-) => {
-  const Field = forwardRef<HTMLDivElement, any>((props, ref) => {
-    const { id, name, label, isRequired, rules } = props
-
-    const inputRules = {
-      required: isRequired,
-      ...rules,
-    }
-
-    const fieldContext = useFieldsContext()
-
-    const getBaseField = fieldContext?.getBaseField ?? getBaseFieldProp
-
-    const { extraProps, BaseField } = React.useMemo(
-      () => getBaseField(),
-      [getBaseField],
-    )
-
-    const [, inputProps] = splitProps(
-      props,
-      [
-        'children',
-        'name',
-        'label',
-        'required',
-        'disabled',
-        'invalid',
-        'readOnly',
-        'help',
-        'hideLabel',
-      ].concat(extraProps),
-    )
-
-    return (
-      <BaseField name={name} hideLabel={hideLabel} {...props}>
-        <InputComponent
-          ref={ref}
-          id={id}
-          name={name}
-          label={hideLabel ? label : undefined} // Only pass down the label when it should be inline.
-          {...inputProps}
-          rules={inputRules}
-        />
-      </BaseField>
-    )
-  })
-
-  Field.displayName = displayName
-
-  return Field
-}
-
-const withControlledInput = (InputComponent: React.FC<any>) => {
-  return forwardRef<typeof InputComponent, ControlProps>((props, ref) => {
-    const { name, rules, ...inputProps } = props
-    const { control } = useFormContext()
-
-    const onChange = inputProps.onChange as (...event: any[]) => void
-
-    return (
-      <Controller
-        name={name}
-        control={control}
-        rules={rules}
-        render={({ field: { ref: _ref, ...field } }) => (
-          <InputComponent
-            {...field}
-            {...inputProps}
-            onChange={callAll(onChange, field.onChange)}
-            onBlur={callAll(inputProps.onBlur, field.onBlur)}
-            ref={mergeRefs(ref, _ref)}
-          />
-        )}
-      />
-    )
-  })
-}
-
-const withUncontrolledInput = (InputComponent: React.FC<any>) => {
-  return forwardRef<typeof InputComponent, ControlProps>(
-    ({ name, rules, ...inputProps }, ref) => {
-      const { register } = useFormContext()
-
-      const { ref: _ref, ...field } = register(name, rules)
-
-      const onChange = inputProps.onChange as (...event: any[]) => void
-
-      return (
-        <InputComponent
-          {...field}
-          {...inputProps}
-          onChange={callAll(onChange, field.onChange)}
-          onBlur={callAll(inputProps.onBlur, field.onBlur)}
-          ref={mergeRefs(ref, _ref)}
-        />
-      )
-    },
-  )
-}
-
-export interface CreateFieldOptions {
-  isControlled?: boolean
-  hideLabel?: boolean
-  BaseField?: React.FC<any>
-}
-
-interface ControlProps {
-  name: string
-  onChange: (...event: any[]) => void
-  onBlur: (...event: any[]) => void
-  value: unknown
-  disabled?: boolean
-  rules?: RegisterOptions
-}
-
-/**
- * Register a new field type
- * @param type The name for this field in kebab-case, eg `email` or `array-field`
- * @param component The React component
- * @param options
- * @param options.isControlled Set this to true if this is a controlled field.
- * @param options.hideLabel Hide the field label, for example for the checkbox field.
- */
-export const createField = <TType = unknown, TProps extends object = object>(
-  component: ForwardRefRenderFunction<
-    TType,
-    PropsWithoutRef<TProps & ControlProps>
-  >,
-  options?: CreateFieldOptions,
-) => {
-  let InputComponent
-  if (options?.isControlled) {
-    InputComponent = withControlledInput(forwardRef(component))
-  } else {
-    InputComponent = withUncontrolledInput(forwardRef(component))
-  }
-
-  const Field = _createField(InputComponent, {
-    displayName: `${component.displayName ?? 'Custom'}Field`,
-    hideLabel: options?.hideLabel,
-    getBaseField: () => ({
-      extraProps: [],
-      BaseField,
-    }),
-  }) as React.FC<Omit<BaseFieldProps, keyof TProps> & TProps>
-
-  return Field
-}