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

package/package.json

@@ -1,47 +1,29 @@
 {
   "name": "@saas-ui/forms",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.10",
   "description": "Fully functional forms for Chakra UI.",
-  "source": "src/index.ts",
   "exports": {
     ".": {
+      "sui": "./src/index.ts",
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs"
     },
-    "./src": {
-      "default": "./src/index.ts"
-    },
     "./yup": {
+      "sui": "./dist/yup/index.ts",
       "require": "./dist/yup/index.js",
       "types": "./dist/yup/index.d.ts",
       "import": "./dist/yup/index.mjs"
     },
-    "./yup/src": {
-      "default": "./yup/src/index.ts"
-    },
     "./zod": {
+      "sui": "./dist/zod/index.ts",
       "require": "./dist/zod/index.js",
       "types": "./dist/zod/index.d.ts",
       "import": "./dist/zod/index.mjs"
-    },
-    "./zod/src": {
-      "default": "./zod/src/index.ts"
-    },
-    "./ajv": {
-      "require": "./dist/ajv/index.js",
-      "types": "./dist/ajv/index.d.ts",
-      "import": "./dist/ajv/index.mjs"
-    },
-    "./ajv/src": {
-      "default": "./ajv/src/index.ts"
     }
   },
   "typesVersions": {
     "*": {
-      "ajv": [
-        "./dist/ajv/index.d.ts"
-      ],
       "yup": [
         "./dist/yup/index.d.ts"
       ],
@@ -55,19 +37,17 @@
   "types": "./dist/index.d.ts",
   "scripts": {
     "clean": "rimraf --no-glob ./dist",
-    "build": "yarn build:package && yarn build:yup && yarn build:zod && yarn build:ajv",
+    "build": "yarn build:package && yarn build:yup && yarn build:zod",
     "build:package": "tsup src/index.ts --config tsup.config.ts",
     "build:yup": "tsup yup/src/index.ts --config yup/tsup.config.ts",
     "build:zod": "tsup zod/src/index.ts --config zod/tsup.config.ts",
-    "build:ajv": "tsup ajv/src/index.ts --config ajv/tsup.config.ts",
     "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
     "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
     "typecheck": "tsc --noEmit",
     "tsd": "tsd"
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "sideEffects": false,
   "publishConfig": {
@@ -102,12 +82,12 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@saas-ui/core": "3.0.0-alpha.0",
-    "@saas-ui/react": "3.0.0-alpha.0",
+    "@saas-ui/core": "3.0.0-alpha.4",
+    "@saas-ui/react": "3.0.0-alpha.10",
     "react-hook-form": "^7.53.2"
   },
   "peerDependencies": {
-    "@chakra-ui/react": "^3.0.0",
+    "@chakra-ui/react": "^3.2.3",
     "@emotion/react": ">=11.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"

package/dist/ajv/index.d.mts

@@ -1,35 +0,0 @@
-import * as _saas_ui_forms from '@saas-ui/forms';
-import { CreateFormProps, WithFields, FormProps } from '@saas-ui/forms';
-import { JTDDataType } from 'ajv/dist/jtd';
-export { JTDDataType, JTDSchemaType } from 'ajv/dist/jtd';
-import { ajvResolver } from '@hookform/resolvers/ajv';
-export { ajvResolver } from '@hookform/resolvers/ajv';
-import { JSONSchemaType } from 'ajv';
-
-declare const ajvFieldResolver: (schema: JSONSchemaType<unknown>) => _saas_ui_forms.FieldResolver;
-
-type ResolverArgs = Parameters<typeof ajvResolver>;
-interface CreateAjvFormProps<FieldDefs> extends CreateFormProps<FieldDefs> {
-    schemaOptions?: ResolverArgs[1];
-    resolverOptions?: ResolverArgs[2];
-}
-type ParseJsonSchema<T> = T extends {
-    type: 'object';
-} ? JTDDataType<T> extends infer R ? R extends object ? R : never : never : never;
-type AjvFormType<FieldDefs, ExtraProps = object, JsonSchema extends Record<string, any> = Record<string, any>> = (<TSchema extends JsonSchema = JsonSchema, TFieldValues extends ParseJsonSchema<TSchema> = ParseJsonSchema<TSchema>, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs> & {
-    ref?: React.ForwardedRef<HTMLFormElement>;
-} & ExtraProps) => React.ReactElement) & {
-    displayName?: string;
-    id?: string;
-};
-/**
- * Create a Form component with AJV validation that accepts JSON Type Definition schema
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/form
- * @see https://ajv.js.org/json-type-definition.html
- */
-declare function createAjvForm<FieldDefs>(options?: CreateAjvFormProps<FieldDefs>): AjvFormType<FieldDefs>;
-
-declare const Form: AjvFormType<unknown, object, Record<string, any>>;
-
-export { type CreateAjvFormProps, Form, ajvFieldResolver, createAjvForm };

package/dist/ajv/index.d.ts

@@ -1,35 +0,0 @@
-import * as _saas_ui_forms from '@saas-ui/forms';
-import { CreateFormProps, WithFields, FormProps } from '@saas-ui/forms';
-import { JTDDataType } from 'ajv/dist/jtd';
-export { JTDDataType, JTDSchemaType } from 'ajv/dist/jtd';
-import { ajvResolver } from '@hookform/resolvers/ajv';
-export { ajvResolver } from '@hookform/resolvers/ajv';
-import { JSONSchemaType } from 'ajv';
-
-declare const ajvFieldResolver: (schema: JSONSchemaType<unknown>) => _saas_ui_forms.FieldResolver;
-
-type ResolverArgs = Parameters<typeof ajvResolver>;
-interface CreateAjvFormProps<FieldDefs> extends CreateFormProps<FieldDefs> {
-    schemaOptions?: ResolverArgs[1];
-    resolverOptions?: ResolverArgs[2];
-}
-type ParseJsonSchema<T> = T extends {
-    type: 'object';
-} ? JTDDataType<T> extends infer R ? R extends object ? R : never : never : never;
-type AjvFormType<FieldDefs, ExtraProps = object, JsonSchema extends Record<string, any> = Record<string, any>> = (<TSchema extends JsonSchema = JsonSchema, TFieldValues extends ParseJsonSchema<TSchema> = ParseJsonSchema<TSchema>, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs> & {
-    ref?: React.ForwardedRef<HTMLFormElement>;
-} & ExtraProps) => React.ReactElement) & {
-    displayName?: string;
-    id?: string;
-};
-/**
- * Create a Form component with AJV validation that accepts JSON Type Definition schema
- *
- * @see Docs https://saas-ui.dev/docs/components/forms/form
- * @see https://ajv.js.org/json-type-definition.html
- */
-declare function createAjvForm<FieldDefs>(options?: CreateAjvFormProps<FieldDefs>): AjvFormType<FieldDefs>;
-
-declare const Form: AjvFormType<unknown, object, Record<string, any>>;
-
-export { type CreateAjvFormProps, Form, ajvFieldResolver, createAjvForm };

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'