@opensite/ui 2.0.6 → 2.0.8

package/dist/hero-newsletter-minimal.js

@@ -10,32 +10,6 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -848,11 +822,12 @@ Section.displayName = "Section";
 function HeroNewsletterMinimal({
   heading,
   description,
-  inputPlaceholder = "Enter your email",
+  inputPlaceholder,
   submitAction,
   formSlot,
-  disclaimer = "Free forever. No spam. Unsubscribe anytime.",
+  disclaimer,
   stats,
+  patternClassName,
   statsSlot,
   background,
   spacing,
@@ -870,15 +845,40 @@ function HeroNewsletterMinimal({
   const renderStats = useMemo(() => {
     if (statsSlot) return statsSlot;
     if (!stats || stats.length === 0) return null;
-    return stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2 text-sm", getTextColor(background, "muted"), stat.className), children: [
-      stat.icon,
-      /* @__PURE__ */ jsx("span", { children: stat.value })
-    ] }, index));
+    return stats.map((stat, index) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center", stat.className), children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center",
+            stat.icon ? "justify-between" : "justify-center"
+          ),
+          children: [
+            stat.icon,
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn("font-bold ", stat.icon ? "text-xl" : "text-2xl"),
+                children: stat.value
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: cn("text-sm"), children: stat.label })
+    ] }) }, index));
   }, [statsSlot, stats]);
   const renderForm = useMemo(() => {
     if (formSlot) return formSlot;
     if (!submitAction) return null;
-    const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = submitAction;
+    const {
+      label,
+      icon,
+      iconAfter,
+      children,
+      className: actionClassName,
+      ...pressableProps
+    } = submitAction;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Input,
@@ -888,35 +888,75 @@ function HeroNewsletterMinimal({
           className: cn("h-12 flex-1", inputClassName)
         }
       ),
-      /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        }
-      )
+      /* @__PURE__ */ jsx(Pressable, { asButton: true, className: actionClassName, ...pressableProps, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        icon,
+        label,
+        iconAfter
+      ] }) })
     ] });
   }, [formSlot, submitAction, inputPlaceholder, inputClassName]);
   return /* @__PURE__ */ jsx(
     Section,
     {
-      className: cn(
-        "relative min-h-[80vh] bg-background py-32",
-        className
-      ),
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container flex flex-col items-center justify-center text-center", containerClassName), children: [
-        heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-6 max-w-xl text-lg md:text-xl", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description })),
-        /* @__PURE__ */ jsx("div", { className: cn("mt-10 flex w-full max-w-md flex-col gap-4 sm:flex-row", formClassName), children: renderForm }),
-        disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", getTextColor(background, "muted"), disclaimerClassName), children: disclaimer }) : /* @__PURE__ */ jsx("div", { className: disclaimerClassName, children: disclaimer })),
-        (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("mt-16 flex flex-wrap items-center justify-center gap-8", statsClassName), children: renderStats })
-      ] })
+      background,
+      spacing,
+      pattern,
+      patternOpacity,
+      patternClassName,
+      className,
+      containerClassName,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "container flex flex-col items-center justify-center text-center",
+            containerClassName
+          ),
+          children: [
+            heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+              "h1",
+              {
+                className: cn(
+                  "max-w-3xl text-5xl font-bold tracking-tight md:text-6xl lg:text-7xl text-pretty",
+                  headingClassName
+                ),
+                children: heading
+              }
+            ) : heading),
+            description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: cn(
+                  "mt-6 max-w-full md:max-w-lg text-lg md:text-xl text-balance",
+                  descriptionClassName
+                ),
+                children: description
+              }
+            ) : description),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mt-10 flex w-full max-w-md flex-col gap-4 sm:flex-row",
+                  formClassName
+                ),
+                children: renderForm
+              }
+            ),
+            disclaimer && (typeof disclaimer === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-sm", disclaimerClassName), children: disclaimer }) : disclaimer),
+            (statsSlot || stats && stats.length > 0) && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "mt-16 flex flex-wrap items-center justify-center gap-8",
+                  statsClassName
+                ),
+                children: renderStats
+              }
+            )
+          ]
+        }
+      )
     }
   );
 }