"use client"; import type * as React from "react"; import { Drawer as DrawerPrimitive } from "vaul"; import { useDirection } from "@/hooks/registry/use-direction"; import { cn } from "@/lib/registry/cn"; type DrawerDirection = "top" | "bottom" | "start" | "end"; /** * Vaul's `direction` prop only accepts physical `"left"|"right"|"top"| * "bottom"` values — it has no concept of inline-start / inline-end — * so the public `direction` here is logical (start/end) and we translate * to Vaul's physical model at the prop boundary. The internal CSS * (DrawerContent below) stays keyed off Vaul's `data-vaul-drawer-direction` * physical attribute for the same reason: using Tailwind logical * utilities there would double-flip in RTL against Vaul's already- * physical animation. Authors only see start/end; the physical-side * mechanics are an implementation detail of the Vaul integration. */ function Drawer({ direction, ...props }: Omit, "direction"> & { direction?: DrawerDirection; }) { const textDirection = useDirection(); const resolvedDirection = direction === "start" ? textDirection === "rtl" ? "right" : "left" : direction === "end" ? textDirection === "rtl" ? "left" : "right" : direction; return ( )} /> ); } function DrawerTrigger({ ...props }: React.ComponentProps) { return ; } function DrawerPortal({ ...props }: React.ComponentProps) { return ; } function DrawerClose({ ...props }: React.ComponentProps) { return ; } function DrawerOverlay({ className, ...props }: React.ComponentProps) { return ( ); } function DrawerContent({ className, children, siblingMode = false, ...props }: React.ComponentProps & { siblingMode?: boolean; }) { const content = (

{children} ); if (siblingMode) { return content; } return ( {content} ); } function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { return (

); } function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { return (

); } function DrawerTitle({ className, ...props }: React.ComponentProps) { return ( ); } function DrawerDescription({ className, ...props }: React.ComponentProps) { return ( ); } export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, };

Drawer

Showcase

Drawer