@snow-labs/brutal-ui 0.1.0 → 0.2.0

package/dist/templates/studio.js

@@ -0,0 +1,1129 @@
+"use client";
+import { useState, useEffect } 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 } from 'lucide-react';
+import { Input as Input$1 } from '@base-ui/react/input';
+
+// 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 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 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 })
+  ] });
+}
+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 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 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 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 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
+      }
+    )
+  ] });
+}
+
+export { StudioTemplate };
+//# sourceMappingURL=studio.js.map
+//# sourceMappingURL=studio.js.map