@opensite/ui 2.1.0 → 2.1.1

package/dist/registry.cjs

@@ -55949,7 +55949,7 @@ function HeroHiringAnimatedText({
           ),
           children: [
             renderHeading,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center md:items-start flex-col gap-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-stretch md:items-start flex-col gap-8", children: [
               description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
                 "p",
                 {
@@ -56012,7 +56012,14 @@ function HeroSplitImageNewsletter({
   imageClassName,
   optixFlowConfig
 }) {
-  const { uploadTokens, uploadProgress, isUploading, uploadFiles, removeFile, resetUpload } = integration.useFileUpload({ onError });
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = integration.useFileUpload({ onError });
   const { form, submissionError, formMethod, resetSubmissionState } = integration.useContactForm({
     formFields,
     formConfig,
@@ -56024,7 +56031,7 @@ function HeroSplitImageNewsletter({
     onError,
     uploadTokens
   });
-  const renderForm = React22.useMemo(() => {
+  const renderForm = React22__namespace.useMemo(() => {
     if (formSlot) return formSlot;
     const defaultButtonAction = {
       label: "Subscribe",
@@ -56036,6 +56043,7 @@ function HeroSplitImageNewsletter({
       forms.Form,
       {
         form,
+        fields: formFields,
         notificationConfig: {
           submissionError,
           successMessage
@@ -56043,7 +56051,11 @@ function HeroSplitImageNewsletter({
         formConfig: {
           endpoint: formConfig?.endpoint,
           method: formMethod,
-          submissionConfig: formConfig?.submissionConfig
+          submissionConfig: formConfig?.submissionConfig,
+          formLayout: "button-group",
+          buttonGroupSize: "default",
+          submitLabel: action.label,
+          submitVariant: action.variant || "default"
         },
         onNewSubmission: () => {
           resetUpload();
@@ -56080,8 +56092,24 @@ function HeroSplitImageNewsletter({
         ]
       }
     );
-  }, [formSlot, formFields, form, formConfig, formMethod, buttonAction, uploadProgress, uploadFiles, removeFile, isUploading, submissionError, successMessage, helperText, resetUpload, resetSubmissionState]);
-  const renderImage = React22.useMemo(() => {
+  }, [
+    formSlot,
+    formFields,
+    form,
+    formConfig,
+    formMethod,
+    buttonAction,
+    uploadProgress,
+    uploadFiles,
+    removeFile,
+    isUploading,
+    submissionError,
+    successMessage,
+    helperText,
+    resetUpload,
+    resetSubmissionState
+  ]);
+  const renderImage = React22__namespace.useMemo(() => {
     if (imageSlot) return imageSlot;
     if (!image) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative lg:w-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -57490,7 +57518,14 @@ function HeroSaasDashboardPreview({
   previewClassName,
   optixFlowConfig
 }) {
-  const { uploadTokens, uploadProgress, isUploading, uploadFiles, removeFile, resetUpload } = integration.useFileUpload({ onError });
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = integration.useFileUpload({ onError });
   const { form, submissionError, formMethod, resetSubmissionState } = integration.useContactForm({
     formFields,
     formConfig,
@@ -57502,7 +57537,7 @@ function HeroSaasDashboardPreview({
     onError,
     uploadTokens
   });
-  const renderBadge = React22.useMemo(() => {
+  const renderBadge = React22__namespace.useMemo(() => {
     if (badgeSlot) return badgeSlot;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -57517,7 +57552,7 @@ function HeroSaasDashboardPreview({
       }
     );
   }, [badgeSlot, badgeIcon, badgeText]);
-  const renderForm = React22.useMemo(() => {
+  const renderForm = React22__namespace.useMemo(() => {
     if (formSlot) return formSlot;
     const defaultButtonAction = {
       label: "Start Free Trial",
@@ -57529,6 +57564,7 @@ function HeroSaasDashboardPreview({
       forms.Form,
       {
         form,
+        fields: formFields,
         notificationConfig: {
           submissionError,
           successMessage
@@ -57536,7 +57572,11 @@ function HeroSaasDashboardPreview({
         formConfig: {
           endpoint: formConfig?.endpoint,
           method: formMethod,
-          submissionConfig: formConfig?.submissionConfig
+          submissionConfig: formConfig?.submissionConfig,
+          formLayout: "button-group",
+          buttonGroupSize: "lg",
+          submitLabel: action.label,
+          submitVariant: action.variant || "default"
         },
         onNewSubmission: () => {
           resetUpload();
@@ -57570,8 +57610,24 @@ function HeroSaasDashboardPreview({
         ]
       }
     );
-  }, [formSlot, formFields, form, formConfig, formMethod, buttonAction, uploadProgress, uploadFiles, removeFile, isUploading, submissionError, successMessage, helperText, resetUpload, resetSubmissionState]);
-  const renderBrowserPreview = React22.useMemo(() => {
+  }, [
+    formSlot,
+    formFields,
+    form,
+    formConfig,
+    formMethod,
+    buttonAction,
+    uploadProgress,
+    uploadFiles,
+    removeFile,
+    isUploading,
+    submissionError,
+    successMessage,
+    helperText,
+    resetUpload,
+    resetSubmissionState
+  ]);
+  const renderBrowserPreview = React22__namespace.useMemo(() => {
     if (browserPreviewSlot) return browserPreviewSlot;
     if (!browserPreview) return null;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative mt-20", previewClassName), children: [
@@ -60228,30 +60284,64 @@ function HeroPricingComparison({
     }
   );
 }
+var DEFAULT_FORM_FIELDS43 = [
+  {
+    name: "email",
+    type: "email",
+    label: "Email Address",
+    placeholder: "Enter your email",
+    required: true,
+    columnSpan: 12
+  }
+];
 function HeroNewsletterMinimal({
   heading,
   description,
-  inputPlaceholder,
-  submitAction,
+  formFields = DEFAULT_FORM_FIELDS43,
+  formConfig,
+  onSubmit,
+  onSuccess,
+  onError,
+  successMessage,
+  buttonAction,
+  helperText,
   formSlot,
   disclaimer,
   stats,
   patternClassName,
   statsSlot,
   background,
-  spacing,
+  containerClassName = "px-6 sm:px-6 md:px-8 lg:px-8",
+  spacing = "xl",
   pattern,
   patternOpacity,
   className,
-  containerClassName,
   headingClassName,
   descriptionClassName,
   formClassName,
-  inputClassName,
   disclaimerClassName,
   statsClassName
 }) {
-  const renderStats = React22.useMemo(() => {
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = integration.useFileUpload({ onError });
+  const { form, submissionError, formMethod, resetSubmissionState } = integration.useContactForm({
+    formFields,
+    formConfig,
+    onSubmit,
+    onSuccess: (data) => {
+      resetUpload();
+      onSuccess?.(data);
+    },
+    onError,
+    uploadTokens
+  });
+  const renderStats = React22__namespace.useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
     return stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center", stat.className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
@@ -60277,33 +60367,82 @@ function HeroNewsletterMinimal({
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-sm"), children: stat.label })
     ] }) }, index));
   }, [statsSlot, stats]);
-  const renderForm = React22.useMemo(() => {
+  const renderForm = React22__namespace.useMemo(() => {
     if (formSlot) return formSlot;
-    if (!submitAction) return null;
-    const {
-      label,
-      icon,
-      iconAfter,
-      children,
-      className: actionClassName,
-      ...pressableProps
-    } = submitAction;
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Input,
-        {
-          type: "email",
-          placeholder: inputPlaceholder,
-          className: cn("h-12 flex-1", inputClassName)
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        icon,
-        label,
-        iconAfter
-      ] }) })
-    ] });
-  }, [formSlot, submitAction, inputPlaceholder, inputClassName]);
+    const defaultButtonAction = {
+      label: "Subscribe",
+      variant: "default",
+      className: "h-12"
+    };
+    const action = buttonAction || defaultButtonAction;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      forms.Form,
+      {
+        form,
+        fields: formFields,
+        notificationConfig: {
+          submissionError,
+          successMessage
+        },
+        formConfig: {
+          endpoint: formConfig?.endpoint,
+          method: formMethod,
+          submissionConfig: formConfig?.submissionConfig,
+          formLayout: "button-group",
+          buttonGroupSize: "lg",
+          submitLabel: action.label,
+          submitVariant: action.variant || "default"
+        },
+        onNewSubmission: () => {
+          resetUpload();
+          resetSubmissionState();
+        },
+        children: [
+          formFields.map((field) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            integration.DynamicFormField,
+            {
+              field,
+              uploadProgress,
+              onFileUpload: uploadFiles,
+              onFileRemove: removeFile,
+              isUploading
+            }
+          ) }, field.name)),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Pressable,
+            {
+              onClick: form.handleSubmit,
+              asButton: true,
+              variant: action.variant,
+              className: cn("h-12", action.className),
+              disabled: form.isSubmitting,
+              children: [
+                action.label,
+                action.iconAfter
+              ]
+            }
+          ),
+          helperText && (typeof helperText === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-sm mt-2 text-center"), children: helperText }) : helperText)
+        ]
+      }
+    );
+  }, [
+    formSlot,
+    formFields,
+    form,
+    formConfig,
+    formMethod,
+    buttonAction,
+    uploadProgress,
+    uploadFiles,
+    removeFile,
+    isUploading,
+    submissionError,
+    successMessage,
+    helperText,
+    resetUpload,
+    resetSubmissionState
+  ]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -60357,7 +60496,7 @@ function HeroNewsletterMinimal({
               "div",
               {
                 className: cn(
-                  "mt-16 flex flex-wrap items-center justify-center gap-8",
+                  "mt-16 flex flex-wrap items-center justify-center gap-8 md:gap-12",
                   statsClassName
                 ),
                 children: renderStats
@@ -60369,7 +60508,7 @@ function HeroNewsletterMinimal({
     }
   );
 }
-var DEFAULT_FORM_FIELDS43 = [
+var DEFAULT_FORM_FIELDS44 = [
   {
     name: "email",
     type: "email",
@@ -60424,7 +60563,7 @@ function HeroComingSoonCountdown({
   description,
   countdownDate,
   countdownSlot,
-  formFields = DEFAULT_FORM_FIELDS43,
+  formFields = DEFAULT_FORM_FIELDS44,
   formConfig,
   onSubmit,
   onSuccess,
@@ -60449,8 +60588,15 @@ function HeroComingSoonCountdown({
   formClassName,
   socialLinksClassName
 }) {
-  const [timeLeft, setTimeLeft] = React22.useState(null);
-  const { uploadTokens, uploadProgress, isUploading, uploadFiles, removeFile, resetUpload } = integration.useFileUpload({ onError });
+  const [timeLeft, setTimeLeft] = React22__namespace.useState(null);
+  const {
+    uploadTokens,
+    uploadProgress,
+    isUploading,
+    uploadFiles,
+    removeFile,
+    resetUpload
+  } = integration.useFileUpload({ onError });
   const { form, submissionError, formMethod, resetSubmissionState } = integration.useContactForm({
     formFields,
     formConfig,
@@ -60462,7 +60608,7 @@ function HeroComingSoonCountdown({
     onError,
     uploadTokens
   });
-  const calculateTimeLeft = React22.useCallback(() => {
+  const calculateTimeLeft = React22__namespace.useCallback(() => {
     if (!countdownDate) return null;
     const now = Date.now();
     const target = countdownDate.getTime();
@@ -60475,7 +60621,7 @@ function HeroComingSoonCountdown({
       seconds: Math.floor(diff % (1e3 * 60) / 1e3)
     };
   }, [countdownDate]);
-  React22.useEffect(() => {
+  React22__namespace.useEffect(() => {
     setTimeLeft(calculateTimeLeft());
     if (!countdownDate) return;
     const timer = setInterval(() => {
@@ -60486,7 +60632,7 @@ function HeroComingSoonCountdown({
     return () => clearInterval(timer);
   }, [countdownDate, calculateTimeLeft]);
   const showCountdown = countdownSlot || timeLeft;
-  const renderForm = React22.useMemo(() => {
+  const renderForm = React22__namespace.useMemo(() => {
     if (formSlot) return formSlot;
     const defaultButtonAction = {
       label: "Notify Me",
@@ -60498,6 +60644,7 @@ function HeroComingSoonCountdown({
       forms.Form,
       {
         form,
+        fields: formFields,
         notificationConfig: {
           submissionError,
           successMessage
@@ -60505,7 +60652,11 @@ function HeroComingSoonCountdown({
         formConfig: {
           endpoint: formConfig?.endpoint,
           method: formMethod,
-          submissionConfig: formConfig?.submissionConfig
+          submissionConfig: formConfig?.submissionConfig,
+          formLayout: "button-group",
+          buttonGroupSize: "lg",
+          submitLabel: action.label,
+          submitVariant: action.variant || "default"
         },
         onNewSubmission: () => {
           resetUpload();
@@ -60540,8 +60691,24 @@ function HeroComingSoonCountdown({
         ]
       }
     );
-  }, [formSlot, formFields, form, formConfig, formMethod, buttonAction, uploadProgress, uploadFiles, removeFile, isUploading, submissionError, successMessage, helperText, resetUpload, resetSubmissionState]);
-  const renderSocialLinks = React22.useMemo(() => {
+  }, [
+    formSlot,
+    formFields,
+    form,
+    formConfig,
+    formMethod,
+    buttonAction,
+    uploadProgress,
+    uploadFiles,
+    removeFile,
+    isUploading,
+    submissionError,
+    successMessage,
+    helperText,
+    resetUpload,
+    resetSubmissionState
+  ]);
+  const renderSocialLinks = React22__namespace.useMemo(() => {
     if (socialLinksSlot) return socialLinksSlot;
     if (!socialLinks || socialLinks.length === 0) return null;
     return socialLinks.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -60610,7 +60777,7 @@ function HeroComingSoonCountdown({
           "div",
           {
             className: cn(
-              "flex w-full max-w-md flex-col gap-4 sm:flex-row",
+              "flex w-full max-w-md flex-col gap-4 sm:flex-row items-center justify-center",
               formClassName
             ),
             children: renderForm
@@ -60670,7 +60837,7 @@ function HeroEventRegistration({
       "div",
       {
         className: cn(
-          "flex flex-col md:flex-row items-center gap-4 md:gap-6 pt-8 md:pt-12",
+          "flex flex-col md:flex-row items-center gap-4 md:gap-6 pt-8 md:pt-12 w-full md:w-fit",
           statsClassName
         ),
         children: stats.map((stat, index) => /* @__PURE__ */ jsxRuntime.jsxs(React22__namespace.Fragment, { children: [