@arobo/react 1.1.3 → 1.1.5

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("min-h-3 min-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/dist/components/drawer/index.d.ts

@@ -1,6 +1,8 @@
+import type { ComponentProps } from "react";
 import type { DrawerCloseProps, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerOverlayProps, DrawerPortalProps, DrawerProps, DrawerTitleProps, DrawerTriggerProps } from "./drawer";
 import { DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger } from "./drawer";
 export declare const Drawer: typeof DrawerRoot & {
+    Root: typeof DrawerRoot;
     Trigger: typeof DrawerTrigger;
     Portal: typeof DrawerPortal;
     Close: typeof DrawerClose;
@@ -12,17 +14,17 @@ export declare const Drawer: typeof DrawerRoot & {
     Description: typeof DrawerDescription;
 };
 export type Drawer = {
-    Props: React.ComponentProps<typeof DrawerRoot>;
-    RootProps: React.ComponentProps<typeof DrawerRoot>;
-    TriggerProps: React.ComponentProps<typeof DrawerTrigger>;
-    PortalProps: React.ComponentProps<typeof DrawerPortal>;
-    CloseProps: React.ComponentProps<typeof DrawerClose>;
-    OverlayProps: React.ComponentProps<typeof DrawerOverlay>;
-    ContentProps: React.ComponentProps<typeof DrawerContent>;
-    HeaderProps: React.ComponentProps<typeof DrawerHeader>;
-    FooterProps: React.ComponentProps<typeof DrawerFooter>;
-    TitleProps: React.ComponentProps<typeof DrawerTitle>;
-    DescriptionProps: React.ComponentProps<typeof DrawerDescription>;
+    Props: ComponentProps<typeof DrawerRoot>;
+    RootProps: ComponentProps<typeof DrawerRoot>;
+    TriggerProps: ComponentProps<typeof DrawerTrigger>;
+    PortalProps: ComponentProps<typeof DrawerPortal>;
+    CloseProps: ComponentProps<typeof DrawerClose>;
+    OverlayProps: ComponentProps<typeof DrawerOverlay>;
+    ContentProps: ComponentProps<typeof DrawerContent>;
+    HeaderProps: ComponentProps<typeof DrawerHeader>;
+    FooterProps: ComponentProps<typeof DrawerFooter>;
+    TitleProps: ComponentProps<typeof DrawerTitle>;
+    DescriptionProps: ComponentProps<typeof DrawerDescription>;
 };
 export { DrawerRoot, DrawerTrigger, DrawerPortal, DrawerClose, DrawerOverlay, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };
 export type { DrawerProps, DrawerTriggerProps, DrawerPortalProps, DrawerCloseProps, DrawerOverlayProps, DrawerContentProps, DrawerHeaderProps, DrawerFooterProps, DrawerTitleProps, DrawerDescriptionProps, };

package/dist/components/drawer/index.js

@@ -5,6 +5,7 @@ import { DrawerRoot as Drawer$1, DrawerDescription, DrawerTitle, DrawerFooter, D
  * -----------------------------------------------------------------------------------------------*/
 
 const Drawer = Object.assign(Drawer$1, {
+  Root: Drawer$1,
   Trigger: DrawerTrigger,
   Portal: DrawerPortal,
   Close: DrawerClose,

package/package.json

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