@opensite/ui 1.9.2 → 1.9.3

package/dist/contact-dark.cjs

@@ -773,77 +773,6 @@ function DynamicFormField({
     }
   );
 }
-
-// lib/form-field-types.ts
-function generateInitialValues(fields) {
-  return fields.reduce(
-    (acc, field) => {
-      if (field.type === "checkbox") {
-        acc[field.name] = false;
-      } else if (field.type === "checkbox-group" || field.type === "multi-select") {
-        acc[field.name] = [];
-      } else if (field.type === "file") {
-        acc[field.name] = [];
-      } else if (field.type === "date-range") {
-        acc[field.name] = { start: null, end: null };
-      } else {
-        acc[field.name] = "";
-      }
-      return acc;
-    },
-    {}
-  );
-}
-function generateValidationSchema(fields) {
-  return fields.reduce(
-    (acc, field) => {
-      acc[field.name] = (value, allValues) => {
-        if (field.required) {
-          if (!value || typeof value === "string" && !value.trim()) {
-            return `${field.label} is required`;
-          }
-        }
-        if (field.type === "email" && value) {
-          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-            return "Please enter a valid email address";
-          }
-        }
-        if (field.type === "url" && value) {
-          try {
-            new URL(value);
-          } catch {
-            return "Please enter a valid URL";
-          }
-        }
-        if (field.validator) {
-          return field.validator(value, allValues);
-        }
-        return void 0;
-      };
-      return acc;
-    },
-    {}
-  );
-}
-var columnSpanClasses = {
-  1: "col-span-12 md:col-span-1",
-  2: "col-span-12 md:col-span-2",
-  3: "col-span-12 md:col-span-3",
-  4: "col-span-12 md:col-span-4",
-  5: "col-span-12 md:col-span-5",
-  6: "col-span-12 md:col-span-6",
-  7: "col-span-12 md:col-span-7",
-  8: "col-span-12 md:col-span-8",
-  9: "col-span-12 md:col-span-9",
-  10: "col-span-12 md:col-span-10",
-  11: "col-span-12 md:col-span-11",
-  12: "col-span-12"
-};
-function getColumnSpanClass(span) {
-  if (!span || span === 12) return "col-span-12";
-  const clamped = Math.max(1, Math.min(span, 12));
-  return columnSpanClasses[clamped] || "col-span-12";
-}
 function useFileUpload(options) {
   const [uploadTokens, setUploadTokens] = React.useState([]);
   const [uploadProgress, setUploadProgress] = React.useState({});
@@ -908,6 +837,60 @@ function useFileUpload(options) {
     resetUpload
   };
 }
+
+// lib/form-field-types.ts
+function generateInitialValues(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      if (field.type === "checkbox") {
+        acc[field.name] = false;
+      } else if (field.type === "checkbox-group" || field.type === "multi-select") {
+        acc[field.name] = [];
+      } else if (field.type === "file") {
+        acc[field.name] = [];
+      } else if (field.type === "date-range") {
+        acc[field.name] = { start: null, end: null };
+      } else {
+        acc[field.name] = "";
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function generateValidationSchema(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      acc[field.name] = (value, allValues) => {
+        if (field.required) {
+          if (!value || typeof value === "string" && !value.trim()) {
+            return `${field.label} is required`;
+          }
+        }
+        if (field.type === "email" && value) {
+          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            return "Please enter a valid email address";
+          }
+        }
+        if (field.type === "url" && value) {
+          try {
+            new URL(value);
+          } catch {
+            return "Please enter a valid URL";
+          }
+        }
+        if (field.validator) {
+          return field.validator(value, allValues);
+        }
+        return void 0;
+      };
+      return acc;
+    },
+    {}
+  );
+}
+
+// lib/forms/use-contact-form.ts
 function useContactForm(options) {
   const {
     formFields,
@@ -1730,23 +1713,56 @@ function ContactDark({
                   },
                   className: cn("space-y-6", formClassName),
                   children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: getColumnSpanClass(field.columnSpan),
-                        children: /* @__PURE__ */ jsxRuntime.jsx(
-                          DynamicFormField,
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: formFields.map((field, index) => {
+                      const prevField = index > 0 ? formFields[index - 1] : null;
+                      const shouldGroup = field.columnSpan && field.columnSpan <= 6 && prevField?.columnSpan && prevField.columnSpan <= 6 && prevField.columnSpan + field.columnSpan <= 12;
+                      if (shouldGroup && index > 0) {
+                        return null;
+                      }
+                      const nextField = index < formFields.length - 1 ? formFields[index + 1] : null;
+                      const groupWithNext = field.columnSpan && field.columnSpan <= 6 && nextField?.columnSpan && nextField.columnSpan <= 6 && field.columnSpan + nextField.columnSpan <= 12;
+                      if (groupWithNext && nextField) {
+                        return /* @__PURE__ */ jsxRuntime.jsxs(
+                          "div",
                           {
-                            field,
-                            uploadProgress,
-                            onFileUpload: uploadFiles,
-                            onFileRemove: removeFile,
-                            isUploading
-                          }
-                        )
-                      },
-                      field.name
-                    )) }),
+                            className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                DynamicFormField,
+                                {
+                                  field,
+                                  uploadProgress,
+                                  onFileUpload: uploadFiles,
+                                  onFileRemove: removeFile,
+                                  isUploading
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                DynamicFormField,
+                                {
+                                  field: nextField,
+                                  uploadProgress,
+                                  onFileUpload: uploadFiles,
+                                  onFileRemove: removeFile,
+                                  isUploading
+                                }
+                              ) })
+                            ]
+                          },
+                          field.name
+                        );
+                      }
+                      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                        DynamicFormField,
+                        {
+                          field,
+                          uploadProgress,
+                          onFileUpload: uploadFiles,
+                          onFileRemove: removeFile,
+                          isUploading
+                        }
+                      ) }, field.name);
+                    }) }),
                     actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                       Pressable,
                       {

package/dist/contact-dark.js

@@ -752,77 +752,6 @@ function DynamicFormField({
     }
   );
 }
-
-// lib/form-field-types.ts
-function generateInitialValues(fields) {
-  return fields.reduce(
-    (acc, field) => {
-      if (field.type === "checkbox") {
-        acc[field.name] = false;
-      } else if (field.type === "checkbox-group" || field.type === "multi-select") {
-        acc[field.name] = [];
-      } else if (field.type === "file") {
-        acc[field.name] = [];
-      } else if (field.type === "date-range") {
-        acc[field.name] = { start: null, end: null };
-      } else {
-        acc[field.name] = "";
-      }
-      return acc;
-    },
-    {}
-  );
-}
-function generateValidationSchema(fields) {
-  return fields.reduce(
-    (acc, field) => {
-      acc[field.name] = (value, allValues) => {
-        if (field.required) {
-          if (!value || typeof value === "string" && !value.trim()) {
-            return `${field.label} is required`;
-          }
-        }
-        if (field.type === "email" && value) {
-          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-            return "Please enter a valid email address";
-          }
-        }
-        if (field.type === "url" && value) {
-          try {
-            new URL(value);
-          } catch {
-            return "Please enter a valid URL";
-          }
-        }
-        if (field.validator) {
-          return field.validator(value, allValues);
-        }
-        return void 0;
-      };
-      return acc;
-    },
-    {}
-  );
-}
-var columnSpanClasses = {
-  1: "col-span-12 md:col-span-1",
-  2: "col-span-12 md:col-span-2",
-  3: "col-span-12 md:col-span-3",
-  4: "col-span-12 md:col-span-4",
-  5: "col-span-12 md:col-span-5",
-  6: "col-span-12 md:col-span-6",
-  7: "col-span-12 md:col-span-7",
-  8: "col-span-12 md:col-span-8",
-  9: "col-span-12 md:col-span-9",
-  10: "col-span-12 md:col-span-10",
-  11: "col-span-12 md:col-span-11",
-  12: "col-span-12"
-};
-function getColumnSpanClass(span) {
-  if (!span || span === 12) return "col-span-12";
-  const clamped = Math.max(1, Math.min(span, 12));
-  return columnSpanClasses[clamped] || "col-span-12";
-}
 function useFileUpload(options) {
   const [uploadTokens, setUploadTokens] = useState([]);
   const [uploadProgress, setUploadProgress] = useState({});
@@ -887,6 +816,60 @@ function useFileUpload(options) {
     resetUpload
   };
 }
+
+// lib/form-field-types.ts
+function generateInitialValues(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      if (field.type === "checkbox") {
+        acc[field.name] = false;
+      } else if (field.type === "checkbox-group" || field.type === "multi-select") {
+        acc[field.name] = [];
+      } else if (field.type === "file") {
+        acc[field.name] = [];
+      } else if (field.type === "date-range") {
+        acc[field.name] = { start: null, end: null };
+      } else {
+        acc[field.name] = "";
+      }
+      return acc;
+    },
+    {}
+  );
+}
+function generateValidationSchema(fields) {
+  return fields.reduce(
+    (acc, field) => {
+      acc[field.name] = (value, allValues) => {
+        if (field.required) {
+          if (!value || typeof value === "string" && !value.trim()) {
+            return `${field.label} is required`;
+          }
+        }
+        if (field.type === "email" && value) {
+          if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            return "Please enter a valid email address";
+          }
+        }
+        if (field.type === "url" && value) {
+          try {
+            new URL(value);
+          } catch {
+            return "Please enter a valid URL";
+          }
+        }
+        if (field.validator) {
+          return field.validator(value, allValues);
+        }
+        return void 0;
+      };
+      return acc;
+    },
+    {}
+  );
+}
+
+// lib/forms/use-contact-form.ts
 function useContactForm(options) {
   const {
     formFields,
@@ -1709,23 +1692,56 @@ function ContactDark({
                   },
                   className: cn("space-y-6", formClassName),
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: getColumnSpanClass(field.columnSpan),
-                        children: /* @__PURE__ */ jsx(
-                          DynamicFormField,
+                    /* @__PURE__ */ jsx("div", { className: "space-y-4", children: formFields.map((field, index) => {
+                      const prevField = index > 0 ? formFields[index - 1] : null;
+                      const shouldGroup = field.columnSpan && field.columnSpan <= 6 && prevField?.columnSpan && prevField.columnSpan <= 6 && prevField.columnSpan + field.columnSpan <= 12;
+                      if (shouldGroup && index > 0) {
+                        return null;
+                      }
+                      const nextField = index < formFields.length - 1 ? formFields[index + 1] : null;
+                      const groupWithNext = field.columnSpan && field.columnSpan <= 6 && nextField?.columnSpan && nextField.columnSpan <= 6 && field.columnSpan + nextField.columnSpan <= 12;
+                      if (groupWithNext && nextField) {
+                        return /* @__PURE__ */ jsxs(
+                          "div",
                           {
-                            field,
-                            uploadProgress,
-                            onFileUpload: uploadFiles,
-                            onFileRemove: removeFile,
-                            isUploading
-                          }
-                        )
-                      },
-                      field.name
-                    )) }),
+                            className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+                            children: [
+                              /* @__PURE__ */ jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsx(
+                                DynamicFormField,
+                                {
+                                  field,
+                                  uploadProgress,
+                                  onFileUpload: uploadFiles,
+                                  onFileRemove: removeFile,
+                                  isUploading
+                                }
+                              ) }),
+                              /* @__PURE__ */ jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsx(
+                                DynamicFormField,
+                                {
+                                  field: nextField,
+                                  uploadProgress,
+                                  onFileUpload: uploadFiles,
+                                  onFileRemove: removeFile,
+                                  isUploading
+                                }
+                              ) })
+                            ]
+                          },
+                          field.name
+                        );
+                      }
+                      return /* @__PURE__ */ jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsx(
+                        DynamicFormField,
+                        {
+                          field,
+                          uploadProgress,
+                          onFileUpload: uploadFiles,
+                          onFileRemove: removeFile,
+                          isUploading
+                        }
+                      ) }, field.name);
+                    }) }),
                     actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
                       Pressable,
                       {

package/dist/contact-faq.cjs

@@ -961,25 +961,6 @@ function generateValidationSchema(fields) {
     {}
   );
 }
-var columnSpanClasses = {
-  1: "col-span-12 md:col-span-1",
-  2: "col-span-12 md:col-span-2",
-  3: "col-span-12 md:col-span-3",
-  4: "col-span-12 md:col-span-4",
-  5: "col-span-12 md:col-span-5",
-  6: "col-span-12 md:col-span-6",
-  7: "col-span-12 md:col-span-7",
-  8: "col-span-12 md:col-span-8",
-  9: "col-span-12 md:col-span-9",
-  10: "col-span-12 md:col-span-10",
-  11: "col-span-12 md:col-span-11",
-  12: "col-span-12"
-};
-function getColumnSpanClass(span) {
-  if (!span || span === 12) return "col-span-12";
-  const clamped = Math.max(1, Math.min(span, 12));
-  return columnSpanClasses[clamped] || "col-span-12";
-}
 
 // lib/forms/use-contact-form.ts
 function useContactForm(options) {
@@ -1816,23 +1797,56 @@ function ContactFaq({
                     },
                     className: cn("space-y-4", formClassName),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          className: getColumnSpanClass(field.columnSpan),
-                          children: /* @__PURE__ */ jsxRuntime.jsx(
-                            DynamicFormField,
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: formFields.map((field, index) => {
+                        const prevField = index > 0 ? formFields[index - 1] : null;
+                        const shouldGroup = field.columnSpan && field.columnSpan <= 6 && prevField?.columnSpan && prevField.columnSpan <= 6 && prevField.columnSpan + field.columnSpan <= 12;
+                        if (shouldGroup && index > 0) {
+                          return null;
+                        }
+                        const nextField = index < formFields.length - 1 ? formFields[index + 1] : null;
+                        const groupWithNext = field.columnSpan && field.columnSpan <= 6 && nextField?.columnSpan && nextField.columnSpan <= 6 && field.columnSpan + nextField.columnSpan <= 12;
+                        if (groupWithNext && nextField) {
+                          return /* @__PURE__ */ jsxRuntime.jsxs(
+                            "div",
                             {
-                              field,
-                              uploadProgress,
-                              onFileUpload: uploadFiles,
-                              onFileRemove: removeFile,
-                              isUploading
-                            }
-                          )
-                        },
-                        field.name
-                      )) }),
+                              className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  DynamicFormField,
+                                  {
+                                    field,
+                                    uploadProgress,
+                                    onFileUpload: uploadFiles,
+                                    onFileRemove: removeFile,
+                                    isUploading
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                                  DynamicFormField,
+                                  {
+                                    field: nextField,
+                                    uploadProgress,
+                                    onFileUpload: uploadFiles,
+                                    onFileRemove: removeFile,
+                                    isUploading
+                                  }
+                                ) })
+                              ]
+                            },
+                            field.name
+                          );
+                        }
+                        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                          DynamicFormField,
+                          {
+                            field,
+                            uploadProgress,
+                            onFileUpload: uploadFiles,
+                            onFileRemove: removeFile,
+                            isUploading
+                          }
+                        ) }, field.name);
+                      }) }),
                       actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxRuntime.jsxs(
                         Pressable,
                         {

package/dist/contact-faq.js

@@ -939,25 +939,6 @@ function generateValidationSchema(fields) {
     {}
   );
 }
-var columnSpanClasses = {
-  1: "col-span-12 md:col-span-1",
-  2: "col-span-12 md:col-span-2",
-  3: "col-span-12 md:col-span-3",
-  4: "col-span-12 md:col-span-4",
-  5: "col-span-12 md:col-span-5",
-  6: "col-span-12 md:col-span-6",
-  7: "col-span-12 md:col-span-7",
-  8: "col-span-12 md:col-span-8",
-  9: "col-span-12 md:col-span-9",
-  10: "col-span-12 md:col-span-10",
-  11: "col-span-12 md:col-span-11",
-  12: "col-span-12"
-};
-function getColumnSpanClass(span) {
-  if (!span || span === 12) return "col-span-12";
-  const clamped = Math.max(1, Math.min(span, 12));
-  return columnSpanClasses[clamped] || "col-span-12";
-}
 
 // lib/forms/use-contact-form.ts
 function useContactForm(options) {
@@ -1794,23 +1775,56 @@ function ContactFaq({
                     },
                     className: cn("space-y-4", formClassName),
                     children: [
-                      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-12 gap-6", children: formFields.map((field) => /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          className: getColumnSpanClass(field.columnSpan),
-                          children: /* @__PURE__ */ jsx(
-                            DynamicFormField,
+                      /* @__PURE__ */ jsx("div", { className: "space-y-4", children: formFields.map((field, index) => {
+                        const prevField = index > 0 ? formFields[index - 1] : null;
+                        const shouldGroup = field.columnSpan && field.columnSpan <= 6 && prevField?.columnSpan && prevField.columnSpan <= 6 && prevField.columnSpan + field.columnSpan <= 12;
+                        if (shouldGroup && index > 0) {
+                          return null;
+                        }
+                        const nextField = index < formFields.length - 1 ? formFields[index + 1] : null;
+                        const groupWithNext = field.columnSpan && field.columnSpan <= 6 && nextField?.columnSpan && nextField.columnSpan <= 6 && field.columnSpan + nextField.columnSpan <= 12;
+                        if (groupWithNext && nextField) {
+                          return /* @__PURE__ */ jsxs(
+                            "div",
                             {
-                              field,
-                              uploadProgress,
-                              onFileUpload: uploadFiles,
-                              onFileRemove: removeFile,
-                              isUploading
-                            }
-                          )
-                        },
-                        field.name
-                      )) }),
+                              className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+                              children: [
+                                /* @__PURE__ */ jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsx(
+                                  DynamicFormField,
+                                  {
+                                    field,
+                                    uploadProgress,
+                                    onFileUpload: uploadFiles,
+                                    onFileRemove: removeFile,
+                                    isUploading
+                                  }
+                                ) }),
+                                /* @__PURE__ */ jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsx(
+                                  DynamicFormField,
+                                  {
+                                    field: nextField,
+                                    uploadProgress,
+                                    onFileUpload: uploadFiles,
+                                    onFileRemove: removeFile,
+                                    isUploading
+                                  }
+                                ) })
+                              ]
+                            },
+                            field.name
+                          );
+                        }
+                        return /* @__PURE__ */ jsx("div", { className: "min-h-[76px]", children: /* @__PURE__ */ jsx(
+                          DynamicFormField,
+                          {
+                            field,
+                            uploadProgress,
+                            onFileUpload: uploadFiles,
+                            onFileRemove: removeFile,
+                            isUploading
+                          }
+                        ) }, field.name);
+                      }) }),
                       actionsSlot || actions && actions.length > 0 ? actionsContent : /* @__PURE__ */ jsxs(
                         Pressable,
                         {