@forms.expert/sdk 0.2.13 → 0.4.0

package/dist/react/index.d.cts

@@ -49,6 +49,8 @@ interface FormField {
         operator: 'eq' | 'neq' | 'contains' | 'gt' | 'lt';
         value: unknown;
     };
+    row?: number;
+    width?: '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 'full';
 }
 /**
  * Secondary button configuration
@@ -66,6 +68,8 @@ interface SecondaryButton {
     color?: string;
     textColor?: string;
     fontSize?: number;
+    icon?: string;
+    iconPosition?: 'left' | 'right';
 }
 /**
  * Form styling configuration
@@ -100,6 +104,8 @@ interface FormStyling {
     buttonGradient?: string;
     buttonFullWidth?: boolean;
     buttonFontSize?: number;
+    buttonIcon?: string;
+    buttonIconPosition?: 'left' | 'right';
     fieldSpacing?: 'compact' | 'normal' | 'relaxed' | 'spacious';
     formPadding?: 'none' | 'compact' | 'normal' | 'relaxed' | 'spacious';
     labelSpacing?: 'compact' | 'normal' | 'relaxed';
@@ -116,6 +122,8 @@ interface FormStyling {
     backgroundOverlay?: number;
     transparentBackground?: boolean;
     secondaryButton?: SecondaryButton;
+    inputBackgroundColor?: string;
+    placeholderColor?: string;
 }
 /**
  * Form schema

package/dist/react/index.d.ts

@@ -49,6 +49,8 @@ interface FormField {
         operator: 'eq' | 'neq' | 'contains' | 'gt' | 'lt';
         value: unknown;
     };
+    row?: number;
+    width?: '1/4' | '1/3' | '1/2' | '2/3' | '3/4' | 'full';
 }
 /**
  * Secondary button configuration
@@ -66,6 +68,8 @@ interface SecondaryButton {
     color?: string;
     textColor?: string;
     fontSize?: number;
+    icon?: string;
+    iconPosition?: 'left' | 'right';
 }
 /**
  * Form styling configuration
@@ -100,6 +104,8 @@ interface FormStyling {
     buttonGradient?: string;
     buttonFullWidth?: boolean;
     buttonFontSize?: number;
+    buttonIcon?: string;
+    buttonIconPosition?: 'left' | 'right';
     fieldSpacing?: 'compact' | 'normal' | 'relaxed' | 'spacious';
     formPadding?: 'none' | 'compact' | 'normal' | 'relaxed' | 'spacious';
     labelSpacing?: 'compact' | 'normal' | 'relaxed';
@@ -116,6 +122,8 @@ interface FormStyling {
     backgroundOverlay?: number;
     transparentBackground?: boolean;
     secondaryButton?: SecondaryButton;
+    inputBackgroundColor?: string;
+    placeholderColor?: string;
 }
 /**
  * Form schema

package/dist/react/index.js

@@ -571,6 +571,49 @@ function getFieldBorderRadius(radius) {
       return "0.375rem";
   }
 }
+function getWidthPercent(width) {
+  switch (width) {
+    case "1/4":
+      return "25%";
+    case "1/3":
+      return "33.333%";
+    case "1/2":
+      return "50%";
+    case "2/3":
+      return "66.666%";
+    case "3/4":
+      return "75%";
+    case "full":
+      return "100%";
+    default:
+      return void 0;
+  }
+}
+function groupFieldsIntoRows(fields) {
+  const result = [];
+  let i = 0;
+  while (i < fields.length) {
+    const field = fields[i];
+    if (field.row != null) {
+      const rowFields = [field];
+      let j = i + 1;
+      while (j < fields.length && fields[j].row === field.row) {
+        rowFields.push(fields[j]);
+        j++;
+      }
+      if (rowFields.length > 1) {
+        result.push({ type: "row", fields: rowFields });
+      } else {
+        result.push({ type: "single", field });
+      }
+      i = j;
+    } else {
+      result.push({ type: "single", field });
+      i++;
+    }
+  }
+  return result;
+}
 function getButtonRadius(radius) {
   switch (radius) {
     case "none":
@@ -1007,7 +1050,7 @@ function FormsExpertForm({
       children: [
         googleFontUrl && /* @__PURE__ */ jsx2("link", { rel: "stylesheet", href: googleFontUrl }),
         /* @__PURE__ */ jsx2("style", { dangerouslySetInnerHTML: { __html: `
-        form[data-fe-scope="${formScopeId}"] input::placeholder, form[data-fe-scope="${formScopeId}"] textarea::placeholder { font-size: ${phFontSize}; }
+        form[data-fe-scope="${formScopeId}"] input::placeholder, form[data-fe-scope="${formScopeId}"] textarea::placeholder { font-size: ${phFontSize};${styling.placeholderColor ? ` color: ${styling.placeholderColor};` : ""} }
         form[data-fe-scope="${formScopeId}"] button[type="submit"]:hover:not(:disabled) { filter: brightness(0.9); }
         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); }
@@ -1045,21 +1088,39 @@ function FormsExpertForm({
           marginBottom: "0.5rem",
           color: styling.textColor
         }, children: form.config.hostedConfig?.pageTitle || form.config.name }),
-        fields.map((field) => /* @__PURE__ */ jsx2(
-          FormFieldInput,
-          {
-            field,
-            value: form.values[field.name],
-            error: form.errors[field.name],
-            onChange: handleChange,
-            onValueChange: (name, val) => form.setValue(name, val),
-            styling,
-            fieldSpacing,
-            labelSpacing,
-            phFontSize
-          },
-          field.name
-        )),
+        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: "120px" }, 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" } }),
         (() => {
@@ -1101,8 +1162,12 @@ function FormsExpertForm({
           } : 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__ */ jsx2("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: secStyle, children: sec.text || "Learn More" }),
-              /* @__PURE__ */ jsx2(
+              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",
@@ -1126,19 +1191,35 @@ function FormsExpertForm({
                     minWidth: 0,
                     whiteSpace: "nowrap",
                     overflow: "hidden",
-                    textOverflow: "ellipsis"
+                    textOverflow: "ellipsis",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: "0.5rem"
                   },
-                  children: form.isLoading ? "Submitting..." : resolvedButtonText
+                  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__ */ jsx2("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, marginLeft: "auto" }, children: sec.text || "Learn More" })
+              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 } })
+              ] })
             ] }),
             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__ */ jsx2("a", { href: sec.href || "#", target: sec.openInNewTab ? "_blank" : void 0, rel: sec.openInNewTab ? "noopener noreferrer" : void 0, style: { ...secStyle, marginTop: 0, marginBottom: 0 }, children: sec.text || "Learn More" }) })
+            }, 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(
@@ -1206,7 +1287,7 @@ function FormFieldInput({
     borderRadius: isBottomBorder ? 0 : fieldRadius,
     fontSize,
     fontFamily: "inherit",
-    backgroundColor: styling.theme === "dark" ? "#374151" : "#ffffff",
+    backgroundColor: styling.inputBackgroundColor || (styling.theme === "dark" ? "#374151" : "#ffffff"),
     color: styling.textColor
   };
   const getOpts = () => {