@snow-labs/brutal-ui 0.3.0 → 0.3.1

package/dist/components/brutal/index.js

@@ -20,6 +20,9 @@ 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"
 };
@@ -226,11 +229,11 @@ function BrutalHero({
       variant === "centered" && "mx-auto"
     ), children: description }),
     /* @__PURE__ */ jsxs("div", { className: cn(
-      "flex flex-col gap-4 sm:flex-row sm:flex-wrap",
-      variant === "centered" && "sm:justify-center"
+      "flex flex-wrap gap-4",
+      variant === "centered" && "justify-center"
     ), children: [
-      /* @__PURE__ */ jsx(Button, { variant: ctaVariant, size: "xl", className: "w-full sm:w-auto", render: /* @__PURE__ */ jsx("a", { href: ctaHref }), children: ctaText }),
-      secondaryText && /* @__PURE__ */ jsx(Button, { variant: "outline", size: "xl", className: "w-full sm:w-auto", render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }), children: secondaryText })
+      /* @__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" }),
@@ -504,7 +507,7 @@ function BrutalTestimonials({
   headline,
   testimonials,
   variant = "masonry",
-  color = "brand-muted",
+  color = "blue",
   pattern,
   className
 }) {
@@ -564,13 +567,12 @@ function CTAButtons({
   secondaryText,
   secondaryHref
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-center sm:justify-center", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-4", children: [
     /* @__PURE__ */ jsx(
       Button,
       {
         variant: ctaVariant,
         size: "xl",
-        className: "w-full sm:w-auto",
         render: /* @__PURE__ */ jsx("a", { href: ctaHref }),
         children: ctaText
       }
@@ -579,8 +581,7 @@ function CTAButtons({
       Button,
       {
         variant: "outline",
-        size: "xl",
-        className: "w-full sm:w-auto",
+        size: "lg",
         render: /* @__PURE__ */ jsx("a", { href: secondaryHref || "#" }),
         children: secondaryText
       }
@@ -610,13 +611,12 @@ function SplitCTA(props) {
       /* @__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-col gap-4 sm:flex-row sm:flex-wrap", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-4", children: [
         /* @__PURE__ */ jsx(
           Button,
           {
             variant: props.ctaVariant || "cta",
             size: "xl",
-            className: "w-full sm:w-auto",
             render: /* @__PURE__ */ jsx("a", { href: props.ctaHref || "#" }),
             children: props.ctaText
           }
@@ -625,8 +625,7 @@ function SplitCTA(props) {
           Button,
           {
             variant: "outline",
-            size: "xl",
-            className: "w-full sm:w-auto",
+            size: "lg",
             render: /* @__PURE__ */ jsx("a", { href: props.secondaryHref || "#" }),
             children: props.secondaryText
           }
@@ -883,7 +882,7 @@ function Input({ className, type, ...props }) {
       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",
+        "h-10 w-full min-w-0 rounded-lg border-brutal border-foreground bg-background px-3 py-2 text-base transition-all outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive md:text-sm",
         className
       ),
       ...props