@arobo/react 1.1.0 → 1.1.2

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

@@ -1,5 +1,6 @@
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import useEmblaCarousel from "embla-carousel-react";
 import * as React from "react";
-import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
 import { Button } from "../button";
 export type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
@@ -11,20 +12,15 @@ type CarouselProps = {
     orientation?: "horizontal" | "vertical";
     setApi?: (api: CarouselApi) => void;
 };
-export type CarouselRootProps = React.ComponentProps<"div"> & CarouselProps;
-declare function Carousel({ orientation, opts, setApi, plugins, className, children, ...props }: CarouselRootProps): import("react/jsx-runtime").JSX.Element;
-export type CarouselContentProps = React.ComponentProps<"div">;
+type CarouselRootProps = React.ComponentProps<"div"> & CarouselProps;
+declare function Carousel({ children, className, opts, orientation, plugins, setApi, ...props }: CarouselRootProps): import("react/jsx-runtime").JSX.Element;
+type CarouselContentProps = React.ComponentProps<"div">;
 declare function CarouselContent({ className, ...props }: CarouselContentProps): import("react/jsx-runtime").JSX.Element;
-export type CarouselItemProps = React.ComponentProps<"div">;
+type CarouselItemProps = React.ComponentProps<"div">;
 declare function CarouselItem({ className, ...props }: CarouselItemProps): import("react/jsx-runtime").JSX.Element;
-export type CarouselPreviousProps = React.ComponentProps<typeof Button>;
-declare function CarouselPrevious({ className, variant, size, ...props }: CarouselPreviousProps): import("react/jsx-runtime").JSX.Element;
-export type CarouselNextProps = React.ComponentProps<typeof Button>;
-declare function CarouselNext({ className, variant, size, ...props }: CarouselNextProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof Carousel & {
-    Content: typeof CarouselContent;
-    Item: typeof CarouselItem;
-    Previous: typeof CarouselPrevious;
-    Next: typeof CarouselNext;
-};
-export default _default;
+type CarouselPreviousProps = React.ComponentProps<typeof Button>;
+declare function CarouselPrevious({ className, size, variant, ...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, };
+export type { CarouselProps as CarouselRootProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, };

package/dist/components/carousel/carousel.js

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import useEmblaCarousel from 'embla-carousel-react';
 import { ArrowRight, ArrowLeft } from 'lucide-react';
-import { Button } from '../button/index.js';
+import * as React from 'react';
 import { cn } from 'tailwind-variants';
+import { Button } from '../button/index.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const CarouselContext = /*#__PURE__*/React.createContext(null);
@@ -14,12 +14,12 @@ function useCarousel() {
   return context;
 }
 function Carousel({
-  orientation = "horizontal",
+  children,
+  className,
   opts,
-  setApi,
+  orientation = "horizontal",
   plugins,
-  className,
-  children,
+  setApi,
   ...props
 }) {
   const [carouselRef, api] = useEmblaCarousel({
@@ -73,11 +73,11 @@ function Carousel({
       canScrollNext
     },
     children: /*#__PURE__*/jsx("div", {
-      onKeyDownCapture: handleKeyDown,
-      className: cn("relative", className),
-      role: "region",
       "aria-roledescription": "carousel",
+      className: cn("relative", className),
       "data-slot": "carousel",
+      role: "region",
+      onKeyDownCapture: handleKeyDown,
       ...props,
       children: children
     })
@@ -109,17 +109,17 @@ function CarouselItem({
     orientation
   } = useCarousel();
   return /*#__PURE__*/jsx("div", {
-    role: "group",
     "aria-roledescription": "slide",
     "data-slot": "carousel-item",
+    role: "group",
     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 = "md",
+  variant = "outline",
   ...props
 }) {
   const {
@@ -129,10 +129,10 @@ function CarouselPrevious({
   } = useCarousel();
   return /*#__PURE__*/jsxs(Button, {
     "data-slot": "carousel-previous",
-    variant: variant,
+    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),
-    isDisabled: !canScrollPrev,
     onClick: scrollPrev,
     ...props,
     children: [/*#__PURE__*/jsx(ArrowLeft, {}), /*#__PURE__*/jsx("span", {
@@ -143,8 +143,8 @@ function CarouselPrevious({
 }
 function CarouselNext({
   className,
-  variant = "outline",
   size = "md",
+  variant = "outline",
   ...props
 }) {
   const {
@@ -154,10 +154,10 @@ function CarouselNext({
   } = useCarousel();
   return /*#__PURE__*/jsxs(Button, {
     "data-slot": "carousel-next",
-    variant: variant,
+    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),
-    isDisabled: !canScrollNext,
     onClick: scrollNext,
     ...props,
     children: [/*#__PURE__*/jsx(ArrowRight, {}), /*#__PURE__*/jsx("span", {
@@ -166,11 +166,5 @@ function CarouselNext({
     })]
   });
 }
-var carousel = Object.assign(Carousel, {
-  Content: CarouselContent,
-  Item: CarouselItem,
-  Previous: CarouselPrevious,
-  Next: CarouselNext
-});
 
-export { carousel as default };
+export { CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Carousel as CarouselRoot };

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

@@ -1,2 +1,17 @@
-export { default } from "./carousel";
+import { CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselRoot } from "./carousel";
+export declare const Carousel: typeof CarouselRoot & {
+    Content: typeof CarouselContent;
+    Item: typeof CarouselItem;
+    Previous: typeof CarouselPrevious;
+    Next: typeof CarouselNext;
+};
+export type Carousel = {
+    Props: React.ComponentProps<typeof CarouselRoot>;
+    RootProps: React.ComponentProps<typeof CarouselRoot>;
+    ContentProps: React.ComponentProps<typeof CarouselContent>;
+    ItemProps: React.ComponentProps<typeof CarouselItem>;
+    PreviousProps: React.ComponentProps<typeof CarouselPrevious>;
+    NextProps: React.ComponentProps<typeof CarouselNext>;
+};
+export { CarouselRoot, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, };
 export type { CarouselApi, CarouselRootProps, CarouselContentProps, CarouselItemProps, CarouselPreviousProps, CarouselNextProps, } from "./carousel";

package/dist/components/carousel/index.js

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

package/dist/components/drawer/drawer.d.ts

@@ -1,33 +1,24 @@
 import * as React from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
-export type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
+type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
 declare function Drawer({ ...props }: DrawerProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>;
+type DrawerTriggerProps = React.ComponentProps<typeof DrawerPrimitive.Trigger>;
 declare function DrawerTrigger({ ...props }: DrawerTriggerProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>;
+type DrawerPortalProps = React.ComponentProps<typeof DrawerPrimitive.Portal>;
 declare function DrawerPortal({ ...props }: DrawerPortalProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>;
+type DrawerCloseProps = React.ComponentProps<typeof DrawerPrimitive.Close>;
 declare function DrawerClose({ ...props }: DrawerCloseProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>;
+type DrawerOverlayProps = React.ComponentProps<typeof DrawerPrimitive.Overlay>;
 declare function DrawerOverlay({ className, ...props }: DrawerOverlayProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content>;
+type DrawerContentProps = React.ComponentProps<typeof DrawerPrimitive.Content>;
 declare function DrawerContent({ className, children, ...props }: DrawerContentProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerHeaderProps = React.ComponentProps<"div">;
+type DrawerHeaderProps = React.ComponentProps<"div">;
 declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): import("react/jsx-runtime").JSX.Element;
-export type DrawerFooterProps = React.ComponentProps<"div">;
+type DrawerFooterProps = React.ComponentProps<"div">;
 declare function DrawerFooter({ className, ...props }: DrawerFooterProps): import("react/jsx-runtime").JSX.Element;
+type DrawerTitleProps = React.ComponentProps<typeof DrawerPrimitive.Title>;
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-export type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>;
+type DrawerDescriptionProps = React.ComponentProps<typeof DrawerPrimitive.Description>;
 declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): import("react/jsx-runtime").JSX.Element;
-declare const _default: typeof Drawer & {
-    Trigger: typeof DrawerTrigger;
-    Portal: typeof DrawerPortal;
-    Close: typeof DrawerClose;
-    Overlay: typeof DrawerOverlay;
-    Content: typeof DrawerContent;
-    Header: typeof DrawerHeader;
-    Footer: typeof DrawerFooter;
-    Title: typeof DrawerTitle;
-    Description: typeof DrawerDescription;
-};
-export default _default;
+export { Drawer as 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/drawer.js

@@ -0,0 +1,115 @@
+import { cn } from 'tailwind-variants';
+import { Drawer as Drawer$1 } from 'vaul';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Drawer({
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Drawer$1.Root, {
+    "data-slot": "drawer",
+    ...props
+  });
+}
+function DrawerTrigger({
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Drawer$1.Trigger, {
+    "data-slot": "drawer-trigger",
+    ...props
+  });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Drawer$1.Portal, {
+    "data-slot": "drawer-portal",
+    ...props
+  });
+}
+function DrawerClose({
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Drawer$1.Close, {
+    "data-slot": "drawer-close",
+    ...props
+  });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Drawer$1.Overlay, {
+    "data-slot": "drawer-overlay",
+    className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
+    ...props
+  });
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/jsxs(DrawerPortal, {
+    "data-slot": "drawer-portal",
+    children: [/*#__PURE__*/jsx(DrawerOverlay, {}), /*#__PURE__*/jsxs(Drawer$1.Content, {
+      "data-slot": "drawer-content",
+      className: cn(
+      // Background: #FFFFFF (--popover), Border: #F3F4F6 (--popover-border)
+      "group/drawer-content bg-popover text-popover-foreground fixed z-50 flex h-auto flex-col border border-popover-border shadow-lg",
+      // Top drawer: 16px rounded bottom corners
+      "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-2xl data-[vaul-drawer-direction=top]:border-t-0",
+      // Bottom drawer: 16px rounded top corners (matches Figma)
+      "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-2xl data-[vaul-drawer-direction=bottom]:border-b-0",
+      // Right drawer
+      "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:rounded-l-2xl data-[vaul-drawer-direction=right]:border-r-0 data-[vaul-drawer-direction=right]:sm:max-w-sm",
+      // Left drawer
+      "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:rounded-r-2xl data-[vaul-drawer-direction=left]:border-l-0 data-[vaul-drawer-direction=left]:sm:max-w-sm", className),
+      ...props,
+      children: [/*#__PURE__*/jsx("div", {
+        className: "mx-auto mt-4 hidden h-1.5 w-12 shrink-0 rounded-full bg-gray-400 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+      }), children]
+    })]
+  });
+}
+function DrawerHeader({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx("div", {
+    "data-slot": "drawer-header",
+    className: cn("flex flex-col gap-2 px-5 py-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center sm:text-left border-b border-gray-200", className),
+    ...props
+  });
+}
+function DrawerFooter({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx("div", {
+    "data-slot": "drawer-footer",
+    className: cn("mt-auto flex flex-col-reverse gap-3 px-5 py-4 sm:flex-row sm:justify-end border-t border-gray-200", className),
+    ...props
+  });
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Drawer$1.Title, {
+    className: cn("text-foreground text-base font-medium", className),
+    "data-slot": "drawer-title",
+    ...props
+  });
+}
+function DrawerDescription({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/jsx(Drawer$1.Description, {
+    className: cn("text-muted-foreground text-sm", className),
+    "data-slot": "drawer-description",
+    ...props
+  });
+}
+
+export { DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, Drawer as DrawerRoot, DrawerTitle, DrawerTrigger };

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

@@ -1 +1,28 @@
-export * from "./drawer";
+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 & {
+    Trigger: typeof DrawerTrigger;
+    Portal: typeof DrawerPortal;
+    Close: typeof DrawerClose;
+    Overlay: typeof DrawerOverlay;
+    Content: typeof DrawerContent;
+    Header: typeof DrawerHeader;
+    Footer: typeof DrawerFooter;
+    Title: typeof DrawerTitle;
+    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>;
+};
+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

@@ -1 +1,19 @@
+import { DrawerRoot as Drawer$1, DrawerDescription, DrawerTitle, DrawerFooter, DrawerHeader, DrawerContent, DrawerOverlay, DrawerClose, DrawerPortal, DrawerTrigger } from './drawer.js';
 
+/* -------------------------------------------------------------------------------------------------
+ * Compound Component
+ * -----------------------------------------------------------------------------------------------*/
+
+const Drawer = Object.assign(Drawer$1, {
+  Trigger: DrawerTrigger,
+  Portal: DrawerPortal,
+  Close: DrawerClose,
+  Overlay: DrawerOverlay,
+  Content: DrawerContent,
+  Header: DrawerHeader,
+  Footer: DrawerFooter,
+  Title: DrawerTitle,
+  Description: DrawerDescription
+});
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, Drawer$1 as DrawerRoot, DrawerTitle, DrawerTrigger };

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

@@ -18,4 +18,4 @@ export type ListBox = {
     SectionProps: ComponentProps<typeof ListBoxSection>;
 };
 export { ListBoxRoot };
-export type { ListBoxRootProps, ListBoxRootProps as ListBoxProps } from "./listbox";
+export type { ListBoxRootProps, ListBoxRootProps as ListBoxProps, } from "./listbox";

package/dist/components/radio-group/index.d.ts

@@ -8,4 +8,4 @@ export type RadioGroup = {
     RootProps: ComponentProps<typeof RadioGroupRoot>;
 };
 export { RadioGroupRoot };
-export type { RadioGroupRootProps, RadioGroupRootProps as RadioGroupProps } from "./radio-group";
+export type { RadioGroupRootProps, RadioGroupRootProps as RadioGroupProps, } from "./radio-group";

package/dist/index.js

@@ -131,9 +131,13 @@ export { ToastActionButton, ToastCloseButton, ToastContainer, ToastContent, Toas
 export { ToastQueue, toast, toastQueue } from './components/toast/toast-queue.js';
 export { Separator } from './components/separator/index.js';
 export { SeparatorRoot } from './components/separator/separator.js';
+export { Carousel } from './components/carousel/index.js';
+export { CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, CarouselRoot } from './components/carousel/carousel.js';
 export { useScrollShadow } from './components/scroll-shadow/use-scroll-shadow.js';
 export { ScrollShadow } from './components/scroll-shadow/index.js';
 export { ScrollShadowRoot } from './components/scroll-shadow/scroll-shadow.js';
+export { Drawer } from './components/drawer/index.js';
+export { DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger } from './components/drawer/drawer.js';
 export { popoverVariants } from './packages/styles/src/components/popover/popover.styles.js';
 export { Popover } from './components/popover/index.js';
 export { PopoverArrow, PopoverContent, PopoverDialog, PopoverHeading, PopoverRoot, PopoverTrigger } from './components/popover/popover.js';

package/package.json

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