@opensite/ui 1.2.4 → 1.2.5

package/dist/feature-image-cards-three-column.cjs

@@ -8,6 +8,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var img = require('@page-speed/img');
+var reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,32 +35,6 @@ var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive)
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -987,9 +962,42 @@ var Section = React__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "span";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function FeatureImageCardsThreeColumn({
   title,
   description,
+  headerClassName,
   cards,
   cardsSlot,
   className,
@@ -1005,28 +1013,34 @@ function FeatureImageCardsThreeColumn({
   patternOpacity,
   patternClassName
 }) {
-  const renderImage = React.useCallback((card, imageAlt) => {
-    if (card.imageSlot) return card.imageSlot;
-    if (!card.imageSrc) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      img.Img,
-      {
-        src: card.imageSrc,
-        alt: imageAlt,
-        className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
-        loading: "lazy",
-        optixFlowConfig
+  const renderImage = React.useCallback(
+    (card, imageAlt) => {
+      if (card.imageSlot) return card.imageSlot;
+      if (!card.imageSrc) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        img.Img,
+        {
+          src: card.imageSrc,
+          alt: imageAlt,
+          className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
+          loading: "lazy",
+          optixFlowConfig
+        }
+      );
+    },
+    [optixFlowConfig]
+  );
+  const renderBadgeIcon = React.useCallback(
+    (card) => {
+      if (card.avatarSrc) {
+        return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
       }
-    );
-  }, [optixFlowConfig]);
-  const renderBadgeIcon = React.useCallback((card) => {
-    if (card.avatarSrc) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
-    }
-    if (card.icon) return card.icon;
-    if (!card.iconName) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.iconName, size: 24 });
-  }, []);
+      if (card.icon) return card.icon;
+      if (!card.iconName) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: card.iconName, size: 24 });
+    },
+    []
+  );
   const cardsContent = React.useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
@@ -1037,31 +1051,53 @@ function FeatureImageCardsThreeColumn({
         {
           href: card.link,
           onClick: card.onClick,
-          className: cn("group relative overflow-hidden rounded-xl", cardClassName, card.className),
+          className: cn(
+            "group relative overflow-hidden rounded-xl",
+            cardClassName,
+            card.className
+          ),
           children: [
             renderImage(card, imageAlt),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  className: cn(
-                    "ml-auto flex w-fit items-center gap-2 text-sm font-semibold",
-                    card.avatarSrc ? "rounded-full bg-foreground/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-primary-foreground",
-                    card.badgeClassName
-                  ),
-                  children: [
-                    renderBadgeIcon(card),
-                    card.badgeText
-                  ]
-                }
-              ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
+              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant: "default", className: cn(card.badgeClassName), children: [
+                renderBadgeIcon(card),
+                card.badgeText
+              ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5", children: [
-                card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title })),
-                card.linkText && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: cn("flex items-center gap-1 font-medium", card.linkClassName), children: [
-                  card.linkText,
-                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                ] })
+                card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "text-xl md:text-2xl font-semibold",
+                      card.titleClassName
+                    ),
+                    children: card.title
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-xl md:text-2xl font-semibold",
+                      card.titleClassName
+                    ),
+                    children: card.title
+                  }
+                )),
+                card.linkText && card.link && /* @__PURE__ */ jsxRuntime.jsxs(
+                  Pressable,
+                  {
+                    className: cn(
+                      "font-bold text-xs uppercase",
+                      card.linkClassName
+                    ),
+                    href: card.link,
+                    children: [
+                      card.linkText,
+                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 18 })
+                    ]
+                  }
+                )
               ] })
             ] })
           ]
@@ -1070,7 +1106,7 @@ function FeatureImageCardsThreeColumn({
       );
     });
   }, [cardsSlot, cards, cardClassName, renderImage, renderBadgeIcon]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -1080,11 +1116,46 @@ function FeatureImageCardsThreeColumn({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description })),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-5 pt-14 xl:grid-cols-3", gridClassName), children: cardsContent })
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                titleClassName
+              ),
+              children: title
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("max-w-lg md:max-w-md", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-4 md:gap-4 grid-cols-1 md:grid-cols-3",
+              gridClassName
+            ),
+            children: cardsContent
+          }
+        )
+      ] })
     }
   );
 }

package/dist/feature-image-cards-three-column.d.cts

@@ -101,6 +101,10 @@ interface FeatureImageCardsThreeColumnProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the header
+     */
+    headerClassName?: string;
     /**
      * Additional CSS classes for the grid
      */
@@ -161,6 +165,6 @@ interface FeatureImageCardsThreeColumnProps {
  * />
  * ```
  */
-declare function FeatureImageCardsThreeColumn({ title, description, cards, cardsSlot, className, containerClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureImageCardsThreeColumnProps): React.JSX.Element;
+declare function FeatureImageCardsThreeColumn({ title, description, headerClassName, cards, cardsSlot, className, containerClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureImageCardsThreeColumnProps): React.JSX.Element;
 
 export { FeatureImageCardsThreeColumn, type FeatureImageCardsThreeColumnProps };

package/dist/feature-image-cards-three-column.d.ts

@@ -101,6 +101,10 @@ interface FeatureImageCardsThreeColumnProps {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the header
+     */
+    headerClassName?: string;
     /**
      * Additional CSS classes for the grid
      */
@@ -161,6 +165,6 @@ interface FeatureImageCardsThreeColumnProps {
  * />
  * ```
  */
-declare function FeatureImageCardsThreeColumn({ title, description, cards, cardsSlot, className, containerClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureImageCardsThreeColumnProps): React.JSX.Element;
+declare function FeatureImageCardsThreeColumn({ title, description, headerClassName, cards, cardsSlot, className, containerClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureImageCardsThreeColumnProps): React.JSX.Element;
 
 export { FeatureImageCardsThreeColumn, type FeatureImageCardsThreeColumnProps };

package/dist/feature-image-cards-three-column.js

@@ -7,37 +7,12 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { Img } from '@page-speed/img';
+import { Slot } from '@radix-ui/react-slot';
 
 // components/blocks/features/feature-image-cards-three-column.tsx
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-function getTextColor(parentBg, variant = "default", options) {
-  const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
-  if (isDark) {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-foreground/80";
-      case "subtle":
-        return "text-foreground/60";
-      case "accent":
-        return "text-accent-foreground";
-    }
-  } else {
-    switch (variant) {
-      case "default":
-        return "text-foreground";
-      case "muted":
-        return "text-muted-foreground";
-      case "subtle":
-        return "text-muted-foreground/70";
-      case "accent":
-        return "text-primary";
-    }
-  }
-}
 var svgCache = /* @__PURE__ */ new Map();
 function DynamicIcon({
   name,
@@ -965,9 +940,42 @@ var Section = React__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "badge",
+      className: cn(badgeVariants({ variant }), className),
+      ...props
+    }
+  );
+}
 function FeatureImageCardsThreeColumn({
   title,
   description,
+  headerClassName,
   cards,
   cardsSlot,
   className,
@@ -983,28 +991,34 @@ function FeatureImageCardsThreeColumn({
   patternOpacity,
   patternClassName
 }) {
-  const renderImage = useCallback((card, imageAlt) => {
-    if (card.imageSlot) return card.imageSlot;
-    if (!card.imageSrc) return null;
-    return /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: card.imageSrc,
-        alt: imageAlt,
-        className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
-        loading: "lazy",
-        optixFlowConfig
+  const renderImage = useCallback(
+    (card, imageAlt) => {
+      if (card.imageSlot) return card.imageSlot;
+      if (!card.imageSrc) return null;
+      return /* @__PURE__ */ jsx(
+        Img,
+        {
+          src: card.imageSrc,
+          alt: imageAlt,
+          className: "h-full max-h-[450px] w-full rounded-xl object-cover object-center",
+          loading: "lazy",
+          optixFlowConfig
+        }
+      );
+    },
+    [optixFlowConfig]
+  );
+  const renderBadgeIcon = useCallback(
+    (card) => {
+      if (card.avatarSrc) {
+        return /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
       }
-    );
-  }, [optixFlowConfig]);
-  const renderBadgeIcon = useCallback((card) => {
-    if (card.avatarSrc) {
-      return /* @__PURE__ */ jsx(Avatar, { className: "size-7 rounded-full", children: /* @__PURE__ */ jsx(AvatarImage, { src: card.avatarSrc, alt: "Avatar" }) });
-    }
-    if (card.icon) return card.icon;
-    if (!card.iconName) return null;
-    return /* @__PURE__ */ jsx(DynamicIcon, { name: card.iconName, size: 24 });
-  }, []);
+      if (card.icon) return card.icon;
+      if (!card.iconName) return null;
+      return /* @__PURE__ */ jsx(DynamicIcon, { name: card.iconName, size: 24 });
+    },
+    []
+  );
   const cardsContent = useMemo(() => {
     if (cardsSlot) return cardsSlot;
     if (!cards || cards.length === 0) return null;
@@ -1015,31 +1029,53 @@ function FeatureImageCardsThreeColumn({
         {
           href: card.link,
           onClick: card.onClick,
-          className: cn("group relative overflow-hidden rounded-xl", cardClassName, card.className),
+          className: cn(
+            "group relative overflow-hidden rounded-xl",
+            cardClassName,
+            card.className
+          ),
           children: [
             renderImage(card, imageAlt),
-            /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-primary to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
-            /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-7", children: [
-              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: cn(
-                    "ml-auto flex w-fit items-center gap-2 text-sm font-semibold",
-                    card.avatarSrc ? "rounded-full bg-foreground/30 px-4 py-2.5 backdrop-blur-sm" : "rounded-full bg-primary px-4 py-2.5 text-primary-foreground",
-                    card.badgeClassName
-                  ),
-                  children: [
-                    renderBadgeIcon(card),
-                    card.badgeText
-                  ]
-                }
-              ),
+            /* @__PURE__ */ jsx("div", { className: "absolute top-0 right-0 bottom-0 left-0 translate-y-20 rounded-xl bg-linear-to-t from-black to-transparent transition-transform duration-300 group-hover:translate-y-0" }),
+            /* @__PURE__ */ jsxs("div", { className: "absolute top-0 flex h-full w-full flex-col justify-between p-4 md:p-6", children: [
+              (card.badgeText || card.avatarSrc || card.icon || card.iconName) && /* @__PURE__ */ jsxs(Badge, { variant: "default", className: cn(card.badgeClassName), children: [
+                renderBadgeIcon(card),
+                card.badgeText
+              ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", children: [
-                card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx("h4", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title }) : /* @__PURE__ */ jsx("div", { className: cn("text-2xl font-semibold lg:text-3xl", card.titleClassName), children: card.title })),
-                card.linkText && /* @__PURE__ */ jsxs("p", { className: cn("flex items-center gap-1 font-medium", card.linkClassName), children: [
-                  card.linkText,
-                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                ] })
+                card.title && (typeof card.title === "string" ? /* @__PURE__ */ jsx(
+                  "h3",
+                  {
+                    className: cn(
+                      "text-xl md:text-2xl font-semibold",
+                      card.titleClassName
+                    ),
+                    children: card.title
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-xl md:text-2xl font-semibold",
+                      card.titleClassName
+                    ),
+                    children: card.title
+                  }
+                )),
+                card.linkText && card.link && /* @__PURE__ */ jsxs(
+                  Pressable,
+                  {
+                    className: cn(
+                      "font-bold text-xs uppercase",
+                      card.linkClassName
+                    ),
+                    href: card.link,
+                    children: [
+                      card.linkText,
+                      /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-up-right", size: 18 })
+                    ]
+                  }
+                )
               ] })
             ] })
           ]
@@ -1048,7 +1084,7 @@ function FeatureImageCardsThreeColumn({
       );
     });
   }, [cardsSlot, cards, cardClassName, renderImage, renderBadgeIcon]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -1058,11 +1094,46 @@ function FeatureImageCardsThreeColumn({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        title && (typeof title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title }) : /* @__PURE__ */ jsx("div", { className: cn("mb-4 text-center text-4xl font-semibold", titleClassName), children: title })),
-        description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: cn("text-center", getTextColor(background, "muted"), descriptionClassName), children: description })),
-        /* @__PURE__ */ jsx("div", { className: cn("grid gap-5 pt-14 xl:grid-cols-3", gridClassName), children: cardsContent })
-      ]
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-6 text-left", headerClassName), children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "text-xl font-semibold text-balance md:text-2xl lg:text-3xl max-w-lg md:max-w-md",
+                titleClassName
+              ),
+              children: title
+            }
+          )),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("max-w-lg md:max-w-md", descriptionClassName), children: description }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg md:max-w-md", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "grid gap-4 md:gap-4 grid-cols-1 md:grid-cols-3",
+              gridClassName
+            ),
+            children: cardsContent
+          }
+        )
+      ] })
     }
   );
 }

package/dist/feature-numbered-cards.cjs

@@ -936,7 +936,7 @@ function FeatureNumberedCards({
   features,
   featuresSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   cardsWrapperClassName,
   cardClassName,
   titleClassName,

package/dist/feature-numbered-cards.js

@@ -915,7 +915,7 @@ function FeatureNumberedCards({
   features,
   featuresSlot,
   className,
-  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
+  containerClassName = "px-6 sm:px-6 md:px-6 lg:px-8",
   cardsWrapperClassName,
   cardClassName,
   titleClassName,