@form-engine-ts/react 1.0.0

package/dist/index.js

@@ -0,0 +1,816 @@
+// src/builder.tsx
+import { sanitizeSchema } from "@form-engine-ts/core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var FIELD_TYPES = [
+  "text",
+  "textarea",
+  "number",
+  "rating",
+  "select",
+  "multi-select",
+  "checkbox",
+  "radio"
+];
+var BUILDER_DEFAULTS = {
+  "builder.formBuilder": "Form builder",
+  "builder.moveUp": "Move {{title}} up",
+  "builder.moveDown": "Move {{title}} down",
+  "builder.delete": "Delete {{title}}",
+  "builder.deleteAction": "Delete",
+  "builder.questionTitle": "\u8CEA\u554F\u6587 / Question Title",
+  "builder.questionTitlePlaceholder": "Example: Tell us what we could improve",
+  "builder.newQuestionTitle": "New question",
+  "builder.type": "Type",
+  "builder.required": "Required",
+  "builder.minimum": "Minimum",
+  "builder.maximum": "Maximum",
+  "builder.options": "Options",
+  "builder.optionLabel": "\u9078\u629E\u80A2 / Option Label {{index}}",
+  "builder.optionLabelPlaceholder": "Example: Very satisfied",
+  "builder.newOptionLabel": "Option {{index}}",
+  "builder.remove": "Remove",
+  "builder.addOption": "Add option",
+  "builder.displayCondition": "Display condition",
+  "builder.alwaysVisible": "Always visible",
+  "builder.conditionOperator": "Condition operator",
+  "builder.conditionValue": "Condition value",
+  "builder.conditionTrue": "true",
+  "builder.conditionFalse": "false",
+  "builder.addQuestion": "Add question",
+  "builder.fieldType.text": "Text",
+  "builder.fieldType.textarea": "Textarea",
+  "builder.fieldType.number": "Number",
+  "builder.fieldType.rating": "Rating",
+  "builder.fieldType.select": "Select",
+  "builder.fieldType.multi-select": "Multi-select",
+  "builder.fieldType.checkbox": "Checkbox",
+  "builder.fieldType.radio": "Radio",
+  "builder.operator.equals": "equals",
+  "builder.operator.not_equals": "does not equal",
+  "builder.operator.contains": "contains",
+  "builder.operator.not_empty": "is not empty"
+};
+function interpolate(template, params) {
+  return template.replace(
+    /\{\{(\w+)\}\}/g,
+    (token, name) => Object.hasOwn(params, name) ? String(params[name]) : token
+  );
+}
+function fieldTypeKey(type) {
+  return `builder.fieldType.${type}`;
+}
+function operatorKey(operator) {
+  return `builder.operator.${operator}`;
+}
+function createUniqueId(prefix, existingIds) {
+  let id;
+  do {
+    id = `${prefix}_${globalThis.crypto.randomUUID().slice(0, 8)}`;
+  } while (existingIds.has(id));
+  return id;
+}
+function baseField(field, type) {
+  return {
+    id: field.id,
+    type,
+    title: field.title,
+    ...field.description === void 0 ? {} : { description: field.description },
+    ...field.translationKey === void 0 ? {} : { translationKey: field.translationKey },
+    required: field.required,
+    ...field.displayCondition === void 0 ? {} : { displayCondition: field.displayCondition }
+  };
+}
+function normalizeField(field, type, newOptionLabel) {
+  const base = baseField(field, type);
+  if (type === "text" || type === "textarea") return { ...base, type };
+  if (type === "number") return { ...base, type };
+  if (type === "rating") return { ...base, type, min: 1, max: 5 };
+  if (type === "checkbox") return { ...base, type };
+  const options = "options" in field && field.options.length > 0 ? field.options : [{ id: createUniqueId("opt", /* @__PURE__ */ new Set()), label: newOptionLabel }];
+  return { ...base, type, options };
+}
+function defaultConditionValue(field) {
+  if (field.type === "checkbox") return true;
+  if (field.type === "number" || field.type === "rating") return field.min ?? 1;
+  if ("options" in field) return field.options[0]?.id ?? "";
+  return "";
+}
+function conditionOperators(field) {
+  if (field.type === "multi-select") return ["contains", "not_empty"];
+  if (field.type === "text" || field.type === "textarea") {
+    return ["equals", "not_equals", "contains", "not_empty"];
+  }
+  return ["equals", "not_equals", "not_empty"];
+}
+function withoutDisplayCondition(field) {
+  const { displayCondition: _displayCondition, ...rest } = field;
+  return rest;
+}
+function sanitizeBuilderSchema(schema) {
+  const sanitized = sanitizeSchema(schema);
+  const indexById = new Map(sanitized.fields.map((field, index) => [field.id, index]));
+  return {
+    ...sanitized,
+    fields: sanitized.fields.map((field, index) => {
+      const sourceId = field.displayCondition?.questionId;
+      if (sourceId === void 0) return field;
+      const sourceIndex = indexById.get(sourceId);
+      return sourceIndex !== void 0 && sourceIndex < index ? field : withoutDisplayCondition(field);
+    })
+  };
+}
+function conditionWithValue(questionId, operator, value) {
+  return operator === "not_empty" ? { questionId, operator } : { questionId, operator, value };
+}
+function ConditionValueEditor({
+  source,
+  condition,
+  onChange,
+  translate
+}) {
+  if (condition.operator === "not_empty") return null;
+  const update = (value) => onChange({ ...condition, value });
+  if (source.type === "checkbox") {
+    return /* @__PURE__ */ jsxs("select", { value: String(condition.value), onChange: (event) => update(event.currentTarget.value === "true"), children: [
+      /* @__PURE__ */ jsx("option", { value: "true", children: translate("builder.conditionTrue") }),
+      /* @__PURE__ */ jsx("option", { value: "false", children: translate("builder.conditionFalse") })
+    ] });
+  }
+  if (source.type === "number" || source.type === "rating") {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        "aria-label": translate("builder.conditionValue"),
+        type: "number",
+        value: typeof condition.value === "number" ? condition.value : "",
+        onChange: (event) => update(event.currentTarget.value === "" ? 0 : event.currentTarget.valueAsNumber)
+      }
+    );
+  }
+  if ("options" in source) {
+    return /* @__PURE__ */ jsx("select", { value: String(condition.value ?? ""), onChange: (event) => update(event.currentTarget.value), children: source.options.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, children: option.label }, option.id)) });
+  }
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-label": translate("builder.conditionValue"),
+      type: "text",
+      value: typeof condition.value === "string" ? condition.value : "",
+      onChange: (event) => update(event.currentTarget.value)
+    }
+  );
+}
+function FormBuilder({ schema, onChange, locale = "en", translator }) {
+  const translate = (key, params = {}) => {
+    const translated = translator?.translate(key, locale, params);
+    return translated === void 0 ? interpolate(BUILDER_DEFAULTS[key] ?? key, params) : translated;
+  };
+  const emitSchema = (candidate) => onChange(sanitizeBuilderSchema(candidate));
+  const updateField = (fieldId, update) => {
+    emitSchema({ ...schema, fields: schema.fields.map((field) => field.id === fieldId ? update(field) : field) });
+  };
+  const changeType = (fieldId, type) => {
+    emitSchema({
+      ...schema,
+      fields: schema.fields.map((field) => {
+        if (field.id === fieldId) {
+          return normalizeField(field, type, translate("builder.newOptionLabel", { index: 1 }));
+        }
+        if (field.displayCondition?.questionId === fieldId) {
+          const { displayCondition: _condition, ...withoutCondition } = field;
+          return withoutCondition;
+        }
+        return field;
+      })
+    });
+  };
+  const removeField = (fieldId) => {
+    if (schema.fields.length === 1) return;
+    emitSchema({ ...schema, fields: schema.fields.filter((field) => field.id !== fieldId) });
+  };
+  const moveField = (index, offset) => {
+    const target = index + offset;
+    if (target < 0 || target >= schema.fields.length) return;
+    const fields = [...schema.fields];
+    const current = fields[index];
+    const other = fields[target];
+    if (current === void 0 || other === void 0) return;
+    fields[index] = other;
+    fields[target] = current;
+    emitSchema({ ...schema, fields });
+  };
+  const addField = () => {
+    const id = createUniqueId("q", new Set(schema.fields.map((field) => field.id)));
+    emitSchema({
+      ...schema,
+      fields: [...schema.fields, { id, type: "text", title: translate("builder.newQuestionTitle"), required: false }]
+    });
+  };
+  return /* @__PURE__ */ jsxs("section", { className: "form-engine-builder", "aria-label": translate("builder.formBuilder"), children: [
+    /* @__PURE__ */ jsx("div", { className: "form-engine-builder__list", children: schema.fields.map((field, index) => {
+      const condition = field.displayCondition;
+      const source = condition === void 0 ? void 0 : schema.fields.find((item) => item.id === condition.questionId);
+      const availableSources = schema.fields.slice(0, index);
+      return /* @__PURE__ */ jsxs("fieldset", { className: "form-engine-builder__question", children: [
+        /* @__PURE__ */ jsx("legend", { children: field.title }),
+        /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__toolbar", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: index === 0,
+              onClick: () => moveField(index, -1),
+              "aria-label": translate("builder.moveUp", { title: field.title }),
+              children: "\u2191"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: index === schema.fields.length - 1,
+              onClick: () => moveField(index, 1),
+              "aria-label": translate("builder.moveDown", { title: field.title }),
+              children: "\u2193"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: schema.fields.length === 1,
+              onClick: () => removeField(field.id),
+              "aria-label": translate("builder.delete", { title: field.title }),
+              children: translate("builder.deleteAction")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            translate("builder.questionTitle"),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: field.title,
+                placeholder: translate("builder.questionTitlePlaceholder"),
+                onChange: (event) => updateField(field.id, (current) => ({
+                  ...current,
+                  title: event.currentTarget.value.trim().length === 0 ? current.title : event.currentTarget.value
+                }))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            translate("builder.type"),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: field.type,
+                onChange: (event) => changeType(field.id, event.currentTarget.value),
+                children: FIELD_TYPES.map((type) => /* @__PURE__ */ jsx("option", { value: type, children: translate(fieldTypeKey(type)) }, type))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { className: "form-engine-builder__check", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: field.required === true,
+                onChange: (event) => updateField(field.id, (current) => ({ ...current, required: event.currentTarget.checked }))
+              }
+            ),
+            translate("builder.required")
+          ] })
+        ] }),
+        field.type === "rating" ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__grid", children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            translate("builder.minimum"),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: field.min ?? 1,
+                onChange: (event) => {
+                  const min = event.currentTarget.valueAsNumber;
+                  if (!Number.isInteger(min)) return;
+                  updateField(
+                    field.id,
+                    (current) => current.type === "rating" ? { ...current, min, max: Math.max(min, current.max ?? 5) } : current
+                  );
+                }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            translate("builder.maximum"),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: field.max ?? 5,
+                onChange: (event) => {
+                  const max = event.currentTarget.valueAsNumber;
+                  if (!Number.isInteger(max)) return;
+                  updateField(
+                    field.id,
+                    (current) => current.type === "rating" ? { ...current, min: Math.min(current.min ?? 1, max), max } : current
+                  );
+                }
+              }
+            )
+          ] })
+        ] }) : null,
+        "options" in field ? /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__options", children: [
+          /* @__PURE__ */ jsx("strong", { children: translate("builder.options") }),
+          field.options.map((option, optionIndex) => /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__option", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                "aria-label": translate("builder.optionLabel", { index: optionIndex + 1 }),
+                value: option.label,
+                placeholder: translate("builder.optionLabelPlaceholder"),
+                onChange: (event) => updateField(field.id, (current) => {
+                  if (!("options" in current)) return current;
+                  const label = event.currentTarget.value;
+                  if (label.trim().length === 0) return current;
+                  return {
+                    ...current,
+                    options: current.options.map(
+                      (item, itemIndex) => itemIndex === optionIndex ? { ...item, label } : item
+                    )
+                  };
+                })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                disabled: field.options.length === 1,
+                onClick: () => updateField(
+                  field.id,
+                  (current) => "options" in current ? {
+                    ...current,
+                    options: current.options.filter((_item, itemIndex) => itemIndex !== optionIndex)
+                  } : current
+                ),
+                children: translate("builder.remove")
+              }
+            )
+          ] }, option.id)),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => updateField(
+                field.id,
+                (current) => "options" in current ? (() => {
+                  const id = createUniqueId("opt", new Set(current.options.map((option) => option.id)));
+                  return {
+                    ...current,
+                    options: [
+                      ...current.options,
+                      {
+                        id,
+                        label: translate("builder.newOptionLabel", { index: current.options.length + 1 })
+                      }
+                    ]
+                  };
+                })() : current
+              ),
+              children: translate("builder.addOption")
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "form-engine-builder__condition", children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            translate("builder.displayCondition"),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                value: condition?.questionId ?? "",
+                onChange: (event) => {
+                  const selected = schema.fields.find((item) => item.id === event.currentTarget.value);
+                  updateField(field.id, (current) => {
+                    if (selected === void 0) {
+                      const { displayCondition: _condition, ...withoutCondition } = current;
+                      return withoutCondition;
+                    }
+                    const operator = conditionOperators(selected)[0] ?? "not_empty";
+                    return {
+                      ...current,
+                      displayCondition: conditionWithValue(selected.id, operator, defaultConditionValue(selected))
+                    };
+                  });
+                },
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "", children: translate("builder.alwaysVisible") }),
+                  availableSources.map((candidate) => /* @__PURE__ */ jsx("option", { value: candidate.id, children: candidate.title }, candidate.id))
+                ]
+              }
+            )
+          ] }),
+          condition !== void 0 && source !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                "aria-label": translate("builder.conditionOperator"),
+                value: condition.operator,
+                onChange: (event) => {
+                  const operator = event.currentTarget.value;
+                  updateField(field.id, (current) => ({
+                    ...current,
+                    displayCondition: conditionWithValue(source.id, operator, defaultConditionValue(source))
+                  }));
+                },
+                children: conditionOperators(source).map((operator) => /* @__PURE__ */ jsx("option", { value: operator, children: translate(operatorKey(operator)) }, operator))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ConditionValueEditor,
+              {
+                source,
+                condition,
+                onChange: (next) => updateField(field.id, (current) => ({ ...current, displayCondition: next })),
+                translate
+              }
+            )
+          ] }) : null
+        ] })
+      ] }, field.id);
+    }) }),
+    /* @__PURE__ */ jsx("button", { className: "form-engine-builder__add", type: "button", onClick: addField, children: translate("builder.addQuestion") })
+  ] });
+}
+
+// src/context.tsx
+import {
+  assertValidFormSchema,
+  calculateFieldVisibility,
+  selectVisibleAnswers,
+  validateAnswers
+} from "@form-engine-ts/core";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FormContext = createContext(null);
+function issuesByField(issues) {
+  const result = {};
+  for (const issue of issues) result[issue.fieldId] ??= issue;
+  return result;
+}
+function FormProvider({
+  schema,
+  locale,
+  translator,
+  initialValues = {},
+  resetOnSuccess = false,
+  onSubmit,
+  children
+}) {
+  const validSchema = useMemo(() => {
+    assertValidFormSchema(schema);
+    return schema;
+  }, [schema]);
+  const [values, setValues] = useState(() => ({ ...initialValues }));
+  const [errors, setErrors] = useState({});
+  const [submitStatus, setSubmitStatus] = useState("idle");
+  const [submitError, setSubmitError] = useState(null);
+  const visibility = useMemo(() => calculateFieldVisibility(validSchema, values), [validSchema, values]);
+  useEffect(() => {
+    const fieldIds = new Set(validSchema.fields.map((field) => field.id));
+    setValues((current) => Object.fromEntries(Object.entries(current).filter(([fieldId]) => fieldIds.has(fieldId))));
+  }, [validSchema]);
+  const setValue = useCallback(
+    (fieldId, value) => {
+      setValues((current) => {
+        const next = { ...current, [fieldId]: value };
+        setErrors((currentErrors) => {
+          if (Object.keys(currentErrors).length === 0) return currentErrors;
+          const result = validateAnswers(validSchema, next);
+          return issuesByField(result.issues);
+        });
+        return next;
+      });
+      setSubmitStatus((current) => current === "success" || current === "error" ? "idle" : current);
+      setSubmitError(null);
+    },
+    [validSchema]
+  );
+  const reset = useCallback(() => {
+    setValues({ ...initialValues });
+    setErrors({});
+    setSubmitStatus("idle");
+    setSubmitError(null);
+  }, [initialValues]);
+  const submit = useCallback(async () => {
+    const validation = validateAnswers(validSchema, values);
+    if (!validation.valid) {
+      setErrors(issuesByField(validation.issues));
+      setSubmitStatus("error");
+      setSubmitError(null);
+      return false;
+    }
+    setErrors({});
+    setSubmitStatus("submitting");
+    setSubmitError(null);
+    try {
+      await onSubmit(selectVisibleAnswers(validSchema, values));
+      if (resetOnSuccess) setValues({ ...initialValues });
+      setSubmitStatus("success");
+      return true;
+    } catch (cause) {
+      setSubmitError(cause instanceof Error ? cause : new Error(String(cause)));
+      setSubmitStatus("error");
+      return false;
+    }
+  }, [initialValues, onSubmit, resetOnSuccess, validSchema, values]);
+  const translate = useCallback(
+    (key, params) => translator.translate(key, locale, params),
+    [locale, translator]
+  );
+  const contextValue = useMemo(
+    () => ({
+      schema: validSchema,
+      locale,
+      translator,
+      values,
+      visibility,
+      errors,
+      submitStatus,
+      submitError,
+      isSubmitting: submitStatus === "submitting",
+      setValue,
+      reset,
+      submit,
+      translate
+    }),
+    [
+      errors,
+      locale,
+      reset,
+      setValue,
+      submit,
+      submitError,
+      submitStatus,
+      translate,
+      translator,
+      validSchema,
+      values,
+      visibility
+    ]
+  );
+  return /* @__PURE__ */ jsx2(FormContext.Provider, { value: contextValue, children });
+}
+function useForm() {
+  const context = useContext(FormContext);
+  if (context === null) throw new Error("useForm must be called inside a FormProvider.");
+  return context;
+}
+function useField(fieldId) {
+  const form = useForm();
+  const field = form.schema.fields.find((item) => item.id === fieldId);
+  if (field === void 0) throw new Error(`Unknown form field: ${fieldId}`);
+  const setValue = useCallback((value) => form.setValue(fieldId, value), [fieldId, form]);
+  return { field, value: form.values[fieldId], error: form.errors[fieldId], setValue };
+}
+
+// src/renderer.tsx
+import {
+  validateAnswers as validateAnswers2
+} from "@form-engine-ts/core";
+import { useId } from "react";
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function describedBy(field, error, helpId, errorId) {
+  const ids = [field.description === void 0 ? void 0 : helpId, error === void 0 ? void 0 : errorId].filter(
+    Boolean
+  );
+  return ids.length === 0 ? void 0 : ids.join(" ");
+}
+function RequiredMark({ required }) {
+  return required ? /* @__PURE__ */ jsxs2("span", { className: "fe-required", "aria-hidden": "true", children: [
+    " ",
+    "*"
+  ] }) : null;
+}
+function FieldMessage({ props }) {
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    props.field.description === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.helpId, className: "fe-help", children: props.field.description }),
+    props.error === void 0 ? null : /* @__PURE__ */ jsx3("div", { id: props.errorId, className: "fe-error", children: props.translate(props.error.messageKey, props.error.params) })
+  ] });
+}
+function DefaultField(props) {
+  const { field, value, setValue, inputId, error, translate } = props;
+  const ariaProps = {
+    "aria-describedby": describedBy(field, error, props.helpId, props.errorId),
+    "aria-invalid": error === void 0 ? void 0 : true
+  };
+  if (field.type === "checkbox") {
+    return /* @__PURE__ */ jsxs2("div", { className: "fe-field fe-field--checkbox", "data-field-id": field.id, children: [
+      /* @__PURE__ */ jsxs2("label", { className: "fe-check-label", htmlFor: inputId, children: [
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            ...ariaProps,
+            id: inputId,
+            name: field.id,
+            type: "checkbox",
+            checked: value === true,
+            onChange: (event) => setValue(event.currentTarget.checked)
+          }
+        ),
+        /* @__PURE__ */ jsxs2("span", { children: [
+          field.title,
+          /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx3(FieldMessage, { props })
+    ] });
+  }
+  if (field.type === "radio" || field.type === "multi-select") {
+    const selected = Array.isArray(value) ? value : [];
+    return /* @__PURE__ */ jsxs2("fieldset", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, ...ariaProps, children: [
+      /* @__PURE__ */ jsxs2("legend", { className: "fe-label", children: [
+        field.title,
+        /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+      ] }),
+      field.options.map((option, index) => {
+        const optionId = `${inputId}-${index}`;
+        const checked = field.type === "radio" ? value === option.id : selected.includes(option.id);
+        return /* @__PURE__ */ jsxs2("label", { className: "fe-check-label", htmlFor: optionId, children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              id: optionId,
+              name: field.id,
+              type: field.type === "radio" ? "radio" : "checkbox",
+              value: option.id,
+              checked,
+              onChange: (event) => {
+                if (field.type === "radio") setValue(option.id);
+                else
+                  setValue(
+                    event.currentTarget.checked ? [...selected, option.id] : selected.filter((item) => item !== option.id)
+                  );
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx3("span", { children: option.label })
+        ] }, option.id);
+      }),
+      /* @__PURE__ */ jsx3(FieldMessage, { props })
+    ] });
+  }
+  if (field.type === "rating") {
+    const min = field.min ?? 1;
+    const max = field.max ?? 5;
+    return /* @__PURE__ */ jsxs2("fieldset", { className: "fe-field fe-field--rating", "data-field-id": field.id, ...ariaProps, children: [
+      /* @__PURE__ */ jsxs2("legend", { className: "fe-label", children: [
+        field.title,
+        /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+      ] }),
+      /* @__PURE__ */ jsx3("div", { className: "fe-rating-options", children: Array.from({ length: max - min + 1 }, (_, index) => min + index).map((rating) => {
+        const optionId = `${inputId}-${rating}`;
+        return /* @__PURE__ */ jsxs2("label", { className: "fe-rating-label", htmlFor: optionId, children: [
+          /* @__PURE__ */ jsx3(
+            "input",
+            {
+              id: optionId,
+              name: field.id,
+              type: "radio",
+              value: rating,
+              checked: value === rating,
+              onChange: () => setValue(rating)
+            }
+          ),
+          /* @__PURE__ */ jsx3("span", { children: rating })
+        ] }, rating);
+      }) }),
+      /* @__PURE__ */ jsx3(FieldMessage, { props })
+    ] });
+  }
+  const label = /* @__PURE__ */ jsxs2("label", { className: "fe-label", htmlFor: inputId, children: [
+    field.title,
+    /* @__PURE__ */ jsx3(RequiredMark, { required: field.required })
+  ] });
+  let control;
+  if (field.type === "textarea") {
+    control = /* @__PURE__ */ jsx3(
+      "textarea",
+      {
+        ...ariaProps,
+        id: inputId,
+        name: field.id,
+        placeholder: field.placeholderKey === void 0 ? void 0 : translate(field.placeholderKey),
+        value: typeof value === "string" ? value : "",
+        onChange: (event) => setValue(event.currentTarget.value)
+      }
+    );
+  } else if (field.type === "number") {
+    control = /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ...ariaProps,
+        id: inputId,
+        name: field.id,
+        type: "number",
+        min: field.min,
+        max: field.max,
+        step: field.step,
+        placeholder: field.placeholderKey === void 0 ? void 0 : translate(field.placeholderKey),
+        value: typeof value === "number" ? value : "",
+        onChange: (event) => setValue(event.currentTarget.value === "" ? void 0 : event.currentTarget.valueAsNumber)
+      }
+    );
+  } else if (field.type === "select") {
+    control = /* @__PURE__ */ jsxs2(
+      "select",
+      {
+        ...ariaProps,
+        id: inputId,
+        name: field.id,
+        value: typeof value === "string" ? value : "",
+        onChange: (event) => setValue(event.currentTarget.value || void 0),
+        children: [
+          /* @__PURE__ */ jsx3("option", { value: "", children: "\u2014" }),
+          field.options.map((option) => /* @__PURE__ */ jsx3("option", { value: option.id, children: option.label }, option.id))
+        ]
+      }
+    );
+  } else {
+    const placeholderKey = "placeholderKey" in field ? field.placeholderKey : void 0;
+    control = /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ...ariaProps,
+        id: inputId,
+        name: field.id,
+        type: "text",
+        placeholder: placeholderKey === void 0 ? void 0 : translate(placeholderKey),
+        value: typeof value === "string" ? value : "",
+        onChange: (event) => setValue(event.currentTarget.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: `fe-field fe-field--${field.type}`, "data-field-id": field.id, children: [
+    label,
+    control,
+    /* @__PURE__ */ jsx3(FieldMessage, { props })
+  ] });
+}
+function FormRenderer({
+  components = {},
+  className = "",
+  successMessageKey,
+  errorMessageKey
+}) {
+  const form = useForm();
+  const prefix = useId().replace(/:/g, "");
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const formElement = event.currentTarget;
+    const validation = validateAnswers2(form.schema, form.values);
+    const firstInvalidFieldId = validation.issues[0]?.fieldId;
+    const valid = await form.submit();
+    if (!valid && firstInvalidFieldId !== void 0) {
+      queueMicrotask(() => {
+        const fieldContainer = [...formElement.querySelectorAll("[data-field-id]")].find(
+          (element) => element.dataset.fieldId === firstInvalidFieldId
+        );
+        fieldContainer?.querySelector("input, select, textarea")?.focus();
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs2("form", { className: `fe-form ${className}`.trim(), noValidate: true, onSubmit: handleSubmit, children: [
+    /* @__PURE__ */ jsxs2("header", { className: "fe-header", children: [
+      /* @__PURE__ */ jsx3("h1", { children: form.schema.title }),
+      form.schema.description === void 0 ? null : /* @__PURE__ */ jsx3("p", { children: form.schema.description })
+    ] }),
+    /* @__PURE__ */ jsx3("div", { className: "fe-fields", children: form.schema.fields.filter((field) => form.visibility[field.id] === true).map((field) => {
+      const props = {
+        field,
+        value: form.values[field.id],
+        error: form.errors[field.id],
+        setValue: (value) => form.setValue(field.id, value),
+        translate: form.translate,
+        inputId: `${prefix}-${field.id}`,
+        errorId: `${prefix}-${field.id}-error`,
+        helpId: `${prefix}-${field.id}-help`
+      };
+      const Component = components[field.type];
+      return Component === void 0 ? /* @__PURE__ */ jsx3(DefaultField, { ...props }, field.id) : /* @__PURE__ */ jsx3(Component, { ...props }, field.id);
+    }) }),
+    /* @__PURE__ */ jsx3("button", { className: "fe-submit", type: "submit", disabled: form.isSubmitting, children: form.translate(form.schema.submitLabelKey ?? "form.submit") }),
+    /* @__PURE__ */ jsxs2("div", { className: "fe-status", "aria-live": "polite", children: [
+      form.submitStatus === "success" && successMessageKey !== void 0 ? /* @__PURE__ */ jsx3("div", { role: "status", children: form.translate(successMessageKey) }) : null,
+      form.submitStatus === "error" && form.submitError !== null && errorMessageKey !== void 0 ? /* @__PURE__ */ jsx3("div", { role: "alert", children: form.translate(errorMessageKey) }) : null
+    ] })
+  ] });
+}
+export {
+  FormBuilder,
+  FormProvider,
+  FormRenderer,
+  useField,
+  useForm
+};