feat: add component drawer

Author: Ohh-889

packages/ui/package.json

@@ -51,7 +51,8 @@
     "react-dom": "19.1.0",
     "sonner": "2.0.6",
     "tailwind-merge": "3.3.0",
-    "tailwind-variants": "1.0.0"
+    "tailwind-variants": "1.0.0",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@turbo/gen": "2.5.0",

packages/ui/src/components/drawer/Drawer.tsx

@@ -0,0 +1,82 @@
+import { type ComponentRef, forwardRef } from 'react';
+import type { Content } from 'vaul';
+import { Root as _Root } from 'vaul';
+
+import { DialogFooter, DialogHeader, DialogTrigger } from '../dialog';
+
+import DrawerClose from './DrawerClose';
+import DrawerContent from './DrawerContent';
+import DrawerDescription from './DrawerDescription';
+import DrawerTitle from './DrawerTitle';
+import type { DrawerProps } from './types';
+
+const Drawer = forwardRef<ComponentRef<typeof Content>, DrawerProps>((props, ref) => {
+  const {
+    children,
+    classNames,
+    contentProps,
+    description,
+    footer,
+    shouldScaleBackground = true,
+    showClose,
+    size,
+    title,
+    trigger
+  } = props;
+
+  return (
+    <_Root
+      shouldScaleBackground={shouldScaleBackground}
+      {...props}
+    >
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+
+      <DrawerContent
+        classNames={classNames}
+        ref={ref}
+        {...contentProps}
+      >
+        <DialogHeader
+          className={classNames?.header}
+          size={size}
+        >
+          <DrawerTitle
+            className={classNames?.title}
+            size={size}
+          >
+            {title}
+          </DrawerTitle>
+
+          <DrawerDescription
+            className={classNames?.description}
+            size={size}
+          >
+            {description}
+          </DrawerDescription>
+        </DialogHeader>
+
+        {showClose && (
+          <DrawerClose
+            className={classNames?.close}
+            size={size}
+          />
+        )}
+
+        {children}
+
+        {footer && (
+          <DialogFooter
+            className={classNames?.footer || '!flex-col-reverse'}
+            size={size}
+          >
+            {footer}
+          </DialogFooter>
+        )}
+      </DrawerContent>
+    </_Root>
+  );
+});
+
+Drawer.displayName = 'Drawer';
+
+export default Drawer;

packages/ui/src/components/drawer/DrawerClose.tsx

@@ -0,0 +1,16 @@
+import { Drawer } from 'vaul';
+
+import { DialogClose } from '../dialog';
+
+import type { DrawerCloseProps } from './types';
+
+const DrawerClose = (props: DrawerCloseProps) => {
+  return (
+    <DialogClose
+      component={Drawer.Close}
+      {...props}
+    />
+  );
+};
+
+export default DrawerClose;

packages/ui/src/components/drawer/DrawerContent.tsx

@@ -0,0 +1,42 @@
+import type { ComponentRef } from 'react';
+import { forwardRef } from 'react';
+import { Content, Portal } from 'vaul';
+
+import { cn } from '@/lib/utils';
+
+import DrawerContentBody from './DrawerContentBody';
+import DrawerKnob from './DrawerKnob';
+import DrawerOverlay from './DrawerOverlay';
+import { drawerVariants } from './drawer-variants';
+import type { DrawerContentProps } from './types';
+
+const DrawerContent = forwardRef<ComponentRef<typeof Content>, DrawerContentProps>((props, ref) => {
+  const { children, className, classNames, size, ...rest } = props;
+
+  const { content } = drawerVariants({ size });
+
+  const mergedCls = cn(content(), className, classNames?.content);
+
+  return (
+    <Portal>
+      <DrawerOverlay className={classNames?.overlay} />
+
+      <Content
+        className={mergedCls}
+        data-slot="drawer-content"
+        ref={ref}
+        {...rest}
+      >
+        <DrawerContentBody className={classNames?.contentBody}>
+          <DrawerKnob className={classNames?.knob} />
+
+          {children}
+        </DrawerContentBody>
+      </Content>
+    </Portal>
+  );
+});
+
+DrawerContent.displayName = 'DrawerContent';
+
+export default DrawerContent;

packages/ui/src/components/drawer/DrawerContentBody.tsx

@@ -0,0 +1,20 @@
+import { cn } from '@/lib/utils';
+
+import { drawerVariants } from './drawer-variants';
+import type { DrawerContentBodyProps } from './types';
+
+const DrawerContentBody = (props: DrawerContentBodyProps) => {
+  const { className, size, ...rest } = props;
+
+  const { contentBody } = drawerVariants({ size });
+
+  const mergedCls = cn(contentBody(), className);
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+    />
+  );
+};
+
+export default DrawerContentBody;

packages/ui/src/components/drawer/DrawerDescription.tsx

@@ -0,0 +1,16 @@
+import { Drawer } from 'vaul';
+
+import { DialogDescription } from '../dialog';
+
+import type { DrawerDescriptionProps } from './types';
+
+const DrawerDescription = (props: DrawerDescriptionProps) => {
+  return (
+    <DialogDescription
+      component={Drawer.Description}
+      {...props}
+    />
+  );
+};
+
+export default DrawerDescription;

packages/ui/src/components/drawer/DrawerKnob.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/utils';
+
+import { drawerVariants } from './drawer-variants';
+import type { DrawerKnobProps } from './types';
+
+const DrawerKnob = (props: DrawerKnobProps) => {
+  const { className, size, ...rest } = props;
+
+  const { knob } = drawerVariants({ size });
+
+  const mergedCls = cn(knob(), className);
+
+  return (
+    <div
+      className={mergedCls}
+      {...rest}
+    />
+  );
+};
+
+export default DrawerKnob;

packages/ui/src/components/drawer/DrawerOverlay.tsx

@@ -0,0 +1,16 @@
+import { Overlay as _Overlay } from 'vaul';
+
+import { DialogOverlay } from '../dialog';
+
+import type { DrawerOverlayProps } from './types';
+
+const DrawerOverlay = (props: DrawerOverlayProps) => {
+  return (
+    <DialogOverlay
+      component={_Overlay}
+      {...props}
+    />
+  );
+};
+
+export default DrawerOverlay;

packages/ui/src/components/drawer/DrawerTitle.tsx

@@ -0,0 +1,16 @@
+import { Drawer } from 'vaul';
+
+import { DialogTitle } from '../dialog';
+
+import type { DrawerTitleProps } from './types';
+
+const DrawerTitle = (props: DrawerTitleProps) => {
+  return (
+    <DialogTitle
+      component={Drawer.Title}
+      {...props}
+    />
+  );
+};
+
+export default DrawerTitle;

packages/ui/src/components/drawer/drawer-variants.ts

@@ -0,0 +1,51 @@
+import { tv } from 'tailwind-variants';
+
+import { dialogVariants } from '../dialog/dialog-variants';
+
+export const drawerVariants = tv({
+  defaultVariants: {
+    size: 'md'
+  },
+  slots: {
+    ...dialogVariants.slots,
+    content: `fixed inset-x-0 bottom-0 z-50 border bg-background`,
+    contentBody: `flex h-auto flex-col`,
+    knob: `mx-auto shrink-0 cursor-grab active:cursor-grabbing rounded-full bg-muted`
+  },
+  variants: {
+    size: {
+      '2xl': {
+        content: `mt-30 rounded-t-[16px]`,
+        contentBody: `gap-y-6 max-w-3xl px-7 py-6 text-xl`,
+        knob: 'mt-7 h-3.5 w-40'
+      },
+      lg: {
+        content: `mt-26 rounded-t-[12px]`,
+        contentBody: `gap-y-4 max-w-xl px-5 py-4 text-base`,
+        knob: 'mt-5 h-2.5 w-30'
+      },
+      md: {
+        content: `mt-24 rounded-t-[10px]`,
+        contentBody: `gap-y-3 max-w-lg px-4 py-3 text-sm`,
+        knob: 'mt-4 h-2 w-25'
+      },
+      sm: {
+        content: `mt-22 rounded-t-[8px]`,
+        contentBody: `gap-y-2 max-w-md px-3 py-2 text-xs`,
+        knob: 'mt-3.5 h-1.75 w-22'
+      },
+      xl: {
+        content: `mt-28 rounded-t-[14px]`,
+        contentBody: `gap-y-5 max-w-2xl px-6 py-5 text-lg`,
+        knob: 'mt-6 h-3 w-35'
+      },
+      xs: {
+        content: `mt-20 rounded-t-[6px]`,
+        contentBody: `gap-y-1.5 max-w-md px-2 py-1.5 text-2xs`,
+        knob: 'mt-3 h-1.5 w-20'
+      }
+    }
+  }
+});
+
+export type DrawerSlots = keyof typeof drawerVariants.slots;