@opensite/ui 0.8.0 → 0.8.2

package/dist/carousel-portfolio-hero.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-portfolio-hero.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React from 'react';
-import React__default from 'react';
+import * as React6 from 'react';
+import React6__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -96,7 +96,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React.useMemo(() => {
+  const linkType = React6.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -117,7 +117,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React.useMemo(() => {
+  const normalizedHref = React6.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -135,7 +135,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React.useMemo(() => {
+  const target = React6.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -148,7 +148,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React.useMemo(() => {
+  const rel = React6.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -157,7 +157,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React.useCallback(
+  const handleClick = React6.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -341,7 +341,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React.forwardRef(
+var Pressable = React6.forwardRef(
   ({
     children,
     className,
@@ -447,10 +447,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
+  const [svgContent, setSvgContent] = React6.useState(null);
+  const [isLoading, setIsLoading] = React6.useState(true);
+  const [error, setError] = React6.useState(null);
+  const { url, iconName } = React6.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
@@ -459,7 +459,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React.useEffect(() => {
+  React6.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -553,7 +553,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.forwardRef(
+var Container = React6__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -858,7 +858,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.forwardRef(
+var Section = React6__default.forwardRef(
   ({
     id,
     title,
@@ -926,7 +926,7 @@ function CarouselPortfolioHero({
   actionsSlot,
   autoPlayInterval = 5e3,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full p-0 px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-full flex flex-col justify-center",
   contentClassName,
   tagClassName,
   titleClassName,
@@ -941,24 +941,46 @@ function CarouselPortfolioHero({
   patternOpacity,
   slideMediaBrightness = "50"
 }) {
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-  const goToNext = React.useCallback(() => {
+  const [currentIndex, setCurrentIndex] = React6.useState(0);
+  const intervalRef = React6.useRef(null);
+  const resetInterval = React6.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
+    }, autoPlayInterval);
+  }, [autoPlayInterval, slides?.length]);
+  const goToNext = React6.useCallback(() => {
     setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
-  }, [slides?.length]);
-  const goToPrev = React.useCallback(() => {
+    resetInterval();
+  }, [slides?.length, resetInterval]);
+  const goToPrev = React6.useCallback(() => {
     setCurrentIndex(
       (prevIndex) => (prevIndex - 1 + (slides?.length ?? 1)) % (slides?.length ?? 1)
     );
-  }, [slides?.length]);
-  React.useEffect(() => {
-    const interval = setInterval(goToNext, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [goToNext, autoPlayInterval]);
+    resetInterval();
+  }, [slides?.length, resetInterval]);
+  React6.useEffect(() => {
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -984,6 +1006,7 @@ function CarouselPortfolioHero({
       className: cn("relative h-screen w-full overflow-hidden", className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsx(
           "div",
@@ -1009,43 +1032,99 @@ function CarouselPortfolioHero({
           },
           slide.id
         )),
-        /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
-          currentSlide?.tag && /* @__PURE__ */ jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsx("span", { className: cn("inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium", tagClassName), children: currentSlide.tag }) : /* @__PURE__ */ jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
-          currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold sm:text-5xl md:text-6xl", titleClassName), children: currentSlide.title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: currentSlide.title })),
-          currentSlide?.description && (typeof currentSlide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl", descriptionClassName), children: currentSlide.description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: currentSlide.description })),
-          /* @__PURE__ */ jsxs("div", { className: cn("mt-8 flex items-center gap-4", actionsClassName), children: [
-            renderActions(),
-            /* @__PURE__ */ jsxs("div", { className: cn("ml-auto flex items-center gap-2", navigationClassName), children: [
-              /* @__PURE__ */ jsx(
-                Pressable,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12"
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
+              currentSlide?.tag && /* @__PURE__ */ jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsx(
+                "span",
                 {
-                  variant: "outline",
-                  size: "icon",
-                  className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
-                  onClick: goToPrev,
-                  asButton: true,
-                  children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                  className: cn(
+                    "inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium",
+                    tagClassName
+                  ),
+                  children: currentSlide.tag
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                Pressable,
+              ) : /* @__PURE__ */ jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
+              currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsx(
+                "h1",
                 {
-                  variant: "outline",
-                  size: "icon",
-                  className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
-                  onClick: goToNext,
-                  asButton: true,
-                  children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                  className: cn(
+                    "text-4xl font-bold sm:text-5xl md:text-6xl text-balance text-shadow",
+                    titleClassName
+                  ),
+                  children: currentSlide.title
                 }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: cn("ml-3 text-sm text-white/80", counterClassName), children: [
-                currentIndex + 1,
-                " / ",
-                slides?.length ?? 0
-              ] })
-            ] })
-          ] })
-        ] }) }) })
+              ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: currentSlide.title })),
+              currentSlide?.description && (typeof currentSlide.description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl  text-balance text-shadow",
+                    descriptionClassName
+                  ),
+                  children: currentSlide.description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: currentSlide.description })),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn("mt-8 flex items-center gap-4", actionsClassName),
+                  children: [
+                    renderActions(),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "ml-auto flex items-center gap-2",
+                          navigationClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Pressable,
+                            {
+                              variant: "outline",
+                              size: "icon",
+                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              onClick: goToPrev,
+                              asButton: true,
+                              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Pressable,
+                            {
+                              variant: "outline",
+                              size: "icon",
+                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              onClick: goToNext,
+                              asButton: true,
+                              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: cn("ml-3 text-sm text-white/80", counterClassName),
+                              children: [
+                                currentIndex + 1,
+                                " / ",
+                                slides?.length ?? 0
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }) })
+          }
+        )
       ]
     }
   );

package/dist/carousel-product-feature-showcase.cjs

@@ -950,8 +950,8 @@ function CarouselProductFeatureShowcase({
   actionsClassName,
   indicatorsClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -995,7 +995,14 @@ function CarouselProductFeatureShowcase({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 flex flex-wrap gap-3", children: actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1020,105 +1027,151 @@ function CarouselProductFeatureShowcase({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
-        ] }),
-        featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: featuresSlot }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative aspect-square overflow-hidden rounded-2xl bg-muted lg:aspect-[4/3]", imageClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
-              framerMotion.motion.div,
-              {
-                custom: direction,
-                variants: slideVariants,
-                initial: "enter",
-                animate: "center",
-                exit: "exit",
-                transition: { duration: 0.3, ease: "easeInOut" },
-                className: cn("absolute inset-0", activeFeature?.imageClassName),
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.Img,
-                  {
-                    src: currentImage,
-                    alt: typeof activeFeature?.title === "string" ? activeFeature.title : `Feature ${activeIndex + 1}`,
-                    className: "h-full w-full object-cover",
-                    optixFlowConfig
-                  }
-                )
-              },
-              `${activeIndex}-${activeColorIndex}`
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("absolute bottom-4 right-4 flex gap-2", navigationClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Pressable,
-                {
-                  onClick: goToPrev,
-                  asButton: true,
-                  variant: "outline",
-                  size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full border-border bg-background/90 text-foreground backdrop-blur-sm hover:bg-background",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
-                }
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+                headingClassName
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Pressable,
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-4 text-lg text-muted-foreground",
+                subheadingClassName
+              ),
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
+        ] }),
+        featuresSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassName, children: featuresSlot }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 lg:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
                 {
-                  onClick: goToNext,
-                  asButton: true,
-                  variant: "outline",
-                  size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full border-border bg-background/90 text-foreground backdrop-blur-sm hover:bg-background",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              framerMotion.motion.div,
-              {
-                initial: { opacity: 0, y: 20 },
-                animate: { opacity: 1, y: 0 },
-                exit: { opacity: 0, y: -20 },
-                transition: { duration: 0.3 },
-                children: [
-                  activeFeature?.title && (typeof activeFeature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: activeFeature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: activeFeature.title })),
-                  activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: activeFeature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: activeFeature.description })),
-                  activeFeature?.colors && activeFeature.colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6", colorSelectorClassName), children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-medium", children: "Available Colors" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: activeFeature.colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
+                  className: cn(
+                    "relative aspect-square overflow-hidden rounded-2xl bg-muted lg:aspect-4/3 shadow-lg",
+                    imageClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      framerMotion.motion.div,
                       {
-                        onClick: () => setActiveColorIndex(index),
+                        custom: direction,
+                        variants: slideVariants,
+                        initial: "enter",
+                        animate: "center",
+                        exit: "exit",
+                        transition: { duration: 0.3, ease: "easeInOut" },
                         className: cn(
-                          "h-8 w-8 rounded-full border-2 transition-all",
-                          activeColorIndex === index ? "border-primary ring-2 ring-primary ring-offset-2" : "border-transparent hover:border-muted-foreground"
+                          "absolute inset-0",
+                          activeFeature?.imageClassName
                         ),
-                        style: { backgroundColor: color.value },
-                        title: color.name
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          img.Img,
+                          {
+                            src: currentImage,
+                            alt: typeof activeFeature?.title === "string" ? activeFeature.title : `Feature ${activeIndex + 1}`,
+                            className: "h-full w-full object-cover",
+                            optixFlowConfig
+                          }
+                        )
                       },
-                      color.name
-                    )) })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() })
-                ]
-              },
-              activeIndex
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex gap-2", indicatorsClassName), children: features?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => goToSlide(index),
-                className: cn(
-                  "h-2 rounded-full transition-all",
-                  activeIndex === index ? "w-8 bg-primary" : "w-2 bg-muted-foreground/30 hover:bg-muted-foreground/50"
-                )
-              },
-              index
-            )) })
-          ] })
-        ] })
+                      `${activeIndex}-${activeColorIndex}`
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute bottom-4 right-4 flex gap-2",
+                          navigationClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Pressable,
+                            {
+                              onClick: goToPrev,
+                              asButton: true,
+                              variant: "outline",
+                              size: "icon",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Pressable,
+                            {
+                              onClick: goToNext,
+                              asButton: true,
+                              variant: "outline",
+                              size: "icon",
+                              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  framerMotion.motion.div,
+                  {
+                    initial: { opacity: 0, y: 20 },
+                    animate: { opacity: 1, y: 0 },
+                    exit: { opacity: 0, y: -20 },
+                    transition: { duration: 0.3 },
+                    children: [
+                      activeFeature?.title && (typeof activeFeature.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: activeFeature.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: activeFeature.title })),
+                      activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: activeFeature.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: activeFeature.description })),
+                      activeFeature?.colors && activeFeature.colors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-6", colorSelectorClassName), children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-sm font-medium", children: "Available Colors" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", children: activeFeature.colors.map((color, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: () => setActiveColorIndex(index),
+                            className: cn(
+                              "h-8 w-8 rounded-full border-2 transition-all",
+                              activeColorIndex === index ? "border-primary ring-2 ring-primary ring-offset-2" : "border-transparent hover:border-muted-foreground"
+                            ),
+                            style: { backgroundColor: color.value },
+                            title: color.name
+                          },
+                          color.name
+                        )) })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { className: actionsClassName, children: renderActions() })
+                    ]
+                  },
+                  activeIndex
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-8 flex gap-2", indicatorsClassName), children: features?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => goToSlide(index),
+                    className: cn(
+                      "h-2 rounded-full transition-all",
+                      activeIndex === index ? "w-8 bg-primary" : "w-2 bg-muted-foreground/30 hover:bg-muted-foreground/50"
+                    )
+                  },
+                  index
+                )) })
+              ] })
+            ]
+          }
+        )
       ] })
     }
   );

package/dist/carousel-product-feature-showcase.d.cts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-CES_LEJI.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-tmd_MRJv.cjs';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-Sm_ZSgyv.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**

package/dist/carousel-product-feature-showcase.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
-import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BRz60ABw.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-DRE-f6cS.js';
+import { f as SectionBackground, g as SectionSpacing } from './community-initiatives-BeWIIjA4.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'react/jsx-runtime';
 import 'class-variance-authority';
-import './button-variants-8mtEHxev.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**