@react-fabric/form 1.0.0-beta.5 → 1.0.0-beta.52

package/{src/input/ArrayInput.module.css → css/_arrayInput.css}

@@ -21,20 +21,20 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer var {
-  .arrayInput {
+@layer variants {
+  .fabric-arrayInput {
     & [data-ref="fieldWrapper"] {
       flex: 1 1 0%;
     }
 
-    & .addButton :global(.buttonInner) {
-      color: theme(colors.tint.600);
-      outline: 1px dashed theme(colors.tint.600);
+    & .fabric-addButton .fabric-button {
+      color: var(--color-tint-600);
+      outline: 1px dashed var(--color-tint-600);
 
       &[data-invalid="true"] {
-        color: theme(colors.danger.600);
-        background-color: theme(colors.danger.100);
-        outline: 1px dashed theme(colors.danger.600);
+        color: var(--color-danger-600);
+        background-color: var(--color-danger-100);
+        outline: 1px dashed var(--color-danger-600);
       }
     }
   }

package/css/_colorPicker.css

@@ -0,0 +1,65 @@
+/*
+ * 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.
+ */
+
+@layer components {
+  .fabric-colorPicker {
+    --color-shadow: var(--border-color-base);
+
+    & input {
+      padding: 0 4px !important;
+
+      line-height: 2;
+      color: var(--text-color-base);
+
+      background-color: var(--bg-color-base);
+      border: 1px solid var(--border-color-base);
+      border-radius: var(--rounded-sm);
+      box-shadow: none;
+
+      &:focus {
+        border-color: var(--border-primary-500);
+      }
+    }
+
+    & label {
+      color: var(--text-color-base);
+    }
+
+    & .flexbox-fix {
+      justify-content: center;
+      border-color: var(--border-color-muted);
+
+      & > div > div {
+        text-align: center;
+      }
+
+      & span > div {
+        box-shadow: 0 0 1px 1px var(--border-color-base) inset !important;
+      }
+    }
+
+    & .saturation-black ~ div {
+      pointer-events: none;
+    }
+  }
+}

package/{src/internal/Field.module.css → css/_field.css}

@@ -21,28 +21,28 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .fieldWrapper {
+@layer components {
+  .fabric-fieldWrapper {
     /* later */
   }
 }
 
-@layer var {
-  .inputWrapper {
+@layer variants {
+  .fabric-inputWrapper {
     &::after {
       inset-inline: 50%;
       transition: all 300ms;
       transition-delay: 100ms;
     }
 
-    & .decorate:has([data-ref="button"]) {
+    & .fabric-decorate:has([data-ref="button"]) {
       display: flex;
       align-self: stretch;
     }
 
     &:has(input[disabled], textarea[disabled]) {
       cursor: not-allowed;
-      background-color: theme(colors.tint.50);
+      background-color: var(--color-tint-50);
 
       & input,
       & textarea {
@@ -54,14 +54,14 @@
     &:has([data-open="true"]) {
       z-index: 1;
       background-color: var(--fabric-input-focus);
-      outline-color: var(--primary);
+      outline-color: var(--color-primary);
 
       &:not(:has([aria-readonly="true"]:not([hidden])))::after {
         inset-inline: 0;
       }
     }
 
-    &:global(.fixed) {
+    &.fixed {
       box-shadow: 0 0 2rem 0.5rem var(--fabric-shadow);
     }
 
@@ -71,7 +71,7 @@
     }
 
     & > input[type="number"] + .inputClear {
-      margin-inline: -3rem 2rem;
+      margin-inline: -3rem 0;
     }
 
     & input::-ms-clear,
@@ -90,49 +90,84 @@
       letter-spacing: 2px;
     }
 
+    & input[type="date"]::-webkit-calendar-picker-indicator,
+    & input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+      display: none;
+      appearance: none;
+    }
+
+    & input[type="date"].empty::-webkit-datetime-edit,
+    & input[type="datetime-local"].empty::-webkit-datetime-edit {
+      color: var(--color-tint-400);
+    }
+
     & input:-webkit-autofill {
       box-shadow: 0 0 0 999em var(--fabric-input) inset;
 
-      -webkit-text-fill-color: theme(colors.accent.700);
+      -webkit-text-fill-color: var(--color-accent-700);
     }
 
     & input:-webkit-autofill:focus {
       box-shadow: 0 0 0 999em var(--fabric-input-focus) inset;
 
-      -webkit-text-fill-color: theme(colors.accent.700);
+      -webkit-text-fill-color: var(--color-accent-700);
     }
 
-    &.invalidWrapper {
-      outline-color: theme(colors.danger.500);
+    &.fabric-invalidWrapper {
+      outline-color: var(--color-danger-500);
 
       &::after {
-        background-color: theme(colors.danger.500);
+        background-color: var(--color-danger-500);
       }
     }
   }
 
-  .fieldGroup {
+  .fabric-fieldGroup {
     > * {
       line-height: 1;
     }
 
-    > :not(:first-child) {
-      &,
-      & > div,
-      & > [role="button"],
-      & > [data-ref="button"] > [role="button"] {
-        border-start-start-radius: 0;
-        border-end-start-radius: 0;
+    &[data-vertical="false"] {
+      > :not(:first-child) {
+        &,
+        & > div,
+        & > [role="button"],
+        & > [data-ref="button"] > [role="button"] {
+          border-start-start-radius: 0;
+          border-end-start-radius: 0;
+        }
+      }
+
+      > :not(:last-child) {
+        &,
+        & > div,
+        & > [role="button"],
+        & > [data-ref="button"] > [role="button"] {
+          border-start-end-radius: 0;
+          border-end-end-radius: 0;
+        }
       }
     }
 
-    > :not(:last-child) {
-      &,
-      & > div,
-      & > [role="button"],
-      & > [data-ref="button"] > [role="button"] {
-        border-start-end-radius: 0;
-        border-end-end-radius: 0;
+    &[data-vertical="true"] {
+      > :not(:first-child) {
+        &,
+        & > div,
+        & > [role="button"],
+        & > [data-ref="button"] > [role="button"] {
+          border-start-start-radius: 0;
+          border-start-end-radius: 0;
+        }
+      }
+
+      > :not(:last-child) {
+        &,
+        & > div,
+        & > [role="button"],
+        & > [data-ref="button"] > [role="button"] {
+          border-end-start-radius: 0;
+          border-end-end-radius: 0;
+        }
       }
     }
   }

package/{src/input/File.module.css → css/_file.css}

@@ -21,22 +21,37 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .fileInput {
+@layer components {
+  .fabric-fileInput {
     &::-webkit-file-upload-button {
-      @apply bg-primary-500 opacity-80 hover:opacity-90 text-white rounded border-none py-0 cursor-pointer;
+      cursor: pointer;
+
+      padding-block: 0;
+      padding-inline: 4px;
+
+      color: var(--color-white);
+
+      opacity: 0.8;
+      background-color: var(--color-primary-500);
+      border: 0;
+      border-radius: var(--rounded);
+
+      &:hover {
+        opacity: 0.9;
+      }
     }
 
     &[aria-invalid="true"]::-webkit-file-upload-button {
-      @apply bg-danger-500;
+      background-color: var(--color-danger-500);
     }
 
     &:disabled::-webkit-file-upload-button {
-      @apply bg-muted pointer-events-none;
+      pointer-events: none;
+      background-color: var(--bg-color-muted);
     }
 
     &[readOnly] {
-      @apply pointer-events-none;
+      pointer-events: none;
     }
   }
 }

package/css/styles.css

@@ -0,0 +1,27 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 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.
+ */
+
+@import "./_arrayInput.css";
+@import "./_colorPicker.css";
+@import "./_field.css";
+@import "./_file.css";

package/dist/cjs/builder/FileField.js

@@ -7,23 +7,29 @@ var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var react = require('react');
+var reactI18next = require('react-i18next');
 var useFileUploader = require('../hooks/useFileUploader.js');
 var Field = require('../input/Field.js');
 var Hidden = require('../input/Hidden.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["uploadHandler", "inline", "label", "accept", "multiple", "value"];
+var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple", "invalid", "error"];
 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 FileField = function FileField(_ref) {
+  var _error$values$label, _error$values, _error$values2;
   var uploadHandler = _ref.uploadHandler,
     inline = _ref.inline,
     label = _ref.label,
     accept = _ref.accept,
-    _ref$multiple = _ref.multiple,
-    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-    value = _ref.value,
+    value = _ref.value;
+    _ref.fileUrl;
+    var multiple = _ref.multiple;
+    _ref.invalid;
+    var error = _ref.error,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
   var _useFileUploader = useFileUploader.useFileUploader( /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -49,32 +55,38 @@ var FileField = function FileField(_ref) {
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-    children: [/*#__PURE__*/jsxRuntime.jsxs(Field.Field, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Field.Field, {
       plain: true,
       inline: inline,
       label: label,
-      className: "inline-block",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, _objectSpread({
+      children: /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, _objectSpread({
         hiddenValue: multiple ? list : list === null || list === void 0 ? void 0 : list[0]
-      }, rest)), /*#__PURE__*/jsxRuntime.jsx("span", {
-        children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-          badge: pending > 0 ? "".concat(pending) : undefined,
-          "data-ref": "filebtn",
-          children: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
-            children: [/*#__PURE__*/jsxRuntime.jsx("span", {
-              children: "Add file"
-            }), /*#__PURE__*/jsxRuntime.jsx("input", {
-              type: "file",
-              accept: accept,
-              multiple: multiple,
-              className: "absolute inset-0 opacity-0 z-5",
-              onChange: function onChange(e) {
-                return [upload(e.target.files), e.target.value = ""];
-              }
-            })]
-          })
+      }, rest))
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+      color: "danger-200",
+      content: utilities.isString(error) ? "".concat(error) : error && t(error === null || error === void 0 ? void 0 : error.key, 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)
+      }) : {}),
+      disabled: !error,
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        badge: pending > 0 ? "".concat(pending) : undefined,
+        color: error ? "danger" : undefined,
+        variant: error ? "soft" : undefined,
+        "data-ref": "filebtn",
+        children: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+          children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+            children: "Add file"
+          }), /*#__PURE__*/jsxRuntime.jsx("input", {
+            type: "file",
+            accept: accept,
+            multiple: multiple,
+            className: "absolute inset-0 opacity-0 z-5",
+            onChange: function onChange(e) {
+              return [upload(e.target.files), e.target.value = ""];
+            }
+          })]
         })
-      })]
+      })
     }), /*#__PURE__*/jsxRuntime.jsx("br", {}), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "bg-alternate",
       children: files.map(function (file, idx) {

package/dist/cjs/builder/FormField.js

@@ -2,22 +2,25 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var reactI18next = require('react-i18next');
 var Controller = require('../form/Controller.js');
 var ArrayInput = require('../input/ArrayInput.js');
 var AvatarInput = require('../input/AvatarInput.js');
 var ColorInput = require('../input/ColorInput.js');
+var DateInput = require('../input/DateInput.js');
 var Input = require('../input/Input.js');
 var Number = require('../input/Number.js');
-var Range = require('../input/Range.js');
+var RangeSlider = require('../input/RangeSlider.js');
 var Switch = require('../input/Switch.js');
 var Textarea = require('../input/Textarea.js');
 var Select = require('../select/Select.js');
+var schema = require('../types/schema.js');
 var FileField = require('./FileField.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["id", "label", "required", "inline", "prefix", "autoFocus", "defaultValue", "fileUrl", "uploadHandler"];
+var _excluded = ["id", "label", "required", "inline", "prefix", "autoFocus", "optionLists", "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 FormField = function FormField(_ref) {
@@ -26,9 +29,9 @@ var FormField = function FormField(_ref) {
     required = _ref.required,
     inline = _ref.inline,
     prefix = _ref.prefix,
-    autoFocus = _ref.autoFocus;
-    _ref.defaultValue;
-    var fileUrl = _ref.fileUrl,
+    autoFocus = _ref.autoFocus,
+    optionLists = _ref.optionLists,
+    fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation(),
@@ -36,48 +39,61 @@ var FormField = function FormField(_ref) {
   var fieldName = react.useMemo(function () {
     return [prefix, id].filter(Boolean).join(".");
   }, [id, prefix]);
+  var hasOptions = react.useMemo(function () {
+    var _rest$optionList;
+    return rest.datatype === schema.DATA_TYPES.STRING && (rest.optionList === "--CUSTOM--" && !utilities.isEmpty(rest.options) || !utilities.isEmpty(optionLists === null || optionLists === void 0 ? void 0 : optionLists[(_rest$optionList = rest.optionList) !== null && _rest$optionList !== void 0 ? _rest$optionList : ""]));
+  }, [rest]);
   var E = react.useMemo(function () {
-    if (rest.datatype === "number" || rest.datatype === "decimal") return Number.Number;
-    if (rest.datatype === "range") return Range.Range;
-    if (rest.datatype === "boolean") return Switch.Switch;
-    if (rest.datatype === "text") return Textarea.Textarea;
-    if (rest.datatype === "color") return ColorInput.ColorInput;
-    if (rest.datatype === "string" && rest.options) return Select.Select;
+    if (rest.datatype === schema.DATA_TYPES.NUMBER) return Number.Number;
+    if (rest.datatype === schema.DATA_TYPES.RANGE) return RangeSlider.RangeSlider;
+    if (rest.datatype === schema.DATA_TYPES.BOOL) return Switch.Switch;
+    if (rest.datatype === schema.DATA_TYPES.TEXT) return Textarea.Textarea;
+    if (rest.datatype === schema.DATA_TYPES.DATE) return DateInput.DateInput;
+    if (rest.datatype === schema.DATA_TYPES.DATETIME) return DateInput.DateInput;
+    if (rest.datatype === schema.DATA_TYPES.COLOR) return ColorInput.ColorInput;
+    if (hasOptions) return Select.Select;
     return Input.Input;
-  }, [rest.datatype]);
+  }, [rest.datatype, hasOptions]);
   var props = react.useMemo(function () {
-    var _rest$step, _rest$step2, _rest$min, _rest$max, _rest$step3;
-    if (rest.datatype === "number") return {
+    var _rest$step, _rest$min, _rest$max, _rest$step2, _optionLists, _rest$optionList2;
+    if (rest.datatype === schema.DATA_TYPES.NUMBER) return {
       min: rest.min,
       max: rest.max,
       step: (_rest$step = rest.step) !== null && _rest$step !== void 0 ? _rest$step : 1
     };
-    if (rest.datatype === "decimal") return {
-      min: rest.min,
-      max: rest.max,
-      step: (_rest$step2 = rest.step) !== null && _rest$step2 !== void 0 ? _rest$step2 : 0.1
-    };
-    if (rest.datatype === "range") return {
+    if (rest.datatype === schema.DATA_TYPES.RANGE) return {
       min: (_rest$min = rest.min) !== null && _rest$min !== void 0 ? _rest$min : 1,
       max: (_rest$max = rest.max) !== null && _rest$max !== void 0 ? _rest$max : 99,
-      step: (_rest$step3 = rest.step) !== null && _rest$step3 !== void 0 ? _rest$step3 : 1,
+      step: (_rest$step2 = rest.step) !== null && _rest$step2 !== void 0 ? _rest$step2 : 1,
       showValue: true,
       showLabels: true
     };
-    if (rest.datatype === "text") return {
+    if (rest.datatype === schema.DATA_TYPES.DATE) return {
+      min: rest.min,
+      max: rest.max,
+      type: "date"
+    };
+    if (rest.datatype === schema.DATA_TYPES.DATETIME) return {
+      min: rest.min,
+      max: rest.max,
+      type: "datetime"
+    };
+    if (rest.datatype === schema.DATA_TYPES.TEXT) return {
       rows: 3
     };
-    if (rest.datatype === "color") return {
+    if (rest.datatype === schema.DATA_TYPES.COLOR) return {
       showPicker: true
     };
-    if (rest.datatype === "string" && rest.options) return {
-      options: rest.options,
+    if (rest.datatype === schema.DATA_TYPES.STRING && hasOptions) return _objectSpread({
       multiple: rest.multiple,
+      allowCreate: rest.allowCustom,
       searchable: true
-    };
+    }, (_optionLists = optionLists === null || optionLists === void 0 ? void 0 : optionLists[(_rest$optionList2 = rest.optionList) !== null && _rest$optionList2 !== void 0 ? _rest$optionList2 : ""]) !== null && _optionLists !== void 0 ? _optionLists : {
+      options: rest.options
+    });
     return {};
-  }, [rest]);
-  if (rest.datatype === "avatar") return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+  }, [rest, hasOptions, optionLists]);
+  if (rest.datatype === schema.DATA_TYPES.AVATAR) return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsxRuntime.jsx(AvatarInput.AvatarInput, {
       uploadHandler: uploadHandler,
@@ -85,7 +101,7 @@ var FormField = function FormField(_ref) {
       name: fieldName
     })
   });
-  if (rest.datatype === "file") return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+  if (rest.datatype === schema.DATA_TYPES.FILE) return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsxRuntime.jsx(FileField.FileField, _objectSpread({
       uploadHandler: uploadHandler,
@@ -94,12 +110,12 @@ var FormField = function FormField(_ref) {
       id: id
     }, rest))
   });
-  return rest.multiple && !("options" in rest) ? /*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
+  return rest.multiple && !hasOptions ? /*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
     name: fieldName,
-    label: t(label, label),
+    label: t("fb.".concat(id), label || id),
     required: required,
     onAdd: function onAdd() {
-      return "";
+      return String("");
     },
     children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
       children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread({}, props))
@@ -108,8 +124,8 @@ var FormField = function FormField(_ref) {
     name: fieldName,
     children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({}, props), {}, {
       autoFocus: autoFocus,
-      label: t(label, label),
-      placeholder: t(label, label),
+      label: t("fb.".concat(id), label || id),
+      placeholder: t("fb.".concat(id), label || id),
       required: required,
       inline: inline
     }))

package/dist/cjs/builder/SchemaEditor.js

@@ -0,0 +1,72 @@
+'use strict';
+
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var Form = require('../form/Form.js');
+var schema = require('../types/schema.js');
+var SchemaArrayForm = require('./components/SchemaArrayForm.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 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.
+ */
+
+var SchemaEditor = function SchemaEditor(_ref) {
+  var schemaDef = _ref.schemaDef,
+    dynamic = _ref.dynamic,
+    acceptableTypes = _ref.acceptableTypes,
+    _ref$optionLists = _ref.optionLists,
+    optionLists = _ref$optionLists === void 0 ? utilities.EMPTY_ARRAY : _ref$optionLists,
+    children = _ref.children,
+    onSubmit = _ref.onSubmit,
+    onChange = _ref.onChange;
+  var formRef = react.useRef(null);
+  var handleChange = react.useCallback(function (model) {
+    onChange === null || onChange === void 0 || onChange(model.schema);
+  }, []);
+  var handleSubmit = react.useCallback(function (model) {
+    onSubmit === null || onSubmit === void 0 || onSubmit(model.schema);
+  }, []);
+  react.useEffect(function () {
+    var _formRef$current;
+    (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setValues({
+      schema: schemaDef
+    });
+  }, [schemaDef]);
+  return /*#__PURE__*/jsxRuntime.jsxs(Form.Form, {
+    formRef: formRef,
+    onChange: handleChange,
+    onSubmit: handleSubmit,
+    children: [/*#__PURE__*/jsxRuntime.jsx(SchemaArrayForm.SchemaArrayForm, {
+      dynamic: dynamic,
+      optionLists: optionLists,
+      acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(schema.DATA_TYPES)
+    }), children && /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
+      flex: true,
+      className: "border-t bg-base px-6 py-2",
+      children: children
+    })]
+  });
+};
+
+exports.SchemaEditor = SchemaEditor;