@react-fabric/form 1.0.0-beta.0

package/dist/esm/select/useSelect.js

@@ -0,0 +1,337 @@
+'use client';
+
+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, dedupe, groupBy, isArray, EMPTY_ARRAY } from '@react-fabric/utilities';
+import { useMemo, useDeferredValue, useRef, useCallback, useReducer, useEffect } from 'react';
+import { getSelectedValue, makeOption } from './helpers.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var useSelect = function useSelect(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? EMPTY_ARRAY : _ref$options,
+    value = _ref.value,
+    autoComplete = _ref.autoComplete,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    _ref$allowCreate = _ref.allowCreate,
+    allowCreate = _ref$allowCreate === void 0 ? false : _ref$allowCreate,
+    _ref$groupProperty = _ref.groupProperty,
+    groupProperty = _ref$groupProperty === void 0 ? "" : _ref$groupProperty,
+    _ref$valueProperty = _ref.valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    _ref$labelProperty = _ref.labelProperty,
+    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    _ref$createOption = _ref.createOption,
+    createOption = _ref$createOption === void 0 ? makeOption : _ref$createOption,
+    matcher = _ref.matcher,
+    onQuery = _ref.onQuery,
+    onChange = _ref.onChange,
+    onSelect = _ref.onSelect;
+  // value state
+  var emptyValue = useMemo(function () {
+    return multiple ? [] : "";
+  }, [multiple]);
+  var deferred = useDeferredValue(value !== null && value !== void 0 ? value : emptyValue);
+
+  // list items
+  var listRef = useRef([]);
+  var focusableRef = useRef(null);
+  var listContentRef = useRef([]);
+  var optionsRef = useRef([]);
+  var macthOption = useCallback(function (item, query) {
+    var _matcher, _item$labelProperty;
+    return (_matcher = matcher === null || matcher === void 0 ? void 0 : matcher(item, query)) !== null && _matcher !== void 0 ? _matcher : matchString((_item$labelProperty = item[labelProperty]) !== null && _item$labelProperty !== void 0 ? _item$labelProperty : item, query);
+  }, [matcher]);
+  var fireChange = useCallback(function (value) {
+    setTimeout(function () {
+      onSelect === null || onSelect === void 0 || onSelect(value !== null && value !== void 0 ? value : emptyValue);
+      onChange === null || onChange === void 0 || onChange(getSelectedValue(value, emptyValue, valueProperty));
+    }, 50);
+  }, [emptyValue, onSelect, onChange]);
+  var _useReducer = useReducer(function (state, action) {
+      if (action.type === "open") {
+        var index = state.items.indexOf(state.multiple ? state.value[0] : state.value);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          open: true,
+          activeIndex: index > -1 ? index : null
+        });
+      }
+      if (action.type === "close") {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          activeIndex: null,
+          open: false
+        });
+      }
+      if (action.type === "active" && state.open) {
+        if (autoComplete && action.index !== null) state.query = state.items[action.index];
+        return _objectSpread(_objectSpread({}, state), {}, {
+          activeIndex: action.index
+        });
+      }
+      if (action.type === "setValue") {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          value: action.value,
+          selectedIndex: state.items.indexOf(state.multiple ? action.value[0] : action.value)
+        });
+      }
+      if (action.type === "changeValue") {
+        var _action$value;
+        var newState = _objectSpread(_objectSpread({}, state), {}, {
+          value: state.emptyValue,
+          activeIndex: 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) {
+          if (multiple) {
+            var values = [];
+            if (action.value && autoComplete) values.push.apply(values, _toConsumableArray(action.value.split(/,\s?/)));else if (action.value) values.push(action.value);
+            newState.value = _toConsumableArray(state.value);
+            values.forEach(function (value) {
+              var _newState$value$inclu, _newState$value;
+              newState.value = (_newState$value$inclu = (_newState$value = newState.value).includes) !== null && _newState$value$inclu !== void 0 && _newState$value$inclu.call(_newState$value, value) ? newState.value.filter(function (item) {
+                return item !== value;
+              }) : [].concat(_toConsumableArray(newState.value), [value]);
+            });
+          } else {
+            newState.value = action.value;
+          }
+        }
+        if (!state.multiple) newState.open = false;
+        fireChange(newState.value);
+        return newState;
+      }
+      if (action.type === "removeItem") {
+        var newValue = state.value;
+        if (state.multiple) {
+          var _action$index;
+          newValue = _toConsumableArray(newValue);
+          newValue.splice((_action$index = action.index) !== null && _action$index !== void 0 ? _action$index : -1, 1);
+        } else {
+          newValue = "";
+        }
+        fireChange(newValue);
+        return _objectSpread(_objectSpread({}, state), {}, {
+          value: newValue
+        });
+      }
+      if (action.type === "startQuery") {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          loading: true,
+          query: action.query
+        });
+      }
+      if (action.type === "options") {
+        var _newState = _objectSpread(_objectSpread({}, state), {}, {
+          loading: false,
+          query: action.query
+        });
+        var optionList = _toConsumableArray(action.options);
+        if (autoComplete && action.query !== undefined) {
+          optionList = dedupe([action.query].concat(_toConsumableArray(optionList)));
+        }
+        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)
+        });
+        Object.entries(grouped).forEach(function (_ref2) {
+          var _newState$items;
+          var _ref3 = _slicedToArray(_ref2, 2),
+            key = _ref3[0],
+            list = _ref3[1];
+          if (key) {
+            _newState.items.push({
+              ___group___: true,
+              label: key
+            });
+          }
+          (_newState$items = _newState.items).push.apply(_newState$items, _toConsumableArray(list));
+        });
+        if (action.setActive) {
+          var _index = _newState.items.findIndex(function (opt) {
+            return !opt.___group___;
+          });
+          _newState.activeIndex = _index >= 0 ? _index : null;
+        } else {
+          _newState.activeIndex = null;
+        }
+        listContentRef.current = _newState.items;
+        return _newState;
+      }
+      return state;
+    }, {
+      multiple: multiple,
+      emptyValue: emptyValue,
+      open: false,
+      loading: false,
+      activeIndex: null,
+      selectedIndex: null,
+      value: emptyValue,
+      // filter
+      query: undefined,
+      // dropdown items
+      items: []
+    }),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  useEffect(function () {
+    if (!multiple) {
+      var _ref4;
+      var newOption = (allowCreate || autoComplete) && deferred ? createOption(deferred) : undefined;
+      var hasValue = options.find(function (opt) {
+        var _opt$valueProperty;
+        return ((_opt$valueProperty = opt[valueProperty]) !== null && _opt$valueProperty !== void 0 ? _opt$valueProperty : opt) === deferred;
+      });
+      optionsRef.current = options;
+      // if current value missing in list inject it
+      if (!hasValue && newOption) {
+        optionsRef.current = [newOption].concat(_toConsumableArray(options !== null && options !== void 0 ? options : []));
+      }
+      dispatch({
+        type: "options",
+        options: optionsRef.current
+      });
+      dispatch({
+        type: "setValue",
+        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : ""
+      });
+    }
+    if (multiple) {
+      optionsRef.current = [];
+      var _value = (deferred !== null && deferred !== void 0 ? deferred : []).map(function (item) {
+        var _ref5;
+        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;
+        });
+        if (!hasValue && newOption) {
+          optionsRef.current.push(newOption);
+        }
+        return (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : "";
+      });
+      optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), _toConsumableArray(options !== null && options !== void 0 ? options : []));
+      dispatch({
+        type: "options",
+        options: optionsRef.current
+      });
+      dispatch({
+        type: "setValue",
+        value: _value
+      });
+    }
+  }, [deferred, options, multiple, allowCreate, autoComplete, createOption]);
+  var fireQuery = useDebounce(function (query) {
+    void Promise.resolve(onQuery === null || onQuery === void 0 ? void 0 : onQuery(query)).then(function (options) {
+      var newOptions = _toConsumableArray(options);
+      // if autocomplete inject other filtered options from history
+      if (autoComplete) {
+        newOptions.push.apply(newOptions, _toConsumableArray(optionsRef.current.filter(function (opt) {
+          return macthOption === null || macthOption === void 0 ? void 0 : macthOption(opt, query);
+        })));
+      }
+      dispatch({
+        type: "options",
+        query: query,
+        options: newOptions,
+        open: true,
+        setActive: true
+      });
+    });
+  }, [onQuery]);
+
+  // handlers
+  var handleQuery = useCallback(function (query) {
+    if (!query) {
+      dispatch({
+        type: "options",
+        query: "",
+        options: optionsRef.current
+      });
+    } else {
+      if (onQuery) {
+        dispatch({
+          type: "startQuery",
+          query: query
+        });
+        return fireQuery(query);
+      }
+      dispatch({
+        type: "options",
+        query: query,
+        open: true,
+        setActive: true,
+        options: optionsRef.current.filter(function (opt) {
+          return macthOption === null || macthOption === void 0 ? void 0 : macthOption(opt, query);
+        })
+      });
+    }
+  }, [macthOption, onQuery]);
+  var handleChange = useCallback(function (value) {
+    var values = value;
+    if (autoComplete && multiple && value) {
+      values = value.split(/,\s?/);
+    }
+    dispatch({
+      type: "changeValue",
+      value: value !== null && value !== void 0 && value.___create___ ? value.value : value
+    });
+    if (value !== null && value !== void 0 && value.___create___) {
+      optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), [createOption(value.value)]);
+    }
+    if (autoComplete) {
+      optionsRef.current = dedupe([].concat(_toConsumableArray(isArray(values) ? values : [values]), _toConsumableArray(optionsRef.current)));
+    }
+    dispatch({
+      type: "options",
+      options: optionsRef.current
+    });
+  }, []);
+  var handleRemove = useCallback(function (index) {
+    dispatch({
+      type: "removeItem",
+      index: index
+    });
+  }, []);
+  var setOpen = useCallback(function (open) {
+    dispatch({
+      type: open ? "open" : "close"
+    });
+    dispatch({
+      type: "options",
+      query: undefined,
+      options: optionsRef.current
+    });
+  }, []);
+  var setActiveIndex = useCallback(function (index) {
+    dispatch({
+      type: "active",
+      index: index
+    });
+  }, []);
+  return {
+    state: state,
+    listRef: listRef,
+    focusableRef: focusableRef,
+    listContentRef: listContentRef,
+    handleChange: handleChange,
+    handleRemove: handleRemove,
+    handleQuery: handleQuery,
+    macthOption: macthOption,
+    setActiveIndex: setActiveIndex,
+    setOpen: setOpen,
+    setItemRef: function setItemRef(index, node) {
+      listRef.current[index] = node;
+    }
+  };
+};
+
+export { useSelect };

package/dist/esm/utils/eventHandlers.js

@@ -0,0 +1,50 @@
+'use client';
+
+import { debounce } from '@react-fabric/utilities';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 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.
+ */
+
+/** ***************** common handler for enter press *******************/
+var handleEnter = function handleEnter(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 () {
+    return undefined;
+  }, 100);
+  return function (e) {
+    if (!e.shiftKey && !e.altKey && !e.metaKey && e.key === "Enter" && callback) {
+      if (stopPropagation) e === null || e === void 0 || e.stopPropagation();
+      cbHandle(e);
+      if (preventDefault) {
+        e.preventDefault();
+        return false;
+      }
+    }
+  };
+};
+
+export { handleEnter };

package/dist/esm/utils/getColor.js

@@ -0,0 +1,39 @@
+'use client';
+
+import { isColor } from '@react-fabric/utilities';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 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.
+ */
+
+var getColor = function getColor(color) {
+  if (color && isColor(color)) {
+    return color;
+  }
+};
+var getBgClass = function getBgClass(bg) {
+  if (bg && !isColor(bg)) {
+    return "bg-".concat(bg);
+  }
+};
+
+export { getBgClass, getColor };

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

@@ -0,0 +1,8 @@
+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> & {
+    value?: AnyObject;
+    inline?: boolean;
+    fileUrl?: (path: string) => string;
+    uploadHandler: UploadHandler;
+}) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -0,0 +1,20 @@
+import { type ReactElement } from "react";
+export interface ControllerProps {
+    /**
+     * field name
+     */
+    name?: string;
+    children: ReactElement | ((props: {
+        name: string;
+        error?: string;
+        checked: boolean;
+        value: AnyObject;
+        invalid?: boolean;
+        readOnly?: boolean;
+        disabled?: boolean;
+        onBlur: () => void;
+        onChange: (value: AnyObject) => void;
+        inputRef?: React.Ref<HTMLInputElement>;
+    }) => ReactElement);
+}
+export declare const Controller: ({ name, children, ...rest }: ControllerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { type yup } from "@react-fabric/utilities";
+import { type PropsWithChildren, type Ref } from "react";
+import { type FormState } from "react-hook-form";
+export interface FormRef<K extends KeyValue> {
+    state: FormState<K>;
+    reset: () => void;
+    clear: () => void;
+    submit: () => void;
+    validate: () => Promise<boolean>;
+    getValues: () => K;
+    setValue: (key: keyof K, value: AnyObject) => void;
+    setValues: (values: K) => void;
+}
+export interface FormProps<K extends KeyValue = KeyValue> {
+    formRef?: Ref<FormRef<K>>;
+    /**
+     * form data schema
+     */
+    schema?: yup.ObjectSchema<K>;
+    /**
+     * default data values
+     */
+    defaultValues?: K;
+    /**
+     * change callback
+     */
+    onChange?: (values: K) => void;
+    /**
+     * submit callback after successful validation
+     */
+    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;

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

@@ -0,0 +1,23 @@
+import { type AxiosRequestConfig } from "axios";
+export type UploadHandler = (data: FormData, config: AxiosRequestConfig) => Promise<string>;
+interface FileInfo {
+    key: string;
+    filename: string;
+    size: number;
+    mime: string;
+    uploaded?: true;
+    file?: File;
+    path?: string;
+    error?: string;
+    progress?: number;
+    abort?: AbortController["abort"];
+}
+export declare const useFileUploader: (uploader: UploadHandler, initialList?: string | FileInfo | FileInfo[], multiple?: boolean) => {
+    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

@@ -0,0 +1,16 @@
+import { yup } from "@react-fabric/utilities";
+import { type FormSchema } from "../types/schema";
+import { type UploadHandler } from "./useFileUploader";
+export declare const useFormBuilder: (schema: FormSchema[], options?: {
+    prefix?: string;
+    inline?: boolean;
+    fileUrl?: (path: string) => string;
+    uploadHandler?: UploadHandler;
+}) => {
+    formDef: import("react/jsx-runtime").JSX.Element;
+    schemaDef: yup.ObjectSchema<{
+        [x: string]: any;
+    }, yup.AnyObject, {
+        [x: string]: any;
+    }, "">;
+};

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

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,27 @@
+import "./i18n";
+export { Controller } from "./form/Controller";
+export { Form, type FormRef } from "./form/Form";
+export { useFileUploader } from "./hooks/useFileUploader";
+export { useFormBuilder } from "./hooks/useFormBuilder";
+export { type FormSchema } from "./types/schema";
+export { ArrayInput } from "./input/ArrayInput";
+export { Checkbox } from "./input/Checkbox";
+export { ColorInput } from "./input/ColorInput";
+export { ColorPicker } from "./input/ColorPicker";
+export { Field } from "./input/Field";
+export { FileInput } from "./input/File";
+export { HiddenInput } from "./input/Hidden";
+export { Input } from "./input/Input";
+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 { Search } from "./input/Search";
+export { Slider } from "./input/Slider";
+export { Switch } from "./input/Switch";
+export { Textarea } from "./input/Textarea";
+export { AutoComplete } from "./select/AutoComplete";
+export { DualList } from "./select/DualList";
+export { List } from "./select/List";
+export { Select } from "./select/Select";

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

@@ -0,0 +1,64 @@
+import { type ReactNode, type RefObject } from "react";
+export interface ArrayInputProps {
+    /**
+     * input label
+     */
+    label?: string;
+    /**
+     * append to label end
+     */
+    appendLabel?: JSX.Element | string | number | boolean;
+    /**
+     * info label at bottom
+     */
+    info?: string;
+    /**
+     * required
+     */
+    required?: boolean;
+    /**
+     * disabled input
+     */
+    disabled?: boolean;
+    /**
+     * read-only input
+     */
+    readOnly?: boolean;
+    /**
+     * field name
+     */
+    name: string;
+    /**
+     * minimum required length
+     */
+    minItems?: number;
+    /**
+     * field name to focus on add
+     */
+    focusName?: string;
+    /**
+     * enable drag-n-drop sorting
+     */
+    enableSorting?: boolean;
+    children: React.ReactNode | ((props: {
+        index: number;
+        name: string;
+    }) => ReactNode);
+    /**
+     * add item button label
+     */
+    addLabel?: string;
+    /**
+     * fixed length list
+     */
+    fixedList?: boolean;
+    arrayRef?: RefObject<{
+        addItem: (item: AnyObject) => void;
+        removeItem: (idx: number) => void;
+    }>;
+    /**
+     * Add item
+     */
+    onAdd?: () => AnyObject;
+}
+export declare const ArrayInput: ({ name, children, addLabel, fixedList, focusName, onAdd, arrayRef, enableSorting, disabled, readOnly, minItems, ...rest }: ArrayInputProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { type UploadHandler } from "../hooks/useFileUploader";
+export interface Props extends RefProp {
+    /**
+     * field name
+     */
+    name?: string;
+    /**
+     * actual avatar storage path
+     */
+    value?: string;
+    /**
+     * avatar stream src
+     */
+    src?: string;
+    size?: string | number;
+    /**
+     * upload handler to store file in temp storage
+     */
+    uploadHandler: UploadHandler;
+    fileUrl?: (path: string) => string;
+    /**
+     * change handler
+     *
+     * @param file
+     * @param base64
+     * @returns storage path
+     */
+    onChange?: (path: string) => void;
+}
+export declare const AvatarInput: ({ src, size, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;