@forms.expert/sdk 0.2.12 → 0.3.0

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
@@ -89,6 +91,7 @@ interface FormStyling {
     formWidth?: 'narrow' | 'medium' | 'wide' | 'full';
     fieldLayout?: 'stacked' | 'inline';
     fieldBorderStyle?: 'full' | 'bottom';
+    fieldBorderRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';
     buttonColor?: string;
     buttonText?: string;
     buttonRadius?: 'none' | 'small' | 'medium' | 'large' | 'full';

package/dist/react/index.js

@@ -555,6 +555,65 @@ function getBorderRadius(radius) {
       return "0.375rem";
   }
 }
+function getFieldBorderRadius(radius) {
+  switch (radius) {
+    case "none":
+      return "0";
+    case "small":
+      return "0.25rem";
+    case "medium":
+      return "0.375rem";
+    case "large":
+      return "0.75rem";
+    case "full":
+      return "9999px";
+    default:
+      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":
@@ -1029,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" } }),
         (() => {
@@ -1178,6 +1255,7 @@ function FormFieldInput({
   phFontSize
 }) {
   const radius = getBorderRadius(styling.borderRadius);
+  const fieldRadius = getFieldBorderRadius(styling.fieldBorderRadius);
   const fontSize = getFontSize(styling.fontSize);
   const isInline = styling.labelPosition === "left" || styling.fieldLayout === "inline";
   const isBottomBorder = styling.fieldBorderStyle === "bottom";
@@ -1186,7 +1264,7 @@ function FormFieldInput({
     padding: "0.5rem 0.75rem",
     border: isBottomBorder ? "none" : `1px solid ${error ? "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}`,
     ...isBottomBorder ? { borderBottom: `1px solid ${error ? "#ef4444" : styling.theme === "dark" ? "#4b5563" : "#d1d5db"}` } : {},
-    borderRadius: isBottomBorder ? 0 : radius,
+    borderRadius: isBottomBorder ? 0 : fieldRadius,
     fontSize,
     fontFamily: "inherit",
     backgroundColor: styling.theme === "dark" ? "#374151" : "#ffffff",