@opensite/ui 3.1.7 → 3.1.9

package/dist/registry.js

@@ -20209,8 +20209,8 @@ function CarouselFullscreenScrollFx({
               {
                 onClick: () => scrollToSlide(index),
                 className: cn(
-                  "h-3 w-3 rounded-full border-2 transition-all",
-                  activeIndex === index ? "scale-125 border-foreground bg-foreground" : "border-foreground/50 bg-transparent hover:border-foreground"
+                  "h-3 w-3 rounded-full border-2 transition-all cursor-pointer",
+                  activeIndex === index ? "scale-125 border-white bg-white" : "border-white bg-transparent hover:bg-white"
                 ),
                 "aria-label": `Go to ${typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`}`
               },
@@ -20319,7 +20319,8 @@ function CarouselFullscreenScrollFx({
                       "div",
                       {
                         className: cn(
-                          "relative z-10 mx-auto max-w-4xl md:max-w-xl px-6 text-center text-shadow",
+                          "relative z-10 mx-auto max-w-full md:max-w-md",
+                          "px-6 text-center text-shadow",
                           contentClassName
                         ),
                         children: [
@@ -20514,7 +20515,7 @@ function CarouselGalleryThumbnails({
               "button",
               {
                 className: cn(
-                  "relative h-20 w-20 shrink-0 transition-all duration-200",
+                  "relative h-20 w-20 shrink-0 transition-all duration-200 rounded-lg",
                   index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
                   thumbnailClassName
                 ),
@@ -20524,7 +20525,7 @@ function CarouselGalleryThumbnails({
                   {
                     src: image.src,
                     alt: `Thumbnail ${index + 1}`,
-                    className: "h-full w-full rounded-sm object-cover",
+                    className: "h-full w-full rounded-lg object-cover",
                     optixFlowConfig
                   }
                 )
@@ -20768,7 +20769,7 @@ function CarouselImageHero({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing = "py-0 md:py-32",
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -20833,87 +20834,96 @@ function CarouselImageHero({
       patternOpacity,
       containerClassName,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
-          !hasImages ? null : images?.map((image, index) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "absolute inset-0 transition-opacity duration-1000",
-                index === currentImageIndex ? "opacity-100" : "opacity-0"
-              ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: image.src,
-                    alt: image.alt,
-                    className: cn("h-full w-full object-cover", image.className),
-                    optixFlowConfig
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" })
-              ]
-            },
-            index
-          )),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 items-center justify-center gap-5",
-                indicatorsClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    onClick: handlePrev,
-                    asButton: true,
-                    variant: "ghost",
-                    size: "icon",
-                    className: cn(
-                      "flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute inset-0 mx-4 md:mx-8 rounded-2xl overflow-hidden",
+              imageClassName
+            ),
+            children: [
+              !hasImages ? null : images?.map((image, index) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "absolute inset-0 transition-opacity duration-1000",
+                    index === currentImageIndex ? "opacity-100" : "opacity-0"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Img,
+                      {
+                        src: image.src,
+                        alt: image.alt,
+                        className: cn("h-full w-full object-cover", image.className),
+                        optixFlowConfig
+                      }
                     ),
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
-                  }
-                ),
-                /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1", children: images?.map((_, index) => /* @__PURE__ */ jsx(
-                  motion.button,
-                  {
-                    initial: false,
-                    onClick: () => handleDotClick(index),
-                    animate: {
-                      width: index === currentImageIndex ? "30px" : "8px"
-                    },
-                    className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full p-0.5 bg-white/50",
-                    "aria-label": `Go to image ${index + 1}`,
-                    children: currentImageIndex === index && /* @__PURE__ */ jsx(
-                      motion.div,
+                    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/40" })
+                  ]
+                },
+                index
+              )),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "absolute bottom-6 left-1/2 z-20 flex -translate-x-1/2 items-center justify-center gap-5",
+                    indicatorsClassName
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      Pressable,
                       {
-                        style: { clipPath },
-                        className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-white"
+                        onClick: handlePrev,
+                        asButton: true,
+                        variant: "ghost",
+                        size: "icon",
+                        className: cn(
+                          "flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
+                        ),
+                        children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 16 })
                       }
-                    )
-                  },
-                  index
-                )) }),
-                /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    onClick: handleNext,
-                    asButton: true,
-                    variant: "ghost",
-                    size: "icon",
-                    className: cn(
-                      "flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
                     ),
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
-                  }
-                )
-              ]
-            }
-          )
-        ] }),
+                    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-1", children: images?.map((_, index) => /* @__PURE__ */ jsx(
+                      motion.button,
+                      {
+                        initial: false,
+                        onClick: () => handleDotClick(index),
+                        animate: {
+                          width: index === currentImageIndex ? "30px" : "8px"
+                        },
+                        className: "relative flex h-2 cursor-pointer items-center justify-center overflow-hidden rounded-full p-0.5 bg-white/50",
+                        "aria-label": `Go to image ${index + 1}`,
+                        children: currentImageIndex === index && /* @__PURE__ */ jsx(
+                          motion.div,
+                          {
+                            style: { clipPath },
+                            className: "absolute left-0 top-0 h-full w-full origin-left rounded-full bg-white"
+                          }
+                        )
+                      },
+                      index
+                    )) }),
+                    /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        onClick: handleNext,
+                        asButton: true,
+                        variant: "ghost",
+                        size: "icon",
+                        className: cn(
+                          "flex size-6 cursor-pointer items-center justify-center rounded-full p-0.5 opacity-80 hover:opacity-100 active:scale-95 bg-white/20 text-white backdrop-blur-sm"
+                        ),
+                        children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 })
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -20952,14 +20962,14 @@ function CarouselImageHero({
                   }
                 ) : description)
               ] }),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center items-center", children: /* @__PURE__ */ jsx(
                 BlockActions,
                 {
                   actions,
                   actionsSlot,
                   actionsClassName
                 }
-              )
+              ) })
             ] })
           }
         )
@@ -21464,7 +21474,7 @@ function CarouselProductFeatureShowcase({
   actions,
   actionsSlot,
   className,
-  containerClassName,
+  containerClassName = "px-4 md:px-10 lg:px-16",
   headerClassName,
   headingClassName,
   subheadingClassName,
@@ -21476,7 +21486,7 @@ function CarouselProductFeatureShowcase({
   indicatorsClassName,
   optixFlowConfig,
   background,
-  spacing,
+  spacing = "hero",
   pattern,
   patternOpacity
 }) {
@@ -21553,7 +21563,8 @@ function CarouselProductFeatureShowcase({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs("div", { className: cn("relative", containerClassName), children: [
+      containerClassName,
+      children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
         /* @__PURE__ */ jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
           heading && (typeof heading === "string" ? /* @__PURE__ */ jsx(
             "h2",
@@ -21564,17 +21575,14 @@ function CarouselProductFeatureShowcase({
               ),
               children: heading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+          ) : heading),
           subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
             "p",
             {
-              className: cn(
-                "mt-4 text-lg text-muted-foreground",
-                subheadingClassName
-              ),
+              className: cn("mt-4 text-lg text-balance", subheadingClassName),
               children: subheading
             }
-          ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
+          ) : subheading)
         ] }),
         featuresSlot ? /* @__PURE__ */ jsx("div", { className: contentClassName, children: featuresSlot }) : /* @__PURE__ */ jsxs(
           "div",
@@ -21662,7 +21670,7 @@ function CarouselProductFeatureShowcase({
                     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?.description && (typeof activeFeature.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-balance", 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(
@@ -21779,7 +21787,7 @@ function CarouselProgressSlider({
   fastDuration = 400,
   vertical = false,
   className,
-  containerClassName,
+  containerClassName = "px-4 md:px-10 lg:px-16",
   contentClassName,
   imageClassName,
   navigationClassName,
@@ -21873,76 +21881,86 @@ function CarouselProgressSlider({
           className: cn(className),
           pattern,
           patternOpacity,
-          children: /* @__PURE__ */ jsx("div", { className: cn("relative", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("grid gap-4 lg:gap-8 lg:grid-cols-2", contentClassName), children: [
-            /* @__PURE__ */ jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-video", children: [
-              slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
-                SliderWrapper,
-                {
-                  value: slide.id,
-                  className: cn("absolute inset-0", slide.className),
-                  children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
-                    Img,
+          containerClassName,
+          children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "grid gap-4 lg:gap-8 lg:grid-cols-2",
+                contentClassName
+              ),
+              children: [
+                /* @__PURE__ */ jsx("div", { className: cn("relative", imageClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-video", children: [
+                  slidesSlot ? slidesSlot : slides?.map((slide) => /* @__PURE__ */ jsx(
+                    SliderWrapper,
                     {
-                      src: slide.image,
-                      alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
-                      className: cn(
-                        "h-full w-full object-cover",
-                        slide.imageClassName
-                      ),
-                      optixFlowConfig
-                    }
-                  ) })
-                },
-                slide.id
-              )),
-              /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsx(
-                Pressable,
-                {
-                  onClick: togglePause,
-                  asButton: true,
-                  variant: "outline",
-                  size: "icon",
-                  className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted/80 backdrop-blur-sm",
-                  "aria-label": isPaused ? "Play" : "Pause",
-                  children: /* @__PURE__ */ jsx(
-                    DynamicIcon,
+                      value: slide.id,
+                      className: cn("absolute inset-0", slide.className),
+                      children: /* @__PURE__ */ jsx("div", { className: "aspect-video overflow-hidden rounded-lg", children: /* @__PURE__ */ jsx(
+                        Img,
+                        {
+                          src: slide.image,
+                          alt: typeof slide.title === "string" ? slide.title : `Slide ${slide.id}`,
+                          className: cn(
+                            "h-full w-full object-cover",
+                            slide.imageClassName
+                          ),
+                          optixFlowConfig
+                        }
+                      ) })
+                    },
+                    slide.id
+                  )),
+                  /* @__PURE__ */ jsx("div", { className: "absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsx(
+                    Pressable,
                     {
-                      name: isPaused ? "lucide/play" : "lucide/pause",
-                      size: 18
+                      onClick: togglePause,
+                      asButton: true,
+                      variant: "outline",
+                      size: "icon",
+                      className: "flex h-10 w-10 items-center justify-center rounded-full bg-muted/80 backdrop-blur-sm",
+                      "aria-label": isPaused ? "Play" : "Pause",
+                      children: /* @__PURE__ */ jsx(
+                        DynamicIcon,
+                        {
+                          name: isPaused ? "lucide/play" : "lucide/pause",
+                          size: 18
+                        }
+                      )
                     }
-                  )
-                }
-              ) })
-            ] }) }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "flex flex-col justify-center gap-4",
-                  navigationClassName
-                ),
-                children: slides?.map((slide) => /* @__PURE__ */ jsxs(
-                  SliderBtn,
+                  ) })
+                ] }) }),
+                /* @__PURE__ */ jsx(
+                  "div",
                   {
-                    value: slide.id,
                     className: cn(
-                      "rounded-lg border p-4 text-left transition-colors hover:bg-muted",
-                      buttonClassName
-                    ),
-                    progressBarClass: cn(
-                      "bottom-0 h-1 bg-primary",
-                      progressBarClassName
+                      "flex flex-col justify-center gap-4",
+                      navigationClassName
                     ),
-                    children: [
-                      slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : /* @__PURE__ */ jsx("div", { children: slide.title })),
-                      slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: slide.description }) : /* @__PURE__ */ jsx("div", { className: "mt-1", children: slide.description }))
-                    ]
-                  },
-                  slide.id
-                ))
-              }
-            )
-          ] }) })
+                    children: slides?.map((slide) => /* @__PURE__ */ jsxs(
+                      SliderBtn,
+                      {
+                        value: slide.id,
+                        className: cn(
+                          "rounded-lg border p-4 text-left transition-colors hover:bg-muted",
+                          buttonClassName
+                        ),
+                        progressBarClass: cn(
+                          "bottom-0 h-1 bg-primary",
+                          progressBarClassName
+                        ),
+                        children: [
+                          slide.title && (typeof slide.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: slide.title }) : slide.title),
+                          slide.description && (typeof slide.description === "string" ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-balance", children: slide.description }) : slide.description)
+                        ]
+                      },
+                      slide.id
+                    ))
+                  }
+                )
+              ]
+            }
+          ) })
         }
       )
     }
@@ -22023,13 +22041,19 @@ function CarouselScrollingFeatureShowcase({
             "h2",
             {
               className: cn(
-                "text-3xl font-bold tracking-tight md:text-4xl",
+                "text-3xl font-bold tracking-tight md:text-4xl text-pretty",
                 headingClassName
               ),
               children: heading
             }
           ) : heading),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg", subheadingClassName), children: subheading }) : subheading)
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: cn("mt-4 text-lg text-balance", subheadingClassName),
+              children: subheading
+            }
+          ) : subheading)
         ] }),
         /* @__PURE__ */ jsxs(
           "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",