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

package/dist/esm/form/Form.js

@@ -5,14 +5,13 @@ import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { yupResolver } from '@hookform/resolvers/yup';
 import { useDebounce } from '@react-fabric/core';
 import { EMPTY_OBJECT } from '@react-fabric/utilities';
 import { useRef, useTransition, useEffect, useCallback, useImperativeHandle } from 'react';
 import { useForm as useForm$1, FormProvider, useFormContext, useWatch } from 'react-hook-form';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["formRef", "schema", "children", "defaultValues", "onSubmit", "onChange"];
+var _excluded = ["formRef", "resolver", "children", "defaultValues", "onSubmit", "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; }
 var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
@@ -31,10 +30,7 @@ var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
  * ```jsx
  * <Form
  *   formRef={formRef}
- *   schema={yup.object().shape({
- *     name: yup.string().required("Name is required"),
- *     email: yup.string().email("Invalid email").required("Email is required"),
- *   })}
+ *   resolver={hookformResolver(schema)}
  *   defaultValues={{ name: "", email: "" }}
  *   onSubmit={(values) => {
  *     console.log("Form submitted with values:", values);
@@ -52,7 +48,7 @@ var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
  */
 var Form = function Form(_ref) {
   var formRef = _ref.formRef,
-    schema = _ref.schema,
+    resolver = _ref.resolver,
     children = _ref.children,
     _ref$defaultValues = _ref.defaultValues,
     defaultValues = _ref$defaultValues === void 0 ? EMPTY_OBJECT : _ref$defaultValues,
@@ -63,7 +59,7 @@ var Form = function Form(_ref) {
   var ref = useRef(null);
   var form = useForm$1({
     shouldFocusError: true,
-    resolver: schema && yupResolver(schema),
+    resolver: resolver,
     defaultValues: defaultValues
   });
   var _useTransition = useTransition(),
@@ -139,6 +135,7 @@ var Form = function Form(_ref) {
   }, [_onSubmit, form, form.formState, defaultValues]);
   var onInvalid = useCallback(function (_, e) {
     var el = e.target;
+    console.log("Invalid:", _, e);
     setTimeout(function () {
       var _el$querySelector;
       return (_el$querySelector = el.querySelector("input[aria-invalid='true'],textarea[aria-invalid='true']")) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.focus();

package/dist/esm/hooks/useFormBuilder.js

@@ -1,6 +1,7 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { yupResolver } from '@hookform/resolvers/yup';
 import { EmptyContent } from '@react-fabric/core';
 import { yup, isNil, isEmpty } from '@react-fabric/utilities';
 import { useMemo, Fragment } from 'react';
@@ -100,9 +101,14 @@ var useFormBuilder = function useFormBuilder(schema) {
       return !!schm.id;
     })) !== null && _schema$filter !== void 0 ? _schema$filter : [];
   }, [schema]);
-  var schemaDef = yup.object(Object.fromEntries(filteredSchema.map(function (field) {
-    return [field.id, makeYupField(field)];
-  })));
+  var schemaDef = useMemo(function () {
+    return yup.object(Object.fromEntries(filteredSchema.map(function (field) {
+      return [field.id, makeYupField(field)];
+    })));
+  }, [filteredSchema]);
+  var resolver = useMemo(function () {
+    return yupResolver(schemaDef);
+  }, [schemaDef]);
   var formDef = /*#__PURE__*/jsxs(Fragment, {
     children: [filteredSchema.map(function (field, idx) {
       return /*#__PURE__*/jsx("div", {
@@ -122,6 +128,7 @@ var useFormBuilder = function useFormBuilder(schema) {
   });
   return {
     formDef: formDef,
+    resolver: resolver,
     schemaDef: schemaDef
   };
 };

package/dist/esm/input/ArrayInput.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, useSortable } from '@dnd-kit/sortable';
-import { Icon, CoreIcons, Tooltip, Button, cloneChildren } from '@react-fabric/core';
+import { Icon, Tooltip, Button, cloneChildren } from '@react-fabric/core';
 import { isFalse, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useState, useEffect, useMemo, useCallback, useImperativeHandle, cloneElement } from 'react';
@@ -196,7 +196,7 @@ var ArrayInput = function ArrayInput(_ref) {
         },
         children: [/*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({
           className: isDragging ? "cursor-grabbing" : "cursor-grab",
-          icon: CoreIcons.dragHandle
+          icon: "icon-[mdi--drag-vertical]"
         }, attributes), listeners)), children]
       });
     }
@@ -219,7 +219,7 @@ var ArrayInput = function ArrayInput(_ref) {
         children: /*#__PURE__*/jsx(Button, {
           size: "sm",
           "aria-label": "Add item",
-          icon: CoreIcons.insert,
+          icon: "icon-[mdi--plus-circle-outline]",
           onClick: function onClick() {
             return handleAdd(onAdd === null || onAdd === void 0 ? void 0 : onAdd());
           },
@@ -260,7 +260,7 @@ var ArrayInput = function ArrayInput(_ref) {
               }));
             }), canRemove !== false && /*#__PURE__*/jsx(Button, {
               "aria-label": "Remove item",
-              icon: CoreIcons.remove,
+              icon: "icon-[mdi--minus-circle-outline]",
               color: "danger",
               variant: "link",
               className: "self-end",

package/dist/esm/input/AvatarInput.js

@@ -5,11 +5,11 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { Avatar, Icon, CoreIcons, ProgressBar } from '@react-fabric/core';
+import { Avatar, Icon, ProgressBar } from '@react-fabric/core';
+import classNames from 'classnames';
 import { useState, useEffect } from 'react';
 import { useFileUploader } from '../hooks/useFileUploader.js';
 import { HiddenInput } from './Hidden.js';
-import classNames from 'classnames';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler"];
@@ -128,7 +128,7 @@ var AvatarInput = function AvatarInput(_ref) {
               children: file.error
             })
           }), file.progress && /*#__PURE__*/jsx(Icon, {
-            icon: CoreIcons.stop,
+            icon: "icon-[mdi--stop]",
             bg: "danger",
             color: "white",
             size: "sm",
@@ -139,7 +139,7 @@ var AvatarInput = function AvatarInput(_ref) {
               return (_file$abort = file.abort) === null || _file$abort === void 0 ? void 0 : _file$abort.call(file);
             }
           }), !file.progress && /*#__PURE__*/jsx(Icon, {
-            icon: CoreIcons.trash,
+            icon: "icon-[mdi--trash-can-outline]",
             color: "danger",
             size: "sm",
             className: "flex-content",

package/dist/esm/input/Checkbox.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { CoreIcons, Icon } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import classNames from 'classnames';
 import { useState, useDeferredValue, useMemo, useEffect, useCallback } from 'react';
 import { ErrorIcon } from '../internal/ErrorIcon.js';
@@ -43,10 +43,10 @@ var Checkbox = function Checkbox(_ref) {
   var deferred = useDeferredValue(!!checked);
   var iconOn = useMemo(function () {
     var _ref2;
-    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : CoreIcons.checkboxOn;
+    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : "icon-[mdi--checkbox-marked]";
   }, [icon, iconChecked]);
   var iconOff = useMemo(function () {
-    return icon !== null && icon !== void 0 ? icon : CoreIcons.checkboxOff;
+    return icon !== null && icon !== void 0 ? icon : "icon-[mdi--checkbox-blank-outline]";
   }, [icon]);
   useEffect(function () {
     setActualValue(deferred);

package/dist/esm/input/ColorInput.js

@@ -4,7 +4,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, autoUpdate, shift, flip, offset, arrow, useClick, useDismiss, useInteractions, FloatingArrow } from '@floating-ui/react';
-import { Icon, CoreIcons } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import { useState, useDeferredValue, useEffect, useCallback, startTransition, useRef } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
 import { ColorPicker } from './ColorPicker.js';
@@ -120,7 +120,7 @@ var ColorInput = function ColorInput(_ref) {
         children: !actualValue && /*#__PURE__*/jsx(Icon, {
           size: "md",
           className: "text-muted",
-          icon: CoreIcons.colorSwatch
+          icon: "icon-[mdi--palette]"
         })
       })
     })), isOpen && /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
@@ -142,7 +142,7 @@ var ColorInput = function ColorInput(_ref) {
       })]
     })), !disabled && showPicker && /*#__PURE__*/jsx(Icon, {
       className: "flex-content p-1",
-      icon: CoreIcons.colorPicker,
+      icon: "icon-[mdi--eyedropper]",
       onClick: function onClick() {
         return window.EyeDropper && new window.EyeDropper().open().then(function (resp) {
           return handleChange(resp.sRGBHex);

package/dist/esm/input/File.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Icon, CoreIcons } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import { isArray, mergeRefs, isEmpty, FileUtil, Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useState, useDeferredValue, useEffect, useCallback, Fragment } from 'react';
@@ -132,7 +132,7 @@ var FileInput = function FileInput(_ref) {
             children: Format.bytes(file.size)
           }), /*#__PURE__*/jsx(Icon, {
             className: "cursor-pointer opacity-30 hover:opacity-80",
-            icon: CoreIcons.close,
+            icon: "icon-[mdi--close]",
             onClick: function onClick() {
               removeFile(idx);
             }

package/dist/esm/input/Password.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Tooltip, Button, CoreIcons } from '@react-fabric/core';
+import { Tooltip, Button } from '@react-fabric/core';
 import classNames from 'classnames';
 import { useState, useDeferredValue, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -76,7 +76,7 @@ var Password = function Password(_ref) {
         color: "warning",
         variant: "link",
         "aria-label": t(show ? "password.hide" : "password.show"),
-        icon: show ? CoreIcons.eyeOff : CoreIcons.eye,
+        icon: show ? "icon-[mdi--eye-off-outline]" : "icon-[mdi--eye-outline]",
         onClick: function onClick() {
           return setShow(!show);
         }

package/dist/esm/input/Radio.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { CoreIcons, Icon } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import classNames from 'classnames';
 import { useMemo, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -34,10 +34,10 @@ var Radio = function Radio(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var iconOn = useMemo(function () {
     var _ref2;
-    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : CoreIcons.radioOn;
+    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : "icon-[mdi--radiobox-marked]";
   }, [icon, iconChecked]);
   var iconOff = useMemo(function () {
-    return icon !== null && icon !== void 0 ? icon : CoreIcons.radioOff;
+    return icon !== null && icon !== void 0 ? icon : "icon-[mdi--radiobox-blank]";
   }, [icon]);
   var handleChange = useCallback(function (e) {
     // @ts-expect-error ignore

package/dist/esm/input/Search.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useDebounce, Icon, CoreIcons, Button } from '@react-fabric/core';
+import { useDebounce, Icon, Button } from '@react-fabric/core';
 import { useState, useDeferredValue, useRef, useEffect, useCallback, Fragment } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
 import { useHandleEnter } from '../utils/eventHandlers.js';
@@ -81,14 +81,13 @@ var Search = function Search(_ref) {
     actionButton: /*#__PURE__*/jsxs(Fragment, {
       children: [searching && /*#__PURE__*/jsx(Icon, {
         className: "p-2",
-        icon: CoreIcons.spinner,
-        animate: "spin"
+        icon: "icon-[svg-spinners--eclipse]"
       }), !searching && !hideHandle && /*#__PURE__*/jsx(Button, {
         tabIndex: -1,
         variant: "link",
         "aria-label": "search",
         disabled: !actualValue,
-        icon: CoreIcons.search,
+        icon: "icon-[mdi--magnify]",
         onClick: handleSearch
       })]
     })

package/dist/esm/internal/ErrorIcon.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { Tooltip, Icon, CoreIcons } from '@react-fabric/core';
+import { Tooltip, Icon } from '@react-fabric/core';
 import { isString } from '@react-fabric/utilities';
 import { useTranslation } from 'react-i18next';
 import { jsx } from 'react/jsx-runtime';
@@ -24,7 +24,7 @@ var ErrorIcon = function ErrorIcon(_ref) {
     children: /*#__PURE__*/jsx(Icon, {
       className: "flex-content first:ms-2 self-center",
       color: "danger",
-      icon: CoreIcons.alert
+      icon: "icon-[mdi--alert-circle-outline]"
     })
   });
 };

package/dist/esm/internal/InputWrapper.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { Icon, CoreIcons } from '@react-fabric/core';
+import { Icon } from '@react-fabric/core';
 import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
@@ -85,7 +85,7 @@ var InputWrapper = function InputWrapper(_ref) {
       invalid: invalid,
       error: error
     }), children, allowClear && showClear && /*#__PURE__*/jsx(Icon, {
-      icon: CoreIcons.close,
+      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")
     }), decorateEnd && /*#__PURE__*/jsx("div", {
@@ -100,14 +100,14 @@ var InputWrapper = function InputWrapper(_ref) {
       onClick: function onClick() {
         return setExpanded(!isExpanded);
       },
-      icon: isExpanded ? CoreIcons.arrowCollapse : CoreIcons.arrowExpand,
+      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"
     })]
   });
   return /*#__PURE__*/jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
     children: /*#__PURE__*/jsx("div", {
       ref: elRef,
-      className: classNames("relative min-h-8 flex flex-col flex-nowrap", width ? "flex-auto" : "flex-1"),
+      className: classNames("relative min-h-8 flex flex-col flex-nowrap", width ? "flex-content" : "flex-1"),
       style: {
         width: width,
         flexBasis: width

package/dist/esm/select/AutoComplete.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useFloating, autoUpdate, shift, flip, offset, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import { Chip, Icon, CoreIcons } from '@react-fabric/core';
+import { Chip, Icon } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useRef, useId, useMemo, useCallback, useLayoutEffect } from 'react';
@@ -243,9 +243,8 @@ var AutoComplete = function AutoComplete(_ref) {
         className: "opacity-0 absolute"
       })]
     }), state.loading && /*#__PURE__*/jsx(Icon, {
-      animate: "spin",
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
-      icon: CoreIcons.spinner
+      icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsx(FloatingPortal, {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,

package/dist/esm/select/DualList.js

@@ -6,7 +6,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useDraggable, useDroppable, DndContext, DragOverlay } from '@dnd-kit/core';
 import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
-import { ButtonGroup, Button, CoreIcons } from '@react-fabric/core';
+import { ButtonGroup, Button } from '@react-fabric/core';
 import { mergeRefs } from '@react-fabric/utilities';
 import { useState, useDeferredValue, useEffect, useMemo, useCallback } from 'react';
 import { Field } from '../input/Field.js';
@@ -195,7 +195,7 @@ var DualList = function DualList(_ref) {
             "aria-label": "scroll to top",
             onClick: moveAllLeft,
             icon: {
-              icon: CoreIcons.chevronsLeft,
+              icon: "icon-[mdi--chevron-double-left]",
               rtlFlip: true
             },
             disabled: !rightOptions.length
@@ -205,7 +205,7 @@ var DualList = function DualList(_ref) {
             "aria-label": "scroll up",
             onClick: moveRightSelected,
             icon: {
-              icon: CoreIcons.chevronLeft,
+              icon: "icon-[mdi--chevron-left]",
               rtlFlip: true
             },
             disabled: !rightSelected.length
@@ -215,7 +215,7 @@ var DualList = function DualList(_ref) {
             "aria-label": "scroll down",
             onClick: moveLeftSelected,
             icon: {
-              icon: CoreIcons.chevronRight,
+              icon: "icon-[mdi--chevron-right]",
               rtlFlip: true
             },
             disabled: !leftSelected.length
@@ -225,7 +225,7 @@ var DualList = function DualList(_ref) {
             "aria-label": "scroll to bottom",
             onClick: moveAllRight,
             icon: {
-              icon: CoreIcons.chevronsRight,
+              icon: "icon-[mdi--chevron-double-right]",
               rtlFlip: true
             },
             disabled: !leftOptions.length

package/dist/esm/select/List.js

@@ -1,9 +1,7 @@
 'use client';
 
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useFloating, autoUpdate, useListNavigation, useTypeahead, useInteractions, FloatingFocusManager } from '@floating-ui/react';
 import { Chip } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
@@ -259,26 +257,10 @@ var List = function List(_ref) {
         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"],
-        children: ( /*#__PURE__*/function () {
-          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, label) {
-            var _renderer3;
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  _context.next = 2;
-                  return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-                case 2:
-                  return _context.abrupt("return", _context.sent);
-                case 3:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          }));
-          return function (_x, _x2) {
-            return _ref4.apply(this, arguments);
-          };
-        }())
+        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/Select.js

@@ -1,11 +1,9 @@
 'use client';
 
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useFloating, autoUpdate, shift, flip, offset, useClick, useDismiss, useListNavigation, useTypeahead, useInteractions, FloatingPortal, FloatingFocusManager } from '@floating-ui/react';
-import { Chip, Icon, CoreIcons } from '@react-fabric/core';
+import { Chip, Icon } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useId, useMemo, useCallback, useLayoutEffect } from 'react';
@@ -200,7 +198,7 @@ var Select = function Select(_ref) {
     } else if (!isEmpty(state.value) && !state.query) {
       var _ref3, _renderer2;
       return /*#__PURE__*/jsx("span", {
-        className: "self-center pointer-events-none select-none",
+        className: "self-center pointer-events-none select-none truncate leading-tight",
         children: (_ref3 = (_renderer2 = renderer === null || renderer === void 0 ? void 0 : renderer(state.value)) !== null && _renderer2 !== void 0 ? _renderer2 : state.value[labelProperty]) !== null && _ref3 !== void 0 ? _ref3 : state.value
       });
     }
@@ -248,7 +246,7 @@ 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 peer", 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" : "min-w-2"),
         placeholder: isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);
@@ -259,11 +257,10 @@ var Select = function Select(_ref) {
       onClick: function onClick() {
         return !disabled && openDropdown();
       },
-      icon: CoreIcons.chevronDown
+      icon: "icon-[mdi--chevron-down]"
     }), state.loading && /*#__PURE__*/jsx(Icon, {
-      animate: "spin",
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
-      icon: CoreIcons.spinner
+      icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsx(FloatingPortal, {
       children: /*#__PURE__*/jsx(FloatingFocusManager, {
         context: context,
@@ -284,26 +281,10 @@ var Select = function Select(_ref) {
           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"],
-          children: ( /*#__PURE__*/function () {
-            var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, label) {
-              var _renderer3;
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    _context.next = 2;
-                    return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-                  case 2:
-                    return _context.abrupt("return", _context.sent);
-                  case 3:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee);
-            }));
-            return function (_x, _x2) {
-              return _ref4.apply(this, arguments);
-            };
-          }())
+          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/types/form/Form.d.ts

@@ -1,6 +1,5 @@
-import { type yup } from "@react-fabric/utilities";
 import { type PropsWithChildren, type Ref } from "react";
-import { type FormState } from "react-hook-form";
+import { type FormState, type Resolver } from "react-hook-form";
 type NestedKeyOf<T extends object> = {
     [K in keyof T & (string | number)]: T[K] extends object ? `${K}` | `${K}.${NestedKeyOf<T[K]>}` : K;
 }[keyof T & (string | number)];
@@ -17,9 +16,10 @@ export interface FormRef<K extends KeyValue> {
 export interface FormProps<K extends KeyValue = KeyValue> {
     formRef?: Ref<FormRef<K>>;
     /**
-     * form data schema
+     * react-hook-form resolver for validation
+     * @see {@link https://react-hook-form.com/ts#Resolver}
      */
-    schema?: yup.ObjectSchema<K>;
+    resolver?: Resolver<K>;
     /**
      * default data values
      */
@@ -45,10 +45,7 @@ export interface FormProps<K extends KeyValue = KeyValue> {
  * ```jsx
  * <Form
  *   formRef={formRef}
- *   schema={yup.object().shape({
- *     name: yup.string().required("Name is required"),
- *     email: yup.string().email("Invalid email").required("Email is required"),
- *   })}
+ *   resolver={hookformResolver(schema)}
  *   defaultValues={{ name: "", email: "" }}
  *   onSubmit={(values) => {
  *     console.log("Form submitted with values:", values);
@@ -64,7 +61,7 @@ export interface FormProps<K extends KeyValue = KeyValue> {
  * @see {@link https://react-hook-form.com/docs/useform} for more details on the properties.
  * @see {@link https://github.com/jquense/yup} for more details on the Yup validation schema.
  */
-export declare const Form: <K extends KeyValue>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <K extends KeyValue>({ formRef, resolver, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
 export declare const useForm: <K extends KeyValue = KeyValue>() => {
     values: import("react-hook-form").DeepPartialSkipArrayKey<K> & K;
     formState: FormState<K>;

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

@@ -39,6 +39,12 @@ export declare const useFormBuilder: <T extends AnyObject = string>(schema: Form
     optionLists?: KeyValue<BaseSelectProps<T>>;
 }) => {
     formDef: import("react/jsx-runtime").JSX.Element;
+    resolver: import("react-hook-form").Resolver<{
+        [x: string]: any;
+    }, unknown, {
+        [x: string]: any;
+        [x: number]: any;
+    }>;
     schemaDef: yup.ObjectSchema<{
         [x: string]: any;
     }, yup.AnyObject, {

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

@@ -1,6 +1,6 @@
+import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type UploadHandler } from "../hooks/useFileUploader";
-import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 export interface Props extends RefProp {
     /**
      * field name

package/dist/types/select/DualList.d.ts

@@ -1,5 +1,4 @@
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import { type ReactElement } from "react";
+import { type NestedKeys, type ReactElement, type RefProp } from "@react-fabric/core/dist/types/types";
 import { type FieldProps } from "../input/Field";
 export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<HTMLInputElement> {
     /**
@@ -17,15 +16,15 @@ export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<
     /**
      * group by property name
      */
-    groupProperty?: keyof T;
+    groupProperty?: NestedKeys<T>;
     /**
      * label property name
      */
-    labelProperty?: keyof T;
+    labelProperty?: NestedKeys<T>;
     /**
      * value property name
      */
-    valueProperty?: keyof T;
+    valueProperty?: NestedKeys<T>;
     /**
      * empty list display
      */
@@ -33,7 +32,7 @@ export interface DualListProps<T> extends Omit<FieldProps, "children">, RefProp<
     /**
      * item renderer
      */
-    renderer?: (option: T) => React.ReactNode;
+    renderer?: (option: T) => ReactElement;
     /**
      * change handler
      */

package/dist/types/select/Options.d.ts

@@ -1,4 +1,4 @@
-import { type ReactElement } from "react";
+import { type ReactElement } from "@react-fabric/core/dist/types/types";
 export declare const Options: ({ ref, style, items, active, className, itemRef, empty, info, valueProperty, labelProperty, itemProps, children, ...rest }: {
     ref: AnyObject;
     info?: AnyObject;