@opensite/ui 0.8.1 → 0.8.3

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
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }) })
+          }
+        )
       ]
     }
   );

package/dist/carousel-portfolio-hero.js

@@ -1,6 +1,6 @@
 "use client";
-import * as React from 'react';
-import React__default from 'react';
+import * as React6 from 'react';
+import React6__default from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
@@ -96,7 +96,7 @@ function useNavigation({
   href,
   onClick
 } = {}) {
-  const linkType = React.useMemo(() => {
+  const linkType = React6.useMemo(() => {
     if (!href || href.trim() === "") {
       return onClick ? "none" : "none";
     }
@@ -117,7 +117,7 @@ function useNavigation({
       return "internal";
     }
   }, [href, onClick]);
-  const normalizedHref = React.useMemo(() => {
+  const normalizedHref = React6.useMemo(() => {
     if (!href || href.trim() === "") {
       return void 0;
     }
@@ -135,7 +135,7 @@ function useNavigation({
         return trimmed;
     }
   }, [href, linkType]);
-  const target = React.useMemo(() => {
+  const target = React6.useMemo(() => {
     switch (linkType) {
       case "external":
         return "_blank";
@@ -148,7 +148,7 @@ function useNavigation({
         return void 0;
     }
   }, [linkType]);
-  const rel = React.useMemo(() => {
+  const rel = React6.useMemo(() => {
     if (linkType === "external") {
       return "noopener noreferrer";
     }
@@ -157,7 +157,7 @@ function useNavigation({
   const isExternal = linkType === "external";
   const isInternal = linkType === "internal";
   const shouldUseRouter = isInternal && typeof normalizedHref === "string" && normalizedHref.startsWith("/");
-  const handleClick = React.useCallback(
+  const handleClick = React6.useCallback(
     (event) => {
       if (onClick) {
         try {
@@ -341,7 +341,7 @@ var buttonVariants = cva(baseStyles, {
     size: "default"
   }
 });
-var Pressable = React.forwardRef(
+var Pressable = React6.forwardRef(
   ({
     children,
     className,
@@ -447,10 +447,10 @@ function DynamicIcon({
   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 [svgContent, setSvgContent] = React6.useState(null);
+  const [isLoading, setIsLoading] = React6.useState(true);
+  const [error, setError] = React6.useState(null);
+  const { url, iconName } = React6.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}`;
@@ -459,7 +459,7 @@ function DynamicIcon({
       iconName: iconName2
     };
   }, [name, size]);
-  React.useEffect(() => {
+  React6.useEffect(() => {
     let isMounted = true;
     const fetchSvg = async () => {
       const cached = svgCache.get(url);
@@ -553,7 +553,7 @@ var maxWidthStyles = {
   "4xl": "max-w-[1536px]",
   full: "max-w-full"
 };
-var Container = React__default.forwardRef(
+var Container = React6__default.forwardRef(
   ({ children, maxWidth = "xl", className, as = "div", ...props }, ref) => {
     const Component = as;
     return /* @__PURE__ */ jsx(
@@ -858,7 +858,7 @@ var spacingStyles = {
 };
 var predefinedSpacings = ["none", "sm", "md", "lg", "xl"];
 var isPredefinedSpacing = (spacing) => predefinedSpacings.includes(spacing);
-var Section = React__default.forwardRef(
+var Section = React6__default.forwardRef(
   ({
     id,
     title,
@@ -926,7 +926,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,
@@ -941,24 +941,46 @@ function CarouselPortfolioHero({
   patternOpacity,
   slideMediaBrightness = "50"
 }) {
-  const [currentIndex, setCurrentIndex] = React.useState(0);
-  const goToNext = React.useCallback(() => {
+  const [currentIndex, setCurrentIndex] = React6.useState(0);
+  const intervalRef = React6.useRef(null);
+  const resetInterval = React6.useCallback(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+    }
+    intervalRef.current = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
+    }, autoPlayInterval);
+  }, [autoPlayInterval, slides?.length]);
+  const goToNext = React6.useCallback(() => {
     setCurrentIndex((prevIndex) => (prevIndex + 1) % (slides?.length ?? 1));
-  }, [slides?.length]);
-  const goToPrev = React.useCallback(() => {
+    resetInterval();
+  }, [slides?.length, resetInterval]);
+  const goToPrev = React6.useCallback(() => {
     setCurrentIndex(
       (prevIndex) => (prevIndex - 1 + (slides?.length ?? 1)) % (slides?.length ?? 1)
     );
-  }, [slides?.length]);
-  React.useEffect(() => {
-    const interval = setInterval(goToNext, autoPlayInterval);
-    return () => clearInterval(interval);
-  }, [goToNext, autoPlayInterval]);
+    resetInterval();
+  }, [slides?.length, resetInterval]);
+  React6.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__ */ jsx(
         Pressable,
         {
@@ -984,6 +1006,7 @@ function CarouselPortfolioHero({
       className: cn("relative h-screen w-full overflow-hidden", className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
         slidesSlot ? slidesSlot : slides?.map((slide, index) => /* @__PURE__ */ jsx(
           "div",
@@ -1009,43 +1032,99 @@ function CarouselPortfolioHero({
           },
           slide.id
         )),
-        /* @__PURE__ */ jsx("div", { className: cn("relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12", containerClassName), children: /* @__PURE__ */ jsx("div", { className: "container mx-auto", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
-          currentSlide?.tag && /* @__PURE__ */ jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsx("span", { className: cn("inline-block rounded-full bg-primary px-3 py-1 text-sm font-medium", tagClassName), children: currentSlide.tag }) : /* @__PURE__ */ jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
-          currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ jsx("h1", { className: cn("text-4xl font-bold sm:text-5xl md:text-6xl", titleClassName), children: currentSlide.title }) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: currentSlide.title })),
-          currentSlide?.description && (typeof currentSlide.description === "string" ? /* @__PURE__ */ jsx("p", { className: cn("mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl", descriptionClassName), children: currentSlide.description }) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: currentSlide.description })),
-          /* @__PURE__ */ jsxs("div", { className: cn("mt-8 flex items-center gap-4", actionsClassName), children: [
-            renderActions(),
-            /* @__PURE__ */ jsxs("div", { className: cn("ml-auto flex items-center gap-2", navigationClassName), children: [
-              /* @__PURE__ */ jsx(
-                Pressable,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "relative z-10 flex h-full w-full flex-col justify-end px-6 pb-16 text-white md:px-8 lg:px-12"
+            ),
+            children: /* @__PURE__ */ jsx("div", { className: "relative", children: /* @__PURE__ */ jsxs("div", { className: cn("max-w-4xl", contentClassName), children: [
+              currentSlide?.tag && /* @__PURE__ */ jsx("div", { className: "mb-4", children: typeof currentSlide.tag === "string" ? /* @__PURE__ */ jsx(
+                "span",
                 {
-                  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__ */ 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__ */ jsx(
-                Pressable,
+              ) : /* @__PURE__ */ jsx("div", { className: tagClassName, children: currentSlide.tag }) }),
+              currentSlide?.title && (typeof currentSlide.title === "string" ? /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: cn("ml-3 text-sm text-white/80", counterClassName), children: [
-                currentIndex + 1,
-                " / ",
-                slides?.length ?? 0
-              ] })
-            ] })
-          ] })
-        ] }) }) })
+              ) : /* @__PURE__ */ jsx("div", { className: titleClassName, children: currentSlide.title })),
+              currentSlide?.description && (typeof currentSlide.description === "string" ? /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-4 text-lg text-white/80 sm:text-xl md:max-w-2xl  text-balance text-shadow",
+                    descriptionClassName
+                  ),
+                  children: currentSlide.description
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: descriptionClassName, children: currentSlide.description })),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn("mt-8 flex items-center gap-4", actionsClassName),
+                  children: [
+                    renderActions(),
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        className: cn(
+                          "ml-auto flex items-center gap-2",
+                          navigationClassName
+                        ),
+                        children: [
+                          /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: cn("ml-3 text-sm text-white/80", counterClassName),
+                              children: [
+                                currentIndex + 1,
+                                " / ",
+                                slides?.length ?? 0
+                              ]
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }) })
+          }
+        )
       ]
     }
   );