@arobo/react 1.1.3 → 1.1.4

package/dist/components/carousel/carousel.d.ts

@@ -22,5 +22,7 @@ type CarouselPreviousProps = React.ComponentProps<typeof Button>;
 declare function CarouselPrevious({ className, size, variant, children, ...props }: CarouselPreviousProps): import("react/jsx-runtime").JSX.Element;
 type CarouselNextProps = React.ComponentProps<typeof Button>;
 declare function CarouselNext({ className, size, variant, children, ...props }: CarouselNextProps): import("react/jsx-runtime").JSX.Element;
-export { Carousel as CarouselRoot, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
+type CarouselDotsProps = React.ComponentProps<"div">;
+declare function CarouselDots({ className, ...props }: CarouselDotsProps): import("react/jsx-runtime").JSX.Element;
+export { Carousel as CarouselRoot, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, CarouselDots, };
 export type { CarouselProps as CarouselRootProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, };

package/dist/components/carousel/carousel.js

@@ -133,7 +133,7 @@ function CarouselPrevious({
     isDisabled: !canScrollPrev,
     size: size,
     variant: variant,
-    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),
+    className: cn("absolute size-8 rounded-full hover:bg-accent hover:text-white transition-colors", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
     onClick: scrollPrev,
     ...props,
     children: children ? children : /*#__PURE__*/jsx(ArrowLeft, {})
@@ -156,11 +156,41 @@ function CarouselNext({
     isDisabled: !canScrollNext,
     size: size,
     variant: variant,
-    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),
+    className: cn("absolute size-8 rounded-full hover:bg-accent hover:text-white transition-colors", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
     onClick: scrollNext,
     ...props,
     children: children ? children : /*#__PURE__*/jsx(ArrowRight, {})
   });
 }
+function CarouselDots({
+  className,
+  ...props
+}) {
+  const {
+    api,
+    orientation
+  } = useCarousel();
+  const [scrollSnaps, setScrollSnaps] = React.useState([]);
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+  React.useEffect(() => {
+    if (!api) return;
+    setScrollSnaps(api.scrollSnapList());
+    setSelectedIndex(api.selectedScrollSnap());
+    api.on("select", () => setSelectedIndex(api.selectedScrollSnap()));
+    return () => {
+      api?.off("select", () => setSelectedIndex(api.selectedScrollSnap()));
+    };
+  }, [api]);
+  return /*#__PURE__*/jsx("div", {
+    className: cn("flex justify-center gap-2", orientation === "vertical" ? "flex-col" : "", className),
+    "data-slot": "carousel-dots",
+    ...props,
+    children: scrollSnaps.map((_, index) => /*#__PURE__*/jsx("div", {
+      className: cn("h-3 w-3 rounded-full transition-all cursor-pointer mt-4 border", selectedIndex === index ? "bg-accent" : "bg-gray-100"),
+      onClick: () => api?.scrollTo(index),
+      "aria-label": `Go to slide ${index + 1}`
+    }, index))
+  });
+}
 
-export { CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Carousel as CarouselRoot };
+export { CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, Carousel as CarouselRoot };

package/dist/components/carousel/index.d.ts

@@ -1,9 +1,10 @@
-import { CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselRoot } from "./carousel";
+import { CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious, CarouselRoot } from "./carousel";
 export declare const Carousel: typeof CarouselRoot & {
     Content: typeof CarouselContent;
     Item: typeof CarouselItem;
     Previous: typeof CarouselPrevious;
     Next: typeof CarouselNext;
+    Dot: typeof CarouselDots;
 };
 export type Carousel = {
     Props: React.ComponentProps<typeof CarouselRoot>;
@@ -12,6 +13,7 @@ export type Carousel = {
     ItemProps: React.ComponentProps<typeof CarouselItem>;
     PreviousProps: React.ComponentProps<typeof CarouselPrevious>;
     NextProps: React.ComponentProps<typeof CarouselNext>;
+    DotProps: React.ComponentProps<typeof CarouselDots>;
 };
 export { CarouselRoot, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
 export type { CarouselApi, CarouselRootProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, } from "./carousel";

package/dist/components/carousel/index.js

@@ -1,10 +1,11 @@
-import { CarouselRoot as Carousel$1, CarouselNext, CarouselPrevious, CarouselItem, CarouselContent } from './carousel.js';
+import { CarouselRoot as Carousel$1, CarouselDots, CarouselNext, CarouselPrevious, CarouselItem, CarouselContent } from './carousel.js';
 
 const Carousel = Object.assign(Carousel$1, {
   Content: CarouselContent,
   Item: CarouselItem,
   Previous: CarouselPrevious,
-  Next: CarouselNext
+  Next: CarouselNext,
+  Dot: CarouselDots
 });
 
 export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Carousel$1 as CarouselRoot };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arobo/react",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "private": false,
   "type": "module",
   "files": [