@opensite/ui 2.8.6 → 2.8.8

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

@@ -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 };

package/dist/carousel-gallery-thumbnails.js

@@ -12,16 +12,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:")) {
@@ -448,6 +438,67 @@ var DynamicIcon = React.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",
@@ -842,7 +893,8 @@ function CarouselGalleryThumbnails({
   spacing = "sm",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "100"
+  slideMediaBrightness,
+  slideMediaOverlayIntensity = "default"
 }) {
   const [currentIndex, setCurrentIndex] = React.useState(0);
   const prevSlide = React.useCallback(() => {
@@ -891,7 +943,7 @@ function CarouselGalleryThumbnails({
                 "relative aspect-video w-full overflow-hidden",
                 slideClassName
               ),
-              children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsx(
+              children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsxs(
                 "div",
                 {
                   className: cn(
@@ -899,19 +951,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__ */ jsx(
-                    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__ */ jsx(
+                      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__ */ jsx(GradientOverlay, { intensity: slideMediaOverlayIntensity })
+                  ]
                 },
                 `slide-${index}`
               ))

package/dist/carousel-icon-sidebar.cjs

@@ -1164,7 +1164,8 @@ function CarouselIconSidebar({
         src: image.src,
         alt: typeof image.title === "string" ? image.title : image.alt || "Carousel image",
         className: cn(
-          "h-full w-full rounded-lg object-cover cursor-pointer",
+          "aspect-4/3",
+          "h-full w-full object-cover cursor-pointer aspect-4/3",
           imageClassName
         ),
         loading: "lazy",
@@ -1224,13 +1225,13 @@ function CarouselIconSidebar({
         /* @__PURE__ */ jsxRuntime.jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-4 md:gap-6 md:grid-cols-5", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "md:col-span-2", children: sidebarContent }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsxRuntime.jsx(
-            CarouselContent,
+            "div",
             {
               className: cn(
-                "overflow-hidden rounded-2xl shadow-lg h-full",
+                "overflow-hidden rounded-2xl shadow-lg",
                 carouselContentClassName
               ),
-              children: itemsContent
+              children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { children: itemsContent })
             }
           ) })
         ] }) }),

package/dist/carousel-icon-sidebar.js

@@ -1140,7 +1140,8 @@ function CarouselIconSidebar({
         src: image.src,
         alt: typeof image.title === "string" ? image.title : image.alt || "Carousel image",
         className: cn(
-          "h-full w-full rounded-lg object-cover cursor-pointer",
+          "aspect-4/3",
+          "h-full w-full object-cover cursor-pointer aspect-4/3",
           imageClassName
         ),
         loading: "lazy",
@@ -1200,13 +1201,13 @@ function CarouselIconSidebar({
         /* @__PURE__ */ jsx(Carousel, { setApi, className: cn("w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:gap-6 md:grid-cols-5", children: [
           /* @__PURE__ */ jsx("div", { className: "md:col-span-2", children: sidebarContent }),
           /* @__PURE__ */ jsx("div", { className: "h-full md:col-span-3", children: /* @__PURE__ */ jsx(
-            CarouselContent,
+            "div",
             {
               className: cn(
-                "overflow-hidden rounded-2xl shadow-lg h-full",
+                "overflow-hidden rounded-2xl shadow-lg",
                 carouselContentClassName
               ),
-              children: itemsContent
+              children: /* @__PURE__ */ jsx(CarouselContent, { children: itemsContent })
             }
           ) })
         ] }) }),

package/dist/carousel-portfolio-hero.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 getNestedCardBg(parentBg, variant = "muted", options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   if (isDark) {
@@ -500,6 +490,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",
@@ -992,7 +1043,8 @@ function CarouselPortfolioHero({
   spacing = "none",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "50"
+  slideMediaBrightness,
+  slideMediaOverlayIntensity = "high"
 }) {
   const [currentIndex, setCurrentIndex] = React6__namespace.useState(0);
   const intervalRef = React6__namespace.useRef(null);
@@ -1033,7 +1085,7 @@ function CarouselPortfolioHero({
       patternOpacity,
       containerClassName,
       children: [
-        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
@@ -1041,19 +1093,21 @@ 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",
-                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                  slide.imageClassName
-                ),
-                optixFlowConfig
-              }
-            )
+            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(GradientOverlay, { intensity: slideMediaOverlayIntensity })
+            ]
           },
           slide.id
         )),

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

@@ -129,10 +129,15 @@ interface CarouselPortfolioHeroProps {
      */
     patternOpacity?: number;
     /**
-     * Brightness level for slide images (controls overlay visibility)
+     * Intensity of the gradient overlay on slide images
+     * @default "high"
+     */
+    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 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;
+declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, slideMediaOverlayIntensity, }: CarouselPortfolioHeroProps): React.JSX.Element;
 
 export { CarouselPortfolioHero, type CarouselPortfolioHeroProps, type PortfolioSlide };

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

@@ -129,10 +129,15 @@ interface CarouselPortfolioHeroProps {
      */
     patternOpacity?: number;
     /**
-     * Brightness level for slide images (controls overlay visibility)
+     * Intensity of the gradient overlay on slide images
+     * @default "high"
+     */
+    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 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;
+declare function CarouselPortfolioHero({ slides, slidesSlot, actions, actionsSlot, autoPlayInterval, className, containerClassName, contentClassName, tagClassName, titleClassName, descriptionClassName, actionsClassName, navigationClassName, counterClassName, optixFlowConfig, background, spacing, pattern, patternOpacity, slideMediaBrightness, slideMediaOverlayIntensity, }: CarouselPortfolioHeroProps): React.JSX.Element;
 
 export { CarouselPortfolioHero, type CarouselPortfolioHeroProps, type PortfolioSlide };

package/dist/carousel-portfolio-hero.js

@@ -13,16 +13,6 @@ import { Slot } from '@radix-ui/react-slot';
 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 getNestedCardBg(parentBg, variant = "muted", options) {
   const isDark = parentBg === "dark" || parentBg === "secondary" || parentBg === "primary";
   if (isDark) {
@@ -479,6 +469,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",
@@ -971,7 +1022,8 @@ function CarouselPortfolioHero({
   spacing = "none",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "50"
+  slideMediaBrightness,
+  slideMediaOverlayIntensity = "high"
 }) {
   const [currentIndex, setCurrentIndex] = React6.useState(0);
   const intervalRef = React6.useRef(null);
@@ -1012,7 +1064,7 @@ function CarouselPortfolioHero({
       patternOpacity,
       containerClassName,
       children: [
-        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsx(
+        slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
@@ -1020,19 +1072,21 @@ 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",
-                  BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                  slide.imageClassName
-                ),
-                optixFlowConfig
-              }
-            )
+            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(GradientOverlay, { intensity: slideMediaOverlayIntensity })
+            ]
           },
           slide.id
         )),