COMPONENT: Drawer / Bottom Sheet Component

[nayan458]

Task: Drawer / Bottom Sheet Component

Type: Component
Milestone: M0.5 — Shared Component Library
Estimate: M

Component Type

• Design system (no API calls, pure props)

Props Interface

interface DrawerProps {
  isOpen:    boolean;
  onClose:   () => void;
  title?:    string;
  children:  ReactNode;
  footer?:   ReactNode;
  side?:     'left' | 'right' | 'bottom';
  size?:     'sm' | 'md' | 'lg';           // width for left/right, height for bottom
  isDismissable?: boolean;
  className?: string;
}

Variants / States

State	Description
Right drawer	Slides in from right. Used for UserPanel detail view.
Bottom sheet	Slides up from bottom. Used on mobile for detail views.
Left drawer	Slides in from left. Reserved for mobile sidebar nav.
sm / md / lg	Right/left: 320px / 480px / 640px. Bottom: 40% / 60% / 90% viewport.
With footer	Sticky bottom action bar inside the drawer

Acceptance Criteria

• Rendered via createPortal — same as Modal
• Slide-in animation matches the side direction
• Focus trapped and ESC closes when isDismissable is true
• body scroll locked while open
• On mobile (< 768px) right drawer automatically becomes bottom sheet
• footer slot is sticky — does not scroll with content
• Zero hardcoded hex values
• Storybook stories: right, left, bottom, with footer, non-dismissable

Notes

• UserPanel in M2 uses right drawer on desktop, bottom sheet on mobile — the auto-conversion at 768px must be built here, not in UserPanel