@opensite/ui 0.8.1 → 0.8.2

package/dist/carousel-image-hero.js

@@ -429,111 +429,6 @@ var Pressable = React.forwardRef(
   }
 );
 Pressable.displayName = "Pressable";
-var svgCache = /* @__PURE__ */ new Map();
-function DynamicIcon({
-  name,
-  size = 28,
-  color,
-  className,
-  alt
-}) {
-  const [svgContent, setSvgContent] = React.useState(null);
-  const [isLoading, setIsLoading] = React.useState(true);
-  const [error, setError] = React.useState(null);
-  const { url, iconName } = React.useMemo(() => {
-    const separator = name.includes("/") ? "/" : ":";
-    const [prefix, iconName2] = name.split(separator);
-    const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
-    return {
-      url: baseUrl,
-      iconName: iconName2
-    };
-  }, [name, size]);
-  React.useEffect(() => {
-    let isMounted = true;
-    const fetchSvg = async () => {
-      const cached = svgCache.get(url);
-      if (cached) {
-        if (isMounted) {
-          setSvgContent(cached);
-          setIsLoading(false);
-        }
-        return;
-      }
-      try {
-        setIsLoading(true);
-        setError(null);
-        const response = await fetch(url);
-        if (!response.ok) {
-          throw new Error(`Failed to fetch icon: ${response.status}`);
-        }
-        let svg = await response.text();
-        svg = processSvgForCurrentColor(svg);
-        svgCache.set(url, svg);
-        if (isMounted) {
-          setSvgContent(svg);
-          setIsLoading(false);
-        }
-      } catch (err) {
-        if (isMounted) {
-          setError(err instanceof Error ? err.message : "Failed to load icon");
-          setIsLoading(false);
-        }
-      }
-    };
-    fetchSvg();
-    return () => {
-      isMounted = false;
-    };
-  }, [url]);
-  if (isLoading) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        "aria-hidden": "true"
-      }
-    );
-  }
-  if (error || !svgContent) {
-    return /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn("inline-block", className),
-        style: { width: size, height: size },
-        role: "img",
-        "aria-label": alt || iconName
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: cn("inline-flex items-center justify-center", className),
-      style: {
-        width: size,
-        height: size,
-        color: color || "inherit"
-      },
-      role: "img",
-      "aria-label": alt || iconName,
-      dangerouslySetInnerHTML: { __html: svgContent }
-    }
-  );
-}
-function processSvgForCurrentColor(svg) {
-  let processed = svg;
-  processed = processed.replace(
-    /stroke=["'](#000000|#000|black)["']/gi,
-    'stroke="currentColor"'
-  );
-  processed = processed.replace(
-    /fill=["'](#000000|#000|black)["']/gi,
-    'fill="currentColor"'
-  );
-  return processed;
-}
 var maxWidthStyles = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -916,43 +811,43 @@ function CarouselImageHero({
   actions,
   actionsSlot,
   images,
-  autoPlayInterval = 5e3,
+  autoPlayInterval = 7500,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full max-w-7xl relative z-10 rounded-2xl overflow-hidden shadow-xl",
   contentClassName,
   badgeClassName,
   headingClassName,
   descriptionClassName,
   actionsClassName,
   imageClassName,
-  navigationClassName,
   indicatorsClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing,
   pattern,
   patternOpacity
 }) {
   const [currentImageIndex, setCurrentImageIndex] = React.useState(0);
   React.useEffect(() => {
     const interval = setInterval(() => {
-      setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
+      setCurrentImageIndex(
+        (prevIndex) => (prevIndex + 1) % (images?.length ?? 1)
+      );
     }, autoPlayInterval);
     return () => clearInterval(interval);
   }, [images?.length, autoPlayInterval]);
-  const goToNextImage = () => {
-    setCurrentImageIndex((prevIndex) => (prevIndex + 1) % (images?.length ?? 1));
-  };
-  const goToPreviousImage = () => {
-    setCurrentImageIndex(
-      (prevIndex) => (prevIndex - 1 + (images?.length ?? 1)) % (images?.length ?? 1)
-    );
-  };
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -977,6 +872,7 @@ function CarouselImageHero({
       className: cn("relative min-h-[600px] overflow-hidden", className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxs("div", { className: cn("absolute inset-0", imageClassName), children: [
           images?.map((image, index) => /* @__PURE__ */ jsxs(
@@ -1002,50 +898,79 @@ function CarouselImageHero({
             index
           )),
           /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              onClick: goToPreviousImage,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: cn("absolute left-4 top-1/2 z-20 hidden -translate-y-1/2 rounded-full bg-background/30 p-2 backdrop-blur-sm transition-colors hover:bg-background/50 md:block", navigationClassName),
-              "aria-label": "Previous image",
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24, className: "text-white" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              onClick: goToNextImage,
-              asButton: true,
-              variant: "ghost",
-              size: "icon",
-              className: cn("absolute right-4 top-1/2 z-20 hidden -translate-y-1/2 rounded-full bg-background/30 p-2 backdrop-blur-sm transition-colors hover:bg-background/50 md:block", navigationClassName),
-              "aria-label": "Next image",
-              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-3", indicatorsClassName), children: images?.map((_, index) => /* @__PURE__ */ jsx(
-            "button",
+            "div",
             {
-              onClick: () => setCurrentImageIndex(index),
               className: cn(
-                "flex h-3 w-3 items-center justify-center rounded-full transition-colors",
-                index === currentImageIndex ? "bg-white" : "bg-white/50 hover:bg-white/80"
+                "absolute bottom-6 left-1/2 z-10 flex -translate-x-1/2 gap-3",
+                indicatorsClassName
               ),
-              "aria-label": `Go to image ${index + 1}`
-            },
-            index
-          )) })
+              children: images?.map((_, index) => /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: () => setCurrentImageIndex(index),
+                  className: cn(
+                    "flex h-4 w-4 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}`
+                },
+                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-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 })),
-            description && (typeof description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("text-xl text-primary-foreground dark:text-primary", descriptionClassName), children: description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
-          ] }),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col justify-center gap-4 sm:flex-row", actionsClassName), children: renderActions() })
-        ] }) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 mx-auto flex min-h-[600px] flex-col items-center justify-center px-4 py-16 text-center md:px-16 md:py-20"
+            ),
+            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 sm:text-5xl md:text-6xl text-balance text-shadow",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading })),
+                description && (typeof description === "string" ? /* @__PURE__ */ jsx(
+                  "p",
+                  {
+                    className: cn(
+                      "text-xl text-balance text-shadow",
+                      descriptionClassName
+                    ),
+                    children: description
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: description }))
+              ] }),
+              (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-col justify-center gap-4 sm:flex-row",
+                    actionsClassName
+                  ),
+                  children: renderActions()
+                }
+              )
+            ] })
+          }
+        )
       ]
     }
   );

package/dist/carousel-portfolio-hero.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var React = require('react');
+var React6 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
@@ -26,7 +26,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 
 // components/blocks/carousel/carousel-portfolio-hero.tsx
 function cn(...inputs) {
@@ -117,7 +117,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React__namespace.useMemo(() => {
+  const linkType = React6__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -138,7 +138,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React__namespace.useMemo(() => {
+  const normalizedHref = React6__namespace.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -156,7 +156,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React__namespace.useMemo(() => {
+  const target = React6__namespace.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -169,7 +169,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React__namespace.useMemo(() => {
+  const rel = React6__namespace.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -178,7 +178,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React__namespace.useCallback(
+  const handleClick = React6__namespace.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -362,7 +362,7 @@ var buttonVariants = classVarianceAuthority.cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React__namespace.forwardRef(
+var Pressable = React6__namespace.forwardRef(
   ({
     children,
     className,
@@ -468,10 +468,10 @@ function DynamicIcon({
   className,
   alt
 }) {
-  const [svgContent, setSvgContent] = React__namespace.useState(null);
-  const [isLoading, setIsLoading] = React__namespace.useState(true);
-  const [error, setError] = React__namespace.useState(null);
-  const { url, iconName } = React__namespace.useMemo(() => {
+  const [svgContent, setSvgContent] = React6__namespace.useState(null);
+  const [isLoading, setIsLoading] = React6__namespace.useState(true);
+  const [error, setError] = React6__namespace.useState(null);
+  const { url, iconName } = React6__namespace.useMemo(() => {
     const separator = name.includes("/") ? "/" : ":";
     const [prefix, iconName2] = name.split(separator);
     const baseUrl = `https://icons.opensite.ai/api/icon/${prefix}/${iconName2}?format=svg&width=${size}&height=${size}`;
@@ -480,7 +480,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -574,7 +574,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__namespace.default.forwardRef(
+var Container = React6__namespace.default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -879,7 +879,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__namespace.default.forwardRef(
+var Section = React6__namespace.default.forwardRef(
   ({
     id,
     title,
@@ -947,7 +947,7 @@ function CarouselPortfolioHero({
   actionsSlot,
   autoPlayInterval = 5e3,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full p-0 px-0 sm:px-0 lg:px-0 max-w-full relative z-10 h-full flex flex-col justify-center",
   contentClassName,
   tagClassName,
   titleClassName,
@@ -962,24 +962,46 @@ function CarouselPortfolioHero({
   patternOpacity,
   slideMediaBrightness = "50"
 }) {
-  const [currentIndex, setCurrentIndex] = React__namespace.useState(0);
-  const goToNext = React__namespace.useCallback(() => {
+  const [currentIndex, setCurrentIndex] = React6__namespace.useState(0);
+  const intervalRef = React6__namespace.useRef(null);
+  const resetInterval = React6__namespace.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
+    }, autoPlayInterval);
+  }, [autoPlayInterval, slides?.length]);
+  const goToNext = React6__namespace.useCallback(() => {
     setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
-  }, [slides?.length]);
-  const goToPrev = React__namespace.useCallback(() => {
+    resetInterval();
+  }, [slides?.length, resetInterval]);
+  const goToPrev = React6__namespace.useCallback(() => {
     setCurrentIndex(
       (prevIndex) => (prevIndex - 1 + (slides?.length ?? 1)) % (slides?.length ?? 1)
     );
-  }, [slides?.length]);
-  React__namespace.useEffect(() => {
-    const interval = setInterval(goToNext, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [goToNext, autoPlayInterval]);
+    resetInterval();
+  }, [slides?.length, resetInterval]);
+  React6__namespace.useEffect(() => {
+    resetInterval();
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [resetInterval]);
   const renderActions = () => {
     if (actionsSlot) return actionsSlot;
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1005,6 +1027,7 @@ function CarouselPortfolioHero({
       className: cn("relative h-screen w-full overflow-hidden", className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -1030,43 +1053,99 @@ function CarouselPortfolioHero({
           },
           slide.id
         )),
-        /* @__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 })),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 flex items-center gap-4", actionsClassName), children: [
-            renderActions(),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ml-auto flex items-center gap-2", navigationClassName), children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Pressable,
+        /* @__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"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", 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",
                 {
-                  variant: "outline",
-                  size: "icon",
-                  className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
-                  onClick: goToPrev,
-                  asButton: true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                  className: cn(
+                    "inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium",
+                    tagClassName
+                  ),
+                  children: currentSlide.tag
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Pressable,
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
+              currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "h1",
                 {
-                  variant: "outline",
-                  size: "icon",
-                  className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
-                  onClick: goToNext,
-                  asButton: true,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                  className: cn(
+                    "text-4xl font-bold sm:text-5xl md:text-6xl text-balance text-shadow",
+                    titleClassName
+                  ),
+                  children: currentSlide.title
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("ml-3 text-sm text-white/80", counterClassName), children: [
-                currentIndex + 1,
-                " / ",
-                slides?.length ?? 0
-              ] })
-            ] })
-          ] })
-        ] }) }) })
+              ) : /* @__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  text-balance text-shadow",
+                    descriptionClassName
+                  ),
+                  children: currentSlide.description
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: descriptionClassName, children: currentSlide.description })),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn("mt-8 flex items-center gap-4", actionsClassName),
+                  children: [
+                    renderActions(),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "ml-auto flex items-center gap-2",
+                          navigationClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Pressable,
+                            {
+                              variant: "outline",
+                              size: "icon",
+                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              onClick: goToPrev,
+                              asButton: true,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            Pressable,
+                            {
+                              variant: "outline",
+                              size: "icon",
+                              className: "rounded-full border-white/40 bg-black/30 text-white hover:bg-black/50 hover:text-white",
+                              onClick: goToNext,
+                              asButton: true,
+                              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "div",
+                            {
+                              className: cn("ml-3 text-sm text-white/80", counterClassName),
+                              children: [
+                                currentIndex + 1,
+                                " / ",
+                                slides?.length ?? 0
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }) })
+          }
+        )
       ]
     }
   );