@forms.expert/sdk 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/core/index.cjs.map +1 -1
  2. package/dist/core/index.d.cts +6 -0
  3. package/dist/core/index.d.ts +6 -0
  4. package/dist/core/index.js.map +1 -1
  5. package/dist/react/index.cjs +28 -8
  6. package/dist/react/index.cjs.map +1 -1
  7. package/dist/react/index.d.cts +6 -0
  8. package/dist/react/index.d.ts +6 -0
  9. package/dist/react/index.js +28 -8
  10. package/dist/react/index.js.map +1 -1
  11. package/dist/vanilla/index.cjs +20 -19
  12. package/dist/vanilla/index.cjs.map +1 -1
  13. package/dist/vanilla/index.d.cts +6 -0
  14. package/dist/vanilla/index.d.ts +6 -0
  15. package/dist/vanilla/index.global.js +20 -19
  16. package/dist/vanilla/index.global.js.map +1 -1
  17. package/dist/vanilla/index.js +15 -14
  18. package/dist/vanilla/index.js.map +1 -1
  19. package/dist/vue/index.cjs.map +1 -1
  20. package/dist/vue/index.d.cts +6 -0
  21. package/dist/vue/index.d.ts +6 -0
  22. package/dist/vue/index.js.map +1 -1
  23. package/package.json +1 -1
package/dist/react/index.d.cts CHANGED
@@ -68,6 +68,8 @@ interface SecondaryButton {
68
68
  color?: string;
69
69
  textColor?: string;
70
70
  fontSize?: number;
71
+ icon?: string;
72
+ iconPosition?: 'left' | 'right';
71
73
  }
72
74
  /**
73
75
  * Form styling configuration
@@ -102,6 +104,8 @@ interface FormStyling {
102
104
  buttonGradient?: string;
103
105
  buttonFullWidth?: boolean;
104
106
  buttonFontSize?: number;
107
+ buttonIcon?: string;
108
+ buttonIconPosition?: 'left' | 'right';
105
109
  fieldSpacing?: 'compact' | 'normal' | 'relaxed' | 'spacious';
106
110
  formPadding?: 'none' | 'compact' | 'normal' | 'relaxed' | 'spacious';
107
111
  labelSpacing?: 'compact' | 'normal' | 'relaxed';
@@ -118,6 +122,8 @@ interface FormStyling {
118
122
  backgroundOverlay?: number;
119
123
  transparentBackground?: boolean;
120
124
  secondaryButton?: SecondaryButton;
125
+ inputBackgroundColor?: string;
126
+ placeholderColor?: string;
121
127
  }
122
128
  /**
123
129
  * Form schema
package/dist/react/index.d.ts CHANGED
@@ -68,6 +68,8 @@ interface SecondaryButton {
68
68
  color?: string;
69
69
  textColor?: string;
70
70
  fontSize?: number;
71
+ icon?: string;
72
+ iconPosition?: 'left' | 'right';
71
73
  }
72
74
  /**
73
75
  * Form styling configuration
@@ -102,6 +104,8 @@ interface FormStyling {
102
104
  buttonGradient?: string;
103
105
  buttonFullWidth?: boolean;
104
106
  buttonFontSize?: number;
107
+ buttonIcon?: string;
108
+ buttonIconPosition?: 'left' | 'right';
105
109
  fieldSpacing?: 'compact' | 'normal' | 'relaxed' | 'spacious';
106
110
  formPadding?: 'none' | 'compact' | 'normal' | 'relaxed' | 'spacious';
107
111
  labelSpacing?: 'compact' | 'normal' | 'relaxed';
@@ -118,6 +122,8 @@ interface FormStyling {
118
122
  backgroundOverlay?: number;
119
123
  transparentBackground?: boolean;
120
124
  secondaryButton?: SecondaryButton;
125
+ inputBackgroundColor?: string;
126
+ placeholderColor?: string;
121
127
  }
122
128
  /**
123
129
  * Form schema
package/dist/react/index.js CHANGED
@@ -1050,7 +1050,7 @@ function FormsExpertForm({
1050
1050
  children: [
1051
1051
  googleFontUrl && /* @__PURE__ */ jsx2("link", { rel: "stylesheet", href: googleFontUrl }),
1052
1052
  /* @__PURE__ */ jsx2("style", { dangerouslySetInnerHTML: { __html: `
1053
- form[data-fe-scope="${formScopeId}"] input::placeholder, form[data-fe-scope="${formScopeId}"] textarea::placeholder { font-size: ${phFontSize}; }
1053
+ form[data-fe-scope="${formScopeId}"] input::placeholder, form[data-fe-scope="${formScopeId}"] textarea::placeholder { font-size: ${phFontSize};${styling.placeholderColor ? ` color: ${styling.placeholderColor};` : ""} }
1054
1054
  form[data-fe-scope="${formScopeId}"] button[type="submit"]:hover:not(:disabled) { filter: brightness(0.9); }
1055
1055
  form[data-fe-scope="${formScopeId}"] button[type="submit"]:active:not(:disabled) { filter: brightness(0.85); transform: scale(0.98); }
1056
1056
  form[data-fe-scope="${formScopeId}"] a[href]:hover { filter: brightness(0.9); }
@@ -1162,8 +1162,12 @@ function FormsExpertForm({
1162
1162
  } : void 0;
1163
1163
  return /* @__PURE__ */ jsxs(Fragment, { children: [
1164
1164
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: btnAlign, marginTop: "1rem", gap: "0.5rem", flexWrap: "wrap" }, children: [
1165
- 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" }),
1166
- /* @__PURE__ */ jsx2(
1165
+ 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: [
1166
+ sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
1167
+ /* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
1168
+ sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
1169
+ ] }),
1170
+ /* @__PURE__ */ jsxs(
1167
1171
  "button",
1168
1172
  {
1169
1173
  type: "submit",
@@ -1187,19 +1191,35 @@ function FormsExpertForm({
1187
1191
  minWidth: 0,
1188
1192
  whiteSpace: "nowrap",
1189
1193
  overflow: "hidden",
1190
- textOverflow: "ellipsis"
1194
+ textOverflow: "ellipsis",
1195
+ display: "inline-flex",
1196
+ alignItems: "center",
1197
+ justifyContent: "center",
1198
+ gap: "0.5rem"
1191
1199
  },
1192
- children: form.isLoading ? "Submitting..." : resolvedButtonText
1200
+ children: [
1201
+ !form.isLoading && styling.buttonIcon && styling.buttonIconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } }),
1202
+ /* @__PURE__ */ jsx2("span", { children: form.isLoading ? "Submitting..." : resolvedButtonText }),
1203
+ !form.isLoading && styling.buttonIcon && styling.buttonIconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: styling.buttonIcon } })
1204
+ ]
1193
1205
  }
1194
1206
  ),
1195
- 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" })
1207
+ 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: [
1208
+ sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
1209
+ /* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
1210
+ sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
1211
+ ] })
1196
1212
  ] }),
1197
1213
  sec?.enabled && secStyle && sec.position === "below" && /* @__PURE__ */ jsx2("div", { style: {
1198
1214
  display: "flex",
1199
1215
  justifyContent: sec.align === "center" ? "center" : sec.align === "right" ? "flex-end" : sec.align === "left" ? "flex-start" : btnAlign,
1200
1216
  marginTop: sec.marginTop != null ? `${sec.marginTop}px` : "0.5rem",
1201
1217
  marginBottom: sec.marginBottom != null ? `${sec.marginBottom}px` : void 0
1202
- }, 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" }) })
1218
+ }, 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: [
1219
+ sec.icon && sec.iconPosition !== "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } }),
1220
+ /* @__PURE__ */ jsx2("span", { children: sec.text || "Learn More" }),
1221
+ sec.icon && sec.iconPosition === "right" && /* @__PURE__ */ jsx2("span", { style: { display: "inline-flex", flexShrink: 0 }, dangerouslySetInnerHTML: { __html: sec.icon } })
1222
+ ] }) })
1203
1223
  ] });
1204
1224
  })(),
1205
1225
  showBranding && /* @__PURE__ */ jsx2(
@@ -1267,7 +1287,7 @@ function FormFieldInput({
1267
1287
  borderRadius: isBottomBorder ? 0 : fieldRadius,
1268
1288
  fontSize,
1269
1289
  fontFamily: "inherit",
1270
- backgroundColor: styling.theme === "dark" ? "#374151" : "#ffffff",
1290
+ backgroundColor: styling.inputBackgroundColor || (styling.theme === "dark" ? "#374151" : "#ffffff"),
1271
1291
  color: styling.textColor
1272
1292
  };
1273
1293
  const getOpts = () => {