@react-fabric/form 1.0.0-beta.61 → 1.0.0-beta.63

package/dist/types/input/ArrayInput.d.ts

@@ -7,7 +7,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * append to label end
      */
-    appendLabel?: JSX.Element | string | number | boolean;
+    appendLabel?: React.ReactElement | string | number | boolean;
     /**
      * info label at bottom
      */
@@ -48,6 +48,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
         index: number;
         name: string;
         item: T;
+        onChange: (val: false | undefined | T) => void;
     }) => React.ReactNode);
     /**
      * add item button label
@@ -55,13 +56,13 @@ export interface ArrayInputProps<T extends AnyObject = string> {
     addLabel?: string;
     buttonPosition?: "top" | "bottom" | "both";
     arrayRef?: Ref<{
-        addItem: (item: T) => void;
+        addItem: (item: false | undefined | T | Promise<false | undefined | T>) => void;
         removeItem: (idx: number) => void;
     }>;
     /**
      * add new item
      */
-    onAdd?: () => T;
+    onAdd?: () => false | undefined | T | Promise<false | undefined | T>;
     /**
      * on item remove
      */
@@ -103,7 +104,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
  * It also supports drag-and-drop sorting using `@dnd-kit/core` and `@dnd-kit/sortable` for a better user experience when reordering items.
  *
  * @param {ArrayInputProps<T>} props - The properties for the ArrayInput component.
- * @returns {JSX.Element} The rendered ArrayInput component.
+ * @returns {React.ReactElement} The rendered ArrayInput component.
  *
  * @example
  * ```jsx

package/dist/types/input/AvatarInput.d.ts

@@ -46,6 +46,6 @@ export interface Props extends RefProp {
  * It also provides a way to remove the uploaded file and shows upload progress.
  *
  * @param {Props} props - The properties for the AvatarInput component.
- * @returns {JSX.Element} - The rendered AvatarInput component.
+ * @returns {React.ReactElement} - The rendered AvatarInput component.
  */
-export declare const AvatarInput: ({ size, avatarName, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarInput: ({ size, avatarName, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, onChange, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Checkbox.d.ts

@@ -3,7 +3,7 @@ interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * checkbox label
      */
-    label?: JSX.Element | string;
+    label?: React.ReactElement | string;
     /**
      * checked
      */
@@ -49,7 +49,7 @@ interface CheckboxProps extends RefProp<HTMLInputElement> {
  * It also provides an error icon to indicate validation errors.
  *
  * @param {CheckboxProps} props - The properties for the Checkbox component.
- * @returns {JSX.Element} The rendered Checkbox component.
+ * @returns {React.ReactElement} The rendered Checkbox component.
  */
 export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, required, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/input/ColorInput.d.ts

@@ -18,6 +18,6 @@ export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange"
  * and handling the color selection state.
  *
  * @param {ColorInputProps} props - The properties for the ColorInput component.
- * @returns {JSX.Element} - The rendered ColorInput component.
+ * @returns {React.ReactElement} - The rendered ColorInput component.
  */
 export declare const ColorInput: ({ ref, required, disabled, readOnly, invalid, error, value, showPicker, defaultColor, onBlur, onFocus, onChange, noOutline, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/ColorPicker.d.ts

@@ -12,6 +12,10 @@ export interface ColorProps {
      * hide alpha value
      */
     hideAlpha?: boolean;
+    /**
+     * show only swatches, hide the color picker
+     */
+    picker?: "default" | "swatches";
     /**
      * color value
      */
@@ -27,7 +31,7 @@ export interface ColorProps {
  * The component uses the `react-color` library for the color picker functionality.
  *
  * @param {ColorProps} props - The properties for the ColorPicker component.
- * @returns {JSX.Element} The rendered ColorPicker component.
+ * @returns {React.ReactElement} The rendered ColorPicker component.
  *
  * @see {@link https://react-color.github.io/react-color/} for more details on the color picker library.
  */

package/dist/types/input/DateInput.d.ts

@@ -23,6 +23,6 @@ export interface DateProps extends InputProps<string>, RefProp<HTMLInputElement>
  * The component supports both date and datetime types, with appropriate formatting.
  *
  * @param {DateProps} props - The properties for the DateInput component.
- * @returns {JSX.Element} - The rendered DateInput component.
+ * @returns {React.ReactElement} - The rendered DateInput component.
  */
 export declare const DateInput: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, error, type, onBlur, onFocus, onChange, onEnterPressed, format, min, max, ...rest }: DateProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Field.d.ts

@@ -7,7 +7,7 @@ export interface FieldProps extends ChildrenProp, CssProp {
     /**
      * append to label end
      */
-    appendLabel?: JSX.Element | string | number | boolean;
+    appendLabel?: React.ReactElement | string | number | boolean;
     /**
      * info label at bottom
      */

package/dist/types/input/File.d.ts

@@ -21,6 +21,6 @@ export interface FileInputProps extends InputProps<AnyObject>, RefProp<HTMLInput
  * It handles file changes, invalid states, and read-only or disabled states.
  *
  * @param {FileInputProps} props - The properties for the FileInput component.
- * @returns {JSX.Element} - The rendered FileInput component.
+ * @returns {React.ReactElement} - The rendered FileInput component.
  */
 export declare const FileInput: ({ ref, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, name, accept, showList, multiple, onChange, onEnterPressed, ...rest }: FileInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Hidden.d.ts

@@ -4,17 +4,9 @@ interface Props {
      */
     name?: string;
     /**
-     * hidden value will fire change for form update
+     * hidden input value
      */
-    hiddenValue?: AnyObject;
-    /**
-     * default avatar image
-     */
-    defaultValue?: string;
-    /**
-     * form onChange handler
-     */
-    onChange?: (value: AnyObject) => void;
+    value?: AnyObject;
 }
 /**
  * Hidden input component to handle hidden values in forms.
@@ -22,7 +14,7 @@ interface Props {
  * This is useful for cases where you need to update the form state without user interaction.
  *
  * @param {Object} props - Component properties.
- * @returns {JSX.Element} The rendered hidden input field and error icon.
+ * @returns {React.ReactElement} The rendered hidden input field and error icon.
  */
-export declare const HiddenInput: ({ hiddenValue, defaultValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const HiddenInput: ({ invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/input/Input.d.ts

@@ -12,6 +12,6 @@ export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
  * The component uses a wrapper to handle the clear button and styling, and it supports deferred value updates to optimize performance.
  *
  * @param {TextInputProps} props - The properties for the text input component.
- * @returns {JSX.Element} - A JSX element representing the text input field.
+ * @returns {React.ReactElement} - A JSX element representing the text input field.
  */
 export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, error, monospace, type, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Number.d.ts

@@ -20,6 +20,6 @@ export interface NumberProps extends InputProps<number>, RefProp<HTMLInputElemen
  * It also includes a clear button to reset the input value.
  *
  * @param {NumberProps} props - The properties for the Number input component.
- * @returns {JSX.Element} The rendered Number input component.
+ * @returns {React.ReactElement} The rendered Number input component.
  */
 export declare const Number: ({ ref, value, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, name, min, max, step, onBlur, onFocus, onChange, onEnterPressed, ...rest }: NumberProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Password.d.ts

@@ -14,6 +14,6 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
  * Password input component with optional strength meter and toggle visibility.
  *
  * @param {PasswordProps} props - The properties for the Password component.
- * @returns {JSX.Element} The rendered Password input component.
+ * @returns {React.ReactElement} The rendered Password input component.
  */
 export declare const Password: ({ ref, value, name, strength, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, showToggle, onBlur, onFocus, onChange, onEnterPressed, ...rest }: PasswordProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Radio.d.ts

@@ -4,7 +4,7 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
     /**
      * radio label
      */
-    label?: JSX.Element | string;
+    label?: React.ReactElement | string;
     /**
      * value
      */
@@ -45,6 +45,6 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
  * It supports disabled and invalid states, and allows for custom width.
  *
  * @param {RadioProps} props - The properties for the Radio component.
- * @returns {JSX.Element} The rendered Radio input component.
+ * @returns {React.ReactElement} The rendered Radio input component.
  */
 export declare const Radio: ({ ref, name, label, value, invalid, disabled, error, width, icon, iconChecked, onChange, ...rest }: RadioProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/RadioGroup.d.ts

@@ -8,7 +8,7 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
     /**
      * append to label end
      */
-    appendLabel?: JSX.Element | string | number | boolean;
+    appendLabel?: React.ReactElement | string | number | boolean;
     /**
      * field info
      */
@@ -37,6 +37,10 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
      * vertical orientation
      */
     vertical?: boolean;
+    /**
+     * value
+     */
+    value?: string | number;
     /**
      * change handler
      */
@@ -48,6 +52,6 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
  * The component supports inline and vertical orientations, and can handle change events.
  *
  * @param {RadioGroupProps} props - The properties for the RadioGroup component.
- * @returns {JSX.Element} The rendered RadioGroup component.
+ * @returns {React.ReactElement} The rendered RadioGroup component.
  */
-export declare const RadioGroup: ({ children, name, className, optionWidth, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ children, name, className, optionWidth, vertical, value, onChange, ...rest }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/RangeSlider.d.ts

@@ -62,6 +62,6 @@ export interface RangeProps extends Omit<InputProps<[number, number]>, "placehol
  * The component is designed to be flexible and customizable, allowing for various configurations.
  *
  * @param {RangeProps} props - The properties for the RangeSlider component.
- * @returns {JSX.Element} The rendered RangeSlider component.
+ * @returns {React.ReactElement} The rendered RangeSlider component.
  */
 export declare const RangeSlider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, format, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, invalid, ...rest }: RangeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Search.d.ts

@@ -25,6 +25,6 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
  * and handling search actions with a debounce mechanism.
  *
  * @param {SearchProps} props - The properties for the Search component.
- * @returns {JSX.Element} The rendered Search input component.
+ * @returns {React.ReactElement} The rendered Search input component.
  */
 export declare const Search: ({ ref, value, name, invalid, readOnly, disabled, required, searching, placeholder, defaultValue, autoFocus, hideHandle, allowClear, searchOnChange, onBlur, onFocus, onSearch, onChange, onEnterPressed, ...rest }: SearchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Slider.d.ts

@@ -64,6 +64,6 @@ export interface SliderProps extends Omit<InputProps<number>, "placeholder" | "a
  * It also supports deferred value updates for smoother interactions.
  *
  * @param {SliderProps} props - The properties for the Slider component.
- * @returns {JSX.Element} The rendered Slider component.
+ * @returns {React.ReactElement} The rendered Slider component.
  */
 export declare const Slider: ({ error, name, value, step, min, max, height, color, vertical, showLabels, showValue, minLabel, maxLabel, ranges, useInfinity, format, invalid, autoFocus, disabled, readOnly, onBlur, onChange, onEnterPressed, onFocus, onSlide, ...rest }: SliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Switch.d.ts

@@ -3,7 +3,7 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
     /**
      * Switch label
      */
-    label?: JSX.Element | string;
+    label?: React.ReactElement | string;
     /**
      * checked
      */
@@ -49,6 +49,6 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
  * It supports disabled and invalid states, and handles change events.
  *
  * @param {SwitchProps} props - The properties for the Switch component.
- * @returns {JSX.Element} The rendered Switch input component.
+ * @returns {React.ReactElement} The rendered Switch input component.
  */
 export declare const Switch: ({ ref, label, checked, invalid, disabled, error, width, color, name, onLabel, offLabel, onLabelColor, offLabelColor, defaultColor, required, onChange, ...rest }: SwitchProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/input/Textarea.d.ts

@@ -26,6 +26,6 @@ export interface TextareaProps extends InputProps, RefProp<HTMLTextAreaElement>
  * providing a clear interface for text input with optional validation and accessibility features.
  *
  * @param {TextareaProps} props - The properties for the Textarea component.
- * @returns {JSX.Element} The rendered Textarea component.
+ * @returns {React.ReactElement} The rendered Textarea component.
  */
 export declare const Textarea: ({ ref, value, name, invalid, readOnly, disabled, required, placeholder, defaultValue, autoFocus, rows, maxRows, variableRows, expandable, onBlur, onFocus, onChange, onEnterPressed, ...rest }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/AutoComplete.d.ts

@@ -18,7 +18,7 @@ type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "
  * It supports multiple selections, history suggestions, and custom styling.
  *
  * @param {AutoCompleteProps} props - The properties for the AutoComplete component.
- * @returns {JSX.Element} The rendered AutoComplete component.
+ * @returns {React.ReactElement} The rendered AutoComplete component.
  */
 export declare const AutoComplete: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, expandOnEdit, error, history, multiple, onChange, onSelect, onInput, onFocus, onBlur, onQuery, onEnterPressed, ...rest }: AutoCompleteProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/select/DualList.d.ts

@@ -47,6 +47,6 @@ export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<
  * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
  *
  * @param {DualListProps<T>} props - The properties for the DualList component.
- * @returns {JSX.Element} The rendered DualList component.
+ * @returns {React.ReactElement} The rendered DualList component.
  */
 export declare const DualList: <T extends AnyObject = string>({ ref, value, options, emptyDisplay, groupProperty, height, labelProperty, valueProperty, renderer, onChange, name, invalid, readOnly, disabled, placeholder, autoFocus, error, ...rest }: DualListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/List.d.ts

@@ -5,7 +5,7 @@ import { type SelectProps } from "../types";
  * and custom rendering of options.
  *
  * @param {SelectProps<T>} props - The properties for the List component.
- * @returns {JSX.Element} The rendered List component.
+ * @returns {React.ReactElement} The rendered List component.
  */
 export declare const List: <T extends AnyObject = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, infoProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
     height?: string | number;

package/dist/types/select/Select.d.ts

@@ -5,6 +5,6 @@ import { type SelectProps } from "../types";
  * and custom rendering of options.
  *
  * @param {SelectProps<T>} props - The properties for the Select component.
- * @returns {JSX.Element} The rendered Select component.
+ * @returns {React.ReactElement} The rendered Select component.
  */
 export declare const Select: <T extends AnyObject = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, infoProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/types/index.d.ts

@@ -39,15 +39,15 @@ export interface InputProps<V = string> extends TestProps {
     /**
      * append to label end
      */
-    appendLabel?: JSX.Element | string | number | boolean;
+    appendLabel?: React.ReactElement | string | number | boolean;
     /**
      *
      */
-    decorateStart?: JSX.Element | string | number | boolean;
+    decorateStart?: React.ReactElement | string | number | boolean;
     /**
      *
      */
-    decorateEnd?: JSX.Element | string | number | boolean;
+    decorateEnd?: React.ReactElement | string | number | boolean;
     decorateEndShowWhenEmpty?: boolean;
     decorateEndHideWhenEmpty?: boolean;
     /**

package/dist/types/types/schema.d.ts

@@ -97,7 +97,7 @@ export interface SchemaEditorProps {
     /**
      * footer actions
      */
-    children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
+    children?: Elements<React.ReactElement> | Array<Elements<React.ReactElement>>;
     onChange?: (schema: FormSchema) => void;
     onSubmit?: (schema: FormSchema) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.61",
+  "version": "1.0.0-beta.63",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,28 +39,28 @@
     "@dnd-kit/modifiers": "~9.0.0",
     "@dnd-kit/sortable": "~10.0.0",
     "@dnd-kit/utilities": "~3.2.2",
-    "@floating-ui/react": "~0.27.16",
+    "@floating-ui/react": "~0.27.19",
     "@hookform/resolvers": "~5.2.2",
-    "@react-fabric/core": "^1.0.0-beta.61",
-    "@react-fabric/date": "^1.0.0-beta.61",
-    "@react-fabric/utilities": "^1.0.0-beta.61",
+    "@react-fabric/core": "^1.0.0-beta.63",
+    "@react-fabric/date": "^1.0.0-beta.63",
+    "@react-fabric/utilities": "^1.0.0-beta.63",
+    "chroma-js": "~3.2.0",
     "classnames": "~2.5.1",
-    "color": "~5.0.2",
     "react-color": "~2.19.3",
-    "react-hook-form": "~7.65.0"
+    "react-hook-form": "~7.71.2"
   },
   "peerDependencies": {
-    "i18next": "~25.6.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "react-i18next": "~16.2.1"
+    "i18next": "~25.8.18",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4",
+    "react-i18next": "~16.5.8"
   },
   "devDependencies": {
     "@types/react-color": "~3.0.13"
   },
   "engines": {
-    "node": ">=18.12.0",
-    "npm": ">=8.19.0"
+    "node": ">=22.18.0",
+    "npm": ">=10.8.0"
   },
-  "gitHead": "a0b0c571bf9c189fa3355bbc3b896ecc4b9d6a04"
+  "gitHead": "6e0652b15c6384fbc316842862572e21299a5466"
 }

package/src/builder/FileField.tsx

@@ -37,6 +37,7 @@ export const FileField = ({
   accept,
   value,
   fileUrl,
+  onChange,
   multiple,
   invalid,
   error,
@@ -46,20 +47,21 @@ export const FileField = ({
   inline?: boolean;
   invalid?: boolean;
   error?: AnyObject;
+  onChange?: (value: any) => void;
   fileUrl?: (path: string) => string;
   uploadHandler: UploadHandler;
 }) => {
   const { t } = useTranslation();
-  const { pending, files, list, upload, remove } = useFileUploader(
+  const { pending, files, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
     value,
-    multiple,
+    { multiple, onChange },
   );
 
   return (
     <Fragment>
       <Field plain inline={inline} label={label}>
-        <HiddenInput hiddenValue={multiple ? list : list?.[0]} {...rest} />
+        <HiddenInput value={multiple ? files : files?.[0]} {...rest} />
       </Field>
       <Tooltip
         color="danger-200"

package/src/builder/SchemaEditor.tsx

@@ -37,7 +37,7 @@ import { SchemaArrayForm } from "./components/SchemaArrayForm";
  * It provides a form interface to modify schema properties dynamically.
  *
  * @param {SchemaEditorProps} props - The properties for the SchemaEditor component.
- * @returns {JSX.Element} The rendered SchemaEditor component.
+ * @returns {React.ReactElement} The rendered SchemaEditor component.
  */
 export const SchemaEditor = ({
   schemaDef,
@@ -70,7 +70,7 @@ export const SchemaEditor = ({
         acceptableTypes={acceptableTypes ?? Object.values(DATA_TYPES)}
       />
       {children && (
-        <Footer flex className="border-t bg-base px-6 py-2">
+        <Footer flex className="border-t bg-default px-6 py-2">
           {children}
         </Footer>
       )}

package/src/builder/components/SchemaArrayForm.tsx

@@ -33,7 +33,6 @@ import { AddSchemaFields } from "./AddSchemaFields";
 import { SchemaField } from "./SchemaField";
 
 // Need to disable prop-types lint due to uknown lint error
-/* eslint-disable react/prop-types */
 export const SchemaArrayForm = ({
   dynamic,
   acceptableTypes,
@@ -75,7 +74,6 @@ export const SchemaArrayForm = ({
   }, []);
 
   const Wrapper = useCallback(
-    // eslint-disable-next-line @typescript-eslint/promise-function-async
     ({ children }: { children: React.ReactNode }) => {
       if (dynamic) {
         // pass id list to dnd context
@@ -149,7 +147,7 @@ export const SchemaArrayForm = ({
           />
         ))}
       </Content>
-      {AddModal}
+      <AddModal />
     </Wrapper>
   );
 };

package/src/builder/components/SchemaField.tsx

@@ -147,7 +147,7 @@ export const SchemaField = ({
         <Footer
           flex
           justify="end"
-          className="sticky bottom-0 border-t bg-base px-6 py-2"
+          className="sticky bottom-0 border-t bg-default px-6 py-2"
         >
           <Button variant="link" onClick={props.onClose}>
             Close
@@ -229,7 +229,7 @@ export const SchemaField = ({
         </div>
         <div className="flex flex-col gap-1 pb-4">
           <Controller name={`${field}.id`}>
-            <HiddenInput hiddenValue={id} />
+            <HiddenInput value={id} />
           </Controller>
           <Controller name={`${field}.datatype`}>
             <Select
@@ -284,7 +284,7 @@ export const SchemaField = ({
                   />
                 )}
               </Field>
-              {OptionModal}
+              <OptionModal />
             </Fragment>
           )}
           {type === DATA_TYPES.FILE && (

package/src/form/Controller.tsx

@@ -76,7 +76,7 @@ export interface ControllerProps {
  * to the child component, allowing for proper focus management and DOM access.
  *
  * @param {ControllerProps} props - The properties for the Controller component.
- * @returns {JSX.Element} The rendered Controller component.
+ * @returns {React.ReactElement} The rendered Controller component.
  *
  * @example
  * ```jsx

package/src/form/Form.tsx

@@ -37,7 +37,6 @@ import {
   useFormContext,
   useForm as useFormHook,
   useWatch,
-  type DefaultValues,
   type FormState,
   type Path,
   type Resolver,
@@ -70,7 +69,11 @@ export interface FormProps<K extends KeyValue = KeyValue> {
   /**
    * default data values
    */
-  defaultValues?: K;
+  defaultValues?: K | Promise<K>;
+  /**
+   * reset values on defaultValues change (workaround for using fetch result)
+   */
+  resetOnChange?: boolean;
   /**
    * change callback
    */
@@ -89,7 +92,7 @@ const DEFAULT_SUBMIT = () => undefined;
  * It supports nested form structures and allows for custom validation schemas using Yup.
  *
  * @param {FormProps<K>} props - The properties for the Form component.
- * @returns {JSX.Element} The rendered Form component.
+ * @returns {React.ReactElement} The rendered Form component.
  *
  * @example
  * ```jsx
@@ -115,6 +118,7 @@ export const Form = <K extends KeyValue>({
   formRef,
   resolver,
   children,
+  resetOnChange,
   defaultValues = EMPTY_OBJECT as K,
   onSubmit = DEFAULT_SUBMIT,
   onChange,
@@ -124,7 +128,7 @@ export const Form = <K extends KeyValue>({
   const form = useFormHook<K>({
     shouldFocusError: true,
     resolver,
-    defaultValues: defaultValues as DefaultValues<K>,
+    defaultValues: async () => await Promise.resolve(defaultValues),
   });
 
   const [, startTransition] = useTransition();
@@ -136,16 +140,19 @@ export const Form = <K extends KeyValue>({
     return () => subscription.unsubscribe();
   }, [form.watch, changeHandler]);
 
-  const handleReset = useCallback(
-    (reset: AnyObject = {}) => {
-      form.reset(reset);
-      form.clearErrors();
-      ref.current
-        ?.querySelector<HTMLElement>("[auto-focus], input, textarea")
-        ?.focus();
-    },
-    [defaultValues],
-  );
+  const handleReset = useCallback((reset: AnyObject = {}) => {
+    form.reset(reset);
+    form.clearErrors();
+    ref.current
+      ?.querySelector<HTMLElement>("[auto-focus], input, textarea")
+      ?.focus();
+  }, []);
+
+  useEffect(() => {
+    if (resetOnChange) {
+      handleReset(defaultValues);
+    }
+  }, [defaultValues, resetOnChange]);
 
   useImperativeHandle(
     formRef,
@@ -204,32 +211,3 @@ export const Form = <K extends KeyValue>({
     </FormProvider>
   );
 };
-
-export const useForm = <K extends KeyValue = KeyValue>() => {
-  const {
-    formState,
-    getValues,
-    setValue,
-    watch,
-    reset,
-    resetField,
-    setError,
-    setFocus,
-  } = useFormContext<K>();
-  const values = useWatch<K>();
-
-  return {
-    values: {
-      ...values,
-      ...getValues(),
-    },
-    formState,
-    getValues,
-    setValue,
-    watch,
-    reset,
-    resetField,
-    setError,
-    setFocus,
-  };
-};