@teamnovu/nuxt-statamic-formbuilder 0.1.0

package/dist/runtime/composables/useFormBuilder.js

@@ -0,0 +1,68 @@
+import { useRuntimeConfig } from "#imports";
+import { useI18n } from "vue-i18n";
+import { computed, ref, toValue } from "vue";
+import { isDisplayOrSpacerField, isMultiValueField } from "../types.js";
+import { submitStatamicForm } from "../utils/submitStatamicForm.js";
+function flattenFields(form) {
+  if ("fields" in form) {
+    return form.fields;
+  }
+  return form.sections.flatMap((section) => section.fields);
+}
+function setInitialState(fields) {
+  return toValue(fields).reduce((acc, field) => {
+    if (isDisplayOrSpacerField(field)) {
+      return acc;
+    }
+    if (field.type === "input_file_upload") {
+      acc[field.handle] = isMultiValueField(field) ? [] : null;
+    } else if (isMultiValueField(field)) {
+      acc[field.handle] = [];
+    } else {
+      acc[field.handle] = void 0;
+    }
+    return acc;
+  }, {});
+}
+export function useFormBuilder(formBuilderConfiguration, serverUrlOrOptions) {
+  const options = typeof serverUrlOrOptions === "string" ? { serverUrl: serverUrlOrOptions } : serverUrlOrOptions ?? {};
+  const runtimeConfig = useRuntimeConfig();
+  const { locale } = useI18n();
+  const serverUrl = computed(
+    () => options.serverUrl || runtimeConfig.public.formBuilder?.serverUrl || runtimeConfig.public.BACKEND_URL || ""
+  );
+  const submitter = options.submitter ?? submitStatamicForm;
+  const requestState = ref("not_submitted");
+  const state = ref({});
+  const fields = computed(() => flattenFields(formBuilderConfiguration));
+  state.value = setInitialState(fields);
+  function reset() {
+    state.value = setInitialState(fields);
+    requestState.value = "not_submitted";
+  }
+  async function submit(_event, stateRef = state) {
+    requestState.value = "loading";
+    try {
+      const result = await submitter({
+        form: formBuilderConfiguration,
+        state: stateRef.value,
+        serverUrl: serverUrl.value,
+        locale: locale.value
+      });
+      requestState.value = "success";
+      return result;
+    } catch (error) {
+      requestState.value = "error";
+      return error?.body ?? error;
+    }
+  }
+  return {
+    requestState,
+    submit,
+    reset,
+    state,
+    fields,
+    serverUrl
+  };
+}
+export default useFormBuilder;

package/dist/runtime/composables/useFormFieldRegistry.d.ts

@@ -0,0 +1,8 @@
+import type { Component } from 'vue';
+export declare function registerFormField(type: string, component: Component): void;
+export declare function resolveFormField(type: string): Component | undefined;
+export declare function useFormFieldRegistry(): {
+    registerFormField: typeof registerFormField;
+    resolveFormField: typeof resolveFormField;
+    registeredTypes: () => string[];
+};

package/dist/runtime/composables/useFormFieldRegistry.js

@@ -0,0 +1,14 @@
+const fieldRegistry = /* @__PURE__ */ new Map();
+export function registerFormField(type, component) {
+  fieldRegistry.set(type, component);
+}
+export function resolveFormField(type) {
+  return fieldRegistry.get(type);
+}
+export function useFormFieldRegistry() {
+  return {
+    registerFormField,
+    resolveFormField,
+    registeredTypes: () => [...fieldRegistry.keys()]
+  };
+}

package/dist/runtime/composables/useFormValidation.d.ts

@@ -0,0 +1,11 @@
+import * as v from 'valibot';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+import type { FormBuilderConfiguration, FormBuilderField, InputRules } from '../types.js';
+export declare function useFormValidation(fieldsInput: MaybeRefOrGetter<readonly FormBuilderField[]>, formRules: FormBuilderConfiguration['rules'], _state?: Ref<Record<string, unknown>>): {
+    schema: import("vue").ComputedRef<v.ObjectSchema<Record<string, v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>>, undefined>>;
+    validationErrors: Ref<Record<string, string>, Record<string, string>>;
+    parseRules: (rulesInput?: string | string[]) => InputRules;
+    getRulesForField: (field: FormBuilderField) => InputRules;
+    buildFieldSchema: (field: FormBuilderField) => v.BaseSchema<unknown, unknown, v.BaseIssue<unknown>>;
+};
+export default useFormValidation;

package/dist/runtime/composables/useFormValidation.js

@@ -0,0 +1,166 @@
+import * as v from "valibot";
+import { useI18n } from "vue-i18n";
+import { computed, ref, toValue } from "vue";
+import { isDisplayOrSpacerField } from "../types.js";
+export function useFormValidation(fieldsInput, formRules, _state) {
+  const { t } = useI18n();
+  const fields = computed(() => toValue(fieldsInput) ?? []);
+  const validationErrors = ref({});
+  const parseRules = (rulesInput) => {
+    if (!rulesInput) {
+      return {};
+    }
+    const source = Array.isArray(rulesInput) ? rulesInput.join("|") : rulesInput;
+    if (typeof source !== "string") {
+      return {};
+    }
+    return source.split("|").reduce((parsedRules, rule) => {
+      const [name, value] = rule.split(":");
+      if (name === "required") {
+        return { ...parsedRules, required: true };
+      }
+      if (name === "min" && value) {
+        return { ...parsedRules, min: Number(value) };
+      }
+      if (name === "max" && value) {
+        return { ...parsedRules, max: Number(value) };
+      }
+      if (name === "maxlength" && value) {
+        return { ...parsedRules, maxlength: Number(value) };
+      }
+      if (name === "pattern" && value) {
+        return { ...parsedRules, pattern: value };
+      }
+      if (name === "type" && value) {
+        return { ...parsedRules, type: value };
+      }
+      return parsedRules;
+    }, {});
+  };
+  const getRulesForField = (field) => parseRules(formRules?.[field.handle]);
+  const normalizeFieldType = (field, rules) => {
+    const explicit = rules.type?.toLowerCase();
+    if (explicit === "array" || explicit === "boolean" || explicit === "number" || explicit === "file" || explicit === "string") {
+      return explicit;
+    }
+    if (field.type === "input_slider" || field.type === "input_number" || explicit?.includes("numeric")) {
+      return "number";
+    }
+    if (field.type === "input_checkboxes" || field.type === "input_radio_buttons" || field.type === "input_select" && field.config.multiple === true) {
+      return "array";
+    }
+    if (field.type === "input_switch" || explicit === "boolean") {
+      return "boolean";
+    }
+    if (field.type === "input_file_upload") {
+      return "file";
+    }
+    return "string";
+  };
+  const buildFieldSchema = (field) => {
+    const rules = getRulesForField(field);
+    const normalizedType = normalizeFieldType(field, rules);
+    const isRequired = rules.required === true;
+    const buildStringSchema = () => {
+      let stringSchema2 = v.union([
+        v.pipe(v.string()),
+        v.pipe(v.null(), v.transform(() => "")),
+        v.pipe(v.undefined(), v.transform(() => ""))
+      ]);
+      if (isRequired) {
+        stringSchema2 = v.pipe(stringSchema2, v.minLength(1, t("form.user_feedback.field_validation.required")));
+      }
+      const pattern = rules.pattern;
+      if (pattern) {
+        stringSchema2 = v.pipe(stringSchema2, v.regex(new RegExp(pattern), t("form.user_feedback.field_validation.invalid_format")));
+      }
+      if (rules.maxlength) {
+        stringSchema2 = v.pipe(stringSchema2, v.maxLength(rules.maxlength, t("form.user_feedback.field_validation.maxlength_characters", { n: rules.maxlength })));
+      }
+      if (rules.min) {
+        stringSchema2 = v.pipe(stringSchema2, v.minLength(rules.min, t("form.user_feedback.field_validation.minlength_characters", { n: rules.min })));
+      }
+      if (field.type === "input_email") {
+        stringSchema2 = v.pipe(stringSchema2, v.email(t("form.user_feedback.field_validation.email")));
+      }
+      if (field.type === "input_phone") {
+        stringSchema2 = v.pipe(stringSchema2, v.regex(/^\(?\+?\d{1,4}\)?\s*[\d\s]+$/, t("form.user_feedback.field_validation.phone")));
+      }
+      return stringSchema2;
+    };
+    const stringSchema = () => isRequired ? buildStringSchema() : v.optional(buildStringSchema());
+    const numberSchema = () => {
+      const coerceToNumber = v.union([
+        v.pipe(v.number()),
+        v.pipe(v.string(), v.transform((value) => Number(value))),
+        v.pipe(v.null(), v.transform(() => 0)),
+        v.pipe(v.undefined(), v.transform(() => 0))
+      ]);
+      let base = coerceToNumber;
+      if (typeof rules.min === "number") {
+        base = v.pipe(base, v.minValue(rules.min, t("form.user_feedback.field_validation.min_number", { n: rules.min })));
+      }
+      if (typeof rules.max === "number") {
+        base = v.pipe(base, v.maxValue(rules.max, t("form.user_feedback.field_validation.max_number", { n: rules.max })));
+      }
+      return isRequired ? base : v.optional(base);
+    };
+    const arraySchema = () => {
+      const itemSchema = v.union([v.string(), v.number()]);
+      let base = v.array(itemSchema);
+      if (isRequired) {
+        base = v.pipe(base, v.minLength(1, t("form.user_feedback.field_validation.required")));
+      }
+      if (typeof rules.min === "number") {
+        base = v.pipe(base, v.minLength(rules.min, t("form.user_feedback.field_validation.min_items", { n: rules.min })));
+      }
+      if (typeof rules.max === "number") {
+        base = v.pipe(base, v.maxLength(rules.max, t("form.user_feedback.field_validation.max_items", { n: rules.max })));
+      }
+      return isRequired ? base : v.optional(base);
+    };
+    if (normalizedType === "number") {
+      return numberSchema();
+    }
+    if (normalizedType === "array") {
+      return arraySchema();
+    }
+    if (normalizedType === "boolean") {
+      const base = v.boolean();
+      return isRequired ? base : v.optional(base);
+    }
+    if (normalizedType === "file" && field.type === "input_file_upload") {
+      const maxFilesizeKb = field.config.max_filesize;
+      const maxFiles = field.config.max_files;
+      const singleFile = maxFilesizeKb ? v.pipe(v.instance(File), v.check((f) => f.size <= maxFilesizeKb * 1024, t("form.user_feedback.field_validation.max_filesize", { n: maxFilesizeKb }))) : v.instance(File);
+      let multipleFiles = v.array(v.instance(File));
+      if (maxFiles) {
+        multipleFiles = v.pipe(multipleFiles, v.check((files) => files.length <= maxFiles, t("form.user_feedback.field_validation.max_files", { n: maxFiles })));
+      }
+      if (maxFilesizeKb) {
+        multipleFiles = v.pipe(multipleFiles, v.check((files) => files.every((f) => f.size <= maxFilesizeKb * 1024), t("form.user_feedback.field_validation.max_filesize", { n: maxFilesizeKb })));
+      }
+      const base = v.union([singleFile, multipleFiles]);
+      return isRequired ? base : v.nullish(base);
+    }
+    return stringSchema();
+  };
+  const schema = computed(() => {
+    const schemaEntries = {};
+    fields.value.forEach((field) => {
+      if (isDisplayOrSpacerField(field)) {
+        return;
+      }
+      schemaEntries[field.handle] = buildFieldSchema(field);
+    });
+    return v.object(schemaEntries);
+  });
+  return {
+    schema,
+    validationErrors,
+    parseRules,
+    getRulesForField,
+    buildFieldSchema
+  };
+}
+export default useFormValidation;

package/dist/runtime/composables/useTranslatableInput.d.ts

@@ -0,0 +1,8 @@
+import type { TranslatableInput } from '../types.js';
+export type ResolveTranslatableInput = (input: TranslatableInput | string | undefined | null) => string | undefined;
+/**
+ * Call once at the top of `<script setup>`. Returns a resolver safe to use
+ * in templates and computeds (useI18n must not run during render).
+ */
+export declare function useTranslatableInput(): ResolveTranslatableInput;
+export default useTranslatableInput;

package/dist/runtime/composables/useTranslatableInput.js

@@ -0,0 +1,14 @@
+import { useI18n } from "vue-i18n";
+export function useTranslatableInput() {
+  const { locale } = useI18n();
+  return (input) => {
+    if (typeof input === "string") {
+      return input;
+    }
+    if (Array.isArray(input)) {
+      return input.find((element) => element.handle === locale.value)?.value ?? input.find((element) => element.handle === "de")?.value ?? void 0;
+    }
+    return void 0;
+  };
+}
+export default useTranslatableInput;

package/dist/runtime/fieldConfigs.d.ts

@@ -0,0 +1,91 @@
+export type ValidationTrigger = 'blur' | 'submit';
+export type TranslatableInput = {
+    handle: string;
+    value: string | null;
+}[];
+/** Shared CMS field config keys present on most input fieldtypes. */
+export type BaseFieldConfig = {
+    label?: string | TranslatableInput;
+    hint?: string | TranslatableInput;
+    help?: string | TranslatableInput;
+    inline?: boolean;
+    validateOn?: ValidationTrigger[];
+    /** When true, UI layers may float the label over the control. */
+    floating_label?: boolean;
+};
+export type FormFieldOption = {
+    id?: string;
+    key: string;
+    text: TranslatableInput;
+};
+export type InputTextFieldConfig = BaseFieldConfig & {
+    placeholder?: string | TranslatableInput;
+    character_limit?: number;
+};
+export type InputTextareaFieldConfig = BaseFieldConfig & {
+    placeholder?: string | TranslatableInput;
+    character_limit?: number;
+};
+export type InputEmailFieldConfig = BaseFieldConfig & {
+    placeholder?: string | TranslatableInput;
+};
+export type InputPhoneFieldConfig = BaseFieldConfig & {
+    placeholder?: string | TranslatableInput;
+    country_codes?: Record<string, string>;
+    show_country_code_selector?: boolean;
+    show_search?: boolean;
+    default_country_code?: string;
+};
+export type InputNumberFieldConfig = BaseFieldConfig & {
+    min?: number;
+    max?: number;
+    step?: number;
+    placeholder?: string | TranslatableInput;
+    default?: number;
+};
+export type InputSelectFieldConfig = BaseFieldConfig & {
+    placeholder?: string | TranslatableInput;
+    options?: FormFieldOption[];
+    show_search?: boolean;
+    multiple?: boolean;
+};
+export type InputDateFieldConfig = BaseFieldConfig & {
+    earliest_date?: string;
+    latest_date?: string;
+};
+export type InputSliderFieldConfig = BaseFieldConfig & {
+    min?: number;
+    max?: number;
+    step?: number;
+    default?: number;
+};
+export type InputCheckboxesFieldConfig = BaseFieldConfig & {
+    options?: FormFieldOption[];
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'card' | 'list' | 'table';
+    indicator?: 'start' | 'end' | 'hidden';
+};
+export type InputRadioButtonsFieldConfig = BaseFieldConfig & {
+    options?: FormFieldOption[];
+    orientation?: 'horizontal' | 'vertical';
+    variant?: 'card' | 'list' | 'table';
+    indicator?: 'start' | 'end' | 'hidden';
+};
+export type InputSwitchFieldConfig = BaseFieldConfig & {
+    default?: boolean;
+    label_deactivated?: string | TranslatableInput;
+    label_activated?: string | TranslatableInput;
+};
+export type InputFileUploadFieldConfig = BaseFieldConfig & {
+    description?: string | TranslatableInput;
+    icon_label?: string | TranslatableInput;
+    /** Max file size in KB */
+    max_filesize?: number;
+    max_files?: number;
+    /** MIME types or file extensions keyed by label */
+    allowed_mimes?: Record<string, string>;
+};
+export type DisplayTextFieldConfig = {
+    title?: TranslatableInput;
+    text?: TranslatableInput;
+};

package/dist/runtime/injectionKeys.d.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey, Ref } from 'vue';
+/**
+ * Shared form field state provided by FormBuilder / StatamicFormBuilder hosts.
+ * Custom UI layers should provide and inject via this key instead of a string.
+ */
+export declare const formBuilderStateKey: InjectionKey<Ref<Record<string, unknown>>>;

package/dist/runtime/injectionKeys.js

@@ -0,0 +1 @@
+export const formBuilderStateKey = Symbol("formBuilderState");

package/dist/runtime/locales/de.json

@@ -0,0 +1,29 @@
+{
+  "form": {
+    "user_feedback": {
+      "error": {
+        "title": "Fehler"
+      },
+      "field_invalid": "Keine Felder sind ausgefüllt. | Das Feld {fields} ist ungültig. | Die {count} Felder {fields} sind ungültig.",
+      "field_validation": {
+        "email": "Ungültige E-Mail-Adresse",
+        "invalid_format": "Ungültiges Format",
+        "max_items": "Maximal {n} Elemente",
+        "max_number": "Darf maximal {n} sein",
+        "max_value": "Darf maximal {n} sein",
+        "maxlength_characters": "Darf maximal {n} Zeichen lang sein",
+        "min_items": "Mindestens {n} Elemente",
+        "min_number": "Darf minimal {n} sein",
+        "min_value": "Darf minimal {n} sein",
+        "minlength_characters": "Muss mindestens {n} Zeichen lang sein",
+        "required": "Dieses Feld ist erforderlich",
+        "phone": "Ungültige Telefonnummer",
+        "max_filesize": "Die Dateigröße darf {n} KB nicht überschreiten",
+        "max_files": "Es können maximal {n} Datei hochgeladen werden | Es können maximal {n} Dateien hochgeladen werden"
+      },
+      "success": {
+        "title": "Erfolgreich"
+      }
+    }
+  }
+}

package/dist/runtime/locales/en.json

@@ -0,0 +1,29 @@
+{
+  "form": {
+    "user_feedback": {
+      "error": {
+        "title": "Error"
+      },
+      "field_invalid": "No fields are filled. | The field {fields} is invalid. | The {count} fields {fields} are invalid.",
+      "field_validation": {
+        "email": "Invalid email address",
+        "invalid_format": "Invalid format",
+        "max_items": "Must have at most {n} items",
+        "max_number": "Must be at most {n}",
+        "max_value": "Must be less than or equal to {n}",
+        "maxlength_characters": "Must be at most {n} characters",
+        "min_items": "Must have at least {n} items",
+        "min_number": "Must be at least {n}",
+        "min_value": "Must be greater than or equal to {n}",
+        "minlength_characters": "Must be at least {n} characters",
+        "required": "This field is required",
+        "phone": "Invalid phone number",
+        "max_filesize": "File size must not exceed {n} KB",
+        "max_files": "At most {n} file can be uploaded | At most {n} files can be uploaded"
+      },
+      "success": {
+        "title": "Successful"
+      }
+    }
+  }
+}

package/dist/runtime/locales/fr.json

@@ -0,0 +1,29 @@
+{
+  "form": {
+    "user_feedback": {
+      "error": {
+        "title": "Erreur"
+      },
+      "field_invalid": "Aucun champ n'est rempli. | Le champ {fields} est invalide. | Les {count} champs {fields} sont invalides.",
+      "field_validation": {
+        "email": "Adresse e-mail invalide",
+        "invalid_format": "Format invalide",
+        "max_items": "Maximum {n} éléments",
+        "max_number": "Doit être au maximum {n}",
+        "max_value": "Doit être au maximum {n}",
+        "maxlength_characters": "Doit contenir au maximum {n} caractères",
+        "min_items": "Minimum {n} éléments",
+        "min_number": "Doit être au minimum {n}",
+        "min_value": "Doit être au minimum {n}",
+        "minlength_characters": "Doit contenir au minimum {n} caractères",
+        "required": "Ce champ est obligatoire",
+        "phone": "Numéro de téléphone invalide",
+        "max_filesize": "La taille du fichier ne doit pas dépasser {n} Ko",
+        "max_files": "Au maximum {n} fichier peut être téléchargé | Au maximum {n} fichiers peuvent être téléchargés"
+      },
+      "success": {
+        "title": "Succès"
+      }
+    }
+  }
+}

package/dist/runtime/styles/form-builder.css

@@ -0,0 +1 @@
+@source "../**/*.{vue,js,ts}";

package/dist/runtime/types.d.ts

@@ -0,0 +1,126 @@
+export type { ValidationTrigger, TranslatableInput, BaseFieldConfig, FormFieldOption, InputTextFieldConfig, InputTextareaFieldConfig, InputEmailFieldConfig, InputPhoneFieldConfig, InputNumberFieldConfig, InputSelectFieldConfig, InputDateFieldConfig, InputSliderFieldConfig, InputCheckboxesFieldConfig, InputRadioButtonsFieldConfig, InputSwitchFieldConfig, InputFileUploadFieldConfig, DisplayTextFieldConfig, } from './fieldConfigs.js';
+import type { BaseFieldConfig, DisplayTextFieldConfig, InputCheckboxesFieldConfig, InputDateFieldConfig, InputEmailFieldConfig, InputFileUploadFieldConfig, InputNumberFieldConfig, InputPhoneFieldConfig, InputRadioButtonsFieldConfig, InputSelectFieldConfig, InputSliderFieldConfig, InputSwitchFieldConfig, InputTextFieldConfig, InputTextareaFieldConfig } from './fieldConfigs.js';
+/** Shared field metadata from Statamic (all field types). */
+export type FormBuilderFieldBase = {
+    handle: string;
+    display: string | null;
+    width: number;
+    instructions: string | null;
+    /** UI-layer specific style hints (typed by the UI package). */
+    styleConfig?: Record<string, unknown>;
+    if?: Record<string, string> | null;
+    unless?: Record<string, string> | null;
+    prefix?: string;
+};
+export type FormBuilderField = (FormBuilderFieldBase & {
+    type: 'input_text';
+    config: InputTextFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_textarea';
+    config: InputTextareaFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_email';
+    config: InputEmailFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_phone';
+    config: InputPhoneFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_number';
+    config: InputNumberFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_select';
+    config: InputSelectFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_date';
+    config: InputDateFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_daterange';
+    config: InputDateFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_slider';
+    config: InputSliderFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_checkboxes';
+    config: InputCheckboxesFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_radio_buttons';
+    config: InputRadioButtonsFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_switch';
+    config: InputSwitchFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'input_file_upload';
+    config: InputFileUploadFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'display_text';
+    config: DisplayTextFieldConfig;
+}) | (FormBuilderFieldBase & {
+    type: 'spacer';
+    config: BaseFieldConfig;
+});
+export type FormBuilderFieldType = FormBuilderField['type'];
+export type InputFormBuilderField = Exclude<FormBuilderField, {
+    type: 'display_text' | 'spacer';
+}>;
+export declare function isDisplayOrSpacerField(field: FormBuilderField): field is Extract<FormBuilderField, {
+    type: 'display_text' | 'spacer';
+}>;
+export declare function isInputField(field: FormBuilderField): field is InputFormBuilderField;
+export declare function isFileUploadField(field: FormBuilderField): field is Extract<FormBuilderField, {
+    type: 'input_file_upload';
+}>;
+export declare function isMultiValueField(field: FormBuilderField): boolean;
+export type InputRules = {
+    required?: boolean;
+    min?: number;
+    max?: number;
+    maxlength?: number;
+    pattern?: string;
+    type?: string;
+    value?: string;
+};
+export type DefaultInputField = {
+    name: string;
+    id: string;
+    ariaLabel: string;
+    rules: InputRules;
+    disabled?: boolean;
+    autofocus?: boolean;
+    onBlur?: (event: FocusEvent) => void;
+    onChange?: (event: Event) => void;
+};
+/** @deprecated Use DefaultInputField */
+export type defaultInputField = DefaultInputField;
+export type FormBuilderConfiguration = {
+    handle: string;
+    honeypot: string | null;
+    rules: {
+        [key: string]: string;
+    };
+} & ({
+    sections: Array<{
+        display: string | null;
+        instructions: string | null;
+        fields: Array<FormBuilderField>;
+    }>;
+} | {
+    fields: Array<FormBuilderField>;
+});
+export type FormBuilderTexts = {
+    send_button_text: string;
+    message_loading: string;
+    message_success: string;
+    message_error: string;
+};
+export type FormBuilderRequestState = 'not_submitted' | 'loading' | 'success' | 'error';
+export type FormBuilderSubmitter = (args: {
+    form: FormBuilderConfiguration;
+    state: Record<string, unknown>;
+    serverUrl: string;
+    locale: string;
+}) => Promise<unknown>;
+export type UseFormBuilderOptions = {
+    serverUrl?: string;
+    submitter?: FormBuilderSubmitter;
+};
+export { formBuilderStateKey } from './injectionKeys.js';

package/dist/runtime/types.js

@@ -0,0 +1,22 @@
+export function isDisplayOrSpacerField(field) {
+  return field.type === "display_text" || field.type === "spacer";
+}
+export function isInputField(field) {
+  return !isDisplayOrSpacerField(field);
+}
+export function isFileUploadField(field) {
+  return field.type === "input_file_upload";
+}
+export function isMultiValueField(field) {
+  if (field.type === "input_checkboxes" || field.type === "input_radio_buttons") {
+    return true;
+  }
+  if (field.type === "input_select") {
+    return field.config.multiple === true;
+  }
+  if (field.type === "input_file_upload") {
+    return (field.config.max_files ?? 1) > 1;
+  }
+  return false;
+}
+export { formBuilderStateKey } from "./injectionKeys.js";

package/dist/runtime/utils/graphqlFragment.d.ts

@@ -0,0 +1,5 @@
+/**
+ * GraphQL fragment for the Statamic form builder page component.
+ * Copy into your app's GraphQL documents / codegen sources.
+ */
+export declare const COMPONENT_FORM_BUILDER_FRAGMENT = "\n  fragment ComponentFormBuilder on Fieldset_ComponentFormBuilder {\n    __typename\n    id\n    type\n    send_button_text\n    form {\n      __typename\n      handle\n      honeypot\n      rules\n      title\n      sections {\n        __typename\n        display\n        instructions\n        fields {\n          __typename\n          config\n          display\n          handle\n          instructions\n          type\n          width\n          if\n          unless\n        }\n      }\n    }\n    message_loading\n    message_success\n    message_error\n  }\n";