@opensite/ui 0.7.8 → 0.8.0

package/dist/registry.cjs

@@ -17990,192 +17990,49 @@ function CarouselAutoplayProgress({
     }
   );
 }
-var CarouselContext = React52__namespace.createContext(null);
-function useCarousel() {
-  const context = React52__namespace.useContext(CarouselContext);
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
-  return context;
-}
-function Carousel({
-  orientation = "horizontal",
-  opts,
-  setApi,
-  plugins,
+function CarouselPagination({
+  onPrevious,
+  onNext,
+  canScrollPrevious = true,
+  canScrollNext = true,
+  iconSize = 24,
   className,
-  children,
-  ...props
+  buttonClassName,
+  previousIcon = "lucide/arrow-left",
+  nextIcon = "lucide/arrow-right",
+  previousAriaLabel = "Previous",
+  nextAriaLabel = "Next"
 }) {
-  const [carouselRef, api] = useEmblaCarousel__default.default(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y"
-    },
-    plugins
-  );
-  const [canScrollPrev, setCanScrollPrev] = React52__namespace.useState(false);
-  const [canScrollNext, setCanScrollNext] = React52__namespace.useState(false);
-  const onSelect = React52__namespace.useCallback((api2) => {
-    if (!api2) return;
-    setCanScrollPrev(api2.canScrollPrev());
-    setCanScrollNext(api2.canScrollNext());
-  }, []);
-  const scrollPrev = React52__namespace.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-  const scrollNext = React52__namespace.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-  const handleKeyDown = React52__namespace.useCallback(
-    (event) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex justify-end gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Pressable,
+      {
+        onClick: onPrevious,
+        disabled: !canScrollPrevious,
+        "aria-label": previousAriaLabel,
+        asButton: true,
+        className: cn(
+          "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
+          buttonClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: previousIcon, size: iconSize })
       }
-    },
-    [scrollPrev, scrollNext]
-  );
-  React52__namespace.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
-  React52__namespace.useEffect(() => {
-    if (!api) return;
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
-    return () => {
-      api?.off("select", onSelect);
-    };
-  }, [api, onSelect]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    CarouselContext.Provider,
-    {
-      value: {
-        carouselRef,
-        api,
-        opts,
-        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          onKeyDownCapture: handleKeyDown,
-          className: cn("relative", className),
-          role: "region",
-          "aria-roledescription": "carousel",
-          "data-slot": "carousel",
-          ...props,
-          children
-        }
-      )
-    }
-  );
-}
-function CarouselContent({ className, ...props }) {
-  const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: carouselRef,
-      className: "overflow-hidden",
-      "data-slot": "carousel-content",
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "flex",
-            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  );
-}
-function CarouselItem({ className, ...props }) {
-  const { orientation } = useCarousel();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "group",
-      "aria-roledescription": "slide",
-      "data-slot": "carousel-item",
-      className: cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CarouselPrevious({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}) {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Pressable,
-    {
-      "data-slot": "carousel-previous",
-      variant,
-      size,
-      className: cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollPrev,
-      onClick: scrollPrev,
-      asButton: true,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
-}
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Pressable,
-    {
-      "data-slot": "carousel-next",
-      variant,
-      size,
-      className: cn(
-        "absolute size-8 rounded-full",
-        orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      ),
-      disabled: !canScrollNext,
-      onClick: scrollNext,
-      asButton: true,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Pressable,
+      {
+        onClick: onNext,
+        disabled: !canScrollNext,
+        "aria-label": nextAriaLabel,
+        asButton: true,
+        className: cn(
+          "relative z-40 flex h-10 w-10 items-center justify-center rounded-full disabled:opacity-50",
+          buttonClassName
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: nextIcon, size: iconSize })
+      }
+    )
+  ] });
 }
 var SLIDE_LAYOUT_ASPECT_MAP = {
   horizontal: "aspect-video",
@@ -18204,27 +18061,62 @@ function CarouselFeatureBadge({
   slideLayoutVariant = "square",
   containerMaxWidth = "2xl"
 }) {
+  const [emblaRef, emblaApi] = useEmblaCarousel__default.default();
+  const [canScrollPrev, setCanScrollPrev] = React52__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React52__namespace.useState(false);
+  const scrollPrev = React52__namespace.useCallback(() => {
+    emblaApi?.scrollPrev();
+  }, [emblaApi]);
+  const scrollNext = React52__namespace.useCallback(() => {
+    emblaApi?.scrollNext();
+  }, [emblaApi]);
+  const onSelect = React52__namespace.useCallback(() => {
+    if (!emblaApi) return;
+    setCanScrollPrev(emblaApi.canScrollPrev());
+    setCanScrollNext(emblaApi.canScrollNext());
+  }, [emblaApi]);
+  React52__namespace.useEffect(() => {
+    if (!emblaApi) return;
+    onSelect();
+    emblaApi.on("reInit", onSelect);
+    emblaApi.on("select", onSelect);
+    return () => {
+      emblaApi?.off("select", onSelect);
+    };
+  }, [emblaApi, onSelect]);
   const renderCarouselItems = () => {
     if (itemsSlot) return itemsSlot;
     if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { className: carouselItemClassName, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        role: "group",
+        "aria-roledescription": "slide",
         className: cn(
-          "flex items-center justify-center overflow-hidden rounded-2xl",
-          SLIDE_LAYOUT_ASPECT_MAP[slideLayoutVariant]
+          "min-w-0 shrink-0 grow-0 basis-full pl-4",
+          carouselItemClassName
         ),
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          img.Img,
+          "div",
           {
-            src: item.src,
-            alt: item.alt,
-            className: cn("h-full w-full object-cover", item.className),
-            optixFlowConfig
+            className: cn(
+              "flex items-center justify-center overflow-hidden rounded-2xl",
+              SLIDE_LAYOUT_ASPECT_MAP[slideLayoutVariant]
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              img.Img,
+              {
+                src: item.src,
+                alt: item.alt,
+                className: cn("h-full w-full object-cover", item.className),
+                optixFlowConfig
+              }
+            )
           }
         )
-      }
-    ) }, index));
+      },
+      index
+    ));
   };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
@@ -18267,10 +18159,18 @@ function CarouselFeatureBadge({
             ]
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-full px-6", carouselClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(Carousel, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { children: renderCarouselItems() }),
-          /* @__PURE__ */ jsxRuntime.jsx(CarouselPrevious, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(CarouselNext, {})
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full max-w-full", carouselClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -ml-4", children: renderCarouselItems() }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CarouselPagination,
+            {
+              onPrevious: scrollPrev,
+              onNext: scrollNext,
+              canScrollPrevious: canScrollPrev,
+              canScrollNext,
+              className: "mt-4"
+            }
+          )
         ] }) })
       ] }) })
     }
@@ -18356,6 +18256,36 @@ function CarouselFullscreenScrollFx({
             ))
           }
         ),
+        slides && slides.length > 1 && activeIndex < slides.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => scrollToSlide(activeIndex + 1),
+            className: cn(
+              "fixed bottom-8 left-1/2 z-50 -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" })
+            ] })
+          }
+        ),
+        slides && slides.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "fixed bottom-8 right-8 z-50 text-sm text-white/50",
+              counterClassName
+            ),
+            children: [
+              String(activeIndex + 1).padStart(2, "0"),
+              " /",
+              " ",
+              String(slides.length).padStart(2, "0")
+            ]
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -18464,36 +18394,6 @@ function CarouselFullscreenScrollFx({
                           renderActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row", children: renderActions })
                         ]
                       }
-                    ),
-                    index < (slides?.length ?? 0) - 1 && /* @__PURE__ */ jsxRuntime.jsx(
-                      "button",
-                      {
-                        onClick: () => scrollToSlide(index + 1),
-                        className: cn(
-                          "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" })
-                        ] })
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        className: cn(
-                          "absolute bottom-8 right-8 text-sm text-white/50",
-                          counterClassName
-                        ),
-                        children: [
-                          String(index + 1).padStart(2, "0"),
-                          " /",
-                          " ",
-                          String(slides?.length ?? 0).padStart(2, "0")
-                        ]
-                      }
                     )
                   ]
                 },
@@ -18513,18 +18413,18 @@ function CarouselGalleryThumbnails({
   autoPlayInterval = 5e3,
   showThumbnails = true,
   className,
-  containerClassName,
+  containerClassName = "mx-auto w-full px-4 md:px-10 lg:px-16 max-w-full relative z-10",
   slideClassName,
   navigationClassName,
   captionClassName,
   thumbnailsClassName,
   thumbnailClassName,
   optixFlowConfig,
-  background = "white",
-  spacing = "xl",
+  background,
+  spacing = "sm",
   pattern,
   patternOpacity,
-  slideMediaBrightness = "50"
+  slideMediaBrightness = "100"
 }) {
   const [currentIndex, setCurrentIndex] = React52__namespace.useState(0);
   const prevSlide = React52__namespace.useCallback(() => {
@@ -18563,37 +18463,50 @@ function CarouselGalleryThumbnails({
       className: cn(className),
       pattern,
       patternOpacity,
+      containerClassName,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden rounded-lg", containerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("relative aspect-video w-full overflow-hidden", slideClassName), children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative overflow-hidden rounded-2xl"), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: cn(
-                "absolute inset-0 transform transition-all duration-500 ease-in-out",
-                index === currentIndex ? "translate-x-0 opacity-100" : index < currentIndex ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
-                image.className
+                "relative aspect-video w-full overflow-hidden",
+                slideClassName
               ),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                img.Img,
+              children: imagesSlot ? imagesSlot : images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  src: image.src,
-                  alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
                   className: cn(
-                    "h-full w-full object-cover",
-                    BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
-                    image.imageClassName
+                    "absolute inset-0 transform transition-all duration-500 ease-in-out",
+                    index === currentIndex ? "translate-x-0 opacity-100" : index < currentIndex ? "-translate-x-full opacity-0" : "translate-x-full opacity-0",
+                    image.className
                   ),
-                  optixFlowConfig
-                }
-              )
-            },
-            `slide-${index}`
-          )) }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    img.Img,
+                    {
+                      src: image.src,
+                      alt: typeof image.alt === "string" ? image.alt : `Image ${index + 1}`,
+                      className: cn(
+                        "h-full w-full object-cover",
+                        BRIGHTNESS_CLASS_MAP[slideMediaBrightness],
+                        image.imageClassName
+                      ),
+                      optixFlowConfig
+                    }
+                  )
+                },
+                `slide-${index}`
+              ))
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             Pressable,
             {
               size: "icon",
-              className: cn("absolute left-2 top-1/2 -translate-y-1/2", navigationClassName),
+              className: cn(
+                "absolute left-2 top-1/2 -translate-y-1/2",
+                navigationClassName
+              ),
               onClick: prevSlide,
               asButton: true,
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
@@ -18603,35 +18516,56 @@ function CarouselGalleryThumbnails({
             Pressable,
             {
               size: "icon",
-              className: cn("absolute right-2 top-1/2 -translate-y-1/2", navigationClassName),
+              className: cn(
+                "absolute right-2 top-1/2 -translate-y-1/2",
+                navigationClassName
+              ),
               onClick: nextSlide,
               asButton: true,
               children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-sm text-white", captionClassName), children: images?.[currentIndex].alt && (typeof images?.[currentIndex].alt === "string" ? images?.[currentIndex].alt : /* @__PURE__ */ jsxRuntime.jsx("div", { children: images?.[currentIndex].alt })) })
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/90 to-transparent pt-12 md:pt-24 p-4 md:p-10 font-semibold text-sm text-white text-shadow",
+                captionClassName
+              ),
+              children: images?.[currentIndex].alt && (typeof images?.[currentIndex].alt === "string" ? images?.[currentIndex].alt : /* @__PURE__ */ jsxRuntime.jsx("div", { children: images?.[currentIndex].alt }))
+            }
+          )
         ] }),
-        showThumbnails && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mt-4 flex gap-2 overflow-x-auto px-2 py-2", thumbnailsClassName), children: images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
+        showThumbnails && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
             className: cn(
-              "relative h-20 w-20 shrink-0 transition-all duration-200",
-              index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
-              thumbnailClassName
+              "mt-4 flex justify-center gap-2 overflow-x-auto px-2 py-2",
+              thumbnailsClassName
             ),
-            onClick: () => setCurrentIndex(index),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              img.Img,
+            children: images?.map((image, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
               {
-                src: image.src,
-                alt: `Thumbnail ${index + 1}`,
-                className: "h-full w-full rounded-sm object-cover",
-                optixFlowConfig
-              }
-            )
-          },
-          `thumb-${index}`
-        )) })
+                className: cn(
+                  "relative h-20 w-20 shrink-0 transition-all duration-200",
+                  index === currentIndex ? "ring-2 ring-primary ring-offset-2" : "opacity-70 hover:opacity-100",
+                  thumbnailClassName
+                ),
+                onClick: () => setCurrentIndex(index),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  img.Img,
+                  {
+                    src: image.src,
+                    alt: `Thumbnail ${index + 1}`,
+                    className: "h-full w-full rounded-sm object-cover",
+                    optixFlowConfig
+                  }
+                )
+              },
+              `thumb-${index}`
+            ))
+          }
+        )
       ]
     }
   );
@@ -18658,20 +18592,22 @@ function CarouselHorizontalCards({
   const carouselRef = React52__namespace.useRef(null);
   const [isAtStart, setIsAtStart] = React52__namespace.useState(true);
   const [isAtEnd, setIsAtEnd] = React52__namespace.useState(false);
-  const scroll = (direction) => {
+  const scrollLeft = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: -300, behavior: "smooth" });
+    }
+  };
+  const scrollRight = () => {
     if (carouselRef.current) {
-      const { scrollLeft, clientWidth } = carouselRef.current;
-      const scrollAmount = clientWidth * 0.8;
-      const newScrollLeft = direction === "left" ? scrollLeft - scrollAmount : scrollLeft + scrollAmount;
-      carouselRef.current.scrollTo({ left: newScrollLeft, behavior: "smooth" });
+      carouselRef.current.scrollBy({ left: 300, behavior: "smooth" });
     }
   };
   React52__namespace.useEffect(() => {
     const checkScrollPosition = () => {
       if (carouselRef.current) {
-        const { scrollLeft, scrollWidth, clientWidth } = carouselRef.current;
-        setIsAtStart(scrollLeft < 10);
-        setIsAtEnd(scrollLeft + clientWidth >= scrollWidth - 10);
+        const { scrollLeft: scrollLeft2, scrollWidth, clientWidth } = carouselRef.current;
+        setIsAtStart(scrollLeft2 < 10);
+        setIsAtEnd(scrollLeft2 + clientWidth >= scrollWidth - 10);
       }
     };
     const currentRef = carouselRef.current;
@@ -18687,38 +18623,6 @@ function CarouselHorizontalCards({
       window.removeEventListener("resize", checkScrollPosition);
     };
   }, [items]);
-  const renderItems = () => {
-    if (itemsSlot) return itemsSlot;
-    if (!items || items.length === 0) return null;
-    return items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      framerMotion.motion.div,
-      {
-        className: cn("group w-[320px] shrink-0 sm:w-[360px] lg:w-[400px]", item.className),
-        initial: { opacity: 0, y: 20 },
-        animate: { opacity: 1, y: 0 },
-        transition: { duration: 0.5, delay: index * 0.1 },
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            img.Img,
-            {
-              alt: typeof item.title === "string" ? item.title : `Card ${index + 1}`,
-              className: cn("aspect-video w-full object-cover transition-transform group-hover:scale-105", item.imageClassName),
-              src: item.imageSrc,
-              optixFlowConfig
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
-            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-md font-semibold leading-tight text-card-foreground", children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.title })),
-            (item.count !== void 0 || item.countLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
-              item.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-bold", children: item.count }),
-              item.countLabel && (typeof item.countLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: item.countLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.countLabel }))
-            ] })
-          ] })
-        ] })
-      },
-      item.id
-    ));
-  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
@@ -18729,54 +18633,143 @@ function CarouselHorizontalCards({
       patternOpacity,
       "aria-labelledby": "carousel-title",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container mx-auto px-4 md:px-6", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("mb-8 flex items-center justify-between gap-4", headerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          heading && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
-            typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
-              "h2",
-              {
-                id: "carousel-title",
-                className: cn("text-2xl font-bold tracking-tight text-card-foreground md:text-3xl", headingClassName),
-                children: heading
-              }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              DynamicIcon,
-              {
-                name: "lucide/chevron-right",
-                size: 24,
-                className: "ml-2 flex-shrink-0 self-center transition-transform group-hover:translate-x-1"
-              }
-            )
-          ] }),
-          subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-1 text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: subtitle }))
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "mb-8 flex items-center justify-between gap-4",
+              headerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              heading && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
+                typeof heading === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "h2",
+                  {
+                    id: "carousel-title",
+                    className: cn(
+                      "text-2xl font-bold tracking-tight text-card-foreground md:text-3xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: headingClassName, children: heading }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  DynamicIcon,
+                  {
+                    name: "lucide/chevron-right",
+                    size: 24,
+                    className: "ml-2 shrink-0 self-center transition-transform group-hover:translate-x-1"
+                  }
+                )
+              ] }),
+              subtitle && (typeof subtitle === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-1 text-muted-foreground",
+                    subtitleClassName
+                  ),
+                  children: subtitle
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: subtitleClassName, children: subtitle }))
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
+              className: "flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-4 [scrollbar-width:none] md:py-6",
               ref: carouselRef,
-              className: cn("scrollbar-hide flex w-full space-x-4 overflow-x-auto pb-4", carouselClassName),
-              children: renderItems()
-            }
-          ),
-          !isAtStart && /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              onClick: () => scroll("left"),
-              className: cn("absolute left-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
-              "aria-label": "Scroll left",
-              asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-left", size: 20 })
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-row justify-start gap-4 pl-4",
+                    carouselClassName
+                  ),
+                  children: [
+                    items?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      framerMotion.motion.div,
+                      {
+                        className: cn(
+                          "rounded-lg last:pr-[5%] md:last:pr-[33%]"
+                        ),
+                        initial: { opacity: 0, y: 20 },
+                        animate: { opacity: 1, y: 0 },
+                        transition: { duration: 0.5, delay: 0.2 * index, ease: "easeOut" },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "group w-56 shrink-0 md:w-96",
+                              item.className
+                            ),
+                            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                img.Img,
+                                {
+                                  alt: typeof item.title === "string" ? item.title : `Card ${index + 1}`,
+                                  className: cn(
+                                    "aspect-video w-full object-cover transition-transform group-hover:scale-105",
+                                    item.imageClassName
+                                  ),
+                                  src: item.imageSrc,
+                                  optixFlowConfig
+                                }
+                              ),
+                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
+                                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-md font-semibold leading-tight text-card-foreground", children: item.title }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.title })),
+                                (item.count !== void 0 || item.countLabel) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4", children: [
+                                  item.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xl font-bold", children: item.count }),
+                                  item.countLabel && (typeof item.countLabel === "string" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: item.countLabel }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.countLabel }))
+                                ] }),
+                                item.actions && item.actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 flex flex-wrap gap-2", children: item.actions.map((action, actionIndex) => {
+                                  const {
+                                    label,
+                                    icon,
+                                    iconAfter,
+                                    children,
+                                    className: actionClassName,
+                                    asButton,
+                                    ...pressableProps
+                                  } = action;
+                                  return /* @__PURE__ */ jsxRuntime.jsx(
+                                    Pressable,
+                                    {
+                                      asButton,
+                                      className: actionClassName,
+                                      ...pressableProps,
+                                      children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                                        icon,
+                                        label,
+                                        iconAfter
+                                      ] })
+                                    },
+                                    actionIndex
+                                  );
+                                }) })
+                              ] })
+                            ] })
+                          }
+                        )
+                      },
+                      item.id
+                    )),
+                    itemsSlot
+                  ]
+                }
+              )
             }
           ),
-          !isAtEnd && /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CarouselPagination,
             {
-              onClick: () => scroll("right"),
-              className: cn("absolute right-0 top-1/2 z-10 -translate-y-1/2 flex h-10 w-10 items-center justify-center rounded-full border bg-background/60 text-foreground shadow-md backdrop-blur-sm transition-opacity hover:bg-background/80", navigationClassName),
-              "aria-label": "Scroll right",
-              asButton: true,
-              children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/chevron-right", size: 20 })
+              onPrevious: scrollLeft,
+              onNext: scrollRight,
+              canScrollPrevious: !isAtStart,
+              canScrollNext: !isAtEnd,
+              className: cn("mr-0 md:mr-10", navigationClassName)
             }
           )
         ] })
@@ -19901,6 +19894,193 @@ function CarouselScrollingFeatureShowcase({
     }
   );
 }
+var CarouselContext = React52__namespace.createContext(null);
+function useCarousel() {
+  const context = React52__namespace.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}) {
+  const [carouselRef, api] = useEmblaCarousel__default.default(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React52__namespace.useState(false);
+  const [canScrollNext, setCanScrollNext] = React52__namespace.useState(false);
+  const onSelect = React52__namespace.useCallback((api2) => {
+    if (!api2) return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+  }, []);
+  const scrollPrev = React52__namespace.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React52__namespace.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = React52__namespace.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React52__namespace.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React52__namespace.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          onKeyDownCapture: handleKeyDown,
+          className: cn("relative", className),
+          role: "region",
+          "aria-roledescription": "carousel",
+          "data-slot": "carousel",
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function CarouselContent({ className, ...props }) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: carouselRef,
+      className: "overflow-hidden",
+      "data-slot": "carousel-content",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "aria-roledescription": "slide",
+      "data-slot": "carousel-item",
+      className: cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Pressable,
+    {
+      "data-slot": "carousel-previous",
+      variant,
+      size,
+      className: cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollPrev,
+      onClick: scrollPrev,
+      asButton: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-left" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Pressable,
+    {
+      "data-slot": "carousel-next",
+      variant,
+      size,
+      className: cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      ),
+      disabled: !canScrollNext,
+      onClick: scrollNext,
+      asButton: true,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/arrow-right" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+}
 function FeatureShowcase({
   items,
   children,