@react-fabric/form 1.0.0-beta.9 → 1.0.2

package/dist/types/form/Form.d.ts

@@ -1,6 +1,8 @@
-import { type yup } from "@react-fabric/utilities";
 import { type PropsWithChildren, type Ref } from "react";
-import { type FormState } from "react-hook-form";
+import { type FormState, type Resolver } from "react-hook-form";
+type NestedKeyOf<T extends object> = {
+    [K in keyof T & (string | number)]: T[K] extends object ? `${K}` | `${K}.${NestedKeyOf<T[K]>}` : K;
+}[keyof T & (string | number)];
 export interface FormRef<K extends KeyValue> {
     state: FormState<K>;
     reset: () => void;
@@ -8,19 +10,24 @@ export interface FormRef<K extends KeyValue> {
     submit: () => void;
     validate: () => Promise<boolean>;
     getValues: () => K;
-    setValue: (key: keyof K, value: AnyObject) => void;
+    setValue: (key: NestedKeyOf<K>, value: unknown) => void;
     setValues: (values: K) => void;
 }
 export interface FormProps<K extends KeyValue = KeyValue> {
     formRef?: Ref<FormRef<K>>;
     /**
-     * form data schema
+     * react-hook-form resolver for validation
+     * @see {@link https://react-hook-form.com/ts#Resolver}
      */
-    schema?: yup.ObjectSchema<K>;
+    resolver?: Resolver<K>;
     /**
      * default data values
      */
-    defaultValues?: K;
+    defaultValues?: K | Promise<K>;
+    /**
+     * reset values on defaultValues change (workaround for using fetch result)
+     */
+    resetOnChange?: boolean;
     /**
      * change callback
      */
@@ -30,4 +37,28 @@ export interface FormProps<K extends KeyValue = KeyValue> {
      */
     onSubmit?: (values: K) => void;
 }
-export declare const Form: <K extends KeyValue<any>>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Form component for managing form state and validation using react-hook-form and yup.
+ * It provides a simple interface for form handling, including submission, validation, and value management.
+ * It supports nested form structures and allows for custom validation schemas using Yup.
+ *
+ * @example
+ * ```jsx
+ * <Form
+ *   formRef={formRef}
+ *   resolver={hookformResolver(schema)}
+ *   defaultValues={{ name: "", email: "" }}
+ *   onSubmit={(values) => {
+ *     console.log("Form submitted with values:", values);
+ *   }}
+ * >
+ *   <input name="name" ref={form.register} placeholder="Name" />
+ *   <input name="email" ref={form.register} placeholder="Email" />
+ *   <button type="submit">Submit</button>
+ * </Form>
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/docs/useform} for more details on the properties.
+ */
+export declare function Form<K extends KeyValue>({ formRef, resolver, children, resetOnChange, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>): import("react").JSX.Element;
+export {};

package/dist/types/form/useForm.d.ts

@@ -0,0 +1,6 @@
+import type { FieldValues, UseFormReturn } from "react-hook-form";
+export type UseCustomFormReturn<K extends FieldValues = FieldValues> = Pick<UseFormReturn<K>, "formState" | "getValues" | "setValue" | "watch" | "reset" | "resetField" | "setError" | "setFocus"> & {
+    values: K;
+    watch: UseFormReturn<K>["watch"];
+};
+export declare function useForm<K extends KeyValue = KeyValue>(): UseCustomFormReturn<K>;

package/dist/types/hooks/useFileUploader.d.ts

@@ -1,4 +1,4 @@
-import { type AxiosRequestConfig } from "axios";
+import type { AxiosRequestConfig } from "axios";
 export type UploadHandler = (data: FormData, config: AxiosRequestConfig) => Promise<string>;
 interface FileInfo {
     key: string;
@@ -12,12 +12,33 @@ interface FileInfo {
     progress?: number;
     abort?: AbortController["abort"];
 }
-export declare const useFileUploader: (uploader: UploadHandler, initialList?: string | FileInfo | FileInfo[], multiple?: boolean) => {
+/**
+ * useFileUploader hook provides a way to handle file uploads
+ * with progress tracking, error handling, and file management.
+ * It uses a reducer to manage the state of uploaded files and their statuses.
+ *
+ * @param uploader - The function that handles the file upload.
+ * @param initialList - Initial list of files to be managed by the uploader.
+ * @param multiple - Whether to allow multiple file uploads or not.
+ * @returns An object containing methods to upload, remove, retry files,
+ *          and the current state of the uploader including pending uploads and file list.
+ *
+ * @example
+ * ```jsx
+ * const { upload, remove, retry, state } = useFileUploader(uploader, initialList, multiple);
+ * ```
+ */
+export declare function useFileUploader(uploader: UploadHandler, initialList?: string | FileInfo | FileInfo[], { multiple, onChange, }?: {
+    multiple?: true;
+    onChange?: (files: FileInfo[] | null) => void;
+} | {
+    multiple: false;
+    onChange?: (files: FileInfo | null) => void;
+}): {
     upload: (files: FileList | null) => void;
     remove: (key: string) => void;
     retry: (key: string) => void;
     pending: number;
-    list: FileInfo[];
     files: FileInfo[];
 };
 export {};

package/dist/types/hooks/useFormBuilder.d.ts

@@ -1,13 +1,51 @@
 import { yup } from "@react-fabric/utilities";
+import { type BaseSelectProps } from "../types";
 import { type FormSchema } from "../types/schema";
 import { type UploadHandler } from "./useFileUploader";
-export declare const useFormBuilder: (schema: FormSchema[], options?: {
+/**
+ * useFormBuilder hook to create a form definition based on a schema.
+ * It generates a Yup validation schema and a form definition component.
+ *
+ * @param {FormSchema} schema - The schema defining the form fields.
+ * @param {Object} options - Optional parameters for the form builder.
+ * @returns An object containing the form definition and the Yup validation schema.
+ *
+ * @example
+ * ```jsx
+ * const { formDef, schemaDef } = useFormBuilder(schema, {
+ *   prefix: "form",
+ *   inline: true,
+ *   fileUrl: (path) => `/files/${path}`,
+ *   uploadHandler: async (file) => {
+ *    // handle file upload
+ *   },
+ *  optionLists: {
+ *    // define option lists for select fields
+ *  }
+ * * });
+ * <FormBuilder
+ *   schema={schemaDef}
+ *   onSubmit={(data) => console.log(data)}
+ * >
+ *   {formDef}
+ * </FormBuilder>
+ * ```
+ */
+export declare function useFormBuilder<T extends AnyObject = string>(schema: FormSchema, options?: {
     prefix?: string;
     inline?: boolean;
     fileUrl?: (path: string) => string;
     uploadHandler?: UploadHandler;
-}) => {
-    formDef: import("react/jsx-runtime").JSX.Element;
+    optionLists?: KeyValue<BaseSelectProps<T>>;
+}): {
+    formDef: import("react").JSX.Element;
+    resolver: import("react-hook-form").Resolver<{
+        [x: string]: any;
+        [x: number]: any;
+    }, unknown, {
+        [x: string]: any;
+        [x: number]: any;
+    }>;
     schemaDef: yup.ObjectSchema<{
         [x: string]: any;
     }, yup.AnyObject, {

package/dist/types/index.d.ts

@@ -1,13 +1,41 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+export declare const FORM_PACKAGE = "@react-fabric/form";
+export declare const FORM_VERSION = "1.0.1";
 import "./i18n";
 export { Controller } from "./form/Controller";
 export { Form, type FormRef } from "./form/Form";
+export { useForm } from "./form/useForm";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
-export { type FormSchema } from "./types/schema";
 export { ArrayInput } from "./input/ArrayInput";
+export { AvatarInput } from "./input/AvatarInput";
 export { Checkbox } from "./input/Checkbox";
 export { ColorInput } from "./input/ColorInput";
 export { ColorPicker } from "./input/ColorPicker";
+export { DateInput } from "./input/DateInput";
 export { Field } from "./input/Field";
 export { FileInput } from "./input/File";
 export { HiddenInput } from "./input/Hidden";
@@ -16,7 +44,7 @@ export { Number } from "./input/Number";
 export { Password } from "./input/Password";
 export { Radio } from "./input/Radio";
 export { RadioGroup } from "./input/RadioGroup";
-export { Range } from "./input/Range";
+export { RangeSlider } from "./input/RangeSlider";
 export { Search } from "./input/Search";
 export { Slider } from "./input/Slider";
 export { Switch } from "./input/Switch";
@@ -25,3 +53,5 @@ export { AutoComplete } from "./select/AutoComplete";
 export { DualList } from "./select/DualList";
 export { List } from "./select/List";
 export { Select } from "./select/Select";
+export { SchemaEditor } from "./builder/SchemaEditor";
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST, type FormSchema, type SchemaDef } from "./types/schema";

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

@@ -1,5 +1,5 @@
-import { type ReactNode, type RefObject } from "react";
-export interface ArrayInputProps {
+import { type Ref } from "react";
+export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * input label
      */
@@ -7,7 +7,7 @@ export interface ArrayInputProps {
     /**
      * append to label end
      */
-    appendLabel?: JSX.Element | string | number | boolean;
+    appendLabel?: React.ReactElement | string | number | boolean;
     /**
      * info label at bottom
      */
@@ -32,6 +32,10 @@ export interface ArrayInputProps {
      * minimum required length
      */
     minItems?: number;
+    /**
+     * maximum length
+     */
+    maxItems?: number;
     /**
      * field name to focus on add
      */
@@ -43,23 +47,38 @@ export interface ArrayInputProps {
     children: React.ReactNode | ((props: {
         index: number;
         name: string;
-    }) => ReactNode);
+        item: T;
+        onChange: (val: false | undefined | T) => void;
+    }) => React.ReactNode);
     /**
      * add item button label
      */
     addLabel?: string;
-    /**
-     * fixed length list
-     */
-    fixedList?: boolean;
-    arrayRef?: RefObject<{
-        addItem: (item: AnyObject) => void;
+    buttonPosition?: "top" | "bottom" | "both";
+    arrayRef?: Ref<{
+        addItem: (item: false | undefined | T | Promise<false | undefined | T>) => void;
         removeItem: (idx: number) => void;
     }>;
     /**
-     * Add item
+     * add new item
+     */
+    onAdd?: () => false | undefined | T | Promise<false | undefined | T>;
+    /**
+     * on item remove
      */
-    onAdd?: () => AnyObject;
+    onRemove?: (item: T, idx: number) => void;
+    /**
+     * before item remove
+     */
+    onBeforeRemove?: (item: T, idx: number) => Promise<boolean> | boolean;
+    /**
+     * can remove item
+     */
+    canRemove?: false | "newonly" | ((props: {
+        item: T;
+        index: number;
+        lastItem: boolean;
+    }) => boolean);
     /**
      * field width
      */
@@ -73,4 +92,40 @@ export interface ArrayInputProps {
      */
     labelWidth?: string;
 }
-export declare const ArrayInput: ({ name, children, addLabel, fixedList, focusName, onAdd, arrayRef, enableSorting, disabled, readOnly, minItems, ...rest }: ArrayInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ArrayInput component for managing an array of items in a form.
+ * It allows adding, removing, and sorting items within the array.
+ * It integrates with react-hook-form for form state management and validation.
+ * It supports fixed-length lists, custom add/remove handlers, and can display validation errors.
+ * It also provides options for inline display and custom button positioning.
+ *
+ * It uses the `useFieldArray` hook from `react-hook-form` to manage the array state and provides a simple interface for adding and removing items.
+ *
+ * It also supports drag-and-drop sorting using `@dnd-kit/core` and `@dnd-kit/sortable` for a better user experience when reordering items.
+ *
+ * @example
+ * ```jsx
+ * <ArrayInput
+ *   name="items"
+ *   label="Items"
+ *   addLabel="Add Item"
+ *   onAdd={() => ({ name: "", value: "" })}
+ *   onRemove={(item, index) => console.log("Removed item:", item, "at index:", index)}
+ *   onBeforeRemove={(item, index) => confirm(`Are you sure you want to remove item at index ${index}?`)}
+ *   canRemove={({ item, index, lastItem }) => !lastItem} // Prevent removing the last item
+ * >
+ *   {({ index, name }) => (
+ *     <Input
+ *       name={name}
+ *       label={`Item ${index + 1}`}
+ *       placeholder="Enter item value"
+ *       required={index === 0} // Make the first item required
+ *     />
+ *   )}
+ * </ArrayInput>
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/api/usefieldarray} for more details on `useFieldArray`.
+ * @see {@link https://react-dnd.github.io/react-dnd/about} for more details on DnD context and sorting.
+ */
+export declare function ArrayInput<T extends AnyObject = string>({ name, children, addLabel, focusName, buttonPosition, onAdd, onRemove, onBeforeRemove, canRemove, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps<T>): import("react").JSX.Element;

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

@@ -1,5 +1,6 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type UploadHandler } from "../hooks/useFileUploader";
+import type { AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { UploadHandler } from "../hooks/useFileUploader";
 export interface Props extends RefProp {
     /**
      * field name
@@ -10,14 +11,25 @@ export interface Props extends RefProp {
      */
     value?: string;
     /**
-     * avatar stream src
+     * default avatar image
      */
-    src?: string;
+    defaultValue?: string;
+    /**
+     * avatar name
+     */
+    avatarName?: string;
+    rounded?: boolean;
+    variant?: AvatarProps["variant"];
+    fallbackIcon?: AvatarProps["fallbackIcon"];
+    avatarClassName?: AvatarProps["className"];
     size?: string | number;
     /**
      * upload handler to store file in temp storage
      */
     uploadHandler: UploadHandler;
+    /**
+     * file stream path
+     */
     fileUrl?: (path: string) => string;
     /**
      * change handler
@@ -26,6 +38,11 @@ export interface Props extends RefProp {
      * @param base64
      * @returns storage path
      */
-    onChange?: (path: string) => void;
+    onChange?: (path: string | null) => void;
 }
-export declare const AvatarInput: ({ src, size, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Avatar input component for uploading and displaying user avatars.
+ * It allows users to select an image file, upload it, and display the avatar.
+ * It also provides a way to remove the uploaded file and shows upload progress.
+ */
+export declare const AvatarInput: ({ size, avatarName, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, onChange, ...rest }: Props) => React.ReactElement;

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

@@ -1,22 +1,17 @@
-/// <reference types="react" />
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-export interface CheckboxProps extends RefProp<HTMLInputElement> {
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+interface CheckboxProps extends RefProp<HTMLInputElement> {
     /**
      * checkbox label
      */
-    label?: JSX.Element | string;
+    label?: React.ReactElement | string;
     /**
      * checked
      */
     checked?: boolean;
-    /**
-     * value
-     */
-    value?: string | number;
     /**
      * on checked change
      */
-    onChange?: (checked: boolean | string | number) => void;
+    onChange?: (checked: boolean) => void;
     /**
      * disabled input
      */
@@ -43,4 +38,11 @@ export interface CheckboxProps extends RefProp<HTMLInputElement> {
     iconChecked?: string;
     name?: string;
 }
-export declare const Checkbox: ({ ref, label, value, name, checked, invalid, disabled, error, width, icon, iconChecked, onChange, ...rest }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Checkbox component for rendering a checkbox input with label and error handling.
+ * It supports custom icons for checked and unchecked states, and handles disabled and invalid states.
+ * The component uses a deferred value to manage the checked state, ensuring smooth updates.
+ * It also provides an error icon to indicate validation errors.
+ */
+export declare function Checkbox({ ref, label, name, checked, invalid, disabled, error, width, icon, iconChecked, onChange, ...rest }: CheckboxProps): import("react").JSX.Element;
+export {};

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

@@ -1,10 +1,20 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type InputProps } from "../types";
-import { type ColorProps } from "./ColorPicker";
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { InputProps, WrapperProps } from "../types";
+import type { ColorProps } from "./ColorPicker";
+export interface ColorInputProps extends InputProps, WrapperProps, Omit<ColorProps, "onChange">, RefProp<HTMLButtonElement> {
     /**
      * show eydrop picker
      */
     showPicker?: boolean;
 }
-export declare const ColorInput: ({ ref, required, disabled, allowClear, invalid, error, value, showPicker, defaultColor, decorateEnd, decorateStart, onChange, noOutline, ...rest }: ColorInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Color input component that allows users to select a color
+ * and optionally use an eye dropper to pick a color from the screen.
+ * It uses the Floating UI library for positioning the color picker.
+ * It also provides a button to clear the selected color.
+ *
+ * This component is a wrapper around the `ColorPicker` component
+ * and provides additional functionality such as showing an eye dropper
+ * and handling the color selection state.
+ */
+export declare function ColorInput(props: ColorInputProps): import("react").JSX.Element;

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

@@ -1,4 +1,3 @@
-import { type FC } from "react";
 export interface ColorProps {
     /**
      * color swatches
@@ -12,6 +11,10 @@ export interface ColorProps {
      * hide alpha value
      */
     hideAlpha?: boolean;
+    /**
+     * show only swatches, hide the color picker
+     */
+    picker?: "default" | "swatches";
     /**
      * color value
      */
@@ -21,4 +24,9 @@ export interface ColorProps {
      */
     onChange?: (color?: string) => void;
 }
-export declare const ColorPicker: FC<ColorProps>;
+/**
+ * ColorPicker component allows users to select a color using a color picker UI.
+ * It supports swatches, alpha transparency, and custom styles.
+ * The component uses the `react-color` library for the color picker functionality.
+ */
+export declare const ColorPicker: import("react").MemoExoticComponent<({ value, onChange, hideAlpha, defaultColor, swatches, picker, }: ColorProps) => import("react").JSX.Element>;

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

@@ -0,0 +1,21 @@
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { DateLike } from "@react-fabric/date";
+import type { InputProps, WrapperProps } from "../types";
+export interface DateProps extends InputProps<DateLike>, WrapperProps, RefProp<HTMLInputElement> {
+    type?: "date" | "datetime";
+    /**
+     * minimum value
+     */
+    min?: DateLike;
+    /**
+     * maximum value
+     */
+    max?: DateLike;
+}
+/**
+ * Date input component that allows users to select a date or datetime.
+ * It uses the Floating UI library for positioning the date picker.
+ * It also provides a button to clear the selected date.
+ * The component supports both date and datetime types, with appropriate formatting.
+ */
+export declare function DateInput(props: DateProps): import("react").JSX.Element;

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

@@ -1,42 +1,15 @@
-/// <reference types="react" />
-import { type ChildrenProp, type CssProp } from "@react-fabric/core/dist/types/types";
-export interface FieldProps extends ChildrenProp, CssProp {
-    /**
-     * input label
-     */
-    label?: string;
-    /**
-     * append to label end
-     */
-    appendLabel?: JSX.Element | string | number | boolean;
-    /**
-     * info label at bottom
-     */
-    info?: string;
-    /**
-     * required
-     */
-    required?: boolean;
-    /**
-     * hide outline
-     */
-    noOutline?: boolean;
-    /**
-     * field width
-     */
-    width?: number | string;
-    /**
-     * inline label and input
-     */
-    inline?: boolean;
-    /**
-     * label width for inline
-     */
-    labelWidth?: string;
+import type { ChildrenProp, CssProp } from "@react-fabric/core/dist/types/types";
+import type { WrapperProps } from "../types";
+export interface FieldProps extends ChildrenProp, WrapperProps, CssProp {
     /**
      * dont apply bg and outline
      */
     plain?: boolean;
     vertical?: boolean;
 }
-export declare const Field: ({ children, vertical, noOutline, plain, ...rest }: FieldProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Field component for rendering multiple form fields under a single label.
+ * It supports various properties for customization, including label, info, required state,
+ * and styling options.
+ */
+export declare function Field(props: FieldProps): import("react").JSX.Element;

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

@@ -1,6 +1,11 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type InputProps } from "../types";
-export interface FileInputProps extends InputProps<AnyObject>, RefProp<HTMLInputElement> {
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { InputProps, WrapperProps } from "../types";
+interface FileType {
+    name: string;
+    type?: string;
+    size?: number;
+}
+export interface FileInputProps extends InputProps<FileType | FileType[]>, WrapperProps, RefProp<HTMLInputElement> {
     /**
      * allow selecting mutiple files
      */
@@ -14,4 +19,11 @@ export interface FileInputProps extends InputProps<AnyObject>, RefProp<HTMLInput
      */
     accept?: string;
 }
-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;
+/**
+ * File input component that allows users to select files from their system.
+ * It supports multiple file selection and displays a list of selected files.
+ * The component also provides functionality to remove files from the list.
+ * It handles file changes, invalid states, and read-only or disabled states.
+ */
+export declare function FileInput(props: FileInputProps): import("react").JSX.Element;
+export {};

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

@@ -4,13 +4,14 @@ interface Props {
      */
     name?: string;
     /**
-     * hidden value will fire change for form update
+     * hidden input value
      */
     hiddenValue?: AnyObject;
-    /**
-     * form onChange handler
-     */
-    onChange?: (value: AnyObject) => void;
 }
-export declare const HiddenInput: ({ hiddenValue, onChange, invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Hidden input component to handle hidden values in forms.
+ * It will trigger the onChange handler with the hidden value after a short delay.
+ * This is useful for cases where you need to update the form state without user interaction.
+ */
+export declare function HiddenInput(props: Props): import("react").JSX.Element;
 export {};

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

@@ -1,9 +1,16 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type InputProps } from "../types";
-export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { InputHTMLAttributes } from "react";
+import type { InputProps, WrapperProps } from "../types";
+export interface TextInputProps extends InputProps, WrapperProps, RefProp<HTMLInputElement> {
     /**
      * input type
      */
     type?: "email" | "file" | "search" | "tel" | "text" | "url";
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>["autoComplete"];
 }
-export declare const Input: ({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, type, onChange, onEnterPressed, ...rest }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * This component is used to render a text input field with various properties such as name, value, invalid state, read-only, disabled, required, placeholder, autoFocus, error message, monospace font option, and event handlers for blur, focus, change, and enter key press.
+ * It also includes a clear button that appears when there is a value in the input field, allowing users to clear the input easily.
+ * The component uses a wrapper to handle the clear button and styling, and it supports deferred value updates to optimize performance.
+ */
+export declare function Input(props: TextInputProps): import("react").JSX.Element;

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

@@ -1,6 +1,6 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type InputProps } from "../types";
-export interface NumberProps extends InputProps<number>, RefProp<HTMLInputElement> {
+import type { RefProp } from "@react-fabric/core/dist/types/types";
+import type { InputProps, WrapperProps } from "../types";
+export interface NumberProps extends InputProps<number>, WrapperProps, RefProp<HTMLInputElement> {
     /**
      * minimum value
      */
@@ -14,4 +14,9 @@ export interface NumberProps extends InputProps<number>, RefProp<HTMLInputElemen
      */
     step?: number;
 }
-export declare const Number: ({ ref, value, invalid, readOnly, disabled, required, placeholder, autoFocus, name, min, max, step, onChange, onEnterPressed, ...rest }: NumberProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * This component allows users to input numeric values with optional minimum, maximum, and step constraints.
+ * It provides a clear interface for entering numbers, with support for validation and accessibility features.
+ * It also includes a clear button to reset the input value.
+ */
+export declare function Number(props: NumberProps): import("react").JSX.Element;