@snow-labs/brutal-ui 0.1.0 → 0.1.1

package/dist/components/brutal/cta-section.js

@@ -1,6 +1,152 @@
-export { BrutalCTA } from '../../chunk-LLMBKOKT.js';
-import '../../chunk-CY2FOBOD.js';
-import '../../chunk-BSVJVM2L.js';
-import '../../chunk-H6SOU4UG.js';
+"use client";
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/components/ui/button.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "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",
+  {
+    variants: {
+      variant: {
+        // Primary: Black bg, white text, offset shadow
+        default: "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",
+        // CTA: Mint green bg — the Bannerbear signature
+        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",
+        // Brand: Dynamic brand color bg
+        brand: "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",
+        // Outline: White bg, black border, offset shadow
+        outline: "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",
+        // Secondary: Light bg, border, smaller shadow
+        secondary: "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",
+        // Ghost: No border/shadow, subtle hover
+        ghost: "hover:bg-secondary hover:text-foreground",
+        // Link: Text only
+        link: "text-foreground underline-offset-4 hover:underline",
+        // Destructive
+        destructive: "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",
+        // Nav: Thin border, no shadow (for nav Sign In buttons)
+        nav: "border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background"
+      },
+      size: {
+        xs: "h-7 gap-1 px-2.5 text-xs",
+        sm: "h-8 gap-1.5 px-3 text-sm",
+        default: "h-10 gap-2 px-5 text-sm",
+        lg: "h-12 gap-2 px-7 text-base",
+        xl: "h-14 gap-2.5 px-9 text-lg",
+        icon: "size-10",
+        "icon-sm": "size-8",
+        "icon-lg": "size-12"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+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"
+};
+var containerMap = {
+  sm: "brutal-container-sm",
+  default: "brutal-container",
+  lg: "brutal-container-lg"
+};
+var paddingMap = {
+  sm: "brutal-section-sm",
+  default: "brutal-section",
+  lg: "brutal-section py-28 sm:py-36 md:py-44"
+};
+function BrutalSection({
+  children,
+  color = "white",
+  className,
+  containerSize = "default",
+  padding = "default",
+  dots = false,
+  stripes = false,
+  id
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id,
+      className: cn(
+        paddingMap[padding],
+        colorMap[color],
+        dots && "brutal-dots",
+        stripes && "brutal-stripes",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })
+    }
+  );
+}
+function BrutalCTA({
+  headline,
+  description,
+  ctaText,
+  ctaHref = "#",
+  ctaVariant = "cta",
+  secondaryText,
+  secondaryHref,
+  color = "black",
+  className
+}) {
+  return /* @__PURE__ */ jsx(BrutalSection, { color, className, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
+    /* @__PURE__ */ jsx("h2", { className: "brutal-h1 mb-6", children: headline }),
+    description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-8 opacity-80", children: description }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: ctaVariant,
+          size: "xl",
+          render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
+          children: ctaText
+        }
+      ),
+      secondaryText && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outline",
+          size: "lg",
+          render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
+          children: secondaryText
+        }
+      )
+    ] })
+  ] }) });
+}
+
+export { BrutalCTA };
 //# sourceMappingURL=cta-section.js.map
 //# sourceMappingURL=cta-section.js.map

package/dist/components/brutal/cta-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"cta-section.js"}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/cta-section.tsx"],"names":["ButtonPrimitive","jsx"],"mappings":"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","file":"cta-section.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 { Button } from \"../ui/button\";\nimport { BrutalSection } from \"./section\";\n\ninterface BrutalCTAProps {\n  headline: string;\n  description?: string;\n  ctaText: string;\n  ctaHref?: string;\n  ctaVariant?: \"cta\" | \"brand\" | \"default\" | \"outline\";\n  secondaryText?: string;\n  secondaryHref?: string;\n  color?: \"black\" | \"brand\" | \"blue\" | \"white\";\n  className?: string;\n}\n\nexport function BrutalCTA({\n  headline,\n  description,\n  ctaText,\n  ctaHref = \"#\",\n  ctaVariant = \"cta\",\n  secondaryText,\n  secondaryHref,\n  color = \"black\",\n  className,\n}: BrutalCTAProps) {\n  return (\n    <BrutalSection color={color} className={className}>\n      <div className=\"mx-auto max-w-2xl text-center\">\n        <h2 className=\"brutal-h1 mb-6\">{headline}</h2>\n        {description && (\n          <p className=\"brutal-body mb-8 opacity-80\">{description}</p>\n        )}\n        <div className=\"flex flex-wrap items-center justify-center gap-4\">\n          <Button\n            variant={ctaVariant}\n            size=\"xl\"\n            render={<a href={ctaHref} />}\n          >\n            {ctaText}\n          </Button>\n          {secondaryText && (\n            <Button\n              variant=\"outline\"\n              size=\"lg\"\n              render={<a href={secondaryHref || \"#\"} />}\n            >\n              {secondaryText}\n            </Button>\n          )}\n        </div>\n      </div>\n    </BrutalSection>\n  );\n}\n"]}

package/dist/components/brutal/feature-grid.js

@@ -1,6 +1,143 @@
-export { BrutalFeatureGrid } from '../../chunk-F2E32OOJ.js';
-import '../../chunk-CPVH3LD5.js';
-import '../../chunk-BSVJVM2L.js';
-import '../../chunk-H6SOU4UG.js';
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Card({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      className: cn(
+        "group/card flex flex-col gap-4 rounded-lg border-brutal border-foreground bg-card p-5 text-card-foreground shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn("flex flex-col gap-1", className),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-title",
+      className: cn("text-lg font-bold leading-snug", className),
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn("", className),
+      ...props
+    }
+  );
+}
+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"
+};
+var containerMap = {
+  sm: "brutal-container-sm",
+  default: "brutal-container",
+  lg: "brutal-container-lg"
+};
+var paddingMap = {
+  sm: "brutal-section-sm",
+  default: "brutal-section",
+  lg: "brutal-section py-28 sm:py-36 md:py-44"
+};
+function BrutalSection({
+  children,
+  color = "white",
+  className,
+  containerSize = "default",
+  padding = "default",
+  dots = false,
+  stripes = false,
+  id
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id,
+      className: cn(
+        paddingMap[padding],
+        colorMap[color],
+        dots && "brutal-dots",
+        stripes && "brutal-stripes",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })
+    }
+  );
+}
+var colMap = {
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-2 lg:grid-cols-3",
+  4: "sm:grid-cols-2 lg:grid-cols-4"
+};
+function BrutalFeatureGrid({
+  badge,
+  headline,
+  description,
+  features,
+  columns = 3,
+  color = "white",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", children: [
+      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-muted-foreground", children: badge }),
+      /* @__PURE__ */ jsx("h2", { className: "brutal-h2 mb-4", children: headline }),
+      description && /* @__PURE__ */ jsx("p", { className: "brutal-body text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn("grid gap-6", colMap[columns]), children: features.map((feature) => /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        feature.icon && /* @__PURE__ */ jsx("div", { className: "mb-2 inline-flex size-12 items-center justify-center border-brutal border-foreground bg-brand-muted text-2xl shadow-brutal-sm", children: feature.icon }),
+        /* @__PURE__ */ jsx(CardTitle, { children: feature.title })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(CardDescription, { children: feature.description }) })
+    ] }, feature.title)) })
+  ] });
+}
+
+export { BrutalFeatureGrid };
 //# sourceMappingURL=feature-grid.js.map
 //# sourceMappingURL=feature-grid.js.map

package/dist/components/brutal/feature-grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"feature-grid.js"}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/card.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/feature-grid.tsx"],"names":["jsx"],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACDA,SAAS,IAAA,CAAK;AAAA,EACZ,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgC;AAC9B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,2NAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,UAAA,CAAW,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACxE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA;AAAA,MAC7C,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,SAAA,CAAU,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACvE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,YAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,gCAAA,EAAkC,SAAS,CAAA;AAAA,MACxD,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,SAAS,eAAA,CAAgB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AAC7E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,kBAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,+BAAA,EAAiC,SAAS,CAAA;AAAA,MACvD,GAAG;AAAA;AAAA,GACN;AAEJ;AAYA,SAAS,WAAA,CAAY,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACzE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,EAAA,EAAI,SAAS,CAAA;AAAA,MAC1B,GAAG;AAAA;AAAA,GACN;AAEJ;AC7CA,IAAM,QAAA,GAAyC;AAAA,EAC7C,KAAA,EAAO,+BAAA;AAAA,EACP,KAAA,EAAO,UAAA;AAAA,EACP,aAAA,EAAe,gCAAA;AAAA,EACf,IAAA,EAAM,iBAAA;AAAA,EACN,IAAA,EAAM,iCAAA;AAAA,EACN,KAAA,EAAO,kCAAA;AAAA,EACP,KAAA,EAAO,+BAAA;AAAA,EACP,GAAA,EAAK;AACP,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,EAAA,EAAI,qBAAA;AAAA,EACJ,OAAA,EAAS,kBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,mBAAA;AAAA,EACJ,OAAA,EAAS,gBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,aAAA,GAAgB,SAAA;AAAA,EAChB,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV;AACF,CAAA,EAAuB;AACrB,EAAA,uBACEA,GAAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,OAAO,CAAA;AAAA,QAClB,SAAS,KAAK,CAAA;AAAA,QACd,IAAA,IAAQ,aAAA;AAAA,QACR,OAAA,IAAW,gBAAA;AAAA,QACX;AAAA,OACF;AAAA,MAEA,0BAAAA,GAAAA,CAAC,KAAA,EAAA,EAAI,WAAW,YAAA,CAAa,aAAa,GAAI,QAAA,EAAS;AAAA;AAAA,GACzD;AAEJ;AC5CA,IAAM,MAAA,GAAS;AAAA,EACb,CAAA,EAAG,gBAAA;AAAA,EACH,CAAA,EAAG,+BAAA;AAAA,EACH,CAAA,EAAG;AACL,CAAA;AAEO,SAAS,iBAAA,CAAkB;AAAA,EAChC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,KAAA,GAAQ,OAAA;AAAA,EACR;AACF,CAAA,EAA2B;AACzB,EAAA,uBACE,IAAA,CAAC,aAAA,EAAA,EAAc,KAAA,EAAc,SAAA,EAC3B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iBAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,oBACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,2CAA2C,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBAEhEA,GAAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,kBAAkB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,MACxC,+BACCA,GAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,qCAAqC,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EAElE,CAAA;AAAA,oBAEAA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,YAAA,EAAc,MAAA,CAAO,OAAO,CAAC,GAC7C,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,0BACZ,IAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,UAAA,EAAA,EACE,QAAA,EAAA;AAAA,QAAA,OAAA,CAAQ,wBACPA,GAAAA,CAAC,SAAI,SAAA,EAAU,+HAAA,EACZ,kBAAQ,IAAA,EACX,CAAA;AAAA,wBAEFA,GAAAA,CAAC,SAAA,EAAA,EAAW,QAAA,EAAA,OAAA,CAAQ,KAAA,EAAM;AAAA,OAAA,EAC5B,CAAA;AAAA,sBACAA,IAAC,WAAA,EAAA,EACC,QAAA,kBAAAA,IAAC,eAAA,EAAA,EAAiB,QAAA,EAAA,OAAA,CAAQ,aAAY,CAAA,EACxC;AAAA,KAAA,EAAA,EAXS,OAAA,CAAQ,KAYnB,CACD,CAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ","file":"feature-grid.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","import * as React from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nfunction Card({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"group/card flex flex-col gap-4 rounded-lg border-brutal border-foreground bg-card p-5 text-card-foreground shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"text-lg font-bold leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\"self-start justify-self-end\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center border-t-brutal border-foreground pt-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\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 {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n} from \"../ui/card\";\nimport { BrutalSection } from \"./section\";\n\ninterface Feature {\n  icon?: React.ReactNode;\n  title: string;\n  description: string;\n}\n\ninterface BrutalFeatureGridProps {\n  badge?: string;\n  headline: string;\n  description?: string;\n  features: Feature[];\n  columns?: 2 | 3 | 4;\n  color?: \"white\" | \"brand\" | \"brand-muted\" | \"gray\" | \"cream\";\n  className?: string;\n}\n\nconst colMap = {\n  2: \"sm:grid-cols-2\",\n  3: \"sm:grid-cols-2 lg:grid-cols-3\",\n  4: \"sm:grid-cols-2 lg:grid-cols-4\",\n};\n\nexport function BrutalFeatureGrid({\n  badge,\n  headline,\n  description,\n  features,\n  columns = 3,\n  color = \"white\",\n  className,\n}: BrutalFeatureGridProps) {\n  return (\n    <BrutalSection color={color} className={className}>\n      <div className=\"mb-12 max-w-2xl\">\n        {badge && (\n          <p className=\"brutal-label mb-4 text-muted-foreground\">{badge}</p>\n        )}\n        <h2 className=\"brutal-h2 mb-4\">{headline}</h2>\n        {description && (\n          <p className=\"brutal-body text-muted-foreground\">{description}</p>\n        )}\n      </div>\n\n      <div className={cn(\"grid gap-6\", colMap[columns])}>\n        {features.map((feature) => (\n          <Card key={feature.title}>\n            <CardHeader>\n              {feature.icon && (\n                <div className=\"mb-2 inline-flex size-12 items-center justify-center border-brutal border-foreground bg-brand-muted text-2xl shadow-brutal-sm\">\n                  {feature.icon}\n                </div>\n              )}\n              <CardTitle>{feature.title}</CardTitle>\n            </CardHeader>\n            <CardContent>\n              <CardDescription>{feature.description}</CardDescription>\n            </CardContent>\n          </Card>\n        ))}\n      </div>\n    </BrutalSection>\n  );\n}\n"]}

package/dist/components/brutal/footer.js

@@ -1,4 +1,54 @@
-export { BrutalFooter } from '../../chunk-NMQRI5G5.js';
-import '../../chunk-H6SOU4UG.js';
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function BrutalFooter({
+  logo,
+  tagline,
+  columns,
+  bottomLeft,
+  bottomRight,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      className: cn(
+        "w-full border-t-brutal border-foreground bg-background px-6 py-12 text-foreground",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "brutal-container", children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-10 flex flex-col gap-8 sm:flex-row sm:items-start sm:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "max-w-xs", children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-2 text-xl font-black", children: logo }),
+            tagline && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: tagline })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8 sm:grid-cols-3 md:gap-12", children: columns.map((col) => /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "brutal-label mb-3 text-muted-foreground", children: col.title }),
+            /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: col.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: link.href,
+                className: "text-sm font-medium transition-colors hover:text-muted-foreground",
+                children: link.label
+              }
+            ) }, link.href)) })
+          ] }, col.title)) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-t-brutal border-foreground pt-6 font-mono text-xs uppercase tracking-widest text-muted-foreground", children: [
+          /* @__PURE__ */ jsx("span", { children: bottomLeft || "Built with care" }),
+          /* @__PURE__ */ jsx("span", { children: bottomRight || (/* @__PURE__ */ new Date()).getFullYear() })
+        ] })
+      ] })
+    }
+  );
+}
+
+export { BrutalFooter };
 //# sourceMappingURL=footer.js.map
 //# sourceMappingURL=footer.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"footer.js"}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/footer.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACWO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,EAAsB;AACpB,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,mFAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yEAAA,EAEb,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,UAAA,EACb,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBAAA,EAA2B,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,YAC9C,OAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iCAAiC,QAAA,EAAA,OAAA,EAAQ;AAAA,WAAA,EAE1D,CAAA;AAAA,0BAGA,GAAA,CAAC,SAAI,SAAA,EAAU,iDAAA,EACZ,kBAAQ,GAAA,CAAI,CAAC,GAAA,qBACZ,IAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,yCAAA,EACX,QAAA,EAAA,GAAA,CAAI,KAAA,EACP,CAAA;AAAA,4BACA,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,qBAAA,EACX,QAAA,EAAA,GAAA,CAAI,MAAM,GAAA,CAAI,CAAC,IAAA,qBACd,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBACC,MAAM,IAAA,CAAK,IAAA;AAAA,gBACX,SAAA,EAAU,mEAAA;AAAA,gBAET,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,aACR,EAAA,EANO,IAAA,CAAK,IAOd,CACD,CAAA,EACH;AAAA,WAAA,EAAA,EAfQ,GAAA,CAAI,KAgBd,CACD,CAAA,EACH;AAAA,SAAA,EACF,CAAA;AAAA,wBAGA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4IAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAM,wBAAc,iBAAA,EAAkB,CAAA;AAAA,8BACtC,MAAA,EAAA,EAAM,QAAA,EAAA,WAAA,IAAA,qBAAmB,IAAA,EAAK,EAAE,aAAY,EAAE;AAAA,SAAA,EACjD;AAAA,OAAA,EACF;AAAA;AAAA,GACF;AAEJ","file":"footer.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","import { cn } from \"../../lib/utils\";\n\ninterface FooterColumn {\n  title: string;\n  links: { label: string; href: string }[];\n}\n\ninterface BrutalFooterProps {\n  logo: React.ReactNode;\n  tagline?: string;\n  columns: FooterColumn[];\n  bottomLeft?: string;\n  bottomRight?: string;\n  className?: string;\n}\n\nexport function BrutalFooter({\n  logo,\n  tagline,\n  columns,\n  bottomLeft,\n  bottomRight,\n  className,\n}: BrutalFooterProps) {\n  return (\n    <footer\n      className={cn(\n        \"w-full border-t-brutal border-foreground bg-background px-6 py-12 text-foreground\",\n        className\n      )}\n    >\n      <div className=\"brutal-container\">\n        <div className=\"mb-10 flex flex-col gap-8 sm:flex-row sm:items-start sm:justify-between\">\n          {/* Logo + tagline */}\n          <div className=\"max-w-xs\">\n            <div className=\"mb-2 text-xl font-black\">{logo}</div>\n            {tagline && (\n              <p className=\"text-sm text-muted-foreground\">{tagline}</p>\n            )}\n          </div>\n\n          {/* Link columns */}\n          <div className=\"grid grid-cols-2 gap-8 sm:grid-cols-3 md:gap-12\">\n            {columns.map((col) => (\n              <div key={col.title}>\n                <h3 className=\"brutal-label mb-3 text-muted-foreground\">\n                  {col.title}\n                </h3>\n                <ul className=\"flex flex-col gap-2\">\n                  {col.links.map((link) => (\n                    <li key={link.href}>\n                      <a\n                        href={link.href}\n                        className=\"text-sm font-medium transition-colors hover:text-muted-foreground\"\n                      >\n                        {link.label}\n                      </a>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Bottom bar */}\n        <div className=\"flex items-center justify-between border-t-brutal border-foreground pt-6 font-mono text-xs uppercase tracking-widest text-muted-foreground\">\n          <span>{bottomLeft || \"Built with care\"}</span>\n          <span>{bottomRight || new Date().getFullYear()}</span>\n        </div>\n      </div>\n    </footer>\n  );\n}\n"]}

package/dist/components/brutal/hero.js

@@ -1,6 +1,151 @@
-export { BrutalHero } from '../../chunk-3HN3QP23.js';
-import '../../chunk-CY2FOBOD.js';
-import '../../chunk-BSVJVM2L.js';
-import '../../chunk-H6SOU4UG.js';
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "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",
+  {
+    variants: {
+      variant: {
+        // Primary: Black bg, white text, offset shadow
+        default: "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",
+        // CTA: Mint green bg — the Bannerbear signature
+        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",
+        // Brand: Dynamic brand color bg
+        brand: "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",
+        // Outline: White bg, black border, offset shadow
+        outline: "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",
+        // Secondary: Light bg, border, smaller shadow
+        secondary: "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",
+        // Ghost: No border/shadow, subtle hover
+        ghost: "hover:bg-secondary hover:text-foreground",
+        // Link: Text only
+        link: "text-foreground underline-offset-4 hover:underline",
+        // Destructive
+        destructive: "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",
+        // Nav: Thin border, no shadow (for nav Sign In buttons)
+        nav: "border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background"
+      },
+      size: {
+        xs: "h-7 gap-1 px-2.5 text-xs",
+        sm: "h-8 gap-1.5 px-3 text-sm",
+        default: "h-10 gap-2 px-5 text-sm",
+        lg: "h-12 gap-2 px-7 text-base",
+        xl: "h-14 gap-2.5 px-9 text-lg",
+        icon: "size-10",
+        "icon-sm": "size-8",
+        "icon-lg": "size-12"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+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"
+};
+var containerMap = {
+  sm: "brutal-container-sm",
+  default: "brutal-container",
+  lg: "brutal-container-lg"
+};
+var paddingMap = {
+  sm: "brutal-section-sm",
+  default: "brutal-section",
+  lg: "brutal-section py-28 sm:py-36 md:py-44"
+};
+function BrutalSection({
+  children,
+  color = "white",
+  className,
+  containerSize = "default",
+  padding = "default",
+  dots = false,
+  stripes = false,
+  id
+}) {
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      id,
+      className: cn(
+        paddingMap[padding],
+        colorMap[color],
+        dots && "brutal-dots",
+        stripes && "brutal-stripes",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })
+    }
+  );
+}
+function BrutalHero({
+  badge,
+  headline,
+  description,
+  ctaText,
+  ctaHref = "#",
+  ctaVariant = "cta",
+  visual,
+  color = "brand",
+  proof,
+  className
+}) {
+  return /* @__PURE__ */ jsx(BrutalSection, { color, padding: "lg", className, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid items-center gap-12",
+        visual ? "lg:grid-cols-2 lg:gap-16" : "max-w-3xl"
+      ),
+      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 })
+      ]
+    }
+  ) });
+}
+
+export { BrutalHero };
 //# sourceMappingURL=hero.js.map
 //# sourceMappingURL=hero.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"hero.js"}
+{"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"]}