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

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,16 +106,40 @@ 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];
-  var doUpload = useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
+  useEffect(function () {
+    dispatch({
+      type: "init",
+      initialList: initialList
+    });
+  }, [initialList]);
+  var doUpload = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(key, file) {
       var data, _abort2;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+      return _regeneratorRuntime.wrap(function (_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             data = new FormData();
@@ -147,7 +160,7 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
                 }
               }
             });
-            _context.next = 6;
+            _context.next = 1;
             return uploader(data, {
               signal: _abort2.signal,
               onUploadProgress: function onUploadProgress(progressEvent) {
@@ -178,14 +191,14 @@ var useFileUploader = function useFileUploader(uploader, initialList) {
                 error: (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : "form:fileUploadFailed"
               });
             });
-          case 6:
+          case 1:
           case "end":
             return _context.stop();
         }
       }, _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

@@ -11,11 +11,11 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var makeYupField = function makeYupField(field) {
+var _makeYupField = function makeYupField(field) {
   var yupField = yup.string().trim();
   if (field.datatype === DATA_TYPES.SCHEMA) {
     var child = Object.fromEntries(field.schema.map(function (field) {
-      return [field.id, makeYupField(field)];
+      return [field.id, _makeYupField(field)];
     }));
     yupField = yup.object(child);
   }
@@ -103,7 +103,7 @@ var useFormBuilder = function useFormBuilder(schema) {
   }, [schema]);
   var schemaDef = useMemo(function () {
     return yup.object(Object.fromEntries(filteredSchema.map(function (field) {
-      return [field.id, makeYupField(field)];
+      return [field.id, _makeYupField(field)];
     })));
   }, [filteredSchema]);
   var resolver = useMemo(function () {

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

@@ -2,7 +2,8 @@
 
 import './i18n/index.js';
 export { Controller } from './form/Controller.js';
-export { Form, useForm } from './form/Form.js';
+export { Form } from './form/Form.js';
+export { useForm } from './form/useForm.js';
 export { SchemaEditor } from './builder/SchemaEditor.js';
 export { useFileUploader } from './hooks/useFileUploader.js';
 export { useFormBuilder } from './hooks/useFormBuilder.js';

package/dist/esm/input/ArrayInput.js

@@ -1,8 +1,10 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, useSortable } from '@dnd-kit/sortable';
 import { Icon, Tooltip, Button, cloneChildren } from '@react-fabric/core';
@@ -31,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It also supports drag-and-drop sorting using `@dnd-kit/core` and `@dnd-kit/sortable` for a better user experience when reordering items.
  *
  * @param {ArrayInputProps<T>} props - The properties for the ArrayInput component.
- * @returns {JSX.Element} The rendered ArrayInput component.
+ * @returns {React.ReactElement} The rendered ArrayInput component.
  *
  * @example
  * ```jsx
@@ -121,13 +123,36 @@ var ArrayInput = function ArrayInput(_ref) {
     }
     return true;
   }, [canRemove, initialList, fields]);
-  var handleAdd = useCallback(function (item) {
-    if (!item) return;
-    append(item);
-    setTimeout(function () {
-      form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
-    }, 100);
-  }, [name, fields, focusName]);
+  var handleAdd = useCallback(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
+      var _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (item) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            _t = append;
+            _context.next = 2;
+            return item;
+          case 2:
+            _t(_context.sent);
+            setTimeout(function () {
+              form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
+            }, 100);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), [name, fields, focusName]);
   var handleRemove = useCallback(function (item, index) {
     var ret = onBeforeRemove === null || onBeforeRemove === void 0 ? void 0 : onBeforeRemove(item, index);
     void Promise.resolve(ret).then(function (b) {
@@ -139,14 +164,14 @@ var ArrayInput = function ArrayInput(_ref) {
   }, [remove, onRemove, onBeforeRemove]);
   useImperativeHandle(arrayRef, function () {
     return {
-      addItem: handleAdd,
+      addItem: function addItem(t) {
+        return handleAdd(Promise.resolve(t));
+      },
       removeItem: remove
     };
   });
-  var Wrapper = useCallback(
-  // eslint-disable-next-line @typescript-eslint/promise-function-async
-  function (_ref2) {
-    var children = _ref2.children;
+  var Wrapper = useCallback(function (_ref3) {
+    var children = _ref3.children;
     if (enableSorting) {
       // pass id list to dnd context
       var idMap = fields.map(function (item) {
@@ -173,10 +198,10 @@ var ArrayInput = function ArrayInput(_ref) {
   }, [enableSorting, fields]);
   // @ts-expect-error ignore
   Wrapper.displayName = "SortableWrapper";
-  var SortableItem = useCallback(function (_ref3) {
-    var id = _ref3.id,
-      children = _ref3.children,
-      className = _ref3.className;
+  var SortableItem = useCallback(function (_ref4) {
+    var id = _ref4.id,
+      children = _ref4.children,
+      className = _ref4.className;
     if (enableSorting) {
       var _useSortable = useSortable({
           id: id
@@ -221,7 +246,7 @@ var ArrayInput = function ArrayInput(_ref) {
           "aria-label": "Add item",
           icon: "icon-[mdi--plus-circle-outline]",
           onClick: function onClick() {
-            return handleAdd(onAdd === null || onAdd === void 0 ? void 0 : onAdd());
+            return handleAdd(Promise.resolve(onAdd === null || onAdd === void 0 ? void 0 : onAdd()));
           },
           "data-invalid": !!error,
           disabled: !!disabled || readOnly || fields.length > maxItems,
@@ -246,7 +271,29 @@ var ArrayInput = function ArrayInput(_ref) {
             children: [typeof children === "function" ? children({
               index: index,
               item: item,
-              name: "".concat(name, ".").concat(index)
+              name: "".concat(name, ".").concat(index),
+              onChange: function () {
+                var _onChange = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(val) {
+                  var result;
+                  return _regeneratorRuntime.wrap(function (_context2) {
+                    while (1) switch (_context2.prev = _context2.next) {
+                      case 0:
+                        _context2.next = 1;
+                        return Promise.resolve(val);
+                      case 1:
+                        result = _context2.sent;
+                        result && form.setValue("".concat(name, ".").concat(index), result);
+                      case 2:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2);
+                }));
+                function onChange(_x2) {
+                  return _onChange.apply(this, arguments);
+                }
+                return onChange;
+              }()
             }) : cloneChildren(children, function (child) {
               return /*#__PURE__*/cloneElement(child, Object.assign({
                 disabled: disabled,

package/dist/esm/input/AvatarInput.js

@@ -12,7 +12,7 @@ import { useFileUploader } from '../hooks/useFileUploader.js';
 import { HiddenInput } from './Hidden.js';
 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; }
 /**
@@ -21,10 +21,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It also provides a way to remove the uploaded file and shows upload progress.
  *
  * @param {Props} props - The properties for the AvatarInput component.
- * @returns {JSX.Element} - The rendered AvatarInput component.
+ * @returns {React.ReactElement} - The rendered AvatarInput component.
  */
 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,17 +36,18 @@ 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) {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+  var _useFileUploader = useFileUploader(/*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
+        return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _context.next = 2;
+              _context.next = 1;
               return uploadHandler === null || uploadHandler === void 0 ? void 0 : uploadHandler(data, config);
-            case 2:
+            case 1:
               return _context.abrupt("return", _context.sent);
-            case 3:
+            case 2:
             case "end":
               return _context.stop();
           }
@@ -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",

package/dist/esm/input/Checkbox.js

@@ -19,7 +19,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It also provides an error icon to indicate validation errors.
  *
  * @param {CheckboxProps} props - The properties for the Checkbox component.
- * @returns {JSX.Element} The rendered Checkbox component.
+ * @returns {React.ReactElement} The rendered Checkbox component.
  */
 var Checkbox = function Checkbox(_ref) {
   var ref = _ref.ref,

package/dist/esm/input/ColorInput.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 { useFloating, autoUpdate, shift, flip, offset, arrow, useClick, useDismiss, useInteractions, FloatingArrow } from '@floating-ui/react';
+import { useFloating, autoUpdate, shift, flip, offset, arrow, useClick, useDismiss, useInteractions, FloatingFocusManager, FloatingArrow } from '@floating-ui/react';
 import { Icon } from '@react-fabric/core';
 import { useState, useDeferredValue, useEffect, useCallback, startTransition, useRef } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
@@ -24,7 +24,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * and handling the color selection state.
  *
  * @param {ColorInputProps} props - The properties for the ColorInput component.
- * @returns {JSX.Element} - The rendered ColorInput component.
+ * @returns {React.ReactElement} - The rendered ColorInput component.
  */
 var ColorInput = function ColorInput(_ref) {
   _ref.ref;
@@ -123,24 +123,31 @@ var ColorInput = function ColorInput(_ref) {
           icon: "icon-[mdi--palette]"
         })
       })
-    })), isOpen && /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
-      ref: refs.setFloating,
-      style: _objectSpread({
-        zIndex: "var(--z-popover)"
-      }, floatingStyles),
-      "data-ref": "dropdownBody"
-    }, getFloatingProps()), {}, {
-      children: [/*#__PURE__*/jsx(ColorPicker, _objectSpread(_objectSpread({}, rest), {}, {
-        onChange: handleChange,
-        defaultColor: defaultColor,
-        value: actualValue
-      })), /*#__PURE__*/jsx(FloatingArrow, {
-        ref: arrowRef,
-        context: context,
-        strokeWidth: 0.5,
-        className: "fill-base stroke-muted"
-      })]
-    })), !disabled && showPicker && /*#__PURE__*/jsx(Icon, {
+    })), isOpen && /*#__PURE__*/jsx(FloatingFocusManager, {
+      context: context,
+      closeOnFocusOut: true,
+      children: /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+        ref: refs.setFloating,
+        style: _objectSpread({
+          zIndex: "var(--z-popover)"
+        }, floatingStyles),
+        "data-ref": "dropdownBody"
+      }, getFloatingProps()), {}, {
+        children: [/*#__PURE__*/jsx(ColorPicker, _objectSpread(_objectSpread({}, rest), {}, {
+          onChange: handleChange,
+          defaultColor: defaultColor,
+          value: actualValue
+        })), /*#__PURE__*/jsx(FloatingArrow, {
+          ref: arrowRef,
+          context: context,
+          strokeWidth: 0.5,
+          className: "stroke-muted",
+          style: {
+            fill: actualValue || "var(--bg-color-base)"
+          }
+        })]
+      }))
+    }), !disabled && showPicker && /*#__PURE__*/jsx(Icon, {
       className: "flex-content p-1",
       icon: "icon-[mdi--eyedropper]",
       onClick: function onClick() {

package/dist/esm/input/ColorPicker.js

@@ -2,14 +2,14 @@
 
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import Color from 'color';
+import chroma from 'chroma-js';
 import { memo, useState, useDeferredValue, useEffect, useCallback, startTransition } from 'react';
-import { SketchPicker } from 'react-color';
+import { BlockPicker, SketchPicker } from 'react-color';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["a"],
   _excluded2 = ["a"];
-var DEFAULT_SWATCHES = [Color("#d7323a").mix(Color("#171a1c"), 0.5).hex(), Color("#ff781c").mix(Color("#171a1c"), 0.5).hex(), Color("#f7b731").mix(Color("#171a1c"), 0.5).hex(), Color("#88ab1b").mix(Color("#171a1c"), 0.5).hex(), Color("#22aa85").mix(Color("#171a1c"), 0.5).hex(), Color("#399bec").mix(Color("#171a1c"), 0.5).hex(), Color("#4862c8").mix(Color("#171a1c"), 0.5).hex(), Color("#aa66cf").mix(Color("#171a1c"), 0.5).hex(), Color("#f43f7b").mix(Color("#171a1c"), 0.5).hex(), Color("#a37f4f").mix(Color("#171a1c"), 0.5).hex(), "#d7323a", "#ff781c", "#f7b731", "#88ab1b", "#22aa85", "#399bec", "#4862c8", "#aa66cf", "#f43f7b", "#a37f4f", Color("#d7323a").mix(Color("#f1f3f4"), 0.5).hex(), Color("#ff781c").mix(Color("#f1f3f4"), 0.5).hex(), Color("#f7b731").mix(Color("#f1f3f4"), 0.5).hex(), Color("#88ab1b").mix(Color("#f1f3f4"), 0.5).hex(), Color("#22aa85").mix(Color("#f1f3f4"), 0.5).hex(), Color("#399bec").mix(Color("#f1f3f4"), 0.5).hex(), Color("#4862c8").mix(Color("#f1f3f4"), 0.5).hex(), Color("#aa66cf").mix(Color("#f1f3f4"), 0.5).hex(), Color("#f43f7b").mix(Color("#f1f3f4"), 0.5).hex(), Color("#a37f4f").mix(Color("#f1f3f4"), 0.5).hex(), "#171a1c", "#2d3439", "#444e55", "#5b6971", "#71838e", "#86959e", "#9ca8b0", "#b8c1c6", "#d5dadd", "#f1f3f4"];
+var DEFAULT_SWATCHES = [chroma.mix("#d7323a", "#171a1c", 0.5, "lab").hex(), chroma.mix("#ff781c", "#171a1c", 0.5, "lab").hex(), chroma.mix("#f7b731", "#171a1c", 0.5, "lab").hex(), chroma.mix("#88ab1b", "#171a1c", 0.5, "lab").hex(), chroma.mix("#22aa85", "#171a1c", 0.5, "lab").hex(), chroma.mix("#399bec", "#171a1c", 0.5, "lab").hex(), chroma.mix("#4862c8", "#171a1c", 0.5, "lab").hex(), chroma.mix("#aa66cf", "#171a1c", 0.5, "lab").hex(), chroma.mix("#f43f7b", "#171a1c", 0.5, "lab").hex(), chroma.mix("#a37f4f", "#171a1c", 0.5, "lab").hex(), "#d7323a", "#ff781c", "#f7b731", "#88ab1b", "#22aa85", "#399bec", "#4862c8", "#aa66cf", "#f43f7b", "#a37f4f", chroma.mix("#d7323a", "#f1f3f4", 0.5, "lab").hex(), chroma.mix("#ff781c", "#f1f3f4", 0.5, "lab").hex(), chroma.mix("#f7b731", "#f1f3f4", 0.5, "lab").hex(), chroma.mix("#88ab1b", "#f1f3f4", 0.5, "lab").hex(), chroma.mix("#22aa85", "#f1f3f4", 0.5, "lab").hex(), chroma.mix("#399bec", "#f1f3f4", 0.5, "lab").hex(), chroma.mix("#4862c8", "#f1f3f4", 0.5, "lab").hex(), chroma.mix("#aa66cf", "#f1f3f4", 0.5, "lab").hex(), chroma.mix("#f43f7b", "#f1f3f4", 0.5, "lab").hex(), chroma.mix("#a37f4f", "#f1f3f4", 0.5, "lab").hex(), "#171a1c", "#2d3439", "#444e55", "#5b6971", "#71838e", "#86959e", "#9ca8b0", "#b8c1c6", "#d5dadd", "#f1f3f4"];
 
 /**
  * ColorPicker component allows users to select a color using a color picker UI.
@@ -17,11 +17,10 @@ var DEFAULT_SWATCHES = [Color("#d7323a").mix(Color("#171a1c"), 0.5).hex(), Color
  * The component uses the `react-color` library for the color picker functionality.
  *
  * @param {ColorProps} props - The properties for the ColorPicker component.
- * @returns {JSX.Element} The rendered ColorPicker component.
+ * @returns {React.ReactElement} The rendered ColorPicker component.
  *
  * @see {@link https://react-color.github.io/react-color/} for more details on the color picker library.
  */
-// eslint-disable-next-line react/display-name
 var ColorPicker = /*#__PURE__*/memo(function (_ref) {
   var value = _ref.value,
     onChange = _ref.onChange,
@@ -29,7 +28,9 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
     _ref$defaultColor = _ref.defaultColor,
     defaultColor = _ref$defaultColor === void 0 ? "#fff" : _ref$defaultColor,
     _ref$swatches = _ref.swatches,
-    swatches = _ref$swatches === void 0 ? DEFAULT_SWATCHES : _ref$swatches;
+    swatches = _ref$swatches === void 0 ? DEFAULT_SWATCHES : _ref$swatches,
+    _ref$picker = _ref.picker,
+    picker = _ref$picker === void 0 ? "default" : _ref$picker;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     actualValue = _useState2[0],
@@ -44,14 +45,19 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
       return onChange(e);
     });
   }, [onChange]);
+  var E = picker === "swatches" ? BlockPicker : SketchPicker;
   return /*#__PURE__*/jsx("div", {
-    role: "none"
+    role: "none",
+    className: "fabric-colorPicker-container"
     // prevent default on mouse down to avoid selection issues
     ,
     onMouseDown: function onMouseDown(e) {
       return e.preventDefault();
     },
-    children: /*#__PURE__*/jsx(SketchPicker, {
+    style: {
+      "--color-selected": value
+    },
+    children: /*#__PURE__*/jsx(E, {
       width: "16rem",
       className: "fabric-colorPicker",
       styles: {
@@ -83,6 +89,7 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
         }
       },
       color: actualValue,
+      colors: swatches,
       presetColors: swatches,
       disableAlpha: hideAlpha,
       onChange: function onChange(_ref2) {
@@ -90,14 +97,14 @@ var ColorPicker = /*#__PURE__*/memo(function (_ref) {
           _ref2$rgb$a = _ref2$rgb.a,
           a = _ref2$rgb$a === void 0 ? 1 : _ref2$rgb$a,
           rgb = _objectWithoutProperties(_ref2$rgb, _excluded);
-        return setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
+        return setActualValue(chroma(rgb).alpha(a).hex());
       },
       onChangeComplete: function onChangeComplete(_ref3) {
         var _ref3$rgb = _ref3.rgb,
           _ref3$rgb$a = _ref3$rgb.a,
           a = _ref3$rgb$a === void 0 ? 1 : _ref3$rgb$a,
           rgb = _objectWithoutProperties(_ref3$rgb, _excluded2);
-        return handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]());
+        return handleChange(chroma(rgb).alpha(a).hex());
       }
     })
   });

package/dist/esm/input/DateInput.js

@@ -22,7 +22,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * The component supports both date and datetime types, with appropriate formatting.
  *
  * @param {DateProps} props - The properties for the DateInput component.
- * @returns {JSX.Element} - The rendered DateInput component.
+ * @returns {React.ReactElement} - The rendered DateInput component.
  */
 var DateInput = function DateInput(_ref) {
   var ref = _ref.ref,
@@ -175,7 +175,7 @@ var DateInput = function DateInput(_ref) {
       style: _objectSpread({
         zIndex: "var(--z-popover)"
       }, floatingStyles),
-      className: "shadow-lg bg-base ring-1 ring-tint-100",
+      className: "shadow-lg bg-default ring-1 ring-tint-100",
       "data-ref": "dropdownBody"
     }, getFloatingProps()), {}, {
       children: [/*#__PURE__*/jsx(DatePanel, {
@@ -188,7 +188,7 @@ var DateInput = function DateInput(_ref) {
         ref: arrowRef,
         context: context,
         strokeWidth: 0.5,
-        className: "fill-base stroke-muted"
+        className: "fill-default stroke-muted"
       })]
     }))]
   }));

package/dist/esm/input/Field.js

@@ -24,7 +24,7 @@ var Field = function Field(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsx("div", {
-      className: classNames("fabric-fieldGroup", !plain && !noOutline && "outline", !plain && "bg-base", plain && "flex-wrap", "flex-1 rounded", !vertical && "flex"),
+      className: classNames("fabric-fieldGroup", !plain && !noOutline && "outline", !plain && "bg-default", plain && "flex-wrap", "flex-1 rounded", !vertical && "flex"),
       "data-vertical": !!vertical,
       children: cloneChildren(children, function (child) {
         return /*#__PURE__*/cloneElement(child, {