@saas-ui/forms 0.2.3 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @saas-ui/forms
 
+## 0.3.1
+
+### Patch Changes
+
+- e691413: DisplayIf now check if value is set by default, set isRequired on fields when required = true
+
+## 0.3.0
+
+### Minor Changes
+
+- 385b760: Improved Typescript support for forms, conditionally render form fields with DisplayIf
+
+## 0.2.5
+
+### Patch Changes
+
+- Updated dependencies [46dd92b]
+  - @saas-ui/number-input@0.2.2
+
+## 0.2.4
+
+### Patch Changes
+
+- b3159a7: Only publish dist and src files
+- Updated dependencies [b3159a7]
+  - @saas-ui/button@0.2.1
+  - @saas-ui/input-right-button@0.2.1
+  - @saas-ui/number-input@0.2.1
+  - @saas-ui/password-input@0.2.1
+  - @saas-ui/pin-input@0.2.1
+  - @saas-ui/radio@0.2.1
+  - @saas-ui/select@0.2.1
+
 ## 0.2.3
 
 ### Patch Changes

package/dist/auto-form.d.ts

@@ -1,4 +1,5 @@
-import { FieldValues } from 'react-hook-form';
+import * as React from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
 import { FormProps } from './form';
 interface AutoFormOptions {
     schema: any;
@@ -6,6 +7,8 @@ interface AutoFormOptions {
 }
 export interface AutoFormProps<TFieldValues extends FieldValues> extends Omit<FormProps<TFieldValues>, 'schema'>, AutoFormOptions {
 }
-export declare const AutoForm: import("@chakra-ui/react").ComponentWithAs<import("@chakra-ui/react").As<any>, AutoFormProps<FieldValues>>;
+export declare const AutoForm: <TFieldValues extends FieldValues>(props: AutoFormProps<TFieldValues> & {
+    ref?: React.ForwardedRef<UseFormReturn<TFieldValues, object>> | undefined;
+}) => React.ReactElement;
 export {};
 //# sourceMappingURL=auto-form.d.ts.map

package/dist/auto-form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auto-form.d.ts","sourceRoot":"","sources":["../src/auto-form.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAMxC,UAAU,eAAe;IACvB,MAAM,EAAE,GAAG,CAAA;IACX,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;CAC7B;AAED,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,CAC7D,SAAQ,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,EAC7C,eAAe;CAAG;AAEtB,eAAO,MAAM,QAAQ,4GAepB,CAAA"}
+{"version":3,"file":"auto-form.d.ts","sourceRoot":"","sources":["../src/auto-form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAG5D,OAAO,EAAQ,SAAS,EAAE,MAAM,QAAQ,CAAA;AAMxC,UAAU,eAAe;IACvB,MAAM,EAAE,GAAG,CAAA;IACX,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;CAC7B;AAED,MAAM,WAAW,aAAa,CAAC,YAAY,SAAS,WAAW,CAC7D,SAAQ,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,EAC7C,eAAe;CAAG;AAEtB,eAAO,MAAM,QAAQ;;MAmBhB,MAAM,YAAY,CAAA"}

package/dist/display-if.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+export interface DisplayIfProps<TFieldValues> {
+    children: React.ReactElement;
+    name: string;
+    defaultValue?: unknown;
+    isDisabled?: boolean;
+    isExact?: boolean;
+    condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean;
+}
+export declare const DisplayIf: <TFieldValues extends FieldValues = FieldValues>({ children, name, defaultValue, isDisabled, isExact, condition, }: DisplayIfProps<TFieldValues>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+//# sourceMappingURL=display-if.d.ts.map

package/dist/display-if.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display-if.d.ts","sourceRoot":"","sources":["../src/display-if.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAGL,WAAW,EACX,aAAa,EACd,MAAM,iBAAiB,CAAA;AAExB,MAAM,WAAW,cAAc,CAAC,YAAY;IAC1C,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,CAAC,YAAY,CAAC,KAAK,OAAO,CAAA;CAC9E;AAED,eAAO,MAAM,SAAS,gOAgBrB,CAAA"}

package/dist/field.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { RegisterOptions, FieldValues, FieldPath } from 'react-hook-form';
-import { FormControlProps } from '@chakra-ui/react';
+import { FormControl, FormControlProps } from '@chakra-ui/react';
+export interface Option {
+    value: string;
+    label?: string;
+    [key: string]: unknown;
+}
 export declare type FieldRules = Pick<RegisterOptions, 'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'>;
 export declare type FieldTypes = 'text' | 'number' | 'password' | 'textarea' | 'select' | 'native-select' | 'checkbox' | 'radio' | 'switch' | 'pin' | string;
 export interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<FormControlProps, 'label' | 'type'> {
@@ -27,7 +32,7 @@ export interface FieldProps<TFieldValues extends FieldValues = FieldValues, TNam
     /**
      * Options used for selects and radio fields
      */
-    options?: any;
+    options?: Option[];
     /**
      * The field type
      * Build-in types:
@@ -52,7 +57,11 @@ export interface FieldProps<TFieldValues extends FieldValues = FieldValues, TNam
     placeholder?: string;
 }
 export declare const BaseField: React.FC<FieldProps>;
-export declare const Field: import("@chakra-ui/react").ComponentWithAs<import("@chakra-ui/react").ComponentWithAs<"div", FormControlProps>, FieldProps<FieldValues, string>>;
+export declare const Field: <TFieldValues extends FieldValues>(props: FieldProps<TFieldValues, import("react-hook-form").Path<TFieldValues>> & {
+    [key: string]: unknown;
+} & {
+    ref?: React.ForwardedRef<import("@chakra-ui/react").ComponentWithAs<"div", FormControlProps>> | undefined;
+}) => React.ReactElement;
 export declare const withControlledInput: (InputComponent: any) => import("@chakra-ui/react").ComponentWithAs<any, FieldProps<FieldValues, string>>;
 export declare const withUncontrolledInput: (InputComponent: any) => import("@chakra-ui/react").ComponentWithAs<any, FieldProps<FieldValues, string>>;
 export interface RegisterFieldTypeOptions {

package/dist/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAKL,eAAe,EACf,WAAW,EAEX,SAAS,EAEV,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAIL,gBAAgB,EASjB,MAAM,kBAAkB,CAAA;AAQzB,oBAAY,UAAU,GAAG,IAAI,CAC3B,eAAe,EACf,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CACnE,CAAA;AAED,oBAAY,UAAU,GAClB,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,QAAQ,GACR,eAAe,GACf,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAA;AAEV,MAAM,WAAW,UAAU,CACzB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,IAAI,EAAE,KAAK,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,CACV,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,eAAe,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAC5D,CAAA;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,GAAG,CAAA;IACb;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAqBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwB1C,CAAA;AAED,eAAO,MAAM,KAAK,kJAOjB,CAAA;AA4CD,eAAO,MAAM,mBAAmB,mBAAoB,GAAG,qFAqBtD,CAAA;AAED,eAAO,MAAM,qBAAqB,mBAAoB,GAAG,qFAgBxD,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CAC1B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,SACtB,MAAM,aACD,MAAM,EAAE,CAAC,GAAG,CAAC,qMAsBzB,CAAA;AAID,eAAO,MAAM,UAAU,kJAAmC,CAAA;AAC1D,eAAO,MAAM,gBAAgB,kJAE3B,CAAA;AACF,eAAO,MAAM,kBAAkB,kJAA+C,CAAA;AAC9E,eAAO,MAAM,aAAa,kJAA0C,CAAA;AACpE,eAAO,MAAM,WAAW,kJAavB,CAAA;AACD,eAAO,MAAM,WAAW,kJAEtB,CAAA;AACF,eAAO,MAAM,aAAa,kJAYzB,CAAA;AACD,eAAO,MAAM,UAAU,kJAErB,CAAA;AACF,eAAO,MAAM,QAAQ,kJAEnB,CAAA;AACF,eAAO,MAAM,iBAAiB,kJAI7B,CAAA"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../src/field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAKL,eAAe,EACf,WAAW,EACX,SAAS,EACV,MAAM,iBAAiB,CAAA;AAExB,OAAO,EAGL,WAAW,EACX,gBAAgB,EASjB,MAAM,kBAAkB,CAAA;AAQzB,MAAM,WAAW,MAAM;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,oBAAY,UAAU,GAAG,IAAI,CAC3B,eAAe,EACf,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,WAAW,GAAG,WAAW,GAAG,SAAS,CACnE,CAAA;AAED,oBAAY,UAAU,GAClB,MAAM,GACN,QAAQ,GACR,UAAU,GACV,UAAU,GACV,QAAQ,GACR,eAAe,GACf,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,MAAM,CAAA;AAEV,MAAM,WAAW,UAAU,CACzB,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,CAC/D,SAAQ,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,MAAM,CAAC;IAChD;;OAEG;IACH,IAAI,EAAE,KAAK,CAAA;IACX;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,IAAI,CACV,eAAe,CAAC,YAAY,EAAE,KAAK,CAAC,EACpC,eAAe,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,CAC5D,CAAA;IACD;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;IAClB;;;;;;;;;;;;;;;;OAgBG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAqBD,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwB1C,CAAA;AACD,eAAO,MAAM,KAAK;;;;MAkBb,MAAM,YAAY,CAAA;AAwDvB,eAAO,MAAM,mBAAmB,mBAAoB,GAAG,qFAqBtD,CAAA;AAED,eAAO,MAAM,qBAAqB,mBAAoB,GAAG,qFAgBxD,CAAA;AAED,MAAM,WAAW,wBAAwB;IACvC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;CAC1B;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,iBAAiB,SACtB,MAAM,aACD,MAAM,EAAE,CAAC,GAAG,CAAC,qMAsBzB,CAAA;AAID,eAAO,MAAM,UAAU,kJAAmC,CAAA;AAC1D,eAAO,MAAM,gBAAgB,kJAE3B,CAAA;AACF,eAAO,MAAM,kBAAkB,kJAA+C,CAAA;AAC9E,eAAO,MAAM,aAAa,kJAA0C,CAAA;AACpE,eAAO,MAAM,WAAW,kJAavB,CAAA;AACD,eAAO,MAAM,WAAW,kJAEtB,CAAA;AACF,eAAO,MAAM,aAAa,kJAYzB,CAAA;AACD,eAAO,MAAM,UAAU,kJAErB,CAAA;AACF,eAAO,MAAM,QAAQ,kJAEnB,CAAA;AACF,eAAO,MAAM,iBAAiB,kJAI7B,CAAA"}

package/dist/form.d.ts

@@ -1,20 +1,32 @@
 import * as React from 'react';
 import { HTMLChakraProps } from '@chakra-ui/react';
-import { UseFormProps, FieldErrors, FieldValues } from 'react-hook-form';
-interface FormOptions {
+import { UseFormProps, UseFormReturn, FieldValues, SubmitHandler, SubmitErrorHandler } from 'react-hook-form';
+interface FormOptions<TFieldValues extends FieldValues = FieldValues> {
+    /**
+     * The form schema, currently supports Yup schema only.
+     */
     schema?: any;
-    submitLabel?: false | string;
-    onSubmit: (arg: any) => Promise<any> | void;
-    onError?: (errors: FieldErrors) => void;
+    /**
+     * The submit handler.
+     */
+    onSubmit: SubmitHandler<TFieldValues>;
+    /**
+     * Triggers when there are validation errors.
+     */
+    onError?: SubmitErrorHandler<TFieldValues>;
+    /**
+     * Ref on the HTMLFormElement.
+     */
+    formRef?: React.MutableRefObject<HTMLFormElement>;
 }
-export interface FormProps<TFieldValues extends FieldValues = FieldValues> extends UseFormProps<TFieldValues>, Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>, FormOptions {
+export interface FormProps<TFieldValues extends FieldValues = FieldValues> extends UseFormProps<TFieldValues>, Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>, FormOptions<TFieldValues> {
 }
 /**
  * @todo Figure out how to pass down FieldValues to all Field components,
  * if at all possible.
  */
 export declare const Form: <TFieldValues extends FieldValues>(props: FormProps<TFieldValues> & {
-    ref?: React.ForwardedRef<HTMLFormElement> | undefined;
+    ref?: React.ForwardedRef<UseFormReturn<TFieldValues, object>> | undefined;
 }) => React.ReactElement;
 export {};
 //# sourceMappingURL=form.d.ts.map

package/dist/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,eAAe,EAAc,MAAM,kBAAkB,CAAA;AAEtE,OAAO,EAGL,YAAY,EACZ,WAAW,EACX,WAAW,EACZ,MAAM,iBAAiB,CAAA;AAIxB,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,WAAW,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;IAC5B,QAAQ,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,OAAO,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;IAC3C,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CACxC;AAED,MAAM,WAAW,SAAS,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACvE,SAAQ,YAAY,CAAC,YAAY,CAAC,EAChC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,EACrD,WAAW;CAAG;AAElB;;;GAGG;AACH,eAAO,MAAM,IAAI;;MAwDZ,MAAM,YAAY,CAAA"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,eAAe,EAAc,MAAM,kBAAkB,CAAA;AAEtE,OAAO,EAGL,YAAY,EACZ,aAAa,EACb,WAAW,EACX,aAAa,EACb,kBAAkB,EACnB,MAAM,iBAAiB,CAAA;AAIxB,UAAU,WAAW,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW;IAClE;;OAEG;IACH,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ;;OAEG;IACH,QAAQ,EAAE,aAAa,CAAC,YAAY,CAAC,CAAA;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,YAAY,CAAC,CAAA;IAC1C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAA;CAClD;AAED,MAAM,WAAW,SAAS,CAAC,YAAY,SAAS,WAAW,GAAG,WAAW,CACvE,SAAQ,YAAY,CAAC,YAAY,CAAC,EAChC,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,EACrD,WAAW,CAAC,YAAY,CAAC;CAAG;AAEhC;;;GAGG;AACH,eAAO,MAAM,IAAI;;MA8DZ,MAAM,YAAY,CAAA"}

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export * from './submit-button';
 export * from './array-field';
 export * from './use-array-field';
 export * from './object-field';
+export * from './display-if';
 export * from '@saas-ui/input-right-button';
 export type { FieldErrors } from 'react-hook-form';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAE9B,cAAc,6BAA6B,CAAA;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAE5B,cAAc,6BAA6B,CAAA;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/index.js

@@ -1,2 +1,2 @@
-var e=require("react"),r=require("react-hook-form"),t=require("@chakra-ui/react"),n=require("@saas-ui/number-input"),a=require("@saas-ui/password-input"),l=require("@saas-ui/radio"),i=require("@saas-ui/pin-input"),o=require("@saas-ui/select"),u=require("yup"),s=require("@hookform/resolvers/yup"),c=require("@chakra-ui/system"),d=require("@chakra-ui/icons"),m=require("@saas-ui/button"),f=require("@chakra-ui/react-utils"),p=require("@saas-ui/input-right-button");function v(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var h=/*#__PURE__*/v(e);function y(){return y=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},y.apply(this,arguments)}function x(e,r){if(null==e)return{};var t,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(a[t]=e[t]);return a}function b(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var E=["name","label","placeholder"],F=["name","label","help","variant","hideLabel","children"],g=["name","label","isDisabled","isInvalid","isReadOnly","isRequired","variant"],w=["name","rules"],C=["ref"],A=["name","rules"],R=["ref"],k=["label"],I=["label"],S={},O=function(e){var n=e.name,a=e.label,l=e.help,i=e.variant,o=e.hideLabel,u=e.children,s=x(e,F),c=function(e,t){return r.get(t.errors,e)}(n,r.useFormContext().formState);/*#__PURE__*/return h.createElement(t.FormControl,y({variant:i},s,{isInvalid:!!c}),a&&!o?/*#__PURE__*/h.createElement(t.FormLabel,{variant:i},a):null,/*#__PURE__*/h.createElement(t.Box,null,u,!l||null!=c&&c.message?null:/*#__PURE__*/h.createElement(t.FormHelperText,null,l),(null==c?void 0:c.message)&&/*#__PURE__*/h.createElement(t.FormErrorMessage,null,null==c?void 0:c.message)))},V=t.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return h.createElement(S[void 0===t?"text":t]||S.text,y({ref:r},e))}),q=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=x(n,w),u=r.useFormContext();/*#__PURE__*/return h.createElement(r.Controller,{name:l,control:u.control,rules:i,render:function(r){var n=r.field,l=n.ref,i=x(n,C);/*#__PURE__*/return h.createElement(e,y({},i,o,{ref:t.useMergeRefs(a,l)}))}})})},j=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=x(n,A),u=(0,r.useFormContext().register)(l,i),s=u.ref,c=x(u,R);/*#__PURE__*/return h.createElement(e,y({},c,o,{ref:t.useMergeRefs(a,s)}))})},L=function(e,r,n){var a=function(e,r){var n=r.displayName,a=r.hideLabel,l=r.BaseField,i=t.forwardRef(function(r,t){var n=r.name,i=r.label,o=r.isDisabled,u=r.isInvalid,s=r.isReadOnly,c=r.isRequired,d=r.variant,m=x(r,g);/*#__PURE__*/return h.createElement(l,{name:n,label:i,hideLabel:a,isDisabled:o,isInvalid:u,isReadOnly:s,isRequired:c,variant:d},/*#__PURE__*/h.createElement(e,y({ref:t,name:n,label:i},m)))});return i.displayName=n,i}(null!=n&&n.isControlled?q(r):j(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==n?void 0:n.hideLabel,BaseField:(null==n?void 0:n.BaseField)||O});return S[e]=a,a},N=L("text",t.Input),P=L("number",n.NumberInput,{isControlled:!0}),B=L("password",a.PasswordInput),M=L("textarea",t.Textarea),T=L("switch",t.forwardRef(function(e,r){var n=e.label,a=x(e,k);/*#__PURE__*/return h.createElement(t.Switch,y({ref:r},a),n)}),{isControlled:!0,hideLabel:!0}),U=L("select",o.Select,{isControlled:!0}),D=L("checkbox",t.forwardRef(function(e,r){var n=e.label,a=x(e,I);/*#__PURE__*/return h.createElement(t.Checkbox,y({ref:r},a),n)}),{hideLabel:!0}),_=L("radio",l.RadioInput,{isControlled:!0}),G=L("pin",i.PinInput,{isControlled:!0}),z=L("native-select",o.NativeSelect,{isControlled:!0}),H=function(e){var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},$=function(e,r){for(var t,n=function(e,r){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,r){if(e){if("string"==typeof e)return b(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?b(e,r):void 0}}(e))){t&&(e=t);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(e.tests);!(t=n()).done;){var a,l=t.value;if(null!=(a=l.OPTIONS)&&a.params[r])return l.OPTIONS.params[r]}},J=function(e){var r,t=[];for(var n in r="array"===e.type?e.innerType.fields:e.fields){var a=r[n],l={};"array"===a.type&&(l.min=$(a,"min"),l.max=$(a,"max")),t.push(y({name:n,label:a.spec.label||n,type:H(a)},l))}return t},K=["children"],Q=function(e){/*#__PURE__*/return h.createElement(t.chakra.div,null,e.children)},W=function(e){var r,n,a,l=e.children,i=x(e,K),o=y({},null!=(r=null==(n=t.useTheme().components)||null==(a=n.FormLayout)?void 0:a.defaultProps)?r:{spacing:4},i);/*#__PURE__*/return h.createElement(t.SimpleGrid,o,h.Children.map(l,function(e){return h.isValidElement(e)?/*#__PURE__*/h.createElement(Q,null,e):e}))},X=function(e,r){return h.Children.map(r,function(r){return h.isValidElement(r)&&r.props.name?h.cloneElement(r,y({},r.props,{name:e+"."+r.props.name})):r})},Y=f.createContext({name:"ArrayFieldContext"}),Z=Y[0],ee=Y[1],re=f.createContext({name:"ArrayFieldRowContext"}),te=re[0],ne=re[1],ae=function(e){var t=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,i=e.min,o=e.max,u=r.useFormContext();return y({},r.useFieldArray({control:u.control,name:t,keyName:l}),{name:t,defaultValue:a,min:i,max:o})},le=function(e){var t=e.index,n=r.useFormContext().clearErrors,a=ee(),l=a.name,i=a.remove,o=a.fields;return h.useEffect(function(){n(l)},[]),{index:t,isFirst:0===t,isLast:t===o.length-1,name:l+"."+t,remove:h.useCallback(function(){n(l),i(t)},[t])}},ie=function(){var e=ne(),r=e.isFirst,t=e.remove,n=ee(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},oe=function(){var e=ee(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},ue=["children","columns","spacing"],se=["children"],ce=["name","defaultValue","keyName","min","max","children"],de=function(e){/*#__PURE__*/return h.createElement(fe,{index:e.index},/*#__PURE__*/h.createElement(me,{columns:e.columns,spacing:e.spacing},e.children),/*#__PURE__*/h.createElement(pe,null))},me=function(e){var r=e.children,t=e.columns,n=e.spacing,a=x(e,ue),l=ne().name;/*#__PURE__*/return h.createElement(W,y({flex:"1",columns:t,gridGap:n,mr:"2"},a),X(l,r))},fe=function(e){var r=e.children,t=le({index:e.index});/*#__PURE__*/return h.createElement(te,{value:t},/*#__PURE__*/h.createElement(c.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},pe=function(e){/*#__PURE__*/return h.createElement(m.IconButton,y({icon:/*#__PURE__*/h.createElement(d.MinusIcon,null),"aria-label":"Remove row"},ie(),e))},ve=function(e){/*#__PURE__*/return h.createElement(m.IconButton,y({icon:/*#__PURE__*/h.createElement(d.AddIcon,null),"aria-label":"Add row",float:"right"},oe(),e))},he=function(e){var r=e.children,t=x(e,se);/*#__PURE__*/return h.createElement(xe,t,/*#__PURE__*/h.createElement(ye,null,function(e){/*#__PURE__*/return h.createElement(h.Fragment,null,e.map(function(e,t){/*#__PURE__*/return h.createElement(de,{key:e.id,index:t},r)}))}),/*#__PURE__*/h.createElement(ve,null))},ye=function(e){return(0,e.children)(ee().fields)},xe=function(e){var r=e.name,t=e.defaultValue,n=e.keyName,a=e.min,l=e.max,i=e.children,o=x(e,ce),u=ae({name:r,defaultValue:t,keyName:n,min:a,max:l});/*#__PURE__*/return h.createElement(Z,{value:u},/*#__PURE__*/h.createElement(O,y({name:r},o),i))},be=["name","children","columns","spacing"],Ee=function(e){var r=e.name,t=e.children,n=e.columns,a=e.spacing,l=x(e,be);/*#__PURE__*/return h.createElement(O,y({name:r},l),/*#__PURE__*/h.createElement(W,{columns:n,gridGap:a},X(r,t)))},Fe=["name","type"],ge=["schema"],we=["name","type","defaultValue"],Ce=function(e,r){return J(function(e,r){return u.reach(e,r)}(e,r)).map(function(e){var r=e.name,t=e.type,n=x(e,Fe);/*#__PURE__*/return h.createElement(V,y({key:r,name:r,type:t},n))})},Ae=function(e){var r=e.schema,t=x(e,ge);/*#__PURE__*/return h.createElement(W,t,J(r).map(function(e){var t=e.name,n=e.type,a=x(e,we);return"array"===n?/*#__PURE__*/h.createElement(he,y({name:t},a),Ce(r,t)):"object"===n?/*#__PURE__*/h.createElement(Ee,y({name:t},a),Ce(r,t)):/*#__PURE__*/h.createElement(V,y({key:t,name:t,type:n},a))}))},Re=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","children"],ke=t.forwardRef(function(e,n){var a=e.mode,l=void 0===a?"all":a,i=e.resolver,o=e.reValidateMode,u=e.shouldFocusError,c=e.shouldUnregister,d=e.shouldUseNativeValidation,m=e.criteriaMode,f=e.delayError,p=e.schema,v=e.defaultValues,b=e.onSubmit,E=e.onError,F=e.children,g=x(e,Re),w={mode:l,resolver:i,defaultValues:v,reValidateMode:o,shouldFocusError:u,shouldUnregister:c,shouldUseNativeValidation:d,criteriaMode:m,delayError:f};p&&(w.resolver=s.yupResolver(p));var C=r.useForm(w);/*#__PURE__*/return h.createElement(r.FormProvider,C,/*#__PURE__*/h.createElement(t.chakra.form,y({ref:n,onSubmit:(0,C.handleSubmit)(b,E)},g),F))}),Ie=["children"],Se=c.forwardRef(function(e,t){var n=e.children,a=x(e,Ie),l=r.useFormContext();/*#__PURE__*/return h.createElement(m.Button,y({type:"submit",isLoading:l.formState.isSubmitting,isPrimary:!0,ref:t},a),n)}),Oe=["schema","submitLabel"],Ve=t.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=x(e,Oe);/*#__PURE__*/return h.createElement(ke,y({},a,{schema:t,ref:r}),/*#__PURE__*/h.createElement(W,null,/*#__PURE__*/h.createElement(Ae,{schema:t}),n&&/*#__PURE__*/h.createElement(Se,{label:n})))});Ve.defaultProps={submitLabel:"Submit"},exports.ArrayField=he,exports.ArrayFieldAddButton=ve,exports.ArrayFieldContainer=xe,exports.ArrayFieldProvider=Z,exports.ArrayFieldRemoveButton=pe,exports.ArrayFieldRow=de,exports.ArrayFieldRowContainer=fe,exports.ArrayFieldRowFields=me,exports.ArrayFieldRowProvider=te,exports.ArrayFieldRows=ye,exports.AutoForm=Ve,exports.BaseField=O,exports.CheckboxField=D,exports.DisplayField=function(e){var n=e.name,a=e.label,l=x(e,E),i=r.useFormContext().getValues;/*#__PURE__*/return h.createElement(t.FormControl,l,a?/*#__PURE__*/h.createElement(t.FormLabel,{htmlFor:n},a):null,/*#__PURE__*/h.createElement(t.Text,{fontSize:"md"},i(n)))},exports.Field=V,exports.Fields=Ae,exports.Form=ke,exports.FormLayout=W,exports.InputField=N,exports.NativeSelectField=z,exports.NumberInputField=P,exports.ObjectField=Ee,exports.PasswordInputFIeld=B,exports.PinField=G,exports.RadioField=_,exports.SelectField=U,exports.SubmitButton=Se,exports.SwitchField=T,exports.TextareaField=M,exports.registerFieldType=L,exports.useArrayField=ae,exports.useArrayFieldAddButton=oe,exports.useArrayFieldContext=ee,exports.useArrayFieldRemoveButton=ie,exports.useArrayFieldRow=le,exports.useArrayFieldRowContext=ne,exports.withControlledInput=q,exports.withUncontrolledInput=j,Object.keys(p).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return p[e]}})});
+var e=require("react"),r=require("react-hook-form"),t=require("@chakra-ui/react"),n=require("@saas-ui/number-input"),a=require("@saas-ui/password-input"),l=require("@saas-ui/radio"),i=require("@saas-ui/pin-input"),o=require("@saas-ui/select"),u=require("yup"),s=require("@hookform/resolvers/yup"),c=require("@chakra-ui/system"),d=require("@chakra-ui/icons"),m=require("@saas-ui/button"),f=require("@chakra-ui/react-utils"),p=require("@saas-ui/input-right-button");function v(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach(function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}}),r.default=e,r}var h=/*#__PURE__*/v(e);function b(){return b=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},b.apply(this,arguments)}function x(e,r){if(null==e)return{};var t,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r.indexOf(t=l[n])>=0||(a[t]=e[t]);return a}function y(e,r){(null==r||r>e.length)&&(r=e.length);for(var t=0,n=new Array(r);t<r;t++)n[t]=e[t];return n}var E=["name","label","placeholder"],F=["name","label","help","variant","hideLabel","children"],g=["name","label","isDisabled","isInvalid","isReadOnly","isRequired","rules","variant"],w=["name","rules"],C=["ref"],I=["name","rules"],R=["ref"],A=["label"],k=["label"],S={},O=function(e){var n=e.name,a=e.label,l=e.help,i=e.variant,o=e.hideLabel,u=e.children,s=x(e,F),c=function(e,t){return r.get(t.errors,e)}(n,r.useFormContext().formState);/*#__PURE__*/return h.createElement(t.FormControl,b({variant:i},s,{isInvalid:!!c}),a&&!o?/*#__PURE__*/h.createElement(t.FormLabel,{variant:i},a):null,/*#__PURE__*/h.createElement(t.Box,null,u,!l||null!=c&&c.message?null:/*#__PURE__*/h.createElement(t.FormHelperText,null,l),(null==c?void 0:c.message)&&/*#__PURE__*/h.createElement(t.FormErrorMessage,null,null==c?void 0:c.message)))},V=t.forwardRef(function(e,r){var t=e.type;/*#__PURE__*/return h.createElement(S[void 0===t?"text":t]||S.text,b({ref:r},e))}),q=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=x(n,w),u=r.useFormContext();/*#__PURE__*/return h.createElement(r.Controller,{name:l,control:u.control,rules:i,render:function(r){var n=r.field,l=n.ref,i=x(n,C);/*#__PURE__*/return h.createElement(e,b({},i,o,{ref:t.useMergeRefs(a,l)}))}})})},j=function(e){return t.forwardRef(function(n,a){var l=n.name,i=n.rules,o=x(n,I),u=(0,r.useFormContext().register)(l,i),s=u.ref,c=x(u,R);/*#__PURE__*/return h.createElement(e,b({},c,o,{ref:t.useMergeRefs(a,s)}))})},N=function(e,r,n){var a=function(e,r){var n=r.displayName,a=r.hideLabel,l=r.BaseField,i=t.forwardRef(function(r,t){var n=r.name,i=r.label,o=r.isDisabled,u=r.isInvalid,s=r.isReadOnly,c=r.isRequired,d=r.rules,m=r.variant,f=x(r,g),p=b({required:c},d);/*#__PURE__*/return h.createElement(l,{name:n,label:i,hideLabel:a,isDisabled:o,isInvalid:u,isReadOnly:s,isRequired:p.required,variant:m},/*#__PURE__*/h.createElement(e,b({ref:t,name:n,label:i,rules:p},f)))});return i.displayName=n,i}(null!=n&&n.isControlled?q(r):j(r),{displayName:e.split("-").map(function(e){return e.charAt(0).toUpperCase()+e.slice(1)}).join("")+"Field",hideLabel:null==n?void 0:n.hideLabel,BaseField:(null==n?void 0:n.BaseField)||O});return S[e]=a,a},P=N("text",t.Input),L=N("number",n.NumberInput,{isControlled:!0}),B=N("password",a.PasswordInput),D=N("textarea",t.Textarea),M=N("switch",t.forwardRef(function(e,r){var n=e.label,a=x(e,A);/*#__PURE__*/return h.createElement(t.Switch,b({ref:r},a),n)}),{isControlled:!0,hideLabel:!0}),U=N("select",o.Select,{isControlled:!0}),T=N("checkbox",t.forwardRef(function(e,r){var n=e.label,a=x(e,k);/*#__PURE__*/return h.createElement(t.Checkbox,b({ref:r},a),n)}),{hideLabel:!0}),_=N("radio",l.RadioInput,{isControlled:!0}),G=N("pin",i.PinInput,{isControlled:!0}),H=N("native-select",o.NativeSelect,{isControlled:!0}),z=function(e){var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},W=function(e,r){for(var t,n=function(e,r){var t="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(t)return(t=t.call(e)).next.bind(t);if(Array.isArray(e)||(t=function(e,r){if(e){if("string"==typeof e)return y(e,r);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?y(e,r):void 0}}(e))){t&&(e=t);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(e.tests);!(t=n()).done;){var a,l=t.value;if(null!=(a=l.OPTIONS)&&a.params[r])return l.OPTIONS.params[r]}},$=function(e){var r,t=[];for(var n in r="array"===e.type?e.innerType.fields:e.fields){var a=r[n],l={};"array"===a.type&&(l.min=W(a,"min"),l.max=W(a,"max")),t.push(b({name:n,label:a.spec.label||n,type:z(a)},l))}return t},J=["children"],K=function(e){/*#__PURE__*/return h.createElement(t.chakra.div,null,e.children)},Q=function(e){var r,n,a,l=e.children,i=x(e,J),o=b({},null!=(r=null==(n=t.useTheme().components)||null==(a=n.FormLayout)?void 0:a.defaultProps)?r:{spacing:4},i);/*#__PURE__*/return h.createElement(t.SimpleGrid,o,h.Children.map(l,function(e){return h.isValidElement(e)?/*#__PURE__*/h.createElement(K,null,e):e}))},X=function(e,r){return h.Children.map(r,function(r){return h.isValidElement(r)&&r.props.name?h.cloneElement(r,b({},r.props,{name:e+"."+r.props.name})):r})},Y=f.createContext({name:"ArrayFieldContext"}),Z=Y[0],ee=Y[1],re=f.createContext({name:"ArrayFieldRowContext"}),te=re[0],ne=re[1],ae=function(e){var t=e.name,n=e.defaultValue,a=void 0===n?{}:n,l=e.keyName,i=e.min,o=e.max,u=r.useFormContext();return b({},r.useFieldArray({control:u.control,name:t,keyName:l}),{name:t,defaultValue:a,min:i,max:o})},le=function(e){var t=e.index,n=r.useFormContext().clearErrors,a=ee(),l=a.name,i=a.remove,o=a.fields;return h.useEffect(function(){n(l)},[]),{index:t,isFirst:0===t,isLast:t===o.length-1,name:l+"."+t,remove:h.useCallback(function(){n(l),i(t)},[t])}},ie=function(){var e=ne(),r=e.isFirst,t=e.remove,n=ee(),a=n.min;return{onClick:function(){return t()},isDisabled:r&&!!(a&&n.fields.length<=a)}},oe=function(){var e=ee(),r=e.append,t=e.defaultValue,n=e.max;return{onClick:function(){return r(t,{shouldFocus:!1})},isDisabled:!!(n&&e.fields.length>=n)}},ue=["children","columns","spacing"],se=["children"],ce=["name","defaultValue","keyName","min","max","children"],de=function(e){/*#__PURE__*/return h.createElement(fe,{index:e.index},/*#__PURE__*/h.createElement(me,{columns:e.columns,spacing:e.spacing},e.children),/*#__PURE__*/h.createElement(pe,null))},me=function(e){var r=e.children,t=e.columns,n=e.spacing,a=x(e,ue),l=ne().name;/*#__PURE__*/return h.createElement(Q,b({flex:"1",columns:t,gridGap:n,mr:"2"},a),X(l,r))},fe=function(e){var r=e.children,t=le({index:e.index});/*#__PURE__*/return h.createElement(te,{value:t},/*#__PURE__*/h.createElement(c.chakra.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},pe=function(e){/*#__PURE__*/return h.createElement(m.IconButton,b({icon:/*#__PURE__*/h.createElement(d.MinusIcon,null),"aria-label":"Remove row"},ie(),e))},ve=function(e){/*#__PURE__*/return h.createElement(m.IconButton,b({icon:/*#__PURE__*/h.createElement(d.AddIcon,null),"aria-label":"Add row",float:"right"},oe(),e))},he=function(e){var r=e.children,t=x(e,se);/*#__PURE__*/return h.createElement(xe,t,/*#__PURE__*/h.createElement(be,null,function(e){/*#__PURE__*/return h.createElement(h.Fragment,null,e.map(function(e,t){/*#__PURE__*/return h.createElement(de,{key:e.id,index:t},r)}))}),/*#__PURE__*/h.createElement(ve,null))},be=function(e){return(0,e.children)(ee().fields)},xe=function(e){var r=e.name,t=e.defaultValue,n=e.keyName,a=e.min,l=e.max,i=e.children,o=x(e,ce),u=ae({name:r,defaultValue:t,keyName:n,min:a,max:l});/*#__PURE__*/return h.createElement(Z,{value:u},/*#__PURE__*/h.createElement(O,b({name:r},o),i))},ye=["name","children","columns","spacing"],Ee=function(e){var r=e.name,t=e.children,n=e.columns,a=e.spacing,l=x(e,ye);/*#__PURE__*/return h.createElement(O,b({name:r},l),/*#__PURE__*/h.createElement(Q,{columns:n,gridGap:a},X(r,t)))},Fe=["name","type"],ge=["schema"],we=["name","type","defaultValue"],Ce=function(e,r){return $(function(e,r){return u.reach(e,r)}(e,r)).map(function(e){var r=e.name,t=e.type,n=x(e,Fe);/*#__PURE__*/return h.createElement(V,b({key:r,name:r,type:t},n))})},Ie=function(e){var r=e.schema,t=x(e,ge);/*#__PURE__*/return h.createElement(Q,t,$(r).map(function(e){var t=e.name,n=e.type,a=x(e,we);return"array"===n?/*#__PURE__*/h.createElement(he,b({name:t},a),Ce(r,t)):"object"===n?/*#__PURE__*/h.createElement(Ee,b({name:t},a),Ce(r,t)):/*#__PURE__*/h.createElement(V,b({key:t,name:t,type:n},a))}))},Re=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","formRef","children"],Ae=t.forwardRef(function(e,n){var a=e.mode,l=void 0===a?"all":a,i=e.resolver,o=e.reValidateMode,u=e.shouldFocusError,c=e.shouldUnregister,d=e.shouldUseNativeValidation,m=e.criteriaMode,f=e.delayError,p=e.schema,v=e.defaultValues,y=e.onSubmit,E=e.onError,F=e.formRef,g=e.children,w=x(e,Re),C={mode:l,resolver:i,defaultValues:v,reValidateMode:o,shouldFocusError:u,shouldUnregister:c,shouldUseNativeValidation:d,criteriaMode:m,delayError:f};p&&(C.resolver=s.yupResolver(p));var I=r.useForm(C),R=I.handleSubmit;return h.useImperativeHandle(n,function(){return I},[n,I]),/*#__PURE__*/h.createElement(r.FormProvider,I,/*#__PURE__*/h.createElement(t.chakra.form,b({ref:F,onSubmit:R(y,E)},w),g))}),ke=["children","disableIfUntouched","disableIfInvalid"],Se=c.forwardRef(function(e,t){var n=e.children,a=e.disableIfUntouched,l=e.disableIfInvalid,i=x(e,ke),o=r.useFormContext().formState;/*#__PURE__*/return h.createElement(m.Button,b({type:"submit",isLoading:o.isSubmitting,isPrimary:!0,ref:t,isDisabled:a&&!o.isDirty||l&&!o.isValid},i),n)});Se.defaultProps={label:"Submit",disableIfUntouched:!1,disableIfInvalid:!1};var Oe=["schema","submitLabel"],Ve=t.forwardRef(function(e,r){var t=e.schema,n=e.submitLabel,a=void 0===n?"Submit":n,l=x(e,Oe);/*#__PURE__*/return h.createElement(Ae,b({},l,{schema:t,ref:r}),/*#__PURE__*/h.createElement(Q,null,/*#__PURE__*/h.createElement(Ie,{schema:t}),a&&/*#__PURE__*/h.createElement(Se,{label:a})))});exports.ArrayField=he,exports.ArrayFieldAddButton=ve,exports.ArrayFieldContainer=xe,exports.ArrayFieldProvider=Z,exports.ArrayFieldRemoveButton=pe,exports.ArrayFieldRow=de,exports.ArrayFieldRowContainer=fe,exports.ArrayFieldRowFields=me,exports.ArrayFieldRowProvider=te,exports.ArrayFieldRows=be,exports.AutoForm=Ve,exports.BaseField=O,exports.CheckboxField=T,exports.DisplayField=function(e){var n=e.name,a=e.label,l=x(e,E),i=r.useFormContext().getValues;/*#__PURE__*/return h.createElement(t.FormControl,l,a?/*#__PURE__*/h.createElement(t.FormLabel,{htmlFor:n},a):null,/*#__PURE__*/h.createElement(t.Text,{fontSize:"md"},i(n)))},exports.DisplayIf=function(e){var t=e.children,n=e.condition;return(void 0===n?function(e){return!!e}:n)(r.useWatch({name:e.name,defaultValue:e.defaultValue,disabled:e.isDisabled,exact:e.isExact}),r.useFormContext())?t:null},exports.Field=V,exports.Fields=Ie,exports.Form=Ae,exports.FormLayout=Q,exports.InputField=P,exports.NativeSelectField=H,exports.NumberInputField=L,exports.ObjectField=Ee,exports.PasswordInputFIeld=B,exports.PinField=G,exports.RadioField=_,exports.SelectField=U,exports.SubmitButton=Se,exports.SwitchField=M,exports.TextareaField=D,exports.registerFieldType=N,exports.useArrayField=ae,exports.useArrayFieldAddButton=oe,exports.useArrayFieldContext=ee,exports.useArrayFieldRemoveButton=ie,exports.useArrayFieldRow=le,exports.useArrayFieldRowContext=ne,exports.withControlledInput=q,exports.withUncontrolledInput=j,Object.keys(p).forEach(function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return p[e]}})});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-field.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  useFormContext,\n  FormState,\n  Controller,\n  get,\n  RegisterOptions,\n  FieldValues,\n  FieldName,\n  FieldPath,\n  FieldPathValue,\n} from 'react-hook-form'\n\nimport {\n  forwardRef,\n  Box,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n  Input,\n  Textarea,\n  Checkbox,\n  Switch,\n  useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport type FieldRules = Pick<\n  RegisterOptions,\n  'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n  | 'text'\n  | 'number'\n  | 'password'\n  | 'textarea'\n  | 'select'\n  | 'native-select'\n  | 'checkbox'\n  | 'radio'\n  | 'switch'\n  | 'pin'\n  | string\n\nexport interface FieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n  /**\n   * The field name\n   */\n  name: TName\n  /**\n   * The field label\n   */\n  label?: string\n  /**\n   * Hide the field label\n   */\n  hideLabel?: boolean\n  /**\n   * Field help text\n   */\n  help?: string\n  /**\n   * React hook form rules\n   */\n  rules?: Omit<\n    RegisterOptions<TFieldValues, TName>,\n    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n  >\n  /**\n   * Options used for selects and radio fields\n   */\n  options?: any\n  /**\n   * The field type\n   * Build-in types:\n   * - text\n   * - number\n   * - password\n   * - textarea\n   * - select\n   * - native-select\n   * - checkbox\n   * - radio\n   * - switch\n   * - pin\n   *\n   * Will default to a text field if there is no matching type.\n   * @default 'text'\n   */\n  type?: FieldTypes\n  /**\n   * The input placeholder\n   */\n  placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n  return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n  return get(formState.errors, name)\n}\n\nconst isTouched = (\n  name: string,\n  formState: FormState<{ [x: string]: any }>\n) => {\n  return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n  const { name, label, help, variant, hideLabel, children, ...controlProps } =\n    props\n\n  const { formState } = useFormContext()\n\n  const error = getError(name, formState)\n\n  return (\n    <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n      {label && !hideLabel ? (\n        <FormLabel variant={variant}>{label}</FormLabel>\n      ) : null}\n      <Box>\n        {children}\n        {help && !error?.message ? (\n          <FormHelperText>{help}</FormHelperText>\n        ) : null}\n        {error?.message && (\n          <FormErrorMessage>{error?.message}</FormErrorMessage>\n        )}\n      </Box>\n    </FormControl>\n  )\n}\n\nexport const Field = forwardRef<FieldProps, typeof FormControl>(\n  (props, ref) => {\n    const { type = defaultInputType } = props\n    const InputComponent = getInput(type)\n\n    return <InputComponent ref={ref} {...props} />\n  }\n)\n\ninterface CreateFieldProps {\n  displayName: string\n  hideLabel?: boolean\n  BaseField: React.FC<any>\n}\n\nconst createField = (\n  InputComponent: React.FC<any>,\n  { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n  const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n    const {\n      name,\n      label,\n      isDisabled,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      variant,\n      ...inputProps\n    } = props\n\n    return (\n      <BaseField\n        name={name}\n        label={label}\n        hideLabel={hideLabel}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isReadOnly={isReadOnly}\n        isRequired={isRequired}\n        variant={variant}\n      >\n        <InputComponent ref={ref} name={name} label={label} {...inputProps} />\n      </BaseField>\n    )\n  })\n  Field.displayName = displayName\n\n  return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { control } = useFormContext()\n\n      return (\n        <Controller\n          name={name}\n          control={control}\n          rules={rules}\n          render={({ field: { ref: _ref, ...field } }) => (\n            <InputComponent\n              {...field}\n              {...inputProps}\n              ref={useMergeRefs(ref, _ref)}\n            />\n          )}\n        />\n      )\n    }\n  )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { register } = useFormContext()\n\n      const { ref: _ref, ...field } = register(name, rules)\n\n      return (\n        <InputComponent\n          {...field}\n          {...inputProps}\n          ref={useMergeRefs(ref, _ref)}\n        />\n      )\n    }\n  )\n}\n\nexport interface RegisterFieldTypeOptions {\n  isControlled?: boolean\n  hideLabel?: boolean\n  BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n  type: string,\n  component: React.FC<any>,\n  options?: RegisterFieldTypeOptions\n) => {\n  let InputComponent\n  if (options?.isControlled) {\n    InputComponent = withControlledInput(component)\n  } else {\n    InputComponent = withUncontrolledInput(component)\n  }\n\n  const Field = createField(InputComponent, {\n    displayName: `${type\n      .split('-')\n      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n      .join('')}Field`,\n    hideLabel: options?.hideLabel,\n    BaseField: options?.BaseField || BaseField,\n  })\n\n  inputTypes[type] = Field\n\n  return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n  isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n  'switch',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Switch ref={ref} {...props}>\n        {label}\n      </Switch>\n    )\n  }),\n  {\n    isControlled: true,\n    hideLabel: true,\n  }\n)\nexport const SelectField = registerFieldType('select', Select, {\n  isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n  'checkbox',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Checkbox ref={ref} {...props}>\n        {label}\n      </Checkbox>\n    )\n  }),\n  {\n    hideLabel: true,\n  }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n  isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n  isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n  'native-select',\n  NativeSelect,\n  { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n  if (field.spec.meta?.type) {\n    return field.spec.meta.type\n  }\n\n  switch (field.type) {\n    case 'array':\n      return 'array'\n    case 'object':\n      return 'object'\n    case 'number':\n      return 'number'\n    case 'date':\n      return 'date'\n    case 'string':\n    default:\n      return 'text'\n  }\n}\n\ntype Options = {\n  min?: number\n  max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n  for (const test of field.tests) {\n    if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n  }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n  schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n  const fields = []\n\n  let schemaFields: Record<string, any> = {}\n  if (schema.type === 'array') {\n    /* @ts-ignore this is actually valid */\n    schemaFields = schema.innerType.fields\n  } else {\n    schemaFields = schema.fields\n  }\n\n  for (const name in schemaFields) {\n    const field = schemaFields[name]\n\n    const options: Options = {}\n    if (field.type === 'array') {\n      options.min = getArrayOption(field, 'min')\n      options.max = getArrayOption(field, 'max')\n    }\n\n    fields.push({\n      name,\n      label: field.spec.label || name,\n      type: getType(field),\n      ...options,\n    })\n  }\n  return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n  return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n  children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n  return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n  const theme = useTheme()\n\n  const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n    spacing: 4,\n  }\n\n  const gridProps = {\n    ...defaultProps,\n    ...props,\n  }\n\n  return (\n    <SimpleGrid {...gridProps}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return <FormLayoutItem>{child}</FormLayoutItem>\n        }\n        return child\n      })}\n    </SimpleGrid>\n  )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n  return React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.props.name) {\n      return React.cloneElement(child, {\n        ...child.props,\n        name: `${name}.${child.props.name}`,\n      })\n    }\n    return child\n  })\n}\n","import * as React from 'react'\nimport {\n  useFieldArray,\n  useFormContext,\n  UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n  /**\n   * The array field name\n   */\n  name: string\n  /**\n   * The default value for new items\n   */\n  defaultValue: Record<string, any>\n  /**\n   * Min amount of items\n   */\n  min?: number\n  /**\n   * Max amount of items\n   */\n  max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n  createContext<UseArrayFieldReturn>({\n    name: 'ArrayFieldContext',\n  })\n\nexport interface UseArrayFieldRowReturn {\n  /**\n   * Name of the array field including the index, eg 'field.0'\n   */\n  name: string\n  /**\n   * The field index\n   */\n  index: number\n  /**\n   * Remove this array item\n   */\n  remove: () => void\n  /**\n   * True if this is the first item\n   */\n  isFirst: boolean\n  /**\n   * True if this is the last item\n   */\n  isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n  createContext<UseArrayFieldRowReturn>({\n    name: 'ArrayFieldRowContext',\n  })\n\nexport interface ArrayFieldOptions {\n  /**\n   * The field name\n   */\n  name: string\n  /**\n   * Default value for new values in the array\n   */\n  defaultValue?: Record<string, any>\n  /**\n   * Default key name for rows, change this if your data uses 'id'\n   * @default \"id\"\n   */\n  keyName?: string\n  min?: number\n  max?: number\n}\n\nexport const useArrayField = ({\n  name,\n  defaultValue = {},\n  keyName,\n  min,\n  max,\n}: ArrayFieldOptions) => {\n  const { control } = useFormContext()\n  const context = useFieldArray({\n    control,\n    name,\n    keyName,\n  })\n\n  return {\n    ...context,\n    name,\n    defaultValue,\n    min,\n    max,\n  }\n}\n\nexport interface UseArrayFieldRowProps {\n  index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n  const { clearErrors } = useFormContext()\n  const { name, remove, fields } = useArrayFieldContext()\n\n  React.useEffect(() => {\n    // reset errors, to make sure min/max errors reset correctly\n    clearErrors(name)\n  }, [])\n\n  return {\n    index,\n    isFirst: index === 0,\n    isLast: index === fields.length - 1,\n    name: `${name}.${index}`,\n    remove: React.useCallback(() => {\n      clearErrors(name)\n      remove(index)\n    }, [index]),\n  }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n  const { isFirst, remove } = useArrayFieldRowContext()\n  const { min, fields } = useArrayFieldContext()\n\n  const isDisabled = isFirst && !!(min && fields.length <= min)\n\n  return {\n    onClick: () => remove(),\n    isDisabled,\n  }\n}\n\nexport const useArrayFieldAddButton = () => {\n  const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n  const isDisabled = !!(max && fields.length >= max)\n\n  return {\n    onClick: () =>\n      append(defaultValue, {\n        shouldFocus: false,\n      }),\n    isDisabled,\n  }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n  useArrayField,\n  useArrayFieldRow,\n  useArrayFieldContext,\n  ArrayFieldProvider,\n  ArrayFieldOptions,\n  ArrayFieldRowProvider,\n  useArrayFieldRowContext,\n  useArrayFieldRemoveButton,\n  useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n  id: string\n  [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n  /**\n   * The array index\n   */\n  index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n  children,\n  columns,\n  spacing,\n  index,\n}) => {\n  return (\n    <ArrayFieldRowContainer index={index}>\n      <ArrayFieldRowFields columns={columns} spacing={spacing}>\n        {children}\n      </ArrayFieldRowFields>\n      <ArrayFieldRemoveButton />\n    </ArrayFieldRowContainer>\n  )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n  children,\n  columns,\n  spacing,\n  ...layoutProps\n}) => {\n  const { name } = useArrayFieldRowContext()\n  return (\n    <FormLayout\n      flex=\"1\"\n      columns={columns}\n      gridGap={spacing}\n      mr=\"2\"\n      {...layoutProps}\n    >\n      {mapNestedFields(name, children)}\n    </FormLayout>\n  )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n  children,\n  index,\n}) => {\n  const context = useArrayFieldRow({ index })\n\n  const styles = {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    width: '100%',\n    mb: 4,\n  }\n\n  return (\n    <ArrayFieldRowProvider value={context}>\n      <chakra.div __css={styles}>{children}</chakra.div>\n    </ArrayFieldRowProvider>\n  )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<MinusIcon />}\n      aria-label=\"Remove row\"\n      {...useArrayFieldRemoveButton()}\n      {...props}\n    />\n  )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<AddIcon />}\n      aria-label=\"Add row\"\n      float=\"right\"\n      {...useArrayFieldAddButton()}\n      {...props}\n    />\n  )\n}\n\nexport interface ArrayFieldProps\n  extends ArrayFieldOptions,\n    Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n  const { children, ...containerProps } = props\n\n  return (\n    <ArrayFieldContainer {...containerProps}>\n      <ArrayFieldRows>\n        {(fields: ArrayField[]) => (\n          <>\n            {fields.map(({ id }, index: number) => (\n              <ArrayFieldRow key={id} index={index}>\n                {children}\n              </ArrayFieldRow>\n            ))}\n          </>\n        )}\n      </ArrayFieldRows>\n      <ArrayFieldAddButton />\n    </ArrayFieldContainer>\n  )\n}\n\nexport interface ArrayFieldRowsProps {\n  children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n  children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n  const { fields } = useArrayFieldContext()\n  return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n  name,\n  defaultValue,\n  keyName,\n  min,\n  max,\n  children,\n  ...fieldProps\n}) => {\n  const context = useArrayField({\n    name,\n    defaultValue,\n    keyName,\n    min,\n    max,\n  })\n\n  return (\n    <ArrayFieldProvider value={context}>\n      <BaseField name={name} {...fieldProps}>\n        {children}\n      </BaseField>\n    </ArrayFieldProvider>\n  )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n  name: string\n  children: React.ReactNode\n  columns?: ResponsiveValue<number>\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n  const { name, children, columns, spacing, ...fieldProps } = props\n  return (\n    <BaseField name={name} {...fieldProps}>\n      <FormLayout columns={columns} gridGap={spacing}>\n        {mapNestedFields(name, children)}\n      </FormLayout>\n    </BaseField>\n  )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n  schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n  return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n    ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n      <Field key={name} name={name} type={type} {...nestedFieldProps} />\n    )\n  )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n  return (\n    <FormLayout {...props}>\n      {getFieldsFromSchema(schema).map(\n        ({\n          name,\n          type,\n          defaultValue,\n          ...fieldProps\n        }: FieldProps): React.ReactNode => {\n          if (type === 'array') {\n            return (\n              <ArrayField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ArrayField>\n            )\n          } else if (type === 'object') {\n            return (\n              <ObjectField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ObjectField>\n            )\n          }\n\n          return <Field key={name} name={name} type={type} {...fieldProps} />\n        }\n      )}\n    </FormLayout>\n  )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n  useForm,\n  FormProvider,\n  UseFormProps,\n  FieldErrors,\n  FieldValues,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\ninterface FormOptions {\n  schema?: any\n  submitLabel?: false | string\n  onSubmit: (arg: any) => Promise<any> | void\n  onError?: (errors: FieldErrors) => void\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n  extends UseFormProps<TFieldValues>,\n    Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n    FormOptions {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FormProps<TFieldValues>,\n    ref: React.ForwardedRef<HTMLFormElement>\n  ) => {\n    const {\n      mode = 'all',\n      resolver,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n      schema,\n      defaultValues,\n      onSubmit,\n      onError,\n      children,\n      ...rest\n    } = props\n\n    const form = {\n      mode,\n      resolver,\n      defaultValues,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n    }\n\n    // @todo remove yup dependency and just use resolver prop?\n    if (schema) {\n      form.resolver = yupResolver(schema)\n    }\n\n    const methods = useForm<TFieldValues>(form)\n    const { handleSubmit } = methods\n\n    return (\n      <FormProvider {...methods}>\n        <chakra.form\n          ref={ref}\n          onSubmit={handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {children}\n        </chakra.form>\n      </FormProvider>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FormProps<TFieldValues> & { ref?: React.ForwardedRef<HTMLFormElement> }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport const SubmitButton = forwardRef<ButtonProps, 'button'>(\n  ({ children, ...props }, ref) => {\n    const data = useFormContext()\n\n    return (\n      <Button\n        type=\"submit\"\n        isLoading={data.formState.isSubmitting}\n        isPrimary\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </Button>\n    )\n  }\n)\n","import * as React from 'react'\nimport { FieldValues } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n  schema: any\n  submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n  extends Omit<FormProps<TFieldValues>, 'schema'>,\n    AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: AutoFormProps<TFieldValues>,\n    ref: React.ForwardedRef<HTMLFormElement>\n  ) => {\n    const { schema, submitLabel, ...rest } = props\n    return (\n      <Form {...rest} schema={schema} ref={ref}>\n        <FormLayout>\n          {<Fields schema={schema} />}\n          {submitLabel && <SubmitButton label={submitLabel} />}\n        </FormLayout>\n      </Form>\n    )\n  }\n)\n\nAutoForm.defaultProps = {\n  submitLabel: 'Submit',\n}\n","import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  Text,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n  extends FormControlProps,\n    Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n  name,\n  label,\n  placeholder,\n  ...props\n}) => {\n  const { getValues } = useFormContext()\n\n  return (\n    <FormControl {...props}>\n      {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n      <Text fontSize=\"md\">{getValues(name)}</Text>\n    </FormControl>\n  )\n}\n"],"names":["inputTypes","BaseField","props","name","label","help","variant","hideLabel","children","controlProps","error","formState","get","errors","getError","useFormContext","React","FormControl","isInvalid","FormLabel","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","withControlledInput","InputComponent","rules","inputProps","Controller","control","render","field","_ref","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","displayName","isDisabled","isReadOnly","isRequired","createField","isControlled","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","tests","test","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","schemaFields","fields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","createContext","ArrayFieldProvider","useArrayFieldContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","ArrayFieldRowContainer","ArrayFieldRowFields","columns","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","key","id","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","rest","form","yupResolver","methods","useForm","FormProvider","handleSubmit","SubmitButton","data","Button","isLoading","isSubmitting","isPrimary","AutoForm","submitLabel","getValues","htmlFor","Text","fontSize"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-field.tsx","../src/display-if.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  useFormContext,\n  FormState,\n  Controller,\n  get,\n  RegisterOptions,\n  FieldValues,\n  FieldPath,\n} from 'react-hook-form'\n\nimport {\n  forwardRef,\n  Box,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n  Input,\n  Textarea,\n  Checkbox,\n  Switch,\n  useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface Option {\n  value: string\n  label?: string\n  [key: string]: unknown\n}\n\nexport type FieldRules = Pick<\n  RegisterOptions,\n  'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n  | 'text'\n  | 'number'\n  | 'password'\n  | 'textarea'\n  | 'select'\n  | 'native-select'\n  | 'checkbox'\n  | 'radio'\n  | 'switch'\n  | 'pin'\n  | string\n\nexport interface FieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n  /**\n   * The field name\n   */\n  name: TName\n  /**\n   * The field label\n   */\n  label?: string\n  /**\n   * Hide the field label\n   */\n  hideLabel?: boolean\n  /**\n   * Field help text\n   */\n  help?: string\n  /**\n   * React hook form rules\n   */\n  rules?: Omit<\n    RegisterOptions<TFieldValues, TName>,\n    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n  >\n  /**\n   * Options used for selects and radio fields\n   */\n  options?: Option[]\n  /**\n   * The field type\n   * Build-in types:\n   * - text\n   * - number\n   * - password\n   * - textarea\n   * - select\n   * - native-select\n   * - checkbox\n   * - radio\n   * - switch\n   * - pin\n   *\n   * Will default to a text field if there is no matching type.\n   * @default 'text'\n   */\n  type?: FieldTypes\n  /**\n   * The input placeholder\n   */\n  placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n  return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n  return get(formState.errors, name)\n}\n\nconst isTouched = (\n  name: string,\n  formState: FormState<{ [x: string]: any }>\n) => {\n  return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n  const { name, label, help, variant, hideLabel, children, ...controlProps } =\n    props\n\n  const { formState } = useFormContext()\n\n  const error = getError(name, formState)\n\n  return (\n    <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n      {label && !hideLabel ? (\n        <FormLabel variant={variant}>{label}</FormLabel>\n      ) : null}\n      <Box>\n        {children}\n        {help && !error?.message ? (\n          <FormHelperText>{help}</FormHelperText>\n        ) : null}\n        {error?.message && (\n          <FormErrorMessage>{error?.message}</FormErrorMessage>\n        )}\n      </Box>\n    </FormControl>\n  )\n}\nexport const Field = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FieldProps<TFieldValues> & {\n      [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.\n    },\n    ref: React.ForwardedRef<typeof FormControl>\n  ) => {\n    const { type = defaultInputType } = props\n    const InputComponent = getInput(type)\n\n    return <InputComponent ref={ref} {...props} />\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FieldProps<TFieldValues> & {\n    [key: string]: unknown\n  } & {\n    ref?: React.ForwardedRef<typeof FormControl>\n  }\n) => React.ReactElement\n\ninterface CreateFieldProps {\n  displayName: string\n  hideLabel?: boolean\n  BaseField: React.FC<any>\n}\n\nconst createField = (\n  InputComponent: React.FC<any>,\n  { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n  const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n    const {\n      name,\n      label,\n      isDisabled,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      rules,\n      variant,\n      ...inputProps\n    } = props\n\n    const inputRules = {\n      required: isRequired,\n      ...rules,\n    }\n\n    return (\n      <BaseField\n        name={name}\n        label={label}\n        hideLabel={hideLabel}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isReadOnly={isReadOnly}\n        isRequired={inputRules.required}\n        variant={variant}\n      >\n        <InputComponent\n          ref={ref}\n          name={name}\n          label={label}\n          rules={inputRules}\n          {...inputProps}\n        />\n      </BaseField>\n    )\n  })\n  Field.displayName = displayName\n\n  return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { control } = useFormContext()\n\n      return (\n        <Controller\n          name={name}\n          control={control}\n          rules={rules}\n          render={({ field: { ref: _ref, ...field } }) => (\n            <InputComponent\n              {...field}\n              {...inputProps}\n              ref={useMergeRefs(ref, _ref)}\n            />\n          )}\n        />\n      )\n    }\n  )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { register } = useFormContext()\n\n      const { ref: _ref, ...field } = register(name, rules)\n\n      return (\n        <InputComponent\n          {...field}\n          {...inputProps}\n          ref={useMergeRefs(ref, _ref)}\n        />\n      )\n    }\n  )\n}\n\nexport interface RegisterFieldTypeOptions {\n  isControlled?: boolean\n  hideLabel?: boolean\n  BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n  type: string,\n  component: React.FC<any>,\n  options?: RegisterFieldTypeOptions\n) => {\n  let InputComponent\n  if (options?.isControlled) {\n    InputComponent = withControlledInput(component)\n  } else {\n    InputComponent = withUncontrolledInput(component)\n  }\n\n  const Field = createField(InputComponent, {\n    displayName: `${type\n      .split('-')\n      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n      .join('')}Field`,\n    hideLabel: options?.hideLabel,\n    BaseField: options?.BaseField || BaseField,\n  })\n\n  inputTypes[type] = Field\n\n  return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n  isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n  'switch',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Switch ref={ref} {...props}>\n        {label}\n      </Switch>\n    )\n  }),\n  {\n    isControlled: true,\n    hideLabel: true,\n  }\n)\nexport const SelectField = registerFieldType('select', Select, {\n  isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n  'checkbox',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Checkbox ref={ref} {...props}>\n        {label}\n      </Checkbox>\n    )\n  }),\n  {\n    hideLabel: true,\n  }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n  isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n  isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n  'native-select',\n  NativeSelect,\n  { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n  if (field.spec.meta?.type) {\n    return field.spec.meta.type\n  }\n\n  switch (field.type) {\n    case 'array':\n      return 'array'\n    case 'object':\n      return 'object'\n    case 'number':\n      return 'number'\n    case 'date':\n      return 'date'\n    case 'string':\n    default:\n      return 'text'\n  }\n}\n\ntype Options = {\n  min?: number\n  max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n  for (const test of field.tests) {\n    if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n  }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n  schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n  const fields = []\n\n  let schemaFields: Record<string, any> = {}\n  if (schema.type === 'array') {\n    /* @ts-ignore this is actually valid */\n    schemaFields = schema.innerType.fields\n  } else {\n    schemaFields = schema.fields\n  }\n\n  for (const name in schemaFields) {\n    const field = schemaFields[name]\n\n    const options: Options = {}\n    if (field.type === 'array') {\n      options.min = getArrayOption(field, 'min')\n      options.max = getArrayOption(field, 'max')\n    }\n\n    fields.push({\n      name,\n      label: field.spec.label || name,\n      type: getType(field),\n      ...options,\n    })\n  }\n  return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n  return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n  children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n  return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n  const theme = useTheme()\n\n  const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n    spacing: 4,\n  }\n\n  const gridProps = {\n    ...defaultProps,\n    ...props,\n  }\n\n  return (\n    <SimpleGrid {...gridProps}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return <FormLayoutItem>{child}</FormLayoutItem>\n        }\n        return child\n      })}\n    </SimpleGrid>\n  )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n  return React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.props.name) {\n      return React.cloneElement(child, {\n        ...child.props,\n        name: `${name}.${child.props.name}`,\n      })\n    }\n    return child\n  })\n}\n","import * as React from 'react'\nimport {\n  useFieldArray,\n  useFormContext,\n  UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n  /**\n   * The array field name\n   */\n  name: string\n  /**\n   * The default value for new items\n   */\n  defaultValue: Record<string, any>\n  /**\n   * Min amount of items\n   */\n  min?: number\n  /**\n   * Max amount of items\n   */\n  max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n  createContext<UseArrayFieldReturn>({\n    name: 'ArrayFieldContext',\n  })\n\nexport interface UseArrayFieldRowReturn {\n  /**\n   * Name of the array field including the index, eg 'field.0'\n   */\n  name: string\n  /**\n   * The field index\n   */\n  index: number\n  /**\n   * Remove this array item\n   */\n  remove: () => void\n  /**\n   * True if this is the first item\n   */\n  isFirst: boolean\n  /**\n   * True if this is the last item\n   */\n  isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n  createContext<UseArrayFieldRowReturn>({\n    name: 'ArrayFieldRowContext',\n  })\n\nexport interface ArrayFieldOptions {\n  /**\n   * The field name\n   */\n  name: string\n  /**\n   * Default value for new values in the array\n   */\n  defaultValue?: Record<string, any>\n  /**\n   * Default key name for rows, change this if your data uses 'id'\n   * @default \"id\"\n   */\n  keyName?: string\n  min?: number\n  max?: number\n}\n\nexport const useArrayField = ({\n  name,\n  defaultValue = {},\n  keyName,\n  min,\n  max,\n}: ArrayFieldOptions) => {\n  const { control } = useFormContext()\n  const context = useFieldArray({\n    control,\n    name,\n    keyName,\n  })\n\n  return {\n    ...context,\n    name,\n    defaultValue,\n    min,\n    max,\n  }\n}\n\nexport interface UseArrayFieldRowProps {\n  index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n  const { clearErrors } = useFormContext()\n  const { name, remove, fields } = useArrayFieldContext()\n\n  React.useEffect(() => {\n    // reset errors, to make sure min/max errors reset correctly\n    clearErrors(name)\n  }, [])\n\n  return {\n    index,\n    isFirst: index === 0,\n    isLast: index === fields.length - 1,\n    name: `${name}.${index}`,\n    remove: React.useCallback(() => {\n      clearErrors(name)\n      remove(index)\n    }, [index]),\n  }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n  const { isFirst, remove } = useArrayFieldRowContext()\n  const { min, fields } = useArrayFieldContext()\n\n  const isDisabled = isFirst && !!(min && fields.length <= min)\n\n  return {\n    onClick: () => remove(),\n    isDisabled,\n  }\n}\n\nexport const useArrayFieldAddButton = () => {\n  const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n  const isDisabled = !!(max && fields.length >= max)\n\n  return {\n    onClick: () =>\n      append(defaultValue, {\n        shouldFocus: false,\n      }),\n    isDisabled,\n  }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n  useArrayField,\n  useArrayFieldRow,\n  useArrayFieldContext,\n  ArrayFieldProvider,\n  ArrayFieldOptions,\n  ArrayFieldRowProvider,\n  useArrayFieldRowContext,\n  useArrayFieldRemoveButton,\n  useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n  id: string\n  [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n  /**\n   * The array index\n   */\n  index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n  children,\n  columns,\n  spacing,\n  index,\n}) => {\n  return (\n    <ArrayFieldRowContainer index={index}>\n      <ArrayFieldRowFields columns={columns} spacing={spacing}>\n        {children}\n      </ArrayFieldRowFields>\n      <ArrayFieldRemoveButton />\n    </ArrayFieldRowContainer>\n  )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n  children,\n  columns,\n  spacing,\n  ...layoutProps\n}) => {\n  const { name } = useArrayFieldRowContext()\n  return (\n    <FormLayout\n      flex=\"1\"\n      columns={columns}\n      gridGap={spacing}\n      mr=\"2\"\n      {...layoutProps}\n    >\n      {mapNestedFields(name, children)}\n    </FormLayout>\n  )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n  children,\n  index,\n}) => {\n  const context = useArrayFieldRow({ index })\n\n  const styles = {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    width: '100%',\n    mb: 4,\n  }\n\n  return (\n    <ArrayFieldRowProvider value={context}>\n      <chakra.div __css={styles}>{children}</chakra.div>\n    </ArrayFieldRowProvider>\n  )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<MinusIcon />}\n      aria-label=\"Remove row\"\n      {...useArrayFieldRemoveButton()}\n      {...props}\n    />\n  )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<AddIcon />}\n      aria-label=\"Add row\"\n      float=\"right\"\n      {...useArrayFieldAddButton()}\n      {...props}\n    />\n  )\n}\n\nexport interface ArrayFieldProps\n  extends ArrayFieldOptions,\n    Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n  const { children, ...containerProps } = props\n\n  return (\n    <ArrayFieldContainer {...containerProps}>\n      <ArrayFieldRows>\n        {(fields: ArrayField[]) => (\n          <>\n            {fields.map(({ id }, index: number) => (\n              <ArrayFieldRow key={id} index={index}>\n                {children}\n              </ArrayFieldRow>\n            ))}\n          </>\n        )}\n      </ArrayFieldRows>\n      <ArrayFieldAddButton />\n    </ArrayFieldContainer>\n  )\n}\n\nexport interface ArrayFieldRowsProps {\n  children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n  children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n  const { fields } = useArrayFieldContext()\n  return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n  name,\n  defaultValue,\n  keyName,\n  min,\n  max,\n  children,\n  ...fieldProps\n}) => {\n  const context = useArrayField({\n    name,\n    defaultValue,\n    keyName,\n    min,\n    max,\n  })\n\n  return (\n    <ArrayFieldProvider value={context}>\n      <BaseField name={name} {...fieldProps}>\n        {children}\n      </BaseField>\n    </ArrayFieldProvider>\n  )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n  name: string\n  children: React.ReactNode\n  columns?: ResponsiveValue<number>\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n  const { name, children, columns, spacing, ...fieldProps } = props\n  return (\n    <BaseField name={name} {...fieldProps}>\n      <FormLayout columns={columns} gridGap={spacing}>\n        {mapNestedFields(name, children)}\n      </FormLayout>\n    </BaseField>\n  )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n  schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n  return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n    ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n      <Field key={name} name={name} type={type} {...nestedFieldProps} />\n    )\n  )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n  return (\n    <FormLayout {...props}>\n      {getFieldsFromSchema(schema).map(\n        ({\n          name,\n          type,\n          defaultValue,\n          ...fieldProps\n        }: FieldProps): React.ReactNode => {\n          if (type === 'array') {\n            return (\n              <ArrayField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ArrayField>\n            )\n          } else if (type === 'object') {\n            return (\n              <ObjectField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ObjectField>\n            )\n          }\n\n          return <Field key={name} name={name} type={type} {...fieldProps} />\n        }\n      )}\n    </FormLayout>\n  )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n  useForm,\n  FormProvider,\n  UseFormProps,\n  UseFormReturn,\n  FieldValues,\n  SubmitHandler,\n  SubmitErrorHandler,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\ninterface FormOptions<TFieldValues extends FieldValues = FieldValues> {\n  /**\n   * The form schema, currently supports Yup schema only.\n   */\n  schema?: any\n  /**\n   * The submit handler.\n   */\n  onSubmit: SubmitHandler<TFieldValues>\n  /**\n   * Triggers when there are validation errors.\n   */\n  onError?: SubmitErrorHandler<TFieldValues>\n  /**\n   * Ref on the HTMLFormElement.\n   */\n  formRef?: React.MutableRefObject<HTMLFormElement>\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n  extends UseFormProps<TFieldValues>,\n    Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n    FormOptions<TFieldValues> {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FormProps<TFieldValues>,\n    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  ) => {\n    const {\n      mode = 'all',\n      resolver,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n      schema,\n      defaultValues,\n      onSubmit,\n      onError,\n      formRef,\n      children,\n      ...rest\n    } = props\n\n    const form = {\n      mode,\n      resolver,\n      defaultValues,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n    }\n\n    // @todo remove yup dependency and just use resolver prop?\n    if (schema) {\n      form.resolver = yupResolver(schema)\n    }\n\n    const methods = useForm<TFieldValues>(form)\n    const { handleSubmit } = methods\n\n    // This exposes the useForm api through the forwareded ref\n    React.useImperativeHandle(ref, () => methods, [ref, methods])\n\n    return (\n      <FormProvider {...methods}>\n        <chakra.form\n          ref={formRef}\n          onSubmit={handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {children}\n        </chakra.form>\n      </FormProvider>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FormProps<TFieldValues> & {\n    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport interface SubmitButtonProps extends ButtonProps {\n  /**\n   * Disable the submit button if the form is untouched.\n   *\n   * Change the default behavior by updating\n   * `SubmitButton.defaultProps.disableIfUntouched`\n   */\n  disableIfUntouched?: boolean\n  /**\n   * Disable the submit button if the form is invalid.\n   *\n   * Change the default behavior by updating\n   * `SubmitButton.defaultProps.disableIfInvalid`\n   */\n  disableIfInvalid?: boolean\n}\n\nexport const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(\n  (props, ref) => {\n    const { children, disableIfUntouched, disableIfInvalid, ...rest } = props\n    const { formState } = useFormContext()\n\n    const isDisabled =\n      (disableIfUntouched && !formState.isDirty) ||\n      (disableIfInvalid && !formState.isValid)\n\n    return (\n      <Button\n        type=\"submit\"\n        isLoading={formState.isSubmitting}\n        isPrimary\n        ref={ref}\n        isDisabled={isDisabled}\n        {...rest}\n      >\n        {children}\n      </Button>\n    )\n  }\n)\n\nSubmitButton.defaultProps = {\n  label: 'Submit',\n  disableIfUntouched: false,\n  disableIfInvalid: false,\n}\n","import * as React from 'react'\nimport { FieldValues, UseFormReturn } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n  schema: any\n  submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n  extends Omit<FormProps<TFieldValues>, 'schema'>,\n    AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: AutoFormProps<TFieldValues>,\n    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  ) => {\n    const { schema, submitLabel = 'Submit', ...rest } = props\n    return (\n      <Form {...rest} schema={schema} ref={ref}>\n        <FormLayout>\n          {<Fields schema={schema} />}\n          {submitLabel && <SubmitButton label={submitLabel} />}\n        </FormLayout>\n      </Form>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: AutoFormProps<TFieldValues> & {\n    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  }\n) => React.ReactElement\n","import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  Text,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n  extends FormControlProps,\n    Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n  name,\n  label,\n  placeholder,\n  ...props\n}) => {\n  const { getValues } = useFormContext()\n\n  return (\n    <FormControl {...props}>\n      {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n      <Text fontSize=\"md\">{getValues(name)}</Text>\n    </FormControl>\n  )\n}\n","import * as React from 'react'\nimport {\n  useFormContext,\n  useWatch,\n  FieldValues,\n  UseFormReturn,\n} from 'react-hook-form'\n\nexport interface DisplayIfProps<TFieldValues> {\n  children: React.ReactElement\n  name: string\n  defaultValue?: unknown\n  isDisabled?: boolean\n  isExact?: boolean\n  condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean\n}\n\nexport const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({\n  children,\n  name,\n  defaultValue,\n  isDisabled,\n  isExact,\n  condition = (value) => !!value,\n}: DisplayIfProps<TFieldValues>) => {\n  const value = useWatch({\n    name,\n    defaultValue,\n    disabled: isDisabled,\n    exact: isExact,\n  })\n  const context = useFormContext<TFieldValues>()\n  return condition(value, context) ? children : null\n}\n"],"names":["inputTypes","BaseField","props","name","label","help","variant","hideLabel","children","controlProps","error","formState","get","errors","getError","useFormContext","React","FormControl","isInvalid","FormLabel","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","withControlledInput","InputComponent","rules","inputProps","Controller","control","render","field","_ref","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","displayName","isDisabled","isReadOnly","isRequired","inputRules","required","createField","isControlled","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","tests","test","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","schemaFields","fields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","createContext","ArrayFieldProvider","useArrayFieldContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","ArrayFieldRowContainer","ArrayFieldRowFields","columns","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","key","id","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","formRef","rest","form","yupResolver","methods","useForm","handleSubmit","useImperativeHandle","FormProvider","SubmitButton","disableIfUntouched","disableIfInvalid","Button","isLoading","isSubmitting","isPrimary","isDirty","isValid","AutoForm","submitLabel","getValues","htmlFor","Text","fontSize","condition","useWatch","disabled","exact","isExact"],"mappings":"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"}

package/dist/index.modern.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{useFormContext as r,get as t,Controller as a,useFieldArray as l,useForm as n,FormProvider as i}from"react-hook-form";import{FormControl as m,FormLabel as s,Text as o,forwardRef as c,Switch as u,Checkbox as d,Box as p,FormHelperText as f,FormErrorMessage as h,useMergeRefs as E,Input as b,Textarea as y,useTheme as v,SimpleGrid as g,chakra as x}from"@chakra-ui/react";import{NumberInput as k}from"@saas-ui/number-input";import{PasswordInput as V}from"@saas-ui/password-input";import{RadioInput as C}from"@saas-ui/radio";import{PinInput as F}from"@saas-ui/pin-input";import{Select as L,NativeSelect as N}from"@saas-ui/select";import{reach as O}from"yup";import{yupResolver as w}from"@hookform/resolvers/yup";import{chakra as S,forwardRef as R}from"@chakra-ui/system";import{MinusIcon as j,AddIcon as I}from"@chakra-ui/icons";import{IconButton as U,Button as D}from"@saas-ui/button";import{createContext as M}from"@chakra-ui/react-utils";export*from"@saas-ui/input-right-button";function P(){return P=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},P.apply(this,arguments)}function $(e,r){if(null==e)return{};var t,a,l={},n=Object.keys(e);for(a=0;a<n.length;a++)r.indexOf(t=n[a])>=0||(l[t]=e[t]);return l}const A=["name","label","placeholder"],q=t=>{let{name:a,label:l}=t,n=$(t,A);const{getValues:i}=r();/*#__PURE__*/return e.createElement(m,n,l?/*#__PURE__*/e.createElement(s,{htmlFor:a},l):null,/*#__PURE__*/e.createElement(o,{fontSize:"md"},i(a)))},B=["name","label","help","variant","hideLabel","children"],T=["name","label","isDisabled","isInvalid","isReadOnly","isRequired","variant"],G=["name","rules"],_=["ref"],z=["name","rules"],H=["ref"],J=["label"],K=["label"],Q={},W="text",X=a=>{const{name:l,label:n,help:i,variant:o,hideLabel:c,children:u}=a,d=$(a,B),{formState:E}=r(),b=((e,r)=>t(r.errors,e))(l,E);/*#__PURE__*/return e.createElement(m,P({variant:o},d,{isInvalid:!!b}),n&&!c?/*#__PURE__*/e.createElement(s,{variant:o},n):null,/*#__PURE__*/e.createElement(p,null,u,!i||null!=b&&b.message?null:/*#__PURE__*/e.createElement(f,null,i),(null==b?void 0:b.message)&&/*#__PURE__*/e.createElement(h,null,null==b?void 0:b.message)))},Y=c((r,t)=>{const{type:a=W}=r,l=(e=>Q[e]||Q[W])(a);/*#__PURE__*/return e.createElement(l,P({ref:t},r))}),Z=t=>c((l,n)=>{let{name:i,rules:m}=l,s=$(l,G);const{control:o}=r();/*#__PURE__*/return e.createElement(a,{name:i,control:o,rules:m,render:r=>{let{field:{ref:a}}=r,l=$(r.field,_);/*#__PURE__*/return e.createElement(t,P({},l,s,{ref:E(n,a)}))}})}),ee=t=>c((a,l)=>{let{name:n,rules:i}=a,m=$(a,z);const{register:s}=r(),o=s(n,i),{ref:c}=o,u=$(o,H);/*#__PURE__*/return e.createElement(t,P({},u,m,{ref:E(l,c)}))}),re=(r,t,a)=>{let l;l=null!=a&&a.isControlled?Z(t):ee(t);const n=((r,{displayName:t,hideLabel:a,BaseField:l})=>{const n=c((t,n)=>{const{name:i,label:m,isDisabled:s,isInvalid:o,isReadOnly:c,isRequired:u,variant:d}=t,p=$(t,T);/*#__PURE__*/return e.createElement(l,{name:i,label:m,hideLabel:a,isDisabled:s,isInvalid:o,isReadOnly:c,isRequired:u,variant:d},/*#__PURE__*/e.createElement(r,P({ref:n,name:i,label:m},p)))});return n.displayName=t,n})(l,{displayName:`${r.split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join("")}Field`,hideLabel:null==a?void 0:a.hideLabel,BaseField:(null==a?void 0:a.BaseField)||X});return Q[r]=n,n},te=re("text",b),ae=re("number",k,{isControlled:!0}),le=re("password",V),ne=re("textarea",y),ie=re("switch",c((r,t)=>{let{label:a}=r,l=$(r,J);/*#__PURE__*/return e.createElement(u,P({ref:t},l),a)}),{isControlled:!0,hideLabel:!0}),me=re("select",L,{isControlled:!0}),se=re("checkbox",c((r,t)=>{let{label:a}=r,l=$(r,K);/*#__PURE__*/return e.createElement(d,P({ref:t},l),a)}),{hideLabel:!0}),oe=re("radio",C,{isControlled:!0}),ce=re("pin",F,{isControlled:!0}),ue=re("native-select",N,{isControlled:!0}),de=e=>{var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},pe=(e,r)=>{for(const a of e.tests){var t;if(null!=(t=a.OPTIONS)&&t.params[r])return a.OPTIONS.params[r]}},fe=e=>{const r=[];let t={};t="array"===e.type?e.innerType.fields:e.fields;for(const e in t){const a=t[e],l={};"array"===a.type&&(l.min=pe(a,"min"),l.max=pe(a,"max")),r.push(P({name:e,label:a.spec.label||e,type:de(a)},l))}return r},he=["children"],Ee=({children:r})=>/*#__PURE__*/e.createElement(x.div,null,r),be=r=>{var t,a,l;let{children:n}=r,i=$(r,he);const m=P({},null!=(t=null==(a=v().components)||null==(l=a.FormLayout)?void 0:l.defaultProps)?t:{spacing:4},i);/*#__PURE__*/return e.createElement(g,m,e.Children.map(n,r=>e.isValidElement(r)?/*#__PURE__*/e.createElement(Ee,null,r):r))},ye=(r,t)=>e.Children.map(t,t=>e.isValidElement(t)&&t.props.name?e.cloneElement(t,P({},t.props,{name:`${r}.${t.props.name}`})):t),[ve,ge]=M({name:"ArrayFieldContext"}),[xe,ke]=M({name:"ArrayFieldRowContext"}),Ve=({name:e,defaultValue:t={},keyName:a,min:n,max:i})=>{const{control:m}=r();return P({},l({control:m,name:e,keyName:a}),{name:e,defaultValue:t,min:n,max:i})},Ce=({index:t})=>{const{clearErrors:a}=r(),{name:l,remove:n,fields:i}=ge();return e.useEffect(()=>{a(l)},[]),{index:t,isFirst:0===t,isLast:t===i.length-1,name:`${l}.${t}`,remove:e.useCallback(()=>{a(l),n(t)},[t])}},Fe=()=>{const{isFirst:e,remove:r}=ke(),{min:t,fields:a}=ge();return{onClick:()=>r(),isDisabled:e&&!!(t&&a.length<=t)}},Le=()=>{const{append:e,defaultValue:r,max:t,fields:a}=ge();return{onClick:()=>e(r,{shouldFocus:!1}),isDisabled:!!(t&&a.length>=t)}},Ne=["children","columns","spacing"],Oe=["children"],we=["name","defaultValue","keyName","min","max","children"],Se=({children:r,columns:t,spacing:a,index:l})=>/*#__PURE__*/e.createElement(je,{index:l},/*#__PURE__*/e.createElement(Re,{columns:t,spacing:a},r),/*#__PURE__*/e.createElement(Ie,null)),Re=r=>{let{children:t,columns:a,spacing:l}=r,n=$(r,Ne);const{name:i}=ke();/*#__PURE__*/return e.createElement(be,P({flex:"1",columns:a,gridGap:l,mr:"2"},n),ye(i,t))},je=({children:r,index:t})=>{const a=Ce({index:t});/*#__PURE__*/return e.createElement(xe,{value:a},/*#__PURE__*/e.createElement(S.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},Ie=r=>/*#__PURE__*/e.createElement(U,P({icon:/*#__PURE__*/e.createElement(j,null),"aria-label":"Remove row"},Fe(),r)),Ue=r=>/*#__PURE__*/e.createElement(U,P({icon:/*#__PURE__*/e.createElement(I,null),"aria-label":"Add row",float:"right"},Le(),r)),De=r=>{const{children:t}=r,a=$(r,Oe);/*#__PURE__*/return e.createElement(Pe,a,/*#__PURE__*/e.createElement(Me,null,r=>/*#__PURE__*/e.createElement(e.Fragment,null,r.map(({id:r},a)=>/*#__PURE__*/e.createElement(Se,{key:r,index:a},t)))),/*#__PURE__*/e.createElement(Ue,null))},Me=({children:e})=>{const{fields:r}=ge();return e(r)},Pe=r=>{let{name:t,defaultValue:a,keyName:l,min:n,max:i,children:m}=r,s=$(r,we);const o=Ve({name:t,defaultValue:a,keyName:l,min:n,max:i});/*#__PURE__*/return e.createElement(ve,{value:o},/*#__PURE__*/e.createElement(X,P({name:t},s),m))},$e=["name","children","columns","spacing"],Ae=r=>{const{name:t,children:a,columns:l,spacing:n}=r,i=$(r,$e);/*#__PURE__*/return e.createElement(X,P({name:t},i),/*#__PURE__*/e.createElement(be,{columns:l,gridGap:n},ye(t,a)))},qe=["name","type"],Be=["schema"],Te=["name","type","defaultValue"],Ge=(r,t)=>fe(((e,r)=>O(e,r))(r,t)).map(r=>{let{name:t,type:a}=r,l=$(r,qe);/*#__PURE__*/return e.createElement(Y,P({key:t,name:t,type:a},l))}),_e=r=>{let{schema:t}=r,a=$(r,Be);/*#__PURE__*/return e.createElement(be,a,fe(t).map(r=>{let{name:a,type:l}=r,n=$(r,Te);return"array"===l?/*#__PURE__*/e.createElement(De,P({name:a},n),Ge(t,a)):"object"===l?/*#__PURE__*/e.createElement(Ae,P({name:a},n),Ge(t,a)):/*#__PURE__*/e.createElement(Y,P({key:a,name:a,type:l},n))}))},ze=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","children"],He=c((r,t)=>{const{mode:a="all",resolver:l,reValidateMode:m,shouldFocusError:s,shouldUnregister:o,shouldUseNativeValidation:c,criteriaMode:u,delayError:d,schema:p,defaultValues:f,onSubmit:h,onError:E,children:b}=r,y=$(r,ze),v={mode:a,resolver:l,defaultValues:f,reValidateMode:m,shouldFocusError:s,shouldUnregister:o,shouldUseNativeValidation:c,criteriaMode:u,delayError:d};p&&(v.resolver=w(p));const g=n(v),{handleSubmit:k}=g;/*#__PURE__*/return e.createElement(i,g,/*#__PURE__*/e.createElement(x.form,P({ref:t,onSubmit:k(h,E)},y),b))}),Je=["children"],Ke=R((t,a)=>{let{children:l}=t,n=$(t,Je);const i=r();/*#__PURE__*/return e.createElement(D,P({type:"submit",isLoading:i.formState.isSubmitting,isPrimary:!0,ref:a},n),l)}),Qe=["schema","submitLabel"],We=c((r,t)=>{const{schema:a,submitLabel:l}=r,n=$(r,Qe);/*#__PURE__*/return e.createElement(He,P({},n,{schema:a,ref:t}),/*#__PURE__*/e.createElement(be,null,/*#__PURE__*/e.createElement(_e,{schema:a}),l&&/*#__PURE__*/e.createElement(Ke,{label:l})))});We.defaultProps={submitLabel:"Submit"};export{De as ArrayField,Ue as ArrayFieldAddButton,Pe as ArrayFieldContainer,ve as ArrayFieldProvider,Ie as ArrayFieldRemoveButton,Se as ArrayFieldRow,je as ArrayFieldRowContainer,Re as ArrayFieldRowFields,xe as ArrayFieldRowProvider,Me as ArrayFieldRows,We as AutoForm,X as BaseField,se as CheckboxField,q as DisplayField,Y as Field,_e as Fields,He as Form,be as FormLayout,te as InputField,ue as NativeSelectField,ae as NumberInputField,Ae as ObjectField,le as PasswordInputFIeld,ce as PinField,oe as RadioField,me as SelectField,Ke as SubmitButton,ie as SwitchField,ne as TextareaField,re as registerFieldType,Ve as useArrayField,Le as useArrayFieldAddButton,ge as useArrayFieldContext,Fe as useArrayFieldRemoveButton,Ce as useArrayFieldRow,ke as useArrayFieldRowContext,Z as withControlledInput,ee as withUncontrolledInput};
+import*as e from"react";import{useFormContext as r,get as t,Controller as a,useFieldArray as l,useForm as n,FormProvider as i,useWatch as s}from"react-hook-form";import{FormControl as m,FormLabel as o,Text as c,forwardRef as u,Switch as d,Checkbox as f,Box as p,FormHelperText as h,FormErrorMessage as b,useMergeRefs as E,Input as y,Textarea as v,useTheme as x,SimpleGrid as g,chakra as V}from"@chakra-ui/react";import{NumberInput as k}from"@saas-ui/number-input";import{PasswordInput as I}from"@saas-ui/password-input";import{RadioInput as C}from"@saas-ui/radio";import{PinInput as F}from"@saas-ui/pin-input";import{Select as L,NativeSelect as N}from"@saas-ui/select";import{reach as O}from"yup";import{yupResolver as S}from"@hookform/resolvers/yup";import{chakra as w,forwardRef as R}from"@chakra-ui/system";import{MinusIcon as U,AddIcon as D}from"@chakra-ui/icons";import{IconButton as j,Button as M}from"@saas-ui/button";import{createContext as P}from"@chakra-ui/react-utils";export*from"@saas-ui/input-right-button";function q(){return q=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},q.apply(this,arguments)}function $(e,r){if(null==e)return{};var t,a,l={},n=Object.keys(e);for(a=0;a<n.length;a++)r.indexOf(t=n[a])>=0||(l[t]=e[t]);return l}const A=["name","label","placeholder"],B=t=>{let{name:a,label:l}=t,n=$(t,A);const{getValues:i}=r();/*#__PURE__*/return e.createElement(m,n,l?/*#__PURE__*/e.createElement(o,{htmlFor:a},l):null,/*#__PURE__*/e.createElement(c,{fontSize:"md"},i(a)))},T=["name","label","help","variant","hideLabel","children"],G=["name","label","isDisabled","isInvalid","isReadOnly","isRequired","rules","variant"],_=["name","rules"],z=["ref"],H=["name","rules"],J=["ref"],K=["label"],Q=["label"],W={},X="text",Y=a=>{const{name:l,label:n,help:i,variant:s,hideLabel:c,children:u}=a,d=$(a,T),{formState:f}=r(),E=((e,r)=>t(r.errors,e))(l,f);/*#__PURE__*/return e.createElement(m,q({variant:s},d,{isInvalid:!!E}),n&&!c?/*#__PURE__*/e.createElement(o,{variant:s},n):null,/*#__PURE__*/e.createElement(p,null,u,!i||null!=E&&E.message?null:/*#__PURE__*/e.createElement(h,null,i),(null==E?void 0:E.message)&&/*#__PURE__*/e.createElement(b,null,null==E?void 0:E.message)))},Z=u((r,t)=>{const{type:a=X}=r,l=(e=>W[e]||W[X])(a);/*#__PURE__*/return e.createElement(l,q({ref:t},r))}),ee=t=>u((l,n)=>{let{name:i,rules:s}=l,m=$(l,_);const{control:o}=r();/*#__PURE__*/return e.createElement(a,{name:i,control:o,rules:s,render:r=>{let{field:{ref:a}}=r,l=$(r.field,z);/*#__PURE__*/return e.createElement(t,q({},l,m,{ref:E(n,a)}))}})}),re=t=>u((a,l)=>{let{name:n,rules:i}=a,s=$(a,H);const{register:m}=r(),o=m(n,i),{ref:c}=o,u=$(o,J);/*#__PURE__*/return e.createElement(t,q({},u,s,{ref:E(l,c)}))}),te=(r,t,a)=>{let l;l=null!=a&&a.isControlled?ee(t):re(t);const n=((r,{displayName:t,hideLabel:a,BaseField:l})=>{const n=u((t,n)=>{const{name:i,label:s,isDisabled:m,isInvalid:o,isReadOnly:c,isRequired:u,rules:d,variant:f}=t,p=$(t,G),h=q({required:u},d);/*#__PURE__*/return e.createElement(l,{name:i,label:s,hideLabel:a,isDisabled:m,isInvalid:o,isReadOnly:c,isRequired:h.required,variant:f},/*#__PURE__*/e.createElement(r,q({ref:n,name:i,label:s,rules:h},p)))});return n.displayName=t,n})(l,{displayName:`${r.split("-").map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join("")}Field`,hideLabel:null==a?void 0:a.hideLabel,BaseField:(null==a?void 0:a.BaseField)||Y});return W[r]=n,n},ae=te("text",y),le=te("number",k,{isControlled:!0}),ne=te("password",I),ie=te("textarea",v),se=te("switch",u((r,t)=>{let{label:a}=r,l=$(r,K);/*#__PURE__*/return e.createElement(d,q({ref:t},l),a)}),{isControlled:!0,hideLabel:!0}),me=te("select",L,{isControlled:!0}),oe=te("checkbox",u((r,t)=>{let{label:a}=r,l=$(r,Q);/*#__PURE__*/return e.createElement(f,q({ref:t},l),a)}),{hideLabel:!0}),ce=te("radio",C,{isControlled:!0}),ue=te("pin",F,{isControlled:!0}),de=te("native-select",N,{isControlled:!0}),fe=e=>{var r;if(null!=(r=e.spec.meta)&&r.type)return e.spec.meta.type;switch(e.type){case"array":return"array";case"object":return"object";case"number":return"number";case"date":return"date";default:return"text"}},pe=(e,r)=>{for(const a of e.tests){var t;if(null!=(t=a.OPTIONS)&&t.params[r])return a.OPTIONS.params[r]}},he=e=>{const r=[];let t={};t="array"===e.type?e.innerType.fields:e.fields;for(const e in t){const a=t[e],l={};"array"===a.type&&(l.min=pe(a,"min"),l.max=pe(a,"max")),r.push(q({name:e,label:a.spec.label||e,type:fe(a)},l))}return r},be=["children"],Ee=({children:r})=>/*#__PURE__*/e.createElement(V.div,null,r),ye=r=>{var t,a,l;let{children:n}=r,i=$(r,be);const s=q({},null!=(t=null==(a=x().components)||null==(l=a.FormLayout)?void 0:l.defaultProps)?t:{spacing:4},i);/*#__PURE__*/return e.createElement(g,s,e.Children.map(n,r=>e.isValidElement(r)?/*#__PURE__*/e.createElement(Ee,null,r):r))},ve=(r,t)=>e.Children.map(t,t=>e.isValidElement(t)&&t.props.name?e.cloneElement(t,q({},t.props,{name:`${r}.${t.props.name}`})):t),[xe,ge]=P({name:"ArrayFieldContext"}),[Ve,ke]=P({name:"ArrayFieldRowContext"}),Ie=({name:e,defaultValue:t={},keyName:a,min:n,max:i})=>{const{control:s}=r();return q({},l({control:s,name:e,keyName:a}),{name:e,defaultValue:t,min:n,max:i})},Ce=({index:t})=>{const{clearErrors:a}=r(),{name:l,remove:n,fields:i}=ge();return e.useEffect(()=>{a(l)},[]),{index:t,isFirst:0===t,isLast:t===i.length-1,name:`${l}.${t}`,remove:e.useCallback(()=>{a(l),n(t)},[t])}},Fe=()=>{const{isFirst:e,remove:r}=ke(),{min:t,fields:a}=ge();return{onClick:()=>r(),isDisabled:e&&!!(t&&a.length<=t)}},Le=()=>{const{append:e,defaultValue:r,max:t,fields:a}=ge();return{onClick:()=>e(r,{shouldFocus:!1}),isDisabled:!!(t&&a.length>=t)}},Ne=["children","columns","spacing"],Oe=["children"],Se=["name","defaultValue","keyName","min","max","children"],we=({children:r,columns:t,spacing:a,index:l})=>/*#__PURE__*/e.createElement(Ue,{index:l},/*#__PURE__*/e.createElement(Re,{columns:t,spacing:a},r),/*#__PURE__*/e.createElement(De,null)),Re=r=>{let{children:t,columns:a,spacing:l}=r,n=$(r,Ne);const{name:i}=ke();/*#__PURE__*/return e.createElement(ye,q({flex:"1",columns:a,gridGap:l,mr:"2"},n),ve(i,t))},Ue=({children:r,index:t})=>{const a=Ce({index:t});/*#__PURE__*/return e.createElement(Ve,{value:a},/*#__PURE__*/e.createElement(w.div,{__css:{display:"flex",flexDirection:"row",alignItems:"flex-end",width:"100%",mb:4}},r))},De=r=>/*#__PURE__*/e.createElement(j,q({icon:/*#__PURE__*/e.createElement(U,null),"aria-label":"Remove row"},Fe(),r)),je=r=>/*#__PURE__*/e.createElement(j,q({icon:/*#__PURE__*/e.createElement(D,null),"aria-label":"Add row",float:"right"},Le(),r)),Me=r=>{const{children:t}=r,a=$(r,Oe);/*#__PURE__*/return e.createElement(qe,a,/*#__PURE__*/e.createElement(Pe,null,r=>/*#__PURE__*/e.createElement(e.Fragment,null,r.map(({id:r},a)=>/*#__PURE__*/e.createElement(we,{key:r,index:a},t)))),/*#__PURE__*/e.createElement(je,null))},Pe=({children:e})=>{const{fields:r}=ge();return e(r)},qe=r=>{let{name:t,defaultValue:a,keyName:l,min:n,max:i,children:s}=r,m=$(r,Se);const o=Ie({name:t,defaultValue:a,keyName:l,min:n,max:i});/*#__PURE__*/return e.createElement(xe,{value:o},/*#__PURE__*/e.createElement(Y,q({name:t},m),s))},$e=["name","children","columns","spacing"],Ae=r=>{const{name:t,children:a,columns:l,spacing:n}=r,i=$(r,$e);/*#__PURE__*/return e.createElement(Y,q({name:t},i),/*#__PURE__*/e.createElement(ye,{columns:l,gridGap:n},ve(t,a)))},Be=["name","type"],Te=["schema"],Ge=["name","type","defaultValue"],_e=(r,t)=>he(((e,r)=>O(e,r))(r,t)).map(r=>{let{name:t,type:a}=r,l=$(r,Be);/*#__PURE__*/return e.createElement(Z,q({key:t,name:t,type:a},l))}),ze=r=>{let{schema:t}=r,a=$(r,Te);/*#__PURE__*/return e.createElement(ye,a,he(t).map(r=>{let{name:a,type:l}=r,n=$(r,Ge);return"array"===l?/*#__PURE__*/e.createElement(Me,q({name:a},n),_e(t,a)):"object"===l?/*#__PURE__*/e.createElement(Ae,q({name:a},n),_e(t,a)):/*#__PURE__*/e.createElement(Z,q({key:a,name:a,type:l},n))}))},He=["mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","schema","defaultValues","onSubmit","onError","formRef","children"],Je=u((r,t)=>{const{mode:a="all",resolver:l,reValidateMode:s,shouldFocusError:m,shouldUnregister:o,shouldUseNativeValidation:c,criteriaMode:u,delayError:d,schema:f,defaultValues:p,onSubmit:h,onError:b,formRef:E,children:y}=r,v=$(r,He),x={mode:a,resolver:l,defaultValues:p,reValidateMode:s,shouldFocusError:m,shouldUnregister:o,shouldUseNativeValidation:c,criteriaMode:u,delayError:d};f&&(x.resolver=S(f));const g=n(x),{handleSubmit:k}=g;return e.useImperativeHandle(t,()=>g,[t,g]),/*#__PURE__*/e.createElement(i,g,/*#__PURE__*/e.createElement(V.form,q({ref:E,onSubmit:k(h,b)},v),y))}),Ke=["children","disableIfUntouched","disableIfInvalid"],Qe=R((t,a)=>{const{children:l,disableIfUntouched:n,disableIfInvalid:i}=t,s=$(t,Ke),{formState:m}=r();/*#__PURE__*/return e.createElement(M,q({type:"submit",isLoading:m.isSubmitting,isPrimary:!0,ref:a,isDisabled:n&&!m.isDirty||i&&!m.isValid},s),l)});Qe.defaultProps={label:"Submit",disableIfUntouched:!1,disableIfInvalid:!1};const We=["schema","submitLabel"],Xe=u((r,t)=>{const{schema:a,submitLabel:l="Submit"}=r,n=$(r,We);/*#__PURE__*/return e.createElement(Je,q({},n,{schema:a,ref:t}),/*#__PURE__*/e.createElement(ye,null,/*#__PURE__*/e.createElement(ze,{schema:a}),l&&/*#__PURE__*/e.createElement(Qe,{label:l})))}),Ye=({children:e,name:t,defaultValue:a,isDisabled:l,isExact:n,condition:i=(e=>!!e)})=>i(s({name:t,defaultValue:a,disabled:l,exact:n}),r())?e:null;export{Me as ArrayField,je as ArrayFieldAddButton,qe as ArrayFieldContainer,xe as ArrayFieldProvider,De as ArrayFieldRemoveButton,we as ArrayFieldRow,Ue as ArrayFieldRowContainer,Re as ArrayFieldRowFields,Ve as ArrayFieldRowProvider,Pe as ArrayFieldRows,Xe as AutoForm,Y as BaseField,oe as CheckboxField,B as DisplayField,Ye as DisplayIf,Z as Field,ze as Fields,Je as Form,ye as FormLayout,ae as InputField,de as NativeSelectField,le as NumberInputField,Ae as ObjectField,ne as PasswordInputFIeld,ue as PinField,ce as RadioField,me as SelectField,Qe as SubmitButton,se as SwitchField,ie as TextareaField,te as registerFieldType,Ie as useArrayField,Le as useArrayFieldAddButton,ge as useArrayFieldContext,Fe as useArrayFieldRemoveButton,Ce as useArrayFieldRow,ke as useArrayFieldRowContext,ee as withControlledInput,re as withUncontrolledInput};
 //# sourceMappingURL=index.modern.js.map

package/dist/index.modern.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.modern.js","sources":["../src/display-field.tsx","../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  Text,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n  extends FormControlProps,\n    Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n  name,\n  label,\n  placeholder,\n  ...props\n}) => {\n  const { getValues } = useFormContext()\n\n  return (\n    <FormControl {...props}>\n      {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n      <Text fontSize=\"md\">{getValues(name)}</Text>\n    </FormControl>\n  )\n}\n","import * as React from 'react'\nimport {\n  useFormContext,\n  FormState,\n  Controller,\n  get,\n  RegisterOptions,\n  FieldValues,\n  FieldName,\n  FieldPath,\n  FieldPathValue,\n} from 'react-hook-form'\n\nimport {\n  forwardRef,\n  Box,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n  Input,\n  Textarea,\n  Checkbox,\n  Switch,\n  useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport type FieldRules = Pick<\n  RegisterOptions,\n  'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n  | 'text'\n  | 'number'\n  | 'password'\n  | 'textarea'\n  | 'select'\n  | 'native-select'\n  | 'checkbox'\n  | 'radio'\n  | 'switch'\n  | 'pin'\n  | string\n\nexport interface FieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n  /**\n   * The field name\n   */\n  name: TName\n  /**\n   * The field label\n   */\n  label?: string\n  /**\n   * Hide the field label\n   */\n  hideLabel?: boolean\n  /**\n   * Field help text\n   */\n  help?: string\n  /**\n   * React hook form rules\n   */\n  rules?: Omit<\n    RegisterOptions<TFieldValues, TName>,\n    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n  >\n  /**\n   * Options used for selects and radio fields\n   */\n  options?: any\n  /**\n   * The field type\n   * Build-in types:\n   * - text\n   * - number\n   * - password\n   * - textarea\n   * - select\n   * - native-select\n   * - checkbox\n   * - radio\n   * - switch\n   * - pin\n   *\n   * Will default to a text field if there is no matching type.\n   * @default 'text'\n   */\n  type?: FieldTypes\n  /**\n   * The input placeholder\n   */\n  placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n  return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n  return get(formState.errors, name)\n}\n\nconst isTouched = (\n  name: string,\n  formState: FormState<{ [x: string]: any }>\n) => {\n  return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n  const { name, label, help, variant, hideLabel, children, ...controlProps } =\n    props\n\n  const { formState } = useFormContext()\n\n  const error = getError(name, formState)\n\n  return (\n    <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n      {label && !hideLabel ? (\n        <FormLabel variant={variant}>{label}</FormLabel>\n      ) : null}\n      <Box>\n        {children}\n        {help && !error?.message ? (\n          <FormHelperText>{help}</FormHelperText>\n        ) : null}\n        {error?.message && (\n          <FormErrorMessage>{error?.message}</FormErrorMessage>\n        )}\n      </Box>\n    </FormControl>\n  )\n}\n\nexport const Field = forwardRef<FieldProps, typeof FormControl>(\n  (props, ref) => {\n    const { type = defaultInputType } = props\n    const InputComponent = getInput(type)\n\n    return <InputComponent ref={ref} {...props} />\n  }\n)\n\ninterface CreateFieldProps {\n  displayName: string\n  hideLabel?: boolean\n  BaseField: React.FC<any>\n}\n\nconst createField = (\n  InputComponent: React.FC<any>,\n  { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n  const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n    const {\n      name,\n      label,\n      isDisabled,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      variant,\n      ...inputProps\n    } = props\n\n    return (\n      <BaseField\n        name={name}\n        label={label}\n        hideLabel={hideLabel}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isReadOnly={isReadOnly}\n        isRequired={isRequired}\n        variant={variant}\n      >\n        <InputComponent ref={ref} name={name} label={label} {...inputProps} />\n      </BaseField>\n    )\n  })\n  Field.displayName = displayName\n\n  return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { control } = useFormContext()\n\n      return (\n        <Controller\n          name={name}\n          control={control}\n          rules={rules}\n          render={({ field: { ref: _ref, ...field } }) => (\n            <InputComponent\n              {...field}\n              {...inputProps}\n              ref={useMergeRefs(ref, _ref)}\n            />\n          )}\n        />\n      )\n    }\n  )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { register } = useFormContext()\n\n      const { ref: _ref, ...field } = register(name, rules)\n\n      return (\n        <InputComponent\n          {...field}\n          {...inputProps}\n          ref={useMergeRefs(ref, _ref)}\n        />\n      )\n    }\n  )\n}\n\nexport interface RegisterFieldTypeOptions {\n  isControlled?: boolean\n  hideLabel?: boolean\n  BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n  type: string,\n  component: React.FC<any>,\n  options?: RegisterFieldTypeOptions\n) => {\n  let InputComponent\n  if (options?.isControlled) {\n    InputComponent = withControlledInput(component)\n  } else {\n    InputComponent = withUncontrolledInput(component)\n  }\n\n  const Field = createField(InputComponent, {\n    displayName: `${type\n      .split('-')\n      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n      .join('')}Field`,\n    hideLabel: options?.hideLabel,\n    BaseField: options?.BaseField || BaseField,\n  })\n\n  inputTypes[type] = Field\n\n  return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n  isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n  'switch',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Switch ref={ref} {...props}>\n        {label}\n      </Switch>\n    )\n  }),\n  {\n    isControlled: true,\n    hideLabel: true,\n  }\n)\nexport const SelectField = registerFieldType('select', Select, {\n  isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n  'checkbox',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Checkbox ref={ref} {...props}>\n        {label}\n      </Checkbox>\n    )\n  }),\n  {\n    hideLabel: true,\n  }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n  isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n  isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n  'native-select',\n  NativeSelect,\n  { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n  if (field.spec.meta?.type) {\n    return field.spec.meta.type\n  }\n\n  switch (field.type) {\n    case 'array':\n      return 'array'\n    case 'object':\n      return 'object'\n    case 'number':\n      return 'number'\n    case 'date':\n      return 'date'\n    case 'string':\n    default:\n      return 'text'\n  }\n}\n\ntype Options = {\n  min?: number\n  max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n  for (const test of field.tests) {\n    if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n  }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n  schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n  const fields = []\n\n  let schemaFields: Record<string, any> = {}\n  if (schema.type === 'array') {\n    /* @ts-ignore this is actually valid */\n    schemaFields = schema.innerType.fields\n  } else {\n    schemaFields = schema.fields\n  }\n\n  for (const name in schemaFields) {\n    const field = schemaFields[name]\n\n    const options: Options = {}\n    if (field.type === 'array') {\n      options.min = getArrayOption(field, 'min')\n      options.max = getArrayOption(field, 'max')\n    }\n\n    fields.push({\n      name,\n      label: field.spec.label || name,\n      type: getType(field),\n      ...options,\n    })\n  }\n  return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n  return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n  children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n  return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n  const theme = useTheme()\n\n  const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n    spacing: 4,\n  }\n\n  const gridProps = {\n    ...defaultProps,\n    ...props,\n  }\n\n  return (\n    <SimpleGrid {...gridProps}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return <FormLayoutItem>{child}</FormLayoutItem>\n        }\n        return child\n      })}\n    </SimpleGrid>\n  )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n  return React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.props.name) {\n      return React.cloneElement(child, {\n        ...child.props,\n        name: `${name}.${child.props.name}`,\n      })\n    }\n    return child\n  })\n}\n","import * as React from 'react'\nimport {\n  useFieldArray,\n  useFormContext,\n  UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n  /**\n   * The array field name\n   */\n  name: string\n  /**\n   * The default value for new items\n   */\n  defaultValue: Record<string, any>\n  /**\n   * Min amount of items\n   */\n  min?: number\n  /**\n   * Max amount of items\n   */\n  max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n  createContext<UseArrayFieldReturn>({\n    name: 'ArrayFieldContext',\n  })\n\nexport interface UseArrayFieldRowReturn {\n  /**\n   * Name of the array field including the index, eg 'field.0'\n   */\n  name: string\n  /**\n   * The field index\n   */\n  index: number\n  /**\n   * Remove this array item\n   */\n  remove: () => void\n  /**\n   * True if this is the first item\n   */\n  isFirst: boolean\n  /**\n   * True if this is the last item\n   */\n  isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n  createContext<UseArrayFieldRowReturn>({\n    name: 'ArrayFieldRowContext',\n  })\n\nexport interface ArrayFieldOptions {\n  /**\n   * The field name\n   */\n  name: string\n  /**\n   * Default value for new values in the array\n   */\n  defaultValue?: Record<string, any>\n  /**\n   * Default key name for rows, change this if your data uses 'id'\n   * @default \"id\"\n   */\n  keyName?: string\n  min?: number\n  max?: number\n}\n\nexport const useArrayField = ({\n  name,\n  defaultValue = {},\n  keyName,\n  min,\n  max,\n}: ArrayFieldOptions) => {\n  const { control } = useFormContext()\n  const context = useFieldArray({\n    control,\n    name,\n    keyName,\n  })\n\n  return {\n    ...context,\n    name,\n    defaultValue,\n    min,\n    max,\n  }\n}\n\nexport interface UseArrayFieldRowProps {\n  index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n  const { clearErrors } = useFormContext()\n  const { name, remove, fields } = useArrayFieldContext()\n\n  React.useEffect(() => {\n    // reset errors, to make sure min/max errors reset correctly\n    clearErrors(name)\n  }, [])\n\n  return {\n    index,\n    isFirst: index === 0,\n    isLast: index === fields.length - 1,\n    name: `${name}.${index}`,\n    remove: React.useCallback(() => {\n      clearErrors(name)\n      remove(index)\n    }, [index]),\n  }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n  const { isFirst, remove } = useArrayFieldRowContext()\n  const { min, fields } = useArrayFieldContext()\n\n  const isDisabled = isFirst && !!(min && fields.length <= min)\n\n  return {\n    onClick: () => remove(),\n    isDisabled,\n  }\n}\n\nexport const useArrayFieldAddButton = () => {\n  const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n  const isDisabled = !!(max && fields.length >= max)\n\n  return {\n    onClick: () =>\n      append(defaultValue, {\n        shouldFocus: false,\n      }),\n    isDisabled,\n  }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n  useArrayField,\n  useArrayFieldRow,\n  useArrayFieldContext,\n  ArrayFieldProvider,\n  ArrayFieldOptions,\n  ArrayFieldRowProvider,\n  useArrayFieldRowContext,\n  useArrayFieldRemoveButton,\n  useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n  id: string\n  [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n  /**\n   * The array index\n   */\n  index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n  children,\n  columns,\n  spacing,\n  index,\n}) => {\n  return (\n    <ArrayFieldRowContainer index={index}>\n      <ArrayFieldRowFields columns={columns} spacing={spacing}>\n        {children}\n      </ArrayFieldRowFields>\n      <ArrayFieldRemoveButton />\n    </ArrayFieldRowContainer>\n  )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n  children,\n  columns,\n  spacing,\n  ...layoutProps\n}) => {\n  const { name } = useArrayFieldRowContext()\n  return (\n    <FormLayout\n      flex=\"1\"\n      columns={columns}\n      gridGap={spacing}\n      mr=\"2\"\n      {...layoutProps}\n    >\n      {mapNestedFields(name, children)}\n    </FormLayout>\n  )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n  children,\n  index,\n}) => {\n  const context = useArrayFieldRow({ index })\n\n  const styles = {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    width: '100%',\n    mb: 4,\n  }\n\n  return (\n    <ArrayFieldRowProvider value={context}>\n      <chakra.div __css={styles}>{children}</chakra.div>\n    </ArrayFieldRowProvider>\n  )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<MinusIcon />}\n      aria-label=\"Remove row\"\n      {...useArrayFieldRemoveButton()}\n      {...props}\n    />\n  )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<AddIcon />}\n      aria-label=\"Add row\"\n      float=\"right\"\n      {...useArrayFieldAddButton()}\n      {...props}\n    />\n  )\n}\n\nexport interface ArrayFieldProps\n  extends ArrayFieldOptions,\n    Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n  const { children, ...containerProps } = props\n\n  return (\n    <ArrayFieldContainer {...containerProps}>\n      <ArrayFieldRows>\n        {(fields: ArrayField[]) => (\n          <>\n            {fields.map(({ id }, index: number) => (\n              <ArrayFieldRow key={id} index={index}>\n                {children}\n              </ArrayFieldRow>\n            ))}\n          </>\n        )}\n      </ArrayFieldRows>\n      <ArrayFieldAddButton />\n    </ArrayFieldContainer>\n  )\n}\n\nexport interface ArrayFieldRowsProps {\n  children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n  children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n  const { fields } = useArrayFieldContext()\n  return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n  name,\n  defaultValue,\n  keyName,\n  min,\n  max,\n  children,\n  ...fieldProps\n}) => {\n  const context = useArrayField({\n    name,\n    defaultValue,\n    keyName,\n    min,\n    max,\n  })\n\n  return (\n    <ArrayFieldProvider value={context}>\n      <BaseField name={name} {...fieldProps}>\n        {children}\n      </BaseField>\n    </ArrayFieldProvider>\n  )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n  name: string\n  children: React.ReactNode\n  columns?: ResponsiveValue<number>\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n  const { name, children, columns, spacing, ...fieldProps } = props\n  return (\n    <BaseField name={name} {...fieldProps}>\n      <FormLayout columns={columns} gridGap={spacing}>\n        {mapNestedFields(name, children)}\n      </FormLayout>\n    </BaseField>\n  )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n  schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n  return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n    ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n      <Field key={name} name={name} type={type} {...nestedFieldProps} />\n    )\n  )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n  return (\n    <FormLayout {...props}>\n      {getFieldsFromSchema(schema).map(\n        ({\n          name,\n          type,\n          defaultValue,\n          ...fieldProps\n        }: FieldProps): React.ReactNode => {\n          if (type === 'array') {\n            return (\n              <ArrayField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ArrayField>\n            )\n          } else if (type === 'object') {\n            return (\n              <ObjectField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ObjectField>\n            )\n          }\n\n          return <Field key={name} name={name} type={type} {...fieldProps} />\n        }\n      )}\n    </FormLayout>\n  )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n  useForm,\n  FormProvider,\n  UseFormProps,\n  FieldErrors,\n  FieldValues,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\ninterface FormOptions {\n  schema?: any\n  submitLabel?: false | string\n  onSubmit: (arg: any) => Promise<any> | void\n  onError?: (errors: FieldErrors) => void\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n  extends UseFormProps<TFieldValues>,\n    Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n    FormOptions {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FormProps<TFieldValues>,\n    ref: React.ForwardedRef<HTMLFormElement>\n  ) => {\n    const {\n      mode = 'all',\n      resolver,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n      schema,\n      defaultValues,\n      onSubmit,\n      onError,\n      children,\n      ...rest\n    } = props\n\n    const form = {\n      mode,\n      resolver,\n      defaultValues,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n    }\n\n    // @todo remove yup dependency and just use resolver prop?\n    if (schema) {\n      form.resolver = yupResolver(schema)\n    }\n\n    const methods = useForm<TFieldValues>(form)\n    const { handleSubmit } = methods\n\n    return (\n      <FormProvider {...methods}>\n        <chakra.form\n          ref={ref}\n          onSubmit={handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {children}\n        </chakra.form>\n      </FormProvider>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FormProps<TFieldValues> & { ref?: React.ForwardedRef<HTMLFormElement> }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport const SubmitButton = forwardRef<ButtonProps, 'button'>(\n  ({ children, ...props }, ref) => {\n    const data = useFormContext()\n\n    return (\n      <Button\n        type=\"submit\"\n        isLoading={data.formState.isSubmitting}\n        isPrimary\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </Button>\n    )\n  }\n)\n","import * as React from 'react'\nimport { FieldValues } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n  schema: any\n  submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n  extends Omit<FormProps<TFieldValues>, 'schema'>,\n    AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: AutoFormProps<TFieldValues>,\n    ref: React.ForwardedRef<HTMLFormElement>\n  ) => {\n    const { schema, submitLabel, ...rest } = props\n    return (\n      <Form {...rest} schema={schema} ref={ref}>\n        <FormLayout>\n          {<Fields schema={schema} />}\n          {submitLabel && <SubmitButton label={submitLabel} />}\n        </FormLayout>\n      </Form>\n    )\n  }\n)\n\nAutoForm.defaultProps = {\n  submitLabel: 'Submit',\n}\n"],"names":["DisplayField","_ref","name","label","props","getValues","useFormContext","React","FormControl","FormLabel","htmlFor","Text","fontSize","inputTypes","defaultInputType","BaseField","help","variant","hideLabel","children","controlProps","formState","error","get","errors","getError","isInvalid","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","InputComponent","getInput","withControlledInput","rules","inputProps","control","Controller","render","_ref3","field","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","isControlled","displayName","isDisabled","isReadOnly","isRequired","createField","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","test","tests","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","fields","schemaFields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","ArrayFieldProvider","useArrayFieldContext","createContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","columns","ArrayFieldRowContainer","ArrayFieldRowFields","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","id","key","_ref2","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","rest","form","yupResolver","methods","useForm","handleSubmit","FormProvider","SubmitButton","data","Button","isLoading","isSubmitting","isPrimary","AutoForm","submitLabel"],"mappings":"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"}
+{"version":3,"file":"index.modern.js","sources":["../src/display-field.tsx","../src/field.tsx","../src/resolvers/yup.ts","../src/layout.tsx","../src/utils.ts","../src/use-array-field.tsx","../src/array-field.tsx","../src/object-field.tsx","../src/fields.tsx","../src/form.tsx","../src/submit-button.tsx","../src/auto-form.tsx","../src/display-if.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  Text,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n} from '@chakra-ui/react'\n\nimport { FieldProps } from './field'\n\nexport interface DisplayFieldProps\n  extends FormControlProps,\n    Omit<FieldProps, 'type' | 'label'> {}\n\nexport const DisplayField: React.FC<DisplayFieldProps> = ({\n  name,\n  label,\n  placeholder,\n  ...props\n}) => {\n  const { getValues } = useFormContext()\n\n  return (\n    <FormControl {...props}>\n      {label ? <FormLabel htmlFor={name}>{label}</FormLabel> : null}\n      <Text fontSize=\"md\">{getValues(name)}</Text>\n    </FormControl>\n  )\n}\n","import * as React from 'react'\nimport {\n  useFormContext,\n  FormState,\n  Controller,\n  get,\n  RegisterOptions,\n  FieldValues,\n  FieldPath,\n} from 'react-hook-form'\n\nimport {\n  forwardRef,\n  Box,\n  FormControl,\n  FormControlProps,\n  FormLabel,\n  FormHelperText,\n  FormErrorMessage,\n  Input,\n  Textarea,\n  Checkbox,\n  Switch,\n  useMergeRefs,\n} from '@chakra-ui/react'\n\nimport { NumberInput } from '@saas-ui/number-input'\nimport { PasswordInput } from '@saas-ui/password-input'\nimport { RadioInput } from '@saas-ui/radio'\nimport { PinInput } from '@saas-ui/pin-input'\nimport { Select, NativeSelect } from '@saas-ui/select'\n\nexport interface Option {\n  value: string\n  label?: string\n  [key: string]: unknown\n}\n\nexport type FieldRules = Pick<\n  RegisterOptions,\n  'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'\n>\n\nexport type FieldTypes =\n  | 'text'\n  | 'number'\n  | 'password'\n  | 'textarea'\n  | 'select'\n  | 'native-select'\n  | 'checkbox'\n  | 'radio'\n  | 'switch'\n  | 'pin'\n  | string\n\nexport interface FieldProps<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>\n> extends Omit<FormControlProps, 'label' | 'type'> {\n  /**\n   * The field name\n   */\n  name: TName\n  /**\n   * The field label\n   */\n  label?: string\n  /**\n   * Hide the field label\n   */\n  hideLabel?: boolean\n  /**\n   * Field help text\n   */\n  help?: string\n  /**\n   * React hook form rules\n   */\n  rules?: Omit<\n    RegisterOptions<TFieldValues, TName>,\n    'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'\n  >\n  /**\n   * Options used for selects and radio fields\n   */\n  options?: Option[]\n  /**\n   * The field type\n   * Build-in types:\n   * - text\n   * - number\n   * - password\n   * - textarea\n   * - select\n   * - native-select\n   * - checkbox\n   * - radio\n   * - switch\n   * - pin\n   *\n   * Will default to a text field if there is no matching type.\n   * @default 'text'\n   */\n  type?: FieldTypes\n  /**\n   * The input placeholder\n   */\n  placeholder?: string\n}\n\nconst inputTypes: Record<FieldTypes, any> = {}\n\nconst defaultInputType = 'text'\n\nconst getInput = (type: string) => {\n  return inputTypes[type] || inputTypes[defaultInputType]\n}\n\nconst getError = (name: string, formState: FormState<{ [x: string]: any }>) => {\n  return get(formState.errors, name)\n}\n\nconst isTouched = (\n  name: string,\n  formState: FormState<{ [x: string]: any }>\n) => {\n  return get(formState.touchedFields, name)\n}\n\nexport const BaseField: React.FC<FieldProps> = (props) => {\n  const { name, label, help, variant, hideLabel, children, ...controlProps } =\n    props\n\n  const { formState } = useFormContext()\n\n  const error = getError(name, formState)\n\n  return (\n    <FormControl variant={variant} {...controlProps} isInvalid={!!error}>\n      {label && !hideLabel ? (\n        <FormLabel variant={variant}>{label}</FormLabel>\n      ) : null}\n      <Box>\n        {children}\n        {help && !error?.message ? (\n          <FormHelperText>{help}</FormHelperText>\n        ) : null}\n        {error?.message && (\n          <FormErrorMessage>{error?.message}</FormErrorMessage>\n        )}\n      </Box>\n    </FormControl>\n  )\n}\nexport const Field = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FieldProps<TFieldValues> & {\n      [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.\n    },\n    ref: React.ForwardedRef<typeof FormControl>\n  ) => {\n    const { type = defaultInputType } = props\n    const InputComponent = getInput(type)\n\n    return <InputComponent ref={ref} {...props} />\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FieldProps<TFieldValues> & {\n    [key: string]: unknown\n  } & {\n    ref?: React.ForwardedRef<typeof FormControl>\n  }\n) => React.ReactElement\n\ninterface CreateFieldProps {\n  displayName: string\n  hideLabel?: boolean\n  BaseField: React.FC<any>\n}\n\nconst createField = (\n  InputComponent: React.FC<any>,\n  { displayName, hideLabel, BaseField }: CreateFieldProps\n) => {\n  const Field = forwardRef<FieldProps, typeof FormControl>((props, ref) => {\n    const {\n      name,\n      label,\n      isDisabled,\n      isInvalid,\n      isReadOnly,\n      isRequired,\n      rules,\n      variant,\n      ...inputProps\n    } = props\n\n    const inputRules = {\n      required: isRequired,\n      ...rules,\n    }\n\n    return (\n      <BaseField\n        name={name}\n        label={label}\n        hideLabel={hideLabel}\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isReadOnly={isReadOnly}\n        isRequired={inputRules.required}\n        variant={variant}\n      >\n        <InputComponent\n          ref={ref}\n          name={name}\n          label={label}\n          rules={inputRules}\n          {...inputProps}\n        />\n      </BaseField>\n    )\n  })\n  Field.displayName = displayName\n\n  return Field\n}\n\nexport const withControlledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { control } = useFormContext()\n\n      return (\n        <Controller\n          name={name}\n          control={control}\n          rules={rules}\n          render={({ field: { ref: _ref, ...field } }) => (\n            <InputComponent\n              {...field}\n              {...inputProps}\n              ref={useMergeRefs(ref, _ref)}\n            />\n          )}\n        />\n      )\n    }\n  )\n}\n\nexport const withUncontrolledInput = (InputComponent: any) => {\n  return forwardRef<FieldProps, typeof InputComponent>(\n    ({ name, rules, ...inputProps }, ref) => {\n      const { register } = useFormContext()\n\n      const { ref: _ref, ...field } = register(name, rules)\n\n      return (\n        <InputComponent\n          {...field}\n          {...inputProps}\n          ref={useMergeRefs(ref, _ref)}\n        />\n      )\n    }\n  )\n}\n\nexport interface RegisterFieldTypeOptions {\n  isControlled?: boolean\n  hideLabel?: boolean\n  BaseField?: React.FC<any>\n}\n\n/**\n * Register a new field type\n * @param type The name for this field in kebab-case, eg `email` or `array-field`\n * @param component The React component\n * @param options\n * @param options.isControlled Set this to true if this is a controlled field.\n * @param options.hideLabel Hide the field label, for example for checkbox or switch field.\n */\nexport const registerFieldType = (\n  type: string,\n  component: React.FC<any>,\n  options?: RegisterFieldTypeOptions\n) => {\n  let InputComponent\n  if (options?.isControlled) {\n    InputComponent = withControlledInput(component)\n  } else {\n    InputComponent = withUncontrolledInput(component)\n  }\n\n  const Field = createField(InputComponent, {\n    displayName: `${type\n      .split('-')\n      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))\n      .join('')}Field`,\n    hideLabel: options?.hideLabel,\n    BaseField: options?.BaseField || BaseField,\n  })\n\n  inputTypes[type] = Field\n\n  return Field\n}\n\n// @todo Consider not registering all fields by default to lower the package size and computations.\n// Not all types may be required in a project.\nexport const InputField = registerFieldType('text', Input)\nexport const NumberInputField = registerFieldType('number', NumberInput, {\n  isControlled: true,\n})\nexport const PasswordInputFIeld = registerFieldType('password', PasswordInput)\nexport const TextareaField = registerFieldType('textarea', Textarea)\nexport const SwitchField = registerFieldType(\n  'switch',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Switch ref={ref} {...props}>\n        {label}\n      </Switch>\n    )\n  }),\n  {\n    isControlled: true,\n    hideLabel: true,\n  }\n)\nexport const SelectField = registerFieldType('select', Select, {\n  isControlled: true,\n})\nexport const CheckboxField = registerFieldType(\n  'checkbox',\n  forwardRef(({ label, ...props }: { label?: string }, ref) => {\n    return (\n      <Checkbox ref={ref} {...props}>\n        {label}\n      </Checkbox>\n    )\n  }),\n  {\n    hideLabel: true,\n  }\n)\nexport const RadioField = registerFieldType('radio', RadioInput, {\n  isControlled: true,\n})\nexport const PinField = registerFieldType('pin', PinInput, {\n  isControlled: true,\n})\nexport const NativeSelectField = registerFieldType(\n  'native-select',\n  NativeSelect,\n  { isControlled: true }\n)\n","import { SchemaOf, AnySchema, reach } from 'yup'\nexport { yupResolver } from '@hookform/resolvers/yup'\n\nimport { FieldProps } from '../field'\n\n// @TODO get proper typings for the schema fields\n\nconst getType = (field: any) => {\n  if (field.spec.meta?.type) {\n    return field.spec.meta.type\n  }\n\n  switch (field.type) {\n    case 'array':\n      return 'array'\n    case 'object':\n      return 'object'\n    case 'number':\n      return 'number'\n    case 'date':\n      return 'date'\n    case 'string':\n    default:\n      return 'text'\n  }\n}\n\ntype Options = {\n  min?: number\n  max?: number\n}\n\nconst getArrayOption = (field: any, name: string) => {\n  for (const test of field.tests) {\n    if (test.OPTIONS?.params[name]) return test.OPTIONS.params[name]\n  }\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (\n  schema: SchemaOf<AnySchema>\n): FieldProps[] => {\n  const fields = []\n\n  let schemaFields: Record<string, any> = {}\n  if (schema.type === 'array') {\n    /* @ts-ignore this is actually valid */\n    schemaFields = schema.innerType.fields\n  } else {\n    schemaFields = schema.fields\n  }\n\n  for (const name in schemaFields) {\n    const field = schemaFields[name]\n\n    const options: Options = {}\n    if (field.type === 'array') {\n      options.min = getArrayOption(field, 'min')\n      options.max = getArrayOption(field, 'max')\n    }\n\n    fields.push({\n      name,\n      label: field.spec.label || name,\n      type: getType(field),\n      ...options,\n    })\n  }\n  return fields\n}\n\nexport const getNestedSchema = (schema: SchemaOf<AnySchema>, path: string) => {\n  return reach(schema, path)\n}\n","import * as React from 'react'\n\nimport { chakra, SimpleGrid, SimpleGridProps, useTheme } from '@chakra-ui/react'\n\nexport type FormLayoutProps = SimpleGridProps\n\ninterface FormLayoutItemProps {\n  children: React.ReactNode\n}\n\nconst FormLayoutItem: React.FC<FormLayoutItemProps> = ({ children }) => {\n  return <chakra.div>{children}</chakra.div>\n}\n\n/**\n * FormLayout\n *\n * Renders form items in a `SimpleGrid`\n * @see https://chakra-ui.com/docs/layout/simple-grid\n */\nexport const FormLayout = ({ children, ...props }: FormLayoutProps) => {\n  const theme = useTheme()\n\n  const defaultProps = theme.components?.FormLayout?.defaultProps ?? {\n    spacing: 4,\n  }\n\n  const gridProps = {\n    ...defaultProps,\n    ...props,\n  }\n\n  return (\n    <SimpleGrid {...gridProps}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return <FormLayoutItem>{child}</FormLayoutItem>\n        }\n        return child\n      })}\n    </SimpleGrid>\n  )\n}\n","import * as React from 'react'\n\nexport const mapNestedFields = (name: string, children: React.ReactNode) => {\n  return React.Children.map(children, (child) => {\n    if (React.isValidElement(child) && child.props.name) {\n      return React.cloneElement(child, {\n        ...child.props,\n        name: `${name}.${child.props.name}`,\n      })\n    }\n    return child\n  })\n}\n","import * as React from 'react'\nimport {\n  useFieldArray,\n  useFormContext,\n  UseFieldArrayReturn,\n} from 'react-hook-form'\n\nimport { createContext } from '@chakra-ui/react-utils'\n\nexport interface UseArrayFieldReturn extends UseFieldArrayReturn {\n  /**\n   * The array field name\n   */\n  name: string\n  /**\n   * The default value for new items\n   */\n  defaultValue: Record<string, any>\n  /**\n   * Min amount of items\n   */\n  min?: number\n  /**\n   * Max amount of items\n   */\n  max?: number\n}\n\nexport const [ArrayFieldProvider, useArrayFieldContext] =\n  createContext<UseArrayFieldReturn>({\n    name: 'ArrayFieldContext',\n  })\n\nexport interface UseArrayFieldRowReturn {\n  /**\n   * Name of the array field including the index, eg 'field.0'\n   */\n  name: string\n  /**\n   * The field index\n   */\n  index: number\n  /**\n   * Remove this array item\n   */\n  remove: () => void\n  /**\n   * True if this is the first item\n   */\n  isFirst: boolean\n  /**\n   * True if this is the last item\n   */\n  isLast: boolean\n}\n\nexport const [ArrayFieldRowProvider, useArrayFieldRowContext] =\n  createContext<UseArrayFieldRowReturn>({\n    name: 'ArrayFieldRowContext',\n  })\n\nexport interface ArrayFieldOptions {\n  /**\n   * The field name\n   */\n  name: string\n  /**\n   * Default value for new values in the array\n   */\n  defaultValue?: Record<string, any>\n  /**\n   * Default key name for rows, change this if your data uses 'id'\n   * @default \"id\"\n   */\n  keyName?: string\n  min?: number\n  max?: number\n}\n\nexport const useArrayField = ({\n  name,\n  defaultValue = {},\n  keyName,\n  min,\n  max,\n}: ArrayFieldOptions) => {\n  const { control } = useFormContext()\n  const context = useFieldArray({\n    control,\n    name,\n    keyName,\n  })\n\n  return {\n    ...context,\n    name,\n    defaultValue,\n    min,\n    max,\n  }\n}\n\nexport interface UseArrayFieldRowProps {\n  index: number\n}\n\nexport const useArrayFieldRow = ({ index }: UseArrayFieldRowProps) => {\n  const { clearErrors } = useFormContext()\n  const { name, remove, fields } = useArrayFieldContext()\n\n  React.useEffect(() => {\n    // reset errors, to make sure min/max errors reset correctly\n    clearErrors(name)\n  }, [])\n\n  return {\n    index,\n    isFirst: index === 0,\n    isLast: index === fields.length - 1,\n    name: `${name}.${index}`,\n    remove: React.useCallback(() => {\n      clearErrors(name)\n      remove(index)\n    }, [index]),\n  }\n}\n\nexport const useArrayFieldRemoveButton = () => {\n  const { isFirst, remove } = useArrayFieldRowContext()\n  const { min, fields } = useArrayFieldContext()\n\n  const isDisabled = isFirst && !!(min && fields.length <= min)\n\n  return {\n    onClick: () => remove(),\n    isDisabled,\n  }\n}\n\nexport const useArrayFieldAddButton = () => {\n  const { append, defaultValue, max, fields } = useArrayFieldContext()\n\n  const isDisabled = !!(max && fields.length >= max)\n\n  return {\n    onClick: () =>\n      append(defaultValue, {\n        shouldFocus: false,\n      }),\n    isDisabled,\n  }\n}\n","import * as React from 'react'\n\nimport { chakra, ResponsiveValue } from '@chakra-ui/system'\n\nimport { AddIcon, MinusIcon } from '@chakra-ui/icons'\nimport { IconButton, ButtonProps } from '@saas-ui/button'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nimport {\n  useArrayField,\n  useArrayFieldRow,\n  useArrayFieldContext,\n  ArrayFieldProvider,\n  ArrayFieldOptions,\n  ArrayFieldRowProvider,\n  useArrayFieldRowContext,\n  useArrayFieldRemoveButton,\n  useArrayFieldAddButton,\n} from './use-array-field'\n\ninterface ArrayField {\n  id: string\n  [key: string]: unknown\n}\n\ninterface ArrayFieldRowProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n  /**\n   * The array index\n   */\n  index: number\n}\n\nexport const ArrayFieldRow: React.FC<ArrayFieldRowProps> = ({\n  children,\n  columns,\n  spacing,\n  index,\n}) => {\n  return (\n    <ArrayFieldRowContainer index={index}>\n      <ArrayFieldRowFields columns={columns} spacing={spacing}>\n        {children}\n      </ArrayFieldRowFields>\n      <ArrayFieldRemoveButton />\n    </ArrayFieldRowContainer>\n  )\n}\n\nexport interface ArrayFieldRowFieldsProps {\n  /**\n   * Amount of field columns\n   */\n  columns?: ResponsiveValue<number>\n  /**\n   * Spacing between fields\n   */\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ArrayFieldRowFields: React.FC<ArrayFieldRowFieldsProps> = ({\n  children,\n  columns,\n  spacing,\n  ...layoutProps\n}) => {\n  const { name } = useArrayFieldRowContext()\n  return (\n    <FormLayout\n      flex=\"1\"\n      columns={columns}\n      gridGap={spacing}\n      mr=\"2\"\n      {...layoutProps}\n    >\n      {mapNestedFields(name, children)}\n    </FormLayout>\n  )\n}\n\nexport const ArrayFieldRowContainer: React.FC<ArrayFieldRowProps> = ({\n  children,\n  index,\n}) => {\n  const context = useArrayFieldRow({ index })\n\n  const styles = {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'flex-end',\n    width: '100%',\n    mb: 4,\n  }\n\n  return (\n    <ArrayFieldRowProvider value={context}>\n      <chakra.div __css={styles}>{children}</chakra.div>\n    </ArrayFieldRowProvider>\n  )\n}\n\nexport const ArrayFieldRemoveButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<MinusIcon />}\n      aria-label=\"Remove row\"\n      {...useArrayFieldRemoveButton()}\n      {...props}\n    />\n  )\n}\n\nexport const ArrayFieldAddButton: React.FC<ButtonProps> = (props) => {\n  return (\n    <IconButton\n      icon={<AddIcon />}\n      aria-label=\"Add row\"\n      float=\"right\"\n      {...useArrayFieldAddButton()}\n      {...props}\n    />\n  )\n}\n\nexport interface ArrayFieldProps\n  extends ArrayFieldOptions,\n    Omit<FieldProps, 'defaultValue'> {}\n\nexport const ArrayField: React.FC<ArrayFieldProps> = (props) => {\n  const { children, ...containerProps } = props\n\n  return (\n    <ArrayFieldContainer {...containerProps}>\n      <ArrayFieldRows>\n        {(fields: ArrayField[]) => (\n          <>\n            {fields.map(({ id }, index: number) => (\n              <ArrayFieldRow key={id} index={index}>\n                {children}\n              </ArrayFieldRow>\n            ))}\n          </>\n        )}\n      </ArrayFieldRows>\n      <ArrayFieldAddButton />\n    </ArrayFieldContainer>\n  )\n}\n\nexport interface ArrayFieldRowsProps {\n  children: (fields: ArrayField[]) => React.ReactElement | null\n}\n\nexport const ArrayFieldRows = ({\n  children,\n}: ArrayFieldRowsProps): React.ReactElement | null => {\n  const { fields } = useArrayFieldContext()\n  return children(fields)\n}\n\nexport const ArrayFieldContainer: React.FC<ArrayFieldProps> = ({\n  name,\n  defaultValue,\n  keyName,\n  min,\n  max,\n  children,\n  ...fieldProps\n}) => {\n  const context = useArrayField({\n    name,\n    defaultValue,\n    keyName,\n    min,\n    max,\n  })\n\n  return (\n    <ArrayFieldProvider value={context}>\n      <BaseField name={name} {...fieldProps}>\n        {children}\n      </BaseField>\n    </ArrayFieldProvider>\n  )\n}\n","import * as React from 'react'\nimport { ResponsiveValue } from '@chakra-ui/system'\n\nimport { FormLayout } from './layout'\nimport { BaseField, FieldProps } from './field'\n\nimport { mapNestedFields } from './utils'\n\nexport interface ObjectFieldProps extends FieldProps {\n  name: string\n  children: React.ReactNode\n  columns?: ResponsiveValue<number>\n  spacing?: ResponsiveValue<string | number>\n}\n\nexport const ObjectField: React.FC<ObjectFieldProps> = (props) => {\n  const { name, children, columns, spacing, ...fieldProps } = props\n  return (\n    <BaseField name={name} {...fieldProps}>\n      <FormLayout columns={columns} gridGap={spacing}>\n        {mapNestedFields(name, children)}\n      </FormLayout>\n    </BaseField>\n  )\n}\n","import * as React from 'react'\nimport { getFieldsFromSchema, getNestedSchema } from './resolvers/yup'\n\nimport { FormLayout } from './layout'\nimport { Field, FieldProps } from './field'\n\nimport { ArrayField } from './array-field'\nimport { ObjectField } from './object-field'\n\nexport interface FieldsProps {\n  schema: any\n}\n\nconst getNestedFields = (schema: any, name: string) => {\n  return getFieldsFromSchema(getNestedSchema(schema, name)).map(\n    ({ name, type, ...nestedFieldProps }: FieldProps): React.ReactNode => (\n      <Field key={name} name={name} type={type} {...nestedFieldProps} />\n    )\n  )\n}\n\nexport const Fields: React.FC<FieldsProps> = ({ schema, ...props }) => {\n  return (\n    <FormLayout {...props}>\n      {getFieldsFromSchema(schema).map(\n        ({\n          name,\n          type,\n          defaultValue,\n          ...fieldProps\n        }: FieldProps): React.ReactNode => {\n          if (type === 'array') {\n            return (\n              <ArrayField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ArrayField>\n            )\n          } else if (type === 'object') {\n            return (\n              <ObjectField name={name} {...fieldProps}>\n                {getNestedFields(schema, name)}\n              </ObjectField>\n            )\n          }\n\n          return <Field key={name} name={name} type={type} {...fieldProps} />\n        }\n      )}\n    </FormLayout>\n  )\n}\n","import * as React from 'react'\n\nimport { chakra, HTMLChakraProps, forwardRef } from '@chakra-ui/react'\n\nimport {\n  useForm,\n  FormProvider,\n  UseFormProps,\n  UseFormReturn,\n  FieldValues,\n  SubmitHandler,\n  SubmitErrorHandler,\n} from 'react-hook-form'\n\nimport { yupResolver } from './resolvers/yup'\n\ninterface FormOptions<TFieldValues extends FieldValues = FieldValues> {\n  /**\n   * The form schema, currently supports Yup schema only.\n   */\n  schema?: any\n  /**\n   * The submit handler.\n   */\n  onSubmit: SubmitHandler<TFieldValues>\n  /**\n   * Triggers when there are validation errors.\n   */\n  onError?: SubmitErrorHandler<TFieldValues>\n  /**\n   * Ref on the HTMLFormElement.\n   */\n  formRef?: React.MutableRefObject<HTMLFormElement>\n}\n\nexport interface FormProps<TFieldValues extends FieldValues = FieldValues>\n  extends UseFormProps<TFieldValues>,\n    Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,\n    FormOptions<TFieldValues> {}\n\n/**\n * @todo Figure out how to pass down FieldValues to all Field components,\n * if at all possible.\n */\nexport const Form = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: FormProps<TFieldValues>,\n    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  ) => {\n    const {\n      mode = 'all',\n      resolver,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n      schema,\n      defaultValues,\n      onSubmit,\n      onError,\n      formRef,\n      children,\n      ...rest\n    } = props\n\n    const form = {\n      mode,\n      resolver,\n      defaultValues,\n      reValidateMode,\n      shouldFocusError,\n      shouldUnregister,\n      shouldUseNativeValidation,\n      criteriaMode,\n      delayError,\n    }\n\n    // @todo remove yup dependency and just use resolver prop?\n    if (schema) {\n      form.resolver = yupResolver(schema)\n    }\n\n    const methods = useForm<TFieldValues>(form)\n    const { handleSubmit } = methods\n\n    // This exposes the useForm api through the forwareded ref\n    React.useImperativeHandle(ref, () => methods, [ref, methods])\n\n    return (\n      <FormProvider {...methods}>\n        <chakra.form\n          ref={formRef}\n          onSubmit={handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {children}\n        </chakra.form>\n      </FormProvider>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: FormProps<TFieldValues> & {\n    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  }\n) => React.ReactElement\n","import * as React from 'react'\n\nimport { useFormContext } from 'react-hook-form'\n\nimport { Button, ButtonProps } from '@saas-ui/button'\n\nimport { forwardRef } from '@chakra-ui/system'\n\nexport interface SubmitButtonProps extends ButtonProps {\n  /**\n   * Disable the submit button if the form is untouched.\n   *\n   * Change the default behavior by updating\n   * `SubmitButton.defaultProps.disableIfUntouched`\n   */\n  disableIfUntouched?: boolean\n  /**\n   * Disable the submit button if the form is invalid.\n   *\n   * Change the default behavior by updating\n   * `SubmitButton.defaultProps.disableIfInvalid`\n   */\n  disableIfInvalid?: boolean\n}\n\nexport const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(\n  (props, ref) => {\n    const { children, disableIfUntouched, disableIfInvalid, ...rest } = props\n    const { formState } = useFormContext()\n\n    const isDisabled =\n      (disableIfUntouched && !formState.isDirty) ||\n      (disableIfInvalid && !formState.isValid)\n\n    return (\n      <Button\n        type=\"submit\"\n        isLoading={formState.isSubmitting}\n        isPrimary\n        ref={ref}\n        isDisabled={isDisabled}\n        {...rest}\n      >\n        {children}\n      </Button>\n    )\n  }\n)\n\nSubmitButton.defaultProps = {\n  label: 'Submit',\n  disableIfUntouched: false,\n  disableIfInvalid: false,\n}\n","import * as React from 'react'\nimport { FieldValues, UseFormReturn } from 'react-hook-form'\nimport { forwardRef } from '@chakra-ui/react'\n\nimport { Form, FormProps } from './form'\n\nimport { FormLayout } from './layout'\nimport { Fields } from './fields'\nimport { SubmitButton } from './submit-button'\n\ninterface AutoFormOptions {\n  schema: any\n  submitLabel?: false | string\n}\n\nexport interface AutoFormProps<TFieldValues extends FieldValues>\n  extends Omit<FormProps<TFieldValues>, 'schema'>,\n    AutoFormOptions {}\n\nexport const AutoForm = forwardRef(\n  <TFieldValues extends FieldValues = FieldValues>(\n    props: AutoFormProps<TFieldValues>,\n    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  ) => {\n    const { schema, submitLabel = 'Submit', ...rest } = props\n    return (\n      <Form {...rest} schema={schema} ref={ref}>\n        <FormLayout>\n          {<Fields schema={schema} />}\n          {submitLabel && <SubmitButton label={submitLabel} />}\n        </FormLayout>\n      </Form>\n    )\n  }\n) as <TFieldValues extends FieldValues>(\n  props: AutoFormProps<TFieldValues> & {\n    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>\n  }\n) => React.ReactElement\n","import * as React from 'react'\nimport {\n  useFormContext,\n  useWatch,\n  FieldValues,\n  UseFormReturn,\n} from 'react-hook-form'\n\nexport interface DisplayIfProps<TFieldValues> {\n  children: React.ReactElement\n  name: string\n  defaultValue?: unknown\n  isDisabled?: boolean\n  isExact?: boolean\n  condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean\n}\n\nexport const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({\n  children,\n  name,\n  defaultValue,\n  isDisabled,\n  isExact,\n  condition = (value) => !!value,\n}: DisplayIfProps<TFieldValues>) => {\n  const value = useWatch({\n    name,\n    defaultValue,\n    disabled: isDisabled,\n    exact: isExact,\n  })\n  const context = useFormContext<TFieldValues>()\n  return condition(value, context) ? children : null\n}\n"],"names":["DisplayField","_ref","name","label","props","getValues","useFormContext","React","FormControl","FormLabel","htmlFor","Text","fontSize","inputTypes","defaultInputType","BaseField","help","variant","hideLabel","children","controlProps","formState","error","get","errors","getError","isInvalid","Box","message","FormHelperText","FormErrorMessage","Field","forwardRef","ref","type","InputComponent","getInput","withControlledInput","rules","inputProps","control","Controller","render","_ref3","field","useMergeRefs","withUncontrolledInput","register","registerFieldType","component","options","isControlled","displayName","isDisabled","isReadOnly","isRequired","inputRules","required","createField","split","map","part","charAt","toUpperCase","slice","join","InputField","Input","NumberInputField","NumberInput","PasswordInputFIeld","PasswordInput","TextareaField","Textarea","SwitchField","Switch","SelectField","Select","CheckboxField","Checkbox","RadioField","RadioInput","PinField","PinInput","NativeSelectField","NativeSelect","getType","spec","meta","_field$spec$meta","getArrayOption","test","tests","OPTIONS","_test$OPTIONS","params","getFieldsFromSchema","schema","fields","schemaFields","innerType","min","max","push","FormLayoutItem","chakra","div","FormLayout","gridProps","useTheme","components","_theme$components","_theme$components$For2","defaultProps","spacing","SimpleGrid","Children","child","isValidElement","mapNestedFields","cloneElement","ArrayFieldProvider","useArrayFieldContext","createContext","ArrayFieldRowProvider","useArrayFieldRowContext","useArrayField","defaultValue","keyName","useFieldArray","useArrayFieldRow","index","clearErrors","remove","useEffect","isFirst","isLast","length","useCallback","useArrayFieldRemoveButton","onClick","useArrayFieldAddButton","append","shouldFocus","ArrayFieldRow","columns","ArrayFieldRowContainer","ArrayFieldRowFields","ArrayFieldRemoveButton","layoutProps","flex","gridGap","mr","context","value","__css","display","flexDirection","alignItems","width","mb","IconButton","icon","MinusIcon","ArrayFieldAddButton","AddIcon","float","ArrayField","containerProps","ArrayFieldContainer","ArrayFieldRows","id","key","_ref2","fieldProps","ObjectField","getNestedFields","path","reach","getNestedSchema","nestedFieldProps","Fields","Form","mode","resolver","reValidateMode","shouldFocusError","shouldUnregister","shouldUseNativeValidation","criteriaMode","delayError","defaultValues","onSubmit","onError","formRef","rest","form","yupResolver","methods","useForm","handleSubmit","useImperativeHandle","FormProvider","SubmitButton","disableIfUntouched","disableIfInvalid","Button","isLoading","isSubmitting","isPrimary","isDirty","isValid","AutoForm","submitLabel","DisplayIf","isExact","condition","useWatch","disabled","exact"],"mappings":"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"}

package/dist/submit-button.d.ts

@@ -1,3 +1,19 @@
 import { ButtonProps } from '@saas-ui/button';
-export declare const SubmitButton: import("@chakra-ui/system").ComponentWithAs<"button", ButtonProps>;
+export interface SubmitButtonProps extends ButtonProps {
+    /**
+     * Disable the submit button if the form is untouched.
+     *
+     * Change the default behavior by updating
+     * `SubmitButton.defaultProps.disableIfUntouched`
+     */
+    disableIfUntouched?: boolean;
+    /**
+     * Disable the submit button if the form is invalid.
+     *
+     * Change the default behavior by updating
+     * `SubmitButton.defaultProps.disableIfInvalid`
+     */
+    disableIfInvalid?: boolean;
+}
+export declare const SubmitButton: import("@chakra-ui/system").ComponentWithAs<"button", SubmitButtonProps>;
 //# sourceMappingURL=submit-button.d.ts.map

package/dist/submit-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"submit-button.d.ts","sourceRoot":"","sources":["../src/submit-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAIrD,eAAO,MAAM,YAAY,oEAgBxB,CAAA"}
+{"version":3,"file":"submit-button.d.ts","sourceRoot":"","sources":["../src/submit-button.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAU,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAIrD,MAAM,WAAW,iBAAkB,SAAQ,WAAW;IACpD;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,eAAO,MAAM,YAAY,0EAsBxB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/forms",
-  "version": "0.2.3",
+  "version": "0.3.1",
   "description": "Theme and components agnostic SaasProvider",
   "source": "src/index.ts",
   "exports": {
@@ -65,13 +65,13 @@
     "@chakra-ui/icons": "^1.1.1",
     "@chakra-ui/react-utils": "^1.2.1",
     "@hookform/resolvers": "^2.8.3",
-    "@saas-ui/button": "0.2.0",
-    "@saas-ui/input-right-button": "0.2.0",
-    "@saas-ui/number-input": "0.2.0",
-    "@saas-ui/password-input": "0.2.0",
-    "@saas-ui/pin-input": "0.2.0",
-    "@saas-ui/radio": "0.2.0",
-    "@saas-ui/select": "0.2.0",
+    "@saas-ui/button": "0.2.1",
+    "@saas-ui/input-right-button": "0.2.1",
+    "@saas-ui/number-input": "0.2.2",
+    "@saas-ui/password-input": "0.2.1",
+    "@saas-ui/pin-input": "0.2.1",
+    "@saas-ui/radio": "0.2.1",
+    "@saas-ui/select": "0.2.1",
     "react-hook-form": "^7.22.0"
   },
   "peerDependencies": {

package/src/auto-form.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { FieldValues } from 'react-hook-form'
+import { FieldValues, UseFormReturn } from 'react-hook-form'
 import { forwardRef } from '@chakra-ui/react'
 
 import { Form, FormProps } from './form'
@@ -20,9 +20,9 @@ export interface AutoFormProps<TFieldValues extends FieldValues>
 export const AutoForm = forwardRef(
   <TFieldValues extends FieldValues = FieldValues>(
     props: AutoFormProps<TFieldValues>,
-    ref: React.ForwardedRef<HTMLFormElement>
+    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>
   ) => {
-    const { schema, submitLabel, ...rest } = props
+    const { schema, submitLabel = 'Submit', ...rest } = props
     return (
       <Form {...rest} schema={schema} ref={ref}>
         <FormLayout>
@@ -32,8 +32,8 @@ export const AutoForm = forwardRef(
       </Form>
     )
   }
-)
-
-AutoForm.defaultProps = {
-  submitLabel: 'Submit',
-}
+) as <TFieldValues extends FieldValues>(
+  props: AutoFormProps<TFieldValues> & {
+    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>
+  }
+) => React.ReactElement

package/src/display-if.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import {
+  useFormContext,
+  useWatch,
+  FieldValues,
+  UseFormReturn,
+} from 'react-hook-form'
+
+export interface DisplayIfProps<TFieldValues> {
+  children: React.ReactElement
+  name: string
+  defaultValue?: unknown
+  isDisabled?: boolean
+  isExact?: boolean
+  condition?: (value: unknown, context: UseFormReturn<TFieldValues>) => boolean
+}
+
+export const DisplayIf = <TFieldValues extends FieldValues = FieldValues>({
+  children,
+  name,
+  defaultValue,
+  isDisabled,
+  isExact,
+  condition = (value) => !!value,
+}: DisplayIfProps<TFieldValues>) => {
+  const value = useWatch({
+    name,
+    defaultValue,
+    disabled: isDisabled,
+    exact: isExact,
+  })
+  const context = useFormContext<TFieldValues>()
+  return condition(value, context) ? children : null
+}

package/src/field.tsx

@@ -6,9 +6,7 @@ import {
   get,
   RegisterOptions,
   FieldValues,
-  FieldName,
   FieldPath,
-  FieldPathValue,
 } from 'react-hook-form'
 
 import {
@@ -32,6 +30,12 @@ import { RadioInput } from '@saas-ui/radio'
 import { PinInput } from '@saas-ui/pin-input'
 import { Select, NativeSelect } from '@saas-ui/select'
 
+export interface Option {
+  value: string
+  label?: string
+  [key: string]: unknown
+}
+
 export type FieldRules = Pick<
   RegisterOptions,
   'required' | 'min' | 'max' | 'maxLength' | 'minLength' | 'pattern'
@@ -80,7 +84,7 @@ export interface FieldProps<
   /**
    * Options used for selects and radio fields
    */
-  options?: any
+  options?: Option[]
   /**
    * The field type
    * Build-in types:
@@ -149,15 +153,25 @@ export const BaseField: React.FC<FieldProps> = (props) => {
     </FormControl>
   )
 }
-
-export const Field = forwardRef<FieldProps, typeof FormControl>(
-  (props, ref) => {
+export const Field = forwardRef(
+  <TFieldValues extends FieldValues = FieldValues>(
+    props: FieldProps<TFieldValues> & {
+      [key: string]: unknown // Make sure attributes of custom components work. Need to change this to a global typedef at some point.
+    },
+    ref: React.ForwardedRef<typeof FormControl>
+  ) => {
     const { type = defaultInputType } = props
     const InputComponent = getInput(type)
 
     return <InputComponent ref={ref} {...props} />
   }
-)
+) as <TFieldValues extends FieldValues>(
+  props: FieldProps<TFieldValues> & {
+    [key: string]: unknown
+  } & {
+    ref?: React.ForwardedRef<typeof FormControl>
+  }
+) => React.ReactElement
 
 interface CreateFieldProps {
   displayName: string
@@ -177,10 +191,16 @@ const createField = (
       isInvalid,
       isReadOnly,
       isRequired,
+      rules,
       variant,
       ...inputProps
     } = props
 
+    const inputRules = {
+      required: isRequired,
+      ...rules,
+    }
+
     return (
       <BaseField
         name={name}
@@ -189,10 +209,16 @@ const createField = (
         isDisabled={isDisabled}
         isInvalid={isInvalid}
         isReadOnly={isReadOnly}
-        isRequired={isRequired}
+        isRequired={inputRules.required}
         variant={variant}
       >
-        <InputComponent ref={ref} name={name} label={label} {...inputProps} />
+        <InputComponent
+          ref={ref}
+          name={name}
+          label={label}
+          rules={inputRules}
+          {...inputProps}
+        />
       </BaseField>
     )
   })

package/src/form.tsx

@@ -6,23 +6,37 @@ import {
   useForm,
   FormProvider,
   UseFormProps,
-  FieldErrors,
+  UseFormReturn,
   FieldValues,
+  SubmitHandler,
+  SubmitErrorHandler,
 } from 'react-hook-form'
 
 import { yupResolver } from './resolvers/yup'
 
-interface FormOptions {
+interface FormOptions<TFieldValues extends FieldValues = FieldValues> {
+  /**
+   * The form schema, currently supports Yup schema only.
+   */
   schema?: any
-  submitLabel?: false | string
-  onSubmit: (arg: any) => Promise<any> | void
-  onError?: (errors: FieldErrors) => void
+  /**
+   * The submit handler.
+   */
+  onSubmit: SubmitHandler<TFieldValues>
+  /**
+   * Triggers when there are validation errors.
+   */
+  onError?: SubmitErrorHandler<TFieldValues>
+  /**
+   * Ref on the HTMLFormElement.
+   */
+  formRef?: React.MutableRefObject<HTMLFormElement>
 }
 
 export interface FormProps<TFieldValues extends FieldValues = FieldValues>
   extends UseFormProps<TFieldValues>,
     Omit<HTMLChakraProps<'form'>, 'onSubmit' | 'onError'>,
-    FormOptions {}
+    FormOptions<TFieldValues> {}
 
 /**
  * @todo Figure out how to pass down FieldValues to all Field components,
@@ -31,7 +45,7 @@ export interface FormProps<TFieldValues extends FieldValues = FieldValues>
 export const Form = forwardRef(
   <TFieldValues extends FieldValues = FieldValues>(
     props: FormProps<TFieldValues>,
-    ref: React.ForwardedRef<HTMLFormElement>
+    ref: React.ForwardedRef<UseFormReturn<TFieldValues>>
   ) => {
     const {
       mode = 'all',
@@ -46,6 +60,7 @@ export const Form = forwardRef(
       defaultValues,
       onSubmit,
       onError,
+      formRef,
       children,
       ...rest
     } = props
@@ -70,10 +85,13 @@ export const Form = forwardRef(
     const methods = useForm<TFieldValues>(form)
     const { handleSubmit } = methods
 
+    // This exposes the useForm api through the forwareded ref
+    React.useImperativeHandle(ref, () => methods, [ref, methods])
+
     return (
       <FormProvider {...methods}>
         <chakra.form
-          ref={ref}
+          ref={formRef}
           onSubmit={handleSubmit(onSubmit, onError)}
           {...rest}
         >
@@ -83,5 +101,7 @@ export const Form = forwardRef(
     )
   }
 ) as <TFieldValues extends FieldValues>(
-  props: FormProps<TFieldValues> & { ref?: React.ForwardedRef<HTMLFormElement> }
+  props: FormProps<TFieldValues> & {
+    ref?: React.ForwardedRef<UseFormReturn<TFieldValues>>
+  }
 ) => React.ReactElement

package/src/index.ts

@@ -8,6 +8,7 @@ export * from './submit-button'
 export * from './array-field'
 export * from './use-array-field'
 export * from './object-field'
+export * from './display-if'
 
 export * from '@saas-ui/input-right-button'
 

package/src/submit-button.tsx

@@ -6,20 +6,49 @@ import { Button, ButtonProps } from '@saas-ui/button'
 
 import { forwardRef } from '@chakra-ui/system'
 
-export const SubmitButton = forwardRef<ButtonProps, 'button'>(
-  ({ children, ...props }, ref) => {
-    const data = useFormContext()
+export interface SubmitButtonProps extends ButtonProps {
+  /**
+   * Disable the submit button if the form is untouched.
+   *
+   * Change the default behavior by updating
+   * `SubmitButton.defaultProps.disableIfUntouched`
+   */
+  disableIfUntouched?: boolean
+  /**
+   * Disable the submit button if the form is invalid.
+   *
+   * Change the default behavior by updating
+   * `SubmitButton.defaultProps.disableIfInvalid`
+   */
+  disableIfInvalid?: boolean
+}
+
+export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
+  (props, ref) => {
+    const { children, disableIfUntouched, disableIfInvalid, ...rest } = props
+    const { formState } = useFormContext()
+
+    const isDisabled =
+      (disableIfUntouched && !formState.isDirty) ||
+      (disableIfInvalid && !formState.isValid)
 
     return (
       <Button
         type="submit"
-        isLoading={data.formState.isSubmitting}
+        isLoading={formState.isSubmitting}
         isPrimary
         ref={ref}
-        {...props}
+        isDisabled={isDisabled}
+        {...rest}
       >
         {children}
       </Button>
     )
   }
 )
+
+SubmitButton.defaultProps = {
+  label: 'Submit',
+  disableIfUntouched: false,
+  disableIfInvalid: false,
+}