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

package/dist/esm/hooks/useFileUploader.js

@@ -6,7 +6,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { isString, uuid, isObject, isArray } from '@react-fabric/utilities';
-import { useReducer, useCallback } from 'react';
+import { useReducer, useEffect, useCallback } from 'react';
 
 var _excluded = ["progress", "abort"],
   _excluded2 = ["file", "progress", "abort"];
@@ -29,7 +29,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * ```
  */
 var useFileUploader = function useFileUploader(uploader, initialList) {
-  var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? true : _ref$multiple,
+    onChange = _ref.onChange;
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "start") {
         if (!multiple) state.files.clear();
@@ -76,40 +79,26 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
       if (action.type === "remove") {
         state.files["delete"](action.key);
       }
-      state.list = Array.from(state.files.values()).map(function (file) {
-        return !file.progress && !file.error && {
-          key: file.key,
-          path: file.path,
-          mime: file.mime,
-          size: file.size,
-          uploaded: file.uploaded,
-          filename: file.filename
-        };
-      }).filter(Boolean);
-      return _objectSpread({}, state);
-    }, {
-      files: new Map(),
-      count: 0
-    }, function (state) {
-      if (initialList) {
-        if (isString(initialList)) {
+      if (action.type === "init") {
+        state.files = new Map();
+        if (isString(action.initialList)) {
           var key = uuid();
           state.files.set(key, {
             key: key,
-            path: initialList,
+            path: action.initialList,
             filename: "",
             size: 0,
             mime: ""
           });
         }
-        if (isObject(initialList)) {
+        if (isObject(action.initialList)) {
           var _key = uuid();
-          state.files.set(_key, _objectSpread(_objectSpread({}, initialList), {}, {
+          state.files.set(_key, _objectSpread(_objectSpread({}, action.initialList), {}, {
             key: _key
           }));
         }
-        if (isArray(initialList)) {
-          initialList.forEach(function (file) {
+        if (isArray(action.initialList)) {
+          action.initialList.forEach(function (file) {
             var key = uuid();
             state.files.set(key, _objectSpread(_objectSpread({}, file), {}, {
               key: key
@@ -117,14 +106,38 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
           });
         }
       }
-      state.list = Array.from(state.files.values());
-      return state;
+      state.list = Array.from(state.files.values()).map(function (file) {
+        return !file.progress && !file.error && {
+          key: file.key,
+          path: file.path,
+          mime: file.mime,
+          size: file.size,
+          uploaded: file.uploaded,
+          filename: file.filename
+        };
+      }).filter(Boolean);
+      if (action.type === "remove" || action.type === "stop") {
+        setTimeout(function () {
+          var _state$list$;
+          onChange === null || onChange === void 0 || onChange(multiple ? state.list : (_state$list$ = state.list[0]) !== null && _state$list$ !== void 0 ? _state$list$ : null);
+        }, 100);
+      }
+      return _objectSpread({}, state);
+    }, {
+      files: new Map(),
+      count: 0
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
     dispatch = _useReducer2[1];
+  useEffect(function () {
+    dispatch({
+      type: "init",
+      initialList: initialList
+    });
+  }, [initialList]);
   var doUpload = useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
       var data, _abort2;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -185,7 +198,7 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
       }, _callee);
     }));
     return function (_x, _x2) {
-      return _ref.apply(this, arguments);
+      return _ref2.apply(this, arguments);
     };
   }(), []);
   var upload = useCallback(function (files) {
@@ -212,7 +225,6 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
     remove: remove,
     retry: retry,
     pending: state.count,
-    list: state.list,
     files: Array.from(state.files.values())
   };
 };

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/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import { addTranslationBundle } from '@react-fabric/core';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/form.json.js';
+import en from './en/form.json.js';
 
 /*
  * React Fabric

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,14 +5,14 @@ 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"];
+var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler", "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; }
 /**
@@ -24,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @returns {JSX.Element} - The rendered AvatarInput component.
  */
 var AvatarInput = function AvatarInput(_ref) {
-  var _list$;
+  var _files$2;
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "6rem" : _ref$size,
     avatarName = _ref.avatarName,
@@ -36,6 +36,7 @@ var AvatarInput = function AvatarInput(_ref) {
     variant = _ref.variant,
     fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
+    _onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useFileUploader = useFileUploader( /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
@@ -55,9 +56,14 @@ var AvatarInput = function AvatarInput(_ref) {
       return function (_x, _x2) {
         return _ref2.apply(this, arguments);
       };
-    }(), value, false),
+    }(), value !== null && value !== void 0 ? value : defaultValue, {
+      multiple: false,
+      onChange: function onChange(files) {
+        var _files$path;
+        return _onChange === null || _onChange === void 0 ? void 0 : _onChange((_files$path = files === null || files === void 0 ? void 0 : files.path) !== null && _files$path !== void 0 ? _files$path : null);
+      }
+    }),
     files = _useFileUploader.files,
-    list = _useFileUploader.list,
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   var _useState = useState(""),
@@ -65,7 +71,7 @@ var AvatarInput = function AvatarInput(_ref) {
     base64 = _useState2[0],
     setBase64 = _useState2[1];
   useEffect(function () {
-    if (list !== null && list !== void 0 && list.length) {
+    if (files !== null && files !== void 0 && files.length) {
       var _files$;
       var file = files === null || files === void 0 || (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.file;
       void (file && new Response(file).blob().then(function (blob) {
@@ -82,14 +88,14 @@ var AvatarInput = function AvatarInput(_ref) {
       var _ref3, _fileUrl;
       setBase64((_ref3 = (_fileUrl = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(defaultValue !== null && defaultValue !== void 0 ? defaultValue : "")) !== null && _fileUrl !== void 0 ? _fileUrl : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : "");
     }
-  }, [files, list, defaultValue]);
+  }, [files, defaultValue]);
   useEffect(function () {
     var _fileUrl2, _fileUrl3;
     !value && defaultValue && setBase64((_fileUrl2 = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(defaultValue)) !== null && _fileUrl2 !== void 0 ? _fileUrl2 : defaultValue);
     value && setBase64((_fileUrl3 = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(value)) !== null && _fileUrl3 !== void 0 ? _fileUrl3 : value);
   }, [value, defaultValue]);
   return /*#__PURE__*/jsxs("div", {
-    className: "flex flex-nowrap items-end overflow-hidden",
+    className: "flex flex-nowrap items-end overflow-hidden p-px",
     children: [/*#__PURE__*/jsxs("div", {
       className: classNames("inline-block leading-none relative outline overflow-hidden", rounded && "rounded-full", !rounded && "rounded"),
       children: [/*#__PURE__*/jsx(Avatar, {
@@ -114,8 +120,7 @@ var AvatarInput = function AvatarInput(_ref) {
         })]
       })]
     }), /*#__PURE__*/jsx(HiddenInput, _objectSpread({
-      hiddenValue: list === null || list === void 0 || (_list$ = list[0]) === null || _list$ === void 0 ? void 0 : _list$.path,
-      defaultValue: defaultValue
+      value: files === null || files === void 0 || (_files$2 = files[0]) === null || _files$2 === void 0 ? void 0 : _files$2.path
     }, rest)), files.map(function (file, idx) {
       return /*#__PURE__*/jsxs("div", {
         className: "px-2 py-1 flex-1 overflow-hidden",
@@ -128,7 +133,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 +144,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/Hidden.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, Fragment } from 'react';
+import { Fragment } from 'react';
 import { ErrorIcon } from '../internal/ErrorIcon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -36,23 +36,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
  * @returns {JSX.Element} The rendered hidden input field and error icon.
  */
 var HiddenInput = function HiddenInput(_ref) {
-  var hiddenValue = _ref.hiddenValue,
-    defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange,
-    invalid = _ref.invalid,
+  var invalid = _ref.invalid,
     error = _ref.error,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? "" : _ref$value,
     name = _ref.name;
-  useEffect(function () {
-    setTimeout(function () {
-      onChange === null || onChange === void 0 || onChange(hiddenValue !== null && hiddenValue !== void 0 ? hiddenValue : defaultValue);
-    }, 50);
-  }, [hiddenValue, defaultValue]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("input", {
       type: "hidden",
-      onChange: onChange,
       value: value,
       name: name
     }), /*#__PURE__*/jsx(ErrorIcon, {

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/RadioGroup.js

@@ -7,7 +7,7 @@ import { cloneElement } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["children", "name", "className", "optionWidth", "onChange"];
+var _excluded = ["children", "name", "className", "optionWidth", "value", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -23,6 +23,7 @@ var RadioGroup = function RadioGroup(_ref) {
     name = _ref.name,
     className = _ref.className,
     optionWidth = _ref.optionWidth,
+    value = _ref.value,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
@@ -31,6 +32,7 @@ var RadioGroup = function RadioGroup(_ref) {
       children: cloneChildren(children, function (child) {
         return /*#__PURE__*/cloneElement(child, {
           name: name,
+          checked: child.props.value === value,
           onChange: onChange,
           width: optionWidth
         });

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';
@@ -38,7 +38,7 @@ var DualList = function DualList(_ref) {
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     _ref$valueProperty = _ref.valueProperty,
-    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
     renderer = _ref.renderer,
     onChange = _ref.onChange,
     name = _ref.name,
@@ -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