@snow-labs/brutal-ui 0.1.1 → 0.2.1

package/dist/components/brutal/pricing-table.js

@@ -0,0 +1,251 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { useState } from 'react';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        // Primary: Black bg, white text, offset shadow
+        default: "border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // CTA: Mint green bg — the Bannerbear signature
+        cta: "border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Brand: Dynamic brand color bg
+        brand: "border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Outline: White bg, black border, offset shadow
+        outline: "border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Secondary: Light bg, border, smaller shadow
+        secondary: "border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none",
+        // Ghost: No border/shadow, subtle hover
+        ghost: "hover:bg-secondary hover:text-foreground",
+        // Link: Text only
+        link: "text-foreground underline-offset-4 hover:underline",
+        // Destructive
+        destructive: "border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm",
+        // Nav: Thin border, no shadow (for nav Sign In buttons)
+        nav: "border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background"
+      },
+      size: {
+        xs: "h-7 gap-1 px-2.5 text-xs",
+        sm: "h-8 gap-1.5 px-3 text-sm",
+        default: "h-10 gap-2 px-5 text-sm",
+        lg: "h-12 gap-2 px-7 text-base",
+        xl: "h-14 gap-2.5 px-9 text-lg",
+        icon: "size-10",
+        "icon-sm": "size-8",
+        "icon-lg": "size-12"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Button$1,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var 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
+    }
+  });
+}
+var colorMap = {
+  white: "bg-background text-foreground",
+  brand: "bg-brand",
+  "brand-muted": "bg-brand-muted 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 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
+      );
+    }) })
+  ] });
+}
+
+export { PricingTable };
+//# sourceMappingURL=pricing-table.js.map
+//# sourceMappingURL=pricing-table.js.map

package/dist/components/brutal/pricing-table.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/ui/button.tsx","../../../src/components/ui/badge.tsx","../../../src/components/brutal/section.tsx","../../../src/components/brutal/pricing-table.tsx"],"names":["ButtonPrimitive","cva","jsx"],"mappings":"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","file":"pricing-table.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","\"use client\";\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-lg whitespace-nowrap font-bold transition-all duration-150 select-none outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        // Primary: Black bg, white text, offset shadow\n        default:\n          \"border-brutal border-foreground bg-primary text-primary-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // CTA: Mint green bg — the Bannerbear signature\n        cta: \"border-brutal border-foreground bg-cta text-cta-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Brand: Dynamic brand color bg\n        brand:\n          \"border-brutal border-foreground bg-brand text-brand-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Outline: White bg, black border, offset shadow\n        outline:\n          \"border-brutal border-foreground bg-background text-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Secondary: Light bg, border, smaller shadow\n        secondary:\n          \"border-brutal border-foreground bg-secondary text-secondary-foreground shadow-brutal-sm hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal active:translate-x-px active:translate-y-px active:shadow-none\",\n        // Ghost: No border/shadow, subtle hover\n        ghost: \"hover:bg-secondary hover:text-foreground\",\n        // Link: Text only\n        link: \"text-foreground underline-offset-4 hover:underline\",\n        // Destructive\n        destructive:\n          \"border-brutal border-destructive bg-destructive text-destructive-foreground shadow-brutal hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-lg active:translate-x-px active:translate-y-px active:shadow-brutal-sm\",\n        // Nav: Thin border, no shadow (for nav Sign In buttons)\n        nav: \"border border-foreground bg-background text-foreground hover:bg-foreground hover:text-background\",\n      },\n      size: {\n        xs: \"h-7 gap-1 px-2.5 text-xs\",\n        sm: \"h-8 gap-1.5 px-3 text-sm\",\n        default: \"h-10 gap-2 px-5 text-sm\",\n        lg: \"h-12 gap-2 px-7 text-base\",\n        xl: \"h-14 gap-2.5 px-9 text-lg\",\n        icon: \"size-10\",\n        \"icon-sm\": \"size-8\",\n        \"icon-lg\": \"size-12\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n);\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n","import { mergeProps } from \"@base-ui/react/merge-props\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"../../lib/utils\";\n\nconst badgeVariants = cva(\n  \"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!\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-brutal border-foreground bg-primary px-3 py-1 text-xs text-primary-foreground shadow-brutal-sm\",\n        secondary:\n          \"border-brutal border-foreground bg-secondary px-3 py-1 text-xs text-secondary-foreground shadow-brutal-sm\",\n        brand:\n          \"border-brutal border-foreground bg-brand px-3 py-1 text-xs text-brand-foreground shadow-brutal-sm\",\n        cta: \"border-brutal border-foreground bg-cta px-3 py-1 text-xs text-cta-foreground shadow-brutal-sm\",\n        outline:\n          \"border-brutal border-foreground bg-background px-3 py-1 text-xs text-foreground\",\n        destructive:\n          \"border-brutal border-destructive bg-destructive/10 px-3 py-1 text-xs text-destructive\",\n        ghost: \"px-2 py-0.5 text-xs text-muted-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n);\n\nfunction Badge({\n  className,\n  variant = \"default\",\n  render,\n  ...props\n}: useRender.ComponentProps<\"span\"> & VariantProps<typeof badgeVariants>) {\n  return useRender({\n    defaultTagName: \"span\",\n    props: mergeProps<\"span\">(\n      {\n        className: cn(badgeVariants({ variant }), className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"badge\",\n      variant,\n    },\n  });\n}\n\nexport { Badge, badgeVariants };\n","import { cn } from \"../../lib/utils\";\n\nexport type SectionColor =\n  | \"white\"\n  | \"brand\"\n  | \"brand-muted\"\n  | \"black\"\n  | \"cta\";\n\nexport type SectionPattern =\n  | \"dots\"\n  | \"stripes\"\n  | \"noise\"\n  | \"grain\"\n  | \"crosshatch\"\n  | \"grid-dots\"\n  | \"gradient-mesh\"\n  | \"none\";\n\ninterface BrutalSectionProps {\n  children: React.ReactNode;\n  color?: SectionColor;\n  className?: string;\n  containerSize?: \"sm\" | \"default\" | \"lg\";\n  padding?: \"sm\" | \"default\" | \"lg\";\n  pattern?: SectionPattern;\n  /** @deprecated Use pattern=\"dots\" instead */\n  dots?: boolean;\n  /** @deprecated Use pattern=\"stripes\" instead */\n  stripes?: boolean;\n  id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n  white: \"bg-background text-foreground\",\n  brand: \"bg-brand\",\n  \"brand-muted\": \"bg-brand-muted text-foreground\",\n  black: \"bg-foreground text-background\",\n  cta: \"bg-cta\",\n};\n\nconst containerMap = {\n  sm: \"brutal-container-sm\",\n  default: \"brutal-container\",\n  lg: \"brutal-container-lg\",\n};\n\nconst paddingMap = {\n  sm: \"brutal-section-sm\",\n  default: \"brutal-section\",\n  lg: \"brutal-section py-28 sm:py-36 md:py-44\",\n};\n\nconst patternMap: Record<SectionPattern, string> = {\n  dots: \"brutal-dots\",\n  stripes: \"brutal-stripes\",\n  noise: \"brutal-noise\",\n  grain: \"brutal-grain\",\n  crosshatch: \"brutal-crosshatch\",\n  \"grid-dots\": \"brutal-grid-dots\",\n  \"gradient-mesh\": \"brutal-gradient-mesh\",\n  none: \"\",\n};\n\nexport function BrutalSection({\n  children,\n  color = \"white\",\n  className,\n  containerSize = \"default\",\n  padding = \"default\",\n  pattern,\n  dots = false,\n  stripes = false,\n  id,\n}: BrutalSectionProps) {\n  const resolvedPattern = pattern\n    ?? (dots ? \"dots\" : undefined)\n    ?? (stripes ? \"stripes\" : undefined)\n    ?? \"none\";\n\n  return (\n    <section\n      id={id}\n      className={cn(\n        paddingMap[padding],\n        colorMap[color],\n        patternMap[resolvedPattern],\n        className\n      )}\n    >\n      <div className={containerMap[containerSize]}>{children}</div>\n    </section>\n  );\n}\n","\"use client\";\n\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport { Badge } from \"../ui/badge\";\nimport { BrutalSection } from \"./section\";\nimport { useState } from \"react\";\n\ninterface PricingTier {\n  name: string;\n  description?: string;\n  price: { monthly: number | string; annual: number | string };\n  features: string[];\n  ctaText: string;\n  ctaHref?: string;\n  ctaVariant?: \"cta\" | \"brand\" | \"default\" | \"outline\";\n}\n\ninterface PricingTableProps {\n  badge?: string;\n  headline?: string;\n  description?: string;\n  tiers: PricingTier[];\n  popularIndex?: number;\n  billingToggle?: boolean;\n  color?: \"white\" | \"black\";\n  className?: string;\n}\n\nexport function PricingTable({\n  badge,\n  headline,\n  description,\n  tiers,\n  popularIndex,\n  billingToggle = true,\n  color = \"white\",\n  className,\n}: PricingTableProps) {\n  const [annual, setAnnual] = useState(false);\n\n  return (\n    <BrutalSection color={color} className={className}>\n      {(headline || badge) && (\n        <div className=\"mb-8 text-center\">\n          {badge && <p className=\"brutal-label mb-4 text-muted-foreground\">{badge}</p>}\n          {headline && <h2 className=\"brutal-h2 mb-4\">{headline}</h2>}\n          {description && <p className=\"brutal-body mx-auto max-w-lg text-muted-foreground\">{description}</p>}\n        </div>\n      )}\n\n      {billingToggle && (\n        <div className=\"mb-10 flex items-center justify-center gap-3\">\n          <span className={cn(\"text-sm font-bold\", !annual && \"text-brand\")}>Monthly</span>\n          <button\n            onClick={() => setAnnual(!annual)}\n            className={cn(\n              \"relative h-8 w-14 border-brutal border-foreground transition-colors\",\n              annual ? \"bg-brand\" : \"bg-secondary\",\n            )}\n          >\n            <span\n              className={cn(\n                \"absolute top-1 size-6 border border-foreground bg-background transition-transform\",\n                annual ? \"left-7\" : \"left-1\",\n              )}\n            />\n          </button>\n          <span className={cn(\"text-sm font-bold\", annual && \"text-brand\")}>Annual</span>\n          {annual && <Badge variant=\"cta\">Save 20%</Badge>}\n        </div>\n      )}\n\n      <div className={cn(\n        \"grid gap-6\",\n        tiers.length === 2 && \"mx-auto max-w-2xl sm:grid-cols-2\",\n        tiers.length === 3 && \"lg:grid-cols-3\",\n        tiers.length >= 4 && \"sm:grid-cols-2 lg:grid-cols-4\",\n      )}>\n        {tiers.map((tier, i) => {\n          const isPopular = i === popularIndex;\n          const price = annual ? tier.price.annual : tier.price.monthly;\n\n          return (\n            <div\n              key={tier.name}\n              className={cn(\n                \"relative flex flex-col border-brutal border-foreground bg-background p-6 shadow-brutal\",\n                isPopular && \"border-brand shadow-brutal-lg ring-2 ring-brand z-10 scale-105\",\n              )}\n            >\n              {isPopular && (\n                <Badge variant=\"brand\" className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n                  Popular\n                </Badge>\n              )}\n              <h3 className=\"brutal-h4 mb-1\">{tier.name}</h3>\n              {tier.description && <p className=\"mb-4 text-sm text-muted-foreground\">{tier.description}</p>}\n              <div className=\"mb-6\">\n                <span className=\"brutal-h1\">{typeof price === \"number\" ? `$${price}` : price}</span>\n                {typeof price === \"number\" && <span className=\"text-sm text-muted-foreground\">/mo</span>}\n              </div>\n              <ul className=\"mb-8 flex flex-1 flex-col gap-2\">\n                {tier.features.map((feature) => (\n                  <li key={feature} className=\"flex items-start gap-2 text-sm\">\n                    <span className=\"mt-0.5 text-brand\">&#10003;</span>\n                    {feature}\n                  </li>\n                ))}\n              </ul>\n              <Button\n                variant={tier.ctaVariant || (isPopular ? \"cta\" : \"outline\")}\n                size=\"lg\"\n                className=\"w-full\"\n                render={tier.ctaHref ? <a href={tier.ctaHref} /> : undefined}\n              >\n                {tier.ctaText}\n              </Button>\n            </div>\n          );\n        })}\n      </div>\n    </BrutalSection>\n  );\n}\n"]}

package/dist/components/brutal/section-divider.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type DividerVariant = "wave" | "jagged" | "curve" | "castle" | "torn-paper" | "brush-stroke" | "geometric" | "blob" | "diagonal" | "zigzag" | "hand-drawn";
+interface SectionDividerProps {
+    from?: string;
+    to?: string;
+    flip?: boolean;
+    className?: string;
+    variant?: DividerVariant;
+    layers?: boolean;
+}
+declare function SectionDivider({ from, to, flip, className, variant, layers, }: SectionDividerProps): react_jsx_runtime.JSX.Element;
+
+export { SectionDivider };

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

@@ -0,0 +1,70 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/lib/utils.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+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 })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { SectionDivider };
+//# sourceMappingURL=section-divider.js.map
+//# sourceMappingURL=section-divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section-divider.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACmBA,IAAM,KAAA,GAAwC;AAAA,EAC5C,IAAA,EAAM,qEAAA;AAAA,EACN,MAAA,EAAQ,wHAAA;AAAA,EACR,KAAA,EAAO,2CAAA;AAAA,EACP,MAAA,EAAQ,qRAAA;AAAA,EACR,YAAA,EAAc,4NAAA;AAAA,EACd,cAAA,EAAgB,oHAAA;AAAA,EAChB,SAAA,EAAW,0FAAA;AAAA,EACX,IAAA,EAAM,6FAAA;AAAA,EACN,QAAA,EAAU,2BAAA;AAAA,EACV,MAAA,EAAQ,wJAAA;AAAA,EACR,YAAA,EAAc;AAChB,CAAA;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,IAAA,GAAO,wBAAA;AAAA,EACP,EAAA,GAAK,wBAAA;AAAA,EACL,IAAA,GAAO,KAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,OAAA,GAAU,MAAA;AAAA,EACV,MAAA,GAAS;AACX,CAAA,EAAwB;AACtB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,wCAAA,EAA0C,SAAS,CAAA;AAAA,MACjE,KAAA,EAAO,EAAE,eAAA,EAAiB,IAAA,EAAK;AAAA,MAE9B,QAAA,EAAA;AAAA,QAAA,MAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,aAAA;AAAA,YACR,mBAAA,EAAoB,MAAA;AAAA,YACpB,SAAA,EAAU,0CAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ,wBAAA;AAAA,cACR,SAAA,EAAW,OAAO,4BAAA,GAA+B;AAAA,aACnD;AAAA,YAEA,8BAAC,MAAA,EAAA,EAAK,CAAA,EAAG,MAAM,OAAO,CAAA,EAAG,MAAM,EAAA,EAAI;AAAA;AAAA,SACrC;AAAA,wBAEF,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,OAAA,EAAQ,aAAA;AAAA,YACR,mBAAA,EAAoB,MAAA;AAAA,YACpB,SAAA,EAAU,uBAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,MAAA,EAAQ,wBAAA;AAAA,cACR,SAAA,EAAW,OAAO,YAAA,GAAe;AAAA,aACnC;AAAA,YAEA,8BAAC,MAAA,EAAA,EAAK,CAAA,EAAG,MAAM,OAAO,CAAA,EAAG,MAAM,EAAA,EAAI;AAAA;AAAA;AACrC;AAAA;AAAA,GACF;AAEJ","file":"section-divider.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cn } from \"../../lib/utils\";\n\ntype DividerVariant =\n  | \"wave\"\n  | \"jagged\"\n  | \"curve\"\n  | \"castle\"\n  | \"torn-paper\"\n  | \"brush-stroke\"\n  | \"geometric\"\n  | \"blob\"\n  | \"diagonal\"\n  | \"zigzag\"\n  | \"hand-drawn\";\n\ninterface SectionDividerProps {\n  from?: string;\n  to?: string;\n  flip?: boolean;\n  className?: string;\n  variant?: DividerVariant;\n  layers?: boolean;\n}\n\nconst paths: Record<DividerVariant, string> = {\n  wave: \"M0,64 C160,128 320,0 480,64 C640,128 800,0 960,64 L960,160 L0,160 Z\",\n  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\",\n  curve: \"M0,128 Q480,-32 960,128 L960,160 L0,160 Z\",\n  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\",\n  \"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\",\n  \"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\",\n  geometric: \"M0,100 L120,60 L240,80 L360,40 L480,90 L600,50 L720,70 L840,30 L960,80 L960,160 L0,160 Z\",\n  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\",\n  diagonal: \"M0,160 L960,60 L960,160 Z\",\n  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\",\n  \"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\",\n};\n\nexport function SectionDivider({\n  from = \"hsl(var(--background))\",\n  to = \"hsl(var(--background))\",\n  flip = false,\n  className = \"\",\n  variant = \"wave\",\n  layers = false,\n}: SectionDividerProps) {\n  return (\n    <div\n      className={cn(\"relative -my-px w-full overflow-hidden\", className)}\n      style={{ backgroundColor: from }}\n    >\n      {layers && (\n        <svg\n          viewBox=\"0 0 960 160\"\n          preserveAspectRatio=\"none\"\n          className=\"absolute inset-0 block w-full opacity-30\"\n          style={{\n            height: \"clamp(40px, 6vw, 80px)\",\n            transform: flip ? \"scaleY(-1) translateY(4px)\" : \"translateY(-4px)\",\n          }}\n        >\n          <path d={paths[variant]} fill={to} />\n        </svg>\n      )}\n      <svg\n        viewBox=\"0 0 960 160\"\n        preserveAspectRatio=\"none\"\n        className=\"relative block w-full\"\n        style={{\n          height: \"clamp(40px, 6vw, 80px)\",\n          transform: flip ? \"scaleY(-1)\" : undefined,\n        }}\n      >\n        <path d={paths[variant]} fill={to} />\n      </svg>\n    </div>\n  );\n}\n"]}

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

@@ -1,16 +1,20 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
-type SectionColor = "white" | "brand" | "brand-muted" | "blue" | "gray" | "cream" | "black" | "cta";
+type SectionColor = "white" | "brand" | "brand-muted" | "black" | "cta";
+type SectionPattern = "dots" | "stripes" | "noise" | "grain" | "crosshatch" | "grid-dots" | "gradient-mesh" | "none";
 interface BrutalSectionProps {
     children: React.ReactNode;
     color?: SectionColor;
     className?: string;
     containerSize?: "sm" | "default" | "lg";
     padding?: "sm" | "default" | "lg";
+    pattern?: SectionPattern;
+    /** @deprecated Use pattern="dots" instead */
     dots?: boolean;
+    /** @deprecated Use pattern="stripes" instead */
     stripes?: boolean;
     id?: string;
 }
-declare function BrutalSection({ children, color, className, containerSize, padding, dots, stripes, id, }: BrutalSectionProps): react_jsx_runtime.JSX.Element;
+declare function BrutalSection({ children, color, className, containerSize, padding, pattern, dots, stripes, id, }: BrutalSectionProps): react_jsx_runtime.JSX.Element;
 
-export { BrutalSection };
+export { BrutalSection, type SectionColor, type SectionPattern };

package/dist/components/brutal/section.js

@@ -11,9 +11,6 @@ var colorMap = {
   white: "bg-background text-foreground",
   brand: "bg-brand",
   "brand-muted": "bg-brand-muted text-foreground",
-  blue: "bg-section-blue",
-  gray: "bg-section-gray text-foreground",
-  cream: "bg-section-cream text-foreground",
   black: "bg-foreground text-background",
   cta: "bg-cta"
 };
@@ -27,16 +24,28 @@ var paddingMap = {
   default: "brutal-section",
   lg: "brutal-section py-28 sm:py-36 md:py-44"
 };
+var patternMap = {
+  dots: "brutal-dots",
+  stripes: "brutal-stripes",
+  noise: "brutal-noise",
+  grain: "brutal-grain",
+  crosshatch: "brutal-crosshatch",
+  "grid-dots": "brutal-grid-dots",
+  "gradient-mesh": "brutal-gradient-mesh",
+  none: ""
+};
 function BrutalSection({
   children,
   color = "white",
   className,
   containerSize = "default",
   padding = "default",
+  pattern,
   dots = false,
   stripes = false,
   id
 }) {
+  const resolvedPattern = pattern ?? (dots ? "dots" : void 0) ?? (stripes ? "stripes" : void 0) ?? "none";
   return /* @__PURE__ */ jsx(
     "section",
     {
@@ -44,8 +53,7 @@ function BrutalSection({
       className: cn(
         paddingMap[padding],
         colorMap[color],
-        dots && "brutal-dots",
-        stripes && "brutal-stripes",
+        patternMap[resolvedPattern],
         className
       ),
       children: /* @__PURE__ */ jsx("div", { className: containerMap[containerSize], children })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACkBA,IAAM,QAAA,GAAyC;AAAA,EAC7C,KAAA,EAAO,+BAAA;AAAA,EACP,KAAA,EAAO,UAAA;AAAA,EACP,aAAA,EAAe,gCAAA;AAAA,EACf,IAAA,EAAM,iBAAA;AAAA,EACN,IAAA,EAAM,iCAAA;AAAA,EACN,KAAA,EAAO,kCAAA;AAAA,EACP,KAAA,EAAO,+BAAA;AAAA,EACP,GAAA,EAAK;AACP,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,EAAA,EAAI,qBAAA;AAAA,EACJ,OAAA,EAAS,kBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,mBAAA;AAAA,EACJ,OAAA,EAAS,gBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,aAAA,GAAgB,SAAA;AAAA,EAChB,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV;AACF,CAAA,EAAuB;AACrB,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,OAAO,CAAA;AAAA,QAClB,SAAS,KAAK,CAAA;AAAA,QACd,IAAA,IAAQ,aAAA;AAAA,QACR,OAAA,IAAW,gBAAA;AAAA,QACX;AAAA,OACF;AAAA,MAEA,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,aAAa,GAAI,QAAA,EAAS;AAAA;AAAA,GACzD;AAEJ","file":"section.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cn } from \"../../lib/utils\";\n\ntype SectionColor =\n  | \"white\"\n  | \"brand\"\n  | \"brand-muted\"\n  | \"blue\"\n  | \"gray\"\n  | \"cream\"\n  | \"black\"\n  | \"cta\";\n\ninterface BrutalSectionProps {\n  children: React.ReactNode;\n  color?: SectionColor;\n  className?: string;\n  containerSize?: \"sm\" | \"default\" | \"lg\";\n  padding?: \"sm\" | \"default\" | \"lg\";\n  dots?: boolean;\n  stripes?: boolean;\n  id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n  white: \"bg-background text-foreground\",\n  brand: \"bg-brand\",\n  \"brand-muted\": \"bg-brand-muted text-foreground\",\n  blue: \"bg-section-blue\",\n  gray: \"bg-section-gray text-foreground\",\n  cream: \"bg-section-cream text-foreground\",\n  black: \"bg-foreground text-background\",\n  cta: \"bg-cta\",\n};\n\nconst containerMap = {\n  sm: \"brutal-container-sm\",\n  default: \"brutal-container\",\n  lg: \"brutal-container-lg\",\n};\n\nconst paddingMap = {\n  sm: \"brutal-section-sm\",\n  default: \"brutal-section\",\n  lg: \"brutal-section py-28 sm:py-36 md:py-44\",\n};\n\nexport function BrutalSection({\n  children,\n  color = \"white\",\n  className,\n  containerSize = \"default\",\n  padding = \"default\",\n  dots = false,\n  stripes = false,\n  id,\n}: BrutalSectionProps) {\n  return (\n    <section\n      id={id}\n      className={cn(\n        paddingMap[padding],\n        colorMap[color],\n        dots && \"brutal-dots\",\n        stripes && \"brutal-stripes\",\n        className\n      )}\n    >\n      <div className={containerMap[containerSize]}>{children}</div>\n    </section>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/lib/utils.ts","../../../src/components/brutal/section.tsx"],"names":[],"mappings":";;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;AC4BA,IAAM,QAAA,GAAyC;AAAA,EAC7C,KAAA,EAAO,+BAAA;AAAA,EACP,KAAA,EAAO,UAAA;AAAA,EACP,aAAA,EAAe,gCAAA;AAAA,EACf,KAAA,EAAO,+BAAA;AAAA,EACP,GAAA,EAAK;AACP,CAAA;AAEA,IAAM,YAAA,GAAe;AAAA,EACnB,EAAA,EAAI,qBAAA;AAAA,EACJ,OAAA,EAAS,kBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GAAa;AAAA,EACjB,EAAA,EAAI,mBAAA;AAAA,EACJ,OAAA,EAAS,gBAAA;AAAA,EACT,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,UAAA,GAA6C;AAAA,EACjD,IAAA,EAAM,aAAA;AAAA,EACN,OAAA,EAAS,gBAAA;AAAA,EACT,KAAA,EAAO,cAAA;AAAA,EACP,KAAA,EAAO,cAAA;AAAA,EACP,UAAA,EAAY,mBAAA;AAAA,EACZ,WAAA,EAAa,kBAAA;AAAA,EACb,eAAA,EAAiB,sBAAA;AAAA,EACjB,IAAA,EAAM;AACR,CAAA;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,QAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA;AAAA,EACA,aAAA,GAAgB,SAAA;AAAA,EAChB,OAAA,GAAU,SAAA;AAAA,EACV,OAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,OAAA,GAAU,KAAA;AAAA,EACV;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,kBAAkB,OAAA,KAClB,IAAA,GAAO,SAAS,MAAA,CAAA,KAChB,OAAA,GAAU,YAAY,MAAA,CAAA,IACvB,MAAA;AAEL,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,WAAW,OAAO,CAAA;AAAA,QAClB,SAAS,KAAK,CAAA;AAAA,QACd,WAAW,eAAe,CAAA;AAAA,QAC1B;AAAA,OACF;AAAA,MAEA,8BAAC,KAAA,EAAA,EAAI,SAAA,EAAW,YAAA,CAAa,aAAa,GAAI,QAAA,EAAS;AAAA;AAAA,GACzD;AAEJ","file":"section.js","sourcesContent":["import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n","import { cn } from \"../../lib/utils\";\n\nexport type SectionColor =\n  | \"white\"\n  | \"brand\"\n  | \"brand-muted\"\n  | \"black\"\n  | \"cta\";\n\nexport type SectionPattern =\n  | \"dots\"\n  | \"stripes\"\n  | \"noise\"\n  | \"grain\"\n  | \"crosshatch\"\n  | \"grid-dots\"\n  | \"gradient-mesh\"\n  | \"none\";\n\ninterface BrutalSectionProps {\n  children: React.ReactNode;\n  color?: SectionColor;\n  className?: string;\n  containerSize?: \"sm\" | \"default\" | \"lg\";\n  padding?: \"sm\" | \"default\" | \"lg\";\n  pattern?: SectionPattern;\n  /** @deprecated Use pattern=\"dots\" instead */\n  dots?: boolean;\n  /** @deprecated Use pattern=\"stripes\" instead */\n  stripes?: boolean;\n  id?: string;\n}\n\nconst colorMap: Record<SectionColor, string> = {\n  white: \"bg-background text-foreground\",\n  brand: \"bg-brand\",\n  \"brand-muted\": \"bg-brand-muted text-foreground\",\n  black: \"bg-foreground text-background\",\n  cta: \"bg-cta\",\n};\n\nconst containerMap = {\n  sm: \"brutal-container-sm\",\n  default: \"brutal-container\",\n  lg: \"brutal-container-lg\",\n};\n\nconst paddingMap = {\n  sm: \"brutal-section-sm\",\n  default: \"brutal-section\",\n  lg: \"brutal-section py-28 sm:py-36 md:py-44\",\n};\n\nconst patternMap: Record<SectionPattern, string> = {\n  dots: \"brutal-dots\",\n  stripes: \"brutal-stripes\",\n  noise: \"brutal-noise\",\n  grain: \"brutal-grain\",\n  crosshatch: \"brutal-crosshatch\",\n  \"grid-dots\": \"brutal-grid-dots\",\n  \"gradient-mesh\": \"brutal-gradient-mesh\",\n  none: \"\",\n};\n\nexport function BrutalSection({\n  children,\n  color = \"white\",\n  className,\n  containerSize = \"default\",\n  padding = \"default\",\n  pattern,\n  dots = false,\n  stripes = false,\n  id,\n}: BrutalSectionProps) {\n  const resolvedPattern = pattern\n    ?? (dots ? \"dots\" : undefined)\n    ?? (stripes ? \"stripes\" : undefined)\n    ?? \"none\";\n\n  return (\n    <section\n      id={id}\n      className={cn(\n        paddingMap[padding],\n        colorMap[color],\n        patternMap[resolvedPattern],\n        className\n      )}\n    >\n      <div className={containerMap[containerSize]}>{children}</div>\n    </section>\n  );\n}\n"]}

package/dist/components/brutal/stats-bar.d.ts

@@ -0,0 +1,16 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Stat {
+    value: number;
+    label: string;
+    prefix?: string;
+    suffix?: string;
+}
+interface StatsBarProps {
+    stats: Stat[];
+    color?: "white" | "brand" | "black";
+    className?: string;
+}
+declare function StatsBar({ stats, color, className }: StatsBarProps): react_jsx_runtime.JSX.Element;
+
+export { StatsBar };

package/dist/components/brutal/stats-bar.js

@@ -0,0 +1,127 @@
+"use client";
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var colorMap = {
+  white: "bg-background text-foreground",
+  brand: "bg-brand",
+  "brand-muted": "bg-brand-muted 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 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))
+    }
+  ) });
+}
+
+export { StatsBar };
+//# sourceMappingURL=stats-bar.js.map
+//# sourceMappingURL=stats-bar.js.map