Bottom Sheet

Cần overlay ở đáy màn hình?
├─ Actions/share (3+ items) → Bottom Sheet (modal, medium)
├─ Filter/sort controls → Bottom Sheet (modal, medium→large)
├─ Detail preview + CTA → Bottom Sheet (modal, large)
├─ Quick form (2-3 fields) → Bottom Sheet (modal, large)
├─ Search + keyboard + list → Bottom Sheet (fullscreen)
├─ Map detail / persistent info → Bottom Sheet (standard)
├─ Always-visible tracker → Bottom Sheet (persistent)
├─ Side navigation (mobile) → Drawer (left)
├─ Detail/edit panel (desktop) → Drawer (right)
├─ Complex multi-field form → Modal
├─ Confirm/alert (1-2 actions) → Dialog
└─ Transient notification → Toast

┌─────────────────────────────────┐
│         Drag Handle             │ ← .surface-sheet__handle (optional), 32×4px
│─────────────────────────────────│
│ Header Title            [Close] │ ← .slot-header
│ Subtitle                        │
│─────────────────────────────────│ ← divider (--border)
│                                 │
│       Scrollable Content        │ ← .slot-body (SLOT injection point)
│       (list / form / custom)    │
│                                 │
│─────────────────────────────────│
│    [Secondary]    [Primary]     │ ← .slot-footer (optional)
│─────────────────────────────────│
│      safe area padding          │
└─────────────────────────────────┘

┌─────────────────────────────────┐
│         Drag Handle             │ ← .surface-sheet__handle
│─────────────────────────────────│
│ Header Title            [Close] │ ← .surface-bottomsheet__header-row
│ [🔍 Search input...          ] │ ← search/filter controls (pinned)
│─────────────────────────────────│ ← auto divider via border-bottom
│                                 │
│       Scrollable Results        │ ← .slot-body (only results scroll)
│                                 │
└─────────────────────────────────┘

<!-- Generic pattern — bất kỳ sheet nào -->
<div class="surface-bottomsheet__header">
    <div class="surface-bottomsheet__header-row">
        <span class="surface-bottomsheet__title">Title</span>
        <button class="surface-bottomsheet__close">✕</button>
    </div>
    <!-- Thêm bất kỳ controls nào ở đây — sẽ pinned, không scroll -->
    <div class="search-bar">...</div>
    <div class="flex gap-xs scroll-x">
        <button class="chip chip--primary">All</button>
        <button class="chip chip--secondary">Category</button>
    </div>
</div>
<div class="surface-bottomsheet__body">
    <!-- Chỉ phần này scroll -->
</div>

<!-- HTML skeleton with data-slot -->
<div class="surface-sheet surface-sheet--modal" data-slot="bottom-sheet" role="dialog" aria-modal="true">
  <div class="surface-sheet__handle" data-slot="bottom-sheet-handle"></div>
  <div class="slot-header" data-slot="bottom-sheet-header">
    <span data-slot="bottom-sheet-title">Title</span>
    <button data-slot="bottom-sheet-close" aria-label="Close">✕</button>
  </div>
  <div class="slot-body" data-slot="bottom-sheet-body">
    <!-- scrollable content -->
  </div>
  <div class="slot-footer" data-slot="bottom-sheet-footer">
    <button class="btn btn--outline">Cancel</button>
    <button class="btn btn--primary">Confirm</button>
  </div>
</div>

interface BottomSheetProps {
  /** Variant — determines behavior & scrim */
  variant?: 'modal' | 'standard' | 'persistent' | 'fullscreen';
  /** Controlled open state */
  open: boolean;
  /** Close callback */
  onClose: () => void;
  /** Available detent heights */
  detents?: ('peek' | 'medium' | 'large' | 'full')[];
  /** Initial detent when opening */
  initialDetent?: 'peek' | 'medium' | 'large';
  /** Show drag handle */
  showHandle?: boolean; // default: true (false for fullscreen)
  /** Close on scrim tap (modal only) */
  closeOnOverlayClick?: boolean; // default: true
  /** Close on Escape key */
  closeOnEscape?: boolean; // default: true
  /** Swipe to dismiss */
  swipeToDismiss?: boolean; // default: true
  /** Lock background scroll (modal only) */
  lockBackgroundScroll?: boolean; // default: true
  /** Max width (tablet/desktop) */
  maxWidth?: string; // default: '640px'
  /** Children content */
  children: ReactNode;
}

interface BottomSheetHeaderProps {
  /** Title */
  title: string;
  /** Subtitle */
  subtitle?: string;
  /** Show close button */
  showCloseButton?: boolean; // default: true
}

interface BottomSheetFooterProps {
  children: ReactNode; // Buttons
}

/* Footer có safe area */
.surface-bottomsheet__footer {
    padding-bottom: calc(var(--section-padding-default) + var(--local-iphone-safe-area-bottom));
}
/* Sheet không có footer → body cần safe area */
.surface-bottomsheet__body:last-child {
    padding-bottom: var(--local-iphone-safe-area-bottom);
}

/* Sheet: header with divider → body gets padding-top */
.surface-bottomsheet__header:has(.surface-bottomsheet__header-row) + .surface-bottomsheet__body {
    padding-top: var(--section-padding-default);
}
/* Drawer: same pattern (future-ready) */
.surface-drawer__header[style*="border-bottom"] + .surface-drawer__body {
    padding-top: var(--section-padding-default);
}

{/* Modal — share actions */}
<BottomSheet
  open={isOpen}
  onClose={close}
  variant="modal"
  detents={['medium']}
  showHandle
>
  <BottomSheet.Header title="Share" subtitle="Choose how to share" />
  <BottomSheet.Body>
    <ShareGrid items={shareTargets} />
    <ActionList items={['Copy Link', 'Save', 'Print']} />
  </BottomSheet.Body>
</BottomSheet>

{/* Modal — filter with footer */}
<BottomSheet
  open={isOpen}
  onClose={close}
  variant="modal"
  detents={['medium', 'large']}
>
  <BottomSheet.Header title="Filter & Sort" subtitle="3 filters active" />
  <BottomSheet.Body>
    <FilterChips categories={['Food', 'Transport', 'Shopping']} />
    <PriceRange min={0} max={1000} />
  </BottomSheet.Body>
  <BottomSheet.Footer>
    <Button variant="outline" onClick={reset}>Reset</Button>
    <Button variant="primary" onClick={apply}>Apply Filters</Button>
  </BottomSheet.Footer>
</BottomSheet>

{/* Fullscreen — search */}
<BottomSheet
  open={isOpen}
  onClose={close}
  variant="fullscreen"
>
  <BottomSheet.Header title="Search Location" />
  <BottomSheet.Body>
    <SearchInput placeholder="Search locations..." />
    <LocationList items={locations} />
  </BottomSheet.Body>
</BottomSheet>

{/* Standard — map detail (non-modal) */}
<BottomSheet
  open={isOpen}
  onClose={close}
  variant="standard"
  detents={['peek', 'medium', 'large']}
  initialDetent="peek"
>
  <BottomSheet.Header title="Vincom Center" subtitle="72 Lê Thánh Tôn" />
  <BottomSheet.Body>
    <PlaceDetail place={selectedPlace} />
  </BottomSheet.Body>
  <BottomSheet.Footer>
    <Button variant="outline" onClick={share}>Share</Button>
    <Button variant="primary" onClick={navigate}>Directions</Button>
  </BottomSheet.Footer>
</BottomSheet>

.surface-sheet              ← Container (Surface layer)
.surface-sheet--modal       ← Modal variant (scrim + focus trap)
.surface-sheet--standard    ← Standard variant (no scrim)
.surface-sheet--persistent  ← Persistent variant (always visible)
.surface-sheet--fullscreen  ← Fullscreen variant (radius:0, 100%)
.surface-sheet--open        ← Open state (translateY: 0)
.surface-sheet--detent-peek     ← max-height: 25%
.surface-sheet--detent-medium   ← max-height: 50%
.surface-sheet--detent-large    ← max-height: 92%
.surface-sheet--detent-full     ← max-height: 100%
.surface-sheet__handle      ← Drag handle (32×4px chip)
.surface-sheet__header-row  ← Title + close row (inside multi-row header)
.surface-sheet__scrim       ← Background overlay (modal only)
.surface-sheet__close       ← Close button
.slot-header                ← Header area (generic slot)
.slot-body                  ← Scrollable content (generic slot)
.slot-footer                ← Action buttons (generic slot)