@opensite/ui 2.8.5 → 2.8.7

package/dist/about-developer-profile.cjs

@@ -912,6 +912,7 @@ var SocialLinkIcon = React3__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -924,6 +925,21 @@ var SocialLinkIcon = React3__namespace.forwardRef(
     const accessibleLabel = React3__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React3__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -935,16 +951,7 @@ var SocialLinkIcon = React3__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/about-developer-profile.js

@@ -891,6 +891,7 @@ var SocialLinkIcon = React3.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -903,6 +904,21 @@ var SocialLinkIcon = React3.forwardRef(
     const accessibleLabel = React3.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React3.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -914,16 +930,7 @@ var SocialLinkIcon = React3.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/article-chapters-author.cjs

@@ -1005,6 +1005,7 @@ var SocialLinkIcon = React7__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -1017,6 +1018,21 @@ var SocialLinkIcon = React7__namespace.forwardRef(
     const accessibleLabel = React7__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React7__namespace.useMemo(() => {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
       Pressable,
       {
@@ -1028,16 +1044,7 @@ var SocialLinkIcon = React7__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/article-chapters-author.js

@@ -983,6 +983,7 @@ var SocialLinkIcon = React7.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -995,6 +996,21 @@ var SocialLinkIcon = React7.forwardRef(
     const accessibleLabel = React7.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React7.useMemo(() => {
+      return /* @__PURE__ */ jsx(
+        DynamicIcon,
+        {
+          name: iconName,
+          size: iconSize,
+          color: iconColor,
+          className: iconClassName,
+          alt: accessibleLabel
+        }
+      );
+    }, [iconName, iconSize, iconColor, iconClassName, accessibleLabel]);
+    if (iconOnly) {
+      return icon;
+    }
     return /* @__PURE__ */ jsx(
       Pressable,
       {
@@ -1006,16 +1022,7 @@ var SocialLinkIcon = React7.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/carousel-animated-sections.cjs

@@ -34,16 +34,6 @@ var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 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:")) {
@@ -470,6 +460,67 @@ var DynamicIcon = React6__namespace.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+var DIRECTION_STYLES = {
+  "bottom-to-top": "bg-linear-to-t",
+  "top-to-bottom": "bg-linear-to-b",
+  "left-to-right": "bg-linear-to-r",
+  "right-to-left": "bg-linear-to-l",
+  "bottom-left-to-top-right": "bg-linear-to-tr",
+  "bottom-right-to-top-left": "bg-linear-to-tl",
+  "top-left-to-bottom-right": "bg-linear-to-br",
+  "top-right-to-bottom-left": "bg-linear-to-bl"
+};
+var INTENSITY_STOPS = {
+  low: "from-black/40 via-black/20 to-transparent",
+  default: "from-black/70 via-black/35 to-transparent",
+  high: "from-black/85 via-black/50 to-transparent",
+  "very-high": "from-black/95 via-black/60 to-black/20"
+};
+var RADIAL_INTENSITY = {
+  low: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 50%, transparent 100%)"
+  },
+  default: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 50%, transparent 100%)"
+  },
+  high: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 50%, transparent 100%)"
+  },
+  "very-high": {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.20) 100%)"
+  }
+};
+function GradientOverlay({
+  direction = "bottom-to-top",
+  intensity = "default",
+  className,
+  style,
+  ...props
+}) {
+  if (direction === "radial-center") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("absolute inset-0", className),
+        style: { ...RADIAL_INTENSITY[intensity], ...style },
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0",
+        DIRECTION_STYLES[direction],
+        INTENSITY_STOPS[intensity],
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -861,7 +912,8 @@ function CarouselAnimatedSections({
   navigationClassName,
   arrowsClassName,
   counterClassName,
-  slideMediaBrightness = "50",
+  slideMediaBrightness,
+  slideMediaOverlayIntensity = "high",
   optixFlowConfig,
   background = "dark",
   spacing = "py-0",
@@ -950,7 +1002,7 @@ function CarouselAnimatedSections({
       containerMaxWidth,
       containerClassName,
       children: [
-        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.div,
           {
             custom: direction,
@@ -961,19 +1013,21 @@ function CarouselAnimatedSections({
             transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
             onAnimationComplete: () => setIsAnimating(false),
             className: cn("absolute inset-0", currentSection?.className),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
-              {
-                src: currentSection?.image,
-                alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
-                className: cn(
-                  "h-full w-full object-cover",
-                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                  currentSection?.imageClassName
-                ),
-                optixFlowConfig
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                img.Img,
+                {
+                  src: currentSection?.image,
+                  alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
+                  className: cn(
+                    "h-full w-full object-cover",
+                    currentSection?.imageClassName
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, { intensity: slideMediaOverlayIntensity })
+            ]
           },
           currentIndex
         ) }) : null,

package/dist/carousel-animated-sections.d.cts

@@ -121,7 +121,12 @@ interface CarouselAnimatedSectionsProps {
      */
     counterClassName?: string;
     /**
-     * Granular control of brightness for slide media
+     * Intensity of the gradient overlay on slide media
+     * @default "high"
+     */
+    slideMediaOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Granular control of brightness for slide media (deprecated - prefer slideMediaOverlayIntensity)
      * Values 10-40 use arbitrary Tailwind values for finer control on bright images
      */
     slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
@@ -150,6 +155,6 @@ interface CarouselAnimatedSectionsProps {
      */
     containerMaxWidth?: ContainerMaxWidth;
 }
-declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, slideMediaBrightness, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
+declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, slideMediaBrightness, slideMediaOverlayIntensity, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
 
 export { type AnimatedSection, CarouselAnimatedSections, type CarouselAnimatedSectionsProps };

package/dist/carousel-animated-sections.d.ts

@@ -121,7 +121,12 @@ interface CarouselAnimatedSectionsProps {
      */
     counterClassName?: string;
     /**
-     * Granular control of brightness for slide media
+     * Intensity of the gradient overlay on slide media
+     * @default "high"
+     */
+    slideMediaOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Granular control of brightness for slide media (deprecated - prefer slideMediaOverlayIntensity)
      * Values 10-40 use arbitrary Tailwind values for finer control on bright images
      */
     slideMediaBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
@@ -150,6 +155,6 @@ interface CarouselAnimatedSectionsProps {
      */
     containerMaxWidth?: ContainerMaxWidth;
 }
-declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, slideMediaBrightness, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
+declare function CarouselAnimatedSections({ sections, sectionsSlot, actionsSlot, actions, className, containerClassName, contentClassName, subtitleClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, arrowsClassName, counterClassName, slideMediaBrightness, slideMediaOverlayIntensity, optixFlowConfig, background, spacing, containerMaxWidth, pattern, patternOpacity, }: CarouselAnimatedSectionsProps): React.JSX.Element;
 
 export { type AnimatedSection, CarouselAnimatedSections, type CarouselAnimatedSectionsProps };

package/dist/carousel-animated-sections.js

@@ -13,16 +13,6 @@ 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:")) {
@@ -449,6 +439,67 @@ var DynamicIcon = React6.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsx(Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+var DIRECTION_STYLES = {
+  "bottom-to-top": "bg-linear-to-t",
+  "top-to-bottom": "bg-linear-to-b",
+  "left-to-right": "bg-linear-to-r",
+  "right-to-left": "bg-linear-to-l",
+  "bottom-left-to-top-right": "bg-linear-to-tr",
+  "bottom-right-to-top-left": "bg-linear-to-tl",
+  "top-left-to-bottom-right": "bg-linear-to-br",
+  "top-right-to-bottom-left": "bg-linear-to-bl"
+};
+var INTENSITY_STOPS = {
+  low: "from-black/40 via-black/20 to-transparent",
+  default: "from-black/70 via-black/35 to-transparent",
+  high: "from-black/85 via-black/50 to-transparent",
+  "very-high": "from-black/95 via-black/60 to-black/20"
+};
+var RADIAL_INTENSITY = {
+  low: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 50%, transparent 100%)"
+  },
+  default: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 50%, transparent 100%)"
+  },
+  high: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 50%, transparent 100%)"
+  },
+  "very-high": {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.20) 100%)"
+  }
+};
+function GradientOverlay({
+  direction = "bottom-to-top",
+  intensity = "default",
+  className,
+  style,
+  ...props
+}) {
+  if (direction === "radial-center") {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute inset-0", className),
+        style: { ...RADIAL_INTENSITY[intensity], ...style },
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0",
+        DIRECTION_STYLES[direction],
+        INTENSITY_STOPS[intensity],
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -840,7 +891,8 @@ function CarouselAnimatedSections({
   navigationClassName,
   arrowsClassName,
   counterClassName,
-  slideMediaBrightness = "50",
+  slideMediaBrightness,
+  slideMediaOverlayIntensity = "high",
   optixFlowConfig,
   background = "dark",
   spacing = "py-0",
@@ -929,7 +981,7 @@ function CarouselAnimatedSections({
       containerMaxWidth,
       containerClassName,
       children: [
-        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsx(
+        sectionsSlot ? sectionsSlot : currentSection ? /* @__PURE__ */ jsx(AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxs(
           motion.div,
           {
             custom: direction,
@@ -940,19 +992,21 @@ function CarouselAnimatedSections({
             transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
             onAnimationComplete: () => setIsAnimating(false),
             className: cn("absolute inset-0", currentSection?.className),
-            children: /* @__PURE__ */ jsx(
-              Img,
-              {
-                src: currentSection?.image,
-                alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
-                className: cn(
-                  "h-full w-full object-cover",
-                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                  currentSection?.imageClassName
-                ),
-                optixFlowConfig
-              }
-            )
+            children: [
+              /* @__PURE__ */ jsx(
+                Img,
+                {
+                  src: currentSection?.image,
+                  alt: typeof currentSection?.title === "string" ? currentSection?.title : `Section ${currentSection?.id}`,
+                  className: cn(
+                    "h-full w-full object-cover",
+                    currentSection?.imageClassName
+                  ),
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsx(GradientOverlay, { intensity: slideMediaOverlayIntensity })
+            ]
           },
           currentIndex
         ) }) : null,

package/dist/carousel-gallery-thumbnails.cjs

@@ -33,16 +33,6 @@ 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:")) {
@@ -469,6 +459,67 @@ var DynamicIcon = React__namespace.memo(function DynamicIcon2({
   return /* @__PURE__ */ jsxRuntime.jsx(icon.Icon, { ...props, apiKey: apiKey ?? DEFAULT_ICON_API_KEY });
 });
 DynamicIcon.displayName = "DynamicIcon";
+var DIRECTION_STYLES = {
+  "bottom-to-top": "bg-linear-to-t",
+  "top-to-bottom": "bg-linear-to-b",
+  "left-to-right": "bg-linear-to-r",
+  "right-to-left": "bg-linear-to-l",
+  "bottom-left-to-top-right": "bg-linear-to-tr",
+  "bottom-right-to-top-left": "bg-linear-to-tl",
+  "top-left-to-bottom-right": "bg-linear-to-br",
+  "top-right-to-bottom-left": "bg-linear-to-bl"
+};
+var INTENSITY_STOPS = {
+  low: "from-black/40 via-black/20 to-transparent",
+  default: "from-black/70 via-black/35 to-transparent",
+  high: "from-black/85 via-black/50 to-transparent",
+  "very-high": "from-black/95 via-black/60 to-black/20"
+};
+var RADIAL_INTENSITY = {
+  low: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.20) 50%, transparent 100%)"
+  },
+  default: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.35) 50%, transparent 100%)"
+  },
+  high: {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.50) 50%, transparent 100%)"
+  },
+  "very-high": {
+    background: "radial-gradient(ellipse at center, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.60) 50%, rgba(0,0,0,0.20) 100%)"
+  }
+};
+function GradientOverlay({
+  direction = "bottom-to-top",
+  intensity = "default",
+  className,
+  style,
+  ...props
+}) {
+  if (direction === "radial-center") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("absolute inset-0", className),
+        style: { ...RADIAL_INTENSITY[intensity], ...style },
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "absolute inset-0",
+        DIRECTION_STYLES[direction],
+        INTENSITY_STOPS[intensity],
+        className
+      ),
+      style,
+      ...props
+    }
+  );
+}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -863,7 +914,8 @@ function CarouselGalleryThumbnails({
   spacing = "sm",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "100"
+  slideMediaBrightness,
+  slideMediaOverlayIntensity = "default"
 }) {
   const [currentIndex, setCurrentIndex] = React__namespace.useState(0);
   const prevSlide = React__namespace.useCallback(() => {
@@ -912,7 +964,7 @@ function CarouselGalleryThumbnails({
                 "relative aspect-video w-full overflow-hidden",
                 slideClassName
               ),
-              children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
                   className: cn(
@@ -920,19 +972,21 @@ function CarouselGalleryThumbnails({
                     index === currentIndex ? "translate-x-0 opacity-100" : index < currentIndex ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
                     image.className
                   ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    img.Img,
-                    {
-                      src: image.src,
-                      alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
-                      className: cn(
-                        "h-full w-full object-cover",
-                        BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                        image.imageClassName
-                      ),
-                      optixFlowConfig
-                    }
-                  )
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      img.Img,
+                      {
+                        src: image.src,
+                        alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
+                        className: cn(
+                          "h-full w-full object-cover",
+                          image.imageClassName
+                        ),
+                        optixFlowConfig
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, { intensity: slideMediaOverlayIntensity })
+                  ]
                 },
                 `slide-${index}`
               ))

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

@@ -117,10 +117,15 @@ interface CarouselGalleryThumbnailsProps {
      */
     patternOpacity?: number;
     /**
-     * Brightness level for slide images (controls overlay visibility)
+     * Intensity of the gradient overlay on slide images
+     * @default "default"
+     */
+    slideMediaOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Brightness level for slide images (deprecated - prefer slideMediaOverlayIntensity)
      */
     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, slideMediaBrightness, }: 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, slideMediaOverlayIntensity, }: CarouselGalleryThumbnailsProps): React.JSX.Element;
 
 export { CarouselGalleryThumbnails, type CarouselGalleryThumbnailsProps, type GalleryImage };