@opensite/ui 0.7.9 → 0.8.0

package/dist/registry.js

@@ -17950,192 +17950,49 @@ function CarouselAutoplayProgress({
     }
   );
 }
-var CarouselContext = React52.createContext(null);
-function useCarousel() {
-  const context = React52.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(
-    {
-      ...opts,
-      axis: orientation === "horizontal" ? "x" : "y"
-    },
-    plugins
-  );
-  const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
-  const [canScrollNext, setCanScrollNext] = React52.useState(false);
-  const onSelect = React52.useCallback((api2) => {
-    if (!api2) return;
-    setCanScrollPrev(api2.canScrollPrev());
-    setCanScrollNext(api2.canScrollNext());
-  }, []);
-  const scrollPrev = React52.useCallback(() => {
-    api?.scrollPrev();
-  }, [api]);
-  const scrollNext = React52.useCallback(() => {
-    api?.scrollNext();
-  }, [api]);
-  const handleKeyDown = React52.useCallback(
-    (event) => {
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        scrollPrev();
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        scrollNext();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex justify-end gap-2", className), children: [
+    /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: previousIcon, size: iconSize })
       }
-    },
-    [scrollPrev, scrollNext]
-  );
-  React52.useEffect(() => {
-    if (!api || !setApi) return;
-    setApi(api);
-  }, [api, setApi]);
-  React52.useEffect(() => {
-    if (!api) return;
-    onSelect(api);
-    api.on("reInit", onSelect);
-    api.on("select", onSelect);
-    return () => {
-      api?.off("select", onSelect);
-    };
-  }, [api, onSelect]);
-  return /* @__PURE__ */ jsx(
-    CarouselContext.Provider,
-    {
-      value: {
-        carouselRef,
-        api,
-        opts,
-        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-        scrollPrev,
-        scrollNext,
-        canScrollPrev,
-        canScrollNext
-      },
-      children: /* @__PURE__ */ 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__ */ jsx(
-    "div",
-    {
-      ref: carouselRef,
-      className: "overflow-hidden",
-      "data-slot": "carousel-content",
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "flex",
-            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  );
-}
-function CarouselItem({ className, ...props }) {
-  const { orientation } = useCarousel();
-  return /* @__PURE__ */ 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__ */ 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__ */ jsx(DynamicIcon, { name: "lucide/arrow-left" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
-      ]
-    }
-  );
-}
-function CarouselNext({
-  className,
-  variant = "outline",
-  size = "icon",
-  ...props
-}) {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: "lucide/arrow-right" }),
-        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
-      ]
-    }
-  );
+    ),
+    /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: nextIcon, size: iconSize })
+      }
+    )
+  ] });
 }
 var SLIDE_LAYOUT_ASPECT_MAP = {
   horizontal: "aspect-video",
@@ -18164,27 +18021,62 @@ function CarouselFeatureBadge({
   slideLayoutVariant = "square",
   containerMaxWidth = "2xl"
 }) {
+  const [emblaRef, emblaApi] = useEmblaCarousel();
+  const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
+  const [canScrollNext, setCanScrollNext] = React52.useState(false);
+  const scrollPrev = React52.useCallback(() => {
+    emblaApi?.scrollPrev();
+  }, [emblaApi]);
+  const scrollNext = React52.useCallback(() => {
+    emblaApi?.scrollNext();
+  }, [emblaApi]);
+  const onSelect = React52.useCallback(() => {
+    if (!emblaApi) return;
+    setCanScrollPrev(emblaApi.canScrollPrev());
+    setCanScrollNext(emblaApi.canScrollNext());
+  }, [emblaApi]);
+  React52.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__ */ jsx(CarouselItem, { className: carouselItemClassName, children: /* @__PURE__ */ jsx(
+    return items.map((item, index) => /* @__PURE__ */ 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__ */ jsx(
-          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__ */ jsx(
+              Img,
+              {
+                src: item.src,
+                alt: item.alt,
+                className: cn("h-full w-full object-cover", item.className),
+                optixFlowConfig
+              }
+            )
           }
         )
-      }
-    ) }, index));
+      },
+      index
+    ));
   };
   return /* @__PURE__ */ jsx(
     Section,
@@ -18227,10 +18119,18 @@ function CarouselFeatureBadge({
             ]
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-full px-6", carouselClassName), children: /* @__PURE__ */ jsxs(Carousel, { children: [
-          /* @__PURE__ */ jsx(CarouselContent, { children: renderCarouselItems() }),
-          /* @__PURE__ */ jsx(CarouselPrevious, {}),
-          /* @__PURE__ */ jsx(CarouselNext, {})
+        /* @__PURE__ */ jsx("div", { className: cn("w-full max-w-full", carouselClassName), children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx("div", { ref: emblaRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "flex -ml-4", children: renderCarouselItems() }) }),
+          /* @__PURE__ */ jsx(
+            CarouselPagination,
+            {
+              onPrevious: scrollPrev,
+              onNext: scrollNext,
+              canScrollPrevious: canScrollPrev,
+              canScrollNext,
+              className: "mt-4"
+            }
+          )
         ] }) })
       ] }) })
     }
@@ -18652,28 +18552,22 @@ function CarouselHorizontalCards({
   const carouselRef = React52.useRef(null);
   const [isAtStart, setIsAtStart] = React52.useState(true);
   const [isAtEnd, setIsAtEnd] = React52.useState(false);
-  const getCardWidth = React52.useCallback(() => {
-    if (typeof window === "undefined") return 320;
-    if (window.innerWidth >= 1024) return 400;
-    if (window.innerWidth >= 640) return 360;
-    return 320;
-  }, []);
-  const scroll = (direction) => {
+  const scrollLeft = () => {
     if (carouselRef.current) {
-      const { scrollLeft } = carouselRef.current;
-      const cardWidth = getCardWidth();
-      const gap = 16;
-      const scrollAmount = cardWidth + gap;
-      const newScrollLeft = direction === "left" ? scrollLeft - scrollAmount : scrollLeft + scrollAmount;
-      carouselRef.current.scrollTo({ left: newScrollLeft, behavior: "smooth" });
+      carouselRef.current.scrollBy({ left: -300, behavior: "smooth" });
+    }
+  };
+  const scrollRight = () => {
+    if (carouselRef.current) {
+      carouselRef.current.scrollBy({ left: 300, behavior: "smooth" });
     }
   };
   React52.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;
@@ -18689,41 +18583,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__ */ jsx(
-      motion.div,
-      {
-        className: cn(
-          "group w-[320px] shrink-0 snap-start 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__ */ jsxs("div", { className: "overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md", children: [
-          /* @__PURE__ */ jsx(
-            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__ */ jsxs("div", { className: "p-4", children: [
-            item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-md font-semibold leading-tight text-card-foreground", children: item.title }) : /* @__PURE__ */ jsx("div", { children: item.title })),
-            (item.count !== void 0 || item.countLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
-              item.count !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-xl font-bold", children: item.count }),
-              item.countLabel && (typeof item.countLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: item.countLabel }) : /* @__PURE__ */ jsx("div", { children: item.countLabel }))
-            ] })
-          ] })
-        ] })
-      },
-      item.id
-    ));
-  };
   return /* @__PURE__ */ jsx(
     Section,
     {
@@ -18734,74 +18593,143 @@ function CarouselHorizontalCards({
       patternOpacity,
       "aria-labelledby": "carousel-title",
       children: /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 md:px-6", containerClassName), children: [
-        /* @__PURE__ */ jsx("div", { className: cn("mb-8 flex items-center justify-between gap-4", headerClassName), children: /* @__PURE__ */ jsxs("div", { children: [
-          heading && /* @__PURE__ */ jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
-            typeof heading === "string" ? /* @__PURE__ */ jsx(
-              "h2",
-              {
-                id: "carousel-title",
-                className: cn("text-2xl font-bold tracking-tight text-card-foreground md:text-3xl", headingClassName),
-                children: heading
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }),
-            /* @__PURE__ */ 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__ */ jsx("p", { className: cn("mt-1 text-muted-foreground", subtitleClassName), children: subtitle }) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: subtitle }))
-        ] }) }),
-        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "mb-8 flex items-center justify-between gap-4",
+              headerClassName
+            ),
+            children: /* @__PURE__ */ jsxs("div", { children: [
+              heading && /* @__PURE__ */ jsxs("a", { href: headingHref, className: "group inline-flex items-center", children: [
+                typeof heading === "string" ? /* @__PURE__ */ jsx(
+                  "h2",
+                  {
+                    id: "carousel-title",
+                    className: cn(
+                      "text-2xl font-bold tracking-tight text-card-foreground md:text-3xl",
+                      headingClassName
+                    ),
+                    children: heading
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: headingClassName, children: heading }),
+                /* @__PURE__ */ 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__ */ jsx(
+                "p",
+                {
+                  className: cn(
+                    "mt-1 text-muted-foreground",
+                    subtitleClassName
+                  ),
+                  children: subtitle
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: subtitleClassName, children: subtitle }))
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
           /* @__PURE__ */ 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",
-                "snap-x snap-mandatory scroll-pl-0",
-                carouselClassName
-              ),
-              children: renderItems()
-            }
-          ),
-          !isAtStart && /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              onClick: () => scroll("left"),
-              className: cn(
-                "absolute left-4 top-1/2 z-10 -translate-y-1/2",
-                "flex h-12 w-12 items-center justify-center",
-                "rounded-full border border-border/50 bg-background shadow-lg",
-                "text-foreground transition-all duration-200",
-                "hover:bg-accent hover:shadow-xl hover:scale-105",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                navigationClassName
-              ),
-              "aria-label": "Scroll left",
-              asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-left", size: 24 })
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex flex-row justify-start gap-4 pl-4",
+                    carouselClassName
+                  ),
+                  children: [
+                    items?.map((item, index) => /* @__PURE__ */ jsx(
+                      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__ */ jsx(
+                          "div",
+                          {
+                            className: cn(
+                              "group w-56 shrink-0 md:w-96",
+                              item.className
+                            ),
+                            children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-lg border bg-card text-card-foreground shadow-sm transition-shadow hover:shadow-md", children: [
+                              /* @__PURE__ */ jsx(
+                                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__ */ jsxs("div", { className: "p-4", children: [
+                                item.title && (typeof item.title === "string" ? /* @__PURE__ */ jsx("h3", { className: "text-md font-semibold leading-tight text-card-foreground", children: item.title }) : /* @__PURE__ */ jsx("div", { children: item.title })),
+                                (item.count !== void 0 || item.countLabel) && /* @__PURE__ */ jsxs("div", { className: "mt-4", children: [
+                                  item.count !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-xl font-bold", children: item.count }),
+                                  item.countLabel && (typeof item.countLabel === "string" ? /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: item.countLabel }) : /* @__PURE__ */ jsx("div", { children: item.countLabel }))
+                                ] }),
+                                item.actions && item.actions.length > 0 && /* @__PURE__ */ 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__ */ jsx(
+                                    Pressable,
+                                    {
+                                      asButton,
+                                      className: actionClassName,
+                                      ...pressableProps,
+                                      children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                                        icon,
+                                        label,
+                                        iconAfter
+                                      ] })
+                                    },
+                                    actionIndex
+                                  );
+                                }) })
+                              ] })
+                            ] })
+                          }
+                        )
+                      },
+                      item.id
+                    )),
+                    itemsSlot
+                  ]
+                }
+              )
             }
           ),
-          !isAtEnd && /* @__PURE__ */ jsx(
-            Pressable,
+          /* @__PURE__ */ jsx(
+            CarouselPagination,
             {
-              onClick: () => scroll("right"),
-              className: cn(
-                "absolute right-4 top-1/2 z-10 -translate-y-1/2",
-                "flex h-12 w-12 items-center justify-center",
-                "rounded-full border border-border/50 bg-background shadow-lg",
-                "text-foreground transition-all duration-200",
-                "hover:bg-accent hover:shadow-xl hover:scale-105",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-                navigationClassName
-              ),
-              "aria-label": "Scroll right",
-              asButton: true,
-              children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 24 })
+              onPrevious: scrollLeft,
+              onNext: scrollRight,
+              canScrollPrevious: !isAtStart,
+              canScrollNext: !isAtEnd,
+              className: cn("mr-0 md:mr-10", navigationClassName)
             }
           )
         ] })
@@ -19926,6 +19854,193 @@ function CarouselScrollingFeatureShowcase({
     }
   );
 }
+var CarouselContext = React52.createContext(null);
+function useCarousel() {
+  const context = React52.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(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
+    },
+    plugins
+  );
+  const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
+  const [canScrollNext, setCanScrollNext] = React52.useState(false);
+  const onSelect = React52.useCallback((api2) => {
+    if (!api2) return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+  }, []);
+  const scrollPrev = React52.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React52.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = React52.useCallback(
+    (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        scrollNext();
+      }
+    },
+    [scrollPrev, scrollNext]
+  );
+  React52.useEffect(() => {
+    if (!api || !setApi) return;
+    setApi(api);
+  }, [api, setApi]);
+  React52.useEffect(() => {
+    if (!api) return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  return /* @__PURE__ */ jsx(
+    CarouselContext.Provider,
+    {
+      value: {
+        carouselRef,
+        api,
+        opts,
+        orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext
+      },
+      children: /* @__PURE__ */ 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__ */ jsx(
+    "div",
+    {
+      ref: carouselRef,
+      className: "overflow-hidden",
+      "data-slot": "carousel-content",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex",
+            orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  );
+}
+function CarouselItem({ className, ...props }) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ 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__ */ 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__ */ jsx(DynamicIcon, { name: "lucide/arrow-left" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Previous slide" })
+      ]
+    }
+  );
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ 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__ */ jsx(DynamicIcon, { name: "lucide/arrow-right" }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Next slide" })
+      ]
+    }
+  );
+}
 function FeatureShowcase({
   items,
   children,