eddev 2.1.0 → 2.1.1

package/dist/app/lib/integrations/gravityforms/field-types.js

@@ -0,0 +1,449 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// export type GFFieldTypes = {
+//   text: string
+//   textarea: string
+//   select: string
+//   number: number
+//   checkbox: string[]
+//   radio: string
+//   multi_choice: string | string[]
+//   image_choice: string | string[]
+//   name: GFNameData
+//   date: string
+//   time: string
+//   phone: string
+//   address: GFAddressData
+//   website: string
+//   email: string
+//   fileupload: File | FileList | File[]
+//   multiselect: string[]
+//   consent: boolean
+//   captcha: any
+//   html: void
+//   section: void
+// }
+function defineType(spec) {
+    return spec;
+}
+export const GF_BUILTIN_FIELDS = {
+    text: defineType({
+        getInitialValue: () => "",
+        getOptions: (field) => ({
+            placeholder: field.placeholder || "",
+            size: field.size || "large",
+        }),
+        defaultComponent(props) {
+            const id = useId();
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsx("input", { id: id, type: "text", required: props.isRequired, name: `field_${props.id}`, disabled: props.disabled, placeholder: props.options?.placeholder || "", value: props.value || "", onChange: (e) => props.set(e.currentTarget.value) }) }));
+        },
+    }),
+    textarea: defineType({
+        getInitialValue: () => "",
+        getOptions: (field) => ({
+            placeholder: field.placeholder || "",
+            size: field.size || "large",
+        }),
+        defaultComponent(props) {
+            const id = useId();
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsx("textarea", { id: id, required: props.isRequired, name: `field_${props.id}`, disabled: props.disabled, placeholder: props.options?.placeholder || "", value: props.value || "", onChange: (e) => props.set(e.currentTarget.value), rows: props.size === "small" ? 2 : props.size === "medium" ? 4 : 8 }) }));
+        },
+    }),
+    select: defineType({
+        getInitialValue: (field) => field.choices.find((choice) => choice.isSelected)?.value,
+        getOptions: (field) => ({
+            choices: field.choices || [],
+            placeholder: field.placeholder || "",
+        }),
+        defaultComponent(props) {
+            const id = useId();
+            const isPlaceholder = props.value === "" || props.value == null || props.value === undefined;
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsxs("select", { id: id, name: `field_${props.id}`, required: props.isRequired, disabled: props.disabled, value: props.value || "", onChange: (e) => props.set(e.target.value), "data-is-placeholder": isPlaceholder ? "" : undefined, children: [isPlaceholder && _jsx("option", { value: "", children: props.placeholder ?? "" }), props.choices.map((choice, index) => (_jsx("option", { value: choice.value, children: choice.text }, index)))] }) }));
+        },
+    }),
+    number: defineType({
+        getInitialValue: (field) => undefined,
+        getOptions: (field) => ({
+            rangeMin: field.rangeMin ? Number(field.rangeMin) : undefined,
+            rangeMax: field.rangeMax ? Number(field.rangeMax) : undefined,
+            numberFormat: field.numberFormat || "decimal_dot",
+            placeholder: field.placeholder || "",
+            size: field.size || "large",
+        }),
+        defaultComponent(props) {
+            const id = useId();
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsx("input", { id: id, type: "number", required: props.isRequired, name: `field_${props.id}`, disabled: props.disabled, placeholder: props.placeholder || "", value: props.value !== undefined && props.value !== null ? props.value : "", min: props.rangeMin, max: props.rangeMax, onChange: (e) => {
+                        const number = parseFloat(e.currentTarget.value);
+                        props.set(String(number) === e.currentTarget.value ? number : e.currentTarget.value);
+                    } }) }));
+        },
+    }),
+    checkbox: defineType({
+        getInitialValue: (field) => field.choices.filter((choice) => choice.isSelected).map((choice) => choice.value) ?? [],
+        getOptions: (field) => ({
+            choices: field.choices || [],
+            enableOtherChoice: field.enableOtherChoice || false,
+            columns: field.columns ? Number(field.columns) : undefined,
+        }),
+        appendData(data, field, value, key) {
+            field.choices.forEach((choice, i) => {
+                let fieldKey = field.inputs[i].id;
+                data.append(`input_${fieldKey.toString()}`, value?.includes(choice.value) ? choice.value : "");
+            });
+        },
+        defaultComponent(props) {
+            return (_jsx(props.Wrapper, { children: _jsx("ul", { children: props.choices.map((choice, index) => (_jsx("li", { children: _jsxs("label", { children: [_jsx("input", { type: "checkbox", name: `field_${props.id}[]`, value: choice.value, disabled: props.disabled, checked: props.value?.includes(choice.value), onChange: (e) => {
+                                        if (e.target.checked) {
+                                            props.set([...(props.value || []), choice.value]);
+                                        }
+                                        else {
+                                            props.set((props.value || []).filter((v) => v !== choice.value));
+                                        }
+                                    } }), choice.text] }) }, index))) }) }));
+        },
+    }),
+    radio: defineType({
+        getInitialValue: (field) => field.choices.filter((choice) => choice.isSelected).map((choice) => choice.value) ?? [],
+        getOptions: (field) => ({
+            choices: field.choices || [],
+            enableOtherChoice: field.enableOtherChoice || false,
+            columns: field.columns ? Number(field.columns) : undefined,
+        }),
+        defaultComponent(props) {
+            return (_jsx(props.Wrapper, { children: _jsx("ul", { children: props.choices.map((choice, index) => (_jsx("li", { children: _jsxs("label", { children: [_jsx("input", { type: "radio", name: `field_${props.id}`, value: choice.value, disabled: props.disabled, checked: props.value === choice.value, onChange: (e) => {
+                                        props.set(choice.value);
+                                    } }), _jsx("span", { children: choice.text })] }) }, index))) }) }));
+        },
+    }),
+    multi_choice: defineType({
+        getInitialValue: () => undefined,
+        getOptions(field) {
+            return {
+                choices: field.choices || [],
+                placeholder: field.placeholder || "",
+            };
+        },
+        appendData(data, field, value, key) {
+            if (field.choiceLimit !== "single") {
+                field.choices.forEach((choice, i) => {
+                    let fieldKey = field.inputs[i].id;
+                    data.append(`input_${fieldKey}`, value?.includes(choice.value) ? choice.value : "");
+                });
+            }
+            else {
+                data.append(key, value ? String(value) : "");
+            }
+        },
+    }),
+    image_choice: defineType({
+        getInitialValue: () => undefined,
+        getOptions(field) {
+            return {
+                choices: field.choices || [],
+                placeholder: field.placeholder || "",
+            };
+        },
+        appendData(data, field, value, key) {
+            if (field.choiceLimit !== "single") {
+                field.choices.forEach((choice, i) => {
+                    let fieldKey = field.inputs[i].id;
+                    data.append(`input_${fieldKey}`, value?.includes(choice.value) ? choice.value : "");
+                });
+            }
+            else {
+                data.append(key, value ? String(value) : "");
+            }
+        },
+    }),
+    name: defineType({
+        getInitialValue: () => ({
+            prefix: "",
+            first: "",
+            middle: "",
+            last: "",
+            suffix: "",
+        }),
+        getOptions(field) {
+            function subfield(id, name) {
+                const item = field.inputs.find((input) => String(input.id).endsWith("." + id));
+                return {
+                    name: name,
+                    visible: !item?.isHidden,
+                    placeholder: item?.placeholder,
+                    label: item?.customLabel ?? item?.label,
+                    autocomplete: item?.autocompleteAttribute,
+                    choices: item?.choices,
+                };
+            }
+            return {
+                subfields: {
+                    prefix: subfield(2, "prefix"),
+                    first: subfield(3, "first"),
+                    middle: subfield(4, "middle"),
+                    last: subfield(6, "last"),
+                    suffix: subfield(8, "suffix"),
+                },
+            };
+        },
+        appendData(data, field, value, key) {
+            data.append(`${key}_2`, value?.prefix ?? "");
+            data.append(`${key}_3`, value?.first ?? "");
+            data.append(`${key}_4`, value?.middle ?? "");
+            data.append(`${key}_6`, value?.last ?? "");
+            data.append(`${key}_8`, value?.suffix ?? "");
+        },
+        defaultComponent(props) {
+            const id = useId();
+            const fields = [];
+            for (const subfield of Object.values(props.subfields)) {
+                if (!subfield.visible)
+                    continue;
+                fields.push(_jsx(props.formComponents.SubFieldWrapper, { label: subfield.label, labelId: id + subfield.name, children: subfield.choices?.length ? (_jsxs("select", { id: id + subfield.name, name: `field_${props.id}_${subfield.name}`, disabled: props.disabled, value: props.value?.[subfield.name] || "", onChange: (e) => {
+                            props.set({
+                                ...(props.value || {}),
+                                [subfield.name]: e.target.value,
+                            });
+                        }, children: [_jsx("option", { value: "", children: subfield.placeholder }), subfield.choices.map((choice, index) => (_jsx("option", { value: choice.value, children: choice.text }, index)))] })) : (_jsx("input", { id: id + subfield.name, type: "text", name: `field_${props.id}_${subfield.name}`, disabled: props.disabled, placeholder: subfield.placeholder, value: props.value?.[subfield.name] || "", autoComplete: subfield.autocomplete, onChange: (e) => {
+                            props.set({
+                                ...(props.value || {}),
+                                [subfield.name]: e.currentTarget.value,
+                            });
+                        } }, subfield.name)) }, subfield.name));
+            }
+            return _jsx(props.formComponents.SubFieldRow, { children: fields });
+        },
+    }),
+    date: defineType({
+        getInitialValue: () => undefined,
+        getOptions() {
+            return {};
+        },
+        defaultComponent(props) {
+            const id = useId();
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsx("input", { type: "date", id: id, name: `field_${props.id}`, required: props.isRequired, disabled: props.disabled, placeholder: props.options?.placeholder || "", value: props.value || "", onChange: (e) => props.set(e.currentTarget.value) }) }));
+        },
+    }),
+    time: defineType({
+        getInitialValue: () => undefined,
+        getOptions() {
+            return {};
+        },
+        defaultComponent(props) {
+            const id = useId();
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsx("input", { type: "time", id: id, name: `field_${props.id}`, required: props.isRequired, disabled: props.disabled, placeholder: props.options?.placeholder || "", value: props.value || "", onChange: (e) => props.set(e.currentTarget.value) }) }));
+        },
+    }),
+    phone: defineType({
+        getInitialValue: () => undefined,
+        getOptions() {
+            return {};
+        },
+        defaultComponent(props) {
+            const id = useId();
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsx("input", { type: "tel", id: id, name: `field_${props.id}`, required: props.isRequired, disabled: props.disabled, placeholder: props.options?.placeholder || "", value: props.value || "", onChange: (e) => props.set(e.currentTarget.value) }) }));
+        },
+    }),
+    address: defineType({
+        getInitialValue: () => ({
+            address1: "",
+            address2: "",
+            city: "",
+            state: "",
+            zip: "",
+            country: "",
+        }),
+        getOptions(field) {
+            function subfield(id, name) {
+                const item = field.inputs.find((input) => String(input.id).endsWith("." + id));
+                return {
+                    name: name,
+                    visible: !item?.isHidden,
+                    placeholder: item?.placeholder,
+                    label: item?.customLabel ?? item?.label,
+                    autocomplete: item?.autocompleteAttribute,
+                };
+            }
+            return {
+                addressType: field.addressType,
+                defaultCountry: field.defaultCountry,
+                defaultState: field.defaultState,
+                subfields: {
+                    address1: subfield(1, "address1"),
+                    address2: subfield(2, "address2"),
+                    city: subfield(3, "city"),
+                    state: subfield(4, "state"),
+                    zip: subfield(5, "zip"),
+                    country: subfield(6, "country"),
+                },
+            };
+        },
+        appendData(data, field, value, key) {
+            data.append(`${key}_1`, value?.address1 ?? "");
+            data.append(`${key}_2`, value?.address2 ?? "");
+            data.append(`${key}_3`, value?.city ?? "");
+            data.append(`${key}_4`, value?.state ?? "");
+            data.append(`${key}_5`, value?.zip ?? "");
+            data.append(`${key}_6`, value?.country ?? "");
+        },
+        defaultComponent(props) {
+            const id = useId();
+            const fields = {};
+            for (const subfield of Object.values(props.subfields)) {
+                if (!subfield.visible)
+                    continue;
+                fields[subfield.name] = (_jsx(props.formComponents.SubFieldWrapper, { label: subfield.label, labelId: id + subfield.name, children: _jsx("input", { id: id + subfield.name, type: "text", name: `field_${props.id}_${subfield.name}`, disabled: props.disabled, placeholder: subfield.placeholder, autoComplete: subfield.autocomplete, value: props.value?.[subfield.name] || "", "data-address-component": subfield.name, onChange: (e) => {
+                            props.set({
+                                ...(props.value || {}),
+                                [subfield.name]: e.currentTarget.value,
+                            });
+                        } }) }, subfield.name));
+            }
+            const rows = [[fields.address1], [fields.address2], [fields.city, fields.zip], [fields.state], [fields.country]];
+            return (_jsx(props.Wrapper, { children: _jsx(props.formComponents.SubFieldStack, { children: rows
+                        .map((row) => row.filter(Boolean))
+                        .filter(Boolean)
+                        .map((row) => (_jsx(props.formComponents.SubFieldRow, { children: row }))) }) }));
+        },
+    }),
+    website: defineType({
+        getInitialValue: () => undefined,
+        getOptions() {
+            return {};
+        },
+        defaultComponent(props) {
+            const id = useId();
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsx("input", { id: id, type: "url", name: `field_${props.id}`, required: props.isRequired, disabled: props.disabled, placeholder: props.options?.placeholder || "", value: props.value || "", onChange: (e) => props.set(e.currentTarget.value) }) }));
+        },
+    }),
+    email: defineType({
+        getInitialValue: (field) => undefined,
+        getOptions: (field) => ({
+            confirmation: field.emailConfirmEnabled
+                ? {
+                    enabled: true,
+                    emailLabel: field.inputs?.[0]?.label || "Enter Email",
+                    emailPlaceholder: field.inputs?.[0]?.placeholder || "Enter Email",
+                    confirmLabel: field.inputs?.[1]?.label || "Enter Email",
+                    confirmPlaceholder: field.inputs?.[1]?.placeholder || "Enter Email",
+                    labelPlacement: field.subLabelPlacement || "above",
+                }
+                : { enabled: false },
+            placeholder: field.placeholder || "",
+            size: field.size || "large",
+        }),
+        appendData(data, field, value, key) {
+            if (field.emailConfirmEnabled) {
+                data.append(key, typeof value === "object" ? value.email : value || "");
+                data.append(key + "_2", typeof value === "object" ? value.confirmEmail : value || "");
+            }
+            else {
+                data.append(key, typeof value === "object" ? value.email : value || "");
+            }
+        },
+        defaultComponent(props) {
+            const id = useId();
+            if (props.confirmation.enabled) {
+                const value = typeof props.value === "object" ? props.value : { email: props.value || "", confirmEmail: "" };
+                return (_jsx(props.Wrapper, { children: _jsxs(props.formComponents.SubFieldRow, { children: [_jsx(props.formComponents.SubFieldWrapper, { label: props.confirmation.emailLabel || "Email", labelId: id + "_email", children: _jsx("input", { type: "email", id: id + "_email", required: props.isRequired, name: `field_${props.id}_email`, disabled: props.disabled, placeholder: props.confirmation.emailPlaceholder || "", value: typeof props.value === "object" ? props.value.email : props.value || "", onChange: (e) => {
+                                        props.set({
+                                            email: e.currentTarget.value,
+                                            confirmEmail: value.confirmEmail,
+                                        });
+                                    } }) }), _jsx(props.formComponents.SubFieldWrapper, { label: props.confirmation.confirmLabel || "Confirm Email", labelId: id + "_confirm", children: _jsx("input", { type: "email", id: id + "_confirm", required: props.isRequired, name: `field_${props.id}_email`, disabled: props.disabled, placeholder: props.confirmation.confirmPlaceholder || "", value: typeof props.value === "object" ? props.value.confirmEmail : props.value || "", onChange: (e) => {
+                                        props.set({
+                                            email: value.email,
+                                            confirmEmail: e.currentTarget.value,
+                                        });
+                                    } }) })] }) }));
+            }
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsx("input", { type: "email", id: id, name: `field_${props.id}`, required: props.isRequired, disabled: props.disabled, placeholder: props.options?.placeholder || "", value: typeof props.value === "object" ? props.value.email : props.value || "", onChange: (e) => props.set(e.currentTarget.value) }) }));
+        },
+    }),
+    fileupload: defineType({
+        getInitialValue: () => undefined,
+        getOptions: (field) => ({
+            allowedExtensions: field.allowedExtensions?.split(/\s*,\s*/g) ?? [],
+            maxFileSize: field.maxFileSize ? parseFloat(field.maxFileSize) : undefined,
+            multiple: field.multipleFiles ? true : false,
+            maxFiles: field.maxFiles ? parseInt(field.maxFiles) : undefined,
+        }),
+        appendData(data, field, value, key) {
+            const keyName = field.maxFiles > 1 || field.multipleFiles ? `${key}[]` : key;
+            if (Array.isArray(value)) {
+                value.forEach((file) => {
+                    data.append(keyName, file);
+                });
+            }
+            else if (value instanceof FileList) {
+                for (let i = 0; i < value.length; i++) {
+                    data.append(keyName, value.item(i));
+                }
+            }
+            else if (value) {
+                data.append(keyName, value);
+            }
+        },
+        defaultComponent(props) {
+            const id = useId();
+            return (_jsx(props.Wrapper, { labelId: id, children: _jsx("input", { type: "file", id: id, name: `field_${props.id}${props.multiple ? "[]" : ""}`, required: props.isRequired, disabled: props.disabled, multiple: props.multiple, accept: props.allowedExtensions?.map((ext) => `.${ext}`).join(","), onChange: (e) => {
+                        if (props.multiple) {
+                            props.set(e.currentTarget.files ?? undefined);
+                        }
+                        else {
+                            props.set(e.currentTarget.files ? e.currentTarget.files[0] : undefined);
+                        }
+                    } }) }));
+        },
+    }),
+    multiselect: defineType({
+        getInitialValue: () => undefined,
+        getOptions() {
+            return {};
+        },
+    }),
+    consent: defineType({
+        getInitialValue: () => undefined,
+        getOptions(field) {
+            const text = field.consentText || field.description || "";
+            return {
+                checkboxLabel: field.checkboxLabel || "",
+                description: text,
+            };
+        },
+        appendData(data, field, value, key) {
+            data.append(`${key}.1`, value ? "1" : "");
+            data.append(`${key}.2`, field?.consentText ?? field?.checkboxLabel ?? "");
+        },
+        defaultComponent(props) {
+            const id = useId();
+            return (_jsx(props.Wrapper, { descriptionElement: null, showLabel: false, children: _jsxs("div", { className: "edgf-consent-field", children: [_jsx("input", { type: "checkbox", name: `field_${props.id}`, required: props.isRequired, disabled: props.disabled, checked: props.value || false, onChange: (e) => props.set(e.target.checked), id: id }), _jsx("label", { htmlFor: id, className: "edgf-consent-label", dangerouslySetInnerHTML: { __html: props.checkboxLabel || "I Agree" } }), !!props.description && (_jsx("div", { className: "edgf-consent-agreement", dangerouslySetInnerHTML: { __html: props.description || "" } }))] }) }));
+        },
+    }),
+    captcha: defineType({
+        getInitialValue: () => undefined,
+        getOptions() {
+            return {};
+        },
+        appendData(data, field, value, key) {
+            data.append("g-recaptcha-response", value);
+        },
+    }),
+    html: defineType({
+        getInitialValue: () => undefined,
+        getOptions() {
+            return {};
+        },
+        defaultComponent(props) {
+            return _jsx("div", { dangerouslySetInnerHTML: { __html: props.content || "" } });
+        },
+    }),
+    section: defineType({
+        getInitialValue: () => undefined,
+        getOptions() {
+            return {};
+        },
+    }),
+};
+export function getBuiltinType(type) {
+    return GF_BUILTIN_FIELDS[type];
+}

package/dist/app/lib/integrations/gravityforms/index.d.ts

@@ -1,3 +1,5 @@
 export * from "./useGravityForm.js";
 export * from "./types.js";
+export * from "./createGravityFormComponent.js";
+export * from "./field-types.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/app/lib/integrations/gravityforms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/integrations/gravityforms/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app/lib/integrations/gravityforms/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,iCAAiC,CAAA;AAC/C,cAAc,kBAAkB,CAAA"}

package/dist/app/lib/integrations/gravityforms/index.js

@@ -1,2 +1,4 @@
 export * from "./useGravityForm.js";
 export * from "./types.js";
+export * from "./createGravityFormComponent.js";
+export * from "./field-types.js";

package/dist/app/lib/integrations/gravityforms/types.d.ts

@@ -1,5 +1,7 @@
-import type { ComponentType } from "react";
+import type { ComponentProps, ComponentType, ReactNode } from "react";
 import type { GravityFormsFieldState } from "./useGravityForm.js";
+import { FormComponents } from "./createGravityFormComponent.js";
+import { GFBuiltins, GFFieldTypeName } from "./field-types.js";
 export type GravityFormsField = {
     type: string;
     id: number;
@@ -7,8 +9,12 @@ export type GravityFormsField = {
     isRequired: boolean;
     description: string;
     showLabel: boolean;
-    visibility: "hidden" | "visible";
+    visibility: "hidden" | "visible" | "administrative";
+    labelPlacement?: "hidden_label" | "above" | "below" | "left" | "right";
+    descriptionPlacement?: "above" | "below";
+    layoutGridColumnSpan: number;
     disabled: boolean;
+    className?: string;
 } & {
     [key: string]: any;
 };
@@ -17,129 +23,42 @@ export type GravityFormData = {
     fields: GravityFormsField[];
     title: string;
     description?: string;
+    descriptionPlacement?: "above" | "below";
     revisionId: number;
-    button: {
-        text: string;
+    pagination?: {
+        pages: string[];
+        type: string;
+        progressbar_complete_text?: string;
     };
-};
-export type GFTextOptions = {
-    placeholder: string;
-    size: "small" | "medium" | "large";
-};
-export type GFGenericTextOptions = {
-    placeholder: string;
-};
-export type GFSelectOptions = {
-    placeholder: string;
-    choices: {
+    button: {
         text: string;
-        value: string;
-    }[];
-};
-export type GFAddressData = {
-    address1?: string;
-    address2?: string;
-    city?: string;
-    state?: string;
-    zip?: string;
-    country?: string;
-};
-export type GFAddressOptions = {
-    addressType: "international" | "us";
-    defaultCountry: string;
-    defaultState: string;
-    subfields: {
-        [K in keyof GFAddressData]: {
-            name: K;
-            visible: boolean;
-            placeholder: string;
-            label: string;
-            autocomplete: string;
-        };
     };
 };
-export type GFNameOptions = {
-    subfields: {
-        [K in keyof GFNameData]: {
-            name: K;
-            visible: boolean;
-            placeholder: string;
-            label: string;
-            autocomplete: string;
-            choices?: {
-                text: string;
-                value: string;
-            }[];
-        };
-    };
-};
-export type GFFileUploadOptions = {
-    allowedExtensions: string[];
-    multiple: boolean;
-    maxFileSize?: number;
-    maxFiles?: number;
-};
-export type GFNumberOptions = {
-    placeholder: string;
-    minRange: number;
-    maxRange: number;
-};
-export type GFNameData = {
-    prefix?: string;
-    first?: string;
-    middle?: string;
-    last?: string;
-    suffix?: string;
-};
-export type GFConsentOptions = {
-    checkboxLabel: string;
-};
 export type GFFieldTypes = {
-    text: string;
-    textarea: string;
-    select: string;
-    number: number;
-    checkbox: string[];
-    radio: string;
-    multi_choice: string | string[];
-    image_choice: string | string[];
-    name: GFNameData;
-    date: string;
-    time: string;
-    phone: string;
-    address: GFAddressData;
-    website: string;
-    email: string;
-    fileupload: File | FileList | File[];
-    multiselect: string[];
-    consent: boolean;
-    captcha: any;
-    html: void;
-    section: void;
+    [K in keyof GFBuiltins]: GFBuiltins[K] extends GFFieldTypeSpec<infer TValue, any> ? TValue : never;
 };
 export type GFFieldOptions = {
-    text: GFTextOptions;
-    textarea: GFTextOptions;
-    select: GFSelectOptions;
-    number: GFNumberOptions;
-    checkbox: GFSelectOptions;
-    radio: GFSelectOptions;
-    multi_choice: GFSelectOptions;
-    image_choice: GFSelectOptions;
-    name: GFNameOptions;
-    date: {};
-    time: {};
-    phone: GFGenericTextOptions;
-    address: GFAddressOptions;
-    website: GFGenericTextOptions;
-    email: GFGenericTextOptions;
-    fileupload: GFFileUploadOptions;
-    multiselect: GFSelectOptions;
-    consent: GFConsentOptions;
+    [K in keyof GFBuiltins]: GFBuiltins[K] extends GFFieldTypeSpec<any, infer TOptions> ? TOptions : never;
+};
+export type GFFieldProps<TData, TOptions> = GravityFormsFieldState<TData, TOptions> & {
+    formComponents: FormComponents;
+    Wrapper: (props: Partial<ComponentProps<FormComponents["FieldWrapper"]>> & {
+        labelId?: string;
+    }) => ReactNode;
+};
+export type GFFieldComponent<TData, TOptions> = (props: GFFieldProps<TData, TOptions>) => ReactNode;
+export type GFFieldTypeSpec<TData, TOptions> = {
+    getInitialValue(field: GravityFormsField): TData | undefined;
+    getOptions(field: GravityFormsField): TOptions;
+    defaultComponent?: NoInfer<GFFieldComponent<TData, TOptions>>;
+    appendData?(formData: FormData, field: GravityFormsField, value: TData, key: string): void;
 };
-export type GFFieldComponentProps<K extends keyof GFFieldTypes | (string & {})> = GravityFormsFieldState<GFValue<K>, K extends keyof GFFieldOptions ? GFFieldOptions[K] : {}>;
-export type GFValue<T extends keyof GFFieldTypes | (string & {})> = T extends keyof GFFieldTypes ? GFFieldTypes[T] : any;
+export type GFFieldComponentProps<K extends GFFieldTypeName> = GravityFormsFieldState<GFValue<K>, GFOptions<K>>;
+/** Resolves the data type of a Gravity Form field type */
+export type GFValue<TypeName extends GFFieldTypeName> = TypeName extends keyof GFFieldTypes ? GFFieldTypes[TypeName] : any;
+/** Resolves the options of a Gravity Form field type */
+export type GFOptions<TypeName extends GFFieldTypeName> = TypeName extends keyof GFFieldOptions ? GFFieldOptions[TypeName] : {};
 export type GFFieldComponentSet = {
-    [K in keyof GFFieldTypes]?: ComponentType<GravityFormsFieldState<GFValue<K>, K extends keyof GFFieldOptions ? GFFieldOptions[K] : {}>>;
+    [TypeName in GFFieldTypeName]?: ComponentType<GravityFormsFieldState<GFValue<TypeName>, TypeName extends keyof GFFieldOptions ? GFFieldOptions[TypeName] : {}>>;
 };
 //# sourceMappingURL=types.d.ts.map