@form-eng/react-aria 1.5.3 → 1.6.0

package/dist/index.mjs

@@ -601,31 +601,496 @@ var CheckboxGroup = (props) => {
 };
 var CheckboxGroup_default = CheckboxGroup;
 
+// src/fields/Rating.tsx
+import { jsx as jsx15, jsxs as jsxs7 } 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__ */ jsx15(ReadOnlyText, { fieldName, value: String(rating) });
+  }
+  const stars = Array.from({ length: max }, (_, i) => i + 1);
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: "df-rating",
+      role: "radiogroup",
+      "aria-label": `Rating, ${rating} of ${max}`,
+      "aria-invalid": !!error,
+      "aria-required": required,
+      "data-field-type": "Rating",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      children: stars.map((star) => /* @__PURE__ */ jsxs7("label", { className: "df-rating__star-label", children: [
+        /* @__PURE__ */ jsx15(
+          "input",
+          {
+            type: "radio",
+            className: "df-rating__input",
+            name: fieldName,
+            value: String(star),
+            checked: rating === star,
+            onChange: () => setFieldValue(fieldName, star),
+            "aria-label": `${star} star${star !== 1 ? "s" : ""}`
+          }
+        ),
+        /* @__PURE__ */ jsx15("span", { className: `df-rating__star${star <= rating ? " df-rating__star--filled" : ""}`, "aria-hidden": "true", children: star <= rating ? "\u2605" : "\u2606" })
+      ] }, star))
+    }
+  );
+};
+var Rating_default = Rating;
+
+// src/fields/Autocomplete.tsx
+import { ComboBox, Input as Input3, Button as Button3, Popover as Popover3, ListBox as ListBox3, ListBoxItem as ListBoxItem3 } from "react-aria-components";
+import { jsx as jsx16, jsxs as jsxs8 } 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__ */ jsx16(ReadOnlyText, { fieldName, value: selectedLabel });
+  }
+  return /* @__PURE__ */ jsxs8(
+    ComboBox,
+    {
+      className: "df-autocomplete",
+      "aria-label": fieldName,
+      defaultInputValue: selectedLabel,
+      onSelectionChange: (key) => {
+        if (key !== null) setFieldValue(fieldName, String(key));
+      },
+      onInputChange: (text) => {
+        const match = options?.find((o) => o.label.toLowerCase() === text.toLowerCase());
+        setFieldValue(fieldName, match ? String(match.value) : text);
+      },
+      "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId),
+      isRequired: required,
+      isInvalid: !!error,
+      children: [
+        /* @__PURE__ */ jsx16(Input3, { className: "df-autocomplete__input", placeholder }),
+        /* @__PURE__ */ jsx16(Button3, { className: "df-autocomplete__button", children: "\u25BC" }),
+        /* @__PURE__ */ jsx16(Popover3, { children: /* @__PURE__ */ jsx16(ListBox3, { className: "df-autocomplete__listbox", children: options?.map((option) => /* @__PURE__ */ jsx16(ListBoxItem3, { id: String(option.value), children: option.label }, String(option.value))) }) })
+      ]
+    }
+  );
+};
+var Autocomplete_default = Autocomplete;
+
+// src/fields/DateTime.tsx
+import { formatDateTimeValue } from "@form-eng/core";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var DateTime = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const minDateTime = config?.minDateTime;
+  const maxDateTime = config?.maxDateTime;
+  if (readOnly) {
+    return /* @__PURE__ */ jsx17(ReadOnlyText, { fieldName, value: formatDateTimeValue(value) });
+  }
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value || null);
+  };
+  return /* @__PURE__ */ jsx17(
+    "input",
+    {
+      type: "datetime-local",
+      className: "df-date-time",
+      "data-field-type": "DateTime",
+      "data-field-state": getFieldState({ error, required, readOnly }),
+      value: value ?? "",
+      min: minDateTime,
+      max: maxDateTime,
+      onChange,
+      "aria-invalid": !!error,
+      "aria-required": 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 jsx18, jsxs as jsxs9 } 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__ */ jsx18(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__ */ jsxs9(
+    "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__ */ jsxs9("div", { className: "fe-date-range__inputs", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "fe-date-range__from", children: [
+            /* @__PURE__ */ jsx18("label", { htmlFor: `${fieldName}-start`, className: "fe-date-range__label", children: "From" }),
+            /* @__PURE__ */ jsx18(
+              "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__ */ jsxs9("div", { className: "fe-date-range__to", children: [
+            /* @__PURE__ */ jsx18("label", { htmlFor: `${fieldName}-end`, className: "fe-date-range__label", children: "To" }),
+            /* @__PURE__ */ jsx18(
+              "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__ */ jsx18("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 jsx19 } 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__ */ jsx19(ReadOnlyText, { fieldName, value: value ?? "" });
+  }
+  const onChange = (event) => {
+    const digits = extractDigits(event.target.value);
+    const formatted = formatPhone(digits, format);
+    setFieldValue(fieldName, formatted);
+  };
+  return /* @__PURE__ */ jsx19(
+    "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 React3, { useRef } from "react";
+import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+var FileUpload = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, config, setFieldValue } = props;
+  const inputRef = useRef(null);
+  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] = React3.useState(void 0);
+  if (readOnly) {
+    return /* @__PURE__ */ jsx20(ReadOnlyText, { fieldName, value: getFileNames(value) });
+  }
+  const onChange = (event) => {
+    const files = event.target.files;
+    if (!files || files.length === 0) {
+      setFieldValue(fieldName, null);
+      setSizeError(void 0);
+      return;
+    }
+    const oversized = Array.from(files).find((f) => f.size > maxSizeBytes);
+    if (oversized) {
+      setSizeError(`"${oversized.name}" exceeds the ${maxSizeMb} MB size limit.`);
+      event.target.value = "";
+      setFieldValue(fieldName, null);
+      return;
+    }
+    setSizeError(void 0);
+    setFieldValue(fieldName, multiple ? Array.from(files) : files[0]);
+  };
+  const fileNames = getFileNames(value);
+  return /* @__PURE__ */ jsxs10(
+    "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__ */ jsx20(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            className: "fe-file-upload__input",
+            multiple,
+            accept,
+            onChange,
+            "aria-invalid": !!error,
+            "aria-required": required,
+            style: { display: "none" },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx20(
+          "button",
+          {
+            type: "button",
+            className: "fe-file-upload__button",
+            onClick: () => inputRef.current?.click(),
+            children: fileNames ? "Change file" : "Choose file"
+          }
+        ),
+        fileNames && /* @__PURE__ */ jsx20("span", { className: "fe-file-upload__filenames", children: fileNames }),
+        sizeError && /* @__PURE__ */ jsx20("span", { className: "fe-file-upload__size-error", role: "alert", children: sizeError })
+      ]
+    }
+  );
+};
+var FileUpload_default = FileUpload;
+
+// src/fields/ColorPicker.tsx
+import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+var ColorPicker = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, setFieldValue } = props;
+  const color = value ?? "#000000";
+  const onChange = (event) => {
+    setFieldValue(fieldName, event.target.value);
+  };
+  if (readOnly) {
+    return /* @__PURE__ */ jsx21(ReadOnlyText, { fieldName, value: color });
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: "fe-color-picker", "data-field-type": "ColorPicker", "data-field-state": getFieldState({ error, required, readOnly }), style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+    /* @__PURE__ */ jsx21("input", { type: "color", className: "fe-color-picker__input", value: color, onChange, "aria-invalid": !!error, "aria-required": required, "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId) }),
+    /* @__PURE__ */ jsx21("span", { className: "fe-color-picker__value", children: color })
+  ] });
+};
+var ColorPicker_default = ColorPicker;
+
+// src/fields/MultiSelectSearch.tsx
+import { useState as useState2, useMemo } from "react";
+import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+var MultiSelectSearch = (props) => {
+  const { fieldName, programName, entityType, entityId, value, readOnly, error, required, options, setFieldValue } = props;
+  const [searchTerm, setSearchTerm] = useState2("");
+  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__ */ jsx22("ul", { className: "fe-multi-select-search-readonly", "data-field-type": "MultiSelectSearch", "data-field-state": "readonly", children: selectedValues.map((v, i) => /* @__PURE__ */ jsx22("li", { children: v }, i)) }) : /* @__PURE__ */ jsx22("span", { className: "fe-read-only-text", children: "-" });
+  }
+  return /* @__PURE__ */ jsxs12("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__ */ jsx22("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__ */ jsxs12("fieldset", { className: "fe-multi-select-search__options", "aria-invalid": !!error, "aria-required": required, children: [
+      /* @__PURE__ */ jsx22("legend", { className: "fe-sr-only", children: "Options" }),
+      filteredOptions.map((option) => {
+        const optVal = String(option.value);
+        const isChecked = selectedValues.includes(optVal);
+        return /* @__PURE__ */ jsxs12("label", { className: "fe-multi-select-search__option", children: [
+          /* @__PURE__ */ jsx22("input", { type: "checkbox", checked: isChecked, disabled: option.disabled, onChange: (e) => onCheckChange(optVal, e.target.checked) }),
+          /* @__PURE__ */ jsx22("span", { children: option.label })
+        ] }, optVal);
+      })
+    ] })
+  ] });
+};
+var MultiSelectSearch_default = MultiSelectSearch;
+
+// src/fields/StatusDropdown.tsx
+import { jsx as jsx23, jsxs as jsxs13 } 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__ */ jsxs13("div", { className: "fe-status-dropdown fe-status-dropdown--readonly", "data-field-type": "StatusDropdown", "data-field-state": "readonly", children: [
+      statusColor && /* @__PURE__ */ jsx23("span", { className: "fe-status-dropdown__indicator", style: { backgroundColor: statusColor }, "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx23(ReadOnlyText, { fieldName, value })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs13("div", { className: "fe-status-dropdown", "data-field-type": "StatusDropdown", "data-field-state": getFieldState({ error, required, readOnly }), children: [
+    statusColor && /* @__PURE__ */ jsx23("span", { className: "fe-status-dropdown__indicator", style: { backgroundColor: statusColor }, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs13("select", { className: "fe-status-dropdown__select", value: value ?? "", onChange, "aria-invalid": !!error, "aria-required": required, "data-testid": GetFieldDataTestId(fieldName, programName, entityType, entityId), children: [
+      /* @__PURE__ */ jsx23("option", { value: "", children: placeholder ?? config?.placeHolder ?? "" }),
+      options?.map((option) => /* @__PURE__ */ jsx23("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 useState3 } from "react";
+import { useFormContext } from "react-hook-form";
+import { jsx as jsx24, jsxs as jsxs14 } 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] = useState3("");
+  const [newText, setNewText] = useState3("");
+  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__ */ jsx24("ul", { className: "fe-document-links fe-document-links--readonly", "data-field-type": "DocumentLinks", "data-field-state": "readonly", children: value?.map((link, i) => /* @__PURE__ */ jsx24("li", { className: "fe-document-links__item", children: /* @__PURE__ */ jsx24("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title || link.url }) }, i)) });
+  }
+  return /* @__PURE__ */ jsxs14("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__ */ jsx24("ul", { className: "fe-document-links__list", children: documentLinks.map((link, i) => /* @__PURE__ */ jsxs14("li", { className: "fe-document-links__item", children: [
+      /* @__PURE__ */ jsx24("a", { href: link.url, target: "_blank", rel: "noopener noreferrer", children: link.title || link.url }),
+      /* @__PURE__ */ jsx24("button", { type: "button", className: "fe-document-links__delete", onClick: () => onDeleteLink(i), "aria-label": `${DocumentLinksStrings.deleteLink}: ${link.title || link.url}`, children: "\xD7" })
+    ] }, i)) }),
+    /* @__PURE__ */ jsxs14("div", { className: "fe-document-links__add", children: [
+      /* @__PURE__ */ jsx24("input", { type: "url", className: "fe-document-links__url-input", placeholder: "URL", value: newUrl, onChange: (e) => setNewUrl(e.target.value), "aria-label": DocumentLinksStrings.link }),
+      /* @__PURE__ */ jsx24("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__ */ jsx24("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 jsx15 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var ReadOnly = (props) => {
   const { fieldName, value, config } = props;
-  return /* @__PURE__ */ jsx15(ReadOnlyText, { fieldName, value, ...config });
+  return /* @__PURE__ */ jsx25(ReadOnlyText, { fieldName, value, ...config });
 };
 var ReadOnly_default = ReadOnly;
 
+// src/fields/readonly/ReadOnlyArray.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var ReadOnlyArray = (props) => {
+  const { fieldName, value } = props;
+  const items = value ?? [];
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx26("span", { className: "fe-read-only-text", "data-field-type": "ReadOnlyArray", children: "-" });
+  }
+  return /* @__PURE__ */ jsx26("ul", { className: "fe-read-only-array", "data-field-type": "ReadOnlyArray", "data-field-state": "readonly", id: `${fieldName}-read-only`, children: items.map((v, i) => /* @__PURE__ */ jsx26("li", { children: v }, i)) });
+};
+var ReadOnlyArray_default = ReadOnlyArray;
+
+// src/fields/readonly/ReadOnlyDateTime.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var ReadOnlyDateTime = (props) => {
+  const { config, value } = props;
+  if (!value) {
+    return /* @__PURE__ */ jsx27("span", { className: "fe-read-only-text", "data-field-type": "ReadOnlyDateTime", children: "-" });
+  }
+  return /* @__PURE__ */ jsx27("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 React6 from "react";
+import { useFormContext as useFormContext2 } from "react-hook-form";
+import { jsx as jsx28 } from "react/jsx-runtime";
+var ReadOnlyCumulativeNumber = (props) => {
+  const { fieldName, config } = props;
+  const { formState, getValues } = useFormContext2();
+  const [value, setValue] = React6.useState();
+  const { dependencyFields } = config || {};
+  React6.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__ */ jsx28("span", { "data-field-type": "ReadOnlyCumulativeNumber", "data-field-state": "readonly", children: /* @__PURE__ */ jsx28(ReadOnlyText, { fieldName, value: String(value), ...config }) });
+};
+var ReadOnlyCumulativeNumber_default = ReadOnlyCumulativeNumber;
+
+// src/fields/readonly/ReadOnlyRichText.tsx
+import { jsx as jsx29 } from "react/jsx-runtime";
+var ReadOnlyRichText = (props) => {
+  const { value } = props;
+  return /* @__PURE__ */ jsx29("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 jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+var ReadOnlyWithButton = (props) => {
+  const { fieldName, value, config } = props;
+  return /* @__PURE__ */ jsxs15("div", { className: `fe-read-only-with-button ${config?.containerClassName ?? ""}`, "data-field-type": "ReadOnlyWithButton", "data-field-state": "readonly", children: [
+    /* @__PURE__ */ jsx30(ReadOnlyText, { fieldName, value: `${value}` }),
+    config?.buttonText && /* @__PURE__ */ jsx30("button", { type: "button", className: "fe-btn fe-btn--secondary", onClick: config.onButtonClick, children: config.buttonText })
+  ] });
+};
+var ReadOnlyWithButton_default = ReadOnlyWithButton;
+
 // src/components/FormLoading.tsx
 import { FormConstants } from "@form-eng/core";
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } 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: `df-form-loading ${inPanel ? "df-form-loading--panel" : ""}`,
       "data-field-type": "FormLoading",
       role: "status",
       "aria-label": "Loading form",
-      children: [...Array(count)].map((_, i) => /* @__PURE__ */ jsxs7("div", { className: "df-form-loading__field", children: [
-        !hideTitleShimmer && /* @__PURE__ */ jsx16("div", { className: "df-skeleton df-skeleton--label", style: { width: "33%" } }),
-        /* @__PURE__ */ jsx16("div", { className: "df-skeleton df-skeleton--input", style: { height: `${height}px` } })
+      children: [...Array(count)].map((_, i) => /* @__PURE__ */ jsxs16("div", { className: "df-form-loading__field", children: [
+        !hideTitleShimmer && /* @__PURE__ */ jsx31("div", { className: "df-skeleton df-skeleton--label", style: { width: "33%" } }),
+        /* @__PURE__ */ jsx31("div", { className: "df-skeleton df-skeleton--input", style: { height: `${height}px` } })
       ] }, `df-loading-${i}`))
     }
   );
@@ -633,38 +1098,69 @@ var FormLoading = (props) => {
 
 // src/registry.ts
 import { ComponentTypes } from "@form-eng/core";
-import React3 from "react";
+import React7 from "react";
 function createReactAriaFieldRegistry() {
   return {
-    [ComponentTypes.Textbox]: React3.createElement(Textbox_default),
-    [ComponentTypes.Number]: React3.createElement(Number_default),
-    [ComponentTypes.Toggle]: React3.createElement(Toggle_default),
-    [ComponentTypes.Dropdown]: React3.createElement(Dropdown_default),
-    [ComponentTypes.MultiSelect]: React3.createElement(MultiSelect_default),
-    [ComponentTypes.DateControl]: React3.createElement(DateControl_default),
-    [ComponentTypes.Slider]: React3.createElement(Slider_default),
-    [ComponentTypes.Fragment]: React3.createElement(DynamicFragment_default),
-    [ComponentTypes.SimpleDropdown]: React3.createElement(SimpleDropdown_default),
-    [ComponentTypes.Textarea]: React3.createElement(Textarea_default),
-    [ComponentTypes.RadioGroup]: React3.createElement(RadioGroup_default),
-    [ComponentTypes.CheckboxGroup]: React3.createElement(CheckboxGroup_default),
-    [ComponentTypes.ReadOnly]: React3.createElement(ReadOnly_default)
+    [ComponentTypes.Textbox]: React7.createElement(Textbox_default),
+    [ComponentTypes.Number]: React7.createElement(Number_default),
+    [ComponentTypes.Toggle]: React7.createElement(Toggle_default),
+    [ComponentTypes.Dropdown]: React7.createElement(Dropdown_default),
+    [ComponentTypes.MultiSelect]: React7.createElement(MultiSelect_default),
+    [ComponentTypes.DateControl]: React7.createElement(DateControl_default),
+    [ComponentTypes.Slider]: React7.createElement(Slider_default),
+    [ComponentTypes.Fragment]: React7.createElement(DynamicFragment_default),
+    [ComponentTypes.SimpleDropdown]: React7.createElement(SimpleDropdown_default),
+    [ComponentTypes.Textarea]: React7.createElement(Textarea_default),
+    [ComponentTypes.RadioGroup]: React7.createElement(RadioGroup_default),
+    [ComponentTypes.CheckboxGroup]: React7.createElement(CheckboxGroup_default),
+    [ComponentTypes.Rating]: React7.createElement(Rating_default),
+    [ComponentTypes.Autocomplete]: React7.createElement(Autocomplete_default),
+    [ComponentTypes.DateTime]: React7.createElement(DateTime_default),
+    [ComponentTypes.DateRange]: React7.createElement(DateRange_default),
+    [ComponentTypes.PhoneInput]: React7.createElement(PhoneInput_default),
+    [ComponentTypes.FileUpload]: React7.createElement(FileUpload_default),
+    [ComponentTypes.ReadOnly]: React7.createElement(ReadOnly_default),
+    [ComponentTypes.ColorPicker]: React7.createElement(ColorPicker_default),
+    [ComponentTypes.MultiSelectSearch]: React7.createElement(MultiSelectSearch_default),
+    [ComponentTypes.StatusDropdown]: React7.createElement(StatusDropdown_default),
+    [ComponentTypes.DocumentLinks]: React7.createElement(DocumentLinks_default),
+    [ComponentTypes.ReadOnlyArray]: React7.createElement(ReadOnlyArray_default),
+    [ComponentTypes.ReadOnlyDateTime]: React7.createElement(ReadOnlyDateTime_default),
+    [ComponentTypes.ReadOnlyCumulativeNumber]: React7.createElement(ReadOnlyCumulativeNumber_default),
+    [ComponentTypes.ReadOnlyRichText]: React7.createElement(ReadOnlyRichText_default),
+    [ComponentTypes.ReadOnlyWithButton]: React7.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,
+  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,