@opensite/ui 1.2.2 → 1.2.4

package/dist/feature-card-grid-linked.cjs

@@ -883,17 +883,19 @@ var Section = React__namespace.default.forwardRef(
 Section.displayName = "Section";
 function FeatureCardGridLinked({
   title,
+  description,
   features,
   featuresSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
   titleWrapperClassName,
   titleClassName,
+  descriptionClassName,
   gridClassName,
   cardClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-8 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -934,8 +936,8 @@ function FeatureCardGridLinked({
             feature.className
           ),
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-10 border-b", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-8 py-6 pl-4 md:gap-14 md:py-10 md:pl-8 lg:justify-normal", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between gap-4 md:gap-10 border-b", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-between gap-8 py-4 pl-4 md:gap-14 md:py-10 md:pl-8 lg:justify-normal", children: [
                 feature.label && /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
@@ -950,7 +952,7 @@ function FeatureCardGridLinked({
                   "h3",
                   {
                     className: cn(
-                      "text-xl transition-all hover:opacity-80 md:text-2xl font-semibold leading-snug tracking-tighter",
+                      "text-lg md:text-xl transition-all hover:opacity-80 lg:text-2xl font-semibold leading-snug ",
                       feature.headingClassName
                     ),
                     children: feature.heading
@@ -959,7 +961,7 @@ function FeatureCardGridLinked({
                   "div",
                   {
                     className: cn(
-                      "text-xl transition-all hover:opacity-80 md:text-2xl font-semibold leading-snug tracking-tighter",
+                      "text-lg md:text-xl transition-all hover:opacity-80 lg:text-2xl font-semibold leading-snug ",
                       feature.headingClassName
                     ),
                     children: feature.heading
@@ -985,7 +987,7 @@ function FeatureCardGridLinked({
       );
     });
   }, [featuresSlot, features, cardClassName, renderImage, background]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -995,37 +997,40 @@ function FeatureCardGridLinked({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: cn(
-              "mx-auto mb-16 max-w-3xl text-center",
-              titleWrapperClassName
-            ),
-            children: typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h2",
-              {
-                className: cn(
-                  "text-4xl font-medium text-pretty lg:text-5xl",
-                  titleClassName
-                ),
-                children: title
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "text-4xl font-medium text-pretty lg:text-5xl",
-                  titleClassName
-                ),
-                children: title
-              }
-            )
+            className: cn("grid gap-4 md:gap-8 lg:grid-cols-2", gridClassName),
+            children: featuresContent
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("grid gap-8 lg:grid-cols-2", gridClassName), children: featuresContent })
-      ]
+        )
+      ] })
     }
   );
 }

package/dist/feature-card-grid-linked.d.cts

@@ -61,6 +61,10 @@ interface FeatureCardGridLinkedProps {
      * Section title content
      */
     title?: React.ReactNode;
+    /**
+     * Feature description content
+     */
+    description?: React.ReactNode;
     /**
      * Array of feature cards
      */
@@ -85,6 +89,10 @@ interface FeatureCardGridLinkedProps {
      * Additional CSS classes for the title
      */
     titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Additional CSS classes for the grid
      */
@@ -143,6 +151,6 @@ interface FeatureCardGridLinkedProps {
  * />
  * ```
  */
-declare function FeatureCardGridLinked({ title, features, featuresSlot, className, containerClassName, titleWrapperClassName, titleClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCardGridLinkedProps): React.JSX.Element;
+declare function FeatureCardGridLinked({ title, description, features, featuresSlot, className, containerClassName, titleWrapperClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCardGridLinkedProps): React.JSX.Element;
 
 export { FeatureCardGridLinked, type FeatureCardGridLinkedProps };

package/dist/feature-card-grid-linked.d.ts

@@ -61,6 +61,10 @@ interface FeatureCardGridLinkedProps {
      * Section title content
      */
     title?: React.ReactNode;
+    /**
+     * Feature description content
+     */
+    description?: React.ReactNode;
     /**
      * Array of feature cards
      */
@@ -85,6 +89,10 @@ interface FeatureCardGridLinkedProps {
      * Additional CSS classes for the title
      */
     titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Additional CSS classes for the grid
      */
@@ -143,6 +151,6 @@ interface FeatureCardGridLinkedProps {
  * />
  * ```
  */
-declare function FeatureCardGridLinked({ title, features, featuresSlot, className, containerClassName, titleWrapperClassName, titleClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCardGridLinkedProps): React.JSX.Element;
+declare function FeatureCardGridLinked({ title, description, features, featuresSlot, className, containerClassName, titleWrapperClassName, titleClassName, descriptionClassName, gridClassName, cardClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCardGridLinkedProps): React.JSX.Element;
 
 export { FeatureCardGridLinked, type FeatureCardGridLinkedProps };

package/dist/feature-card-grid-linked.js

@@ -862,17 +862,19 @@ var Section = React__default.forwardRef(
 Section.displayName = "Section";
 function FeatureCardGridLinked({
   title,
+  description,
   features,
   featuresSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
   titleWrapperClassName,
   titleClassName,
+  descriptionClassName,
   gridClassName,
   cardClassName,
   optixFlowConfig,
   background,
-  spacing = "py-6 md:py-32",
+  spacing = "py-8 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -913,8 +915,8 @@ function FeatureCardGridLinked({
             feature.className
           ),
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-10 border-b", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-8 py-6 pl-4 md:gap-14 md:py-10 md:pl-8 lg:justify-normal", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex justify-between gap-4 md:gap-10 border-b", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-between gap-8 py-4 pl-4 md:gap-14 md:py-10 md:pl-8 lg:justify-normal", children: [
                 feature.label && /* @__PURE__ */ jsx(
                   "span",
                   {
@@ -929,7 +931,7 @@ function FeatureCardGridLinked({
                   "h3",
                   {
                     className: cn(
-                      "text-xl transition-all hover:opacity-80 md:text-2xl font-semibold leading-snug tracking-tighter",
+                      "text-lg md:text-xl transition-all hover:opacity-80 lg:text-2xl font-semibold leading-snug ",
                       feature.headingClassName
                     ),
                     children: feature.heading
@@ -938,7 +940,7 @@ function FeatureCardGridLinked({
                   "div",
                   {
                     className: cn(
-                      "text-xl transition-all hover:opacity-80 md:text-2xl font-semibold leading-snug tracking-tighter",
+                      "text-lg md:text-xl transition-all hover:opacity-80 lg:text-2xl font-semibold leading-snug ",
                       feature.headingClassName
                     ),
                     children: feature.heading
@@ -964,7 +966,7 @@ function FeatureCardGridLinked({
       );
     });
   }, [featuresSlot, features, cardClassName, renderImage, background]);
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     Section,
     {
       background,
@@ -974,37 +976,40 @@ function FeatureCardGridLinked({
       patternClassName,
       className,
       containerClassName,
-      children: [
-        title && /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        title || description ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          title && (typeof title === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-xl font-medium tracking-tight md:text-2xl lg:text-3xl text-balance",
+                titleClassName
+              ),
+              children: title
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: title })),
+          description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn("max-w-lg text-balance", descriptionClassName),
+              children: description
+            }
+          ))
+        ] }) : null,
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "mx-auto mb-16 max-w-3xl text-center",
-              titleWrapperClassName
-            ),
-            children: typeof title === "string" ? /* @__PURE__ */ jsx(
-              "h2",
-              {
-                className: cn(
-                  "text-4xl font-medium text-pretty lg:text-5xl",
-                  titleClassName
-                ),
-                children: title
-              }
-            ) : /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "text-4xl font-medium text-pretty lg:text-5xl",
-                  titleClassName
-                ),
-                children: title
-              }
-            )
+            className: cn("grid gap-4 md:gap-8 lg:grid-cols-2", gridClassName),
+            children: featuresContent
           }
-        ),
-        /* @__PURE__ */ jsx("div", { className: cn("grid gap-8 lg:grid-cols-2", gridClassName), children: featuresContent })
-      ]
+        )
+      ] })
     }
   );
 }

package/dist/feature-carousel-progress.cjs

@@ -38,32 +38,6 @@ var ProgressPrimitive__namespace = /*#__PURE__*/_interopNamespace(ProgressPrimit
 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,
@@ -1232,20 +1206,22 @@ Section.displayName = "Section";
 function FeatureCarouselProgress({
   badge,
   title,
+  description,
+  titleClassName,
+  descriptionClassName,
   carouselLabel,
   slides,
   slidesSlot,
   className,
-  containerClassName,
+  containerClassName = "px-6 sm:px-6 md:mx-6 lg:px-8",
   headerClassName,
   badgeClassName,
-  titleClassName,
   carouselClassName,
   controlsClassName,
   progressClassName,
   cardClassName,
   background,
-  spacing,
+  spacing = "py-6 md:py-32",
   pattern,
   patternOpacity,
   patternClassName
@@ -1275,16 +1251,70 @@ function FeatureCarouselProgress({
       CarouselItem,
       {
         className: "basis-full md:basis-1/2 lg:basis-1/3",
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1", children: /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(cardClassName, slide.className), children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "flex flex-col justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          (slide.icon || slide.iconName) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("mb-5 flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground lg:size-10", slide.iconClassName), children: renderSlideIcon(slide) }),
-          slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("text-xl font-semibold md:text-2xl lg:text-2xl", slide.titleClassName), children: slide.title })),
-          slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("pt-2", getTextColor(background, "muted"), slide.descriptionClassName), children: slide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-2", getTextColor(background, "muted"), slide.descriptionClassName), children: slide.description }))
-        ] }) }) }) })
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-1 h-auto md:h-full", children: /* @__PURE__ */ jsxRuntime.jsx(
+          Card,
+          {
+            className: cn("h-auto md:h-full", cardClassName, slide.className),
+            children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, { className: "flex flex-col justify-center p-6 h-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full justify-between", children: [
+              (slide.icon || slide.iconName) && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "mb-5 flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground lg:size-10",
+                    slide.iconClassName
+                  ),
+                  children: renderSlideIcon(slide)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+                slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Pressable,
+                  {
+                    href: slide.href,
+                    className: cn(
+                      "text-lg font-semibold md:text-xl",
+                      slide.titleClassName
+                    ),
+                    children: slide.title
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "text-lg font-semibold md:text-xl",
+                      slide.titleClassName
+                    ),
+                    children: slide.title
+                  }
+                )),
+                slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "pt-2 text-card-foreground",
+                      slide.descriptionClassName
+                    ),
+                    children: slide.description
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "pt-2 text-card-foreground",
+                      slide.descriptionClassName
+                    ),
+                    children: slide.description
+                  }
+                ))
+              ] })
+            ] }) })
+          }
+        ) })
       },
       index
     ));
   }, [slidesSlot, slides, cardClassName, renderSlideIcon]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
@@ -1294,30 +1324,73 @@ function FeatureCarouselProgress({
       patternClassName,
       className,
       containerClassName: cn("max-w-7xl", containerClassName),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-10 flex flex-col items-center gap-6 md:mb-20", headerClassName), children: [
-          badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "outline", className: badgeClassName, children: badge }),
-          title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("mb-2 text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-2 text-center text-3xl font-semibold lg:text-5xl", titleClassName), children: title }))
-        ] }),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col space-y-6 md:space-y-16", children: [
+        badge || title || description ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn("flex flex-col items-center gap-6", headerClassName),
+            children: [
+              badge && /* @__PURE__ */ jsxRuntime.jsx(Badge, { className: badgeClassName, children: badge }),
+              title && (typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h2",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "text-xl font-semibold text-balance md:text-2xl lg:text-3xl",
+                    titleClassName
+                  ),
+                  children: title
+                }
+              )),
+              description && (typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-1 md:mt-6", descriptionClassName), children: description }))
+            ]
+          }
+        ) : null,
         /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { className: cn("w-full", carouselClassName), setApi, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-4 flex justify-between px-1 md:mb-5", controlsClassName), children: [
-            carouselLabel && (typeof carouselLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: carouselLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: carouselLabel })),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mr-2 hidden items-center gap-3 text-xs md:flex", getTextColor(background, "muted")), children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "01" }),
-                /* @__PURE__ */ jsxRuntime.jsx(Progress, { value: progress, className: cn("h-0.5 w-52", progressClassName) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                  "0",
-                  slidesLength
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "mb-4 flex justify-between items-center px-1 md:mb-8",
+                controlsClassName
+              ),
+              children: [
+                carouselLabel && (typeof carouselLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: carouselLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium", children: carouselLabel })),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center space-x-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: cn("mr-4 hidden items-center gap-3 text-xs md:flex"),
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: "1" }),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          Progress,
+                          {
+                            value: progress,
+                            className: cn("h-0.5 w-52", progressClassName)
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { children: slidesLength })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "static translate-y-0" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "static translate-y-0" })
                 ] })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, { className: "static translate-y-0" }),
-              /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, { className: "static translate-y-0" })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { children: slidesContent })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: "md:items-stretch", children: slidesContent })
         ] })
-      ]
+      ] })
     }
   );
 }

package/dist/feature-carousel-progress.d.cts

@@ -39,6 +39,10 @@ interface FeatureCarouselProgressItem {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Optional href for the item
+     */
+    href?: string;
 }
 interface FeatureCarouselProgressProps {
     /**
@@ -49,6 +53,10 @@ interface FeatureCarouselProgressProps {
      * Main heading content
      */
     title?: React.ReactNode;
+    /**
+     * Supporting description content
+     */
+    description?: React.ReactNode;
     /**
      * Label for the carousel section
      */
@@ -81,6 +89,10 @@ interface FeatureCarouselProgressProps {
      * Additional CSS classes for the title
      */
     titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Additional CSS classes for the carousel
      */
@@ -138,6 +150,6 @@ interface FeatureCarouselProgressProps {
  * />
  * ```
  */
-declare function FeatureCarouselProgress({ badge, title, carouselLabel, slides, slidesSlot, className, containerClassName, headerClassName, badgeClassName, titleClassName, carouselClassName, controlsClassName, progressClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCarouselProgressProps): React.JSX.Element;
+declare function FeatureCarouselProgress({ badge, title, description, titleClassName, descriptionClassName, carouselLabel, slides, slidesSlot, className, containerClassName, headerClassName, badgeClassName, carouselClassName, controlsClassName, progressClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCarouselProgressProps): React.JSX.Element;
 
 export { FeatureCarouselProgress, type FeatureCarouselProgressProps };

package/dist/feature-carousel-progress.d.ts

@@ -39,6 +39,10 @@ interface FeatureCarouselProgressItem {
      * Additional CSS classes for the description
      */
     descriptionClassName?: string;
+    /**
+     * Optional href for the item
+     */
+    href?: string;
 }
 interface FeatureCarouselProgressProps {
     /**
@@ -49,6 +53,10 @@ interface FeatureCarouselProgressProps {
      * Main heading content
      */
     title?: React.ReactNode;
+    /**
+     * Supporting description content
+     */
+    description?: React.ReactNode;
     /**
      * Label for the carousel section
      */
@@ -81,6 +89,10 @@ interface FeatureCarouselProgressProps {
      * Additional CSS classes for the title
      */
     titleClassName?: string;
+    /**
+     * Additional CSS classes for the description
+     */
+    descriptionClassName?: string;
     /**
      * Additional CSS classes for the carousel
      */
@@ -138,6 +150,6 @@ interface FeatureCarouselProgressProps {
  * />
  * ```
  */
-declare function FeatureCarouselProgress({ badge, title, carouselLabel, slides, slidesSlot, className, containerClassName, headerClassName, badgeClassName, titleClassName, carouselClassName, controlsClassName, progressClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCarouselProgressProps): React.JSX.Element;
+declare function FeatureCarouselProgress({ badge, title, description, titleClassName, descriptionClassName, carouselLabel, slides, slidesSlot, className, containerClassName, headerClassName, badgeClassName, carouselClassName, controlsClassName, progressClassName, cardClassName, background, spacing, pattern, patternOpacity, patternClassName, }: FeatureCarouselProgressProps): React.JSX.Element;
 
 export { FeatureCarouselProgress, type FeatureCarouselProgressProps };