@react-fabric/form 1.0.0-beta.0

package/dist/esm/hooks/useFileUploader.js

@@ -0,0 +1,204 @@
+'use client';
+
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+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';
+
+var _excluded = ["progress", "abort"],
+  _excluded2 = ["file", "progress", "abort"];
+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 useFileUploader = function useFileUploader(uploader, initialList) {
+  var multiple = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+  var _useReducer = useReducer(function (state, action) {
+      if (action.type === "start") {
+        if (!multiple) state.files.clear();
+        state.files.set(action.key, action.file);
+        state.count++;
+      }
+      if (action.type === "stop") {
+        var fileObject = state.files.get(action.key);
+        if (fileObject) {
+          fileObject.progress;
+            fileObject.abort;
+            var rest = _objectWithoutProperties(fileObject, _excluded);
+          state.files.set(action.key, _objectSpread(_objectSpread({}, rest), {}, {
+            path: action.path,
+            uploaded: true
+          }));
+        }
+        state.count--;
+      }
+      if (action.type === "error") {
+        var _fileObject = state.files.get(action.key);
+        if (_fileObject) {
+          _fileObject.file;
+            _fileObject.progress;
+            _fileObject.abort;
+            var _rest = _objectWithoutProperties(_fileObject, _excluded2);
+          state.files.set(action.key, _objectSpread(_objectSpread({}, _rest), {}, {
+            error: action.error
+          }));
+        }
+        state.count--;
+      }
+      if (action.type === "progress") {
+        var _fileObject2 = state.files.get(action.key);
+        if (_fileObject2) {
+          _fileObject2.progress = action.progress;
+          state.files.set(action.key, _fileObject2);
+        }
+        state.count--;
+      }
+      if (action.type === "abort") {
+        state.files["delete"](action.key);
+      }
+      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)) {
+          var key = uuid();
+          state.files.set(key, {
+            key: key,
+            path: initialList,
+            filename: "",
+            size: 0,
+            mime: ""
+          });
+        }
+        if (isObject(initialList)) {
+          var _key = uuid();
+          state.files.set(_key, _objectSpread(_objectSpread({}, initialList), {}, {
+            key: _key
+          }));
+        }
+        if (isArray(initialList)) {
+          initialList.forEach(function (file) {
+            var key = uuid();
+            state.files.set(key, _objectSpread(_objectSpread({}, file), {}, {
+              key: key
+            }));
+          });
+        }
+      }
+      state.list = Array.from(state.files.values());
+      return state;
+    }),
+    _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) {
+      var data, _abort2;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            data = new FormData();
+            data.append("file", file);
+            _abort2 = new AbortController();
+            dispatch({
+              type: "start",
+              key: key,
+              file: {
+                key: key,
+                file: file,
+                progress: 0.001,
+                mime: file.type,
+                filename: file.name,
+                size: file.size,
+                abort: function abort() {
+                  return _abort2.abort();
+                }
+              }
+            });
+            _context.next = 6;
+            return uploader(data, {
+              signal: _abort2.signal,
+              onUploadProgress: function onUploadProgress(progressEvent) {
+                var _progressEvent$progre;
+                dispatch({
+                  type: "progress",
+                  key: key,
+                  progress: (_progressEvent$progre = progressEvent.progress) !== null && _progressEvent$progre !== void 0 ? _progressEvent$progre : 0
+                });
+              }
+            }).then(function (path) {
+              dispatch({
+                type: "stop",
+                key: key,
+                path: path
+              });
+            })["catch"](function (error) {
+              var _error$message;
+              if (error.code === "ERR_CANCELED" || error.name === "AbortError") {
+                return dispatch({
+                  type: "abort",
+                  key: key
+                });
+              }
+              dispatch({
+                type: "error",
+                key: key,
+                error: (_error$message = error === null || error === void 0 ? void 0 : error.message) !== null && _error$message !== void 0 ? _error$message : "form:fileUploadFailed"
+              });
+            });
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x, _x2) {
+      return _ref.apply(this, arguments);
+    };
+  }(), []);
+  var upload = useCallback(function (files) {
+    if (!multiple) {
+      var _Array$from$, _Array$from$$abort;
+      (_Array$from$ = Array.from(state.files.values())[0]) === null || _Array$from$ === void 0 || (_Array$from$$abort = _Array$from$.abort) === null || _Array$from$$abort === void 0 || _Array$from$$abort.call(_Array$from$);
+    }
+    Array.from(files !== null && files !== void 0 ? files : []).slice(0, multiple ? undefined : 1).forEach(function (file) {
+      void doUpload(uuid(), file);
+    });
+  }, [multiple]);
+  var retry = useCallback(function (key) {
+    var fileObject = state.files.get(key);
+    void ((fileObject === null || fileObject === void 0 ? void 0 : fileObject.file) && doUpload(key, fileObject.file));
+  }, [state]);
+  var remove = useCallback(function (key) {
+    dispatch({
+      type: "remove",
+      key: key
+    });
+  }, [state]);
+  return {
+    upload: upload,
+    remove: remove,
+    retry: retry,
+    pending: state.count,
+    list: state.list,
+    files: Array.from(state.files.values())
+  };
+};
+
+export { useFileUploader };

package/dist/esm/hooks/useFormBuilder.js

@@ -0,0 +1,87 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { yup, isNil, isEmpty } from '@react-fabric/utilities';
+import { useMemo, Fragment } from 'react';
+import { FormField } from '../builder/FormField.js';
+import { 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 yupField = yup.string();
+  if (field.datatype === "schema") {
+    var child = Object.fromEntries(field.schema.map(function (field) {
+      return [field.id, makeYupField(field)];
+    }));
+    yupField = yup.object(child);
+  }
+  if (field.datatype === "boolean") yupField = yup["boolean"]();
+  if (field.datatype === "decimal" || field.datatype === "number" || field.datatype === "range") {
+    yupField = yup.number();
+    !isNil(field.min) && (yupField = yupField.min(field.min));
+    !isNil(field.max) && (yupField = yupField.max(field.max));
+    if (field.datatype === "range") yupField = 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 = yup.object({
+      filename: yup.string().required(),
+      path: 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 !isEmpty(value);
+      });
+    }
+  }
+  if (field.required) {
+    yupField = yupField.required();
+  }
+  if (field.multiple) {
+    yupField = 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 = 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 = yup.object(Object.fromEntries(filteredSchema.map(function (field) {
+    return [field.id, makeYupField(field)];
+  })));
+  var formDef = /*#__PURE__*/jsx(Fragment, {
+    children: filteredSchema.map(function (field, idx) {
+      return /*#__PURE__*/jsx("div", {
+        className: "mb-4",
+        children: field.datatype === "schema" ? null : /*#__PURE__*/jsx(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
+  };
+};
+
+export { useFormBuilder };

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

@@ -0,0 +1,31 @@
+'use client';
+
+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
+};
+
+export { addArray, ar as default, password, select, yup };

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

@@ -0,0 +1,32 @@
+'use client';
+
+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
+};
+
+export { addArray, en as default, password, select, yup };

package/dist/esm/i18n/index.js

@@ -0,0 +1,33 @@
+'use client';
+
+import { addTranslationBundle } from '@react-fabric/core';
+import ar from './ar.json.js';
+import en from './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.
+ */
+
+addTranslationBundle("form", {
+  en: en,
+  ar: ar
+});

package/dist/esm/index.js

@@ -0,0 +1,28 @@
+'use client';
+
+import './i18n/index.js';
+export { Controller } from './form/Controller.js';
+export { Form } from './form/Form.js';
+export { useFileUploader } from './hooks/useFileUploader.js';
+export { useFormBuilder } from './hooks/useFormBuilder.js';
+export { ArrayInput } from './input/ArrayInput.js';
+export { Checkbox } from './input/Checkbox.js';
+export { ColorInput } from './input/ColorInput.js';
+export { ColorPicker } from './input/ColorPicker.js';
+export { Field } from './input/Field.js';
+export { FileInput } from './input/File.js';
+export { HiddenInput } from './input/Hidden.js';
+export { Input } from './input/Input.js';
+export { Number } from './input/Number.js';
+export { Password } from './input/Password.js';
+export { Radio } from './input/Radio.js';
+export { RadioGroup } from './input/RadioGroup.js';
+export { Range } from './input/Range.js';
+export { Search } from './input/Search.js';
+export { Slider } from './input/Slider.js';
+export { Switch } from './input/Switch.js';
+export { Textarea } from './input/Textarea.js';
+export { AutoComplete } from './select/AutoComplete.js';
+export { DualList } from './select/DualList.js';
+export { List } from './select/List.js';
+export { Select } from './select/Select.js';

package/dist/esm/input/ArrayInput.js

@@ -0,0 +1,189 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, useSortable } from '@dnd-kit/sortable';
+import { Icon, CoreIcons, Button, Tooltip } from '@react-fabric/core';
+import { isString } from '@react-fabric/utilities';
+import classNames from 'classnames';
+import { useMemo, useCallback, useImperativeHandle, Children, cloneElement } from 'react';
+import { useFormContext, useFieldArray } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { FieldWrapper } from '../internal/FieldWrapper.js';
+import classes from './ArrayInput.module.css';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { CSS } from '@dnd-kit/utilities';
+import { jsx, jsxs } from '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 = useTranslation("form"),
+    t = _useTranslation.t;
+  var form = useFormContext();
+  if (!(form !== null && form !== void 0 && form.control)) throw new Error("ArrayInput must be contained within a Form element");
+  var _useFieldArray = useFieldArray({
+      name: name,
+      control: form.control
+    }),
+    fields = _useFieldArray.fields,
+    append = _useFieldArray.append,
+    remove = _useFieldArray.remove,
+    move = _useFieldArray.move;
+  var error = 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 = useCallback(function (item) {
+    append(item);
+    setTimeout(function () {
+      form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
+    }, 100);
+  }, [name, fields, focusName]);
+  useImperativeHandle(arrayRef, function () {
+    return {
+      addItem: handleAdd,
+      removeItem: remove
+    };
+  });
+  var Wrapper = 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__*/jsx(DndContext, {
+        onDragEnd: handleDragEnd,
+        modifiers: [restrictToVerticalAxis],
+        children: /*#__PURE__*/jsx(SortableContext, {
+          items: idMap,
+          children: children
+        })
+      });
+    }
+    return children;
+  }, [enableSorting, fields]);
+  // @ts-expect-error ignore
+  Wrapper.displayName = "SortableWrapper";
+  var SortableItem = useCallback(function (_ref3) {
+    var id = _ref3.id,
+      children = _ref3.children,
+      className = _ref3.className;
+    if (enableSorting) {
+      var _useSortable = useSortable({
+          id: id
+        }),
+        attributes = _useSortable.attributes,
+        listeners = _useSortable.listeners,
+        setNodeRef = _useSortable.setNodeRef,
+        transform = _useSortable.transform,
+        transition = _useSortable.transition,
+        isDragging = _useSortable.isDragging;
+      return /*#__PURE__*/jsxs("div", {
+        className: className,
+        ref: setNodeRef,
+        style: {
+          transform: CSS.Transform.toString(transform),
+          transition: transition
+        },
+        children: [/*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({
+          className: isDragging ? "cursor-grabbing" : "cursor-grab",
+          icon: CoreIcons.dragHandle
+        }, attributes), listeners)), children]
+      });
+    }
+    return /*#__PURE__*/jsx("div", {
+      className: className,
+      children: children
+    });
+  }, [enableSorting]);
+  // @ts-expect-error ignore
+  SortableItem.displayName = "SortableItem";
+  return /*#__PURE__*/jsxs("div", {
+    className: classes.arrayInput,
+    children: [/*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+      children: /*#__PURE__*/jsx(Wrapper, {
+        children: fields.map(function (item, index) {
+          return /*#__PURE__*/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)
+            }) : Children.map(children, function (child) {
+              return /*#__PURE__*/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__*/jsx(Button, {
+              "aria-label": "Remove item",
+              icon: 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__*/jsx("div", {
+      className: "flex justify-end",
+      children: /*#__PURE__*/jsx(Tooltip, {
+        color: "danger",
+        content: 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__*/jsx(Button, {
+          "aria-label": "Add item",
+          icon: CoreIcons.insert,
+          onClick: function onClick() {
+            return handleAdd(onAdd());
+          },
+          "data-invalid": !!error,
+          disabled: !!disabled || readOnly,
+          className: classNames(classes.addButton, "me-10"),
+          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
+        })
+      })
+    })]
+  });
+};
+
+export { ArrayInput };

package/dist/esm/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)}}}}