@arobo/react 1.1.2 → 1.1.4

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

@@ -19,8 +19,10 @@ declare function CarouselContent({ className, ...props }: CarouselContentProps):
 type CarouselItemProps = React.ComponentProps<"div">;
 declare function CarouselItem({ className, ...props }: CarouselItemProps): import("react/jsx-runtime").JSX.Element;
 type CarouselPreviousProps = React.ComponentProps<typeof Button>;
-declare function CarouselPrevious({ className, size, variant, ...props }: CarouselPreviousProps): import("react/jsx-runtime").JSX.Element;
+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, ...props }: CarouselNextProps): import("react/jsx-runtime").JSX.Element;
-export { Carousel as CarouselRoot, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
+declare function CarouselNext({ className, size, variant, children, ...props }: CarouselNextProps): import("react/jsx-runtime").JSX.Element;
+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

@@ -3,7 +3,7 @@ import { ArrowRight, ArrowLeft } from 'lucide-react';
 import * as React from 'react';
 import { cn } from 'tailwind-variants';
 import { Button } from '../button/index.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 
 const CarouselContext = /*#__PURE__*/React.createContext(null);
 function useCarousel() {
@@ -120,6 +120,7 @@ function CarouselPrevious({
   className,
   size = "md",
   variant = "outline",
+  children,
   ...props
 }) {
   const {
@@ -127,24 +128,22 @@ function CarouselPrevious({
     scrollPrev,
     canScrollPrev
   } = useCarousel();
-  return /*#__PURE__*/jsxs(Button, {
+  return /*#__PURE__*/jsx(Button, {
     "data-slot": "carousel-previous",
     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: [/*#__PURE__*/jsx(ArrowLeft, {}), /*#__PURE__*/jsx("span", {
-      className: "sr-only",
-      children: "Previous slide"
-    })]
+    children: children ? children : /*#__PURE__*/jsx(ArrowLeft, {})
   });
 }
 function CarouselNext({
   className,
   size = "md",
   variant = "outline",
+  children,
   ...props
 }) {
   const {
@@ -152,19 +151,46 @@ function CarouselNext({
     scrollNext,
     canScrollNext
   } = useCarousel();
-  return /*#__PURE__*/jsxs(Button, {
+  return /*#__PURE__*/jsx(Button, {
     "data-slot": "carousel-next",
     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: [/*#__PURE__*/jsx(ArrowRight, {}), /*#__PURE__*/jsx("span", {
-      className: "sr-only",
-      children: "Next slide"
-    })]
+    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.2",
+  "version": "1.1.4",
   "private": false,
   "type": "module",
   "files": [