@opensite/ui 2.8.6 → 2.8.8

package/dist/geo-map.js

@@ -542,41 +542,55 @@ function MarkerMediaCarousel({
   React4.useEffect(() => {
     setActiveIndex(0);
   }, [mediaResetKey]);
-  const activeMediaItem = mediaItems[activeItemIndex];
-  const mediaType = resolveMediaType(activeMediaItem);
   return /* @__PURE__ */ jsxs("div", { className: "relative border-b border-border/60 bg-muted/40", children: [
-    /* @__PURE__ */ jsx("div", { className: "relative h-44 w-full overflow-hidden", children: mediaType === "video" ? /* @__PURE__ */ jsx(
-      "video",
-      {
-        className: "h-full w-full object-cover",
-        controls: true,
-        preload: "metadata",
-        poster: activeMediaItem.poster,
-        children: /* @__PURE__ */ jsx("source", { src: activeMediaItem.src })
-      }
-    ) : /* @__PURE__ */ jsx(
-      Img,
-      {
-        src: activeMediaItem.src,
-        alt: activeMediaItem.alt ?? "Map marker media",
-        className: "h-full w-full object-cover",
-        loading: "eager",
-        optixFlowConfig
-      }
-    ) }),
+    /* @__PURE__ */ jsx("div", { className: "relative aspect-video w-full overflow-hidden", children: mediaItems.map((item, index) => {
+      const isActive = index === activeItemIndex;
+      const mediaType = resolveMediaType(item);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": !isActive,
+          className: cn(
+            "absolute inset-0 transition-opacity duration-500 ease-in-out",
+            isActive ? "opacity-100 z-[1]" : "opacity-0 z-0 pointer-events-none"
+          ),
+          children: mediaType === "video" ? /* @__PURE__ */ jsx(
+            "video",
+            {
+              className: "h-full w-full object-cover",
+              controls: isActive,
+              preload: "metadata",
+              poster: item.poster,
+              tabIndex: isActive ? 0 : -1,
+              children: /* @__PURE__ */ jsx("source", { src: item.src })
+            }
+          ) : /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: item.src,
+              alt: item.alt ?? "Map marker media",
+              className: "h-full w-full object-cover",
+              loading: "eager",
+              optixFlowConfig
+            }
+          )
+        },
+        normalizeId(item.id, `media-slide-${index}`)
+      );
+    }) }),
     totalItems > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           "aria-label": "Show previous media",
-          className: "absolute left-2 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-full bg-card text-card-foreground shadow-sm transition hover:bg-muted hover:text-muted-foreground",
+          className: "absolute left-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
           onClick: () => {
             setActiveIndex(
               (current) => (current - 1 + totalItems) % totalItems
             );
           },
-          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 16 })
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-left", size: 18 })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -584,20 +598,20 @@ function MarkerMediaCarousel({
         {
           type: "button",
           "aria-label": "Show next media",
-          className: "absolute right-2 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-card text-card-foreground shadow-sm transition hover:bg-muted hover:text-muted-foreground",
+          className: "absolute right-4 top-1/2 inline-flex size-10 -translate-y-1/2 items-center justify-center rounded-2xl bg-card text-card-foreground shadow-lg border-4 border-black hover:border-white hover:bg-black hover:text-white transition-all duration-500 z-[2]",
           onClick: () => {
             setActiveIndex((current) => (current + 1) % totalItems);
           },
-          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16 })
+          children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/arrow-right", size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5", children: mediaItems.map((item, index) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "absolute bottom-2 left-1/2 flex -translate-x-1/2 items-center gap-1.5 z-[2]", children: mediaItems.map((item, index) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           "aria-label": `Show media item ${index + 1}`,
           className: cn(
-            "h-2 rounded-full transition-all",
+            "h-2 rounded-full transition-all duration-300",
             index === activeItemIndex ? "w-6 bg-card" : "w-2 bg-card opacity-50 hover:opacity-100"
           ),
           onClick: () => setActiveIndex(index)
@@ -928,9 +942,9 @@ function GeoMap({
               {
                 type: "button",
                 "aria-label": "Close marker details",
-                className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-card-foreground transition hover:bg-muted hover:text-foreground absolute top-2 right-2 z-10",
+                className: "\n            flex size-12 items-center justify-center rounded-bl-lg rounded-br-0 rounded-t-0 bg-black text-white transition-all duration-500 absolute top-0 right-0 z-10 cursor-pointer ring-4 ring-white\n",
                 onClick: clearSelection,
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
               }
             ),
             markerMediaItems.length > 0 ? /* @__PURE__ */ jsx(
@@ -952,7 +966,7 @@ function GeoMap({
                   {
                     name: "lucide:map-pin",
                     className: "opacity-50",
-                    size: 14
+                    size: 18
                   }
                 ),
                 typeof selectedMarker.locationLine === "string" ? /* @__PURE__ */ jsx(
@@ -974,7 +988,7 @@ function GeoMap({
                   {
                     name: "lucide:clock",
                     className: "opacity-50",
-                    size: 14
+                    size: 18
                   }
                 ),
                 typeof selectedMarker.hoursLine === "string" ? /* @__PURE__ */ jsx("div", { className: "font-medium", children: selectedMarker.hoursLine }) : selectedMarker.hoursLine
@@ -1002,7 +1016,7 @@ function GeoMap({
                 "aria-label": "Close cluster details",
                 className: "flex size-8 items-center justify-center rounded-full border border-border bg-card text-card-foreground transition hover:bg-muted hover:text-foreground absolute top-2 right-2 z-10",
                 onClick: clearSelection,
-                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 20 })
               }
             ),
             /* @__PURE__ */ jsx("div", { className: "mb-3 flex items-start justify-between gap-3", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [

package/dist/hero-coming-soon-countdown.cjs

@@ -914,6 +914,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl.usePlatformFromUrl(href);
@@ -926,6 +927,21 @@ var SocialLinkIcon = React__namespace.forwardRef(
     const accessibleLabel = React__namespace.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React__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,
       {
@@ -937,16 +953,7 @@ var SocialLinkIcon = React__namespace.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/hero-coming-soon-countdown.js

@@ -893,6 +893,7 @@ var SocialLinkIcon = React.forwardRef(
     iconClassName,
     className,
     iconNameOverride,
+    iconOnly = false,
     ...pressableProps
   }, ref) => {
     const platform = usePlatformFromUrl(href);
@@ -905,6 +906,21 @@ var SocialLinkIcon = React.forwardRef(
     const accessibleLabel = React.useMemo(() => {
       return label || platformName;
     }, [label, platformName]);
+    const icon = React.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,
       {
@@ -916,16 +932,7 @@ var SocialLinkIcon = React.forwardRef(
           className
         ),
         ...pressableProps,
-        children: /* @__PURE__ */ jsx(
-          DynamicIcon,
-          {
-            name: iconName,
-            size: iconSize,
-            color: iconColor,
-            className: iconClassName,
-            alt: accessibleLabel
-          }
-        )
+        children: icon
       }
     );
   }

package/dist/hero-video-background-dark.cjs

@@ -408,6 +408,67 @@ var Section = React3__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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
+    }
+  );
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -932,7 +993,8 @@ function HeroVideoBackgroundDark({
   videoSrc,
   videoSlot,
   background,
-  videoBrightness = "50",
+  videoBrightness,
+  videoOverlayIntensity = "high",
   spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
@@ -944,21 +1006,21 @@ function HeroVideoBackgroundDark({
 }) {
   const renderVideo = React3.useMemo(() => {
     if (videoSlot) return videoSlot;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
-      {
-        loop: true,
-        playsInline: true,
-        src: videoSrc,
-        className: cn(
-          "absolute top-0 left-0 size-full object-cover",
-          `brightness-${videoBrightness}`
-        ),
-        autoPlay: true,
-        muted: true
-      }
-    );
-  }, [videoSlot, videoSrc, videoBrightness]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "video",
+        {
+          loop: true,
+          playsInline: true,
+          src: videoSrc,
+          className: "absolute top-0 left-0 size-full object-cover",
+          autoPlay: true,
+          muted: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(GradientOverlay, { intensity: videoOverlayIntensity })
+    ] });
+  }, [videoSlot, videoSrc, videoOverlayIntensity]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {

package/dist/hero-video-background-dark.d.cts

@@ -41,7 +41,12 @@ interface HeroVideoBackgroundDarkProps {
      */
     videoSlot?: React.ReactNode;
     /**
-     * Granular control of brightness for video
+     * Intensity of the gradient overlay on the video
+     * @default "high"
+     */
+    videoOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Granular control of brightness for video (deprecated - prefer videoOverlayIntensity)
      * @default "50"
      */
     videoBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
@@ -82,6 +87,6 @@ interface HeroVideoBackgroundDarkProps {
      */
     descriptionClassName?: string;
 }
-declare function HeroVideoBackgroundDark({ badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
+declare function HeroVideoBackgroundDark({ badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, videoOverlayIntensity, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
 
 export { HeroVideoBackgroundDark, type HeroVideoBackgroundDarkProps };

package/dist/hero-video-background-dark.d.ts

@@ -41,7 +41,12 @@ interface HeroVideoBackgroundDarkProps {
      */
     videoSlot?: React.ReactNode;
     /**
-     * Granular control of brightness for video
+     * Intensity of the gradient overlay on the video
+     * @default "high"
+     */
+    videoOverlayIntensity?: "low" | "default" | "high" | "very-high";
+    /**
+     * Granular control of brightness for video (deprecated - prefer videoOverlayIntensity)
      * @default "50"
      */
     videoBrightness?: "10" | "20" | "25" | "30" | "40" | "50" | "75" | "100";
@@ -82,6 +87,6 @@ interface HeroVideoBackgroundDarkProps {
      */
     descriptionClassName?: string;
 }
-declare function HeroVideoBackgroundDark({ badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
+declare function HeroVideoBackgroundDark({ badgeText, heading, description, actions, actionsSlot, actionsClassName, videoSrc, videoSlot, background, videoBrightness, videoOverlayIntensity, spacing, pattern, patternOpacity, className, containerClassName, contentClassName, headingClassName, descriptionClassName, }: HeroVideoBackgroundDarkProps): React.JSX.Element;
 
 export { HeroVideoBackgroundDark, type HeroVideoBackgroundDarkProps };

package/dist/hero-video-background-dark.js

@@ -387,6 +387,67 @@ var Section = React3__default.forwardRef(
   }
 );
 Section.displayName = "Section";
+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
+    }
+  );
+}
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -911,7 +972,8 @@ function HeroVideoBackgroundDark({
   videoSrc,
   videoSlot,
   background,
-  videoBrightness = "50",
+  videoBrightness,
+  videoOverlayIntensity = "high",
   spacing = "py-0 md:py-0",
   pattern,
   patternOpacity,
@@ -923,21 +985,21 @@ function HeroVideoBackgroundDark({
 }) {
   const renderVideo = useMemo(() => {
     if (videoSlot) return videoSlot;
-    return /* @__PURE__ */ jsx(
-      "video",
-      {
-        loop: true,
-        playsInline: true,
-        src: videoSrc,
-        className: cn(
-          "absolute top-0 left-0 size-full object-cover",
-          `brightness-${videoBrightness}`
-        ),
-        autoPlay: true,
-        muted: true
-      }
-    );
-  }, [videoSlot, videoSrc, videoBrightness]);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          loop: true,
+          playsInline: true,
+          src: videoSrc,
+          className: "absolute top-0 left-0 size-full object-cover",
+          autoPlay: true,
+          muted: true
+        }
+      ),
+      /* @__PURE__ */ jsx(GradientOverlay, { intensity: videoOverlayIntensity })
+    ] });
+  }, [videoSlot, videoSrc, videoOverlayIntensity]);
   return /* @__PURE__ */ jsx(
     Section,
     {