npm - @opensite/ui - Versions diffs - 0.7.7 → 0.7.8 - Mend

@opensite/ui 0.7.7 → 0.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/dist/carousel-gallery-thumbnails.cjs +17 -2
package/dist/carousel-gallery-thumbnails.d.cts +5 -1
package/dist/carousel-gallery-thumbnails.d.ts +5 -1
package/dist/carousel-gallery-thumbnails.js +17 -2
package/dist/carousel-horizontal-cards.cjs +7 -7
package/dist/carousel-horizontal-cards.js +7 -7
package/dist/carousel-image-hero.cjs +4 -4
package/dist/carousel-image-hero.js +4 -4
package/dist/carousel-multi-step-showcase.cjs +30 -26
package/dist/carousel-multi-step-showcase.js +30 -26
package/dist/carousel-portfolio-hero.cjs +29 -17
package/dist/carousel-portfolio-hero.d.cts +5 -1
package/dist/carousel-portfolio-hero.d.ts +5 -1
package/dist/carousel-portfolio-hero.js +29 -17
package/dist/carousel-product-feature-showcase.cjs +7 -7
package/dist/carousel-product-feature-showcase.js +7 -7
package/dist/carousel-progress-slider.cjs +591 -40
package/dist/carousel-progress-slider.js +591 -40
package/dist/carousel-scrolling-feature-showcase.cjs +45 -38
package/dist/carousel-scrolling-feature-showcase.js +46 -39
package/dist/registry.cjs +171 -126
package/dist/registry.js +172 -127
package/package.json +1 -1

package/dist/carousel-gallery-thumbnails.cjs CHANGED Viewed

@@ -32,6 +32,16 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -947,7 +957,8 @@ function CarouselGalleryThumbnails({
   background = "white",
   spacing = "xl",
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideMediaBrightness = "50"
 }) {
   const [currentIndex, setCurrentIndex] = React__namespace.useState(0);
   const prevSlide = React__namespace.useCallback(() => {
@@ -1001,7 +1012,11 @@ function CarouselGalleryThumbnails({
                 {
                   src: image.src,
                   alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
-                  className: cn("h-full w-full object-cover", image.imageClassName),
+                  className: cn(
+                    "h-full w-full object-cover",
+                    BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                    image.imageClassName
+                  ),
                   optixFlowConfig
                 }
               )

package/dist/carousel-gallery-thumbnails.d.cts CHANGED Viewed

@@ -116,7 +116,11 @@ interface CarouselGalleryThumbnailsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Brightness level for slide images (controls overlay visibility)
+     */
+    slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
 }
-declare function CarouselGalleryThumbnails({ images, imagesSlot, autoPlay, autoPlayInterval, showThumbnails, className, containerClassName, slideClassName, navigationClassName, captionClassName, thumbnailsClassName, thumbnailClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselGalleryThumbnailsProps): React.JSX.Element;
+declare function CarouselGalleryThumbnails({ images, imagesSlot, autoPlay, autoPlayInterval, showThumbnails, className, containerClassName, slideClassName, navigationClassName, captionClassName, thumbnailsClassName, thumbnailClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, }: CarouselGalleryThumbnailsProps): React.JSX.Element;
 export { CarouselGalleryThumbnails, type CarouselGalleryThumbnailsProps, type GalleryImage };

package/dist/carousel-gallery-thumbnails.d.ts CHANGED Viewed

@@ -116,7 +116,11 @@ interface CarouselGalleryThumbnailsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Brightness level for slide images (controls overlay visibility)
+     */
+    slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
 }
-declare function CarouselGalleryThumbnails({ images, imagesSlot, autoPlay, autoPlayInterval, showThumbnails, className, containerClassName, slideClassName, navigationClassName, captionClassName, thumbnailsClassName, thumbnailClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselGalleryThumbnailsProps): React.JSX.Element;
+declare function CarouselGalleryThumbnails({ images, imagesSlot, autoPlay, autoPlayInterval, showThumbnails, className, containerClassName, slideClassName, navigationClassName, captionClassName, thumbnailsClassName, thumbnailClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, }: CarouselGalleryThumbnailsProps): React.JSX.Element;
 export { CarouselGalleryThumbnails, type CarouselGalleryThumbnailsProps, type GalleryImage };

package/dist/carousel-gallery-thumbnails.js CHANGED Viewed

@@ -11,6 +11,16 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -926,7 +936,8 @@ function CarouselGalleryThumbnails({
   background = "white",
   spacing = "xl",
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideMediaBrightness = "50"
 }) {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const prevSlide = React.useCallback(() => {
@@ -980,7 +991,11 @@ function CarouselGalleryThumbnails({
                 {
                   src: image.src,
                   alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
-                  className: cn("h-full w-full object-cover", image.imageClassName),
+                  className: cn(
+                    "h-full w-full object-cover",
+                    BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                    image.imageClassName
+                  ),
                   optixFlowConfig
                 }
               )

package/dist/carousel-horizontal-cards.cjs CHANGED Viewed

@@ -988,7 +988,7 @@ function CarouselHorizontalCards({
     return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       framerMotion.motion.div,
       {
-        className: cn("group w-[280px] shrink-0", item.className),
+        className: cn("group w-[320px] shrink-0 sm:w-[360px] lg:w-[400px]", item.className),
         initial: { opacity: 0, y: 20 },
         animate: { opacity: 1, y: 0 },
         transition: { duration: 0.5, delay: index * 0.1 },
@@ -1024,7 +1024,7 @@ function CarouselHorizontalCards({
       patternOpacity,
       "aria-labelledby": "carousel-title",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4 md:px-6", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-6 flex items-center justify-between", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 flex items-center justify-between gap-4", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           heading && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
             typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
               "h2",
@@ -1039,7 +1039,7 @@ function CarouselHorizontalCards({
               {
                 name: "lucide/chevron-right",
                 size: 24,
-                className: "ml-2 transition-transform group-hover:translate-x-1"
+                className: "ml-2 flex-shrink-0 self-center transition-transform group-hover:translate-x-1"
               }
             )
           ] }),
@@ -1058,20 +1058,20 @@ function CarouselHorizontalCards({
             Pressable,
             {
               onClick: () => scroll("left"),
-              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 rounded-full border bg-background/60 p-2 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
               "aria-label": "Scroll left",
               asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
             }
           ),
           !isAtEnd && /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
               onClick: () => scroll("right"),
-              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 rounded-full border bg-background/60 p-2 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
               "aria-label": "Scroll right",
               asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
+              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
             }
           )
         ] })

package/dist/carousel-horizontal-cards.js CHANGED Viewed

@@ -967,7 +967,7 @@ function CarouselHorizontalCards({
     return items.map((item, index) => /* @__PURE__ */ jsx(
       motion.div,
       {
-        className: cn("group w-[280px] shrink-0", item.className),
+        className: cn("group w-[320px] shrink-0 sm:w-[360px] lg:w-[400px]", item.className),
         initial: { opacity: 0, y: 20 },
         animate: { opacity: 1, y: 0 },
         transition: { duration: 0.5, delay: index * 0.1 },
@@ -1003,7 +1003,7 @@ function CarouselHorizontalCards({
       patternOpacity,
       "aria-labelledby": "carousel-title",
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 md:px-6", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: cn("mb-6 flex items-center justify-between", headerClassName), children: /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: cn("mb-8 flex items-center justify-between gap-4", headerClassName), children: /* @__PURE__ */ jsxs("div", { children: [
           heading && /* @__PURE__ */ jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
             typeof heading === "string" ? /* @__PURE__ */ jsx(
               "h2",
@@ -1018,7 +1018,7 @@ function CarouselHorizontalCards({
               {
                 name: "lucide/chevron-right",
                 size: 24,
-                className: "ml-2 transition-transform group-hover:translate-x-1"
+                className: "ml-2 flex-shrink-0 self-center transition-transform group-hover:translate-x-1"
               }
             )
           ] }),
@@ -1037,20 +1037,20 @@ function CarouselHorizontalCards({
             Pressable,
             {
               onClick: () => scroll("left"),
-              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 rounded-full border bg-background/60 p-2 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
               "aria-label": "Scroll left",
               asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
             }
           ),
           !isAtEnd && /* @__PURE__ */ jsx(
             Pressable,
             {
               onClick: () => scroll("right"),
-              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 rounded-full border bg-background/60 p-2 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
+              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
               "aria-label": "Scroll right",
               asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
+              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
             }
           )
         ] })

package/dist/carousel-image-hero.cjs CHANGED Viewed

@@ -978,7 +978,7 @@ function CarouselImageHero({
         Pressable,
         {
           asButton: true,
-          className: cn("bg-primary-foreground text-primary dark:bg-primary dark:text-primary-foreground", actionClassName),
+          className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
@@ -1046,12 +1046,12 @@ function CarouselImageHero({
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24, className: "text-white" })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-2", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: () => setCurrentImageIndex(index),
               className: cn(
-                "h-2.5 w-2.5 rounded-full transition-colors",
+                "flex h-3 w-3 items-center justify-center rounded-full transition-colors",
                 index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
               ),
               "aria-label": `Go to image ${index + 1}`
@@ -1059,7 +1059,7 @@ function CarouselImageHero({
             index
           )) })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-24 text-center md:px-6 md:py-32 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-3xl space-y-8", contentClassName), children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-16 text-center md:px-6 md:py-20", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
             badge && (typeof badge === "string" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm", badgeClassName), children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: badge }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: badgeClassName, children: badge })),
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-primary-foreground dark:text-primary sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),

package/dist/carousel-image-hero.js CHANGED Viewed

@@ -957,7 +957,7 @@ function CarouselImageHero({
         Pressable,
         {
           asButton: true,
-          className: cn("bg-primary-foreground text-primary dark:bg-primary dark:text-primary-foreground", actionClassName),
+          className: actionClassName,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             icon,
@@ -1025,12 +1025,12 @@ function CarouselImageHero({
               children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24, className: "text-white" })
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-2", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: cn("absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => setCurrentImageIndex(index),
               className: cn(
-                "h-2.5 w-2.5 rounded-full transition-colors",
+                "flex h-3 w-3 items-center justify-center rounded-full transition-colors",
                 index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
               ),
               "aria-label": `Go to image ${index + 1}`
@@ -1038,7 +1038,7 @@ function CarouselImageHero({
             index
           )) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-24 text-center md:px-6 md:py-32 2xl:max-w-[1400px]", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-3xl space-y-8", contentClassName), children: [
+        /* @__PURE__ */ jsx("div", { className: cn("container relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-16 text-center md:px-6 md:py-20", containerClassName), children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl space-y-6", contentClassName), children: [
           /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
             badge && (typeof badge === "string" ? /* @__PURE__ */ jsx("div", { className: cn("inline-flex items-center rounded-full bg-white/10 px-3 py-1 text-sm font-medium text-white backdrop-blur-sm", badgeClassName), children: /* @__PURE__ */ jsx("span", { children: badge }) }) : /* @__PURE__ */ jsx("div", { className: badgeClassName, children: badge })),
             heading && (typeof heading === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold tracking-tight text-primary-foreground dark:text-primary sm:text-5xl md:text-6xl", headingClassName), children: heading }) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),

package/dist/carousel-multi-step-showcase.cjs CHANGED Viewed

@@ -1055,38 +1055,42 @@ function CarouselMultiStepShowcase({
             }
           ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
         ] }),
-        stepsSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: stepNavigationClassName, children: stepsSlot }) : /* @__PURE__ */ jsxRuntime.jsx(
+        stepsSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden sm:block", stepNavigationClassName), children: stepsSlot }) : /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
-              "mb-8 flex flex-wrap justify-center gap-2",
+              "mb-8 hidden flex-wrap justify-center gap-2 sm:flex",
               stepNavigationClassName
             ),
-            children: steps?.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: () => goToStep(index),
-                className: cn(
-                  "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
-                  activeStep === index ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
-                  step.className
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                        activeStep === index ? "bg-primary-foreground text-primary" : "bg-background"
-                      ),
-                      children: step.step
-                    }
+            children: steps?.map((step, index) => {
+              const isCompleted = index < activeStep;
+              const isActive = index === activeStep;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: () => goToStep(index),
+                  className: cn(
+                    "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
+                    isActive ? "bg-primary text-primary-foreground" : isCompleted ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
+                    step.className
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
-                ]
-              },
-              step.id
-            ))
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "flex h-6 w-6 items-center justify-center rounded-full text-xs",
+                          isActive ? "bg-primary-foreground text-primary" : isCompleted ? "bg-primary-foreground text-primary" : "bg-background"
+                        ),
+                        children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check", size: 14 }) : step.step
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
+                  ]
+                },
+                step.id
+              );
+            })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/dist/carousel-multi-step-showcase.js CHANGED Viewed

@@ -1034,38 +1034,42 @@ function CarouselMultiStepShowcase({
             }
           ) : /* @__PURE__ */ jsx("div", { className: subheadingClassName, children: subheading }))
         ] }),
-        stepsSlot ? /* @__PURE__ */ jsx("div", { className: stepNavigationClassName, children: stepsSlot }) : /* @__PURE__ */ jsx(
+        stepsSlot ? /* @__PURE__ */ jsx("div", { className: cn("hidden sm:block", stepNavigationClassName), children: stepsSlot }) : /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "mb-8 flex flex-wrap justify-center gap-2",
+              "mb-8 hidden flex-wrap justify-center gap-2 sm:flex",
               stepNavigationClassName
             ),
-            children: steps?.map((step, index) => /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => goToStep(index),
-                className: cn(
-                  "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
-                  activeStep === index ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
-                  step.className
-                ),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "span",
-                    {
-                      className: cn(
-                        "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                        activeStep === index ? "bg-primary-foreground text-primary" : "bg-background"
-                      ),
-                      children: step.step
-                    }
+            children: steps?.map((step, index) => {
+              const isCompleted = index < activeStep;
+              const isActive = index === activeStep;
+              return /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => goToStep(index),
+                  className: cn(
+                    "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
+                    isActive ? "bg-primary text-primary-foreground" : isCompleted ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
+                    step.className
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
-                ]
-              },
-              step.id
-            ))
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "flex h-6 w-6 items-center justify-center rounded-full text-xs",
+                          isActive ? "bg-primary-foreground text-primary" : isCompleted ? "bg-primary-foreground text-primary" : "bg-background"
+                        ),
+                        children: isCompleted ? /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/check", size: 14 }) : step.step
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
+                  ]
+                },
+                step.id
+              );
+            })
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/carousel-portfolio-hero.cjs CHANGED Viewed

@@ -32,6 +32,16 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -946,10 +956,11 @@ function CarouselPortfolioHero({
   navigationClassName,
   counterClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background = "dark",
+  spacing = "none",
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideMediaBrightness = "50"
 }) {
   const [currentIndex, setCurrentIndex] = React__namespace.useState(0);
   const goToNext = React__namespace.useCallback(() => {
@@ -995,7 +1006,7 @@ function CarouselPortfolioHero({
       pattern,
       patternOpacity,
       children: [
-        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn(
@@ -1003,22 +1014,23 @@ function CarouselPortfolioHero({
               index === currentIndex ? "opacity-100" : "opacity-0",
               slide.className
             ),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
-                {
-                  src: slide.image,
-                  alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
-                  className: cn("h-full w-full object-cover", slide.imageClassName),
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" })
-            ]
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: slide.image,
+                alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
+                className: cn(
+                  "h-full w-full object-cover",
+                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                  slide.imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           },
           slide.id
         )),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative z-10 flex h-full w-full flex-col justify-end p-4 pb-16 text-white sm:p-8 md:p-12", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-3xl", contentClassName), children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
           currentSlide?.tag && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium", tagClassName), children: currentSlide.tag }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
           currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h1", { className: cn("text-4xl font-bold sm:text-5xl md:text-6xl", titleClassName), children: currentSlide.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: titleClassName, children: currentSlide.title })),
           currentSlide?.description && (typeof currentSlide.description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl", descriptionClassName), children: currentSlide.description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: currentSlide.description })),

package/dist/carousel-portfolio-hero.d.cts CHANGED Viewed

@@ -128,7 +128,11 @@ interface CarouselPortfolioHeroProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Brightness level for slide images (controls overlay visibility)
+     */
+    slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
 }
-declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselPortfolioHeroProps): React.JSX.Element;
+declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, }: CarouselPortfolioHeroProps): React.JSX.Element;
 export { CarouselPortfolioHero, type CarouselPortfolioHeroProps, type PortfolioSlide };

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

@@ -128,7 +128,11 @@ interface CarouselPortfolioHeroProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Brightness level for slide images (controls overlay visibility)
+     */
+    slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
 }
-declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, }: CarouselPortfolioHeroProps): React.JSX.Element;
+declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, }: CarouselPortfolioHeroProps): React.JSX.Element;
 export { CarouselPortfolioHero, type CarouselPortfolioHeroProps, type PortfolioSlide };

package/dist/carousel-portfolio-hero.js CHANGED Viewed

@@ -11,6 +11,16 @@ import { Img } from '@page-speed/img';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -925,10 +935,11 @@ function CarouselPortfolioHero({
   navigationClassName,
   counterClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background = "dark",
+  spacing = "none",
   pattern,
-  patternOpacity
+  patternOpacity,
+  slideMediaBrightness = "50"
 }) {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const goToNext = React.useCallback(() => {
@@ -974,7 +985,7 @@ function CarouselPortfolioHero({
       pattern,
       patternOpacity,
       children: [
-        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
+        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
@@ -982,22 +993,23 @@ function CarouselPortfolioHero({
               index === currentIndex ? "opacity-100" : "opacity-0",
               slide.className
             ),
-            children: [
-              /* @__PURE__ */ jsx(
-                Img,
-                {
-                  src: slide.image,
-                  alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
-                  className: cn("h-full w-full object-cover", slide.imageClassName),
-                  optixFlowConfig
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" })
-            ]
+            children: /* @__PURE__ */ jsx(
+              Img,
+              {
+                src: slide.image,
+                alt: typeof slide.title === "string" ? slide.title : `Slide ${index + 1}`,
+                className: cn(
+                  "h-full w-full object-cover",
+                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                  slide.imageClassName
+                ),
+                optixFlowConfig
+              }
+            )
           },
           slide.id
         )),
-        /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex h-full w-full flex-col justify-end p-4 pb-16 text-white sm:p-8 md:p-12", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-3xl", contentClassName), children: [
+        /* @__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 })),