@react-fabric/form 1.0.0-beta.0

package/dist/cjs/hooks/useFormBuilder.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var FormField = require('../builder/FormField.js');
+var jsxRuntime = require('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 yupField = utilities.yup.string();
+  if (field.datatype === "schema") {
+    var child = Object.fromEntries(field.schema.map(function (field) {
+      return [field.id, makeYupField(field)];
+    }));
+    yupField = utilities.yup.object(child);
+  }
+  if (field.datatype === "boolean") yupField = utilities.yup["boolean"]();
+  if (field.datatype === "decimal" || field.datatype === "number" || field.datatype === "range") {
+    yupField = utilities.yup.number();
+    !utilities.isNil(field.min) && (yupField = yupField.min(field.min));
+    !utilities.isNil(field.max) && (yupField = yupField.max(field.max));
+    if (field.datatype === "range") yupField = utilities.yup.array(yupField);
+  }
+  if (field.datatype === "string") {
+    field.options && (yupField = yupField.oneOf(field.options));
+    field.regex && (yupField = yupField.matches(new RegExp(field.regex)));
+  }
+  if (field.datatype === "file") {
+    yupField = utilities.yup.object({
+      filename: utilities.yup.string().required(),
+      path: utilities.yup.string().required()
+    }).unknown(true);
+    if (field.required) {
+      yupField = yupField.test("is-empty", {
+        key: "form:yup.empty",
+        values: {
+          path: field.id,
+          label: field.label
+        }
+      }, function (value) {
+        return !utilities.isEmpty(value);
+      });
+    }
+  }
+  if (field.required) {
+    yupField = yupField.required();
+  }
+  if (field.multiple) {
+    yupField = utilities.yup.array(yupField);
+    field.required && (yupField = yupField.required().min(1));
+  }
+  return yupField.label(field.label);
+};
+var useFormBuilder = function useFormBuilder(schema) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var filteredSchema = react.useMemo(function () {
+    var _schema$filter, _schema$filter2;
+    return (_schema$filter = (_schema$filter2 = schema.filter) === null || _schema$filter2 === void 0 ? void 0 : _schema$filter2.call(schema, function (schm) {
+      return !!schm.id;
+    })) !== null && _schema$filter !== void 0 ? _schema$filter : [];
+  }, [schema]);
+  var schemaDef = utilities.yup.object(Object.fromEntries(filteredSchema.map(function (field) {
+    return [field.id, makeYupField(field)];
+  })));
+  var formDef = /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
+    children: filteredSchema.map(function (field, idx) {
+      return /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "mb-4",
+        children: field.datatype === "schema" ? null : /*#__PURE__*/jsxRuntime.jsx(FormField.FormField, _objectSpread(_objectSpread({}, field), {}, {
+          autoFocus: idx === 0,
+          fileUrl: options.fileUrl,
+          uploadHandler: options.uploadHandler,
+          inline: options.inline,
+          prefix: options.prefix
+        }))
+      }, field.id);
+    })
+  });
+  return {
+    formDef: formDef,
+    schemaDef: schemaDef
+  };
+};
+
+exports.useFormBuilder = useFormBuilder;

package/dist/cjs/i18n/ar.json.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addArray = "اضافة عنصر";
+var password = {
+	show: "عرض كلمة المرور",
+	hide: "اخفاء كلمة المرور"
+};
+var select = {
+	emptyList: "لا توجد خيارات متاحة",
+	notFound: "لم يتم العثور على خيارات ل ",
+	createOption: "إنشاء خيار جديد ل "
+};
+var yup = {
+	arrayMax: "{{label}} حدد ما يصل {{max}} غرض",
+	arrayMin: "{{label}} اختر على الأقل {{min}} غرض",
+	invalid: "{{label}} نوع بيانات غير صالح",
+	invalidType: "{{label}} غير صالح",
+	numberMax: "{{label}} الحد الأقصى {{max}}",
+	numberMin: "{{label}} الحد الأدنى {{min}}",
+	required: "{{label}} مطلوب",
+	stringMax: "{{label}} أقصى {{max}} الحروف مسموحة",
+	stringMin: "{{label}} يتطلب الحد الأدنى {{min}} الشخصيات"
+};
+var ar = {
+	addArray: addArray,
+	password: password,
+	select: select,
+	yup: yup
+};
+
+exports.addArray = addArray;
+exports.default = ar;
+exports.password = password;
+exports.select = select;
+exports.yup = yup;

package/dist/cjs/i18n/en.json.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var addArray = "Add Item";
+var password = {
+	show: "Show password",
+	hide: "Hide password"
+};
+var select = {
+	emptyList: "No options available",
+	notFound: "No options found for <0>{{query}}</0>",
+	createOption: "Create new option for <0>{{query}}</0>"
+};
+var yup = {
+	arrayMax: "{{label}} must contain upto {{max}} item",
+	arrayMin: "{{label}} must contain atleast {{min}} item",
+	invalid: "{{label}} invalid",
+	empty: "{{label}} must not be empty",
+	invalidType: "{{label}} invalid datatype",
+	numberMax: "{{label}} maximum {{max}}",
+	numberMin: "{{label}} minimum {{min}}",
+	required: "{{label}} required",
+	stringMax: "{{label}} maximum {{max}} characters allowed",
+	stringMin: "{{label}} requires minimum {{min}} characters"
+};
+var en = {
+	addArray: addArray,
+	password: password,
+	select: select,
+	yup: yup
+};
+
+exports.addArray = addArray;
+exports.default = en;
+exports.password = password;
+exports.select = select;
+exports.yup = yup;

package/dist/cjs/i18n/index.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var core = require('@react-fabric/core');
+var ar = require('./ar.json.js');
+var en = require('./en.json.js');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+core.addTranslationBundle("form", {
+  en: en.default,
+  ar: ar.default
+});

package/dist/cjs/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+require('./i18n/index.js');
+var Controller = require('./form/Controller.js');
+var Form = require('./form/Form.js');
+var useFileUploader = require('./hooks/useFileUploader.js');
+var useFormBuilder = require('./hooks/useFormBuilder.js');
+var ArrayInput = require('./input/ArrayInput.js');
+var Checkbox = require('./input/Checkbox.js');
+var ColorInput = require('./input/ColorInput.js');
+var ColorPicker = require('./input/ColorPicker.js');
+var Field = require('./input/Field.js');
+var File = require('./input/File.js');
+var Hidden = require('./input/Hidden.js');
+var Input = require('./input/Input.js');
+var Number = require('./input/Number.js');
+var Password = require('./input/Password.js');
+var Radio = require('./input/Radio.js');
+var RadioGroup = require('./input/RadioGroup.js');
+var Range = require('./input/Range.js');
+var Search = require('./input/Search.js');
+var Slider = require('./input/Slider.js');
+var Switch = require('./input/Switch.js');
+var Textarea = require('./input/Textarea.js');
+var AutoComplete = require('./select/AutoComplete.js');
+var DualList = require('./select/DualList.js');
+var List = require('./select/List.js');
+var Select = require('./select/Select.js');
+
+
+
+exports.Controller = Controller.Controller;
+exports.Form = Form.Form;
+exports.useFileUploader = useFileUploader.useFileUploader;
+exports.useFormBuilder = useFormBuilder.useFormBuilder;
+exports.ArrayInput = ArrayInput.ArrayInput;
+exports.Checkbox = Checkbox.Checkbox;
+exports.ColorInput = ColorInput.ColorInput;
+exports.ColorPicker = ColorPicker.ColorPicker;
+exports.Field = Field.Field;
+exports.FileInput = File.FileInput;
+exports.HiddenInput = Hidden.HiddenInput;
+exports.Input = Input.Input;
+exports.Number = Number.Number;
+exports.Password = Password.Password;
+exports.Radio = Radio.Radio;
+exports.RadioGroup = RadioGroup.RadioGroup;
+exports.Range = Range.Range;
+exports.Search = Search.Search;
+exports.Slider = Slider.Slider;
+exports.Switch = Switch.Switch;
+exports.Textarea = Textarea.Textarea;
+exports.AutoComplete = AutoComplete.AutoComplete;
+exports.DualList = DualList.DualList;
+exports.List = List.List;
+exports.Select = Select.Select;

package/dist/cjs/input/ArrayInput.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var core$1 = require('@react-fabric/core');
+var utilities$1 = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var reactHookForm = require('react-hook-form');
+var reactI18next = require('react-i18next');
+var FieldWrapper = require('../internal/FieldWrapper.js');
+var ArrayInput_module = require('./ArrayInput.module.css');
+var modifiers = require('@dnd-kit/modifiers');
+var utilities = require('@dnd-kit/utilities');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["name", "children", "addLabel", "fixedList", "focusName", "onAdd", "arrayRef", "enableSorting", "disabled", "readOnly", "minItems"];
+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 ArrayInput = function ArrayInput(_ref) {
+  var _error$values$label, _error$values, _error$values2;
+  var name = _ref.name,
+    children = _ref.children,
+    addLabel = _ref.addLabel,
+    fixedList = _ref.fixedList,
+    _ref$focusName = _ref.focusName,
+    focusName = _ref$focusName === void 0 ? "" : _ref$focusName,
+    onAdd = _ref.onAdd,
+    arrayRef = _ref.arrayRef,
+    enableSorting = _ref.enableSorting,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$minItems = _ref.minItems,
+    minItems = _ref$minItems === void 0 ? 0 : _ref$minItems,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation("form"),
+    t = _useTranslation.t;
+  var form = reactHookForm.useFormContext();
+  if (!(form !== null && form !== void 0 && form.control)) throw new Error("ArrayInput must be contained within a Form element");
+  var _useFieldArray = reactHookForm.useFieldArray({
+      name: name,
+      control: form.control
+    }),
+    fields = _useFieldArray.fields,
+    append = _useFieldArray.append,
+    remove = _useFieldArray.remove,
+    move = _useFieldArray.move;
+  var error = react.useMemo(function () {
+    var _form$formState$error, _form$formState$error2, _form$formState$error3;
+    return (_form$formState$error = (_form$formState$error2 = form.formState.errors[name]) === null || _form$formState$error2 === void 0 ? void 0 : _form$formState$error2.message) !== null && _form$formState$error !== void 0 ? _form$formState$error : (_form$formState$error3 = form.formState.errors[name]) === null || _form$formState$error3 === void 0 || (_form$formState$error3 = _form$formState$error3.root) === null || _form$formState$error3 === void 0 ? void 0 : _form$formState$error3.message;
+  }, [form.formState.errors]);
+  var handleAdd = react.useCallback(function (item) {
+    append(item);
+    setTimeout(function () {
+      form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
+    }, 100);
+  }, [name, fields, focusName]);
+  react.useImperativeHandle(arrayRef, function () {
+    return {
+      addItem: handleAdd,
+      removeItem: remove
+    };
+  });
+  var Wrapper = react.useCallback(function (_ref2) {
+    var children = _ref2.children;
+    if (enableSorting) {
+      // pass id list to dnd context
+      var idMap = fields.map(function (item) {
+        return item.id;
+      });
+      var handleDragEnd = function handleDragEnd(e) {
+        if (e.over && e.active.id !== e.over.id) {
+          // find index of item and drop over
+          var active = idMap.indexOf("".concat(e.active.id));
+          var end = idMap.indexOf("".concat(e.over.id));
+          move(active, end);
+        }
+      };
+      return /*#__PURE__*/jsxRuntime.jsx(core.DndContext, {
+        onDragEnd: handleDragEnd,
+        modifiers: [modifiers.restrictToVerticalAxis],
+        children: /*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, {
+          items: idMap,
+          children: children
+        })
+      });
+    }
+    return children;
+  }, [enableSorting, fields]);
+  // @ts-expect-error ignore
+  Wrapper.displayName = "SortableWrapper";
+  var SortableItem = react.useCallback(function (_ref3) {
+    var id = _ref3.id,
+      children = _ref3.children,
+      className = _ref3.className;
+    if (enableSorting) {
+      var _useSortable = sortable.useSortable({
+          id: id
+        }),
+        attributes = _useSortable.attributes,
+        listeners = _useSortable.listeners,
+        setNodeRef = _useSortable.setNodeRef,
+        transform = _useSortable.transform,
+        transition = _useSortable.transition,
+        isDragging = _useSortable.isDragging;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: className,
+        ref: setNodeRef,
+        style: {
+          transform: utilities.CSS.Transform.toString(transform),
+          transition: transition
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(core$1.Icon, _objectSpread(_objectSpread({
+          className: isDragging ? "cursor-grabbing" : "cursor-grab",
+          icon: core$1.CoreIcons.dragHandle
+        }, attributes), listeners)), children]
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: className,
+      children: children
+    });
+  }, [enableSorting]);
+  // @ts-expect-error ignore
+  SortableItem.displayName = "SortableItem";
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: ArrayInput_module.arrayInput,
+    children: [/*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+      children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
+        children: fields.map(function (item, index) {
+          return /*#__PURE__*/jsxRuntime.jsxs(SortableItem, {
+            id: item.id,
+            className: "flex items-center flex-nowrap gap-2 mb-1",
+            children: [typeof children === "function" ? children({
+              index: index,
+              name: "".concat(name, ".").concat(index)
+            }) : react.Children.map(children, function (child) {
+              return /*#__PURE__*/react.cloneElement(child, Object.assign({
+                disabled: disabled,
+                readOnly: readOnly,
+                "data-inner": true,
+                name: "".concat(name, ".").concat(index).concat(child.props.name ? "." + child.props.name : "")
+              }, index > 0 && {
+                label: undefined,
+                required: undefined,
+                appendLabel: undefined
+              }));
+            }), !fixedList && /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
+              "aria-label": "Remove item",
+              icon: core$1.CoreIcons.remove,
+              color: "danger",
+              variant: "link",
+              className: "self-end",
+              disabled: disabled || readOnly || fields.length <= minItems,
+              onClick: function onClick() {
+                return remove(index);
+              }
+            })]
+          }, item.id);
+        })
+      })
+    })), !fixedList && onAdd && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex justify-end",
+      children: /*#__PURE__*/jsxRuntime.jsx(core$1.Tooltip, {
+        color: "danger",
+        content: utilities$1.isString(error) ? "".concat(error) : t(error === null || error === void 0 ? void 0 : error.key, error !== null && error !== void 0 && error.values ? _objectSpread(_objectSpread({}, error === null || error === void 0 ? void 0 : error.values), {}, {
+          label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
+        }) : {}),
+        children: /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
+          "aria-label": "Add item",
+          icon: core$1.CoreIcons.insert,
+          onClick: function onClick() {
+            return handleAdd(onAdd());
+          },
+          "data-invalid": !!error,
+          disabled: !!disabled || readOnly,
+          className: classNames(ArrayInput_module.addButton, "me-10"),
+          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
+        })
+      })
+    })]
+  });
+};
+
+exports.ArrayInput = ArrayInput;

package/dist/cjs/input/ArrayInput.module.css

@@ -0,0 +1 @@
+@layer var{.arrayInput{& [data-ref=fieldWrapper]{flex:1 1 0%}& .addButton :global(.buttonInner){color:theme(colors.tint.600);outline:1px dashed theme(colors.tint.600);&[data-invalid=true]{background-color:theme(colors.danger.100);color:theme(colors.danger.600);outline:1px dashed theme(colors.danger.600)}}}}

package/dist/cjs/input/AvatarInput.js

@@ -0,0 +1,141 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var core = require('@react-fabric/core');
+var react = require('react');
+var useFileUploader = require('../hooks/useFileUploader.js');
+var Hidden = require('./Hidden.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["src", "size", "fileUrl", "uploadHandler"];
+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 AvatarInput = function AvatarInput(_ref) {
+  var _list$;
+  var src = _ref.src,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "6rem" : _ref$size,
+    fileUrl = _ref.fileUrl,
+    uploadHandler = _ref.uploadHandler,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useFileUploader = useFileUploader.useFileUploader( /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return uploadHandler === null || uploadHandler === void 0 ? void 0 : uploadHandler(data, config);
+            case 2:
+              return _context.abrupt("return", _context.sent);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref2.apply(this, arguments);
+      };
+    }(), rest.value, false),
+    files = _useFileUploader.files,
+    list = _useFileUploader.list,
+    upload = _useFileUploader.upload,
+    remove = _useFileUploader.remove;
+  var _useState = react.useState(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    base64 = _useState2[0],
+    setBase64 = _useState2[1];
+  react.useEffect(function () {
+    if (list !== null && list !== void 0 && list.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) {
+        var reader = new FileReader();
+        reader.onload = function () {
+          setBase64(reader.result);
+        };
+        reader.onerror = function (e) {
+          console.error("ERROR", e);
+        };
+        reader.readAsDataURL(blob);
+      }));
+    } else {
+      setBase64("");
+    }
+  }, [files, list]);
+  react.useEffect(function () {
+    var _fileUrl;
+    src && setBase64((_fileUrl = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(src)) !== null && _fileUrl !== void 0 ? _fileUrl : src);
+  }, [src]);
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex flex-nowrap items-end",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "inline-block leading-none rounded-full relative outline overflow-hidden",
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
+        name: "temp",
+        size: size,
+        avatar: base64
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "absolute inset-x-0 bottom-0 cursor-pointer bg-opacity-20 hover:bg-opacity-50 bg-black text-white text-xs text-center py-1",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          children: "Edit"
+        }), /*#__PURE__*/jsxRuntime.jsx("input", {
+          type: "file",
+          accept: "image/*",
+          className: "absolute inset-0 opacity-0 z-5 cursor-pointer",
+          onChange: function onChange(e) {
+            return [upload(e.target.files), e.target.value = ""];
+          }
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, _objectSpread({
+      hiddenValue: list === null || list === void 0 || (_list$ = list[0]) === null || _list$ === void 0 ? void 0 : _list$.path
+    }, rest)), files.map(function (file, idx) {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "px-2 py-1 flex-1",
+        children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+          className: "flex flex-nowrap gap-1 items-center",
+          children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex-initial truncate pe-2",
+            children: file.filename
+          }), file.error && /*#__PURE__*/jsxRuntime.jsx("div", {
+            className: "flex-1 truncate px-2",
+            children: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-danger-600",
+              children: file.error
+            })
+          }), file.progress && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+            icon: "mdi mdi-stop-circle",
+            bg: "danger",
+            color: "white",
+            size: "sm",
+            className: "p-[2px]",
+            "aria-label": "abort",
+            onClick: function onClick() {
+              var _file$abort;
+              return (_file$abort = file.abort) === null || _file$abort === void 0 ? void 0 : _file$abort.call(file);
+            }
+          }), !file.progress && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+            icon: "mdi mdi-trash-can",
+            color: "danger",
+            size: "sm",
+            "aria-label": "remove",
+            onClick: function onClick() {
+              return remove(file.key);
+            }
+          })]
+        }), file.progress && /*#__PURE__*/jsxRuntime.jsx(core.ProgressBar, {
+          animate: true,
+          value: file.progress * 100,
+          size: "xxs"
+        })]
+      }, idx);
+    })]
+  });
+};
+
+exports.AvatarInput = AvatarInput;

package/dist/cjs/input/Checkbox.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var core = require('@react-fabric/core');
+var classNames = require('classnames');
+var react = require('react');
+var ErrorIcon = require('../internal/ErrorIcon.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var _excluded = ["ref", "label", "value", "name", "checked", "invalid", "disabled", "error", "width", "icon", "iconChecked", "onChange"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Checkbox = function Checkbox(_ref) {
+  var ref = _ref.ref,
+    label = _ref.label,
+    value = _ref.value,
+    name = _ref.name,
+    checked = _ref.checked,
+    invalid = _ref.invalid,
+    disabled = _ref.disabled,
+    error = _ref.error,
+    width = _ref.width,
+    icon = _ref.icon,
+    iconChecked = _ref.iconChecked,
+    onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = react.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    actualValue = _useState2[0],
+    setActualValue = _useState2[1];
+  var deferred = react.useDeferredValue(!!checked);
+  var iconOn = react.useMemo(function () {
+    var _ref2;
+    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : core.CoreIcons.checkboxOn;
+  }, [icon, iconChecked]);
+  var iconOff = react.useMemo(function () {
+    return icon !== null && icon !== void 0 ? icon : core.CoreIcons.checkboxOff;
+  }, [icon]);
+  react.useEffect(function () {
+    setActualValue(deferred);
+  }, [deferred]);
+  var handleChange = react.useCallback(function (e) {
+    var _e$target$checked, _e$target$checked2;
+    setActualValue((_e$target$checked = e === null || e === void 0 ? void 0 : e.target.checked) !== null && _e$target$checked !== void 0 ? _e$target$checked : false);
+    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"),
+    style: {
+      width: width
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("input", _objectSpread({
+      className: classNames("appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0"),
+      "aria-invalid": invalid,
+      "aria-disabled": disabled,
+      disabled: disabled,
+      "aria-errormessage": error,
+      type: "checkbox",
+      ref: ref,
+      size: 1,
+      tabIndex: 0,
+      name: name,
+      autoComplete: "off",
+      checked: actualValue,
+      onChange: handleChange
+    }, rest)), /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      className: classNames("p-0.5", actualValue && icon && !iconChecked && "bg-primary-500 text-white"),
+      size: "1.25em",
+      color: invalid ? "danger" : "primary",
+      icon: actualValue ? iconOn : iconOff
+    }), /*#__PURE__*/jsxRuntime.jsx(ErrorIcon.ErrorIcon, {
+      invalid: invalid,
+      error: error
+    }), label && /*#__PURE__*/jsxRuntime.jsx("span", {
+      className: "flex-initial leading-none truncate",
+      children: label
+    })]
+  });
+};
+
+exports.Checkbox = Checkbox;