@arobo/react 1.1.1 → 1.1.3

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

@@ -19,8 +19,8 @@ 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;
+declare function CarouselNext({ className, size, variant, children, ...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

@@ -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,7 +128,7 @@ function CarouselPrevious({
     scrollPrev,
     canScrollPrev
   } = useCarousel();
-  return /*#__PURE__*/jsxs(Button, {
+  return /*#__PURE__*/jsx(Button, {
     "data-slot": "carousel-previous",
     isDisabled: !canScrollPrev,
     size: size,
@@ -135,16 +136,14 @@ function CarouselPrevious({
     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),
     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,7 +151,7 @@ function CarouselNext({
     scrollNext,
     canScrollNext
   } = useCarousel();
-  return /*#__PURE__*/jsxs(Button, {
+  return /*#__PURE__*/jsx(Button, {
     "data-slot": "carousel-next",
     isDisabled: !canScrollNext,
     size: size,
@@ -160,10 +159,7 @@ function CarouselNext({
     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),
     onClick: scrollNext,
     ...props,
-    children: [/*#__PURE__*/jsx(ArrowRight, {}), /*#__PURE__*/jsx("span", {
-      className: "sr-only",
-      children: "Next slide"
-    })]
+    children: children ? children : /*#__PURE__*/jsx(ArrowRight, {})
   });
 }
 

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

@@ -136,6 +136,8 @@ export { CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Carousel
 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.1",
+  "version": "1.1.3",
   "private": false,
   "type": "module",
   "files": [