@opensite/ui 0.7.5 → 0.7.7

package/dist/carousel-animated-sections.cjs

@@ -33,6 +33,16 @@ var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+var BRIGHTNESS_CLASS_MAP = {
+  "10": "brightness-[.1]",
+  "20": "brightness-[.2]",
+  "25": "brightness-[.25]",
+  "30": "brightness-[.3]",
+  "40": "brightness-[.4]",
+  "50": "brightness-50",
+  "75": "brightness-75",
+  "100": "brightness-100"
+};
 function normalizePhoneNumber(input) {
   const trimmed = input.trim();
   if (trimmed.toLowerCase().startsWith("tel:")) {
@@ -931,16 +941,6 @@ var Section = React6__namespace.default.forwardRef(
   }
 );
 Section.displayName = "Section";
-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 CarouselAnimatedSections({
   sections,
   sectionsSlot,

package/dist/carousel-animated-sections.js

@@ -12,6 +12,16 @@ 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:")) {
@@ -910,16 +920,6 @@ var Section = React6__default.forwardRef(
   }
 );
 Section.displayName = "Section";
-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 CarouselAnimatedSections({
   sections,
   sectionsSlot,

package/dist/carousel-fullscreen-scroll-fx.cjs

@@ -829,7 +829,7 @@ function CarouselFullscreenScrollFx({
   slides,
   slidesSlot,
   className,
-  containerClassName = "h-full flex flex-col justify-center",
+  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",
   navigationClassName,
   contentClassName,
   subtitleClassName,
@@ -851,9 +851,9 @@ function CarouselFullscreenScrollFx({
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer || !slides?.length) return;
     const handleScroll = () => {
-      const scrollLeft = scrollContainer.scrollLeft;
-      const slideWidth = scrollContainer.clientWidth;
-      const newIndex = Math.round(scrollLeft / slideWidth);
+      const scrollTop = scrollContainer.scrollTop;
+      const slideHeight = scrollContainer.clientHeight;
+      const newIndex = Math.round(scrollTop / slideHeight);
       setActiveIndex(newIndex);
     };
     scrollContainer.addEventListener("scroll", handleScroll);
@@ -862,14 +862,14 @@ function CarouselFullscreenScrollFx({
   const scrollToSlide = React5__namespace.useCallback((index) => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) return;
-    const slideWidth = scrollContainer.clientWidth;
+    const slideHeight = scrollContainer.clientHeight;
     if (typeof scrollContainer.scrollTo === "function") {
       scrollContainer.scrollTo({
-        left: slideWidth * index,
+        top: slideHeight * index,
         behavior: "smooth"
       });
     } else {
-      scrollContainer.scrollLeft = slideWidth * index;
+      scrollContainer.scrollTop = slideHeight * index;
     }
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -882,7 +882,7 @@ function CarouselFullscreenScrollFx({
       pattern,
       patternOpacity,
       containerMaxWidth,
-      containerClassName: "p-0",
+      containerClassName,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -909,7 +909,7 @@ function CarouselFullscreenScrollFx({
           "div",
           {
             ref: scrollContainerRef,
-            className: "flex h-screen snap-x snap-mandatory overflow-x-auto overflow-y-hidden scroll-smooth",
+            className: "flex h-screen flex-col snap-y snap-mandatory overflow-x-hidden overflow-y-auto scroll-smooth",
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
             children: slidesSlot ? slidesSlot : slides?.map((slide, index) => {
               const renderActions = React5__namespace.useMemo(() => {
@@ -945,7 +945,7 @@ function CarouselFullscreenScrollFx({
                 {
                   id: `fullscreen-${slide.id}`,
                   className: cn(
-                    "relative flex h-screen min-w-full snap-start items-center justify-center overflow-hidden",
+                    "relative flex h-screen min-h-screen w-full snap-start items-center justify-center overflow-hidden",
                     slide.className
                   ),
                   children: [
@@ -976,7 +976,7 @@ function CarouselFullscreenScrollFx({
                       "div",
                       {
                         className: cn(
-                          "relative z-10 mx-auto max-w-4xl md:max-w-2xl px-6 text-center text-white text-shadow",
+                          "relative z-10 mx-auto max-w-4xl md:max-w-xl px-6 text-center text-shadow",
                           contentClassName
                         ),
                         children: [
@@ -1015,12 +1015,14 @@ function CarouselFullscreenScrollFx({
                       }
                     ),
                     index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
+                      "button",
                       {
+                        onClick: () => scrollToSlide(index + 1),
                         className: cn(
-                          "absolute bottom-8 left-1/2 -translate-x-1/2",
+                          "absolute bottom-8 left-1/2 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
                           scrollIndicatorClassName
                         ),
+                        "aria-label": "Scroll to next slide",
                         children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2", children: [
                           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
                           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })

package/dist/carousel-fullscreen-scroll-fx.js

@@ -808,7 +808,7 @@ function CarouselFullscreenScrollFx({
   slides,
   slidesSlot,
   className,
-  containerClassName = "h-full flex flex-col justify-center",
+  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",
   navigationClassName,
   contentClassName,
   subtitleClassName,
@@ -830,9 +830,9 @@ function CarouselFullscreenScrollFx({
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer || !slides?.length) return;
     const handleScroll = () => {
-      const scrollLeft = scrollContainer.scrollLeft;
-      const slideWidth = scrollContainer.clientWidth;
-      const newIndex = Math.round(scrollLeft / slideWidth);
+      const scrollTop = scrollContainer.scrollTop;
+      const slideHeight = scrollContainer.clientHeight;
+      const newIndex = Math.round(scrollTop / slideHeight);
       setActiveIndex(newIndex);
     };
     scrollContainer.addEventListener("scroll", handleScroll);
@@ -841,14 +841,14 @@ function CarouselFullscreenScrollFx({
   const scrollToSlide = React5.useCallback((index) => {
     const scrollContainer = scrollContainerRef.current;
     if (!scrollContainer) return;
-    const slideWidth = scrollContainer.clientWidth;
+    const slideHeight = scrollContainer.clientHeight;
     if (typeof scrollContainer.scrollTo === "function") {
       scrollContainer.scrollTo({
-        left: slideWidth * index,
+        top: slideHeight * index,
         behavior: "smooth"
       });
     } else {
-      scrollContainer.scrollLeft = slideWidth * index;
+      scrollContainer.scrollTop = slideHeight * index;
     }
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -861,7 +861,7 @@ function CarouselFullscreenScrollFx({
       pattern,
       patternOpacity,
       containerMaxWidth,
-      containerClassName: "p-0",
+      containerClassName,
       children: [
         /* @__PURE__ */ jsx(
           "div",
@@ -888,7 +888,7 @@ function CarouselFullscreenScrollFx({
           "div",
           {
             ref: scrollContainerRef,
-            className: "flex h-screen snap-x snap-mandatory overflow-x-auto overflow-y-hidden scroll-smooth",
+            className: "flex h-screen flex-col snap-y snap-mandatory overflow-x-hidden overflow-y-auto scroll-smooth",
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
             children: slidesSlot ? slidesSlot : slides?.map((slide, index) => {
               const renderActions = React5.useMemo(() => {
@@ -924,7 +924,7 @@ function CarouselFullscreenScrollFx({
                 {
                   id: `fullscreen-${slide.id}`,
                   className: cn(
-                    "relative flex h-screen min-w-full snap-start items-center justify-center overflow-hidden",
+                    "relative flex h-screen min-h-screen w-full snap-start items-center justify-center overflow-hidden",
                     slide.className
                   ),
                   children: [
@@ -955,7 +955,7 @@ function CarouselFullscreenScrollFx({
                       "div",
                       {
                         className: cn(
-                          "relative z-10 mx-auto max-w-4xl md:max-w-2xl px-6 text-center text-white text-shadow",
+                          "relative z-10 mx-auto max-w-4xl md:max-w-xl px-6 text-center text-shadow",
                           contentClassName
                         ),
                         children: [
@@ -994,12 +994,14 @@ function CarouselFullscreenScrollFx({
                       }
                     ),
                     index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsx(
-                      "div",
+                      "button",
                       {
+                        onClick: () => scrollToSlide(index + 1),
                         className: cn(
-                          "absolute bottom-8 left-1/2 -translate-x-1/2",
+                          "absolute bottom-8 left-1/2 -translate-x-1/2 cursor-pointer transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 focus-visible:ring-offset-black rounded-lg p-2",
                           scrollIndicatorClassName
                         ),
+                        "aria-label": "Scroll to next slide",
                         children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
                           /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-widest text-white/50", children: "Scroll" }),
                           /* @__PURE__ */ jsx("div", { className: "h-12 w-px animate-pulse bg-linear-to-b from-white/50 to-transparent" })

package/dist/carousel-multi-step-showcase.cjs

@@ -976,7 +976,14 @@ function CarouselMultiStepShowcase({
     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,
         {
@@ -986,7 +993,14 @@ function CarouselMultiStepShowcase({
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
             label,
-            iconAfter ?? /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right", size: 16, className: "ml-2" })
+            iconAfter ?? /* @__PURE__ */ jsxRuntime.jsx(
+              DynamicIcon,
+              {
+                name: "lucide/arrow-right",
+                size: 16,
+                className: "ml-2"
+              }
+            )
           ] })
         },
         index
@@ -1020,124 +1034,187 @@ function CarouselMultiStepShowcase({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4", containerClassName), children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mb-12 text-center", headerClassName), children: [
-          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: cn("text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", headingClassName), children: heading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
-          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-4 text-lg text-muted-foreground", subheadingClassName), children: subheading }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
+          heading && (typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: cn(
+                "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl",
+                headingClassName
+              ),
+              children: heading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading })),
+          subheading && (typeof subheading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "mt-4 text-lg text-muted-foreground",
+                subheadingClassName
+              ),
+              children: subheading
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subheadingClassName, children: subheading }))
         ] }),
-        stepsSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: stepNavigationClassName, children: stepsSlot }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 flex flex-wrap justify-center gap-2", stepNavigationClassName), children: steps?.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        stepsSlot ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: stepNavigationClassName, children: stepsSlot }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mb-8 flex flex-wrap justify-center gap-2",
+              stepNavigationClassName
+            ),
+            children: steps?.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => goToStep(index),
+                className: cn(
+                  "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
+                  activeStep === index ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
+                  step.className
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex h-6 w-6 items-center justify-center rounded-full text-xs",
+                        activeStep === index ? "bg-primary-foreground text-primary" : "bg-background"
+                      ),
+                      children: step.step
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
+                ]
+              },
+              step.id
+            ))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: () => goToStep(index),
             className: cn(
-              "flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
-              activeStep === index ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground hover:bg-muted/80",
-              step.className
+              "mx-auto mb-12 h-1 max-w-2xl overflow-hidden rounded-full bg-muted",
+              progressClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              framerMotion.motion.div,
+              {
+                className: "h-full bg-primary",
+                initial: { width: 0 },
+                animate: {
+                  width: `${(activeStep + 1) / (steps?.length ?? 1) * 100}%`
+                },
+                transition: { duration: 0.3 }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "grid gap-8 lg:grid-cols-2 lg:gap-12",
+              contentClassName
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
+                "div",
                 {
                   className: cn(
-                    "flex h-6 w-6 items-center justify-center rounded-full text-xs",
-                    activeStep === index ? "bg-primary-foreground text-primary" : "bg-background"
+                    "relative aspect-video overflow-hidden rounded-xl bg-muted",
+                    imageClassName
                   ),
-                  children: step.step
+                  children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    framerMotion.motion.div,
+                    {
+                      custom: direction,
+                      variants: slideVariants,
+                      initial: "enter",
+                      animate: "center",
+                      exit: "exit",
+                      transition: { duration: 0.3, ease: "easeInOut" },
+                      className: cn(
+                        "absolute inset-0",
+                        steps?.[activeStep]?.imageClassName
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        img.Img,
+                        {
+                          src: steps?.[activeStep]?.image,
+                          alt: typeof steps?.[activeStep]?.title === "string" ? steps[activeStep].title : `Step ${activeStep + 1}`,
+                          className: "h-full w-full object-cover",
+                          optixFlowConfig
+                        }
+                      )
+                    },
+                    activeStep
+                  ) })
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: typeof step.title === "string" ? step.title.split(":")[0] : step.title })
-            ]
-          },
-          step.id
-        )) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mx-auto mb-12 h-1 max-w-2xl overflow-hidden rounded-full bg-muted", progressClassName), children: /* @__PURE__ */ jsxRuntime.jsx(
-          framerMotion.motion.div,
-          {
-            className: "h-full bg-primary",
-            initial: { width: 0 },
-            animate: {
-              width: `${(activeStep + 1) / (steps?.length ?? 1) * 100}%`
-            },
-            transition: { duration: 0.3 }
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("grid gap-8 lg:grid-cols-2 lg:gap-12", contentClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-video overflow-hidden rounded-xl bg-muted", imageClassName), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, custom: direction, mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
-            framerMotion.motion.div,
-            {
-              custom: direction,
-              variants: slideVariants,
-              initial: "enter",
-              animate: "center",
-              exit: "exit",
-              transition: { duration: 0.3, ease: "easeInOut" },
-              className: cn("absolute inset-0", steps?.[activeStep]?.imageClassName),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                framerMotion.motion.div,
                 {
-                  src: steps?.[activeStep]?.image,
-                  alt: typeof steps?.[activeStep]?.title === "string" ? steps[activeStep].title : `Step ${activeStep + 1}`,
-                  className: "h-full w-full object-cover",
-                  optixFlowConfig
-                }
-              )
-            },
-            activeStep
-          ) }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            framerMotion.motion.div,
-            {
-              initial: { opacity: 0, y: 20 },
-              animate: { opacity: 1, y: 0 },
-              exit: { opacity: 0, y: -20 },
-              transition: { duration: 0.3 },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle", size: 16 }),
-                  "Step ",
-                  steps?.[activeStep]?.step,
-                  " of ",
-                  steps?.length ?? 0
-                ] }),
-                steps?.[activeStep]?.title && (typeof steps[activeStep].title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: steps[activeStep].title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: steps[activeStep].title })),
-                steps?.[activeStep]?.description && (typeof steps[activeStep].description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: steps[activeStep].description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: steps[activeStep].description })),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-8 flex gap-4", actionsClassName), children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(
-                    Pressable,
-                    {
-                      onClick: goToPrev,
-                      asButton: true,
-                      variant: "outline",
-                      disabled: activeStep === 0,
-                      className: "disabled:opacity-50",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          DynamicIcon,
-                          {
-                            name: "lucide/arrow-left",
-                            size: 16,
-                            className: "mr-2"
-                          }
-                        ),
-                        "Previous"
-                      ]
-                    }
-                  ),
-                  activeStep < (steps?.length ?? 0) - 1 ? /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { onClick: goToNext, asButton: true, children: [
-                    "Next",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
+                  initial: { opacity: 0, y: 20 },
+                  animate: { opacity: 1, y: 0 },
+                  exit: { opacity: 0, y: -20 },
+                  transition: { duration: 0.3 },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 inline-flex items-center gap-2 rounded-full bg-primary/10 px-3 py-1 text-sm font-medium text-primary", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/check-circle", size: 16 }),
+                      "Step ",
+                      steps?.[activeStep]?.step,
+                      " of ",
+                      steps?.length ?? 0
+                    ] }),
+                    steps?.[activeStep]?.title && (typeof steps[activeStep].title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-2xl font-semibold md:text-3xl", children: steps[activeStep].title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: steps[activeStep].title })),
+                    steps?.[activeStep]?.description && (typeof steps[activeStep].description === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: steps[activeStep].description }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: steps[activeStep].description })),
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
                       {
-                        name: "lucide/arrow-right",
-                        size: 16,
-                        className: "ml-2"
+                        className: cn("mt-8 flex gap-3 flex-wrap", actionsClassName),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            Pressable,
+                            {
+                              onClick: goToPrev,
+                              asButton: true,
+                              variant: "outline",
+                              disabled: activeStep === 0,
+                              className: "disabled:opacity-50",
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  DynamicIcon,
+                                  {
+                                    name: "lucide/arrow-left",
+                                    size: 16,
+                                    className: "mr-2"
+                                  }
+                                ),
+                                "Previous"
+                              ]
+                            }
+                          ),
+                          activeStep < (steps?.length ?? 0) - 1 ? /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { onClick: goToNext, asButton: true, children: [
+                            "Next",
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              DynamicIcon,
+                              {
+                                name: "lucide/arrow-right",
+                                size: 16,
+                                className: "ml-2"
+                              }
+                            )
+                          ] }) : (actionsSlot || actions && actions.length > 0) && renderActions()
+                        ]
                       }
                     )
-                  ] }) : (actionsSlot || actions && actions.length > 0) && renderActions()
-                ] })
-              ]
-            },
-            activeStep
-          ) }) })
-        ] })
+                  ]
+                },
+                activeStep
+              ) }) })
+            ]
+          }
+        )
       ] })
     }
   );