@snow-labs/brutal-ui 0.3.1 → 0.4.0

package/dist/templates/index.js

@@ -364,11 +364,11 @@ function BrutalHero({
       variant === "centered" && "mx-auto"
     ), children: description }),
     /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex flex-wrap gap-4",
-      variant === "centered" && "justify-center"
+      "flex flex-col gap-3 sm:flex-row sm:gap-4",
+      variant === "centered" && "sm:justify-center"
     ), children: [
-      /* @__PURE__ */ jsx(Button, { variant: ctaVariant, size: "xl", render: /* @__PURE__ */ jsx("a", { href: ctaHref }), children: ctaText }),
-      secondaryText && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "xl", render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }), children: secondaryText })
+      /* @__PURE__ */ jsx(Button, { variant: ctaVariant, size: "xl", className: "w-full sm:w-auto", render: /* @__PURE__ */ jsx("a", { href: ctaHref }), children: ctaText }),
+      secondaryText && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "xl", className: "w-full sm:w-auto", render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }), children: secondaryText })
     ] }),
     proof && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm font-medium opacity-70", children: [
       /* @__PURE__ */ jsx("span", { className: "inline-flex size-5 items-center justify-center border border-current text-xs", children: "\u2713" }),
@@ -579,6 +579,14 @@ function FeatureCard({
   index
 }) {
   const isBentoFeatured = variant === "bento" && feature.featured;
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxs("div", { className: "group flex flex-col gap-3 border-l-4 border-l-brand py-1 pl-5", children: [
+      feature.icon && /* @__PURE__ */ jsx("div", { className: "text-2xl", children: feature.icon }),
+      feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label text-brand", children: feature.stat }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: feature.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: feature.description })
+    ] });
+  }
   if (variant === "icon-left") {
     return /* @__PURE__ */ jsxs("div", { className: "flex gap-4 border-brutal border-foreground border-l-4 border-l-brand bg-background p-5 shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg", children: [
       feature.icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 shrink-0 items-center justify-center border-brutal border-foreground bg-brand-muted text-2xl shadow-brutal-sm", children: feature.icon }),
@@ -1029,12 +1037,13 @@ function CTAButtons({
   secondaryText,
   secondaryHref
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-4", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         variant: ctaVariant,
         size: "xl",
+        className: "w-full sm:w-auto",
         render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
         children: ctaText
       }
@@ -1043,7 +1052,8 @@ function CTAButtons({
       Button,
       {
         variant: "outline",
-        size: "lg",
+        size: "xl",
+        className: "w-full sm:w-auto",
         render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
         children: secondaryText
       }
@@ -1073,12 +1083,13 @@ function SplitCTA(props) {
       /* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: props.headline }),
       props.description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-4 opacity-80", children: props.description }),
       props.stats && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-8 opacity-60", children: props.stats }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 sm:flex-row sm:gap-4", children: [
         /* @__PURE__ */ jsx(
           Button,
           {
             variant: props.ctaVariant || "cta",
             size: "xl",
+            className: "w-full sm:w-auto",
             render: /* @__PURE__ */ jsx("a", { href: props.ctaHref || "#" }),
             children: props.ctaText
           }
@@ -1087,7 +1098,8 @@ function SplitCTA(props) {
           Button,
           {
             variant: "outline",
-            size: "lg",
+            size: "xl",
+            className: "w-full sm:w-auto",
             render: /* @__PURE__ */ jsx("a", { href: props.secondaryHref || "#" }),
             children: props.secondaryText
           }