@fogpipe/forma-react 0.17.1 → 0.19.0

package/dist/defaults/index.js

@@ -0,0 +1,899 @@
+import {
+  FormRenderer,
+  useFormaContext
+} from "../chunk-CFX3T5WK.js";
+
+// src/defaults/DefaultFormRenderer.tsx
+import { forwardRef } from "react";
+
+// src/defaults/components/TextInput.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function TextInput({ field }) {
+  const inputType = field.fieldType === "phone" ? "tel" : field.fieldType;
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null
+  ].filter(Boolean).join(" ");
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      id: field.name,
+      name: field.name,
+      type: inputType,
+      className: "forma-input",
+      value: field.value,
+      onChange: (e) => field.onChange(e.target.value),
+      onBlur: field.onBlur,
+      disabled: field.disabled,
+      readOnly: field.readonly,
+      placeholder: field.placeholder,
+      "aria-invalid": hasErrors || void 0,
+      "aria-required": field.required || void 0,
+      "aria-describedby": describedBy || void 0
+    }
+  );
+  if (field.prefix || field.suffix) {
+    return /* @__PURE__ */ jsxs("div", { className: "forma-input-adorner", children: [
+      field.prefix && /* @__PURE__ */ jsx("span", { className: "forma-input-adorner__prefix", children: field.prefix }),
+      input,
+      field.suffix && /* @__PURE__ */ jsx("span", { className: "forma-input-adorner__suffix", children: field.suffix })
+    ] });
+  }
+  return input;
+}
+
+// src/defaults/components/TextareaInput.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function TextareaInput({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null
+  ].filter(Boolean).join(" ");
+  const textarea = /* @__PURE__ */ jsx2(
+    "textarea",
+    {
+      id: field.name,
+      name: field.name,
+      className: "forma-textarea",
+      value: field.value,
+      onChange: (e) => field.onChange(e.target.value),
+      onBlur: field.onBlur,
+      disabled: field.disabled,
+      readOnly: field.readonly,
+      placeholder: field.placeholder,
+      rows: 3,
+      "aria-invalid": hasErrors || void 0,
+      "aria-required": field.required || void 0,
+      "aria-describedby": describedBy || void 0
+    }
+  );
+  if (field.prefix || field.suffix) {
+    return /* @__PURE__ */ jsxs2("div", { className: "forma-input-adorner", children: [
+      field.prefix && /* @__PURE__ */ jsx2("span", { className: "forma-input-adorner__prefix", children: field.prefix }),
+      textarea,
+      field.suffix && /* @__PURE__ */ jsx2("span", { className: "forma-input-adorner__suffix", children: field.suffix })
+    ] });
+  }
+  return textarea;
+}
+
+// src/defaults/components/NumberInput.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function NumberInputBase({
+  field,
+  parseValue
+}) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null
+  ].filter(Boolean).join(" ");
+  const input = /* @__PURE__ */ jsx3(
+    "input",
+    {
+      id: field.name,
+      name: field.name,
+      type: "number",
+      className: `forma-input forma-input--${field.fieldType}`,
+      value: field.value != null ? String(field.value) : "",
+      onChange: (e) => {
+        const val = e.target.value;
+        if (val === "") {
+          field.onChange(null);
+        } else {
+          const num = parseValue(val);
+          field.onChange(isNaN(num) ? null : num);
+        }
+      },
+      onBlur: field.onBlur,
+      disabled: field.disabled,
+      readOnly: field.readonly,
+      placeholder: field.placeholder,
+      min: field.min,
+      max: field.max,
+      step: field.step ?? (field.fieldType === "integer" ? 1 : "any"),
+      "aria-invalid": hasErrors || void 0,
+      "aria-required": field.required || void 0,
+      "aria-describedby": describedBy || void 0
+    }
+  );
+  if (field.prefix || field.suffix) {
+    return /* @__PURE__ */ jsxs3("div", { className: "forma-input-adorner", children: [
+      field.prefix && /* @__PURE__ */ jsx3("span", { className: "forma-input-adorner__prefix", children: field.prefix }),
+      input,
+      field.suffix && /* @__PURE__ */ jsx3("span", { className: "forma-input-adorner__suffix", children: field.suffix })
+    ] });
+  }
+  return input;
+}
+function NumberInput({ field }) {
+  return /* @__PURE__ */ jsx3(NumberInputBase, { field, parseValue: parseFloat });
+}
+function IntegerInput({ field }) {
+  return /* @__PURE__ */ jsx3(NumberInputBase, { field, parseValue: (v) => parseInt(v, 10) });
+}
+
+// src/defaults/components/BooleanInput.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function BooleanInput({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4("div", { className: "forma-checkbox", children: [
+    /* @__PURE__ */ jsx4(
+      "input",
+      {
+        id: field.name,
+        name: field.name,
+        type: "checkbox",
+        className: "forma-checkbox__input",
+        checked: field.value ?? false,
+        onChange: (e) => field.onChange(e.target.checked),
+        onBlur: field.onBlur,
+        disabled: field.disabled,
+        "aria-invalid": hasErrors || void 0,
+        "aria-describedby": describedBy || void 0
+      }
+    ),
+    /* @__PURE__ */ jsx4("label", { htmlFor: field.name, className: "forma-checkbox__label", children: field.label })
+  ] });
+}
+
+// src/defaults/components/DateInput.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function DateInput({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx5(
+    "input",
+    {
+      id: field.name,
+      name: field.name,
+      type: "date",
+      className: "forma-input forma-input--date",
+      value: field.value ?? "",
+      onChange: (e) => field.onChange(e.target.value || null),
+      onBlur: field.onBlur,
+      disabled: field.disabled,
+      readOnly: field.readonly,
+      "aria-invalid": hasErrors || void 0,
+      "aria-required": field.required || void 0,
+      "aria-describedby": describedBy || void 0
+    }
+  );
+}
+function DateTimeInput({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null
+  ].filter(Boolean).join(" ");
+  const inputValue = field.value ?? "";
+  return /* @__PURE__ */ jsx5(
+    "input",
+    {
+      id: field.name,
+      name: field.name,
+      type: "datetime-local",
+      className: "forma-input forma-input--datetime",
+      value: inputValue,
+      onChange: (e) => field.onChange(e.target.value || null),
+      onBlur: field.onBlur,
+      disabled: field.disabled,
+      readOnly: field.readonly,
+      "aria-invalid": hasErrors || void 0,
+      "aria-required": field.required || void 0,
+      "aria-describedby": describedBy || void 0
+    }
+  );
+}
+
+// src/defaults/components/SelectInput.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function SelectInput({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs5(
+    "select",
+    {
+      id: field.name,
+      name: field.name,
+      className: "forma-select",
+      value: field.value !== null ? String(field.value) : "",
+      onChange: (e) => {
+        const value = e.target.value;
+        if (!value) {
+          field.onChange(null);
+        } else {
+          field.onChange(value);
+        }
+      },
+      onBlur: field.onBlur,
+      disabled: field.disabled,
+      "aria-invalid": hasErrors || void 0,
+      "aria-required": field.required || void 0,
+      "aria-describedby": describedBy || void 0,
+      children: [
+        (!field.required || field.value === null) && /* @__PURE__ */ jsx6("option", { value: "", children: field.placeholder ?? "Select..." }),
+        field.options.map((opt) => /* @__PURE__ */ jsx6("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
+      ]
+    }
+  );
+}
+
+// src/defaults/components/MultiSelectInput.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function MultiSelectInput({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null
+  ].filter(Boolean).join(" ");
+  const selected = field.value ?? [];
+  const handleToggle = (optionValue) => {
+    if (selected.includes(optionValue)) {
+      field.onChange(selected.filter((v) => v !== optionValue));
+    } else {
+      field.onChange([...selected, optionValue]);
+    }
+    field.onBlur();
+  };
+  return /* @__PURE__ */ jsxs6(
+    "fieldset",
+    {
+      className: "forma-multiselect",
+      "aria-describedby": describedBy || void 0,
+      "aria-invalid": hasErrors || void 0,
+      children: [
+        /* @__PURE__ */ jsx7("legend", { className: "forma-sr-only", children: field.label }),
+        field.options.map((opt) => {
+          const optId = `${field.name}-${opt.value}`;
+          return /* @__PURE__ */ jsxs6("div", { className: "forma-multiselect__option", children: [
+            /* @__PURE__ */ jsx7(
+              "input",
+              {
+                id: optId,
+                type: "checkbox",
+                className: "forma-checkbox__input",
+                checked: selected.includes(String(opt.value)),
+                onChange: () => handleToggle(String(opt.value)),
+                disabled: field.disabled
+              }
+            ),
+            /* @__PURE__ */ jsx7("label", { htmlFor: optId, className: "forma-checkbox__label", children: opt.label })
+          ] }, String(opt.value));
+        })
+      ]
+    }
+  );
+}
+
+// src/defaults/components/ArrayField.tsx
+import { useRef } from "react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function ArrayField({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const itemKeysRef = useRef([]);
+  const nextKeyRef = useRef(0);
+  const currentLength = field.helpers.items.length;
+  const keysLength = itemKeysRef.current.length;
+  if (currentLength > keysLength) {
+    for (let i = keysLength; i < currentLength; i++) {
+      itemKeysRef.current.push(`item-${nextKeyRef.current++}`);
+    }
+  } else if (currentLength < keysLength) {
+    itemKeysRef.current.length = currentLength;
+  }
+  const fieldOrder = field.itemFieldOrder ?? Object.keys(field.itemFields);
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: "forma-array",
+      "aria-invalid": hasErrors || void 0,
+      children: [
+        field.helpers.items.length === 0 && /* @__PURE__ */ jsx8("p", { className: "forma-array__empty", children: "No items" }),
+        field.helpers.items.map((_, index) => /* @__PURE__ */ jsxs7(
+          "div",
+          {
+            className: "forma-array__item",
+            children: [
+              /* @__PURE__ */ jsx8("div", { className: "forma-array__item-fields", children: fieldOrder.map((fieldName) => {
+                const itemProps = field.helpers.getItemFieldProps(
+                  index,
+                  fieldName
+                );
+                return /* @__PURE__ */ jsxs7("div", { className: "forma-field", children: [
+                  /* @__PURE__ */ jsx8(
+                    "label",
+                    {
+                      htmlFor: itemProps.name,
+                      className: "forma-label",
+                      children: itemProps.label
+                    }
+                  ),
+                  renderItemField(itemProps),
+                  itemProps.errors.length > 0 && itemProps.touched && /* @__PURE__ */ jsx8("div", { className: "forma-field__errors", role: "alert", children: itemProps.errors.map((err, i) => /* @__PURE__ */ jsx8("span", { className: "forma-field__error", children: err.message }, i)) })
+                ] }, fieldName);
+              }) }),
+              /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  className: "forma-button forma-button--danger forma-array__remove",
+                  onClick: () => field.helpers.remove(index),
+                  disabled: !field.helpers.canRemove || field.disabled,
+                  children: "Remove"
+                }
+              )
+            ]
+          },
+          itemKeysRef.current[index]
+        )),
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            className: "forma-button forma-button--secondary forma-array__add",
+            onClick: () => field.helpers.push(),
+            disabled: !field.helpers.canAdd || field.disabled,
+            children: "+ Add Item"
+          }
+        )
+      ]
+    }
+  );
+}
+function renderItemField(itemProps) {
+  const type = itemProps.type;
+  if (type === "select" && itemProps.options) {
+    return /* @__PURE__ */ jsxs7(
+      "select",
+      {
+        id: itemProps.name,
+        className: "forma-select",
+        value: String(itemProps.value ?? ""),
+        onChange: (e) => {
+          var _a;
+          const value = e.target.value;
+          if (!value) {
+            itemProps.onChange(null);
+          } else {
+            const option = (_a = itemProps.options) == null ? void 0 : _a.find(
+              (opt) => String(opt.value) === value
+            );
+            itemProps.onChange(option ? option.value : value);
+          }
+        },
+        onBlur: itemProps.onBlur,
+        disabled: !itemProps.enabled,
+        children: [
+          /* @__PURE__ */ jsx8("option", { value: "", children: "Select..." }),
+          itemProps.options.map((opt) => /* @__PURE__ */ jsx8("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
+        ]
+      }
+    );
+  }
+  if (type === "number" || type === "integer") {
+    return /* @__PURE__ */ jsx8(
+      "input",
+      {
+        id: itemProps.name,
+        type: "number",
+        className: "forma-input",
+        value: itemProps.value != null ? String(itemProps.value) : "",
+        onChange: (e) => {
+          const val = e.target.value;
+          if (val === "") {
+            itemProps.onChange(null);
+          } else {
+            const num = type === "integer" ? parseInt(val, 10) : parseFloat(val);
+            itemProps.onChange(isNaN(num) ? null : num);
+          }
+        },
+        onBlur: itemProps.onBlur,
+        disabled: !itemProps.enabled,
+        step: type === "integer" ? 1 : "any"
+      }
+    );
+  }
+  if (type === "boolean") {
+    return /* @__PURE__ */ jsxs7("div", { className: "forma-checkbox", children: [
+      /* @__PURE__ */ jsx8(
+        "input",
+        {
+          id: itemProps.name,
+          type: "checkbox",
+          className: "forma-checkbox__input",
+          checked: Boolean(itemProps.value),
+          onChange: (e) => itemProps.onChange(e.target.checked),
+          onBlur: itemProps.onBlur,
+          disabled: !itemProps.enabled
+        }
+      ),
+      /* @__PURE__ */ jsx8("label", { htmlFor: itemProps.name, className: "forma-checkbox__label", children: itemProps.label })
+    ] });
+  }
+  return /* @__PURE__ */ jsx8(
+    "input",
+    {
+      id: itemProps.name,
+      type: "text",
+      className: "forma-input",
+      value: String(itemProps.value ?? ""),
+      onChange: (e) => itemProps.onChange(e.target.value),
+      onBlur: itemProps.onBlur,
+      disabled: !itemProps.enabled,
+      placeholder: itemProps.placeholder
+    }
+  );
+}
+
+// src/defaults/components/ObjectField.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function ObjectField({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  return /* @__PURE__ */ jsxs8(
+    "fieldset",
+    {
+      className: "forma-object",
+      "aria-invalid": hasErrors || void 0,
+      children: [
+        /* @__PURE__ */ jsx9("legend", { className: "forma-object__legend", children: field.label }),
+        field.description && /* @__PURE__ */ jsx9("p", { className: "forma-object__description", children: field.description }),
+        /* @__PURE__ */ jsx9("div", { className: "forma-object__fields" })
+      ]
+    }
+  );
+}
+
+// src/defaults/components/ComputedDisplay.tsx
+import { formatValue } from "@fogpipe/forma-core";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function ComputedDisplay({ field }) {
+  let displayValue;
+  if (field.value === null || field.value === void 0) {
+    displayValue = "\u2014";
+  } else if (typeof field.value === "object") {
+    try {
+      displayValue = JSON.stringify(field.value);
+    } catch {
+      displayValue = String(field.value);
+    }
+  } else {
+    displayValue = formatValue(field.value, field.format, field.formatOptions);
+  }
+  return /* @__PURE__ */ jsx10(
+    "output",
+    {
+      id: field.name,
+      className: "forma-computed",
+      children: displayValue
+    }
+  );
+}
+
+// src/defaults/components/DisplayField.tsx
+import { formatValue as formatValue2 } from "@fogpipe/forma-core";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var FORMAT_DEFAULTS = { nullDisplay: "\u2014" };
+function DisplayField({ field }) {
+  const options = field.formatOptions ? { ...FORMAT_DEFAULTS, ...field.formatOptions } : FORMAT_DEFAULTS;
+  const content = field.sourceValue !== void 0 ? formatValue2(field.sourceValue, field.format, options) : field.content;
+  return /* @__PURE__ */ jsx11("div", { className: "forma-display", children: content && /* @__PURE__ */ jsx11("p", { className: "forma-display__content", children: content }) });
+}
+
+// src/defaults/components/MatrixField.tsx
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+function MatrixField({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const visibleRows = field.rows.filter((r) => r.visible);
+  const currentValue = field.value ?? {};
+  const handleChange = (rowId, colValue) => {
+    if (field.disabled) return;
+    const next = { ...currentValue };
+    if (field.multiSelect) {
+      const current = currentValue[rowId] ?? [];
+      const colStr = String(colValue);
+      const exists = current.includes(colStr);
+      next[rowId] = exists ? current.filter((v) => v !== colStr) : [...current, colStr];
+    } else {
+      next[rowId] = colValue;
+    }
+    field.onChange(next);
+    field.onBlur();
+  };
+  const isChecked = (rowId, colValue) => {
+    const rowValue = currentValue[rowId];
+    if (rowValue === void 0 || rowValue === null) return false;
+    if (Array.isArray(rowValue)) {
+      return rowValue.includes(colValue);
+    }
+    return rowValue === colValue;
+  };
+  return /* @__PURE__ */ jsx12("div", { className: "forma-matrix", "aria-invalid": hasErrors || void 0, children: /* @__PURE__ */ jsxs9("table", { className: "forma-matrix__table", role: "grid", children: [
+    /* @__PURE__ */ jsx12("thead", { children: /* @__PURE__ */ jsxs9("tr", { children: [
+      /* @__PURE__ */ jsx12("th", { scope: "col", className: "forma-matrix__corner" }),
+      field.columns.map((col) => /* @__PURE__ */ jsx12(
+        "th",
+        {
+          scope: "col",
+          className: "forma-matrix__col-header",
+          children: col.label
+        },
+        String(col.value)
+      ))
+    ] }) }),
+    /* @__PURE__ */ jsx12("tbody", { children: visibleRows.map((row) => /* @__PURE__ */ jsxs9("tr", { className: "forma-matrix__row", children: [
+      /* @__PURE__ */ jsx12("th", { scope: "row", className: "forma-matrix__row-header", children: row.label }),
+      field.columns.map((col) => {
+        const cellId = `${field.name}-${row.id}-${col.value}`;
+        return /* @__PURE__ */ jsxs9("td", { className: "forma-matrix__cell", children: [
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              id: cellId,
+              type: field.multiSelect ? "checkbox" : "radio",
+              name: field.multiSelect ? cellId : `${field.name}-${row.id}`,
+              className: field.multiSelect ? "forma-checkbox__input" : "forma-radio__input",
+              checked: isChecked(row.id, col.value),
+              onChange: () => handleChange(row.id, col.value),
+              disabled: field.disabled
+            }
+          ),
+          /* @__PURE__ */ jsxs9("label", { htmlFor: cellId, className: "forma-sr-only", children: [
+            row.label,
+            ": ",
+            col.label
+          ] })
+        ] }, String(col.value));
+      })
+    ] }, row.id)) })
+  ] }) });
+}
+
+// src/defaults/components/FallbackField.tsx
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function FallbackField({ field }) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const isDev = typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+  return /* @__PURE__ */ jsxs10("div", { className: "forma-fallback", children: [
+    isDev && /* @__PURE__ */ jsxs10("p", { className: "forma-fallback__warning", children: [
+      'Unknown field type: "',
+      field.field.type,
+      '"'
+    ] }),
+    /* @__PURE__ */ jsx13(
+      "input",
+      {
+        id: field.name,
+        name: field.name,
+        type: "text",
+        className: "forma-input",
+        value: String(field.value ?? ""),
+        onChange: (e) => {
+          if ("onChange" in field && typeof field.onChange === "function") {
+            field.onChange(e.target.value);
+          }
+        },
+        onBlur: field.onBlur,
+        disabled: field.disabled,
+        "aria-invalid": hasErrors || void 0
+      }
+    )
+  ] });
+}
+
+// src/defaults/layout/FieldWrapper.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function FieldWrapper({
+  fieldPath,
+  field,
+  children,
+  errors,
+  touched,
+  showRequiredIndicator,
+  visible
+}) {
+  const { isSubmitted } = useFormaContext();
+  if (!visible) return null;
+  const shouldShowMessages = touched || isSubmitted;
+  const visibleErrors = shouldShowMessages ? errors.filter((e) => e.severity === "error") : [];
+  const visibleWarnings = shouldShowMessages ? errors.filter((e) => e.severity === "warning") : [];
+  const hasErrors = visibleErrors.length > 0;
+  const hasWarnings = visibleWarnings.length > 0;
+  const classNames = [
+    "forma-field",
+    hasErrors && "forma-field--error",
+    !hasErrors && hasWarnings && "forma-field--warning",
+    showRequiredIndicator && "forma-field--required"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs11("div", { className: classNames, "data-field-path": fieldPath, children: [
+    field.label && field.type !== "boolean" && /* @__PURE__ */ jsxs11("label", { htmlFor: fieldPath, className: "forma-label", children: [
+      field.label,
+      showRequiredIndicator && /* @__PURE__ */ jsxs11("span", { className: "forma-label__required", "aria-hidden": "true", children: [
+        " ",
+        "*"
+      ] })
+    ] }),
+    field.description && /* @__PURE__ */ jsx14(
+      "div",
+      {
+        id: `${fieldPath}-description`,
+        className: "forma-field__description",
+        children: field.description
+      }
+    ),
+    children,
+    hasErrors && /* @__PURE__ */ jsx14(
+      "div",
+      {
+        id: `${fieldPath}-errors`,
+        className: "forma-field__errors",
+        role: "alert",
+        children: visibleErrors.map((error, i) => /* @__PURE__ */ jsx14("span", { className: "forma-field__error", children: error.message }, i))
+      }
+    ),
+    hasWarnings && /* @__PURE__ */ jsx14("div", { className: "forma-field__warnings", children: visibleWarnings.map((warning, i) => /* @__PURE__ */ jsx14("span", { className: "forma-field__warning", children: warning.message }, i)) })
+  ] });
+}
+
+// src/defaults/layout/FormLayout.tsx
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function FormLayout({
+  children,
+  onSubmit,
+  isSubmitting
+}) {
+  return /* @__PURE__ */ jsxs12(
+    "form",
+    {
+      className: "forma-form",
+      onSubmit: (e) => {
+        e.preventDefault();
+        onSubmit();
+      },
+      noValidate: true,
+      children: [
+        children,
+        /* @__PURE__ */ jsx15("div", { className: "forma-form__actions", children: /* @__PURE__ */ jsx15(
+          "button",
+          {
+            type: "submit",
+            className: `forma-button forma-button--primary forma-submit${isSubmitting ? " forma-submit--loading" : ""}`,
+            disabled: isSubmitting,
+            "aria-busy": isSubmitting || void 0,
+            children: isSubmitting ? "Submitting..." : "Submit"
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/defaults/layout/WizardLayout.tsx
+import { useCallback } from "react";
+import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function WizardLayout({
+  children,
+  onSubmit,
+  isSubmitting
+}) {
+  const { wizard } = useFormaContext();
+  const handleNext = useCallback(() => {
+    if (!wizard) return;
+    wizard.touchCurrentPageFields();
+    if (wizard.validateCurrentPage()) {
+      wizard.nextPage();
+    }
+  }, [wizard]);
+  const handleSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (!wizard) {
+        onSubmit();
+        return;
+      }
+      const nativeEvent = e.nativeEvent;
+      const submitter = nativeEvent.submitter;
+      if (wizard.isLastPage && (submitter == null ? void 0 : submitter.dataset.action) === "submit") {
+        onSubmit();
+      } else if (!wizard.isLastPage) {
+        handleNext();
+      }
+    },
+    [wizard, onSubmit, handleNext]
+  );
+  if (!wizard) {
+    return /* @__PURE__ */ jsxs13(
+      "form",
+      {
+        className: "forma-form",
+        onSubmit: handleSubmit,
+        noValidate: true,
+        children: [
+          children,
+          /* @__PURE__ */ jsx16("div", { className: "forma-form__actions", children: /* @__PURE__ */ jsx16(
+            "button",
+            {
+              type: "submit",
+              className: "forma-button forma-button--primary forma-submit",
+              disabled: isSubmitting,
+              "aria-busy": isSubmitting || void 0,
+              children: isSubmitting ? "Submitting..." : "Submit"
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs13("form", { className: "forma-wizard", onSubmit: handleSubmit, noValidate: true, children: [
+    /* @__PURE__ */ jsx16("div", { className: "forma-wizard__steps", role: "navigation", "aria-label": "Form progress", children: wizard.pages.map((page, index) => {
+      const isCompleted = index < wizard.currentPageIndex;
+      const isCurrent = index === wizard.currentPageIndex;
+      const stepClass = [
+        "forma-step",
+        isCompleted && "forma-step--completed",
+        isCurrent && "forma-step--current",
+        !isCompleted && !isCurrent && "forma-step--upcoming"
+      ].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsxs13("div", { className: stepClass, "aria-current": isCurrent ? "step" : void 0, children: [
+        /* @__PURE__ */ jsx16("span", { className: "forma-step__indicator", children: isCompleted ? "\u2713" : index + 1 }),
+        /* @__PURE__ */ jsx16("span", { className: "forma-step__label", children: page.title })
+      ] }, page.id);
+    }) }),
+    children,
+    /* @__PURE__ */ jsxs13("div", { className: "forma-wizard__nav", children: [
+      wizard.hasPreviousPage ? /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          className: "forma-button forma-button--secondary",
+          onClick: () => wizard.previousPage(),
+          children: "Previous"
+        }
+      ) : /* @__PURE__ */ jsx16("div", {}),
+      wizard.isLastPage ? /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "submit",
+          "data-action": "submit",
+          className: `forma-button forma-button--primary forma-submit${isSubmitting ? " forma-submit--loading" : ""}`,
+          disabled: isSubmitting,
+          "aria-busy": isSubmitting || void 0,
+          children: isSubmitting ? "Submitting..." : "Submit"
+        }
+      ) : /* @__PURE__ */ jsx16(
+        "button",
+        {
+          type: "button",
+          className: "forma-button forma-button--primary",
+          onClick: handleNext,
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/defaults/layout/PageWrapper.tsx
+import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+function PageWrapper({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ jsxs14("div", { className: "forma-page", children: [
+    title && /* @__PURE__ */ jsx17("h2", { className: "forma-page__title", children: title }),
+    description && /* @__PURE__ */ jsx17("p", { className: "forma-page__description", children: description }),
+    children
+  ] });
+}
+
+// src/defaults/componentMap.ts
+var defaultComponentMap = {
+  text: TextInput,
+  email: TextInput,
+  phone: TextInput,
+  url: TextInput,
+  password: TextInput,
+  textarea: TextareaInput,
+  number: NumberInput,
+  integer: IntegerInput,
+  boolean: BooleanInput,
+  date: DateInput,
+  datetime: DateTimeInput,
+  select: SelectInput,
+  multiselect: MultiSelectInput,
+  array: ArrayField,
+  object: ObjectField,
+  computed: ComputedDisplay,
+  display: DisplayField,
+  matrix: MatrixField,
+  fallback: FallbackField
+};
+var defaultFieldWrapper = FieldWrapper;
+var defaultLayout = FormLayout;
+var defaultWizardLayout = WizardLayout;
+var defaultPageWrapper = PageWrapper;
+
+// src/defaults/DefaultFormRenderer.tsx
+import { jsx as jsx18 } from "react/jsx-runtime";
+var DefaultFormRenderer = forwardRef(function DefaultFormRenderer2(props, ref) {
+  const {
+    components,
+    wizardLayout,
+    layout,
+    fieldWrapper,
+    pageWrapper,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx18(
+    FormRenderer,
+    {
+      ref,
+      components: components ?? defaultComponentMap,
+      fieldWrapper: fieldWrapper ?? defaultFieldWrapper,
+      layout: layout ?? (wizardLayout ? defaultWizardLayout : defaultLayout),
+      pageWrapper: pageWrapper ?? defaultPageWrapper,
+      ...rest
+    }
+  );
+});
+export {
+  ArrayField,
+  BooleanInput,
+  ComputedDisplay,
+  DateInput,
+  DateTimeInput,
+  DefaultFormRenderer,
+  DisplayField,
+  FallbackField,
+  FieldWrapper,
+  FormLayout,
+  IntegerInput,
+  MatrixField,
+  MultiSelectInput,
+  NumberInput,
+  ObjectField,
+  PageWrapper,
+  SelectInput,
+  TextInput,
+  TextareaInput,
+  WizardLayout,
+  defaultComponentMap,
+  defaultFieldWrapper,
+  defaultLayout,
+  defaultPageWrapper,
+  defaultWizardLayout
+};
+//# sourceMappingURL=index.js.map