@forms.expert/sdk 0.4.0 → 0.4.2

package/dist/react/index.d.cts

@@ -42,6 +42,7 @@ interface FormField {
     paragraphFontSize?: number;
     consentText?: string;
     consentUrl?: string;
+    consentFontSize?: number;
     maxLength?: number;
     stepId?: string;
     visibleWhen?: {
@@ -75,15 +76,15 @@ interface SecondaryButton {
  * Form styling configuration
  */
 interface FormStyling {
-    theme: 'light' | 'dark' | 'system';
+    theme: 'light' | 'dark' | 'system' | 'custom';
     primaryColor: string;
     backgroundColor: string;
     textColor: string;
     errorColor?: string;
     successColor?: string;
     borderRadius: 'none' | 'sm' | 'md' | 'lg';
-    fontSize: 'sm' | 'md' | 'lg';
-    buttonStyle: 'filled' | 'outline';
+    fontSize: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+    buttonStyle: 'filled' | 'outline' | 'outlined' | 'minimal';
     labelPosition: 'top' | 'left' | 'floating';
     labelClassName?: string;
     fieldClassName?: string;

package/dist/react/index.d.ts

@@ -42,6 +42,7 @@ interface FormField {
     paragraphFontSize?: number;
     consentText?: string;
     consentUrl?: string;
+    consentFontSize?: number;
     maxLength?: number;
     stepId?: string;
     visibleWhen?: {
@@ -75,15 +76,15 @@ interface SecondaryButton {
  * Form styling configuration
  */
 interface FormStyling {
-    theme: 'light' | 'dark' | 'system';
+    theme: 'light' | 'dark' | 'system' | 'custom';
     primaryColor: string;
     backgroundColor: string;
     textColor: string;
     errorColor?: string;
     successColor?: string;
     borderRadius: 'none' | 'sm' | 'md' | 'lg';
-    fontSize: 'sm' | 'md' | 'lg';
-    buttonStyle: 'filled' | 'outline';
+    fontSize: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
+    buttonStyle: 'filled' | 'outline' | 'outlined' | 'minimal';
     labelPosition: 'top' | 'left' | 'floating';
     labelClassName?: string;
     fieldClassName?: string;

package/dist/react/index.js

@@ -633,10 +633,13 @@ function getButtonRadius(radius) {
 function getFontSize(size) {
   switch (size) {
     case "sm":
+    case "small":
       return "0.875rem";
     case "md":
+    case "medium":
       return "1rem";
     case "lg":
+    case "large":
       return "1.125rem";
     default:
       return "1rem";
@@ -1106,7 +1109,7 @@ function FormsExpertForm({
               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(
+          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,
@@ -1320,7 +1323,8 @@ function FormFieldInput({
     return /* @__PURE__ */ jsx2("input", { type: "hidden", name: field.name, value: String(value || field.defaultValue || "") });
   }
   if (field.type === "checkbox" || field.type === "toggle" || field.type === "consent") {
-    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem", marginBottom: fieldSpacing }, children: [
+    const consentSize = field.type === "consent" && field.consentFontSize ? `${field.consentFontSize}px` : void 0;
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "0.5rem", marginBottom: fieldSpacing }, children: [
       /* @__PURE__ */ jsx2(
         "input",
         {
@@ -1330,18 +1334,17 @@ function FormFieldInput({
           checked: Boolean(value),
           onChange,
           required: field.required,
-          style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor }
+          style: { width: "1rem", height: "1rem", accentColor: styling.primaryColor, marginTop: "0.125rem", flexShrink: 0 }
         }
       ),
-      (field.label || field.type === "consent" && field.consentText) && /* @__PURE__ */ jsxs("label", { htmlFor: field.name, className: styling.labelClassName, children: [
-        field.type === "consent" && field.consentText ? field.consentUrl ? /* @__PURE__ */ jsxs("span", { children: [
-          field.consentText,
-          " ",
-          /* @__PURE__ */ jsx2("a", { href: field.consentUrl, target: "_blank", rel: "noopener noreferrer", style: { color: styling.primaryColor }, children: "(link)" })
-        ] }) : field.consentText : field.label,
-        field.required && !styling.hideRequiredAsterisk && /* @__PURE__ */ jsx2("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
-      ] }),
-      error && /* @__PURE__ */ jsx2("span", { style: { color: styling.errorColor || "#ef4444", fontSize: "0.875rem", marginLeft: "0.5rem" }, children: error })
+      /* @__PURE__ */ jsxs("div", { children: [
+        (field.label || field.type === "consent" && field.consentText) && /* @__PURE__ */ jsxs("label", { htmlFor: field.name, className: styling.labelClassName, style: { cursor: "pointer", ...consentSize ? { fontSize: consentSize } : {} }, children: [
+          field.type === "consent" && field.consentText ? field.consentText : field.label,
+          field.required && !styling.hideRequiredAsterisk && /* @__PURE__ */ jsx2("span", { style: { color: "#ef4444", marginLeft: "0.25rem" }, children: "*" })
+        ] }),
+        field.type === "consent" && field.consentUrl && /* @__PURE__ */ jsx2("a", { href: field.consentUrl, target: "_blank", rel: "noopener noreferrer", style: { color: styling.primaryColor, fontSize: "0.75rem", marginTop: "0.125rem", display: "inline-block" }, children: "View policy" }),
+        error && /* @__PURE__ */ jsx2("div", { style: { color: styling.errorColor || "#ef4444", fontSize: "0.875rem", marginTop: "0.25rem" }, children: error })
+      ] })
     ] });
   }
   const labelEl = field.label ? /* @__PURE__ */ jsxs(