@snow-labs/brutal-ui 0.1.1 → 0.2.1

package/dist/components/brutal/hero.js

@@ -69,9 +69,6 @@ var colorMap = {
   white: "bg-background text-foreground",
   brand: "bg-brand",
   "brand-muted": "bg-brand-muted text-foreground",
-  blue: "bg-section-blue",
-  gray: "bg-section-gray text-foreground",
-  cream: "bg-section-cream text-foreground",
   black: "bg-foreground text-background",
   cta: "bg-cta"
 };
@@ -85,16 +82,28 @@ var paddingMap = {
   default: "brutal-section",
   lg: "brutal-section py-28 sm:py-36 md:py-44"
 };
+var patternMap = {
+  dots: "brutal-dots",
+  stripes: "brutal-stripes",
+  noise: "brutal-noise",
+  grain: "brutal-grain",
+  crosshatch: "brutal-crosshatch",
+  "grid-dots": "brutal-grid-dots",
+  "gradient-mesh": "brutal-gradient-mesh",
+  none: ""
+};
 function BrutalSection({
   children,
   color = "white",
   className,
   containerSize = "default",
   padding = "default",
+  pattern,
   dots = false,
   stripes = false,
   id
 }) {
+  const resolvedPattern = pattern ?? (dots ? "dots" : void 0) ?? (stripes ? "stripes" : void 0) ?? "none";
   return /* @__PURE__ */ jsx(
     "section",
     {
@@ -102,8 +111,7 @@ function BrutalSection({
       className: cn(
         paddingMap[padding],
         colorMap[color],
-        dots && "brutal-dots",
-        stripes && "brutal-stripes",
+        patternMap[resolvedPattern],
         className
       ),
       children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })
@@ -111,39 +119,76 @@ function BrutalSection({
   );
 }
 function BrutalHero({
+  variant = "split",
   badge,
+  badgePosition = "above",
   headline,
   description,
   ctaText,
   ctaHref = "#",
   ctaVariant = "cta",
+  secondaryText,
+  secondaryHref,
   visual,
   color = "brand",
+  pattern,
   proof,
   className
 }) {
-  return /* @__PURE__ */ jsx(BrutalSection, { color, padding: "lg", className, children: /* @__PURE__ */ jsxs(
+  const badgeElement = badge && /* @__PURE__ */ jsx(
     "div",
     {
       className: cn(
-        "grid items-center gap-12",
-        visual ? "lg:grid-cols-2 lg:gap-16" : "max-w-3xl"
+        "inline-flex w-fit border-brutal border-foreground bg-background px-3 py-1 font-mono text-xs font-bold uppercase tracking-widest text-foreground shadow-brutal-sm",
+        badgePosition === "floating" && "absolute -top-3 left-6 z-10"
       ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-          badge && /* @__PURE__ */ jsx("div", { className: "inline-flex w-fit border-brutal border-foreground bg-background px-3 py-1 font-mono text-xs font-bold uppercase tracking-widest shadow-brutal-sm", children: badge }),
-          /* @__PURE__ */ jsx("h1", { className: "brutal-display text-balance", children: headline }),
-          /* @__PURE__ */ jsx("p", { className: "brutal-body-lg max-w-lg opacity-80", children: description }),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Button, { variant: ctaVariant, size: "xl", render: /* @__PURE__ */ jsx("a", { href: ctaHref }), children: ctaText }) }),
-          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" }),
-            proof
-          ] })
-        ] }),
-        visual && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: visual })
-      ]
+      children: badge
     }
-  ) });
+  );
+  const textContent = /* @__PURE__ */ jsxs("div", { className: cn(
+    "flex flex-col gap-6",
+    variant === "centered" && "items-center text-center"
+  ), children: [
+    badgePosition === "above" && badgeElement,
+    /* @__PURE__ */ jsxs("h1", { className: cn(
+      "brutal-display text-balance",
+      variant === "centered" && "mx-auto max-w-4xl"
+    ), children: [
+      badgePosition === "inline" && badgeElement,
+      headline
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: cn(
+      "brutal-body-lg max-w-lg opacity-80",
+      variant === "centered" && "mx-auto"
+    ), children: description }),
+    /* @__PURE__ */ jsxs("div", { className: cn(
+      "flex flex-col gap-4 sm:flex-row sm:flex-wrap",
+      variant === "centered" && "sm:justify-center"
+    ), children: [
+      /* @__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" }),
+      proof
+    ] })
+  ] });
+  const layoutClass = {
+    split: "grid items-center gap-12 lg:grid-cols-2 lg:gap-16",
+    centered: "flex flex-col items-center gap-12",
+    overlap: "relative",
+    asymmetric: "grid items-center gap-12 lg:grid-cols-[3fr_2fr] lg:gap-16"
+  }[variant];
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, padding: "lg", pattern, className: cn("relative", className), children: [
+    badgePosition === "floating" && badgeElement,
+    /* @__PURE__ */ jsxs("div", { className: layoutClass, children: [
+      textContent,
+      visual && variant === "overlap" ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-20", children: visual }) : visual ? /* @__PURE__ */ jsx("div", { className: cn(
+        "flex items-center justify-center",
+        variant === "asymmetric" && "-rotate-2 transform"
+      ), children: visual }) : null
+    ] })
+  ] });
 }
 
 export { BrutalHero };

package/dist/components/brutal/hero.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/hero.tsx"],"names":["ButtonPrimitive","jsx"],"mappings":"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","file":"hero.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        // Primary: Black bg, white text, offset shadow\n        default:\n          \"border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // CTA: Mint green bg — the Bannerbear signature\n        cta: \"border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Brand: Dynamic brand color bg\n        brand:\n          \"border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Outline: White bg, black border, offset shadow\n        outline:\n          \"border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Secondary: Light bg, border, smaller shadow\n        secondary:\n          \"border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none\",\n        // Ghost: No border/shadow, subtle hover\n        ghost: \"hover:bg-secondary hover:text-foreground\",\n        // Link: Text only\n        link: \"text-foreground underline-offset-4 hover:underline\",\n        // Destructive\n        destructive:\n          \"border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Nav: Thin border, no shadow (for nav Sign In buttons)\n        nav: \"border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background\",\n      },\n      size: {\n        xs: \"h-7 gap-1 px-2.5 text-xs\",\n        sm: \"h-8 gap-1.5 px-3 text-sm\",\n        default: \"h-10 gap-2 px-5 text-sm\",\n        lg: \"h-12 gap-2 px-7 text-base\",\n        xl: \"h-14 gap-2.5 px-9 text-lg\",\n        icon: \"size-10\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-12\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","import { cn } from \"../../lib/utils\";\n\ntype SectionColor =\n  | \"white\"\n  | \"brand\"\n  | \"brand-muted\"\n  | \"blue\"\n  | \"gray\"\n  | \"cream\"\n  | \"black\"\n  | \"cta\";\n\ninterface BrutalSectionProps {\n  children: React.ReactNode;\n  color?: SectionColor;\n  className?: string;\n  containerSize?: \"sm\" | \"default\" | \"lg\";\n  padding?: \"sm\" | \"default\" | \"lg\";\n  dots?: boolean;\n  stripes?: boolean;\n  id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n  white: \"bg-background text-foreground\",\n  brand: \"bg-brand\",\n  \"brand-muted\": \"bg-brand-muted text-foreground\",\n  blue: \"bg-section-blue\",\n  gray: \"bg-section-gray text-foreground\",\n  cream: \"bg-section-cream text-foreground\",\n  black: \"bg-foreground text-background\",\n  cta: \"bg-cta\",\n};\n\nconst containerMap = {\n  sm: \"brutal-container-sm\",\n  default: \"brutal-container\",\n  lg: \"brutal-container-lg\",\n};\n\nconst paddingMap = {\n  sm: \"brutal-section-sm\",\n  default: \"brutal-section\",\n  lg: \"brutal-section py-28 sm:py-36 md:py-44\",\n};\n\nexport function BrutalSection({\n  children,\n  color = \"white\",\n  className,\n  containerSize = \"default\",\n  padding = \"default\",\n  dots = false,\n  stripes = false,\n  id,\n}: BrutalSectionProps) {\n  return (\n    <section\n      id={id}\n      className={cn(\n        paddingMap[padding],\n        colorMap[color],\n        dots && \"brutal-dots\",\n        stripes && \"brutal-stripes\",\n        className\n      )}\n    >\n      <div className={containerMap[containerSize]}>{children}</div>\n    </section>\n  );\n}\n","import { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport { BrutalSection } from \"./section\";\n\ninterface BrutalHeroProps {\n  badge?: string;\n  headline: string;\n  description: string;\n  ctaText: string;\n  ctaHref?: string;\n  ctaVariant?: \"cta\" | \"brand\" | \"default\";\n  visual?: React.ReactNode;\n  color?: \"white\" | \"brand\" | \"brand-muted\" | \"gray\";\n  proof?: string;\n  className?: string;\n}\n\nexport function BrutalHero({\n  badge,\n  headline,\n  description,\n  ctaText,\n  ctaHref = \"#\",\n  ctaVariant = \"cta\",\n  visual,\n  color = \"brand\",\n  proof,\n  className,\n}: BrutalHeroProps) {\n  return (\n    <BrutalSection color={color} padding=\"lg\" className={className}>\n      <div\n        className={cn(\n          \"grid items-center gap-12\",\n          visual ? \"lg:grid-cols-2 lg:gap-16\" : \"max-w-3xl\"\n        )}\n      >\n        {/* Text side */}\n        <div className=\"flex flex-col gap-6\">\n          {badge && (\n            <div className=\"inline-flex w-fit border-brutal border-foreground bg-background px-3 py-1 font-mono text-xs font-bold uppercase tracking-widest shadow-brutal-sm\">\n              {badge}\n            </div>\n          )}\n\n          <h1 className=\"brutal-display text-balance\">{headline}</h1>\n\n          <p className=\"brutal-body-lg max-w-lg opacity-80\">{description}</p>\n\n          <div>\n            <Button variant={ctaVariant} size=\"xl\" render={<a href={ctaHref} />}>\n              {ctaText}\n            </Button>\n          </div>\n\n          {proof && (\n            <p className=\"flex items-center gap-2 text-sm font-medium opacity-70\">\n              <span className=\"inline-flex size-5 items-center justify-center border border-current text-xs\">\n                ✓\n              </span>\n              {proof}\n            </p>\n          )}\n        </div>\n\n        {/* Visual side */}\n        {visual && <div className=\"flex items-center justify-center\">{visual}</div>}\n      </div>\n    </BrutalSection>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/hero.tsx"],"names":["ButtonPrimitive","jsx"],"mappings":"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","file":"hero.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        // Primary: Black bg, white text, offset shadow\n        default:\n          \"border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // CTA: Mint green bg — the Bannerbear signature\n        cta: \"border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Brand: Dynamic brand color bg\n        brand:\n          \"border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Outline: White bg, black border, offset shadow\n        outline:\n          \"border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Secondary: Light bg, border, smaller shadow\n        secondary:\n          \"border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none\",\n        // Ghost: No border/shadow, subtle hover\n        ghost: \"hover:bg-secondary hover:text-foreground\",\n        // Link: Text only\n        link: \"text-foreground underline-offset-4 hover:underline\",\n        // Destructive\n        destructive:\n          \"border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Nav: Thin border, no shadow (for nav Sign In buttons)\n        nav: \"border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background\",\n      },\n      size: {\n        xs: \"h-7 gap-1 px-2.5 text-xs\",\n        sm: \"h-8 gap-1.5 px-3 text-sm\",\n        default: \"h-10 gap-2 px-5 text-sm\",\n        lg: \"h-12 gap-2 px-7 text-base\",\n        xl: \"h-14 gap-2.5 px-9 text-lg\",\n        icon: \"size-10\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-12\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","import { cn } from \"../../lib/utils\";\n\nexport type SectionColor =\n  | \"white\"\n  | \"brand\"\n  | \"brand-muted\"\n  | \"black\"\n  | \"cta\";\n\nexport type SectionPattern =\n  | \"dots\"\n  | \"stripes\"\n  | \"noise\"\n  | \"grain\"\n  | \"crosshatch\"\n  | \"grid-dots\"\n  | \"gradient-mesh\"\n  | \"none\";\n\ninterface BrutalSectionProps {\n  children: React.ReactNode;\n  color?: SectionColor;\n  className?: string;\n  containerSize?: \"sm\" | \"default\" | \"lg\";\n  padding?: \"sm\" | \"default\" | \"lg\";\n  pattern?: SectionPattern;\n  /** @deprecated Use pattern=\"dots\" instead */\n  dots?: boolean;\n  /** @deprecated Use pattern=\"stripes\" instead */\n  stripes?: boolean;\n  id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n  white: \"bg-background text-foreground\",\n  brand: \"bg-brand\",\n  \"brand-muted\": \"bg-brand-muted text-foreground\",\n  black: \"bg-foreground text-background\",\n  cta: \"bg-cta\",\n};\n\nconst containerMap = {\n  sm: \"brutal-container-sm\",\n  default: \"brutal-container\",\n  lg: \"brutal-container-lg\",\n};\n\nconst paddingMap = {\n  sm: \"brutal-section-sm\",\n  default: \"brutal-section\",\n  lg: \"brutal-section py-28 sm:py-36 md:py-44\",\n};\n\nconst patternMap: Record<SectionPattern, string> = {\n  dots: \"brutal-dots\",\n  stripes: \"brutal-stripes\",\n  noise: \"brutal-noise\",\n  grain: \"brutal-grain\",\n  crosshatch: \"brutal-crosshatch\",\n  \"grid-dots\": \"brutal-grid-dots\",\n  \"gradient-mesh\": \"brutal-gradient-mesh\",\n  none: \"\",\n};\n\nexport function BrutalSection({\n  children,\n  color = \"white\",\n  className,\n  containerSize = \"default\",\n  padding = \"default\",\n  pattern,\n  dots = false,\n  stripes = false,\n  id,\n}: BrutalSectionProps) {\n  const resolvedPattern = pattern\n    ?? (dots ? \"dots\" : undefined)\n    ?? (stripes ? \"stripes\" : undefined)\n    ?? \"none\";\n\n  return (\n    <section\n      id={id}\n      className={cn(\n        paddingMap[padding],\n        colorMap[color],\n        patternMap[resolvedPattern],\n        className\n      )}\n    >\n      <div className={containerMap[containerSize]}>{children}</div>\n    </section>\n  );\n}\n","import { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport { BrutalSection } from \"./section\";\nimport type { SectionPattern } from \"./section\";\n\ntype HeroVariant = \"split\" | \"centered\" | \"overlap\" | \"asymmetric\";\n\ninterface BrutalHeroProps {\n  variant?: HeroVariant;\n  badge?: string;\n  badgePosition?: \"above\" | \"inline\" | \"floating\";\n  headline: string;\n  description: string;\n  ctaText: string;\n  ctaHref?: string;\n  ctaVariant?: \"cta\" | \"brand\" | \"default\";\n  secondaryText?: string;\n  secondaryHref?: string;\n  visual?: React.ReactNode;\n  color?: \"white\" | \"brand\" | \"brand-muted\" | \"black\";\n  pattern?: SectionPattern;\n  proof?: string;\n  className?: string;\n}\n\nexport function BrutalHero({\n  variant = \"split\",\n  badge,\n  badgePosition = \"above\",\n  headline,\n  description,\n  ctaText,\n  ctaHref = \"#\",\n  ctaVariant = \"cta\",\n  secondaryText,\n  secondaryHref,\n  visual,\n  color = \"brand\",\n  pattern,\n  proof,\n  className,\n}: BrutalHeroProps) {\n  const badgeElement = badge && (\n    <div\n      className={cn(\n        \"inline-flex w-fit border-brutal border-foreground bg-background px-3 py-1 font-mono text-xs font-bold uppercase tracking-widest text-foreground shadow-brutal-sm\",\n        badgePosition === \"floating\" && \"absolute -top-3 left-6 z-10\",\n      )}\n    >\n      {badge}\n    </div>\n  );\n\n  const textContent = (\n    <div className={cn(\n      \"flex flex-col gap-6\",\n      variant === \"centered\" && \"items-center text-center\",\n    )}>\n      {badgePosition === \"above\" && badgeElement}\n\n      <h1 className={cn(\n        \"brutal-display text-balance\",\n        variant === \"centered\" && \"mx-auto max-w-4xl\",\n      )}>\n        {badgePosition === \"inline\" && badgeElement}\n        {headline}\n      </h1>\n\n      <p className={cn(\n        \"brutal-body-lg max-w-lg opacity-80\",\n        variant === \"centered\" && \"mx-auto\",\n      )}>\n        {description}\n      </p>\n\n      <div className={cn(\n        \"flex flex-col gap-4 sm:flex-row sm:flex-wrap\",\n        variant === \"centered\" && \"sm:justify-center\",\n      )}>\n        <Button variant={ctaVariant} size=\"xl\" className=\"w-full sm:w-auto\" render={<a href={ctaHref} />}>\n          {ctaText}\n        </Button>\n        {secondaryText && (\n          <Button variant=\"outline\" size=\"xl\" className=\"w-full sm:w-auto\" render={<a href={secondaryHref || \"#\"} />}>\n            {secondaryText}\n          </Button>\n        )}\n      </div>\n\n      {proof && (\n        <p className=\"flex items-center gap-2 text-sm font-medium opacity-70\">\n          <span className=\"inline-flex size-5 items-center justify-center border border-current text-xs\">\n            ✓\n          </span>\n          {proof}\n        </p>\n      )}\n    </div>\n  );\n\n  const layoutClass = {\n    split: \"grid items-center gap-12 lg:grid-cols-2 lg:gap-16\",\n    centered: \"flex flex-col items-center gap-12\",\n    overlap: \"relative\",\n    asymmetric: \"grid items-center gap-12 lg:grid-cols-[3fr_2fr] lg:gap-16\",\n  }[variant];\n\n  return (\n    <BrutalSection color={color} padding=\"lg\" pattern={pattern} className={cn(\"relative\", className)}>\n      {badgePosition === \"floating\" && badgeElement}\n\n      <div className={layoutClass}>\n        {textContent}\n\n        {visual && variant === \"overlap\" ? (\n          <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center opacity-20\">\n            {visual}\n          </div>\n        ) : visual ? (\n          <div className={cn(\n            \"flex items-center justify-center\",\n            variant === \"asymmetric\" && \"-rotate-2 transform\",\n          )}>\n            {visual}\n          </div>\n        ) : null}\n      </div>\n    </BrutalSection>\n  );\n}\n"]}

package/dist/components/brutal/index.d.ts

@@ -1,5 +1,5 @@
-export { BrutalSection } from './section.js';
-export { WaveDivider } from './wave-divider.js';
+export { BrutalSection, SectionColor, SectionPattern } from './section.js';
+export { SectionDivider, SectionDivider as WaveDivider } from './section-divider.js';
 export { BrutalHero } from './hero.js';
 export { BrutalFeatureGrid } from './feature-grid.js';
 export { BrutalTestimonials } from './testimonials.js';
@@ -7,4 +7,9 @@ export { BrutalIntegrationGrid } from './integration-grid.js';
 export { BrutalCTA } from './cta-section.js';
 export { BrutalNav } from './nav.js';
 export { BrutalFooter } from './footer.js';
+export { PricingTable } from './pricing-table.js';
+export { LogoCloud } from './logo-cloud.js';
+export { StatsBar } from './stats-bar.js';
+export { FAQ } from './faq.js';
+export { Newsletter } from './newsletter.js';
 import 'react/jsx-runtime';