@form-eng/mantine 1.5.3 → 1.6.0

package/dist/index.js

@@ -29,27 +29,43 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  Autocomplete: () => Autocomplete_default,
   CheckboxGroup: () => CheckboxGroup_default,
+  ColorPicker: () => ColorPicker_default,
   DateControl: () => DateControl_default,
+  DateRange: () => DateRange_default,
+  DateTime: () => DateTime_default,
+  DocumentLinks: () => DocumentLinks_default,
   DocumentLinksStrings: () => import_adapter_utils.DocumentLinksStrings,
   Dropdown: () => Dropdown_default,
   DynamicFragment: () => DynamicFragment_default,
   FieldClassName: () => import_adapter_utils.FieldClassName,
+  FileUpload: () => FileUpload_default,
   FormLoading: () => FormLoading,
   GetFieldDataTestId: () => import_adapter_utils.GetFieldDataTestId,
   MultiSelect: () => MultiSelect_default,
+  MultiSelectSearch: () => MultiSelectSearch_default,
   Number: () => Number_default,
+  PhoneInput: () => PhoneInput_default,
   RadioGroup: () => RadioGroup_default,
+  Rating: () => Rating_default,
   ReadOnly: () => ReadOnly_default,
+  ReadOnlyArray: () => ReadOnlyArray_default,
+  ReadOnlyCumulativeNumber: () => ReadOnlyCumulativeNumber_default,
+  ReadOnlyDateTime: () => ReadOnlyDateTime_default,
+  ReadOnlyRichText: () => ReadOnlyRichText_default,
   ReadOnlyText: () => ReadOnlyText,
+  ReadOnlyWithButton: () => ReadOnlyWithButton_default,
   SimpleDropdown: () => SimpleDropdown_default,
   Slider: () => Slider_default,
+  StatusDropdown: () => StatusDropdown_default,
   StatusMessage: () => StatusMessage,
   Textarea: () => Textarea_default,
   Textbox: () => Textbox_default,
   Toggle: () => Toggle_default,
   createMantineFieldRegistry: () => createMantineFieldRegistry,
-  formatDateTime: () => import_adapter_utils.formatDateTime
+  formatDateTime: () => import_adapter_utils.formatDateTime,
+  getFieldState: () => import_adapter_utils.getFieldState
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -478,92 +494,688 @@ var DynamicFragment = (props) => {
 };
 var DynamicFragment_default = DynamicFragment;
 
-// src/fields/readonly/ReadOnly.tsx
+// src/fields/Rating.tsx
+var import_core12 = require("@mantine/core");
 var import_jsx_runtime14 = require("react/jsx-runtime");
+var Rating = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const max = config?.max ?? 5;
+  const rating = value ?? 0;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ReadOnlyText, { fieldName, value: String(rating) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_core12.Rating,
+    {
+      className: "fe-rating",
+      count: max,
+      value: rating,
+      onChange: (val) => setFieldValue(fieldName, val),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Rating_default = Rating;
+
+// src/fields/Autocomplete.tsx
+var import_core13 = require("@mantine/core");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Autocomplete = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, placeholder, options, setFieldValue } = props;
+  const selectedLabel = options?.find((o) => String(o.value) === String(value))?.label ?? value ?? "";
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ReadOnlyText, { fieldName, value: selectedLabel });
+  }
+  const data = options?.map((o) => ({ value: String(o.value), label: o.label })) ?? [];
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_core13.Autocomplete,
+    {
+      className: "fe-autocomplete",
+      data,
+      defaultValue: selectedLabel,
+      onChange: (val) => {
+        const match = options?.find((o) => o.label === val);
+        setFieldValue(fieldName, match ? String(match.value) : val);
+      },
+      placeholder,
+      error: !!error,
+      required,
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Autocomplete_default = Autocomplete;
+
+// src/fields/DateTime.tsx
+var import_core14 = require("@form-eng/core");
+var import_dates = require("@mantine/dates");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var DateTime = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ReadOnlyText, { fieldName, value: (0, import_core14.formatDateTimeValue)(value) });
+  }
+  const dateValue = value ? new Date(value) : null;
+  const onChange = (date) => {
+    setFieldValue(fieldName, date ? date.toISOString() : null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_dates.DateTimePicker,
+    {
+      className: "fe-date-time",
+      value: dateValue,
+      onChange,
+      error: !!error,
+      required,
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var DateTime_default = DateTime;
+
+// src/fields/DateRange.tsx
+var import_core15 = require("@form-eng/core");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var DateRange = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const rangeValue = value ?? { start: "", end: "" };
+  const minDate = config?.minDate;
+  const maxDate = config?.maxDate;
+  const rangeError = rangeValue.start && rangeValue.end && rangeValue.start > rangeValue.end ? "Start date must be on or before end date." : void 0;
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(ReadOnlyText, { fieldName, value: (0, import_core15.formatDateRange)(value) });
+  }
+  const onStartChange = (event) => {
+    setFieldValue(fieldName, { ...rangeValue, start: event.target.value });
+  };
+  const onEndChange = (event) => {
+    setFieldValue(fieldName, { ...rangeValue, end: event.target.value });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    "div",
+    {
+      className: "fe-date-range",
+      "data-field-type": "DateRange",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fe-date-range__inputs", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fe-date-range__from", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: `${fieldName}-start`, className: "fe-date-range__label", children: "From" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "input",
+              {
+                id: `${fieldName}-start`,
+                type: "date",
+                className: "fe-date-range__input fe-date-range__input--start",
+                value: rangeValue.start,
+                min: minDate,
+                max: rangeValue.end || maxDate,
+                onChange: onStartChange,
+                "aria-invalid": !!error,
+                "aria-required": required,
+                "aria-label": "Start date"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "fe-date-range__to", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("label", { htmlFor: `${fieldName}-end`, className: "fe-date-range__label", children: "To" }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "input",
+              {
+                id: `${fieldName}-end`,
+                type: "date",
+                className: "fe-date-range__input fe-date-range__input--end",
+                value: rangeValue.end,
+                min: rangeValue.start || minDate,
+                max: maxDate,
+                onChange: onEndChange,
+                "aria-label": "End date"
+              }
+            )
+          ] })
+        ] }),
+        rangeError && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "fe-date-range__range-error", role: "alert", children: rangeError })
+      ]
+    }
+  );
+};
+var DateRange_default = DateRange;
+
+// src/fields/PhoneInput.tsx
+var import_core16 = require("@form-eng/core");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var PhoneInput = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const format = config?.format ?? "us";
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ReadOnlyText, { fieldName, value: value ?? "" });
+  }
+  const onChange = (event) => {
+    const digits = (0, import_core16.extractDigits)(event.target.value);
+    const formatted = (0, import_core16.formatPhone)(digits, format);
+    setFieldValue(fieldName, formatted);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    "input",
+    {
+      type: "tel",
+      className: "fe-phone-input",
+      "data-field-type": "PhoneInput",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      value: value ?? "",
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var PhoneInput_default = PhoneInput;
+
+// src/fields/FileUpload.tsx
+var import_core17 = require("@form-eng/core");
+var import_react2 = __toESM(require("react"));
+var import_core18 = require("@mantine/core");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var FileUpload = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const multiple = config?.multiple ?? false;
+  const accept = config?.accept;
+  const maxSizeMb = config?.maxSizeMb ?? import_core17.MAX_FILE_SIZE_MB_DEFAULT;
+  const maxSizeBytes = maxSizeMb * 1024 * 1024;
+  const [sizeError, setSizeError] = import_react2.default.useState(void 0);
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ReadOnlyText, { fieldName, value: (0, import_core17.getFileNames)(value) });
+  }
+  const onChange = (files) => {
+    if (!files || Array.isArray(files) && files.length === 0) {
+      setFieldValue(fieldName, null);
+      setSizeError(void 0);
+      return;
+    }
+    const fileArray = Array.isArray(files) ? files : [files];
+    const oversized = fileArray.find((f) => f.size > maxSizeBytes);
+    if (oversized) {
+      setSizeError(`"${oversized.name}" exceeds the ${maxSizeMb} MB size limit.`);
+      setFieldValue(fieldName, null);
+      return;
+    }
+    setSizeError(void 0);
+    setFieldValue(fieldName, multiple ? fileArray : fileArray[0]);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "div",
+    {
+      className: "fe-file-upload",
+      "data-field-type": "FileUpload",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          import_core18.FileInput,
+          {
+            accept,
+            multiple,
+            onChange,
+            error: !!error,
+            required,
+            placeholder: (0, import_core17.getFileNames)(value) || "Choose file"
+          }
+        ),
+        sizeError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "fe-file-upload__size-error", role: "alert", children: sizeError })
+      ]
+    }
+  );
+};
+var FileUpload_default = FileUpload;
+
+// src/fields/ColorPicker.tsx
+var import_core19 = require("@mantine/core");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var ColorPicker = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const color = value ?? "#000000";
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReadOnlyText, { fieldName, value: color });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    import_core19.ColorInput,
+    {
+      className: "fe-color-picker",
+      value: color,
+      onChange: (val) => setFieldValue(fieldName, val),
+      error: !!error,
+      required,
+      "data-field-type": "ColorPicker",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var ColorPicker_default = ColorPicker;
+
+// src/fields/MultiSelectSearch.tsx
+var import_react3 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var MultiSelectSearch = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const [searchTerm, setSearchTerm] = (0, import_react3.useState)("");
+  const selectedValues = value ?? [];
+  const filteredOptions = (0, import_react3.useMemo)(() => {
+    if (!searchTerm) return options ?? [];
+    const lower = searchTerm.toLowerCase();
+    return (options ?? []).filter((o) => o.label.toLowerCase().includes(lower));
+  }, [options, searchTerm]);
+  const onCheckChange = (optionValue, checked) => {
+    const updated = checked ? [...selectedValues, optionValue] : selectedValues.filter((v) => v !== optionValue);
+    setFieldValue(fieldName, updated, false, 3e3);
+  };
+  if (readOnly) {
+    return selectedValues.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ul", { className: "fe-multi-select-search-readonly", "data-field-type": "MultiSelectSearch", "data-field-state": "readonly", children: selectedValues.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { children: v }, i)) }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "fe-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "fe-multi-select-search", "data-field-type": "MultiSelectSearch", "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }), "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "search", className: "fe-multi-select-search__input", placeholder: "Search...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), "aria-label": `Search options for ${fieldName}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("fieldset", { className: "fe-multi-select-search__options", "aria-invalid": !!error, "aria-required": required, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("legend", { className: "fe-sr-only", children: "Options" }),
+      filteredOptions.map((option) => {
+        const optVal = String(option.value);
+        const isChecked = selectedValues.includes(optVal);
+        return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("label", { className: "fe-multi-select-search__option", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("input", { type: "checkbox", checked: isChecked, disabled: option.disabled, onChange: (e) => onCheckChange(optVal, e.target.checked) }),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: option.label })
+        ] }, optVal);
+      })
+    ] })
+  ] });
+};
+var MultiSelectSearch_default = MultiSelectSearch;
+
+// src/fields/StatusDropdown.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var StatusDropdown = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, options, placeholder, setFieldValue } = props;
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  const statusColor = config?.statusColors?.[value];
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      "div",
+      {
+        className: "fe-status-dropdown fe-status-dropdown--readonly",
+        "data-field-type": "StatusDropdown",
+        "data-field-state": "readonly",
+        children: [
+          statusColor && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            "span",
+            {
+              className: "fe-status-dropdown__indicator",
+              style: { backgroundColor: statusColor },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReadOnlyText, { fieldName, value })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      className: "fe-status-dropdown",
+      "data-field-type": "StatusDropdown",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      children: [
+        statusColor && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "span",
+          {
+            className: "fe-status-dropdown__indicator",
+            style: { backgroundColor: statusColor },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "select",
+          {
+            className: "fe-status-dropdown__select",
+            value: value ?? "",
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: "", children: placeholder ?? config?.placeHolder ?? "" }),
+              options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("option", { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var StatusDropdown_default = StatusDropdown;
+
+// src/fields/DocumentLinks.tsx
+var import_react4 = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var DocumentLinks = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const { watch } = (0, import_react_hook_form.useFormContext)();
+  const documentLinks = watch(`${fieldName}`) ?? [];
+  const [newUrl, setNewUrl] = (0, import_react4.useState)("");
+  const [newText, setNewText] = (0, import_react4.useState)("");
+  const onAddLink = () => {
+    if (!newUrl) return;
+    const link = { url: newUrl, title: newText || newUrl };
+    setFieldValue(fieldName, [...documentLinks, link]);
+    setNewUrl("");
+    setNewText("");
+  };
+  const onDeleteLink = (index) => {
+    const updated = [...documentLinks];
+    updated.splice(index, 1);
+    setFieldValue(fieldName, updated);
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "ul",
+      {
+        className: "fe-document-links fe-document-links--readonly",
+        "data-field-type": "DocumentLinks",
+        "data-field-state": "readonly",
+        children: value?.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("li", { className: "fe-document-links__item", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title || link.url }) }, i))
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "div",
+    {
+      className: "fe-document-links",
+      "data-field-type": "DocumentLinks",
+      "data-field-state": (0, import_adapter_utils.getFieldState)({ error, required, readOnly }),
+      "data-testid": (0, import_adapter_utils.GetFieldDataTestId)(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("ul", { className: "fe-document-links__list", children: documentLinks.map((link, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { className: "fe-document-links__item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title || link.url }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "fe-document-links__delete",
+              onClick: () => onDeleteLink(i),
+              "aria-label": `${import_adapter_utils.DocumentLinksStrings.deleteLink}: ${link.title || link.url}`,
+              children: "\xD7"
+            }
+          )
+        ] }, i)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "fe-document-links__add", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "input",
+            {
+              type: "url",
+              className: "fe-document-links__url-input",
+              placeholder: "URL",
+              value: newUrl,
+              onChange: (e) => setNewUrl(e.target.value),
+              "aria-label": import_adapter_utils.DocumentLinksStrings.link
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "input",
+            {
+              type: "text",
+              className: "fe-document-links__text-input",
+              placeholder: "Label (optional)",
+              value: newText,
+              onChange: (e) => setNewText(e.target.value),
+              "aria-label": "Link label"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "fe-btn fe-btn--secondary",
+              onClick: onAddLink,
+              disabled: !newUrl,
+              children: documentLinks.length > 0 ? import_adapter_utils.DocumentLinksStrings.addAnotherLink : import_adapter_utils.DocumentLinksStrings.addLink
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var DocumentLinks_default = DocumentLinks;
+
+// src/fields/readonly/ReadOnly.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var ReadOnly = (props) => {
   const { fieldName, value, config } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ReadOnlyText, { fieldName, value, ...config });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ReadOnlyText, { fieldName, value, ...config });
 };
 var ReadOnly_default = ReadOnly;
 
+// src/fields/readonly/ReadOnlyArray.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var ReadOnlyArray = (props) => {
+  const { fieldName, value } = props;
+  const items = value ?? [];
+  if (items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "fe-read-only-text", "data-field-type": "ReadOnlyArray", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    "ul",
+    {
+      className: "fe-read-only-array",
+      "data-field-type": "ReadOnlyArray",
+      "data-field-state": "readonly",
+      id: `${fieldName}-read-only`,
+      children: items.map((v, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("li", { children: v }, i))
+    }
+  );
+};
+var ReadOnlyArray_default = ReadOnlyArray;
+
+// src/fields/readonly/ReadOnlyDateTime.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ReadOnlyDateTime = (props) => {
+  const { config, value } = props;
+  if (!value) {
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "fe-read-only-text", "data-field-type": "ReadOnlyDateTime", children: "-" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "time",
+    {
+      className: "fe-read-only-date-time",
+      dateTime: value,
+      "data-field-type": "ReadOnlyDateTime",
+      "data-field-state": "readonly",
+      children: (0, import_adapter_utils.formatDateTime)(value, { hideTimestamp: config?.hidetimeStamp })
+    }
+  );
+};
+var ReadOnlyDateTime_default = ReadOnlyDateTime;
+
+// src/fields/readonly/ReadOnlyCumulativeNumber.tsx
+var import_core20 = require("@form-eng/core");
+var import_react5 = __toESM(require("react"));
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var ReadOnlyCumulativeNumber = (props) => {
+  const { fieldName, config } = props;
+  const { formState, getValues } = (0, import_react_hook_form2.useFormContext)();
+  const [value, setValue] = import_react5.default.useState();
+  const { dependencyFields } = config || {};
+  import_react5.default.useEffect(() => {
+    const formValues = getValues();
+    if (!(0, import_core20.isEmpty)(dependencyFields)) {
+      let totalCount = 0;
+      dependencyFields.map((fn) => {
+        totalCount += Number(formValues[fn]) || 0;
+      });
+      setValue(totalCount);
+    }
+  }, [formState]);
+  if (!fieldName) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "data-field-type": "ReadOnlyCumulativeNumber", "data-field-state": "readonly", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ReadOnlyText, { fieldName, value: String(value), ...config }) });
+};
+var ReadOnlyCumulativeNumber_default = ReadOnlyCumulativeNumber;
+
+// src/fields/readonly/ReadOnlyRichText.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var ReadOnlyRichText = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    "div",
+    {
+      className: "fe-read-only-rich-text",
+      "data-field-type": "ReadOnlyRichText",
+      "data-field-state": "readonly",
+      dangerouslySetInnerHTML: { __html: value || "" }
+    }
+  );
+};
+var ReadOnlyRichText_default = ReadOnlyRichText;
+
+// src/fields/readonly/ReadOnlyWithButton.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var ReadOnlyWithButton = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+    "div",
+    {
+      className: `fe-read-only-with-button ${config?.containerClassName ?? ""}`,
+      "data-field-type": "ReadOnlyWithButton",
+      "data-field-state": "readonly",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ReadOnlyText, { fieldName, value: `${value}` }),
+        config?.buttonText && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "fe-btn fe-btn--secondary",
+            onClick: config.onButtonClick,
+            children: config.buttonText
+          }
+        )
+      ]
+    }
+  );
+};
+var ReadOnlyWithButton_default = ReadOnlyWithButton;
+
 // src/components/StatusMessage.tsx
-var import_core12 = require("@form-eng/core");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_core21 = require("@form-eng/core");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var StatusMessage = (props) => {
   const { id, error, errorCount, savePending, saving } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "fe-status-message", children: error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { id, role: "alert", style: { color: "var(--mantine-color-red-6, #fa5252)" }, children: error.message || "Error" }) : savePending ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { id, role: "alert", style: { color: "var(--mantine-color-orange-6, #fd7e14)" }, children: [
-    import_core12.FormStrings.autoSavePending,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "fe-status-message", children: error ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id, role: "alert", style: { color: "var(--mantine-color-red-6, #fa5252)" }, children: error.message || "Error" }) : savePending ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { id, role: "alert", style: { color: "var(--mantine-color-orange-6, #fd7e14)" }, children: [
+    import_core21.FormStrings.autoSavePending,
     " (",
     errorCount,
     " ",
-    import_core12.FormStrings.remaining,
+    import_core21.FormStrings.remaining,
     ")"
-  ] }) : saving ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { id, role: "status", style: { color: "var(--mantine-color-gray-6, #868e96)" }, children: import_core12.FormStrings.saving }) : null });
+  ] }) : saving ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { id, role: "status", style: { color: "var(--mantine-color-gray-6, #868e96)" }, children: import_core21.FormStrings.saving }) : null });
 };
 
 // src/components/FormLoading.tsx
-var import_core13 = require("@form-eng/core");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_core22 = require("@form-eng/core");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var FormLoading = (props) => {
   const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
-  const count = loadingShimmerCount || import_core13.FormConstants.loadingShimmerCount;
-  const height = loadingFieldShimmerHeight || import_core13.FormConstants.loadingFieldShimmerHeight;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const count = loadingShimmerCount || import_core22.FormConstants.loadingShimmerCount;
+  const height = loadingFieldShimmerHeight || import_core22.FormConstants.loadingFieldShimmerHeight;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       className: `fe-form-loading ${inPanel ? "fe-form-loading--panel" : ""}`,
       role: "status",
       "aria-label": "Loading form",
-      children: [...Array(count)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { style: { marginBottom: 16 }, children: [
-        !hideTitleShimmer && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fe-skeleton", style: { width: "33%", height: 16, marginBottom: 8, background: "var(--mantine-color-gray-2, #e9ecef)", borderRadius: 4 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "fe-skeleton", style: { width: "100%", height, background: "var(--mantine-color-gray-2, #e9ecef)", borderRadius: 4 } })
+      children: [...Array(count)].map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { style: { marginBottom: 16 }, children: [
+        !hideTitleShimmer && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fe-skeleton", style: { width: "33%", height: 16, marginBottom: 8, background: "var(--mantine-color-gray-2, #e9ecef)", borderRadius: 4 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "fe-skeleton", style: { width: "100%", height, background: "var(--mantine-color-gray-2, #e9ecef)", borderRadius: 4 } })
       ] }, `fe-loading-${i}`))
     }
   );
 };
 
 // src/registry.ts
-var import_core14 = require("@form-eng/core");
-var import_react2 = __toESM(require("react"));
+var import_core23 = require("@form-eng/core");
+var import_react6 = __toESM(require("react"));
 function createMantineFieldRegistry() {
   return {
-    [import_core14.ComponentTypes.Textbox]: import_react2.default.createElement(Textbox_default),
-    [import_core14.ComponentTypes.Number]: import_react2.default.createElement(Number_default),
-    [import_core14.ComponentTypes.Toggle]: import_react2.default.createElement(Toggle_default),
-    [import_core14.ComponentTypes.Dropdown]: import_react2.default.createElement(Dropdown_default),
-    [import_core14.ComponentTypes.SimpleDropdown]: import_react2.default.createElement(SimpleDropdown_default),
-    [import_core14.ComponentTypes.MultiSelect]: import_react2.default.createElement(MultiSelect_default),
-    [import_core14.ComponentTypes.DateControl]: import_react2.default.createElement(DateControl_default),
-    [import_core14.ComponentTypes.Slider]: import_react2.default.createElement(Slider_default),
-    [import_core14.ComponentTypes.RadioGroup]: import_react2.default.createElement(RadioGroup_default),
-    [import_core14.ComponentTypes.CheckboxGroup]: import_react2.default.createElement(CheckboxGroup_default),
-    [import_core14.ComponentTypes.Textarea]: import_react2.default.createElement(Textarea_default),
-    [import_core14.ComponentTypes.Fragment]: import_react2.default.createElement(DynamicFragment_default),
-    [import_core14.ComponentTypes.ReadOnly]: import_react2.default.createElement(ReadOnly_default)
+    [import_core23.ComponentTypes.Textbox]: import_react6.default.createElement(Textbox_default),
+    [import_core23.ComponentTypes.Number]: import_react6.default.createElement(Number_default),
+    [import_core23.ComponentTypes.Toggle]: import_react6.default.createElement(Toggle_default),
+    [import_core23.ComponentTypes.Dropdown]: import_react6.default.createElement(Dropdown_default),
+    [import_core23.ComponentTypes.SimpleDropdown]: import_react6.default.createElement(SimpleDropdown_default),
+    [import_core23.ComponentTypes.MultiSelect]: import_react6.default.createElement(MultiSelect_default),
+    [import_core23.ComponentTypes.DateControl]: import_react6.default.createElement(DateControl_default),
+    [import_core23.ComponentTypes.Slider]: import_react6.default.createElement(Slider_default),
+    [import_core23.ComponentTypes.RadioGroup]: import_react6.default.createElement(RadioGroup_default),
+    [import_core23.ComponentTypes.CheckboxGroup]: import_react6.default.createElement(CheckboxGroup_default),
+    [import_core23.ComponentTypes.Textarea]: import_react6.default.createElement(Textarea_default),
+    [import_core23.ComponentTypes.Fragment]: import_react6.default.createElement(DynamicFragment_default),
+    [import_core23.ComponentTypes.ReadOnly]: import_react6.default.createElement(ReadOnly_default),
+    [import_core23.ComponentTypes.Rating]: import_react6.default.createElement(Rating_default),
+    [import_core23.ComponentTypes.Autocomplete]: import_react6.default.createElement(Autocomplete_default),
+    [import_core23.ComponentTypes.DateTime]: import_react6.default.createElement(DateTime_default),
+    [import_core23.ComponentTypes.DateRange]: import_react6.default.createElement(DateRange_default),
+    [import_core23.ComponentTypes.PhoneInput]: import_react6.default.createElement(PhoneInput_default),
+    [import_core23.ComponentTypes.FileUpload]: import_react6.default.createElement(FileUpload_default),
+    [import_core23.ComponentTypes.ColorPicker]: import_react6.default.createElement(ColorPicker_default),
+    [import_core23.ComponentTypes.MultiSelectSearch]: import_react6.default.createElement(MultiSelectSearch_default),
+    [import_core23.ComponentTypes.StatusDropdown]: import_react6.default.createElement(StatusDropdown_default),
+    [import_core23.ComponentTypes.DocumentLinks]: import_react6.default.createElement(DocumentLinks_default),
+    [import_core23.ComponentTypes.ReadOnlyArray]: import_react6.default.createElement(ReadOnlyArray_default),
+    [import_core23.ComponentTypes.ReadOnlyDateTime]: import_react6.default.createElement(ReadOnlyDateTime_default),
+    [import_core23.ComponentTypes.ReadOnlyCumulativeNumber]: import_react6.default.createElement(ReadOnlyCumulativeNumber_default),
+    [import_core23.ComponentTypes.ReadOnlyRichText]: import_react6.default.createElement(ReadOnlyRichText_default),
+    [import_core23.ComponentTypes.ReadOnlyWithButton]: import_react6.default.createElement(ReadOnlyWithButton_default)
   };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Autocomplete,
   CheckboxGroup,
+  ColorPicker,
   DateControl,
+  DateRange,
+  DateTime,
+  DocumentLinks,
   DocumentLinksStrings,
   Dropdown,
   DynamicFragment,
   FieldClassName,
+  FileUpload,
   FormLoading,
   GetFieldDataTestId,
   MultiSelect,
+  MultiSelectSearch,
   Number,
+  PhoneInput,
   RadioGroup,
+  Rating,
   ReadOnly,
+  ReadOnlyArray,
+  ReadOnlyCumulativeNumber,
+  ReadOnlyDateTime,
+  ReadOnlyRichText,
   ReadOnlyText,
+  ReadOnlyWithButton,
   SimpleDropdown,
   Slider,
+  StatusDropdown,
   StatusMessage,
   Textarea,
   Textbox,
   Toggle,
   createMantineFieldRegistry,
-  formatDateTime
+  formatDateTime,
+  getFieldState
 });
 //# sourceMappingURL=index.js.map