feat: Drawer component

package.json

@@ -28,6 +28,7 @@
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.1",
     "viem": "^2.21.45",
     "wagmi": "^2.12.32",
     "zod": "^3.23.8"

src/app/components/ui/Dialog.tsx

@@ -4,7 +4,7 @@ import { X } from "@phosphor-icons/react/dist/ssr";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { FocusScope, type FocusScopeProps } from "@radix-ui/react-focus-scope";
 import { type VariantProps, cva } from "class-variance-authority";
-import { cn } from "lib/cn";
+import { cn } from "lib/cssUtils";
 import {
   type ComponentPropsWithoutRef,
   type ElementRef,

src/app/components/ui/Drawer.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import { cn } from "lib/cssUtils";
+import {
+  type ComponentProps,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type HTMLAttributes,
+  forwardRef,
+} from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = forwardRef<
+  ElementRef<typeof DrawerPrimitive.Overlay>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/50 backdrop-blur-sm", className)}
+    {...props}
+  />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = forwardRef<
+  ElementRef<typeof DrawerPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-drawer-handle" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = forwardRef<
+  ElementRef<typeof DrawerPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "font-display font-extrabold text-lg leading-none tracking-tight",
+      className,
+    )}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+};

src/app/globals.css

@@ -111,6 +111,8 @@ html {
 
   --badge-background: var(--blackAlpha);
   --badge-foreground: var(--foreground);
+
+  --drawer-handle: var(--blackAlpha)
 }
 
 .dark {
@@ -150,6 +152,8 @@ html {
 
   --badge-background: var(--blackAlpha);
   --badge-foreground: var(--foreground);
+
+  --drawer-handle: var(--whiteAlpha)
 }
 
 .dark video,

src/stories/Drawer.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "app/components/ui/Button";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from "app/components/ui/Drawer";
+
+const DrawerExample = () => (
+  <Drawer>
+    <DrawerTrigger>Open</DrawerTrigger>
+    <DrawerContent>
+      <DrawerHeader>
+        <DrawerTitle>Are you absolutely sure?</DrawerTitle>
+      </DrawerHeader>
+      <DrawerFooter>
+        <Button colorScheme="primary">Submit</Button>
+        <DrawerClose asChild>
+          <Button variant="subtle">Cancel</Button>
+        </DrawerClose>
+      </DrawerFooter>
+    </DrawerContent>
+  </Drawer>
+);
+
+const meta: Meta<typeof DrawerExample> = {
+  title: "Design system/Drawer",
+  component: DrawerExample,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DrawerExample>;
+
+export const Default: Story = {};

tailwind.config.ts

@@ -16,7 +16,6 @@ const config = {
       display: ["var(--font-dystopian,sans-serif)"],
     },
     extend: {
-
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
@@ -26,7 +25,8 @@ const config = {
         badge: {
           background: "var(--badge-background)",
           foreground: "var(--badge-foreground)"
-        }
+        },
+        "drawer-handle": "var(--drawer-handle)"
       },
     },
   },