@form-eng/mantine 1.5.2 → 1.6.0

package/dist/index.mjs

@@ -22,6 +22,7 @@ var ReadOnlyText = (props) => {
 import {
   FieldClassName,
   GetFieldDataTestId,
+  getFieldState,
   formatDateTime,
   DocumentLinksStrings,
   convertBooleanToYesOrNoText,
@@ -430,45 +431,610 @@ var DynamicFragment = (props) => {
 };
 var DynamicFragment_default = DynamicFragment;
 
-// src/fields/readonly/ReadOnly.tsx
+// src/fields/Rating.tsx
+import { Rating as MantineRating } from "@mantine/core";
 import { jsx as jsx14 } from "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__ */ jsx14(ReadOnlyText, { fieldName, value: String(rating) });
+  }
+  return /* @__PURE__ */ jsx14(
+    MantineRating,
+    {
+      className: "fe-rating",
+      count: max,
+      value: rating,
+      onChange: (val) => setFieldValue(fieldName, val),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Rating_default = Rating;
+
+// src/fields/Autocomplete.tsx
+import { Autocomplete as MantineAutocomplete } from "@mantine/core";
+import { jsx as jsx15 } from "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__ */ jsx15(ReadOnlyText, { fieldName, value: selectedLabel });
+  }
+  const data = options?.map((o) => ({ value: String(o.value), label: o.label })) ?? [];
+  return /* @__PURE__ */ jsx15(
+    MantineAutocomplete,
+    {
+      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": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var Autocomplete_default = Autocomplete;
+
+// src/fields/DateTime.tsx
+import { formatDateTimeValue } from "@form-eng/core";
+import { DateTimePicker } from "@mantine/dates";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var DateTime = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  if (readOnly) {
+    return /* @__PURE__ */ jsx16(ReadOnlyText, { fieldName, value: formatDateTimeValue(value) });
+  }
+  const dateValue = value ? new Date(value) : null;
+  const onChange = (date) => {
+    setFieldValue(fieldName, date ? date.toISOString() : null);
+  };
+  return /* @__PURE__ */ jsx16(
+    DateTimePicker,
+    {
+      className: "fe-date-time",
+      value: dateValue,
+      onChange,
+      error: !!error,
+      required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var DateTime_default = DateTime;
+
+// src/fields/DateRange.tsx
+import { formatDateRange } from "@form-eng/core";
+import { jsx as jsx17, jsxs as jsxs2 } from "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__ */ jsx17(ReadOnlyText, { fieldName, value: formatDateRange(value) });
+  }
+  const onStartChange = (event) => {
+    setFieldValue(fieldName, { ...rangeValue, start: event.target.value });
+  };
+  const onEndChange = (event) => {
+    setFieldValue(fieldName, { ...rangeValue, end: event.target.value });
+  };
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: "fe-date-range",
+      "data-field-type": "DateRange",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ jsxs2("div", { className: "fe-date-range__inputs", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "fe-date-range__from", children: [
+            /* @__PURE__ */ jsx17("label", { htmlFor: `${fieldName}-start`, className: "fe-date-range__label", children: "From" }),
+            /* @__PURE__ */ jsx17(
+              "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__ */ jsxs2("div", { className: "fe-date-range__to", children: [
+            /* @__PURE__ */ jsx17("label", { htmlFor: `${fieldName}-end`, className: "fe-date-range__label", children: "To" }),
+            /* @__PURE__ */ jsx17(
+              "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__ */ jsx17("span", { className: "fe-date-range__range-error", role: "alert", children: rangeError })
+      ]
+    }
+  );
+};
+var DateRange_default = DateRange;
+
+// src/fields/PhoneInput.tsx
+import { extractDigits, formatPhone } from "@form-eng/core";
+import { jsx as jsx18 } from "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__ */ jsx18(ReadOnlyText, { fieldName, value: value ?? "" });
+  }
+  const onChange = (event) => {
+    const digits = extractDigits(event.target.value);
+    const formatted = formatPhone(digits, format);
+    setFieldValue(fieldName, formatted);
+  };
+  return /* @__PURE__ */ jsx18(
+    "input",
+    {
+      type: "tel",
+      className: "fe-phone-input",
+      "data-field-type": "PhoneInput",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      value: value ?? "",
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var PhoneInput_default = PhoneInput;
+
+// src/fields/FileUpload.tsx
+import { MAX_FILE_SIZE_MB_DEFAULT, getFileNames } from "@form-eng/core";
+import React2 from "react";
+import { FileInput } from "@mantine/core";
+import { jsx as jsx19, jsxs as jsxs3 } from "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 ?? MAX_FILE_SIZE_MB_DEFAULT;
+  const maxSizeBytes = maxSizeMb * 1024 * 1024;
+  const [sizeError, setSizeError] = React2.useState(void 0);
+  if (readOnly) {
+    return /* @__PURE__ */ jsx19(ReadOnlyText, { fieldName, value: 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__ */ jsxs3(
+    "div",
+    {
+      className: "fe-file-upload",
+      "data-field-type": "FileUpload",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ jsx19(
+          FileInput,
+          {
+            accept,
+            multiple,
+            onChange,
+            error: !!error,
+            required,
+            placeholder: getFileNames(value) || "Choose file"
+          }
+        ),
+        sizeError && /* @__PURE__ */ jsx19("span", { className: "fe-file-upload__size-error", role: "alert", children: sizeError })
+      ]
+    }
+  );
+};
+var FileUpload_default = FileUpload;
+
+// src/fields/ColorPicker.tsx
+import { ColorInput } from "@mantine/core";
+import { jsx as jsx20 } from "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__ */ jsx20(ReadOnlyText, { fieldName, value: color });
+  }
+  return /* @__PURE__ */ jsx20(
+    ColorInput,
+    {
+      className: "fe-color-picker",
+      value: color,
+      onChange: (val) => setFieldValue(fieldName, val),
+      error: !!error,
+      required,
+      "data-field-type": "ColorPicker",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId)
+    }
+  );
+};
+var ColorPicker_default = ColorPicker;
+
+// src/fields/MultiSelectSearch.tsx
+import { useState, useMemo } from "react";
+import { jsx as jsx21, jsxs as jsxs4 } from "react/jsx-runtime";
+var MultiSelectSearch = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const [searchTerm, setSearchTerm] = useState("");
+  const selectedValues = value ?? [];
+  const filteredOptions = 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__ */ jsx21("ul", { className: "fe-multi-select-search-readonly", "data-field-type": "MultiSelectSearch", "data-field-state": "readonly", children: selectedValues.map((v, i) => /* @__PURE__ */ jsx21("li", { children: v }, i)) }) : /* @__PURE__ */ jsx21("span", { className: "fe-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "fe-multi-select-search", "data-field-type": "MultiSelectSearch", "data-field-state": getFieldState({ error, required, readOnly }), "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId), children: [
+    /* @__PURE__ */ jsx21("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__ */ jsxs4("fieldset", { className: "fe-multi-select-search__options", "aria-invalid": !!error, "aria-required": required, children: [
+      /* @__PURE__ */ jsx21("legend", { className: "fe-sr-only", children: "Options" }),
+      filteredOptions.map((option) => {
+        const optVal = String(option.value);
+        const isChecked = selectedValues.includes(optVal);
+        return /* @__PURE__ */ jsxs4("label", { className: "fe-multi-select-search__option", children: [
+          /* @__PURE__ */ jsx21("input", { type: "checkbox", checked: isChecked, disabled: option.disabled, onChange: (e) => onCheckChange(optVal, e.target.checked) }),
+          /* @__PURE__ */ jsx21("span", { children: option.label })
+        ] }, optVal);
+      })
+    ] })
+  ] });
+};
+var MultiSelectSearch_default = MultiSelectSearch;
+
+// src/fields/StatusDropdown.tsx
+import { jsx as jsx22, jsxs as jsxs5 } from "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__ */ jsxs5(
+      "div",
+      {
+        className: "fe-status-dropdown fe-status-dropdown--readonly",
+        "data-field-type": "StatusDropdown",
+        "data-field-state": "readonly",
+        children: [
+          statusColor && /* @__PURE__ */ jsx22(
+            "span",
+            {
+              className: "fe-status-dropdown__indicator",
+              style: { backgroundColor: statusColor },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx22(ReadOnlyText, { fieldName, value })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      className: "fe-status-dropdown",
+      "data-field-type": "StatusDropdown",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      children: [
+        statusColor && /* @__PURE__ */ jsx22(
+          "span",
+          {
+            className: "fe-status-dropdown__indicator",
+            style: { backgroundColor: statusColor },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "select",
+          {
+            className: "fe-status-dropdown__select",
+            value: value ?? "",
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+            children: [
+              /* @__PURE__ */ jsx22("option", { value: "", children: placeholder ?? config?.placeHolder ?? "" }),
+              options?.map((option) => /* @__PURE__ */ jsx22("option", { value: String(option.value), disabled: option.disabled, children: option.label }, String(option.value)))
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var StatusDropdown_default = StatusDropdown;
+
+// src/fields/DocumentLinks.tsx
+import { useState as useState2 } from "react";
+import { useFormContext } from "react-hook-form";
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+var DocumentLinks = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const { watch } = useFormContext();
+  const documentLinks = watch(`${fieldName}`) ?? [];
+  const [newUrl, setNewUrl] = useState2("");
+  const [newText, setNewText] = useState2("");
+  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__ */ jsx23(
+      "ul",
+      {
+        className: "fe-document-links fe-document-links--readonly",
+        "data-field-type": "DocumentLinks",
+        "data-field-state": "readonly",
+        children: value?.map((link, i) => /* @__PURE__ */ jsx23("li", { className: "fe-document-links__item", children: /* @__PURE__ */ jsx23("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title || link.url }) }, i))
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      className: "fe-document-links",
+      "data-field-type": "DocumentLinks",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: [
+        /* @__PURE__ */ jsx23("ul", { className: "fe-document-links__list", children: documentLinks.map((link, i) => /* @__PURE__ */ jsxs6("li", { className: "fe-document-links__item", children: [
+          /* @__PURE__ */ jsx23("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title || link.url }),
+          /* @__PURE__ */ jsx23(
+            "button",
+            {
+              type: "button",
+              className: "fe-document-links__delete",
+              onClick: () => onDeleteLink(i),
+              "aria-label": `${DocumentLinksStrings.deleteLink}: ${link.title || link.url}`,
+              children: "\xD7"
+            }
+          )
+        ] }, i)) }),
+        /* @__PURE__ */ jsxs6("div", { className: "fe-document-links__add", children: [
+          /* @__PURE__ */ jsx23(
+            "input",
+            {
+              type: "url",
+              className: "fe-document-links__url-input",
+              placeholder: "URL",
+              value: newUrl,
+              onChange: (e) => setNewUrl(e.target.value),
+              "aria-label": DocumentLinksStrings.link
+            }
+          ),
+          /* @__PURE__ */ jsx23(
+            "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__ */ jsx23(
+            "button",
+            {
+              type: "button",
+              className: "fe-btn fe-btn--secondary",
+              onClick: onAddLink,
+              disabled: !newUrl,
+              children: documentLinks.length > 0 ? DocumentLinksStrings.addAnotherLink : DocumentLinksStrings.addLink
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var DocumentLinks_default = DocumentLinks;
+
+// src/fields/readonly/ReadOnly.tsx
+import { jsx as jsx24 } from "react/jsx-runtime";
 var ReadOnly = (props) => {
   const { fieldName, value, config } = props;
-  return /* @__PURE__ */ jsx14(ReadOnlyText, { fieldName, value, ...config });
+  return /* @__PURE__ */ jsx24(ReadOnlyText, { fieldName, value, ...config });
 };
 var ReadOnly_default = ReadOnly;
 
+// src/fields/readonly/ReadOnlyArray.tsx
+import { jsx as jsx25 } from "react/jsx-runtime";
+var ReadOnlyArray = (props) => {
+  const { fieldName, value } = props;
+  const items = value ?? [];
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx25("span", { className: "fe-read-only-text", "data-field-type": "ReadOnlyArray", children: "-" });
+  }
+  return /* @__PURE__ */ jsx25(
+    "ul",
+    {
+      className: "fe-read-only-array",
+      "data-field-type": "ReadOnlyArray",
+      "data-field-state": "readonly",
+      id: `${fieldName}-read-only`,
+      children: items.map((v, i) => /* @__PURE__ */ jsx25("li", { children: v }, i))
+    }
+  );
+};
+var ReadOnlyArray_default = ReadOnlyArray;
+
+// src/fields/readonly/ReadOnlyDateTime.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ReadOnlyDateTime = (props) => {
+  const { config, value } = props;
+  if (!value) {
+    return /* @__PURE__ */ jsx26("span", { className: "fe-read-only-text", "data-field-type": "ReadOnlyDateTime", children: "-" });
+  }
+  return /* @__PURE__ */ jsx26(
+    "time",
+    {
+      className: "fe-read-only-date-time",
+      dateTime: value,
+      "data-field-type": "ReadOnlyDateTime",
+      "data-field-state": "readonly",
+      children: formatDateTime(value, { hideTimestamp: config?.hidetimeStamp })
+    }
+  );
+};
+var ReadOnlyDateTime_default = ReadOnlyDateTime;
+
+// src/fields/readonly/ReadOnlyCumulativeNumber.tsx
+import { isEmpty } from "@form-eng/core";
+import React5 from "react";
+import { useFormContext as useFormContext2 } from "react-hook-form";
+import { jsx as jsx27 } from "react/jsx-runtime";
+var ReadOnlyCumulativeNumber = (props) => {
+  const { fieldName, config } = props;
+  const { formState, getValues } = useFormContext2();
+  const [value, setValue] = React5.useState();
+  const { dependencyFields } = config || {};
+  React5.useEffect(() => {
+    const formValues = getValues();
+    if (!isEmpty(dependencyFields)) {
+      let totalCount = 0;
+      dependencyFields.map((fn) => {
+        totalCount += Number(formValues[fn]) || 0;
+      });
+      setValue(totalCount);
+    }
+  }, [formState]);
+  if (!fieldName) return null;
+  return /* @__PURE__ */ jsx27("span", { "data-field-type": "ReadOnlyCumulativeNumber", "data-field-state": "readonly", children: /* @__PURE__ */ jsx27(ReadOnlyText, { fieldName, value: String(value), ...config }) });
+};
+var ReadOnlyCumulativeNumber_default = ReadOnlyCumulativeNumber;
+
+// src/fields/readonly/ReadOnlyRichText.tsx
+import { jsx as jsx28 } from "react/jsx-runtime";
+var ReadOnlyRichText = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ jsx28(
+    "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
+import { jsx as jsx29, jsxs as jsxs7 } from "react/jsx-runtime";
+var ReadOnlyWithButton = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: `fe-read-only-with-button ${config?.containerClassName ?? ""}`,
+      "data-field-type": "ReadOnlyWithButton",
+      "data-field-state": "readonly",
+      children: [
+        /* @__PURE__ */ jsx29(ReadOnlyText, { fieldName, value: `${value}` }),
+        config?.buttonText && /* @__PURE__ */ jsx29(
+          "button",
+          {
+            type: "button",
+            className: "fe-btn fe-btn--secondary",
+            onClick: config.onButtonClick,
+            children: config.buttonText
+          }
+        )
+      ]
+    }
+  );
+};
+var ReadOnlyWithButton_default = ReadOnlyWithButton;
+
 // src/components/StatusMessage.tsx
 import { FormStrings as FormStrings2 } from "@form-eng/core";
-import { jsx as jsx15, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs8 } from "react/jsx-runtime";
 var StatusMessage = (props) => {
   const { id, error, errorCount, savePending, saving } = props;
-  return /* @__PURE__ */ jsx15("div", { className: "fe-status-message", children: error ? /* @__PURE__ */ jsx15("span", { id, role: "alert", style: { color: "var(--mantine-color-red-6, #fa5252)" }, children: error.message || "Error" }) : savePending ? /* @__PURE__ */ jsxs2("span", { id, role: "alert", style: { color: "var(--mantine-color-orange-6, #fd7e14)" }, children: [
+  return /* @__PURE__ */ jsx30("div", { className: "fe-status-message", children: error ? /* @__PURE__ */ jsx30("span", { id, role: "alert", style: { color: "var(--mantine-color-red-6, #fa5252)" }, children: error.message || "Error" }) : savePending ? /* @__PURE__ */ jsxs8("span", { id, role: "alert", style: { color: "var(--mantine-color-orange-6, #fd7e14)" }, children: [
     FormStrings2.autoSavePending,
     " (",
     errorCount,
     " ",
     FormStrings2.remaining,
     ")"
-  ] }) : saving ? /* @__PURE__ */ jsx15("span", { id, role: "status", style: { color: "var(--mantine-color-gray-6, #868e96)" }, children: FormStrings2.saving }) : null });
+  ] }) : saving ? /* @__PURE__ */ jsx30("span", { id, role: "status", style: { color: "var(--mantine-color-gray-6, #868e96)" }, children: FormStrings2.saving }) : null });
 };
 
 // src/components/FormLoading.tsx
 import { FormConstants } from "@form-eng/core";
-import { jsx as jsx16, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs9 } from "react/jsx-runtime";
 var FormLoading = (props) => {
   const { loadingShimmerCount, loadingFieldShimmerHeight, inPanel, hideTitleShimmer } = props;
   const count = loadingShimmerCount || FormConstants.loadingShimmerCount;
   const height = loadingFieldShimmerHeight || FormConstants.loadingFieldShimmerHeight;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       className: `fe-form-loading ${inPanel ? "fe-form-loading--panel" : ""}`,
       role: "status",
       "aria-label": "Loading form",
-      children: [...Array(count)].map((_, i) => /* @__PURE__ */ jsxs3("div", { style: { marginBottom: 16 }, children: [
-        !hideTitleShimmer && /* @__PURE__ */ jsx16("div", { className: "fe-skeleton", style: { width: "33%", height: 16, marginBottom: 8, background: "var(--mantine-color-gray-2, #e9ecef)", borderRadius: 4 } }),
-        /* @__PURE__ */ jsx16("div", { className: "fe-skeleton", style: { width: "100%", height, background: "var(--mantine-color-gray-2, #e9ecef)", borderRadius: 4 } })
+      children: [...Array(count)].map((_, i) => /* @__PURE__ */ jsxs9("div", { style: { marginBottom: 16 }, children: [
+        !hideTitleShimmer && /* @__PURE__ */ jsx31("div", { className: "fe-skeleton", style: { width: "33%", height: 16, marginBottom: 8, background: "var(--mantine-color-gray-2, #e9ecef)", borderRadius: 4 } }),
+        /* @__PURE__ */ jsx31("div", { className: "fe-skeleton", style: { width: "100%", height, background: "var(--mantine-color-gray-2, #e9ecef)", borderRadius: 4 } })
       ] }, `fe-loading-${i}`))
     }
   );
@@ -476,45 +1042,76 @@ var FormLoading = (props) => {
 
 // src/registry.ts
 import { ComponentTypes } from "@form-eng/core";
-import React2 from "react";
+import React6 from "react";
 function createMantineFieldRegistry() {
   return {
-    [ComponentTypes.Textbox]: React2.createElement(Textbox_default),
-    [ComponentTypes.Number]: React2.createElement(Number_default),
-    [ComponentTypes.Toggle]: React2.createElement(Toggle_default),
-    [ComponentTypes.Dropdown]: React2.createElement(Dropdown_default),
-    [ComponentTypes.SimpleDropdown]: React2.createElement(SimpleDropdown_default),
-    [ComponentTypes.MultiSelect]: React2.createElement(MultiSelect_default),
-    [ComponentTypes.DateControl]: React2.createElement(DateControl_default),
-    [ComponentTypes.Slider]: React2.createElement(Slider_default),
-    [ComponentTypes.RadioGroup]: React2.createElement(RadioGroup_default),
-    [ComponentTypes.CheckboxGroup]: React2.createElement(CheckboxGroup_default),
-    [ComponentTypes.Textarea]: React2.createElement(Textarea_default),
-    [ComponentTypes.Fragment]: React2.createElement(DynamicFragment_default),
-    [ComponentTypes.ReadOnly]: React2.createElement(ReadOnly_default)
+    [ComponentTypes.Textbox]: React6.createElement(Textbox_default),
+    [ComponentTypes.Number]: React6.createElement(Number_default),
+    [ComponentTypes.Toggle]: React6.createElement(Toggle_default),
+    [ComponentTypes.Dropdown]: React6.createElement(Dropdown_default),
+    [ComponentTypes.SimpleDropdown]: React6.createElement(SimpleDropdown_default),
+    [ComponentTypes.MultiSelect]: React6.createElement(MultiSelect_default),
+    [ComponentTypes.DateControl]: React6.createElement(DateControl_default),
+    [ComponentTypes.Slider]: React6.createElement(Slider_default),
+    [ComponentTypes.RadioGroup]: React6.createElement(RadioGroup_default),
+    [ComponentTypes.CheckboxGroup]: React6.createElement(CheckboxGroup_default),
+    [ComponentTypes.Textarea]: React6.createElement(Textarea_default),
+    [ComponentTypes.Fragment]: React6.createElement(DynamicFragment_default),
+    [ComponentTypes.ReadOnly]: React6.createElement(ReadOnly_default),
+    [ComponentTypes.Rating]: React6.createElement(Rating_default),
+    [ComponentTypes.Autocomplete]: React6.createElement(Autocomplete_default),
+    [ComponentTypes.DateTime]: React6.createElement(DateTime_default),
+    [ComponentTypes.DateRange]: React6.createElement(DateRange_default),
+    [ComponentTypes.PhoneInput]: React6.createElement(PhoneInput_default),
+    [ComponentTypes.FileUpload]: React6.createElement(FileUpload_default),
+    [ComponentTypes.ColorPicker]: React6.createElement(ColorPicker_default),
+    [ComponentTypes.MultiSelectSearch]: React6.createElement(MultiSelectSearch_default),
+    [ComponentTypes.StatusDropdown]: React6.createElement(StatusDropdown_default),
+    [ComponentTypes.DocumentLinks]: React6.createElement(DocumentLinks_default),
+    [ComponentTypes.ReadOnlyArray]: React6.createElement(ReadOnlyArray_default),
+    [ComponentTypes.ReadOnlyDateTime]: React6.createElement(ReadOnlyDateTime_default),
+    [ComponentTypes.ReadOnlyCumulativeNumber]: React6.createElement(ReadOnlyCumulativeNumber_default),
+    [ComponentTypes.ReadOnlyRichText]: React6.createElement(ReadOnlyRichText_default),
+    [ComponentTypes.ReadOnlyWithButton]: React6.createElement(ReadOnlyWithButton_default)
   };
 }
 export {
+  Autocomplete_default as Autocomplete,
   CheckboxGroup_default as CheckboxGroup,
+  ColorPicker_default as ColorPicker,
   DateControl_default as DateControl,
+  DateRange_default as DateRange,
+  DateTime_default as DateTime,
+  DocumentLinks_default as DocumentLinks,
   DocumentLinksStrings,
   Dropdown_default as Dropdown,
   DynamicFragment_default as DynamicFragment,
   FieldClassName,
+  FileUpload_default as FileUpload,
   FormLoading,
   GetFieldDataTestId,
   MultiSelect_default as MultiSelect,
+  MultiSelectSearch_default as MultiSelectSearch,
   Number_default as Number,
+  PhoneInput_default as PhoneInput,
   RadioGroup_default as RadioGroup,
+  Rating_default as Rating,
   ReadOnly_default as ReadOnly,
+  ReadOnlyArray_default as ReadOnlyArray,
+  ReadOnlyCumulativeNumber_default as ReadOnlyCumulativeNumber,
+  ReadOnlyDateTime_default as ReadOnlyDateTime,
+  ReadOnlyRichText_default as ReadOnlyRichText,
   ReadOnlyText,
+  ReadOnlyWithButton_default as ReadOnlyWithButton,
   SimpleDropdown_default as SimpleDropdown,
   Slider_default as Slider,
+  StatusDropdown_default as StatusDropdown,
   StatusMessage,
   Textarea_default as Textarea,
   Textbox_default as Textbox,
   Toggle_default as Toggle,
   createMantineFieldRegistry,
-  formatDateTime
+  formatDateTime,
+  getFieldState
 };
 //# sourceMappingURL=index.mjs.map