@forms.expert/sdk 0.4.7 → 0.4.9

package/dist/react/index.d.cts

@@ -102,7 +102,7 @@ interface FormStyling {
     buttonColor?: string;
     buttonText?: string;
     buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
-    buttonAlign?: 'left' | 'center' | 'right';
+    buttonAlign?: 'left' | 'center' | 'right' | 'inline';
     buttonSize?: 'small' | 'medium' | 'large';
     buttonPaddingX?: number;
     buttonPaddingY?: number;
@@ -111,7 +111,7 @@ interface FormStyling {
     buttonFontSize?: number;
     buttonIcon?: string;
     buttonIconPosition?: 'left' | 'right';
-    fieldSpacing?: 'compact' | 'normal' | 'relaxed' | 'spacious';
+    fieldSpacing?: 'none' | 'compact' | 'normal' | 'relaxed' | 'spacious';
     formPadding?: 'none' | 'compact' | 'normal' | 'relaxed' | 'spacious';
     labelSpacing?: 'compact' | 'normal' | 'relaxed';
     placeholderFontSize?: 'small' | 'medium' | 'large';

package/dist/react/index.d.ts

@@ -102,7 +102,7 @@ interface FormStyling {
     buttonColor?: string;
     buttonText?: string;
     buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
-    buttonAlign?: 'left' | 'center' | 'right';
+    buttonAlign?: 'left' | 'center' | 'right' | 'inline';
     buttonSize?: 'small' | 'medium' | 'large';
     buttonPaddingX?: number;
     buttonPaddingY?: number;
@@ -111,7 +111,7 @@ interface FormStyling {
     buttonFontSize?: number;
     buttonIcon?: string;
     buttonIconPosition?: 'left' | 'right';
-    fieldSpacing?: 'compact' | 'normal' | 'relaxed' | 'spacious';
+    fieldSpacing?: 'none' | 'compact' | 'normal' | 'relaxed' | 'spacious';
     formPadding?: 'none' | 'compact' | 'normal' | 'relaxed' | 'spacious';
     labelSpacing?: 'compact' | 'normal' | 'relaxed';
     placeholderFontSize?: 'small' | 'medium' | 'large';

package/dist/react/index.js

@@ -657,6 +657,8 @@ function getPlaceholderFontSize(size) {
 }
 function getFieldSpacing(spacing) {
   switch (spacing) {
+    case "none":
+      return "0";
     case "compact":
       return "0.5rem";
     case "relaxed":
@@ -1058,6 +1060,7 @@ function FormsExpertForm({
         form[data-fe-scope="${formScopeId}"] button[type="submit"]:active:not(:disabled) { filter: brightness(0.85); transform: scale(0.98); }
         form[data-fe-scope="${formScopeId}"] a[href]:hover { filter: brightness(0.9); }
         form[data-fe-scope="${formScopeId}"] a[href]:active { filter: brightness(0.85); }
+        ${styling.buttonAlign === "inline" ? `form[data-fe-scope="${formScopeId}"] .fe-fields-inline > * { margin-bottom: 0 !important; }` : ""}
         form[data-fe-scope="${formScopeId}"] input:not([type="checkbox"]):not([type="radio"]):focus,
         form[data-fe-scope="${formScopeId}"] textarea:focus,
         form[data-fe-scope="${formScopeId}"] select:focus {
@@ -1091,140 +1094,142 @@ function FormsExpertForm({
           marginBottom: "0.5rem",
           color: styling.textColor
         }, children: form.config.hostedConfig?.pageTitle || form.config.name }),
-        groupFieldsIntoRows(fields).map((group, idx) => {
-          if (group.type === "single") {
-            return /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsxs("div", { style: styling.buttonAlign === "inline" ? { display: "flex", gap: "0.75rem", flexWrap: "wrap" } : void 0, children: [
+          /* @__PURE__ */ jsx2("div", { className: styling.buttonAlign === "inline" ? "fe-fields-inline" : void 0, style: styling.buttonAlign === "inline" ? { flex: "1 1 0", minWidth: "180px" } : void 0, children: groupFieldsIntoRows(fields).map((group, idx) => {
+            if (group.type === "single") {
+              return /* @__PURE__ */ jsx2(
+                FormFieldInput,
+                {
+                  field: group.field,
+                  value: form.values[group.field.name],
+                  error: form.errors[group.field.name],
+                  onChange: handleChange,
+                  onValueChange: (name, val) => form.setValue(name, val),
+                  styling,
+                  fieldSpacing,
+                  labelSpacing,
+                  phFontSize
+                },
+                group.field.name
+              );
+            }
+            return /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: "0.75rem", flexWrap: "wrap", marginBottom: fieldSpacing }, children: group.fields.map((f) => /* @__PURE__ */ jsx2("div", { style: { flex: getWidthPercent(f.width) ? `0 0 calc(${getWidthPercent(f.width)} - 0.75rem)` : "1 1 0", minWidth: "180px" }, children: /* @__PURE__ */ jsx2(
               FormFieldInput,
               {
-                field: group.field,
-                value: form.values[group.field.name],
-                error: form.errors[group.field.name],
+                field: f,
+                value: form.values[f.name],
+                error: form.errors[f.name],
                 onChange: handleChange,
                 onValueChange: (name, val) => form.setValue(name, val),
                 styling,
-                fieldSpacing,
+                fieldSpacing: "0",
                 labelSpacing,
                 phFontSize
-              },
-              group.field.name
-            );
-          }
-          return /* @__PURE__ */ jsx2("div", { style: { display: "flex", gap: "0.75rem", flexWrap: "wrap", marginBottom: fieldSpacing }, children: group.fields.map((f) => /* @__PURE__ */ jsx2("div", { style: { flex: getWidthPercent(f.width) ? `0 0 calc(${getWidthPercent(f.width)} - 0.75rem)` : "1 1 0", minWidth: "180px" }, children: /* @__PURE__ */ jsx2(
-            FormFieldInput,
-            {
-              field: f,
-              value: form.values[f.name],
-              error: form.errors[f.name],
-              onChange: handleChange,
-              onValueChange: (name, val) => form.setValue(name, val),
-              styling,
-              fieldSpacing: "0",
-              labelSpacing,
-              phFontSize
-            }
-          ) }, f.name)) }, `row-${idx}`);
-        }),
-        form.honeypotEnabled && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", left: "-9999px", opacity: 0, height: 0, overflow: "hidden" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx2("input", { type: "text", name: "_hp", tabIndex: -1, autoComplete: "off" }) }),
-        form.requiresCaptcha && form.captchaProvider !== "recaptcha" && /* @__PURE__ */ jsx2("div", { ref: captchaContainerRef, style: { marginTop: "1rem" } }),
-        (() => {
-          const btnSizeMap = {
-            small: { px: "0.75rem", py: "0.375rem", fs: "0.875rem" },
-            medium: { px: "1.25rem", py: "0.625rem", fs: "1rem" },
-            large: { px: "1.75rem", py: "0.875rem", fs: "1.125rem" }
-          };
-          const btnSize = btnSizeMap[styling.buttonSize || "medium"];
-          const btnPx = styling.buttonPaddingX != null ? `${styling.buttonPaddingX}px` : btnSize.px;
-          const btnPy = styling.buttonPaddingY != null ? `${styling.buttonPaddingY}px` : btnSize.py;
-          const btnFs = styling.buttonFontSize != null ? `${styling.buttonFontSize}px` : btnSize.fs;
-          const btnBg = styling.buttonGradient || (styling.buttonStyle === "filled" ? btnBgColor : "transparent");
-          const sec = styling.secondaryButton;
-          const secColor = sec?.color || btnBgColor;
-          const secStyle = sec?.enabled ? {
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            padding: `${btnPy} ${btnPx}`,
-            fontWeight: 500,
-            fontSize: sec.fontSize != null ? `${sec.fontSize}px` : btnFs,
-            fontFamily: "inherit",
-            borderRadius: btnRadius,
-            cursor: "pointer",
-            textDecoration: sec.style === "link" ? "underline" : "none",
-            background: sec.style === "filled" ? secColor : "transparent",
-            color: sec.textColor || (sec.style === "filled" ? "#ffffff" : secColor),
-            border: sec.style === "outlined" ? `2px solid ${secColor}` : "none",
-            marginTop: sec.marginTop != null ? `${sec.marginTop}px` : void 0,
-            marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0,
-            maxWidth: "100%",
-            boxSizing: "border-box",
-            flexShrink: 1,
-            minWidth: 0,
-            whiteSpace: "nowrap",
-            overflow: "hidden",
-            textOverflow: "ellipsis"
-          } : void 0;
-          return /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: btnAlign, marginTop: "1rem", gap: "0.5rem", flexWrap: "wrap" }, children: [
-              sec?.enabled && secStyle && sec.position === "left" && /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
-                sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
-                /* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
-                sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
+              }
+            ) }, f.name)) }, `row-${idx}`);
+          }) }),
+          form.honeypotEnabled && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", left: "-9999px", opacity: 0, height: 0, overflow: "hidden" }, "aria-hidden": "true", children: /* @__PURE__ */ jsx2("input", { type: "text", name: "_hp", tabIndex: -1, autoComplete: "off" }) }),
+          form.requiresCaptcha && form.captchaProvider !== "recaptcha" && /* @__PURE__ */ jsx2("div", { ref: captchaContainerRef, style: { marginTop: "1rem" } }),
+          (() => {
+            const btnSizeMap = {
+              small: { px: "0.75rem", py: "0.375rem", fs: "0.875rem" },
+              medium: { px: "1.25rem", py: "0.625rem", fs: "1rem" },
+              large: { px: "1.75rem", py: "0.875rem", fs: "1.125rem" }
+            };
+            const btnSize = btnSizeMap[styling.buttonSize || "medium"];
+            const btnPx = styling.buttonPaddingX != null ? `${styling.buttonPaddingX}px` : btnSize.px;
+            const btnPy = styling.buttonPaddingY != null ? `${styling.buttonPaddingY}px` : btnSize.py;
+            const btnFs = styling.buttonFontSize != null ? `${styling.buttonFontSize}px` : btnSize.fs;
+            const btnBg = styling.buttonGradient || (styling.buttonStyle === "filled" ? btnBgColor : "transparent");
+            const sec = styling.secondaryButton;
+            const secColor = sec?.color || btnBgColor;
+            const secStyle = sec?.enabled ? {
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: `${btnPy} ${btnPx}`,
+              fontWeight: 500,
+              fontSize: sec.fontSize != null ? `${sec.fontSize}px` : btnFs,
+              fontFamily: "inherit",
+              borderRadius: btnRadius,
+              cursor: "pointer",
+              textDecoration: sec.style === "link" ? "underline" : "none",
+              background: sec.style === "filled" ? secColor : "transparent",
+              color: sec.textColor || (sec.style === "filled" ? "#ffffff" : secColor),
+              border: sec.style === "outlined" ? `2px solid ${secColor}` : "none",
+              marginTop: sec.marginTop != null ? `${sec.marginTop}px` : void 0,
+              marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0,
+              maxWidth: "100%",
+              boxSizing: "border-box",
+              flexShrink: 1,
+              minWidth: 0,
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis"
+            } : void 0;
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: btnAlign, marginTop: styling.buttonAlign === "inline" ? void 0 : "1rem", gap: "0.5rem", flexWrap: "wrap", ...styling.buttonAlign === "inline" ? { alignSelf: "flex-end" } : {} }, children: [
+                sec?.enabled && secStyle && sec.position === "left" && /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem" }, children: [
+                  sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
+                  /* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
+                  sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
+                ] }),
+                /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "submit",
+                    disabled: form.isLoading,
+                    className: styling.buttonClassName,
+                    style: {
+                      ...styling.buttonFullWidth ? { width: "100%" } : styling.buttonAlign ? {} : { width: "100%" },
+                      padding: `${btnPy} ${btnPx}`,
+                      fontWeight: 500,
+                      fontSize: btnFs,
+                      fontFamily: "inherit",
+                      borderRadius: btnRadius,
+                      cursor: form.isLoading ? "not-allowed" : "pointer",
+                      opacity: form.isLoading ? 0.5 : 1,
+                      background: btnBg,
+                      color: styling.buttonStyle === "filled" ? btnTextColor || "white" : btnBgColor,
+                      border: styling.buttonStyle === "filled" ? "none" : `2px solid ${btnBgColor}`,
+                      maxWidth: "100%",
+                      boxSizing: "border-box",
+                      flexShrink: 1,
+                      minWidth: 0,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: "0.5rem"
+                    },
+                    children: [
+                      !form.isLoading && styling.buttonIcon && styling.buttonIconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } }),
+                      /* @__PURE__ */ jsx2("span", { children: form.isLoading ? "Submitting..." : resolvedButtonText }),
+                      !form.isLoading && styling.buttonIcon && styling.buttonIconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } })
+                    ]
+                  }
+                ),
+                sec?.enabled && secStyle && sec.position !== "left" && sec.position !== "below" && /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem", marginLeft: "auto" }, children: [
+                  sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
+                  /* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
+                  sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
+                ] })
               ] }),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "submit",
-                  disabled: form.isLoading,
-                  className: styling.buttonClassName,
-                  style: {
-                    ...styling.buttonFullWidth ? { width: "100%" } : styling.buttonAlign ? {} : { width: "100%" },
-                    padding: `${btnPy} ${btnPx}`,
-                    fontWeight: 500,
-                    fontSize: btnFs,
-                    fontFamily: "inherit",
-                    borderRadius: btnRadius,
-                    cursor: form.isLoading ? "not-allowed" : "pointer",
-                    opacity: form.isLoading ? 0.5 : 1,
-                    background: btnBg,
-                    color: styling.buttonStyle === "filled" ? btnTextColor || "white" : btnBgColor,
-                    border: styling.buttonStyle === "filled" ? "none" : `2px solid ${btnBgColor}`,
-                    maxWidth: "100%",
-                    boxSizing: "border-box",
-                    flexShrink: 1,
-                    minWidth: 0,
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    display: "inline-flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    gap: "0.5rem"
-                  },
-                  children: [
-                    !form.isLoading && styling.buttonIcon && styling.buttonIconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } }),
-                    /* @__PURE__ */ jsx2("span", { children: form.isLoading ? "Submitting..." : resolvedButtonText }),
-                    !form.isLoading && styling.buttonIcon && styling.buttonIconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } })
-                  ]
-                }
-              ),
-              sec?.enabled && secStyle && sec.position !== "left" && sec.position !== "below" && /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem", marginLeft: "auto" }, children: [
+              sec?.enabled && secStyle && sec.position === "below" && /* @__PURE__ */ jsx2("div", { style: {
+                display: "flex",
+                justifyContent: sec.align === "center" ? "center" : sec.align === "right" ? "flex-end" : sec.align === "left" ? "flex-start" : btnAlign,
+                marginTop: sec.marginTop != null ? `${sec.marginTop}px` : "0.5rem",
+                marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0
+              }, children: /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem", marginTop: 0, marginBottom: 0 }, children: [
                 sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
                 /* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
                 sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
-              ] })
-            ] }),
-            sec?.enabled && secStyle && sec.position === "below" && /* @__PURE__ */ jsx2("div", { style: {
-              display: "flex",
-              justifyContent: sec.align === "center" ? "center" : sec.align === "right" ? "flex-end" : sec.align === "left" ? "flex-start" : btnAlign,
-              marginTop: sec.marginTop != null ? `${sec.marginTop}px` : "0.5rem",
-              marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0
-            }, children: /* @__PURE__ */ jsxs("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, display: "inline-flex", alignItems: "center", gap: "0.5rem", marginTop: 0, marginBottom: 0 }, children: [
-              sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
-              /* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
-              sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
-            ] }) })
-          ] });
-        })(),
+              ] }) })
+            ] });
+          })()
+        ] }),
         showBranding && /* @__PURE__ */ jsx2(
           "div",
           {