@react-fabric/form 1.0.0-beta.5 → 1.0.0-beta.51

package/dist/esm/select/List.js

@@ -6,33 +6,35 @@ import { useFloating, autoUpdate, useListNavigation, useTypeahead, useInteractio
 import { Chip } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo, Fragment, useId, useCallback } from 'react';
+import { useMemo, Fragment, useId, useCallback, useLayoutEffect } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { InputWrapper } from '../internal/InputWrapper.js';
 import { Options } from './Options.js';
 import { useSelect } from './useSelect.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "placeholder", "autoFocus", "options", "height", "groupProperty", "labelProperty", "valueProperty", "multiple", "allowCreate", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed", "invalid", "error", "allowClear", "decorateStart", "decorateEnd", "data-inner", "data-hide-selected"];
+var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "placeholder", "autoFocus", "options", "height", "groupProperty", "labelProperty", "valueProperty", "sortProperty", "multiple", "allowCreate", "searchable", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed", "emptyDisplay", "invalid", "error", "allowClear", "decorateStart", "decorateEnd", "data-inner", "data-hide-selected"];
 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 List = function List(_ref) {
   var _state$query;
-  _ref.ref;
-    var name = _ref.name,
+  var ref = _ref.ref,
+    name = _ref.name,
     value = _ref.value,
     readOnly = _ref.readOnly,
     disabled = _ref.disabled,
     required = _ref.required,
-    placeholder = _ref.placeholder;
-    _ref.autoFocus;
-    var options = _ref.options,
+    placeholder = _ref.placeholder,
+    autoFocus = _ref.autoFocus,
+    options = _ref.options,
     height = _ref.height,
     groupProperty = _ref.groupProperty,
     labelProperty = _ref.labelProperty,
     valueProperty = _ref.valueProperty,
+    sortProperty = _ref.sortProperty,
     multiple = _ref.multiple,
     allowCreate = _ref.allowCreate,
+    searchable = _ref.searchable,
     createOption = _ref.createOption,
     matcher = _ref.matcher,
     renderer = _ref.renderer,
@@ -40,6 +42,7 @@ var List = function List(_ref) {
     onChange = _ref.onChange,
     onSelect = _ref.onSelect,
     onEnterPressed = _ref.onEnterPressed,
+    emptyDisplay = _ref.emptyDisplay,
     invalid = _ref.invalid,
     error = _ref.error;
     _ref.allowClear;
@@ -61,6 +64,7 @@ var List = function List(_ref) {
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
+      sortProperty: sortProperty,
       allowCreate: allowCreate,
       createOption: createOption,
       matcher: matcher,
@@ -138,9 +142,10 @@ var List = function List(_ref) {
           }
         } else if (evt.key === "Backspace") {
           !state.query && handleRemove();
-        } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (state.activeIndex === null) {
-            setActiveIndex(state.selectedIndex);
+        } else if (!searchable || ["ArrowUp", "ArrowDown"].includes(evt.key)) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
+            var _state$selectedIndex;
+            setActiveIndex((_state$selectedIndex = state.selectedIndex) !== null && _state$selectedIndex !== void 0 ? _state$selectedIndex : 0);
           }
           setTimeout(function () {
             var _props$onKeyDown;
@@ -185,6 +190,14 @@ var List = function List(_ref) {
       });
     }
   }, [state.value, state.query, placeholder, renderer]);
+  useLayoutEffect(function () {
+    setTimeout(function () {
+      var _listRef$current$stat;
+      state.selectedIndex && ((_listRef$current$stat = listRef.current[state.selectedIndex]) === null || _listRef$current$stat === void 0 ? void 0 : _listRef$current$stat.scrollIntoView({
+        block: "center"
+      }));
+    }, 100);
+  }, [state.selectedIndex]);
   return /*#__PURE__*/jsxs(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
     children: [/*#__PURE__*/jsx(InputWrapper, {
       showClear: !isEmpty(state.value),
@@ -197,23 +210,32 @@ var List = function List(_ref) {
       className: "z-1 rounded-b-none",
       "data-inner": true,
       wrapperRef: refs.setReference,
-      children: /*#__PURE__*/jsxs("div", {
+      children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+        role: "none",
         "data-select-display": "true",
-        className: "group flex-1 py-1 px-2 truncate text-start flex gap-1 flex-wrap",
-        children: [!hideSelected && displayValue, /*#__PURE__*/jsx("input", _objectSpread(_objectSpread({
+        className: classNames("group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start", multiple ? "flex-wrap" : "flex-nowrap overflow-hidden")
+      }, referenceProps), {}, {
+        onMouseUp: function onMouseUp(e) {
+          var _e$currentTarget$quer;
+          return (_e$currentTarget$quer = e.currentTarget.querySelector("input")) === null || _e$currentTarget$quer === void 0 ? void 0 : _e$currentTarget$quer.focus();
+        },
+        children: [!hideSelected && displayValue, /*#__PURE__*/jsx("input", {
+          readOnly: !searchable || readOnly,
           disabled: disabled,
           value: (_state$query = state.query) !== null && _state$query !== void 0 ? _state$query : "",
           "aria-invalid": invalid,
           "data-testid": name,
           name: name,
-          className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24", disabled && "cursor-not-allowed pointer-events-none"),
-          placeholder: isEmpty(state.value) ? placeholder : ""
-        }, referenceProps), {}, {
+          size: 1,
+          ref: ref,
+          autoFocus: autoFocus,
+          className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 min-w-24", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+          placeholder: isEmpty(state.value) ? placeholder : "",
           onChange: function onChange(evt) {
             return handleQuery(evt.target.value);
           }
-        }))]
-      })
+        })]
+      }))
     }), /*#__PURE__*/jsx(FloatingFocusManager, {
       context: context,
       initialFocus: -1,
@@ -227,11 +249,14 @@ var List = function List(_ref) {
       }, floatingProps), {}, {
         items: state.items,
         active: state.activeIndex,
+        valueProperty: valueProperty,
+        labelProperty: labelProperty,
         itemRef: setItemRef,
         itemProps: makeItemProps,
-        children: function children(item) {
-          var _ref4, _renderer3;
-          return (_ref4 = (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : item[labelProperty]) !== null && _ref4 !== void 0 ? _ref4 : item;
+        empty: emptyDisplay,
+        children: function children(item, label) {
+          var _renderer3;
+          return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
         }
       }))
     })]

package/dist/esm/select/Options.js

@@ -34,7 +34,7 @@ var Options = function Options(_ref) {
         i18nKey: "form:select.emptyList"
       })
     })), items.map(function (item, index) {
-      var _item$labelProperty;
+      var _item$value, _item$labelProperty;
       if (item.___group___) return /*#__PURE__*/jsx("p", {
         className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t",
         children: item.label
@@ -51,7 +51,7 @@ var Options = function Options(_ref) {
         children: /*#__PURE__*/jsx(Trans, {
           i18nKey: "form:select.createOption",
           values: {
-            query: item.value
+            query: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item
           },
           components: [/*#__PURE__*/jsx("strong", {
             children: "query"

package/dist/esm/select/Select.js

@@ -12,7 +12,7 @@ import { Options } from './Options.js';
 import { useSelect } from './useSelect.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "options", "groupProperty", "labelProperty", "valueProperty", "multiple", "searchable", "allowCreate", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "options", "defaultOpen", "hideHandle", "groupProperty", "labelProperty", "valueProperty", "sortProperty", "multiple", "searchable", "allowCreate", "emptyDisplay", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
 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 Select = function Select(_ref) {
@@ -28,14 +28,18 @@ var Select = function Select(_ref) {
     autoFocus = _ref.autoFocus,
     error = _ref.error,
     options = _ref.options,
+    defaultOpen = _ref.defaultOpen,
+    hideHandle = _ref.hideHandle,
     groupProperty = _ref.groupProperty,
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     _ref$valueProperty = _ref.valueProperty,
     valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    sortProperty = _ref.sortProperty,
     multiple = _ref.multiple,
     searchable = _ref.searchable,
     allowCreate = _ref.allowCreate,
+    emptyDisplay = _ref.emptyDisplay,
     createOption = _ref.createOption,
     matcher = _ref.matcher,
     renderer = _ref.renderer,
@@ -48,9 +52,11 @@ var Select = function Select(_ref) {
       value: value,
       options: options,
       multiple: multiple,
+      defaultOpen: defaultOpen,
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
+      sortProperty: sortProperty,
       allowCreate: allowCreate,
       createOption: createOption,
       matcher: matcher,
@@ -140,6 +146,9 @@ var Select = function Select(_ref) {
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
           }
@@ -236,13 +245,13 @@ var Select = function Select(_ref) {
         size: 1,
         ref: ref,
         autoFocus: autoFocus,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
         placeholder: isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);
         }
       })]
-    })), !state.loading && /*#__PURE__*/jsx(Icon, {
+    })), !state.loading && !hideHandle && /*#__PURE__*/jsx(Icon, {
       className: classNames("flex-content p-2 z-0 order-9 text-muted cursor-pointer self-stretch flex items-center h-auto", state.open && "-scale-y-100 pointer-events-none", disabled && "pointer-events-none"),
       onClick: function onClick() {
         return !disabled && openDropdown();
@@ -259,7 +268,7 @@ var Select = function Select(_ref) {
         visuallyHiddenDismiss: true,
         children: /*#__PURE__*/jsx(Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
-          className: "outline shadow-lg max-h-[40vh] z-[var(--z-popover)]",
+          className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",
           style: _objectSpread({
             width: (_refs$reference$curre = refs.reference.current) === null || _refs$reference$curre === void 0 ? void 0 : _refs$reference$curre.getBoundingClientRect().width
           }, floatingStyles)
@@ -270,6 +279,7 @@ var Select = function Select(_ref) {
           labelProperty: labelProperty,
           itemRef: setItemRef,
           itemProps: makeItemProps,
+          empty: emptyDisplay,
           children: function children(item, label) {
             var _renderer3;
             return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;

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';
 
@@ -14,6 +14,8 @@ var useSelect = function useSelect(_ref) {
   var _ref$options = _ref.options,
     options = _ref$options === void 0 ? EMPTY_ARRAY : _ref$options,
     value = _ref.value,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     autoComplete = _ref.autoComplete,
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
@@ -25,6 +27,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,
@@ -133,13 +136,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,7 +173,7 @@ var useSelect = function useSelect(_ref) {
     }, {
       multiple: multiple,
       emptyValue: emptyValue,
-      open: false,
+      open: defaultOpen,
       loading: false,
       activeIndex: null,
       selectedIndex: null,
@@ -201,7 +205,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 +215,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 +250,7 @@ var useSelect = function useSelect(_ref) {
         setActive: true
       });
     });
-  }, [onQuery]);
+  }, [onQuery], 300);
 
   // handlers
   var handleQuery = useCallback(function (query) {

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,21 @@ 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();
+    }
     if (!e.shiftKey && !e.altKey && !e.metaKey && e.key === "Enter" && callback) {
       if (stopPropagation) e === null || e === void 0 || e.stopPropagation();
       cbHandle(e);
@@ -47,4 +53,4 @@ var handleEnter = function handleEnter(callback) {
   };
 };
 
-export { handleEnter };
+export { useHandleEnter };

package/dist/esm/utils/getColor.js

@@ -35,5 +35,10 @@ var getBgClass = function getBgClass(bg) {
     return "bg-".concat(bg);
   }
 };
+var getColorClass = function getColorClass(color) {
+  if (color && !isColor(color)) {
+    return "text-".concat(color);
+  }
+};
 
-export { getBgClass, getColor };
+export { getBgClass, getColor, getColorClass };

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,2 @@
+import { type SchemaEditorProps } from "../types/schema";
+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,7 @@ export interface ControllerProps {
         disabled?: boolean;
         onBlur: () => void;
         onChange: (value: AnyObject) => void;
-        inputRef?: React.Ref<HTMLInputElement>;
+        ref?: 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

@@ -1,6 +1,9 @@
 import { type yup } from "@react-fabric/utilities";
 import { type PropsWithChildren, type Ref } from "react";
 import { type FormState } 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,7 +11,7 @@ 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> {
@@ -31,3 +34,4 @@ 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;
+export {};

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

@@ -1,11 +1,13 @@
 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?: {
+export declare const useFormBuilder: <T extends unknown = 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;
     schemaDef: yup.ObjectSchema<{

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 { 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 ReactNode, 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
      */
@@ -48,17 +52,46 @@ export interface ArrayInputProps {
      * add item button label
      */
     addLabel?: string;
+    buttonPosition?: "top" | "bottom" | "both";
     /**
      * fixed length list
      */
     fixedList?: boolean;
-    arrayRef?: RefObject<{
-        addItem: (item: AnyObject) => void;
+    arrayRef?: Ref<{
+        addItem: (item: T) => void;
         removeItem: (idx: number) => void;
     }>;
     /**
-     * Add item
+     * add new item
      */
     onAdd?: () => AnyObject;
+    /**
+     * on item remove
+     */
+    onRemove?: (item: T, idx: number) => void;
+    /**
+     * before item remove
+     */
+    onBeforeRemove?: (item: T, idx: number) => Promise<boolean> | boolean;
+    /**
+     * can remove item
+     */
+    canRemove?: (props: {
+        item: T;
+        index: number;
+        lastItem: boolean;
+    }) => boolean;
+    /**
+     * field width
+     */
+    width?: number | string;
+    /**
+     * inline label and input
+     */
+    inline?: boolean;
+    /**
+     * label width for inline
+     */
+    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;
+export declare const ArrayInput: <T extends unknown = string>({ name, children, addLabel, fixedList, focusName, buttonPosition, onAdd, onRemove, onBeforeRemove, canRemove, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps<T>) => import("react/jsx-runtime").JSX.Element;