rupoui 1.5.0 → 1.6.0

package/README.md

@@ -704,6 +704,52 @@ import { Button, Popover, PopoverContent, PopoverTrigger } from "rupoui";
 - `showArrow`: Whether to show an arrow (on `PopoverContent`).
 - `motionPreset`: `scale` (default), `fade`, `slide` (on `PopoverContent`).
 
+### Drawer
+
+A panel that slides out from the edge of the screen, commonly used for navigation, details, or settings.
+
+```tsx
+import {
+  Button,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "rupoui";
+
+<Drawer side="right" backdrop="blur">
+  <DrawerTrigger>
+    <Button>Open Drawer</Button>
+  </DrawerTrigger>
+  <DrawerContent>
+    <DrawerHeader>
+      <DrawerTitle>Edit Profile</DrawerTitle>
+    </DrawerHeader>
+    <DrawerBody>
+      <p>Make changes to your profile here.</p>
+    </DrawerBody>
+    <DrawerFooter>
+      <Button variant="light">Cancel</Button>
+      <Button color="primary">Save</Button>
+    </DrawerFooter>
+  </DrawerContent>
+</Drawer>;
+```
+
+**Props:**
+
+- `open` / `defaultOpen` / `onOpenChange`: Controlled and uncontrolled state management.
+- `side`: `left`, `right` (default), `top`, `bottom`.
+- `radius`: `none`, `sm`, `md`, `lg` (default), `xl`.
+- `backdrop`: `opaque` (default), `blur`, `transparent`.
+- `closeOnOverlayClick`: Whether clicking the overlay closes the drawer (default: `true`).
+- `closeOnEscape`: Whether pressing Escape closes the drawer (default: `true`).
+- `blockScrollOnOpen`: Whether to lock body scroll when open (default: `true`).
+- `portal`: Whether to render inside a portal (default: `true`).
+
 ### Tabs
 
 A component that allows users to switch between different views or functional aspects of an application.

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { DrawerProps } from './drawer.types';
+
+export interface DrawerComponentProps extends DrawerProps {
+    children: ReactNode;
+}
+export declare const Drawer: (props: DrawerComponentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,3 @@
+import { DrawerContentProps } from './drawer.types';
+
+export declare const DrawerContent: ({ children, className }: DrawerContentProps) => import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,6 @@
+import { DrawerBodyProps, DrawerFooterProps, DrawerHeaderProps, DrawerTitleProps } from './drawer.types';
+
+export declare const DrawerHeader: ({ children, className, ...props }: DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DrawerTitle: ({ children, className, ...props }: DrawerTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DrawerBody: ({ children, className, ...props }: DrawerBodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DrawerFooter: ({ children, className, ...props }: DrawerFooterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+export declare const DrawerTrigger: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { DrawerProps } from './drawer.types';
+
+export interface DrawerContextProps extends Omit<DrawerProps, "children" | "open"> {
+    isOpen: boolean;
+    contentId: string;
+    titleId: string;
+    bodyId: string;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+}
+export declare const DrawerContext: import('react').Context<DrawerContextProps | undefined>;
+export declare const useDrawerContext: () => DrawerContextProps;

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

@@ -0,0 +1,166 @@
+export declare const drawer: import('tailwind-variants').TVReturnType<{
+    side: {
+        left: {
+            wrapper: string;
+            content: string;
+        };
+        right: {
+            wrapper: string;
+            content: string;
+        };
+        top: {
+            wrapper: string;
+            content: string;
+        };
+        bottom: {
+            wrapper: string;
+            content: string;
+        };
+    };
+    radius: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
+    backdrop: {
+        transparent: {
+            overlay: string;
+        };
+        opaque: {
+            overlay: string;
+        };
+        blur: {
+            overlay: string;
+        };
+    };
+}, {
+    wrapper: string;
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    body: string;
+    footer: string;
+}, undefined, {
+    side: {
+        left: {
+            wrapper: string;
+            content: string;
+        };
+        right: {
+            wrapper: string;
+            content: string;
+        };
+        top: {
+            wrapper: string;
+            content: string;
+        };
+        bottom: {
+            wrapper: string;
+            content: string;
+        };
+    };
+    radius: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
+    backdrop: {
+        transparent: {
+            overlay: string;
+        };
+        opaque: {
+            overlay: string;
+        };
+        blur: {
+            overlay: string;
+        };
+    };
+}, {
+    wrapper: string;
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    body: string;
+    footer: string;
+}, import('tailwind-variants').TVReturnType<{
+    side: {
+        left: {
+            wrapper: string;
+            content: string;
+        };
+        right: {
+            wrapper: string;
+            content: string;
+        };
+        top: {
+            wrapper: string;
+            content: string;
+        };
+        bottom: {
+            wrapper: string;
+            content: string;
+        };
+    };
+    radius: {
+        none: {
+            content: string;
+        };
+        sm: {
+            content: string;
+        };
+        md: {
+            content: string;
+        };
+        lg: {
+            content: string;
+        };
+        xl: {
+            content: string;
+        };
+    };
+    backdrop: {
+        transparent: {
+            overlay: string;
+        };
+        opaque: {
+            overlay: string;
+        };
+        blur: {
+            overlay: string;
+        };
+    };
+}, {
+    wrapper: string;
+    overlay: string;
+    content: string;
+    header: string;
+    title: string;
+    body: string;
+    footer: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,51 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { drawer } from './drawer.styles';
+
+export type DrawerSide = "left" | "right" | "top" | "bottom";
+export type DrawerRadius = "none" | "sm" | "md" | "lg" | "xl";
+export type DrawerBackdrop = "transparent" | "opaque" | "blur";
+export interface DrawerProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: DrawerSide;
+    closeOnOverlayClick?: boolean;
+    closeOnEscape?: boolean;
+    blockScrollOnOpen?: boolean;
+    portal?: boolean;
+    radius?: DrawerRadius;
+    backdrop?: DrawerBackdrop;
+    classNames?: {
+        wrapper?: string;
+        overlay?: string;
+        content?: string;
+        header?: string;
+        title?: string;
+        body?: string;
+        footer?: string;
+    };
+    id?: string;
+}
+export interface DrawerContentProps {
+    children: ReactNode;
+    className?: string;
+}
+export interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface DrawerTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface DrawerBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export type DrawerVariants = VariantProps<typeof drawer>;

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

@@ -0,0 +1,6 @@
+export * from './Drawer';
+export * from './DrawerContent';
+export * from './DrawerTrigger';
+export * from './DrawerLayout';
+export * from './drawer.types';
+export * from './useDrawer';

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

@@ -0,0 +1,11 @@
+import { DrawerProps } from './drawer.types';
+
+export declare function useDrawer(props: DrawerProps): {
+    isOpen: boolean;
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    contentId: string;
+    titleId: string;
+    bodyId: string;
+};