@opensite/ui 1.2.7 → 1.2.8

package/dist/carousel-scale-focus.cjs

@@ -689,63 +689,49 @@ function CarouselItem({ className, ...props }) {
     }
   );
 }
-function CarouselPrevious({
+function CarouselPagination({
+  onPrevious,
+  onNext,
+  canScrollPrevious = true,
+  canScrollNext = true,
+  iconSize = 24,
   className,
-  variant = "outline",
-  size = "icon",
-  ...props
+  buttonClassName,
+  previousIcon = "lucide/arrow-left",
+  nextIcon = "lucide/arrow-right",
+  previousAriaLabel = "Previous",
+  nextAriaLabel = "Next"
 }) {
-  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 = "default",
-  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" })
-      ]
-    }
-  );
+  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 })
+      }
+    ),
+    /* @__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 maxWidthStyles = {
   sm: "max-w-screen-sm",
@@ -1150,19 +1136,33 @@ function CarouselScaleFocus({
   const [count, setCount] = React4.useState(0);
   const [lightboxOpen, setLightboxOpen] = React4.useState(false);
   const [lightboxIndex, setLightboxIndex] = React4.useState(0);
+  const [canScrollPrevious, setCanScrollPrevious] = React4.useState(false);
+  const [canScrollNext, setCanScrollNext] = React4.useState(false);
   React4.useEffect(() => {
     if (!api) {
       return;
     }
-    React4.startTransition(() => {
-      setCount(api.scrollSnapList().length);
-      setCurrent(api.selectedScrollSnap() + 1);
-    });
-    api.on("select", () => {
+    const updateState = () => {
       React4.startTransition(() => {
+        setCount(api.scrollSnapList().length);
         setCurrent(api.selectedScrollSnap() + 1);
+        setCanScrollPrevious(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
       });
-    });
+    };
+    updateState();
+    api.on("select", updateState);
+    api.on("reInit", updateState);
+    return () => {
+      api.off("select", updateState);
+      api.off("reInit", updateState);
+    };
+  }, [api]);
+  const scrollPrevious = React4.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React4.useCallback(() => {
+    api?.scrollNext();
   }, [api]);
   const lightboxItems = React4.useMemo(() => {
     if (!images || images.length === 0) return [];
@@ -1263,63 +1263,37 @@ function CarouselScaleFocus({
               }
             ))
           ] }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Carousel,
-            {
-              className: cn(
-                "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
-                carouselClassName
-              ),
-              setApi,
-              opts: {
-                startIndex
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 hidden md:block", controlsClassName), children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    CarouselPrevious,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-left-25 md:size-14 lg:-left-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    CarouselNext,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-right-25 md:size-14 lg:-right-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "mt-10 flex items-center justify-center gap-4 md:hidden",
-                controlsClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  CarouselPrevious,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Carousel,
+              {
+                className: cn(
+                  "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
+                  carouselClassName
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  CarouselNext,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
-                )
-              ]
-            }
-          ),
+                setApi,
+                opts: {
+                  startIndex
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CarouselPagination,
+              {
+                onPrevious: scrollPrevious,
+                onNext: scrollNext,
+                canScrollPrevious,
+                canScrollNext,
+                iconSize: 24,
+                className: cn(
+                  "mt-6 justify-center md:mt-0 md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:pointer-events-none",
+                  controlsClassName
+                ),
+                buttonClassName: "size-10 md:size-14 bg-primary text-primary-foreground hover:bg-primary/90 pointer-events-auto md:absolute md:-left-25 lg:-left-39.75 [&:last-child]:md:left-auto [&:last-child]:md:-right-25 [&:last-child]:lg:-right-39.75"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {

package/dist/carousel-scale-focus.js

@@ -1,6 +1,6 @@
 "use client";
 import * as React4 from 'react';
-import React4__default, { useState, useEffect, startTransition, useMemo, useCallback } from 'react';
+import React4__default, { useState, useEffect, useCallback, useMemo, startTransition } from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Img } from '@page-speed/img';
@@ -665,63 +665,49 @@ function CarouselItem({ className, ...props }) {
     }
   );
 }
-function CarouselPrevious({
+function CarouselPagination({
+  onPrevious,
+  onNext,
+  canScrollPrevious = true,
+  canScrollNext = true,
+  iconSize = 24,
   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 = "default",
-  size = "icon",
-  ...props
+  buttonClassName,
+  previousIcon = "lucide/arrow-left",
+  nextIcon = "lucide/arrow-right",
+  previousAriaLabel = "Previous",
+  nextAriaLabel = "Next"
 }) {
-  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" })
-      ]
-    }
-  );
+  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 })
+      }
+    ),
+    /* @__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 maxWidthStyles = {
   sm: "max-w-screen-sm",
@@ -1126,19 +1112,33 @@ function CarouselScaleFocus({
   const [count, setCount] = useState(0);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [canScrollPrevious, setCanScrollPrevious] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
   useEffect(() => {
     if (!api) {
       return;
     }
-    startTransition(() => {
-      setCount(api.scrollSnapList().length);
-      setCurrent(api.selectedScrollSnap() + 1);
-    });
-    api.on("select", () => {
+    const updateState = () => {
       startTransition(() => {
+        setCount(api.scrollSnapList().length);
         setCurrent(api.selectedScrollSnap() + 1);
+        setCanScrollPrevious(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
       });
-    });
+    };
+    updateState();
+    api.on("select", updateState);
+    api.on("reInit", updateState);
+    return () => {
+      api.off("select", updateState);
+      api.off("reInit", updateState);
+    };
+  }, [api]);
+  const scrollPrevious = useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = useCallback(() => {
+    api?.scrollNext();
   }, [api]);
   const lightboxItems = useMemo(() => {
     if (!images || images.length === 0) return [];
@@ -1239,63 +1239,37 @@ function CarouselScaleFocus({
               }
             ))
           ] }) : null,
-          /* @__PURE__ */ jsxs(
-            Carousel,
-            {
-              className: cn(
-                "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
-                carouselClassName
-              ),
-              setApi,
-              opts: {
-                startIndex
-              },
-              children: [
-                /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent }),
-                /* @__PURE__ */ jsxs("div", { className: cn("mt-4 hidden md:block", controlsClassName), children: [
-                  /* @__PURE__ */ jsx(
-                    CarouselPrevious,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-left-25 md:size-14 lg:-left-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    CarouselNext,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-right-25 md:size-14 lg:-right-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "mt-10 flex items-center justify-center gap-4 md:hidden",
-                controlsClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  CarouselPrevious,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Carousel,
+              {
+                className: cn(
+                  "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
+                  carouselClassName
                 ),
-                /* @__PURE__ */ jsx(
-                  CarouselNext,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
-                )
-              ]
-            }
-          ),
+                setApi,
+                opts: {
+                  startIndex
+                },
+                children: /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CarouselPagination,
+              {
+                onPrevious: scrollPrevious,
+                onNext: scrollNext,
+                canScrollPrevious,
+                canScrollNext,
+                iconSize: 24,
+                className: cn(
+                  "mt-6 justify-center md:mt-0 md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:pointer-events-none",
+                  controlsClassName
+                ),
+                buttonClassName: "size-10 md:size-14 bg-primary text-primary-foreground hover:bg-primary/90 pointer-events-auto md:absolute md:-left-25 lg:-left-39.75 [&:last-child]:md:left-auto [&:last-child]:md:-right-25 [&:last-child]:lg:-right-39.75"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
             "div",
             {

package/dist/registry.cjs

@@ -34533,19 +34533,33 @@ function CarouselScaleFocus({
   const [count, setCount] = React52.useState(0);
   const [lightboxOpen, setLightboxOpen] = React52.useState(false);
   const [lightboxIndex, setLightboxIndex] = React52.useState(0);
+  const [canScrollPrevious, setCanScrollPrevious] = React52.useState(false);
+  const [canScrollNext, setCanScrollNext] = React52.useState(false);
   React52.useEffect(() => {
     if (!api) {
       return;
     }
-    React52.startTransition(() => {
-      setCount(api.scrollSnapList().length);
-      setCurrent(api.selectedScrollSnap() + 1);
-    });
-    api.on("select", () => {
+    const updateState = () => {
       React52.startTransition(() => {
+        setCount(api.scrollSnapList().length);
         setCurrent(api.selectedScrollSnap() + 1);
+        setCanScrollPrevious(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
       });
-    });
+    };
+    updateState();
+    api.on("select", updateState);
+    api.on("reInit", updateState);
+    return () => {
+      api.off("select", updateState);
+      api.off("reInit", updateState);
+    };
+  }, [api]);
+  const scrollPrevious = React52.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React52.useCallback(() => {
+    api?.scrollNext();
   }, [api]);
   const lightboxItems = React52.useMemo(() => {
     if (!images || images.length === 0) return [];
@@ -34646,63 +34660,37 @@ function CarouselScaleFocus({
               }
             ))
           ] }) : null,
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Carousel,
-            {
-              className: cn(
-                "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
-                carouselClassName
-              ),
-              setApi,
-              opts: {
-                startIndex
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mt-4 hidden md:block", controlsClassName), children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    CarouselPrevious,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-left-25 md:size-14 lg:-left-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    CarouselNext,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-right-25 md:size-14 lg:-right-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                "mt-10 flex items-center justify-center gap-4 md:hidden",
-                controlsClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  CarouselPrevious,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Carousel,
+              {
+                className: cn(
+                  "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
+                  carouselClassName
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  CarouselNext,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
-                )
-              ]
-            }
-          ),
+                setApi,
+                opts: {
+                  startIndex
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CarouselPagination,
+              {
+                onPrevious: scrollPrevious,
+                onNext: scrollNext,
+                canScrollPrevious,
+                canScrollNext,
+                iconSize: 24,
+                className: cn(
+                  "mt-6 justify-center md:mt-0 md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:pointer-events-none",
+                  controlsClassName
+                ),
+                buttonClassName: "size-10 md:size-14 bg-primary text-primary-foreground hover:bg-primary/90 pointer-events-auto md:absolute md:-left-25 lg:-left-39.75 [&:last-child]:md:left-auto [&:last-child]:md:-right-25 [&:last-child]:lg:-right-39.75"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {

package/dist/registry.js

@@ -34493,19 +34493,33 @@ function CarouselScaleFocus({
   const [count, setCount] = useState(0);
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
+  const [canScrollPrevious, setCanScrollPrevious] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
   useEffect(() => {
     if (!api) {
       return;
     }
-    startTransition(() => {
-      setCount(api.scrollSnapList().length);
-      setCurrent(api.selectedScrollSnap() + 1);
-    });
-    api.on("select", () => {
+    const updateState = () => {
       startTransition(() => {
+        setCount(api.scrollSnapList().length);
         setCurrent(api.selectedScrollSnap() + 1);
+        setCanScrollPrevious(api.canScrollPrev());
+        setCanScrollNext(api.canScrollNext());
       });
-    });
+    };
+    updateState();
+    api.on("select", updateState);
+    api.on("reInit", updateState);
+    return () => {
+      api.off("select", updateState);
+      api.off("reInit", updateState);
+    };
+  }, [api]);
+  const scrollPrevious = useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = useCallback(() => {
+    api?.scrollNext();
   }, [api]);
   const lightboxItems = useMemo$1(() => {
     if (!images || images.length === 0) return [];
@@ -34606,63 +34620,37 @@ function CarouselScaleFocus({
               }
             ))
           ] }) : null,
-          /* @__PURE__ */ jsxs(
-            Carousel,
-            {
-              className: cn(
-                "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
-                carouselClassName
-              ),
-              setApi,
-              opts: {
-                startIndex
-              },
-              children: [
-                /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent }),
-                /* @__PURE__ */ jsxs("div", { className: cn("mt-4 hidden md:block", controlsClassName), children: [
-                  /* @__PURE__ */ jsx(
-                    CarouselPrevious,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-left-25 md:size-14 lg:-left-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    CarouselNext,
-                    {
-                      className: "size-10 max-[767px]:static max-[767px]:translate-y-0 md:-right-25 md:size-14 lg:-right-39.75 lg:size-14 [&>svg]:size-6!",
-                      variant: "default"
-                    }
-                  )
-                ] })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                "mt-10 flex items-center justify-center gap-4 md:hidden",
-                controlsClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsx(
-                  CarouselPrevious,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
+          /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx(
+              Carousel,
+              {
+                className: cn(
+                  "mx-auto w-full max-w-200 [&>div:nth-child(1)]:md:overflow-visible",
+                  carouselClassName
                 ),
-                /* @__PURE__ */ jsx(
-                  CarouselNext,
-                  {
-                    className: "static translate-x-0 translate-y-0 size-10",
-                    variant: "default"
-                  }
-                )
-              ]
-            }
-          ),
+                setApi,
+                opts: {
+                  startIndex
+                },
+                children: /* @__PURE__ */ jsx(CarouselContent, { className: carouselContentClassName, children: imagesContent })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              CarouselPagination,
+              {
+                onPrevious: scrollPrevious,
+                onNext: scrollNext,
+                canScrollPrevious,
+                canScrollNext,
+                iconSize: 24,
+                className: cn(
+                  "mt-6 justify-center md:mt-0 md:absolute md:inset-x-0 md:top-1/2 md:-translate-y-1/2 md:pointer-events-none",
+                  controlsClassName
+                ),
+                buttonClassName: "size-10 md:size-14 bg-primary text-primary-foreground hover:bg-primary/90 pointer-events-auto md:absolute md:-left-25 lg:-left-39.75 [&:last-child]:md:left-auto [&:last-child]:md:-right-25 [&:last-child]:lg:-right-39.75"
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsx(
             "div",
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",
@@ -3307,6 +3307,7 @@
     "dev": "tsup --watch",
     "test": "vitest",
     "test:ci": "./scripts/test-ci-silent.sh",
+    "test:f": "./scripts/test-failures-only.sh",
     "type-check": "tsc --noEmit",
     "size": "bash -c 'size-limit --silent 2>/dev/null'",
     "generate:exports": "bash scripts/generate-all-exports.sh && node scripts/merge-exports.js && node scripts/create-organized-exports.js",