@snow-labs/brutal-ui 0.1.0 → 0.2.0

package/dist/templates/index.js

@@ -0,0 +1,2031 @@
+"use client";
+import * as React from 'react';
+import { createContext, useState, useEffect, useRef, useContext } from 'react';
+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 { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Dialog } from '@base-ui/react/dialog';
+import { Menu, XIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+import { Input as Input$1 } from '@base-ui/react/input';
+import { Menu as Menu$1 } from '@base-ui/react/menu';
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+import { Toggle } from '@base-ui/react/toggle';
+import { ToggleGroup as ToggleGroup$1 } from '@base-ui/react/toggle-group';
+
+// src/components/brutal/nav.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
+    }
+  );
+}
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/60 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 border-brutal border-foreground bg-background bg-clip-padding text-sm shadow-brutal-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            Dialog.Close,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-3 right-3",
+                  size: "icon-sm"
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  XIcon,
+                  {}
+                ),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("text-base font-bold text-foreground", className),
+      ...props
+    }
+  );
+}
+function BrutalNav({
+  logo,
+  links,
+  ctaText = "Sign In",
+  ctaHref = "/admin",
+  variant = "solid",
+  className
+}) {
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [isScrolled, setIsScrolled] = useState(false);
+  useEffect(() => {
+    if (variant !== "transparent") return;
+    const onScroll = () => setIsScrolled(window.scrollY > 20);
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, [variant]);
+  const variantStyles = {
+    solid: "sticky top-0 z-50 w-full border-b-brutal border-foreground bg-brand",
+    transparent: cn(
+      "fixed top-0 left-0 right-0 z-50 w-full transition-all duration-200",
+      isScrolled ? "bg-background/80 text-foreground backdrop-blur-md border-b border-foreground/10" : "bg-transparent text-white"
+    ),
+    "floating-pill": "fixed top-0 left-0 right-0 z-50 mx-4 mt-4 rounded-full border-brutal border-foreground bg-background shadow-brutal"
+  };
+  return /* @__PURE__ */ jsx("header", { className: cn(variantStyles[variant], className), children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex h-14 items-center justify-between px-6",
+        variant === "floating-pill" ? "mx-auto max-w-7xl" : "brutal-container"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("a", { href: "/", className: "flex items-center gap-2 text-lg font-black", children: logo }),
+        /* @__PURE__ */ jsx("nav", { className: "hidden items-center gap-1 md:flex", children: links.map((link) => /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: link.href,
+            className: cn(
+              "relative rounded-md px-3 py-1.5 text-sm font-bold transition-colors hover:opacity-70",
+              link.active && "bg-foreground/10"
+            ),
+            children: [
+              link.label,
+              link.badge && /* @__PURE__ */ jsx("span", { className: "absolute -top-1 -right-1 border border-foreground bg-background px-1 font-mono text-[9px] font-bold uppercase text-foreground", children: link.badge })
+            ]
+          },
+          link.href
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "nav",
+              size: "sm",
+              render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
+              className: "hidden md:inline-flex",
+              children: ctaText
+            }
+          ),
+          /* @__PURE__ */ jsxs(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: [
+            /* @__PURE__ */ jsxs(
+              SheetTrigger,
+              {
+                render: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", className: "md:hidden" }),
+                children: [
+                  /* @__PURE__ */ jsx(Menu, { className: "size-5" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Menu" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(SheetContent, { side: "right", showCloseButton: true, children: [
+              /* @__PURE__ */ jsx(SheetTitle, { children: "Navigation" }),
+              /* @__PURE__ */ jsxs("nav", { className: "flex flex-col gap-1 px-2 pt-4", children: [
+                links.map((link) => /* @__PURE__ */ jsxs(
+                  "a",
+                  {
+                    href: link.href,
+                    onClick: () => setMobileOpen(false),
+                    className: cn(
+                      "flex items-center gap-2 rounded-md px-3 py-2.5 text-sm font-bold transition-colors hover:bg-foreground/5",
+                      link.active && "bg-foreground/10"
+                    ),
+                    children: [
+                      link.label,
+                      link.badge && /* @__PURE__ */ jsx("span", { className: "border border-foreground bg-background px-1 font-mono text-[9px] font-bold uppercase text-foreground", children: link.badge })
+                    ]
+                  },
+                  link.href
+                )),
+                /* @__PURE__ */ jsx("div", { className: "mt-4 border-t border-foreground/10 pt-4", children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "default",
+                    size: "default",
+                    render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
+                    className: "w-full",
+                    children: ctaText
+                  }
+                ) })
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+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"
+};
+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",
+    {
+      id,
+      className: cn(
+        paddingMap[padding],
+        colorMap[color],
+        patternMap[resolvedPattern],
+        className
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })
+    }
+  );
+}
+function BrutalHero({
+  variant = "split",
+  badge,
+  badgePosition = "above",
+  headline,
+  description,
+  ctaText,
+  ctaHref = "#",
+  ctaVariant = "cta",
+  secondaryText,
+  secondaryHref,
+  visual,
+  color = "brand",
+  pattern,
+  proof,
+  className
+}) {
+  const badgeElement = badge && /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "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: 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-wrap gap-4",
+      variant === "centered" && "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 })
+    ] }),
+    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
+    ] })
+  ] });
+}
+var paths = {
+  wave: "M0,64 C160,128 320,0 480,64 C640,128 800,0 960,64 L960,160 L0,160 Z",
+  jagged: "M0,80 L80,40 L160,80 L240,20 L320,80 L400,40 L480,80 L560,20 L640,80 L720,40 L800,80 L880,20 L960,80 L960,160 L0,160 Z",
+  curve: "M0,128 Q480,-32 960,128 L960,160 L0,160 Z",
+  castle: "M0,80 L0,60 L80,60 L80,80 L120,80 L120,40 L200,40 L200,80 L240,80 L240,60 L320,60 L320,80 L360,80 L360,40 L440,40 L440,80 L480,80 L480,60 L560,60 L560,80 L600,80 L600,40 L680,40 L680,80 L720,80 L720,60 L800,60 L800,80 L840,80 L840,40 L920,40 L920,80 L960,80 L960,160 L0,160 Z",
+  "torn-paper": "M0,70 C30,65 45,85 80,72 C115,59 130,90 170,78 C210,66 225,88 270,75 C315,62 340,92 380,79 C420,66 445,86 490,73 C535,60 560,88 600,76 C640,64 665,90 710,77 C755,64 780,84 830,71 C875,58 900,86 960,80 L960,160 L0,160 Z",
+  "brush-stroke": "M0,90 C80,50 120,100 200,60 C280,20 360,110 480,70 C600,30 640,100 720,80 C800,60 880,100 960,70 L960,160 L0,160 Z",
+  geometric: "M0,100 L120,60 L240,80 L360,40 L480,90 L600,50 L720,70 L840,30 L960,80 L960,160 L0,160 Z",
+  blob: "M0,80 C80,120 160,40 280,80 C400,120 440,30 560,70 C680,110 760,40 960,80 L960,160 L0,160 Z",
+  diagonal: "M0,160 L960,60 L960,160 Z",
+  zigzag: "M0,80 L60,40 L120,80 L180,40 L240,80 L300,40 L360,80 L420,40 L480,80 L540,40 L600,80 L660,40 L720,80 L780,40 L840,80 L900,40 L960,80 L960,160 L0,160 Z",
+  "hand-drawn": "M0,72 C20,68 35,82 60,75 C85,68 95,84 125,76 C155,68 170,85 200,77 C230,69 245,83 275,75 C305,67 320,86 350,78 C380,70 395,82 425,74 C455,66 470,84 500,76 C530,68 545,83 575,75 C605,67 620,85 650,77 C680,69 695,82 725,74 C755,66 770,84 800,76 C830,68 845,83 875,75 C905,67 920,82 960,74 L960,160 L0,160 Z"
+};
+function SectionDivider({
+  from = "hsl(var(--background))",
+  to = "hsl(var(--background))",
+  flip = false,
+  className = "",
+  variant = "wave",
+  layers = false
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative -my-px w-full overflow-hidden", className),
+      style: { backgroundColor: from },
+      children: [
+        layers && /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 960 160",
+            preserveAspectRatio: "none",
+            className: "absolute inset-0 block w-full opacity-30",
+            style: {
+              height: "clamp(40px, 6vw, 80px)",
+              transform: flip ? "scaleY(-1) translateY(4px)" : "translateY(-4px)"
+            },
+            children: /* @__PURE__ */ jsx("path", { d: paths[variant], fill: to })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 960 160",
+            preserveAspectRatio: "none",
+            className: "relative block w-full",
+            style: {
+              height: "clamp(40px, 6vw, 80px)",
+              transform: flip ? "scaleY(-1)" : void 0
+            },
+            children: /* @__PURE__ */ jsx("path", { d: paths[variant], fill: to })
+          }
+        )
+      ]
+    }
+  );
+}
+function LogoCloud({
+  title,
+  logos,
+  marquee = false,
+  color = "white",
+  className
+}) {
+  const logoElements = logos.map((logo) => {
+    const img = /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: logo.src,
+        alt: logo.alt,
+        className: "h-8 max-w-[120px] object-contain opacity-50 grayscale transition-all duration-200 hover:opacity-100 hover:grayscale-0"
+      },
+      logo.alt
+    );
+    return logo.href ? /* @__PURE__ */ jsx("a", { href: logo.href, className: "flex items-center px-6", children: img }, logo.alt) : /* @__PURE__ */ jsx("div", { className: "flex items-center px-6", children: img }, logo.alt);
+  });
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, padding: "sm", className, children: [
+    title && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-6 text-center text-muted-foreground", children: title }),
+    marquee ? /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex animate-marquee", children: [
+      logoElements,
+      logoElements
+    ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-8", children: logoElements })
+  ] });
+}
+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 accentColors = [
+  "hsl(var(--brand))",
+  "hsl(var(--cta))",
+  "hsl(var(--section-blue))",
+  "hsl(12 85% 62%)",
+  "hsl(260 55% 68%)",
+  "hsl(25 75% 48%)"
+];
+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({
+  variant = "icon-top",
+  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",
+          variant === "bento" ? "sm:grid-cols-2 lg:grid-cols-3" : colMap[columns]
+        ),
+        children: features.map((feature, i) => /* @__PURE__ */ jsx(
+          FeatureCard,
+          {
+            feature,
+            variant,
+            index: i,
+            accentColor: accentColors[i % accentColors.length]
+          },
+          feature.title
+        ))
+      }
+    )
+  ] });
+}
+function FeatureCard({
+  feature,
+  variant,
+  index,
+  accentColor
+}) {
+  const isBentoFeatured = variant === "bento" && feature.featured;
+  if (variant === "icon-left") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex gap-4 border-brutal border-foreground bg-background p-5 shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg",
+        style: { borderLeftColor: accentColor, borderLeftWidth: "4px" },
+        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 }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-1 text-brand", children: feature.stat }),
+            /* @__PURE__ */ jsx("h3", { className: "brutal-h4 mb-1", children: feature.title }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: feature.description })
+          ] })
+        ]
+      }
+    );
+  }
+  if (variant === "numbered") {
+    return /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "brutal-display mb-2 block opacity-15",
+            style: { color: accentColor },
+            children: String(index + 1).padStart(2, "0")
+          }
+        ),
+        feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-1 text-brand", children: feature.stat }),
+        /* @__PURE__ */ jsx(CardTitle, { children: feature.title })
+      ] }),
+      /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(CardDescription, { children: feature.description }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        isBentoFeatured && "sm:col-span-2 bg-brand-muted"
+      ),
+      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",
+              style: { borderBottomColor: accentColor },
+              children: feature.icon
+            }
+          ),
+          feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-1 text-brand", children: feature.stat }),
+          /* @__PURE__ */ jsx(CardTitle, { children: feature.title })
+        ] }),
+        /* @__PURE__ */ jsx(CardContent, { children: /* @__PURE__ */ jsx(CardDescription, { children: feature.description }) })
+      ]
+    }
+  );
+}
+function useCountUp(target, inView) {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    if (!inView) return;
+    let frame;
+    const duration = 1500;
+    const start = performance.now();
+    function animate(now) {
+      const elapsed = now - start;
+      const progress = Math.min(elapsed / duration, 1);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setCount(Math.round(eased * target));
+      if (progress < 1) frame = requestAnimationFrame(animate);
+    }
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [target, inView]);
+  return count;
+}
+function StatItem({ stat, inView }) {
+  const count = useCountUp(stat.value, inView);
+  return /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsxs("p", { className: "brutal-display", children: [
+      stat.prefix,
+      count.toLocaleString(),
+      stat.suffix
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "brutal-label mt-2 text-muted-foreground", children: stat.label })
+  ] });
+}
+function StatsBar({ stats, color = "white", className }) {
+  const ref = useRef(null);
+  const [inView, setInView] = useState(false);
+  useEffect(() => {
+    if (!ref.current) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setInView(true);
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.3 }
+    );
+    observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(BrutalSection, { color, padding: "sm", className, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "grid gap-8",
+        stats.length === 2 && "grid-cols-2",
+        stats.length === 3 && "grid-cols-3",
+        stats.length >= 4 && "grid-cols-2 sm:grid-cols-4"
+      ),
+      children: stats.map((stat) => /* @__PURE__ */ jsx(StatItem, { stat, inView }, stat.label))
+    }
+  ) });
+}
+function StarRating({ rating }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex gap-0.5", children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "text-sm",
+        i < rating ? "text-amber-500" : "text-foreground/20"
+      ),
+      children: "\u2605"
+    },
+    i
+  )) });
+}
+function TestimonialCard({
+  t,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative break-inside-avoid border-brutal border-foreground bg-background p-5 text-foreground shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute top-3 right-4 select-none font-serif text-5xl leading-none text-foreground/[0.06]", children: "\u201C" }),
+        t.rating && /* @__PURE__ */ jsx("div", { className: "mb-3", children: /* @__PURE__ */ jsx(StarRating, { rating: t.rating }) }),
+        /* @__PURE__ */ jsx("p", { className: "relative mb-4 text-sm leading-relaxed", children: t.text }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          t.avatar ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: t.avatar,
+              alt: t.name,
+              className: "size-9 border-2 object-cover",
+              style: { borderColor: "hsl(var(--brand))" }
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "flex size-9 items-center justify-center border-2 font-bold text-brand-foreground",
+              style: {
+                borderColor: "hsl(var(--brand))",
+                backgroundColor: "hsl(var(--brand))"
+              },
+              children: t.name[0]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", children: t.name }),
+            (t.role || t.company) && /* @__PURE__ */ jsxs("p", { className: "truncate text-xs text-muted-foreground", children: [
+              t.role,
+              t.role && t.company && " \xB7 ",
+              t.company
+            ] }),
+            !t.role && !t.company && t.handle && /* @__PURE__ */ jsx("p", { className: "font-mono text-xs text-muted-foreground", children: t.handle })
+          ] }),
+          t.companyLogo && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: t.companyLogo,
+              alt: t.company || "",
+              className: "h-5 object-contain opacity-60"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function MasonryLayout({ testimonials }) {
+  return /* @__PURE__ */ jsx("div", { className: "columns-1 gap-6 sm:columns-2 lg:columns-3", children: testimonials.map((t, i) => /* @__PURE__ */ jsx(TestimonialCard, { t, className: "mb-6" }, i)) });
+}
+function FeaturedGridLayout({
+  testimonials
+}) {
+  const featured = testimonials.find((t) => t.featured) || testimonials[0];
+  const rest = testimonials.filter((t) => t !== featured);
+  return /* @__PURE__ */ jsxs("div", { className: "grid gap-6 lg:grid-cols-2", children: [
+    featured && /* @__PURE__ */ jsx(
+      TestimonialCard,
+      {
+        t: featured,
+        className: "flex flex-col justify-between p-8 lg:row-span-2"
+      }
+    ),
+    rest.map((t, i) => /* @__PURE__ */ jsx(TestimonialCard, { t }, i))
+  ] });
+}
+function CarouselLayout({ testimonials }) {
+  return /* @__PURE__ */ jsx("div", { className: "-mx-6 flex snap-x snap-mandatory gap-6 overflow-x-auto px-6 pb-4", children: testimonials.map((t, i) => /* @__PURE__ */ jsx(
+    TestimonialCard,
+    {
+      t,
+      className: "w-80 flex-none snap-center"
+    },
+    i
+  )) });
+}
+function WallOfLoveLayout({ testimonials }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative max-h-[600px] overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4", children: testimonials.map((t, i) => /* @__PURE__ */ jsx(TestimonialCard, { t }, i)) }),
+    /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-32 bg-gradient-to-t from-background to-transparent" })
+  ] });
+}
+function BrutalTestimonials({
+  badge,
+  headline,
+  testimonials,
+  variant = "masonry",
+  color = "blue",
+  pattern,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, pattern, className, children: [
+    (headline || badge) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
+      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 opacity-70", children: badge }),
+      headline && /* @__PURE__ */ jsx("h2", { className: "brutal-h2", children: headline })
+    ] }),
+    variant === "masonry" && /* @__PURE__ */ jsx(MasonryLayout, { testimonials }),
+    variant === "featured-grid" && /* @__PURE__ */ jsx(FeaturedGridLayout, { testimonials }),
+    variant === "carousel" && /* @__PURE__ */ jsx(CarouselLayout, { testimonials }),
+    variant === "wall-of-love" && /* @__PURE__ */ jsx(WallOfLoveLayout, { testimonials })
+  ] });
+}
+var badgeVariants = cva(
+  "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-md whitespace-nowrap font-bold transition-all [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "border-brutal border-foreground bg-primary px-3 py-1 text-xs text-primary-foreground shadow-brutal-sm",
+        secondary: "border-brutal border-foreground bg-secondary px-3 py-1 text-xs text-secondary-foreground shadow-brutal-sm",
+        brand: "border-brutal border-foreground bg-brand px-3 py-1 text-xs text-brand-foreground shadow-brutal-sm",
+        cta: "border-brutal border-foreground bg-cta px-3 py-1 text-xs text-cta-foreground shadow-brutal-sm",
+        outline: "border-brutal border-foreground bg-background px-3 py-1 text-xs text-foreground",
+        destructive: "border-brutal border-destructive bg-destructive/10 px-3 py-1 text-xs text-destructive",
+        ghost: "px-2 py-0.5 text-xs text-muted-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps(
+      {
+        className: cn(badgeVariants({ variant }), className)
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant
+    }
+  });
+}
+function PricingTable({
+  badge,
+  headline,
+  description,
+  tiers,
+  popularIndex,
+  billingToggle = true,
+  color = "white",
+  className
+}) {
+  const [annual, setAnnual] = useState(false);
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, className, children: [
+    (headline || badge) && /* @__PURE__ */ jsxs("div", { className: "mb-8 text-center", children: [
+      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-muted-foreground", children: badge }),
+      headline && /* @__PURE__ */ jsx("h2", { className: "brutal-h2 mb-4", children: headline }),
+      description && /* @__PURE__ */ jsx("p", { className: "brutal-body mx-auto max-w-lg text-muted-foreground", children: description })
+    ] }),
+    billingToggle && /* @__PURE__ */ jsxs("div", { className: "mb-10 flex items-center justify-center gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: cn("text-sm font-bold", !annual && "text-brand"), children: "Monthly" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setAnnual(!annual),
+          className: cn(
+            "relative h-8 w-14 border-brutal border-foreground transition-colors",
+            annual ? "bg-brand" : "bg-secondary"
+          ),
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "absolute top-1 size-6 border border-foreground bg-background transition-transform",
+                annual ? "left-7" : "left-1"
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: cn("text-sm font-bold", annual && "text-brand"), children: "Annual" }),
+      annual && /* @__PURE__ */ jsx(Badge, { variant: "cta", children: "Save 20%" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: cn(
+      "grid gap-6",
+      tiers.length === 2 && "mx-auto max-w-2xl sm:grid-cols-2",
+      tiers.length === 3 && "lg:grid-cols-3",
+      tiers.length >= 4 && "sm:grid-cols-2 lg:grid-cols-4"
+    ), children: tiers.map((tier, i) => {
+      const isPopular = i === popularIndex;
+      const price = annual ? tier.price.annual : tier.price.monthly;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "relative flex flex-col border-brutal border-foreground bg-background p-6 shadow-brutal",
+            isPopular && "border-brand shadow-brutal-lg ring-2 ring-brand z-10 scale-105"
+          ),
+          children: [
+            isPopular && /* @__PURE__ */ jsx(Badge, { variant: "brand", className: "absolute -top-3 left-1/2 -translate-x-1/2", children: "Popular" }),
+            /* @__PURE__ */ jsx("h3", { className: "brutal-h4 mb-1", children: tier.name }),
+            tier.description && /* @__PURE__ */ jsx("p", { className: "mb-4 text-sm text-muted-foreground", children: tier.description }),
+            /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+              /* @__PURE__ */ jsx("span", { className: "brutal-h1", children: typeof price === "number" ? `$${price}` : price }),
+              typeof price === "number" && /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "/mo" })
+            ] }),
+            /* @__PURE__ */ jsx("ul", { className: "mb-8 flex flex-1 flex-col gap-2", children: tier.features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+              /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-brand", children: "\u2713" }),
+              feature
+            ] }, feature)) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: tier.ctaVariant || (isPopular ? "cta" : "outline"),
+                size: "lg",
+                className: "w-full",
+                render: tier.ctaHref ? /* @__PURE__ */ jsx("a", { href: tier.ctaHref }) : void 0,
+                children: tier.ctaText
+              }
+            )
+          ]
+        },
+        tier.name
+      );
+    }) })
+  ] });
+}
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Root,
+    {
+      "data-slot": "accordion",
+      className: cn("flex w-full flex-col", className),
+      ...props
+    }
+  );
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-brutal border-foreground rounded-lg mb-2 px-3", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    Accordion$1.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-bold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }),
+        /* @__PURE__ */ jsx(ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Panel,
+    {
+      "data-slot": "accordion-content",
+      className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function FAQ({
+  badge,
+  headline,
+  items,
+  color = "white",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, className, children: [
+    (headline || badge) && /* @__PURE__ */ jsxs("div", { className: "mb-10 max-w-2xl", children: [
+      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-muted-foreground", children: badge }),
+      headline && /* @__PURE__ */ jsx("h2", { className: "brutal-h2", children: headline })
+    ] }),
+    /* @__PURE__ */ jsx(Accordion, { className: "mx-auto max-w-2xl", children: items.map((item, i) => /* @__PURE__ */ jsxs(
+      AccordionItem,
+      {
+        value: `faq-${i}`,
+        className: cn(
+          "border-brutal border-foreground mb-3 px-5",
+          i % 2 === 0 ? "bg-background" : "bg-secondary"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(AccordionTrigger, { className: "brutal-h4 py-4 text-left", children: item.question }),
+          /* @__PURE__ */ jsx(AccordionContent, { className: "brutal-body pb-4 text-muted-foreground", children: item.answer })
+        ]
+      },
+      i
+    )) })
+  ] });
+}
+function CTAButtons({
+  ctaText,
+  ctaHref = "#",
+  ctaVariant = "cta",
+  secondaryText,
+  secondaryHref
+}) {
+  return /* @__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
+      }
+    )
+  ] });
+}
+function CenteredCTA(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
+    /* @__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__ */ jsx(
+      CTAButtons,
+      {
+        ctaText: props.ctaText,
+        ctaHref: props.ctaHref,
+        ctaVariant: props.ctaVariant,
+        secondaryText: props.secondaryText,
+        secondaryHref: props.secondaryHref
+      }
+    )
+  ] });
+}
+function SplitCTA(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "grid items-center gap-12 lg:grid-cols-2", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__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__ */ jsx(
+          Button,
+          {
+            variant: props.ctaVariant || "cta",
+            size: "xl",
+            render: /* @__PURE__ */ jsx("a", { href: props.ctaHref || "#" }),
+            children: props.ctaText
+          }
+        ),
+        props.secondaryText && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "lg",
+            render: /* @__PURE__ */ jsx("a", { href: props.secondaryHref || "#" }),
+            children: props.secondaryText
+          }
+        )
+      ] })
+    ] }),
+    props.visual && /* @__PURE__ */ jsx("div", { children: props.visual })
+  ] });
+}
+function WithVisualCTA(props) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    props.visual && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center opacity-10", children: props.visual }),
+    /* @__PURE__ */ jsxs("div", { className: "relative mx-auto max-w-2xl text-center", children: [
+      /* @__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__ */ jsx(
+        CTAButtons,
+        {
+          ctaText: props.ctaText,
+          ctaHref: props.ctaHref,
+          ctaVariant: props.ctaVariant,
+          secondaryText: props.secondaryText,
+          secondaryHref: props.secondaryHref
+        }
+      )
+    ] })
+  ] });
+}
+function FloatingCardCTA(props) {
+  return /* @__PURE__ */ jsx("div", { className: "relative z-10 -mt-16", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl border-brutal border-foreground bg-background p-8 text-center text-foreground shadow-brutal-lg", children: [
+    /* @__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__ */ jsx(
+      CTAButtons,
+      {
+        ctaText: props.ctaText,
+        ctaHref: props.ctaHref,
+        ctaVariant: props.ctaVariant,
+        secondaryText: props.secondaryText,
+        secondaryHref: props.secondaryHref
+      }
+    )
+  ] }) });
+}
+function BrutalCTA({
+  variant = "centered",
+  color = "black",
+  className,
+  pattern,
+  ...props
+}) {
+  if (variant === "floating-card") {
+    return /* @__PURE__ */ jsx("div", { className: cn("brutal-container px-6", className), children: /* @__PURE__ */ jsx(FloatingCardCTA, { ...props, variant, color }) });
+  }
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, pattern, className, children: [
+    variant === "centered" && /* @__PURE__ */ jsx(CenteredCTA, { ...props, variant, color }),
+    variant === "split" && /* @__PURE__ */ jsx(SplitCTA, { ...props, variant, color }),
+    variant === "with-visual" && /* @__PURE__ */ jsx(WithVisualCTA, { ...props, variant, color })
+  ] });
+}
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base font-medium shadow-brutal-sm transition-all outline-none placeholder:text-muted-foreground focus:shadow-brutal focus:-translate-x-0.5 focus:-translate-y-0.5 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SocialsRow({
+  socials
+}) {
+  const items = [
+    { key: "twitter", label: "Twitter", url: socials.twitter },
+    { key: "github", label: "GitHub", url: socials.github },
+    { key: "linkedin", label: "LinkedIn", url: socials.linkedin },
+    { key: "discord", label: "Discord", url: socials.discord }
+  ].filter((s) => s.url);
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: items.map((s) => /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: s.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "text-sm font-bold transition-colors hover:text-muted-foreground",
+      children: s.label
+    },
+    s.key
+  )) });
+}
+function NewsletterSection({
+  newsletter
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "mb-10 border-b-brutal border-foreground pb-10", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-lg text-center", children: [
+    /* @__PURE__ */ jsx("h3", { className: "brutal-h4 mb-2", children: newsletter.headline || "Stay in the loop" }),
+    newsletter.description && /* @__PURE__ */ jsx("p", { className: "brutal-caption mb-4", children: newsletter.description }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (e) => e.preventDefault(),
+        className: "flex gap-2",
+        children: [
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "email",
+              placeholder: newsletter.placeholder || "you@email.com",
+              className: "flex-1"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { variant: "default", size: "default", type: "submit", children: newsletter.buttonText || "Subscribe" })
+        ]
+      }
+    )
+  ] }) });
+}
+function MegaContent({
+  logo,
+  tagline,
+  columns,
+  socials
+}) {
+  return /* @__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: "mb-4 text-sm text-muted-foreground", children: tagline }),
+      socials && /* @__PURE__ */ jsx(SocialsRow, { socials })
+    ] }),
+    /* @__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)) })
+  ] });
+}
+function MinimalContent({
+  logo,
+  columns,
+  socials
+}) {
+  const allLinks = columns.flatMap((col) => col.links);
+  return /* @__PURE__ */ jsxs("div", { className: "mb-6 flex flex-col items-center gap-4 sm:flex-row sm:justify-between", children: [
+    /* @__PURE__ */ jsx("div", { className: "text-xl font-black", children: logo }),
+    /* @__PURE__ */ jsx("nav", { className: "flex flex-wrap items-center justify-center gap-x-6 gap-y-2", children: allLinks.map((link) => /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: link.href,
+        className: "text-sm font-medium transition-colors hover:text-muted-foreground",
+        children: link.label
+      },
+      link.href
+    )) }),
+    socials && /* @__PURE__ */ jsx(SocialsRow, { socials })
+  ] });
+}
+function BrutalFooter({
+  logo,
+  tagline,
+  columns,
+  bottomLeft,
+  bottomRight,
+  variant = "mega",
+  socials,
+  newsletter,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      className: cn(
+        "w-full border-t-4 bg-background px-6 py-12 text-foreground",
+        className
+      ),
+      style: { borderTopColor: "hsl(var(--brand))" },
+      children: /* @__PURE__ */ jsxs("div", { className: "brutal-container", children: [
+        variant === "newsletter" && newsletter && /* @__PURE__ */ jsx(NewsletterSection, { newsletter }),
+        variant === "minimal" ? /* @__PURE__ */ jsx(MinimalContent, { logo, columns, socials }) : /* @__PURE__ */ jsx(
+          MegaContent,
+          {
+            logo,
+            tagline,
+            columns,
+            socials
+          }
+        ),
+        /* @__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() })
+        ] })
+      ] })
+    }
+  );
+}
+function SaaSLaunchTemplate({
+  brand,
+  logo,
+  nav,
+  hero,
+  logos,
+  features,
+  stats,
+  testimonials,
+  pricing,
+  faq,
+  cta,
+  footer
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(BrutalNav, { logo, links: nav.links, ctaText: nav.ctaText, ctaHref: nav.ctaHref, variant: "solid" }),
+    /* @__PURE__ */ jsx(
+      BrutalHero,
+      {
+        variant: "split",
+        badge: hero.badge,
+        headline: hero.headline,
+        description: hero.description,
+        ctaText: hero.ctaText,
+        ctaHref: hero.ctaHref,
+        secondaryText: hero.secondaryText,
+        secondaryHref: hero.secondaryHref,
+        visual: hero.visual,
+        proof: hero.proof,
+        color: "brand",
+        pattern: "noise"
+      }
+    ),
+    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand))", to: "hsl(var(--background))", variant: "wave" }),
+    logos && logos.length > 0 && /* @__PURE__ */ jsx(LogoCloud, { logos, marquee: true, title: "Trusted by teams everywhere" }),
+    /* @__PURE__ */ jsx(
+      BrutalFeatureGrid,
+      {
+        variant: "bento",
+        badge: features.badge,
+        headline: features.headline,
+        description: features.description,
+        features: features.items,
+        color: "white"
+      }
+    ),
+    stats && stats.length > 0 && /* @__PURE__ */ jsx(StatsBar, { stats, color: "brand" }),
+    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand))", to: "hsl(var(--section-blue))", variant: "torn-paper" }),
+    /* @__PURE__ */ jsx(
+      BrutalTestimonials,
+      {
+        variant: "wall-of-love",
+        badge: testimonials.badge,
+        headline: testimonials.headline,
+        testimonials: testimonials.items,
+        color: "blue"
+      }
+    ),
+    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--section-blue))", to: "hsl(var(--background))", variant: "wave" }),
+    pricing && /* @__PURE__ */ jsx(
+      PricingTable,
+      {
+        badge: pricing.badge,
+        headline: pricing.headline,
+        description: pricing.description,
+        tiers: pricing.tiers,
+        popularIndex: pricing.popularIndex,
+        color: "white"
+      }
+    ),
+    faq && faq.length > 0 && /* @__PURE__ */ jsx(FAQ, { badge: "FAQ", headline: "Common Questions", items: faq, color: "gray" }),
+    /* @__PURE__ */ jsx(
+      BrutalCTA,
+      {
+        variant: "with-visual",
+        headline: cta.headline,
+        description: cta.description,
+        ctaText: cta.ctaText,
+        ctaHref: cta.ctaHref,
+        secondaryText: cta.secondaryText,
+        secondaryHref: cta.secondaryHref,
+        color: "black",
+        pattern: "gradient-mesh"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BrutalFooter,
+      {
+        variant: "mega",
+        logo,
+        tagline: footer.tagline,
+        columns: footer.columns,
+        socials: footer.socials
+      }
+    )
+  ] });
+}
+function Newsletter({
+  headline = "Stay in the loop",
+  description,
+  placeholder = "you@example.com",
+  buttonText = "Subscribe",
+  onSubmit,
+  color = "white",
+  className
+}) {
+  return /* @__PURE__ */ jsx(BrutalSection, { color, padding: "sm", className, children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-md border-brutal border-foreground bg-background p-8 text-foreground shadow-brutal-lg", children: [
+    /* @__PURE__ */ jsx("h3", { className: "brutal-h3 mb-2", children: headline }),
+    description && /* @__PURE__ */ jsx("p", { className: "brutal-body mb-6 text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (e) => {
+          e.preventDefault();
+          const form = e.target;
+          const email = new FormData(form).get("email");
+          onSubmit?.(email);
+        },
+        className: "flex gap-3",
+        children: [
+          /* @__PURE__ */ jsx(Input, { type: "email", name: "email", placeholder, required: true, className: "flex-1" }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: "cta", children: buttonText })
+        ]
+      }
+    )
+  ] }) });
+}
+function StudioTemplate({
+  logo,
+  nav,
+  hero,
+  features,
+  testimonials,
+  newsletter,
+  cta,
+  footer
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(BrutalNav, { logo, links: nav.links, ctaText: nav.ctaText, ctaHref: nav.ctaHref, variant: "floating-pill" }),
+    /* @__PURE__ */ jsx(
+      BrutalHero,
+      {
+        variant: "asymmetric",
+        badge: hero.badge,
+        headline: hero.headline,
+        description: hero.description,
+        ctaText: hero.ctaText,
+        ctaHref: hero.ctaHref,
+        visual: hero.visual,
+        proof: hero.proof,
+        color: "brand",
+        pattern: "grain"
+      }
+    ),
+    /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--brand))", to: "hsl(var(--background))", variant: "brush-stroke" }),
+    /* @__PURE__ */ jsx(
+      BrutalFeatureGrid,
+      {
+        variant: "numbered",
+        badge: features.badge,
+        headline: features.headline,
+        description: features.description,
+        features: features.items,
+        color: "white"
+      }
+    ),
+    testimonials && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--background))", to: "hsl(var(--section-gray))", variant: "diagonal" }),
+      /* @__PURE__ */ jsx(
+        BrutalTestimonials,
+        {
+          variant: "featured-grid",
+          badge: testimonials.badge,
+          headline: testimonials.headline,
+          testimonials: testimonials.items,
+          color: "gray"
+        }
+      ),
+      /* @__PURE__ */ jsx(SectionDivider, { from: "hsl(var(--section-gray))", to: "hsl(var(--background))", variant: "diagonal", flip: true })
+    ] }),
+    newsletter && /* @__PURE__ */ jsx(
+      Newsletter,
+      {
+        headline: newsletter.headline,
+        description: newsletter.description,
+        onSubmit: newsletter.onSubmit
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BrutalCTA,
+      {
+        variant: "floating-card",
+        headline: cta.headline,
+        description: cta.description,
+        ctaText: cta.ctaText,
+        ctaHref: cta.ctaHref,
+        color: "brand"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      BrutalFooter,
+      {
+        variant: "minimal",
+        logo,
+        tagline: footer.tagline,
+        columns: footer.columns
+      }
+    )
+  ] });
+}
+var AppShellContext = createContext({
+  collapsed: false,
+  setCollapsed: () => {
+  },
+  mobileOpen: false,
+  setMobileOpen: () => {
+  }
+});
+var useAppShell = () => useContext(AppShellContext);
+function AppShell({
+  sidebar,
+  header,
+  children,
+  defaultCollapsed = false,
+  className
+}) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  return /* @__PURE__ */ jsx(
+    AppShellContext.Provider,
+    {
+      value: { collapsed, setCollapsed, mobileOpen, setMobileOpen },
+      children: /* @__PURE__ */ jsxs("div", { className: cn("flex h-screen bg-background", className), children: [
+        /* @__PURE__ */ jsx(
+          "aside",
+          {
+            className: cn(
+              "hidden border-r-brutal border-foreground bg-background transition-all duration-200 md:block",
+              collapsed ? "w-16" : "w-64"
+            ),
+            children: sidebar
+          }
+        ),
+        /* @__PURE__ */ jsx(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-64 p-0 md:hidden", children: [
+          /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation" }),
+          sidebar
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [
+          header && /* @__PURE__ */ jsxs("header", { className: "flex h-14 items-center gap-4 border-b-brutal border-foreground px-6", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "md:hidden",
+                onClick: () => setMobileOpen(true),
+                children: "\u2630"
+              }
+            ),
+            header
+          ] }),
+          /* @__PURE__ */ jsx("main", { className: "flex-1 overflow-auto p-6", children })
+        ] })
+      ] })
+    }
+  );
+}
+function Sidebar({
+  logo,
+  logoCollapsed,
+  groups,
+  footer,
+  className
+}) {
+  const { collapsed, setCollapsed } = useAppShell();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex h-14 items-center justify-between border-b-brutal border-foreground px-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "font-black", children: collapsed ? logoCollapsed || logo : logo }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setCollapsed(!collapsed),
+          className: "hidden text-xs text-muted-foreground hover:text-foreground md:block",
+          children: collapsed ? "\u2192" : "\u2190"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("nav", { className: "flex-1 overflow-auto p-2", children: groups.map((group, gi) => /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+      group.title && !collapsed && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-2 px-2 text-muted-foreground", children: group.title }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: group.links.map((link) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: link.href,
+          className: cn(
+            "flex items-center gap-3 rounded-sm px-3 py-2 text-sm font-medium transition-colors",
+            link.active ? "bg-brand text-brand-foreground" : "hover:bg-secondary",
+            collapsed && "justify-center"
+          ),
+          title: collapsed ? link.label : void 0,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "size-5 shrink-0", children: link.icon }),
+            !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.label }),
+              link.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: "border border-foreground bg-brand-muted px-1.5 font-mono text-[10px] font-bold", children: link.badge })
+            ] })
+          ]
+        },
+        link.href
+      )) })
+    ] }, gi)) }),
+    footer && /* @__PURE__ */ jsx("div", { className: "border-t-brutal border-foreground p-3", children: footer })
+  ] });
+}
+function SearchBar({
+  placeholder = "Search...",
+  shortcut = "\u2318K",
+  value,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        type: "search",
+        placeholder,
+        value,
+        onChange: (e) => onChange?.(e.target.value),
+        className: "pr-12"
+      }
+    ),
+    shortcut && /* @__PURE__ */ jsx("span", { className: "absolute right-2 top-1/2 -translate-y-1/2 border border-foreground bg-secondary px-1.5 font-mono text-[10px] text-muted-foreground", children: shortcut })
+  ] });
+}
+function DropdownMenu({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu$1.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu$1.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  align = "start",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(
+    Menu$1.Positioner,
+    {
+      className: "isolate z-50 outline-none",
+      align,
+      alignOffset,
+      side,
+      sideOffset,
+      children: /* @__PURE__ */ jsx(
+        Menu$1.Popup,
+        {
+          "data-slot": "dropdown-menu-content",
+          className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border-brutal border-foreground bg-popover p-1 text-popover-foreground shadow-brutal duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
+          ...props
+        }
+      )
+    }
+  ) });
+}
+function DropdownMenuGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(Menu$1.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu$1.GroupLabel,
+    {
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu$1.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Menu$1.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...props
+    }
+  );
+}
+function Avatar({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Root,
+    {
+      "data-slot": "avatar",
+      "data-size": size,
+      className: cn(
+        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarImage({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Image,
+    {
+      "data-slot": "avatar-image",
+      className: cn(
+        "aspect-square size-full rounded-full object-cover",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Avatar$1.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: cn(
+        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function UserMenu({ name, email, avatar, items, onSignOut }) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxs(
+      DropdownMenuTrigger,
+      {
+        className: "inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-sm font-medium outline-none hover:bg-secondary",
+        children: [
+          /* @__PURE__ */ jsxs(Avatar, { className: "size-7", children: [
+            avatar && /* @__PURE__ */ jsx(AvatarImage, { src: avatar, alt: name }),
+            /* @__PURE__ */ jsx(AvatarFallback, { children: name[0] })
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "hidden text-sm font-medium sm:inline", children: name })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [
+      /* @__PURE__ */ jsxs(DropdownMenuLabel, { children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", children: name }),
+        email && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: email })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      items && /* @__PURE__ */ jsx(DropdownMenuGroup, { children: items.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: item.onClick, children: item.href ? /* @__PURE__ */ jsx("a", { href: item.href, children: item.label }) : item.label }, item.label)) }),
+      onSignOut && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: onSignOut, children: "Sign out" })
+      ] })
+    ] })
+  ] });
+}
+function StatCard({
+  label,
+  value,
+  change,
+  changeLabel,
+  icon,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-brutal border-foreground bg-background p-5 shadow-brutal",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("p", { className: "brutal-label text-muted-foreground", children: label }),
+          icon && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: icon })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "brutal-h1 mb-1", children: value }),
+        change !== void 0 && /* @__PURE__ */ jsxs(
+          "p",
+          {
+            className: cn(
+              "flex items-center gap-1 font-mono text-xs font-bold",
+              change >= 0 ? "text-cta" : "text-destructive"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { children: change >= 0 ? "\u2191" : "\u2193" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                Math.abs(change),
+                "%"
+              ] }),
+              changeLabel && /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: changeLabel })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var toggleVariants = cva(
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:border-brutal aria-pressed:border-foreground aria-pressed:bg-muted aria-pressed:shadow-brutal-sm data-[state=on]:border-brutal data-[state=on]:border-foreground data-[state=on]:bg-muted data-[state=on]:shadow-brutal-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-brutal border-foreground bg-transparent shadow-brutal-sm hover:bg-muted"
+      },
+      size: {
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+        lg: "h-9 min-w-9 px-2.5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var ToggleGroupContext = React.createContext({
+  size: "default",
+  variant: "default",
+  spacing: 0,
+  orientation: "horizontal"
+});
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  spacing = 0,
+  orientation = "horizontal",
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroup$1,
+    {
+      "data-slot": "toggle-group",
+      "data-variant": variant,
+      "data-size": size,
+      "data-spacing": spacing,
+      "data-orientation": orientation,
+      style: { "--gap": spacing },
+      className: cn(
+        "group/toggle-group flex w-fit flex-row items-center gap-[var(--gap)] rounded-lg border-brutal border-foreground data-vertical:flex-col data-vertical:items-stretch",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ToggleGroupContext.Provider,
+        {
+          value: { variant, size, spacing, orientation },
+          children
+        }
+      )
+    }
+  );
+}
+function ToggleGroupItem({
+  className,
+  children,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  const context = React.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx(
+    Toggle,
+    {
+      "data-slot": "toggle-group-item",
+      "data-variant": context.variant || variant,
+      "data-size": context.size || size,
+      "data-spacing": context.spacing,
+      className: cn(
+        "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t",
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size
+        }),
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+var viewLabels = {
+  table: "Table",
+  kanban: "Board",
+  grid: "Grid",
+  calendar: "Calendar",
+  list: "List"
+};
+function ViewSwitcher({
+  value,
+  onChange,
+  views = ["table", "kanban", "grid", "calendar", "list"],
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    ToggleGroup,
+    {
+      value: [value],
+      onValueChange: (vals) => {
+        if (vals.length > 0) {
+          onChange(vals[0]);
+        }
+      },
+      className,
+      children: views.map((view) => /* @__PURE__ */ jsx(ToggleGroupItem, { value: view, className: "brutal-label text-xs", children: viewLabels[view] }, view))
+    }
+  );
+}
+function DashboardTemplate({
+  logo,
+  logoCollapsed,
+  sidebarGroups,
+  user,
+  userMenuItems,
+  onSignOut,
+  stats,
+  views,
+  children,
+  sidebarFooter
+}) {
+  const [view, setView] = useState("table");
+  return /* @__PURE__ */ jsxs(
+    AppShell,
+    {
+      sidebar: /* @__PURE__ */ jsx(
+        Sidebar,
+        {
+          logo,
+          logoCollapsed,
+          groups: sidebarGroups,
+          footer: sidebarFooter
+        }
+      ),
+      header: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SearchBar, { className: "flex-1 max-w-sm" }),
+        /* @__PURE__ */ jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsx(
+          UserMenu,
+          {
+            name: user.name,
+            email: user.email,
+            avatar: user.avatar,
+            items: userMenuItems,
+            onSignOut
+          }
+        ) })
+      ] }),
+      children: [
+        stats && stats.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4", children: stats.map((stat) => /* @__PURE__ */ jsx(StatCard, { ...stat }, stat.label)) }),
+        views && views.length > 1 && /* @__PURE__ */ jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsx(ViewSwitcher, { value: view, onChange: setView, views }) }),
+        children
+      ]
+    }
+  );
+}
+
+export { DashboardTemplate, SaaSLaunchTemplate, StudioTemplate };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map