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

package/dist/esm/select/useSelect.js

@@ -4,7 +4,7 @@ import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useDebounce } from '@react-fabric/core';
-import { matchString, isString, dedupe, groupBy, isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
+import { matchString, isString, dedupe, compareValues, groupBy, isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
 import { useMemo, useDeferredValue, useRef, useCallback, useReducer, useEffect } from 'react';
 import { getSelectedValue, makeOption } from './helpers.js';
 
@@ -15,6 +15,10 @@ var useSelect = function useSelect(_ref) {
     options = _ref$options === void 0 ? EMPTY_ARRAY : _ref$options,
     value = _ref.value,
     autoComplete = _ref.autoComplete,
+    _ref$alwaysOpen = _ref.alwaysOpen,
+    alwaysOpen = _ref$alwaysOpen === void 0 ? false : _ref$alwaysOpen,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$allowCreate = _ref.allowCreate,
@@ -25,6 +29,7 @@ var useSelect = function useSelect(_ref) {
     valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    sortProperty = _ref.sortProperty,
     _ref$createOption = _ref.createOption,
     createOption = _ref$createOption === void 0 ? makeOption : _ref$createOption,
     matcher = _ref.matcher,
@@ -63,13 +68,16 @@ var useSelect = function useSelect(_ref) {
       if (action.type === "close") {
         return _objectSpread(_objectSpread({}, state), {}, {
           activeIndex: null,
+          activeItem: null,
           open: false
         });
       }
       if (action.type === "active" && state.open) {
+        var _action$index;
         if (autoComplete && action.index !== null) state.query = state.items[action.index];
         return _objectSpread(_objectSpread({}, state), {}, {
-          activeIndex: action.index
+          activeIndex: action.index,
+          activeItem: state.items[(_action$index = action.index) !== null && _action$index !== void 0 ? _action$index : -1]
         });
       }
       if (action.type === "setValue") {
@@ -83,6 +91,7 @@ var useSelect = function useSelect(_ref) {
         var newState = _objectSpread(_objectSpread({}, state), {}, {
           value: state.emptyValue,
           activeIndex: null,
+          activeItem: null,
           selectedIndex: autoComplete ? state.multiple ? (_action$value = action.value) === null || _action$value === void 0 ? void 0 : _action$value.length : 0 : state.items.indexOf(action.value)
         });
         if (action.value !== undefined) {
@@ -100,16 +109,16 @@ var useSelect = function useSelect(_ref) {
             newState.value = action.value;
           }
         }
-        if (!state.multiple) newState.open = false;
+        if (!state.multiple) newState.open = alwaysOpen;
         fireChange(newState.value);
         return newState;
       }
       if (action.type === "removeItem") {
         var newValue = state.value;
         if (state.multiple) {
-          var _action$index;
+          var _action$index2;
           newValue = _toConsumableArray(newValue);
-          newValue.splice((_action$index = action.index) !== null && _action$index !== void 0 ? _action$index : -1, 1);
+          newValue.splice((_action$index2 = action.index) !== null && _action$index2 !== void 0 ? _action$index2 : -1, 1);
         } else {
           newValue = "";
         }
@@ -133,13 +142,14 @@ var useSelect = function useSelect(_ref) {
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query].concat(_toConsumableArray(optionList)));
         }
+        if (sortProperty) optionList = optionList.sort(compareValues("asc", sortProperty));
         var grouped = groupBy(optionList, groupProperty, "");
         if (action.open) _newState.open = true;
         _newState.items = [];
         // add new item if allowCreate
         if (allowCreate && action.query) _newState.items.push({
           ___create___: true,
-          value: createOption(action.query)
+          value: action.query
         });
         Object.entries(grouped).forEach(function (_ref2) {
           var _newState$items;
@@ -169,9 +179,10 @@ var useSelect = function useSelect(_ref) {
     }, {
       multiple: multiple,
       emptyValue: emptyValue,
-      open: false,
+      open: alwaysOpen || defaultOpen,
       loading: false,
       activeIndex: null,
+      activeItem: null,
       selectedIndex: null,
       value: emptyValue,
       // filter
@@ -201,7 +212,7 @@ var useSelect = function useSelect(_ref) {
       });
       dispatch({
         type: "setValue",
-        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : ""
+        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : deferred
       });
     }
     if (multiple) {
@@ -211,12 +222,12 @@ var useSelect = function useSelect(_ref) {
         var newOption = (allowCreate || autoComplete) && item ? createOption(item) : undefined;
         var hasValue = options.find(function (opt) {
           var _opt$valueProperty2;
-          return ((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt) === deferred;
+          return ((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt) === item;
         });
         if (!hasValue && newOption) {
           optionsRef.current.push(newOption);
         }
-        return (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : "";
+        return (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : item;
       });
       optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), _toConsumableArray(options !== null && options !== void 0 ? options : []));
       dispatch({
@@ -246,7 +257,7 @@ var useSelect = function useSelect(_ref) {
         setActive: true
       });
     });
-  }, [onQuery]);
+  }, [onQuery], 300);
 
   // handlers
   var handleQuery = useCallback(function (query) {
@@ -316,7 +327,7 @@ var useSelect = function useSelect(_ref) {
     });
   }, []);
   var setActiveIndex = useCallback(function (index) {
-    dispatch({
+    index && index > -1 && dispatch({
       type: "active",
       index: index
     });

package/{src/input/ColorPicker.module.css → dist/esm/types/schema.js}

@@ -1,3 +1,5 @@
+'use client';
+
 /*
  * React Fabric
  * @version: 1.0.0
@@ -21,31 +23,20 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .colorPicker {
-    --color-shadow: theme(borderColor.base);
-
-    & input {
-      @apply bg-base text-base !border !border-solid !rounded-sm !border-base focus:!border-primary !shadow-none;
-
-      padding: 0 4px !important;
-      line-height: 2;
-    }
-
-    & label {
-      @apply !text-base;
-    }
-
-    & :global(.flexbox-fix) {
-      @apply !border-t-muted justify-center;
-
-      & > div > div {
-        @apply text-center;
-      }
+var DATA_TYPES = /*#__PURE__*/function (DATA_TYPES) {
+  DATA_TYPES["TEXT"] = "text";
+  DATA_TYPES["COLOR"] = "color";
+  DATA_TYPES["BOOL"] = "bool";
+  DATA_TYPES["DATE"] = "date";
+  DATA_TYPES["DATETIME"] = "datetime";
+  DATA_TYPES["STRING"] = "string";
+  DATA_TYPES["NUMBER"] = "number";
+  DATA_TYPES["RANGE"] = "range";
+  DATA_TYPES["FILE"] = "file";
+  DATA_TYPES["AVATAR"] = "avatar";
+  DATA_TYPES["SCHEMA"] = "schema";
+  return DATA_TYPES;
+}({});
+var SCHEMA_CUSTOM_LIST = "--CUSTOM--";
 
-      & span > div {
-        box-shadow: 0 0 1px 1px theme(borderColor.base) inset !important;
-      }
-    }
-  }
-}
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST };

package/dist/esm/utils/eventHandlers.js

@@ -1,6 +1,7 @@
 'use client';
 
-import { debounce } from '@react-fabric/utilities';
+import { useFloatingTree } from '@floating-ui/react';
+import { useDebounce } from '@react-fabric/core';
 
 /*
  * React Fabric
@@ -26,16 +27,25 @@ import { debounce } from '@react-fabric/utilities';
  */
 
 /** ***************** common handler for enter press *******************/
-var handleEnter = function handleEnter(callback) {
+var useHandleEnter = function useHandleEnter(callback) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref$stopPropagation = _ref.stopPropagation,
     stopPropagation = _ref$stopPropagation === void 0 ? false : _ref$stopPropagation,
     _ref$preventDefault = _ref.preventDefault,
     preventDefault = _ref$preventDefault === void 0 ? false : _ref$preventDefault;
-  var cbHandle = debounce(callback !== null && callback !== void 0 ? callback : function () {
+  var cbHandle = useDebounce(callback !== null && callback !== void 0 ? callback : function () {
     return undefined;
-  }, 100);
+  }, [callback], 100);
+  var tree = useFloatingTree();
   return function (e) {
+    // prevent propagation of event if input within dropdown (work around for floating-ui typeahead)
+    if (tree && e.key !== "Escape") {
+      e === null || e === void 0 || e.stopPropagation();
+    }
+    // blur input on escape key press
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+    }
     if (!e.shiftKey && !e.altKey && !e.metaKey && e.key === "Enter" && callback) {
       if (stopPropagation) e === null || e === void 0 || e.stopPropagation();
       cbHandle(e);
@@ -47,4 +57,4 @@ var handleEnter = function handleEnter(callback) {
   };
 };
 
-export { handleEnter };
+export { useHandleEnter };

package/dist/types/builder/FileField.d.ts

@@ -1,8 +1,10 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
-import { type FileSchema } from "../types/schema";
-export declare const FileField: ({ uploadHandler, inline, label, accept, multiple, value, ...rest }: Partial<FileSchema> & {
+import { type FileSchema, type ValueType } from "../types/schema";
+export declare const FileField: ({ uploadHandler, inline, label, accept, value, fileUrl, multiple, invalid, error, ...rest }: Partial<FileSchema & ValueType> & {
     value?: AnyObject;
     inline?: boolean;
+    invalid?: boolean;
+    error?: AnyObject;
     fileUrl?: (path: string) => string;
     uploadHandler: UploadHandler;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/FormField.d.ts

@@ -1,9 +1,11 @@
 import { type UploadHandler } from "../hooks/useFileUploader";
+import { type BaseSelectProps } from "../types";
 import { type SchemaType } from "../types/schema";
-export declare const FormField: ({ id, label, required, inline, prefix, autoFocus, defaultValue, fileUrl, uploadHandler, ...rest }: SchemaType & {
+export declare const FormField: ({ id, label, required, inline, prefix, autoFocus, optionLists, fileUrl, uploadHandler, ...rest }: SchemaType & {
     inline?: boolean;
     prefix?: string;
     autoFocus?: boolean;
+    optionLists?: KeyValue<BaseSelectProps<any>>;
     fileUrl?: (path: string) => string;
     uploadHandler?: UploadHandler;
 }) => import("react/jsx-runtime").JSX.Element | undefined;

package/dist/types/builder/SchemaEditor.d.ts

@@ -0,0 +1,9 @@
+import { type SchemaEditorProps } from "../types/schema";
+/**
+ * SchemaEditor component allows users to edit a schema definition.
+ * 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.
+ */
+export declare const SchemaEditor: ({ schemaDef, dynamic, acceptableTypes, optionLists, children, onSubmit, onChange, }: SchemaEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/components/AddSchemaFields.d.ts

@@ -0,0 +1,2 @@
+import { type ModalProps } from "@react-fabric/core";
+export declare const AddSchemaFields: (props: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/components/SchemaArrayForm.d.ts

@@ -0,0 +1,2 @@
+import { type SchemaEditorProps } from "../../types/schema";
+export declare const SchemaArrayForm: ({ dynamic, acceptableTypes, optionLists, }: Partial<SchemaEditorProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/builder/components/SchemaField.d.ts

@@ -0,0 +1,10 @@
+import { type SchemaEditorProps } from "../../types/schema";
+export declare const SchemaField: ({ id, field, fieldId, getModel, onRemove, defaultOpen, optionLists, dynamic, onTypeChange, acceptableTypes, }: {
+    id: string;
+    field: string;
+    fieldId: string;
+    defaultOpen?: boolean;
+    onRemove: () => void;
+    getModel: () => KeyValue;
+    onTypeChange: (val: KeyValue) => void;
+} & Omit<SchemaEditorProps, "schemaDef" | "onChange">) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ export interface ControllerProps {
      * field name
      */
     name?: string;
-    children: ReactElement | ((props: {
+    children: ReactElement<KeyValue> | ((props: {
         name: string;
         error?: string;
         checked: boolean;
@@ -14,7 +14,52 @@ export interface ControllerProps {
         disabled?: boolean;
         onBlur: () => void;
         onChange: (value: AnyObject) => void;
-        inputRef?: React.Ref<HTMLInputElement>;
+        ref?: React.Ref<HTMLInputElement>;
     }) => ReactElement);
 }
+/**
+ * This component is used to wrap form controls
+ * and provide them with the necessary props and state management.
+ *
+ * It uses the `Controller` component from `react-hook-form`
+ * to manage the form state and validation.
+ *
+ * It accepts a `name` prop to identify the form control,
+ * and a `children` prop which can either be a React element
+ * or a function that receives the necessary props to render the control.
+ *
+ * The component will pass down the following props to the child:
+ * - `name`: the name of the form control
+ * - `error`: any validation error message
+ * - `checked`: whether the control is checked (for checkboxes/radios)
+ * - `value`: the current value of the control
+ * - `invalid`: whether the control is invalid
+ * - `readOnly`: whether the control is read-only (disabled during submission)
+ * - `disabled`: whether the control is disabled
+ * - `onBlur`: function to call when the control loses focus
+ * - `onChange`: function to call when the control value changes
+ * - `ref`: a ref to the control element
+ * * The component also handles the `ref` prop to ensure that it is passed correctly
+ * 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.
+ *
+ * @example
+ * ```jsx
+ * <Controller
+ *   name="username"
+ *   children={({ name, error, checked, value, invalid, readOnly, onChange }) => (
+ *     <input
+ *       type="text"
+ *       name={name}
+ *       onChange={onChange}
+ *       readOnly={readOnly}
+ *       aria-invalid={invalid}
+ *       value={value}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
 export declare const Controller: ({ name, children, ...rest }: ControllerProps) => import("react/jsx-runtime").JSX.Element;

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,15 +10,16 @@ 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: AnyObject) => 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
      */
@@ -30,4 +33,44 @@ 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.
+ *
+ * @param {FormProps<K>} props - The properties for the Form component.
+ * @returns {JSX.Element} The rendered Form component.
+ *
+ * @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://adarshpastakia.github.io/react-fabric/?path=/docs/form-form--docs} for the properties that can be passed to this component.
+ * @see {@link https://react-hook-form.com/docs/useform} for more details on the properties.
+ * @see {@link https://github.com/jquense/yup} for more details on the Yup validation schema.
+ */
+export declare const Form: <K extends KeyValue>({ formRef, resolver, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export declare const useForm: <K extends KeyValue = KeyValue>() => {
+    values: import("react-hook-form").DeepPartialSkipArrayKey<K> & K;
+    formState: FormState<K>;
+    getValues: import("react-hook-form").UseFormGetValues<K>;
+    setValue: import("react-hook-form").UseFormSetValue<K>;
+    watch: import("react-hook-form").UseFormWatch<K>;
+    reset: import("react-hook-form").UseFormReset<K>;
+    resetField: import("react-hook-form").UseFormResetField<K>;
+    setError: import("react-hook-form").UseFormSetError<K>;
+    setFocus: import("react-hook-form").UseFormSetFocus<K>;
+};
+export {};

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

@@ -12,6 +12,22 @@ interface FileInfo {
     progress?: number;
     abort?: AbortController["abort"];
 }
+/**
+ * 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 const useFileUploader: (uploader: UploadHandler, initialList?: string | FileInfo | FileInfo[], multiple?: boolean) => {
     upload: (files: FileList | null) => void;
     remove: (key: string) => void;

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

@@ -1,13 +1,50 @@
 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 const useFormBuilder: <T extends AnyObject = string>(schema: FormSchema, options?: {
     prefix?: string;
     inline?: boolean;
     fileUrl?: (path: string) => string;
     uploadHandler?: UploadHandler;
+    optionLists?: KeyValue<BaseSelectProps<T>>;
 }) => {
     formDef: import("react/jsx-runtime").JSX.Element;
+    resolver: import("react-hook-form").Resolver<{
+        [x: string]: 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,16 @@
 import "./i18n";
 export { Controller } from "./form/Controller";
-export { Form, type FormRef } from "./form/Form";
+export { Form, useForm, type FormRef } from "./form/Form";
+export { SchemaEditor } from "./builder/SchemaEditor";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
-export { type FormSchema } from "./types/schema";
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST, type FormSchema, type SchemaDef, } 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 +19,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";

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
      */
@@ -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,37 @@ export interface ArrayInputProps {
     children: React.ReactNode | ((props: {
         index: number;
         name: string;
-    }) => ReactNode);
+        item: T;
+    }) => 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: T) => void;
         removeItem: (idx: number) => void;
     }>;
     /**
-     * Add item
+     * add new item
+     */
+    onAdd?: () => 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 +91,43 @@ 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.
+ *
+ * @param {ArrayInputProps<T>} props - The properties for the ArrayInput component.
+ * @returns {JSX.Element} The rendered ArrayInput component.
+ *
+ * @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 const 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-runtime").JSX.Element;