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

package/dist/esm/input/RadioGroup.js

@@ -3,11 +3,12 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { cloneChildren } from '@react-fabric/core';
+import classNames from 'classnames';
 import { cloneElement } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "name", "className", "optionWidth", "value", "onChange"];
+var _excluded = ["children", "name", "className", "optionWidth", "vertical", "value", "onChange"];
 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; }
 /**
@@ -16,19 +17,20 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * The component supports inline and vertical orientations, and can handle change events.
  *
  * @param {RadioGroupProps} props - The properties for the RadioGroup component.
- * @returns {JSX.Element} The rendered RadioGroup component.
+ * @returns {React.ReactElement} The rendered RadioGroup component.
  */
 var RadioGroup = function RadioGroup(_ref) {
   var children = _ref.children,
     name = _ref.name,
     className = _ref.className,
     optionWidth = _ref.optionWidth,
+    vertical = _ref.vertical,
     value = _ref.value,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsx("div", {
-      className: className,
+      className: classNames(className, vertical && "flex flex-col gap-1"),
       children: cloneChildren(children, function (child) {
         return /*#__PURE__*/cloneElement(child, {
           name: name,

package/dist/esm/input/RangeSlider.js

@@ -22,7 +22,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * The component is designed to be flexible and customizable, allowing for various configurations.
  *
  * @param {RangeProps} props - The properties for the RangeSlider component.
- * @returns {JSX.Element} The rendered RangeSlider component.
+ * @returns {React.ReactElement} The rendered RangeSlider component.
  */
 var RangeSlider = function RangeSlider(_ref) {
   var error = _ref.error;

package/dist/esm/input/Search.js

@@ -20,7 +20,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * and handling search actions with a debounce mechanism.
  *
  * @param {SearchProps} props - The properties for the Search component.
- * @returns {JSX.Element} The rendered Search input component.
+ * @returns {React.ReactElement} The rendered Search input component.
  */
 var Search = function Search(_ref) {
   var ref = _ref.ref,

package/dist/esm/input/Slider.js

@@ -20,7 +20,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It also supports deferred value updates for smoother interactions.
  *
  * @param {SliderProps} props - The properties for the Slider component.
- * @returns {JSX.Element} The rendered Slider component.
+ * @returns {React.ReactElement} The rendered Slider component.
  */
 var Slider = function Slider(_ref) {
   var error = _ref.error;

package/dist/esm/input/Switch.js

@@ -21,7 +21,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It supports disabled and invalid states, and handles change events.
  *
  * @param {SwitchProps} props - The properties for the Switch component.
- * @returns {JSX.Element} The rendered Switch input component.
+ * @returns {React.ReactElement} The rendered Switch input component.
  */
 var Switch = function Switch(_ref) {
   var ref = _ref.ref,
@@ -55,17 +55,17 @@ var Switch = function Switch(_ref) {
     onChange === null || onChange === void 0 || onChange((_e$target$checked2 = e === null || e === void 0 ? void 0 : e.target.checked) !== null && _e$target$checked2 !== void 0 ? _e$target$checked2 : false);
   }, [onChange]);
   return /*#__PURE__*/jsxs("label", {
-    className: classNames(invalid ? "ring-danger-500" : "ring-primary-500", disabled ? "opacity-50 cursor-not-allowed" : "hover:opacity-100 cursor-pointer", "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-focus-visible:ring-1"),
+    className: classNames(invalid ? "ring-danger-500" : "ring-primary-500", disabled ? "opacity-50 cursor-not-allowed" : "opacity-85 hover:opacity-100 cursor-pointer", "inline-flex gap-1 py-1 items-center relative rounded ring-offset-2 has-focus-visible:ring-1"),
     style: {
       width: width
     },
     children: [/*#__PURE__*/jsxs("div", {
-      className: classNames(actualValue && getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? getBgClass("".concat(defaultColor, "-500")) : "bg-tint-200"), "relative grid grid-cols-2 items-center h-[1.5em] min-w-[2.5em] cursor-pointer rounded-full p-[0.25em] transition-colors duration-200 ease-in-out"),
+      className: classNames(actualValue && getBgClass(color ? "".concat(color, "-500") : "primary-500"), !actualValue && (defaultColor ? getBgClass("".concat(defaultColor, "-500")) : "bg-tint-200"), "relative grid grid-cols-2 items-center h-[1.5em] min-w-[2.5em] rounded-full p-[0.25em] transition-colors duration-200 ease-in-out"),
       style: {
         backgroundColor: actualValue ? getColor(color) : getColor(defaultColor)
       },
       children: [/*#__PURE__*/jsx("input", _objectSpread({
-        className: classNames("appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0"),
+        className: classNames("appearance-none absolute opacity-0 inset-0 bg-transparent border-none cursor-[inherit] outline-none ring-0"),
         "aria-invalid": invalid,
         "aria-disabled": disabled,
         disabled: disabled,

package/dist/esm/input/Textarea.js

@@ -20,7 +20,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * providing a clear interface for text input with optional validation and accessibility features.
  *
  * @param {TextareaProps} props - The properties for the Textarea component.
- * @returns {JSX.Element} The rendered Textarea component.
+ * @returns {React.ReactElement} The rendered Textarea component.
  */
 var Textarea = function Textarea(_ref) {
   var ref = _ref.ref,

package/dist/esm/internal/InputWrapper.js

@@ -87,7 +87,7 @@ var InputWrapper = function InputWrapper(_ref) {
     }), children, allowClear && showClear && /*#__PURE__*/jsx(Icon, {
       icon: "icon-[mdi--close]",
       onClick: handleClear,
-      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", "fabric-inputClear", textarea && "self-start mt-1 me-1")
+      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", "fabric-inputClear")
     }), decorateEnd && /*#__PURE__*/jsx("div", {
       onClickCapture: doFocus,
       className: classNames("fabric-decorate", "text-muted leading-none flex-content", isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
@@ -101,7 +101,7 @@ var InputWrapper = function InputWrapper(_ref) {
         return setExpanded(!isExpanded);
       },
       icon: isExpanded ? "icon-[mdi--arrow-collapse]" : "icon-[mdi--arrow-expand]",
-      className: "hidden group-hover:block absolute top-0 end-0 bg-base hover:bg-tint-200 p-1 opacity-65 rounded-capped"
+      className: "hidden group-hover:block absolute top-0 inset-e-0 bg-default hover:bg-tint-200 p-1 opacity-65 rounded-capped"
     })]
   });
   return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {

package/dist/esm/ranger/index.js

@@ -195,17 +195,17 @@ var useRanger = function useRanger(opts) {
     } else {
       setActiveHandleIndex(i);
     }
-    var handleRelease = function handleRelease(e) {
+    var _handleRelease = function handleRelease(e) {
       var _getLatest5 = getLatest(),
         tempValues = _getLatest5.tempValues,
         onChange = _getLatest5.onChange,
         onDragEnd = _getLatest5.onDragEnd;
       document.removeEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
       document.removeEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
-      document.removeEventListener("mouseup", handleRelease, {
+      document.removeEventListener("mouseup", _handleRelease, {
         capture: true
       });
-      document.removeEventListener("touchend", handleRelease, {
+      document.removeEventListener("touchend", _handleRelease, {
         capture: true
       });
       var sortedValues = sortNumList(tempValues || values);
@@ -218,10 +218,10 @@ var useRanger = function useRanger(opts) {
     onDragStart === null || onDragStart === void 0 || onDragStart();
     document.addEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
     document.addEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
-    document.addEventListener("mouseup", handleRelease, {
+    document.addEventListener("mouseup", _handleRelease, {
       capture: true
     });
-    document.addEventListener("touchend", handleRelease, {
+    document.addEventListener("touchend", _handleRelease, {
       capture: true
     });
   }, [getLatest, handleDrag]);

package/dist/esm/select/AutoComplete.js

@@ -20,10 +20,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It supports multiple selections, history suggestions, and custom styling.
  *
  * @param {AutoCompleteProps} props - The properties for the AutoComplete component.
- * @returns {JSX.Element} The rendered AutoComplete component.
+ * @returns {React.ReactElement} The rendered AutoComplete component.
  */
 var AutoComplete = function AutoComplete(_ref) {
-  var _refs$reference$curre;
+  var _refs$domReference$cu2, _refs$domReference$cu3, _refs$reference$curre;
   var ref = _ref.ref,
     name = _ref.name,
     value = _ref.value,
@@ -246,10 +246,12 @@ var AutoComplete = function AutoComplete(_ref) {
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
       icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsx(FloatingPortal, {
+      root: (_refs$domReference$cu2 = (_refs$domReference$cu3 = refs.domReference.current) === null || _refs$domReference$cu3 === void 0 ? void 0 : _refs$domReference$cu3.closest(".theme-base")) !== null && _refs$domReference$cu2 !== void 0 ? _refs$domReference$cu2 : undefined,
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         initialFocus: -1,
         visuallyHiddenDismiss: true,
+        closeOnFocusOut: true,
         children: /*#__PURE__*/jsx(Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
           className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",

package/dist/esm/select/DualList.js

@@ -25,7 +25,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
  *
  * @param {DualListProps<T>} props - The properties for the DualList component.
- * @returns {JSX.Element} The rendered DualList component.
+ * @returns {React.ReactElement} The rendered DualList component.
  */
 var DualList = function DualList(_ref) {
   var ref = _ref.ref,
@@ -188,7 +188,7 @@ var DualList = function DualList(_ref) {
         className: "self-center mx-2",
         children: /*#__PURE__*/jsxs(ButtonGroup, {
           vertical: true,
-          className: "outline overflow-hidden bg-base",
+          className: "outline overflow-hidden bg-default",
           children: [/*#__PURE__*/jsx(Button, {
             size: "sm",
             variant: "link",

package/dist/esm/select/List.js

@@ -4,7 +4,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, autoUpdate, useListNavigation, useTypeahead, useInteractions, FloatingFocusManager } from '@floating-ui/react';
 import { Chip } from '@react-fabric/core';
-import { isArray, isEmpty } from '@react-fabric/utilities';
+import { isArray, isEmpty, getByPath } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, Fragment, useId, useCallback, useLayoutEffect } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
@@ -17,7 +17,7 @@ var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "pl
 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, _state$activeItem;
+  var _state$query;
   var ref = _ref.ref,
     name = _ref.name,
     value = _ref.value,
@@ -244,6 +244,7 @@ var List = function List(_ref) {
       context: context,
       initialFocus: -1,
       visuallyHiddenDismiss: true,
+      closeOnFocusOut: true,
       children: /*#__PURE__*/jsx(Options, _objectSpread(_objectSpread({
         ref: refs.setFloating,
         className: classNames("max-h-96 z-0 rounded-capped rounded-t-none outline", disabled && "pointer-events-none opacity-65"),
@@ -258,7 +259,7 @@ var List = function List(_ref) {
         itemRef: setItemRef,
         itemProps: makeItemProps,
         empty: emptyDisplay,
-        info: (_state$activeItem = state.activeItem) === null || _state$activeItem === void 0 ? void 0 : _state$activeItem[infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"],
+        info: getByPath(state.activeItem, infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"),
         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

@@ -3,6 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { EmptyContent } from '@react-fabric/core';
+import { getByPath } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { Trans } from 'react-i18next';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -27,7 +28,7 @@ var Options = function Options(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
     ref: ref,
-    className: classNames("bg-base select-none flex flex-col", className),
+    className: classNames("bg-default select-none flex flex-col", className),
     style: style
   }, rest), {}, {
     children: [/*#__PURE__*/jsxs("div", {
@@ -37,9 +38,9 @@ var Options = function Options(_ref) {
           i18nKey: "form:select.emptyList"
         })
       })), items.map(function (item, index) {
-        var _item$value, _item$labelProperty;
+        var _item$value, _getByPath;
         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",
+          className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-default border-t",
           children: item.label
         }, index);
         if (item.___create___) return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
@@ -70,7 +71,7 @@ var Options = function Options(_ref) {
           "data-active": active === index ? true : undefined,
           className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer", "data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline")
         }, itemProps(item)), {}, {
-          children: children(item, (_item$labelProperty = item[labelProperty]) !== null && _item$labelProperty !== void 0 ? _item$labelProperty : item)
+          children: children(item, (_getByPath = getByPath(item, labelProperty)) !== null && _getByPath !== void 0 ? _getByPath : "".concat(item))
         }), index);
       })]
     }), info && /*#__PURE__*/jsx("div", {

package/dist/esm/select/Select.js

@@ -4,7 +4,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, autoUpdate, shift, flip, offset, useClick, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
 import { Chip, Icon } from '@react-fabric/core';
-import { isArray, isEmpty } from '@react-fabric/utilities';
+import { isArray, isEmpty, getByPath } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useId, useMemo, useCallback, useLayoutEffect } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
@@ -16,7 +16,7 @@ var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "req
 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) {
-  var _state$query, _refs$reference$curre, _state$activeItem;
+  var _state$query, _refs$domReference$cu3, _refs$domReference$cu4, _refs$reference$curre;
   var ref = _ref.ref,
     name = _ref.name,
     value = _ref.value,
@@ -262,10 +262,12 @@ var Select = function Select(_ref) {
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
       icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsx(FloatingPortal, {
+      root: (_refs$domReference$cu3 = (_refs$domReference$cu4 = refs.domReference.current) === null || _refs$domReference$cu4 === void 0 ? void 0 : _refs$domReference$cu4.closest(".theme-base")) !== null && _refs$domReference$cu3 !== void 0 ? _refs$domReference$cu3 : undefined,
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
         initialFocus: -1,
         visuallyHiddenDismiss: true,
+        closeOnFocusOut: true,
         children: /*#__PURE__*/jsx(Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
           className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",
@@ -280,7 +282,7 @@ var Select = function Select(_ref) {
           itemRef: setItemRef,
           itemProps: makeItemProps,
           empty: emptyDisplay,
-          info: (_state$activeItem = state.activeItem) === null || _state$activeItem === void 0 ? void 0 : _state$activeItem[infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"],
+          info: getByPath(state.activeItem, infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"),
           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

@@ -176,19 +176,21 @@ var useSelect = function useSelect(_ref) {
         return _newState;
       }
       return state;
-    }, {
-      multiple: multiple,
-      emptyValue: emptyValue,
-      open: alwaysOpen || defaultOpen,
-      loading: false,
-      activeIndex: null,
-      activeItem: null,
-      selectedIndex: null,
-      value: emptyValue,
-      // filter
-      query: undefined,
-      // dropdown items
-      items: []
+    }, {}, function () {
+      return {
+        multiple: multiple,
+        emptyValue: emptyValue,
+        open: alwaysOpen || defaultOpen,
+        loading: false,
+        activeIndex: null,
+        activeItem: null,
+        selectedIndex: null,
+        value: emptyValue,
+        // filter
+        query: undefined,
+        // dropdown items
+        items: []
+      };
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],

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

@@ -4,6 +4,6 @@ import { type SchemaEditorProps } from "../types/schema";
  * It provides a form interface to modify schema properties dynamically.
  *
  * @param {SchemaEditorProps} props - The properties for the SchemaEditor component.
- * @returns {JSX.Element} The rendered SchemaEditor component.
+ * @returns {React.ReactElement} The rendered SchemaEditor component.
  */
 export declare const SchemaEditor: ({ schemaDef, dynamic, acceptableTypes, optionLists, children, onSubmit, onChange, }: SchemaEditorProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -43,7 +43,7 @@ export interface FormProps<K extends KeyValue = KeyValue> {
  * It supports nested form structures and allows for custom validation schemas using Yup.
  *
  * @param {FormProps<K>} props - The properties for the Form component.
- * @returns {JSX.Element} The rendered Form component.
+ * @returns {React.ReactElement} The rendered Form component.
  *
  * @example
  * ```jsx
@@ -66,15 +66,4 @@ export interface FormProps<K extends KeyValue = KeyValue> {
  * @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, resetOnChange, 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/form/useForm.d.ts

@@ -0,0 +1,11 @@
+export declare const useForm: <K extends KeyValue = KeyValue>() => {
+    values: import("react-hook-form").DeepPartialSkipArrayKey<K> & K;
+    formState: import("react-hook-form").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>;
+};

package/dist/types/index.d.ts

@@ -1,10 +1,11 @@
 import "./i18n";
 export { Controller } from "./form/Controller";
-export { Form, useForm, type FormRef } from "./form/Form";
+export { Form, type FormRef } from "./form/Form";
+export { useForm } from "./form/useForm";
 export { SchemaEditor } from "./builder/SchemaEditor";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";
-export { DATA_TYPES, SCHEMA_CUSTOM_LIST, type FormSchema, type SchemaDef, } 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";

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -14,7 +14,7 @@ interface Props {
  * This is useful for cases where you need to update the form state without user interaction.
  *
  * @param {Object} props - Component properties.
- * @returns {JSX.Element} The rendered hidden input field and error icon.
+ * @returns {React.ReactElement} The rendered hidden input field and error icon.
  */
 export declare const HiddenInput: ({ invalid, error, value, name, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

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

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

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

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

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

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

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