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

package/dist/cjs/builder/FileField.js

@@ -114,7 +114,7 @@ var FileField = function FileField(_ref) {
               bg: "danger",
               color: "white",
               size: "sm",
-              className: "p-[2px]",
+              className: "p-0.5",
               "aria-label": "abort",
               onClick: function onClick() {
                 var _file$abort;

package/dist/cjs/builder/components/SchemaArrayForm.js

@@ -58,7 +58,9 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
       }
     });
   }, []);
-  var Wrapper = react.useCallback(function (_ref2) {
+  var Wrapper = react.useCallback(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function (_ref2) {
     var children = _ref2.children;
     if (dynamic) {
       // pass id list to dnd context

package/dist/cjs/input/ArrayInput.js

@@ -110,7 +110,7 @@ var ArrayInput = function ArrayInput(_ref) {
   var removeCheck = react.useCallback(function (item, index) {
     if (canRemove === false) return false;
     if (canRemove === "newonly") {
-      return initialList.includes(item.__ID__) ? false : true;
+      return !initialList.includes(item.__ID__);
     }
     if (typeof canRemove === "function") {
       return canRemove({
@@ -143,7 +143,9 @@ var ArrayInput = function ArrayInput(_ref) {
       removeItem: remove
     };
   });
-  var Wrapper = react.useCallback(function (_ref2) {
+  var Wrapper = react.useCallback(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function (_ref2) {
     var children = _ref2.children;
     if (enableSorting) {
       // pass id list to dnd context
@@ -262,7 +264,7 @@ var ArrayInput = function ArrayInput(_ref) {
               color: "danger",
               variant: "link",
               className: "self-end",
-              disabled: disabled || readOnly || fields.length <= minItems || removeCheck(item, index) === false,
+              disabled: disabled || readOnly || fields.length <= minItems || !removeCheck(item, index),
               onClick: function onClick() {
                 return handleRemove(item, index);
               }

package/dist/cjs/input/AvatarInput.js

@@ -132,7 +132,7 @@ var AvatarInput = function AvatarInput(_ref) {
             bg: "danger",
             color: "white",
             size: "sm",
-            className: "p-[2px] flex-content",
+            className: "p-0.5 flex-content",
             "aria-label": "abort",
             onClick: function onClick() {
               var _file$abort;

package/dist/cjs/input/Checkbox.js

@@ -57,7 +57,7 @@ var Checkbox = function Checkbox(_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, value]);
   return /*#__PURE__*/jsxRuntime.jsxs("label", {
-    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"),
+    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
     },

package/dist/cjs/input/ColorPicker.js

@@ -45,7 +45,9 @@ var ColorPicker = /*#__PURE__*/react.memo(function (_ref) {
     });
   }, [onChange]);
   return /*#__PURE__*/jsxRuntime.jsx("div", {
+    role: "none"
     // prevent default on mouse down to avoid selection issues
+    ,
     onMouseDown: function onMouseDown(e) {
       return e.preventDefault();
     },

package/dist/cjs/input/Password.js

@@ -103,7 +103,7 @@ var Password = function Password(_ref) {
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     }), !!strength && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("absolute bottom-px h-[3px] inset-x-0 after:block after:h-full after:bg-dimmed", "ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-danger-500 via-marigold-500 to-jade-500"),
+      className: classNames("absolute bottom-px h-[3px] inset-x-0 after:block after:h-full after:bg-dimmed", "ltr:bg-linear-to-r rtl:bg-linear-to-l from-danger-500 via-marigold-500 to-jade-500"),
       style: {
         paddingInlineStart: "".concat(strength > 1 ? 100 : strength * 100, "%")
       }

package/dist/cjs/input/Radio.js

@@ -44,7 +44,7 @@ var Radio = function Radio(_ref) {
     (e === null || e === void 0 ? void 0 : e.target.checked) && value && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
   }, [onChange, value]);
   return /*#__PURE__*/jsxRuntime.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" : "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"),
     style: {
       width: width
     },

package/dist/cjs/input/RangeSlider.js

@@ -138,7 +138,7 @@ var RangeSlider = function RangeSlider(_ref) {
             var key = _ref2.key,
             styles = _ref2.styles;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1", vertical && "left-1/2 -ml-0.5"),
+            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1", vertical && "left-1/2 -ml-0.5"),
             style: styles
           }, key);
         }), rangerInstance.segments.map(function (_ref3) {
@@ -162,7 +162,7 @@ var RangeSlider = function RangeSlider(_ref) {
             }, props), {}, {
               style: styles
             })), displayValue && /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-1 whitespace-nowrap", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2" : "top-1/2 -translate-y-1/2", !vertical && (key === 0 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0" : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0")),
+              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-1 whitespace-nowrap", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2" : "top-1/2 -translate-y-1/2", !vertical && (key === 0 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:end-0" : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0")),
               "data-align": key === 0 ? "start" : "end",
               style: valueStyles,
               children: utilities.Format.number(value, format)

package/dist/cjs/input/Slider.js

@@ -138,7 +138,7 @@ var Slider = function Slider(_ref) {
             var key = _ref2.key,
             styles = _ref2.styles;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1", vertical && "left-1/2 -ml-0.5"),
+            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1", vertical && "left-1/2 -ml-0.5"),
             style: styles
           }, key);
         }), rangerInstance.segments.map(function (_ref3) {
@@ -163,7 +163,7 @@ var Slider = function Slider(_ref) {
             }, props), {}, {
               style: styles
             })), displayValue && /*#__PURE__*/jsxRuntime.jsx("div", {
-              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap pointer-events-none", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0" : "top-1/2 -translate-y-1/2", !vertical && (percentage > 50 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0" : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0")),
+              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-5 whitespace-nowrap pointer-events-none", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0" : "top-1/2 -translate-y-1/2", !vertical && (percentage > 50 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:end-0" : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0")),
               "data-align": percentage > 50 ? "start" : "end",
               style: valueStyles,
               children: value === Infinity || useInfinity && value === max ? maxLabel !== null && maxLabel !== void 0 ? maxLabel : "∞" : utilities.Format.number(value, format)

package/dist/cjs/input/Switch.js

@@ -55,7 +55,7 @@ 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__*/jsxRuntime.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" : "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"),
     style: {
       width: width
     },
@@ -79,7 +79,7 @@ var Switch = function Switch(_ref) {
         onChange: handleChange
       }, rest)), /*#__PURE__*/jsxRuntime.jsx("span", {
         "aria-hidden": "true",
-        className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-[100%]" : "translate-x-0", "pointer-events-none inline-block h-[1em] start-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out"),
+        className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-full" : "translate-x-0", "pointer-events-none inline-block h-[1em] start-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out"),
         style: {
           width: "calc(50% - 0.25em)"
         }

package/dist/cjs/internal/InputWrapper.js

@@ -52,13 +52,17 @@ var InputWrapper = function InputWrapper(_ref) {
     });
   }, [isInner, rest, width]);
   var handleClear = react.useCallback(function (e) {
-    var _e$currentTarget$pare;
-    (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 || (_e$currentTarget$pare = _e$currentTarget$pare.querySelector("input,textarea,button")) === null || _e$currentTarget$pare === void 0 || _e$currentTarget$pare.focus();
+    var _e$currentTarget$pare, _parent$querySelector;
+    var parent = (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 ? void 0 : _e$currentTarget$pare.querySelector("& > :not(.fabric-decorate)");
+    var el = (_parent$querySelector = parent === null || parent === void 0 ? void 0 : parent.querySelector("input,textarea,button")) !== null && _parent$querySelector !== void 0 ? _parent$querySelector : parent;
+    el === null || el === void 0 || el.focus();
     onClear === null || onClear === void 0 || onClear();
   }, [onClear]);
   var doFocus = react.useCallback(function (e) {
-    var _e$currentTarget$pare2;
-    (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 || (_e$currentTarget$pare2 = _e$currentTarget$pare2.querySelector("input,textarea,button")) === null || _e$currentTarget$pare2 === void 0 || _e$currentTarget$pare2.focus();
+    var _e$currentTarget$pare2, _parent$querySelector2;
+    var parent = (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.querySelector("& > :not(.fabric-decorate)");
+    var el = (_parent$querySelector2 = parent === null || parent === void 0 ? void 0 : parent.querySelector("input,textarea,button")) !== null && _parent$querySelector2 !== void 0 ? _parent$querySelector2 : parent;
+    el === null || el === void 0 || el.focus();
   }, [onClear]);
   react.useEffect(function () {
     isExpanded && setTimeout(function () {
@@ -69,7 +73,7 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-99" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
       return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },

package/dist/cjs/select/AutoComplete.js

@@ -207,7 +207,7 @@ var AutoComplete = function AutoComplete(_ref) {
     required: required,
     error: error,
     wrapperRef: refs.setReference,
-    className: !multiple && expandOnEdit && state.open ? "!z-[99]" : "",
+    className: !multiple && expandOnEdit && state.open ? "z-99!" : "",
     floatingExpand: !multiple && expandOnEdit && state.open
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {

package/dist/cjs/select/DualList.js

@@ -4,13 +4,13 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core = require('@dnd-kit/core');
+var modifiers = require('@dnd-kit/modifiers');
 var core$1 = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var Field = require('../input/Field.js');
 var List = require('./List.js');
-var modifiers = require('@dnd-kit/modifiers');
-var core = require('@dnd-kit/core');
-var utilities = require('@react-fabric/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
 var _excluded = ["ref", "value", "options", "emptyDisplay", "groupProperty", "height", "labelProperty", "valueProperty", "renderer", "onChange", "name", "invalid", "readOnly", "disabled", "placeholder", "autoFocus", "error"];

package/dist/cjs/select/List.js

@@ -1,7 +1,9 @@
 'use strict';
 
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var react$1 = require('@floating-ui/react');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
@@ -257,10 +259,26 @@ 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: function children(item, label) {
-          var _renderer3;
-          return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-        }
+        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);
+          };
+        }())
       }))
     })]
   }));

package/dist/cjs/select/Options.js

@@ -49,7 +49,7 @@ var Options = function Options(_ref) {
             return itemRef(index, el);
           },
           "data-active": active === index ? true : undefined,
-          className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
+          className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none", "data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline")
         }, itemProps(item)), {}, {
           children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
             i18nKey: "form:select.createOption",
@@ -68,7 +68,7 @@ var Options = function Options(_ref) {
             return itemRef(index, el);
           },
           "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")
+          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)
         }), index);

package/dist/cjs/select/Select.js

@@ -1,7 +1,9 @@
 'use strict';
 
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var react$1 = require('@floating-ui/react');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
@@ -225,7 +227,7 @@ var Select = function Select(_ref) {
     required: required,
     error: error,
     wrapperRef: refs.setReference,
-    className: state.open ? "!z-[99]" : ""
+    className: state.open ? "z-99!" : ""
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
       role: "none",
@@ -282,10 +284,26 @@ 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: function children(item, label) {
-            var _renderer3;
-            return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-          }
+          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);
+            };
+          }())
         }))
       })
     })]

package/dist/esm/builder/FileField.js

@@ -114,7 +114,7 @@ var FileField = function FileField(_ref) {
               bg: "danger",
               color: "white",
               size: "sm",
-              className: "p-[2px]",
+              className: "p-0.5",
               "aria-label": "abort",
               onClick: function onClick() {
                 var _file$abort;

package/dist/esm/builder/components/SchemaArrayForm.js

@@ -58,7 +58,9 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
       }
     });
   }, []);
-  var Wrapper = useCallback(function (_ref2) {
+  var Wrapper = useCallback(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function (_ref2) {
     var children = _ref2.children;
     if (dynamic) {
       // pass id list to dnd context

package/dist/esm/input/ArrayInput.js

@@ -110,7 +110,7 @@ var ArrayInput = function ArrayInput(_ref) {
   var removeCheck = useCallback(function (item, index) {
     if (canRemove === false) return false;
     if (canRemove === "newonly") {
-      return initialList.includes(item.__ID__) ? false : true;
+      return !initialList.includes(item.__ID__);
     }
     if (typeof canRemove === "function") {
       return canRemove({
@@ -143,7 +143,9 @@ var ArrayInput = function ArrayInput(_ref) {
       removeItem: remove
     };
   });
-  var Wrapper = useCallback(function (_ref2) {
+  var Wrapper = useCallback(
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  function (_ref2) {
     var children = _ref2.children;
     if (enableSorting) {
       // pass id list to dnd context
@@ -262,7 +264,7 @@ var ArrayInput = function ArrayInput(_ref) {
               color: "danger",
               variant: "link",
               className: "self-end",
-              disabled: disabled || readOnly || fields.length <= minItems || removeCheck(item, index) === false,
+              disabled: disabled || readOnly || fields.length <= minItems || !removeCheck(item, index),
               onClick: function onClick() {
                 return handleRemove(item, index);
               }

package/dist/esm/input/AvatarInput.js

@@ -132,7 +132,7 @@ var AvatarInput = function AvatarInput(_ref) {
             bg: "danger",
             color: "white",
             size: "sm",
-            className: "p-[2px] flex-content",
+            className: "p-0.5 flex-content",
             "aria-label": "abort",
             onClick: function onClick() {
               var _file$abort;

package/dist/esm/input/Checkbox.js

@@ -57,7 +57,7 @@ var Checkbox = function Checkbox(_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, value]);
   return /*#__PURE__*/jsxs("label", {
-    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"),
+    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
     },

package/dist/esm/input/ColorPicker.js

@@ -45,7 +45,9 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
     });
   }, [onChange]);
   return /*#__PURE__*/jsx("div", {
+    role: "none"
     // prevent default on mouse down to avoid selection issues
+    ,
     onMouseDown: function onMouseDown(e) {
       return e.preventDefault();
     },

package/dist/esm/input/Password.js

@@ -103,7 +103,7 @@ var Password = function Password(_ref) {
       onChange: handleChange,
       onKeyDown: handleEnterPressed
     }), !!strength && /*#__PURE__*/jsx("div", {
-      className: classNames("absolute bottom-px h-[3px] inset-x-0 after:block after:h-full after:bg-dimmed", "ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-danger-500 via-marigold-500 to-jade-500"),
+      className: classNames("absolute bottom-px h-[3px] inset-x-0 after:block after:h-full after:bg-dimmed", "ltr:bg-linear-to-r rtl:bg-linear-to-l from-danger-500 via-marigold-500 to-jade-500"),
       style: {
         paddingInlineStart: "".concat(strength > 1 ? 100 : strength * 100, "%")
       }

package/dist/esm/input/Radio.js

@@ -44,7 +44,7 @@ var Radio = function Radio(_ref) {
     (e === null || e === void 0 ? void 0 : e.target.checked) && value && (onChange === null || onChange === void 0 ? void 0 : onChange(value));
   }, [onChange, value]);
   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" : "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"),
     style: {
       width: width
     },

package/dist/esm/input/RangeSlider.js

@@ -138,7 +138,7 @@ var RangeSlider = function RangeSlider(_ref) {
             var key = _ref2.key,
             styles = _ref2.styles;
           return /*#__PURE__*/jsx("div", {
-            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1", vertical && "left-1/2 -ml-0.5"),
+            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1", vertical && "left-1/2 -ml-0.5"),
             style: styles
           }, key);
         }), rangerInstance.segments.map(function (_ref3) {
@@ -162,7 +162,7 @@ var RangeSlider = function RangeSlider(_ref) {
             }, props), {}, {
               style: styles
             })), displayValue && /*#__PURE__*/jsx("div", {
-              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-1 whitespace-nowrap", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2" : "top-1/2 -translate-y-1/2", !vertical && (key === 0 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0" : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0")),
+              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-1 whitespace-nowrap", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2" : "top-1/2 -translate-y-1/2", !vertical && (key === 0 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:end-0" : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0")),
               "data-align": key === 0 ? "start" : "end",
               style: valueStyles,
               children: Format.number(value, format)

package/dist/esm/input/Slider.js

@@ -138,7 +138,7 @@ var Slider = function Slider(_ref) {
             var key = _ref2.key,
             styles = _ref2.styles;
           return /*#__PURE__*/jsx("div", {
-            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1", vertical && "left-1/2 -ml-0.5"),
+            className: classNames("absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1", vertical && "left-1/2 -ml-0.5"),
             style: styles
           }, key);
         }), rangerInstance.segments.map(function (_ref3) {
@@ -163,7 +163,7 @@ var Slider = function Slider(_ref) {
             }, props), {}, {
               style: styles
             })), displayValue && /*#__PURE__*/jsx("div", {
-              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap pointer-events-none", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0" : "top-1/2 -translate-y-1/2", !vertical && (percentage > 50 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0" : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0")),
+              className: classNames("bg-invert text-invert py-px px-2 text-xs absolute rounded z-5 whitespace-nowrap pointer-events-none", "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45", vertical ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0" : "top-1/2 -translate-y-1/2", !vertical && (percentage > 50 ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:end-0" : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0")),
               "data-align": percentage > 50 ? "start" : "end",
               style: valueStyles,
               children: value === Infinity || useInfinity && value === max ? maxLabel !== null && maxLabel !== void 0 ? maxLabel : "∞" : Format.number(value, format)

package/dist/esm/input/Switch.js

@@ -55,7 +55,7 @@ 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" : "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"),
     style: {
       width: width
     },
@@ -79,7 +79,7 @@ var Switch = function Switch(_ref) {
         onChange: handleChange
       }, rest)), /*#__PURE__*/jsx("span", {
         "aria-hidden": "true",
-        className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-[100%]" : "translate-x-0", "pointer-events-none inline-block h-[1em] start-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out"),
+        className: classNames(!disabled && "shadow-sm", actualValue ? "translate-x-full" : "translate-x-0", "pointer-events-none inline-block h-[1em] start-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out"),
         style: {
           width: "calc(50% - 0.25em)"
         }

package/dist/esm/internal/InputWrapper.js

@@ -52,13 +52,17 @@ var InputWrapper = function InputWrapper(_ref) {
     });
   }, [isInner, rest, width]);
   var handleClear = useCallback(function (e) {
-    var _e$currentTarget$pare;
-    (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 || (_e$currentTarget$pare = _e$currentTarget$pare.querySelector("input,textarea,button")) === null || _e$currentTarget$pare === void 0 || _e$currentTarget$pare.focus();
+    var _e$currentTarget$pare, _parent$querySelector;
+    var parent = (_e$currentTarget$pare = e.currentTarget.parentElement) === null || _e$currentTarget$pare === void 0 ? void 0 : _e$currentTarget$pare.querySelector("& > :not(.fabric-decorate)");
+    var el = (_parent$querySelector = parent === null || parent === void 0 ? void 0 : parent.querySelector("input,textarea,button")) !== null && _parent$querySelector !== void 0 ? _parent$querySelector : parent;
+    el === null || el === void 0 || el.focus();
     onClear === null || onClear === void 0 || onClear();
   }, [onClear]);
   var doFocus = useCallback(function (e) {
-    var _e$currentTarget$pare2;
-    (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 || (_e$currentTarget$pare2 = _e$currentTarget$pare2.querySelector("input,textarea,button")) === null || _e$currentTarget$pare2 === void 0 || _e$currentTarget$pare2.focus();
+    var _e$currentTarget$pare2, _parent$querySelector2;
+    var parent = (_e$currentTarget$pare2 = e.currentTarget.parentElement) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.querySelector("& > :not(.fabric-decorate)");
+    var el = (_parent$querySelector2 = parent === null || parent === void 0 ? void 0 : parent.querySelector("input,textarea,button")) !== null && _parent$querySelector2 !== void 0 ? _parent$querySelector2 : parent;
+    el === null || el === void 0 || el.focus();
   }, [onClear]);
   useEffect(function () {
     isExpanded && setTimeout(function () {
@@ -69,7 +73,7 @@ var InputWrapper = function InputWrapper(_ref) {
   var el = /*#__PURE__*/jsxs("div", {
     role: "none",
     ref: wrapperRef,
-    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-[99]" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
+    className: classNames("fabric-inputWrapper", invalid && "fabric-invalidWrapper", !noOutline && !noBorder && "bg-(--fabric-input) outline overflow-hidden", "flex flex-nowrap items-center flex-1", textarea ? "rounded-capped group" : "rounded", isExpanded ? "fixed inset-4 z-99" : floatingExpand ? "absolute inset-x-0" : "relative", !noOutline && "after:absolute after:bottom-0 after:h-px after:bg-primary-500 after:mx-auto"),
     onKeyDown: function onKeyDown(e) {
       return e.key === "Escape" && isExpanded && (setExpanded(false), e.stopPropagation());
     },

package/dist/esm/select/AutoComplete.js

@@ -207,7 +207,7 @@ var AutoComplete = function AutoComplete(_ref) {
     required: required,
     error: error,
     wrapperRef: refs.setReference,
-    className: !multiple && expandOnEdit && state.open ? "!z-[99]" : "",
+    className: !multiple && expandOnEdit && state.open ? "z-99!" : "",
     floatingExpand: !multiple && expandOnEdit && state.open
   }, rest), {}, {
     children: [/*#__PURE__*/jsxs("div", {

package/dist/esm/select/DualList.js

@@ -4,13 +4,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 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 { mergeRefs } from '@react-fabric/utilities';
 import { useState, useDeferredValue, useEffect, useMemo, useCallback } from 'react';
 import { Field } from '../input/Field.js';
 import { List } from './List.js';
-import { restrictToHorizontalAxis } from '@dnd-kit/modifiers';
-import { useDraggable, useDroppable, DndContext, DragOverlay } from '@dnd-kit/core';
-import { mergeRefs } from '@react-fabric/utilities';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "value", "options", "emptyDisplay", "groupProperty", "height", "labelProperty", "valueProperty", "renderer", "onChange", "name", "invalid", "readOnly", "disabled", "placeholder", "autoFocus", "error"];

package/dist/esm/select/List.js

@@ -1,7 +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, useListNavigation, useTypeahead, useInteractions, FloatingFocusManager } from '@floating-ui/react';
 import { Chip } from '@react-fabric/core';
 import { isArray, isEmpty } from '@react-fabric/utilities';
@@ -257,10 +259,26 @@ 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: function children(item, label) {
-          var _renderer3;
-          return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-        }
+        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);
+          };
+        }())
       }))
     })]
   }));

package/dist/esm/select/Options.js

@@ -49,7 +49,7 @@ var Options = function Options(_ref) {
             return itemRef(index, el);
           },
           "data-active": active === index ? true : undefined,
-          className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none", "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline")
+          className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none", "data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline")
         }, itemProps(item)), {}, {
           children: /*#__PURE__*/jsx(Trans, {
             i18nKey: "form:select.createOption",
@@ -68,7 +68,7 @@ var Options = function Options(_ref) {
             return itemRef(index, el);
           },
           "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")
+          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)
         }), index);

package/dist/esm/select/Select.js

@@ -1,7 +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 { isArray, isEmpty } from '@react-fabric/utilities';
@@ -225,7 +227,7 @@ var Select = function Select(_ref) {
     required: required,
     error: error,
     wrapperRef: refs.setReference,
-    className: state.open ? "!z-[99]" : ""
+    className: state.open ? "z-99!" : ""
   }, rest), {}, {
     children: [/*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
       role: "none",
@@ -282,10 +284,26 @@ 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: function children(item, label) {
-            var _renderer3;
-            return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-          }
+          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);
+            };
+          }())
         }))
       })
     })]

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

@@ -1,4 +1,4 @@
-import { type ReactNode, type Ref } from "react";
+import { type Ref } from "react";
 export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * input label
@@ -48,7 +48,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
         index: number;
         name: string;
         item: T;
-    }) => ReactNode);
+    }) => React.ReactNode);
     /**
      * add item button label
      */

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

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

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

@@ -1,4 +1,4 @@
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 export declare const Options: ({ ref, style, items, active, className, itemRef, empty, info, valueProperty, labelProperty, itemProps, children, ...rest }: {
     ref: AnyObject;
     info?: AnyObject;
@@ -11,5 +11,5 @@ export declare const Options: ({ ref, style, items, active, className, itemRef,
     valueProperty?: AnyObject;
     labelProperty?: AnyObject;
     itemProps: (item: AnyObject) => AnyObject;
-    children: (item: AnyObject, label: string) => ReactNode;
+    children: (item: AnyObject, label: string) => React.ReactNode;
 } & KeyValue) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.59",
+  "version": "1.0.0-beta.60",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "@dnd-kit/utilities": "~3.2.2",
     "@floating-ui/react": "~0.27.16",
     "@hookform/resolvers": "~5.2.2",
-    "@react-fabric/core": "^1.0.0-beta.59",
-    "@react-fabric/date": "^1.0.0-beta.59",
-    "@react-fabric/utilities": "^1.0.0-beta.59",
+    "@react-fabric/core": "^1.0.0-beta.60",
+    "@react-fabric/date": "^1.0.0-beta.60",
+    "@react-fabric/utilities": "^1.0.0-beta.60",
     "classnames": "~2.5.1",
     "color": "~5.0.2",
     "react-color": "~2.19.3",
@@ -62,5 +62,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "74efd06c9c5ac629b6ef5cdc6d53ecb1c356f2eb"
+  "gitHead": "a79f053ee7e13422c06d7d9c35d4f0c2610cdf5d"
 }

package/src/builder/FileField.tsx

@@ -128,7 +128,7 @@ export const FileField = ({
                   bg="danger"
                   color="white"
                   size="sm"
-                  className="p-[2px]"
+                  className="p-0.5"
                   aria-label="abort"
                   onClick={() => file.abort?.()}
                 />

package/src/builder/components/SchemaArrayForm.tsx

@@ -32,12 +32,14 @@ import {
   useOverlayService,
 } from "@react-fabric/core";
 import { isArray } from "@react-fabric/utilities";
-import { type PropsWithChildren, useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
 import { DATA_TYPES, type SchemaEditorProps } from "../../types/schema";
 import { AddSchemaFields } from "./AddSchemaFields";
 import { SchemaField } from "./SchemaField";
 
+// Need to disable prop-types lint due to uknown lint error
+/* eslint-disable react/prop-types */
 export const SchemaArrayForm = ({
   dynamic,
   acceptableTypes,
@@ -79,7 +81,8 @@ export const SchemaArrayForm = ({
   }, []);
 
   const Wrapper = useCallback(
-    ({ children }: PropsWithChildren) => {
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
+    ({ children }: { children: React.ReactNode }) => {
       if (dynamic) {
         // pass id list to dnd context
         const idMap = fields.map((item) => item.id);

package/src/form/Form.tsx

@@ -35,7 +35,7 @@ import {
 } from "react";
 import {
   FormProvider,
-  Path,
+  type Path,
   useFormContext,
   useForm as useFormHook,
   useWatch,
@@ -156,7 +156,7 @@ export const Form = <K extends KeyValue>({
       reset: () => handleReset(defaultValues),
       clear: () => handleReset(),
       submit: () => form.handleSubmit(onSubmit),
-      validate: async (fields?: Path<K>[]) => await form.trigger(fields),
+      validate: async (fields?: Array<Path<K>>) => await form.trigger(fields),
       getValues: () => form.getValues(),
       setValues: (v) => setTimeout(() => form.reset(v), 50),
       setValue: (k, v) =>

package/src/input/ArrayInput.tsx

@@ -34,14 +34,12 @@ import { isFalse, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   cloneElement,
-  use,
   useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
   useState,
   type PropsWithChildren,
-  type ReactNode,
   type Ref,
 } from "react";
 import { useFieldArray, useFormContext } from "react-hook-form";
@@ -99,7 +97,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
   enableSorting?: boolean;
   children:
     | React.ReactNode
-    | ((props: { index: number; name: string; item: T }) => ReactNode);
+    | ((props: { index: number; name: string; item: T }) => React.ReactNode);
   /**
    * add item button label
    */
@@ -228,7 +226,7 @@ export const ArrayInput = <T extends AnyObject = string>({
     (item: T, index: number) => {
       if (canRemove === false) return false;
       if (canRemove === "newonly") {
-        return initialList.includes((item as any).__ID__) ? false : true;
+        return !initialList.includes((item as any).__ID__);
       }
       if (typeof canRemove === "function") {
         return canRemove({
@@ -274,7 +272,8 @@ export const ArrayInput = <T extends AnyObject = string>({
   }));
 
   const Wrapper = useCallback(
-    ({ children }: PropsWithChildren) => {
+    // eslint-disable-next-line @typescript-eslint/promise-function-async
+    ({ children }: { children: React.ReactNode }) => {
       if (enableSorting) {
         // pass id list to dnd context
         const idMap = fields.map((item) => item.__ID__);
@@ -452,7 +451,7 @@ export const ArrayInput = <T extends AnyObject = string>({
                     disabled ||
                     readOnly ||
                     fields.length <= minItems ||
-                    removeCheck(item as any, index) === false
+                    !removeCheck(item as any, index)
                   }
                   onClick={() => handleRemove(item as any, index)}
                 />

package/src/input/AvatarInput.tsx

@@ -26,7 +26,7 @@ import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { useEffect, useState } from "react";
 import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
 import { HiddenInput } from "./Hidden";
-import { AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
+import { type AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 import classNames from "classnames";
 
 export interface Props extends RefProp {
@@ -172,7 +172,7 @@ export const AvatarInput = ({
                 bg="danger"
                 color="white"
                 size="sm"
-                className="p-[2px] flex-content"
+                className="p-0.5 flex-content"
                 aria-label="abort"
                 onClick={() => file.abort?.()}
               />

package/src/input/Checkbox.tsx

@@ -135,7 +135,7 @@ export const Checkbox = ({
         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",
+        "inline-flex gap-1 py-1 items-center relative rounded ring-offset-2 has-focus-visible:ring-1",
       )}
       style={{ width }}
     >

package/src/input/ColorPicker.tsx

@@ -138,6 +138,7 @@ export const ColorPicker: FC<ColorProps> = memo(
 
     return (
       <div
+        role="none"
         // prevent default on mouse down to avoid selection issues
         onMouseDown={(e) => e.preventDefault()}
       >

package/src/input/Password.tsx

@@ -146,7 +146,7 @@ export const Password = ({
         <div
           className={classNames(
             "absolute bottom-px h-[3px] inset-x-0 after:block after:h-full after:bg-dimmed",
-            "ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-danger-500 via-marigold-500 to-jade-500",
+            "ltr:bg-linear-to-r rtl:bg-linear-to-l from-danger-500 via-marigold-500 to-jade-500",
           )}
           style={{
             paddingInlineStart: `${strength > 1 ? 100 : strength * 100}%`,

package/src/input/Radio.tsx

@@ -113,7 +113,7 @@ export const Radio = ({
         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",
+        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-focus-visible:ring-1",
       )}
       style={{ width }}
     >

package/src/input/RangeSlider.tsx

@@ -218,7 +218,7 @@ export const RangeSlider = ({
             <div
               key={key}
               className={classNames(
-                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1",
+                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1",
                 vertical && "left-1/2 -ml-0.5",
               )}
               style={styles}
@@ -264,8 +264,8 @@ export const RangeSlider = ({
                         : "top-1/2 -translate-y-1/2",
                       !vertical &&
                         (key === 0
-                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0"
-                          : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"),
+                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:end-0"
+                          : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0"),
                     )}
                     data-align={key === 0 ? "start" : "end"}
                     style={valueStyles}

package/src/input/Slider.tsx

@@ -223,7 +223,7 @@ export const Slider = ({
             <div
               key={key}
               className={classNames(
-                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-[0] z-1",
+                "absolute inline-block h-1 w-1 rounded-sm bg-invert opacity-30 leading-0 z-1",
                 vertical && "left-1/2 -ml-0.5",
               )}
               style={styles}
@@ -262,15 +262,15 @@ export const Slider = ({
                 {displayValue && (
                   <div
                     className={classNames(
-                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-[5] whitespace-nowrap pointer-events-none",
+                      "bg-invert text-invert py-px px-2 text-xs absolute rounded z-5 whitespace-nowrap pointer-events-none",
                       "before:absolute before:h-1.5 before:w-1.5 before:z-[-1] before:bg-invert before:top-1/2 before:-translate-y-1/2 before:rotate-45",
                       vertical
-                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"
+                        ? "end-0 ltr:translate-x-full rtl:-translate-x-full translate-y-2 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0"
                         : "top-1/2 -translate-y-1/2",
                       !vertical &&
                         (percentage > 50
-                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-[0.125rem] rtl:before:-translate-x-[0.125rem] before:end-0"
-                          : "ms-3 ltr:before:-translate-x-[0.125rem] rtl:before:translate-x-[0.125rem] before:start-0"),
+                          ? "-ms-3 ltr:-translate-x-full rtl:translate-x-full ltr:before:translate-x-0.5 rtl:before:-translate-x-0.5 before:end-0"
+                          : "ms-3 ltr:before:-translate-x-0.5 rtl:before:translate-x-0.5 before:start-0"),
                     )}
                     data-align={percentage > 50 ? "start" : "end"}
                     style={valueStyles}

package/src/input/Switch.tsx

@@ -138,7 +138,7 @@ export const Switch = ({
         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",
+        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-focus-visible:ring-1",
       )}
       style={{ width }}
     >
@@ -176,7 +176,7 @@ export const Switch = ({
           aria-hidden="true"
           className={classNames(
             !disabled && "shadow-sm",
-            actualValue ? "translate-x-[100%]" : "translate-x-0",
+            actualValue ? "translate-x-full" : "translate-x-0",
             "pointer-events-none inline-block h-[1em] start-[0.25em] absolute rounded-full bg-white ring-0 transition duration-200 ease-in-out",
           )}
           style={{

package/src/internal/InputWrapper.tsx

@@ -74,9 +74,12 @@ export const InputWrapper = ({
 
   const handleClear = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
-      e.currentTarget.parentElement
-        ?.querySelector<HTMLElement>("input,textarea,button")
-        ?.focus();
+      const parent = e.currentTarget.parentElement?.querySelector(
+        "& > :not(.fabric-decorate)",
+      );
+      const el = (parent?.querySelector<HTMLElement>("input,textarea,button") ??
+        parent) as HTMLElement;
+      el?.focus();
       onClear?.();
     },
     [onClear],
@@ -84,9 +87,12 @@ export const InputWrapper = ({
 
   const doFocus = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
-      e.currentTarget.parentElement
-        ?.querySelector<HTMLElement>("input,textarea,button")
-        ?.focus();
+      const parent = e.currentTarget.parentElement?.querySelector(
+        "& > :not(.fabric-decorate)",
+      );
+      const el = (parent?.querySelector<HTMLElement>("input,textarea,button") ??
+        parent) as HTMLElement;
+      el?.focus();
     },
     [onClear],
   );
@@ -112,7 +118,7 @@ export const InputWrapper = ({
         "flex flex-nowrap items-center flex-1",
         textarea ? "rounded-capped group" : "rounded",
         isExpanded
-          ? "fixed inset-4 z-[99]"
+          ? "fixed inset-4 z-99"
           : floatingExpand
             ? "absolute inset-x-0"
             : "relative",

package/src/select/AutoComplete.tsx

@@ -276,7 +276,7 @@ export const AutoComplete = ({
       required={required}
       error={error}
       wrapperRef={refs.setReference}
-      className={!multiple && expandOnEdit && state.open ? "!z-[99]" : ""}
+      className={!multiple && expandOnEdit && state.open ? "z-99!" : ""}
       floatingExpand={!multiple && expandOnEdit && state.open}
       {...rest}
     >

package/src/select/DualList.tsx

@@ -21,8 +21,16 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import {
+  DndContext,
+  DragOverlay,
+  useDraggable,
+  useDroppable,
+} from "@dnd-kit/core";
+import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
 import { type RefProp } from "@react-fabric/core/dist/types/types";
+import { mergeRefs } from "@react-fabric/utilities";
 import {
   type ReactElement,
   useCallback,
@@ -33,14 +41,6 @@ import {
 } from "react";
 import { Field, type FieldProps } from "../input/Field";
 import { List } from "./List";
-import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-import {
-  DndContext,
-  DragOverlay,
-  useDraggable,
-  useDroppable,
-} from "@dnd-kit/core";
-import { mergeRefs } from "@react-fabric/utilities";
 
 export interface DualListProps<T>
   extends Omit<FieldProps, "children">,

package/src/select/List.tsx

@@ -324,7 +324,7 @@ export const List = <T extends AnyObject = string>({
           empty={emptyDisplay}
           info={state.activeItem?.[infoProperty ?? "info"]}
         >
-          {(item, label) => renderer?.(item) ?? label}
+          {async (item, label) => await (renderer?.(item) ?? label)}
         </Options>
       </FloatingFocusManager>
     </Wrapper>

package/src/select/Options.tsx

@@ -23,7 +23,7 @@
 
 import { EmptyContent } from "@react-fabric/core";
 import classNames from "classnames";
-import { type ReactElement, type ReactNode } from "react";
+import { type ReactElement } from "react";
 import { Trans } from "react-i18next";
 
 export const Options = ({
@@ -52,7 +52,7 @@ export const Options = ({
   valueProperty?: AnyObject;
   labelProperty?: AnyObject;
   itemProps: (item: AnyObject) => AnyObject;
-  children: (item: AnyObject, label: string) => ReactNode;
+  children: (item: AnyObject, label: string) => React.ReactNode;
 } & KeyValue) => {
   return (
     <div
@@ -87,7 +87,7 @@ export const Options = ({
                 data-active={active === index ? true : undefined}
                 className={classNames(
                   "block text-start truncate px-2 py-1 leading-normal cursor-pointer select-none",
-                  "data-[active]:bg-primary-200 data-[selected]:bg-primary-600 data-[selected]:text-white data-[active]:data-[selected]:underline",
+                  "data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline",
                 )}
                 {...itemProps(item)}
               >
@@ -108,7 +108,7 @@ export const Options = ({
               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",
+                "data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline",
               )}
               {...itemProps(item)}
             >

package/src/select/Select.tsx

@@ -281,7 +281,7 @@ export const Select = <T extends AnyObject = string>({
       required={required}
       error={error}
       wrapperRef={refs.setReference}
-      className={state.open ? "!z-[99]" : ""}
+      className={state.open ? "z-99!" : ""}
       {...rest}
     >
       <div
@@ -360,7 +360,7 @@ export const Select = <T extends AnyObject = string>({
               empty={emptyDisplay}
               info={state.activeItem?.[infoProperty ?? "info"]}
             >
-              {(item, label) => renderer?.(item) ?? label}
+              {async (item, label) => await (renderer?.(item) ?? label)}
             </Options>
           </FloatingFocusManager>
         </FloatingPortal>