@opensite/ui 0.8.1 → 0.8.3

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.js

@@ -929,8 +929,8 @@ function CarouselProductFeatureShowcase({
   actionsClassName,
   indicatorsClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
@@ -974,7 +974,14 @@ function CarouselProductFeatureShowcase({
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return /* @__PURE__ */ 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__ */ jsx(
         Pressable,
         {
@@ -999,105 +1006,151 @@ function CarouselProductFeatureShowcase({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
+      children: /* @__PURE__ */ jsxs("div", { className: cn("relative", containerClassName), children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
-        ] }),
-        featuresSlot ? /* @__PURE__ */ jsx("div", { className: contentClassName, children: featuresSlot }) : /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsxs("div", { className: cn("relative aspect-square overflow-hidden rounded-2xl bg-muted lg:aspect-[4/3]", imageClassName), children: [
-            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
-              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__ */ jsx(
-                  Img,
-                  {
-                    src: currentImage,
-                    alt: typeof activeFeature?.title === "string" ? activeFeature.title : `Feature ${activeIndex + 1}`,
-                    className: "h-full w-full object-cover",
-                    optixFlowConfig
-                  }
-                )
-              },
-              `${activeIndex}-${activeColorIndex}`
-            ) }),
-            /* @__PURE__ */ jsxs("div", { className: cn("absolute bottom-4 right-4 flex gap-2", navigationClassName), children: [
-              /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
-                }
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+                headingClassName
               ),
-              /* @__PURE__ */ jsx(
-                Pressable,
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn(
+                "mt-4 text-lg text-muted-foreground",
+                subheadingClassName
+              ),
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
+        ] }),
+        featuresSlot ? /* @__PURE__ */ jsx("div", { className: contentClassName, children: featuresSlot }) : /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 lg:grid-cols-2 lg:gap-12",
+              contentClassName
+            ),
+            children: [
+              /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
-            /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
-              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__ */ jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: activeFeature.title }) : /* @__PURE__ */ jsx("div", { children: activeFeature.title })),
-                  activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: activeFeature.description }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: activeFeature.description })),
-                  activeFeature?.colors && activeFeature.colors.length > 0 && /* @__PURE__ */ jsxs("div", { className: cn("mt-6", colorSelectorClassName), children: [
-                    /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm font-medium", children: "Available Colors" }),
-                    /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: activeFeature.colors.map((color, index) => /* @__PURE__ */ jsx(
-                      "button",
+                  className: cn(
+                    "relative aspect-square overflow-hidden rounded-2xl bg-muted lg:aspect-4/3 shadow-lg",
+                    imageClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
+                      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__ */ jsx(
+                          Img,
+                          {
+                            src: currentImage,
+                            alt: typeof activeFeature?.title === "string" ? activeFeature.title : `Feature ${activeIndex + 1}`,
+                            className: "h-full w-full object-cover",
+                            optixFlowConfig
+                          }
+                        )
                       },
-                      color.name
-                    )) })
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: actionsClassName, children: renderActions() })
-                ]
-              },
-              activeIndex
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex gap-2", indicatorsClassName), children: features?.map((_, index) => /* @__PURE__ */ 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__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "absolute bottom-4 right-4 flex gap-2",
+                          navigationClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Pressable,
+                            {
+                              onClick: goToPrev,
+                              asButton: true,
+                              variant: "outline",
+                              size: "icon",
+                              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            Pressable,
+                            {
+                              onClick: goToNext,
+                              asButton: true,
+                              variant: "outline",
+                              size: "icon",
+                              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col justify-center", children: [
+                /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxs(
+                  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__ */ jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: activeFeature.title }) : /* @__PURE__ */ jsx("div", { children: activeFeature.title })),
+                      activeFeature?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: activeFeature.description }) : /* @__PURE__ */ jsx("div", { className: "mt-4", children: activeFeature.description })),
+                      activeFeature?.colors && activeFeature.colors.length > 0 && /* @__PURE__ */ jsxs("div", { className: cn("mt-6", colorSelectorClassName), children: [
+                        /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm font-medium", children: "Available Colors" }),
+                        /* @__PURE__ */ jsx("div", { className: "flex gap-3", children: activeFeature.colors.map((color, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: actionsClassName, children: renderActions() })
+                    ]
+                  },
+                  activeIndex
+                ) }),
+                /* @__PURE__ */ jsx("div", { className: cn("mt-8 flex gap-2", indicatorsClassName), children: features?.map((_, index) => /* @__PURE__ */ 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-progress-slider.cjs

@@ -982,12 +982,16 @@ function SliderBtn({
 }
 function SliderWrapper({ children, value, className }) {
   const { active } = useProgressSliderContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: active === value && /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", initial: false, children: active === value && /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
+      initial: { opacity: 0, scale: 0.98 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.98 },
+      transition: {
+        duration: 0.4,
+        ease: [0.4, 0, 0.2, 1]
+      },
       className: cn("", className),
       children
     },
@@ -1098,12 +1102,12 @@ function CarouselProgressSlider({
           pattern,
           patternOpacity,
           children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", imageClassName), children: [
-              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative min-h-[400px]", imageClassName), children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0", children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsxRuntime.jsx(
                 SliderWrapper,
                 {
                   value: slide.id,
-                  className: cn("", slide.className),
+                  className: cn("absolute inset-0", slide.className),
                   children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
                     img.Img,
                     {
@@ -1118,8 +1122,8 @@ function CarouselProgressSlider({
                   ) })
                 },
                 slide.id
-              )),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
+              )) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsxRuntime.jsx(
                 Pressable,
                 {
                   onClick: togglePause,

package/dist/carousel-progress-slider.js

@@ -961,12 +961,16 @@ function SliderBtn({
 }
 function SliderWrapper({ children, value, className }) {
   const { active } = useProgressSliderContext();
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: active === value && /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: active === value && /* @__PURE__ */ jsx(
     motion.div,
     {
-      initial: { opacity: 0 },
-      animate: { opacity: 1 },
-      exit: { opacity: 0 },
+      initial: { opacity: 0, scale: 0.98 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.98 },
+      transition: {
+        duration: 0.4,
+        ease: [0.4, 0, 0.2, 1]
+      },
       className: cn("", className),
       children
     },
@@ -1077,12 +1081,12 @@ function CarouselProgressSlider({
           pattern,
           patternOpacity,
           children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2", contentClassName), children: [
-            /* @__PURE__ */ jsxs("div", { className: cn("relative", imageClassName), children: [
-              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsxs("div", { className: cn("relative min-h-[400px]", imageClassName), children: [
+              /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
                 SliderWrapper,
                 {
                   value: slide.id,
-                  className: cn("", slide.className),
+                  className: cn("absolute inset-0", slide.className),
                   children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
                     Img,
                     {
@@ -1097,8 +1101,8 @@ function CarouselProgressSlider({
                   ) })
                 },
                 slide.id
-              )),
-              /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsx(
+              )) }),
+              /* @__PURE__ */ jsx("div", { className: "relative mt-4 flex justify-center lg:justify-start", children: /* @__PURE__ */ jsx(
                 Pressable,
                 {
                   onClick: togglePause,