@olwiba/ui 0.2.18 → 0.2.19

package/dist/index.d.ts

@@ -583,7 +583,8 @@ interface HeroSectionProps {
     heading: string;
     badge?: string;
     description: string;
-    primaryCta: {
+    /** Ignored when `primarySlot` is given. */
+    primaryCta?: {
         label: string;
         href: string;
     };
@@ -591,6 +592,18 @@ interface HeroSectionProps {
         label: string;
         href: string;
     };
+    /**
+     * Replaces the primary button with your own control — a search field, a
+     * short form, an email capture.
+     *
+     * A hero whose first action *is* the product converts better than one that
+     * links to a page where the product starts. `secondaryCta` still renders
+     * beside it, so "…or see pricing" survives.
+     *
+     * Rendered full-width above the secondary CTA on small screens, since a
+     * field sharing a row with a button gets squeezed to nothing on a phone.
+     */
+    primarySlot?: React.ReactNode;
     heroImage?: React.ReactNode;
     media?: 'image' | 'phone' | 'none';
     phoneSize?: 'sm' | 'md' | 'lg';
@@ -598,7 +611,7 @@ interface HeroSectionProps {
     socialProofText?: string;
     renderLink?: AppShellRenderLink;
 }
-declare function HeroSection({ heading, badge, description, primaryCta, secondaryCta, heroImage, media, phoneSize, avatarUrls, socialProofText, renderLink, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
+declare function HeroSection({ heading, badge, description, primaryCta, secondaryCta, primarySlot, heroImage, media, phoneSize, avatarUrls, socialProofText, renderLink, }: HeroSectionProps): react_jsx_runtime.JSX.Element;
 
 interface FeaturesSectionProps {
     title?: string;

package/dist/index.js

@@ -1619,6 +1619,7 @@ function HeroSection({
   description,
   primaryCta,
   secondaryCta,
+  primarySlot,
   heroImage,
   media = "image",
   phoneSize = "lg",
@@ -1633,19 +1634,28 @@ function HeroSection({
         badge && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: badge }) }),
         /* @__PURE__ */ jsx("h1", { className: "text-balance text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl", children: heading }),
         /* @__PURE__ */ jsx("p", { className: "max-w-lg text-pretty text-lg text-muted-foreground", children: description }),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
-          renderLink({
-            href: primaryCta.href,
-            children: /* @__PURE__ */ jsxs(Button, { size: "lg", children: [
-              primaryCta.label,
-              /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 size-4" })
-            ] })
-          }),
-          secondaryCta && renderLink({
-            href: secondaryCta.href,
-            children: /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", children: secondaryCta.label })
-          })
-        ] })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn$1(
+              "flex gap-3",
+              primarySlot ? "flex-col items-stretch sm:flex-row sm:items-center" : "flex-wrap items-center"
+            ),
+            children: [
+              primarySlot ?? (primaryCta && renderLink({
+                href: primaryCta.href,
+                children: /* @__PURE__ */ jsxs(Button, { size: "lg", children: [
+                  primaryCta.label,
+                  /* @__PURE__ */ jsx(ArrowRight, { className: "ml-2 size-4" })
+                ] })
+              })),
+              secondaryCta && renderLink({
+                href: secondaryCta.href,
+                children: /* @__PURE__ */ jsx(Button, { size: "lg", variant: "outline", children: secondaryCta.label })
+              })
+            ]
+          }
+        )
       ] }) }),
       media !== "none" && /* @__PURE__ */ jsx(FadeIn, { direction: "right", delay: 200, children: media === "phone" ? /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(PhoneFrame, { size: phoneSize, children: heroImage }) }) : /* @__PURE__ */ jsx("div", { className: cn$1("overflow-hidden", mode === "smooth" ? "rounded-3xl" : "rounded-2xl"), children: heroImage }) })
     ] }),