@snow-labs/brutal-ui 0.3.2 → 0.5.0

package/dist/components/brutal/index.js

@@ -4,12 +4,12 @@ import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 import { useState, useEffect, useRef } from 'react';
 import { Dialog } from '@base-ui/react/dialog';
 import { Menu, XIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import { Input as Input$1 } from '@base-ui/react/input';
-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';
 
 // src/lib/utils.ts
@@ -21,8 +21,8 @@ var colorMap = {
   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",
+  gray: "bg-muted text-foreground",
+  cream: "bg-secondary text-foreground",
   black: "bg-foreground text-background",
   cta: "bg-cta"
 };
@@ -360,6 +360,14 @@ function FeatureCard({
   index
 }) {
   const isBentoFeatured = variant === "bento" && feature.featured;
+  if (variant === "minimal") {
+    return /* @__PURE__ */ jsxs("div", { className: "group flex flex-col gap-3 border-l-4 border-l-brand py-1 pl-5", children: [
+      feature.icon && /* @__PURE__ */ jsx("div", { className: "text-2xl", children: feature.icon }),
+      feature.stat && /* @__PURE__ */ jsx("p", { className: "brutal-label text-brand", children: feature.stat }),
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold", children: feature.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: feature.description })
+    ] });
+  }
   if (variant === "icon-left") {
     return /* @__PURE__ */ jsxs("div", { className: "flex gap-4 border-brutal border-foreground border-l-4 border-l-brand bg-background p-5 shadow-brutal transition-all duration-150 hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg", children: [
       feature.icon && /* @__PURE__ */ jsx("div", { className: "flex size-12 shrink-0 items-center justify-center border-brutal border-foreground bg-brand-muted text-2xl shadow-brutal-sm", children: feature.icon }),
@@ -397,13 +405,99 @@ function FeatureCard({
     }
   );
 }
+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 BrutalFeatureShowcase({
+  badge,
+  headline,
+  description,
+  visual,
+  features,
+  reversed = false,
+  color = "white",
+  pattern,
+  className
+}) {
+  return /* @__PURE__ */ jsx(BrutalSection, { color, pattern, className, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "grid items-center gap-12 lg:grid-cols-2 lg:gap-20",
+        reversed && "lg:[&>*:first-child]:order-2"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+          badge && /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "w-fit font-mono text-xs uppercase tracking-widest", children: badge }),
+          /* @__PURE__ */ jsx("h2", { className: "brutal-h2", children: headline }),
+          /* @__PURE__ */ jsx("p", { className: "brutal-body text-muted-foreground", children: description }),
+          features && features.length > 0 && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3 pt-2", children: features.map((f, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
+            f.icon ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-6 shrink-0 items-center justify-center border-brutal border-foreground bg-brand-muted text-sm", children: f.icon }) : /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-6 shrink-0 items-center justify-center border-brutal border-foreground bg-brand text-sm text-brand-foreground font-bold", children: "\u2713" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: f.text })
+          ] }, i)) })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "relative",
+              reversed ? "-rotate-1" : "rotate-1",
+              "transform transition-transform duration-300 hover:rotate-0"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 translate-x-3 translate-y-3 border-brutal border-foreground bg-brand opacity-20" }),
+              /* @__PURE__ */ jsx("div", { className: "relative border-brutal border-foreground bg-background shadow-brutal-lg", children: visual })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+}
 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"
+        i < rating ? "text-brand" : "text-foreground/20"
       ),
       children: "\u2605"
     },
@@ -431,17 +525,12 @@ function TestimonialCard({
             {
               src: t.avatar,
               alt: t.name,
-              className: "size-9 border-2 object-cover",
-              style: { borderColor: "hsl(var(--brand))" }
+              className: "size-9 border-2 border-brand object-cover"
             }
           ) : /* @__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))"
-              },
+              className: "flex size-9 items-center justify-center border-2 border-brand bg-brand font-bold text-brand-foreground",
               children: t.name[0]
             }
           ),
@@ -507,7 +596,7 @@ function BrutalTestimonials({
   headline,
   testimonials,
   variant = "masonry",
-  color = "blue",
+  color = "white",
   pattern,
   className
 }) {
@@ -534,7 +623,7 @@ function BrutalIntegrationGrid({
     /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center", children: [
       badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 opacity-70", children: badge }),
       /* @__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 })
+      description && /* @__PURE__ */ jsx("p", { className: "brutal-body mx-auto max-w-lg opacity-80", children: description })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-center gap-6", children: integrations.map((item) => {
       const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -692,6 +781,54 @@ function BrutalCTA({
     variant === "with-visual" && /* @__PURE__ */ jsx(WithVisualCTA, { ...props, variant, color })
   ] });
 }
+function CellValue({ value }) {
+  if (typeof value === "boolean") {
+    return value ? /* @__PURE__ */ jsx("span", { className: "inline-flex size-7 items-center justify-center border-brutal border-foreground bg-brand font-bold text-brand-foreground text-sm", children: "\u2713" }) : /* @__PURE__ */ jsx("span", { className: "inline-flex size-7 items-center justify-center border-brutal border-foreground/20 text-sm text-muted-foreground", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: value });
+}
+function BrutalComparisonTable({
+  badge,
+  headline,
+  description,
+  usName,
+  themName,
+  features,
+  color = "white",
+  pattern,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(BrutalSection, { color, pattern, className, children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-12 max-w-2xl", children: [
+      badge && /* @__PURE__ */ jsx("p", { className: "brutal-label mb-4 text-brand", 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: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { className: "border-b-brutal border-foreground px-4 py-3 text-left text-sm font-medium text-muted-foreground", children: "Feature" }),
+        /* @__PURE__ */ jsx("th", { className: "border-b-brutal border-foreground bg-brand-muted px-4 py-3 text-center", children: /* @__PURE__ */ jsx("span", { className: "brutal-label text-brand", children: usName }) }),
+        /* @__PURE__ */ jsx("th", { className: "border-b-brutal border-foreground px-4 py-3 text-center", children: /* @__PURE__ */ jsx("span", { className: "brutal-label text-muted-foreground", children: themName }) })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: features.map((f, i) => /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          className: cn(
+            "transition-colors",
+            f.highlight && "bg-brand-muted/50",
+            i % 2 === 0 && !f.highlight && "bg-muted/30"
+          ),
+          children: [
+            /* @__PURE__ */ jsx("td", { className: "border-b border-foreground/10 px-4 py-3 text-sm font-medium", children: f.name }),
+            /* @__PURE__ */ jsx("td", { className: "border-b border-foreground/10 bg-brand-muted/30 px-4 py-3 text-center", children: /* @__PURE__ */ jsx(CellValue, { value: f.us }) }),
+            /* @__PURE__ */ jsx("td", { className: "border-b border-foreground/10 px-4 py-3 text-center", children: /* @__PURE__ */ jsx(CellValue, { value: f.them }) })
+          ]
+        },
+        i
+      )) })
+    ] }) })
+  ] });
+}
 function Sheet({ ...props }) {
   return /* @__PURE__ */ jsx(Dialog.Root, { "data-slot": "sheet", ...props });
 }
@@ -792,7 +929,7 @@ function BrutalNav({
     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"
+      isScrolled ? "bg-background/80 text-foreground backdrop-blur-md border-b border-border/30" : "bg-transparent text-foreground"
     ),
     "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"
   };
@@ -1001,10 +1138,9 @@ function BrutalFooter({
     "footer",
     {
       className: cn(
-        "w-full border-t-4 bg-background px-6 py-12 text-foreground",
+        "w-full border-t-4 border-t-brand 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(
@@ -1024,46 +1160,6 @@ function BrutalFooter({
     }
   );
 }
-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,
@@ -1203,7 +1299,7 @@ function StatItem({ stat, inView }) {
       count.toLocaleString(),
       stat.suffix
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "brutal-label mt-2 text-muted-foreground", children: stat.label })
+    /* @__PURE__ */ jsx("p", { className: "brutal-label mt-2 opacity-70", children: stat.label })
   ] });
 }
 function StatsBar({ stats, color = "white", className }) {
@@ -1362,7 +1458,127 @@ function Newsletter({
     )
   ] }) });
 }
+function MockupWindow({
+  children,
+  title = "app.example.com",
+  variant = "browser",
+  className
+}) {
+  if (variant === "phone") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mx-auto w-[280px] overflow-hidden rounded-[2rem] border-brutal border-foreground bg-background shadow-brutal-lg",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center bg-foreground py-2", children: /* @__PURE__ */ jsx("div", { className: "h-5 w-28 rounded-full bg-background/20" }) }),
+          /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center bg-foreground py-3", children: /* @__PURE__ */ jsx("div", { className: "h-1 w-24 rounded-full bg-background/30" }) })
+        ]
+      }
+    );
+  }
+  if (variant === "terminal") {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "overflow-hidden rounded-lg border-brutal border-foreground shadow-brutal-lg",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b-brutal border-foreground bg-foreground px-4 py-2.5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+              /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-red-500" }),
+              /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-yellow-500" }),
+              /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full bg-green-500" })
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "ml-2 font-mono text-xs text-background/60", children: title })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "bg-foreground text-background", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "overflow-hidden rounded-lg border-brutal border-foreground shadow-brutal-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-b-brutal border-foreground bg-muted px-4 py-2.5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full border border-foreground/20 bg-red-400" }),
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full border border-foreground/20 bg-yellow-400" }),
+            /* @__PURE__ */ jsx("div", { className: "size-3 rounded-full border border-foreground/20 bg-green-400" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-sm rounded-md border border-foreground/10 bg-background px-3 py-1 text-center font-mono text-xs text-muted-foreground", children: title }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-[54px]" }),
+          " "
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "bg-background", children })
+      ]
+    }
+  );
+}
+var speedMap = {
+  slow: "60s",
+  normal: "30s",
+  fast: "15s"
+};
+function Marquee({
+  children,
+  speed = "normal",
+  direction = "left",
+  pauseOnHover = true,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "group flex overflow-hidden border-y-brutal border-foreground bg-foreground py-3",
+        className
+      ),
+      children: [0, 1].map((copy) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "aria-hidden": copy === 1,
+          className: cn(
+            "flex shrink-0 items-center gap-8",
+            pauseOnHover && "group-hover:[animation-play-state:paused]"
+          ),
+          style: {
+            animation: `marquee ${speedMap[speed]} linear infinite`,
+            animationDirection: direction === "right" ? "reverse" : "normal"
+          },
+          children: [
+            children,
+            /* @__PURE__ */ jsx("span", { className: "mx-4 text-background/30 select-none", children: "\u2022" })
+          ]
+        },
+        copy
+      ))
+    }
+  );
+}
+function MarqueeItem({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center gap-2 whitespace-nowrap font-bold text-background",
+        className
+      ),
+      children
+    }
+  );
+}
 
-export { BrutalCTA, BrutalFeatureGrid, BrutalFooter, BrutalHero, BrutalIntegrationGrid, BrutalNav, BrutalSection, BrutalTestimonials, FAQ, LogoCloud, Newsletter, PricingTable, SectionDivider, StatsBar, SectionDivider as WaveDivider };
+export { BrutalCTA, BrutalComparisonTable, BrutalFeatureGrid, BrutalFeatureShowcase, BrutalFooter, BrutalHero, BrutalIntegrationGrid, BrutalNav, BrutalSection, BrutalTestimonials, FAQ, LogoCloud, Marquee, MarqueeItem, MockupWindow, Newsletter, PricingTable, SectionDivider, StatsBar, SectionDivider as WaveDivider };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map