@eocrm/design-system 0.0.0-stage → 0.6.18

package/src/components/Drawer/Drawer.module.scss

@@ -0,0 +1,232 @@
+@use '../../styles/mixins' as *;
+@use './Drawer.tokens';
+
+// ─── Overlay ────────────────────────────────────────────────────────────
+// stylelint-disable property-disallowed-list -- internal positioning, not consumer layout
+.overlay {
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- overlay must be fixed
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
+  background: var(--drawer-overlay-bg);
+  z-index: calc(var(--drawer-overlay-z) + var(--modal-depth, 0) * 2);
+  opacity: var(--drag-opacity, var(--drawer-overlay-opacity-visible));
+  transition: opacity var(--drawer-overlay-transition);
+  overscroll-behavior: contain;
+
+  // Hint to the browser to promote this element to its own compositor
+  // layer BEFORE the animation starts, so opacity transitions are smooth
+  // from frame 1 instead of after the first paint upgrade.
+  will-change: opacity;
+
+  // Isolate paint + layout from the rest of the page so opening the
+  // overlay doesn't invalidate sibling layout/paint trees.
+  contain: layout paint;
+
+  @starting-style {
+    opacity: var(--drawer-overlay-opacity-hidden);
+  }
+}
+
+.overlay[data-state='closed'] {
+  opacity: var(--drawer-overlay-opacity-hidden);
+}
+
+.overlay[data-stack-position='hidden'] {
+  display: none;
+}
+
+.overlay[data-variant='blur'] {
+  background: var(--drawer-overlay-bg-blur);
+  // stylelint-disable-next-line scale-unlimited/declaration-strict-value
+  backdrop-filter: blur(4px);
+  // stylelint-disable-next-line property-no-vendor-prefix, scale-unlimited/declaration-strict-value
+  -webkit-backdrop-filter: blur(4px);
+}
+
+.overlay[data-overlay-paint='no'] {
+  background: transparent;
+  backdrop-filter: none;
+  // stylelint-disable-next-line property-no-vendor-prefix
+  -webkit-backdrop-filter: none;
+}
+// stylelint-enable property-disallowed-list
+
+// ─── Content (dialog) ───────────────────────────────────────────────────
+// stylelint-disable property-disallowed-list
+.content {
+  // stylelint-disable-next-line declaration-property-value-disallowed-list -- drawer is fixed to a viewport edge
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  background: var(--drawer-bg);
+  box-shadow: var(--drawer-shadow);
+  z-index: calc(var(--drawer-overlay-z) + var(--modal-depth, 0) * 2 + 1);
+  transition: transform var(--drawer-transition);
+  overscroll-behavior: contain;
+
+  // Promote to its own compositor layer for smooth slide animation.
+  // transform is GPU-friendly already; will-change makes the browser
+  // upgrade the layer BEFORE the animation starts rather than during it.
+  will-change: transform;
+
+  // Isolate from the rest of the page — the drawer is fixed and doesn't
+  // affect parent layout/paint, so contain prevents reverse-invalidation.
+  contain: layout paint;
+}
+
+// Per-side positioning + slide animation. The drawer animates in from off-screen
+// (@starting-style) and animates out via [data-state='closed']. During drag,
+// --drag-translate-{x|y} on .content overrides via the base transform expression.
+.content.side-right {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: min(var(--drawer-size, var(--drawer-content-size-md)), 100vw - 32px);
+  width: min(var(--drawer-size, var(--drawer-content-size-md)), 100dvw - 32px);
+  transform: translateX(var(--drag-translate-x, 0));
+
+  @starting-style {
+    transform: translateX(100%);
+  }
+}
+
+.content.side-right[data-state='closed'] {
+  transform: translateX(100%);
+}
+
+.content.side-left {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: min(var(--drawer-size, var(--drawer-content-size-md)), 100vw - 32px);
+  width: min(var(--drawer-size, var(--drawer-content-size-md)), 100dvw - 32px);
+  transform: translateX(var(--drag-translate-x, 0));
+
+  @starting-style {
+    transform: translateX(-100%);
+  }
+}
+
+.content.side-left[data-state='closed'] {
+  transform: translateX(-100%);
+}
+
+.content.side-top {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: min(var(--drawer-size, var(--drawer-content-size-md)), 100vh - 32px);
+  height: min(var(--drawer-size, var(--drawer-content-size-md)), 100dvh - 32px);
+  transform: translateY(var(--drag-translate-y, 0));
+
+  @starting-style {
+    transform: translateY(-100%);
+  }
+}
+
+.content.side-top[data-state='closed'] {
+  transform: translateY(-100%);
+}
+
+.content.side-bottom {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: min(var(--drawer-size, var(--drawer-content-size-md)), 100vh - 32px);
+  height: min(var(--drawer-size, var(--drawer-content-size-md)), 100dvh - 32px);
+  transform: translateY(var(--drag-translate-y, 0));
+
+  @starting-style {
+    transform: translateY(100%);
+  }
+}
+
+.content.side-bottom[data-state='closed'] {
+  transform: translateY(100%);
+}
+// stylelint-enable property-disallowed-list
+
+// Size presets drive --drawer-size which the side rules consume via min().
+.size-sm {
+  --drawer-size: var(--drawer-content-size-sm);
+}
+
+.size-md {
+  --drawer-size: var(--drawer-content-size-md);
+}
+
+.size-lg {
+  --drawer-size: var(--drawer-content-size-lg);
+}
+
+// ─── Header ─────────────────────────────────────────────────────────────
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--drawer-header-gap);
+  padding: var(--drawer-header-padding);
+  border-bottom: var(--border-width) solid var(--drawer-header-border-color);
+  touch-action: none;
+  cursor: grab;
+}
+
+.headerTitle {
+  // stylelint-disable-next-line property-disallowed-list -- reset h2 default margin; internal
+  margin: 0;
+  font-size: var(--drawer-header-title-font-size);
+  font-weight: var(--drawer-header-title-font-weight);
+  color: var(--drawer-header-title-fg);
+}
+
+// ─── Body ───────────────────────────────────────────────────────────────
+.body {
+  padding: var(--drawer-body-padding);
+  overflow-y: auto;
+  flex: 1 1 auto;
+  overscroll-behavior: contain;
+}
+
+.bodyPaddingNone {
+  padding: 0;
+}
+
+// ─── Footer ─────────────────────────────────────────────────────────────
+.footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--drawer-footer-gap);
+  padding: var(--drawer-footer-padding);
+  border-top: var(--border-width) solid var(--drawer-footer-border-color);
+}
+
+.footerAlign-start {
+  justify-content: flex-start;
+}
+
+.footerAlign-end {
+  justify-content: flex-end;
+}
+
+.footerAlign-space-between {
+  justify-content: space-between;
+}
+
+// ─── Reduced motion ─────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  .overlay,
+  .content {
+    transition: none;
+
+    @starting-style {
+      opacity: var(--drawer-opacity-visible);
+      transform: none;
+    }
+  }
+}

package/src/components/Drawer/Drawer.tokens.scss

@@ -0,0 +1,38 @@
+// Drawer.tokens.scss — Component-scoped tokens for <Drawer>. Each token defaults to the primitive the SCSS used before this migration. Drawer shares the modal z-index stack and overlay scrim with <Modal>; per-side slide transforms and the drag-to-close routing vars (--drag-translate-x/-y, --drag-opacity, --drawer-size, --modal-depth) are internal to the SCSS and not consumer-facing tokens.
+:root {
+  // Overlay (scrim)
+  --drawer-overlay-bg: var(--color-bg-overlay);
+  --drawer-overlay-bg-blur: var(--color-bg-overlay-blur);
+  --drawer-overlay-z: var(--z-modal);
+  --drawer-overlay-opacity-hidden: var(--opacity-hidden);
+  --drawer-overlay-opacity-visible: var(--opacity-visible);
+  --drawer-overlay-transition: var(--transition-base);
+
+  // Content (panel)
+  --drawer-bg: var(--color-bg);
+  --drawer-shadow: var(--shadow-lg);
+  --drawer-transition: var(--transition-base);
+  --drawer-opacity-visible: var(--opacity-visible);
+
+  // Size variants — width/height per size
+  --drawer-content-size-sm: var(--size-drawer-sm);
+  --drawer-content-size-md: var(--size-drawer-md);
+  --drawer-content-size-lg: var(--size-drawer-lg);
+
+  // Header
+  --drawer-header-gap: var(--space-3);
+  --drawer-header-padding: var(--space-4);
+  --drawer-header-border-color: var(--color-border);
+
+  --drawer-header-title-font-size: var(--font-size-lg);
+  --drawer-header-title-font-weight: var(--font-weight-semibold);
+  --drawer-header-title-fg: var(--color-fg);
+
+  // Body
+  --drawer-body-padding: var(--space-4);
+
+  // Footer
+  --drawer-footer-gap: var(--space-2);
+  --drawer-footer-padding: var(--space-4);
+  --drawer-footer-border-color: var(--color-border);
+}

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,23 @@
+import { DrawerRoot } from './DrawerRoot';
+import { Header } from './Header';
+import { Body } from './Body';
+import { Footer } from './Footer';
+import { Close } from './Close';
+
+/**
+ * Compound `<Drawer>` family: `Drawer.Header`, `Body`, `Footer` and `Close` attached via `Object.assign`.
+ * @see docs/components/Drawer.md
+ */
+export const Drawer = Object.assign(DrawerRoot, {
+  Header,
+  Body,
+  Footer,
+  Close,
+});
+
+export type { DrawerProps } from './DrawerRoot';
+export type { DrawerSide, DrawerSize, DrawerOverlayVariant, DrawerStackMode } from './context';
+export type { DrawerHeaderProps } from './Header';
+export type { DrawerBodyProps } from './Body';
+export type { DrawerFooterProps } from './Footer';
+export type { DrawerCloseProps } from './Close';

package/src/components/Drawer/DrawerRoot.tsx

@@ -0,0 +1,190 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+  type RefObject,
+} from 'react';
+import {
+  isFocusLost,
+  restoreFocusTo,
+  useOverlayStack,
+  useScrollLock,
+  type OverlayStackMode,
+} from '../_internal/overlay';
+import { sanitizeId } from '../_internal/refs';
+import {
+  DrawerContext,
+  type DrawerContextValue,
+  type DrawerOverlayVariant,
+  type DrawerSide,
+  type DrawerSize,
+  type DrawerStackMode,
+} from './context';
+import { Overlay } from './Overlay';
+import { Content } from './Content';
+
+export interface DrawerProps {
+  /** Controlled open state. Required — Drawer has no uncontrolled mode. */
+  open: boolean;
+  /** Fired when Drawer wants to change open state — Esc, overlay click, Close, swipe, programmatic. */
+  onOpenChange: (open: boolean) => void;
+
+  /** Edge the drawer slides in from: `left`, `right` (default), `top`, `bottom`. */
+  side?: DrawerSide;
+
+  /** Size preset: `sm` 320px, `md` 440px (default), `lg` 640px. Width for left/right, height for top/bottom. Capped to `viewport - 32px` on narrow viewports; always edge-anchored, never fullscreen. */
+  size?: DrawerSize;
+
+  /** Overlay variant. 'solid' (default) | 'blur' (frosted glass, `backdrop-filter: blur(4px)`). */
+  overlay?: DrawerOverlayVariant;
+
+  /**
+   * How this drawer relates to other open overlays (Modals or Drawers).
+   * 'overlay' (default): parent stays visible. 'replace': parent hidden via display:none.
+   */
+  stackMode?: DrawerStackMode;
+
+  /** Disable Escape-to-close. Default false. */
+  disableEscapeClose?: boolean;
+  /** When false, overlay click does NOT close. Default true. */
+  dismissOnOverlayClick?: boolean;
+  /** Enable swipe-to-close gesture on touch devices (from Header). Default true. */
+  dragToClose?: boolean;
+
+  /** Initial focus target on open. */
+  initialFocusRef?: RefObject<HTMLElement | null>;
+
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  'aria-label'?: string;
+  'aria-describedby'?: string;
+}
+
+/**
+ * Edge-anchored slide-in dialog sharing Modal's focus-lock, scroll-lock and overlay stack.
+ * @see docs/components/Drawer.md
+ */
+export function DrawerRoot({
+  open,
+  onOpenChange,
+  side = 'right',
+  size = 'md',
+  overlay = 'solid',
+  stackMode = 'overlay',
+  disableEscapeClose = false,
+  dismissOnOverlayClick = true,
+  dragToClose = true,
+  initialFocusRef,
+  children,
+  className,
+  style,
+  'aria-label': ariaLabel,
+  'aria-describedby': ariaDescribedBy,
+}: DrawerProps) {
+  const rawId = useId();
+  const drawerId = `drawer-${sanitizeId(rawId)}`;
+
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const [headingId, setHeadingId] = useState<string | null>(null);
+
+  // previouslyFocused — captured in a useLayoutEffect BEFORE Content's auto-focus microtask.
+  // prevOpenRef starts false (not `open`) so mounting already open counts as an
+  // opening and captures the opener; the cleanup below restores it when the
+  // Drawer unmounts while still open (#557 — port of Modal's #450 fix).
+  const previouslyFocusedRef = useRef<HTMLElement | null>(null);
+  const prevOpenRef = useRef(false);
+  const focusEffectGenerationRef = useRef(0);
+  const restoreFocus = useCallback(() => {
+    const target = previouslyFocusedRef.current;
+    previouslyFocusedRef.current = null;
+    if (target && document.contains(target)) {
+      restoreFocusTo(target);
+    }
+  }, []);
+  useLayoutEffect(() => {
+    const generation = ++focusEffectGenerationRef.current;
+    if (open && !prevOpenRef.current) {
+      previouslyFocusedRef.current = (document.activeElement as HTMLElement | null) ?? null;
+    }
+    if (!open && prevOpenRef.current) {
+      restoreFocus();
+    }
+    prevOpenRef.current = open;
+    // Unmounted while open: defer until React tears down the dialog and its
+    // focus trap. A later effect run (a normal close) bumps the generation and
+    // cancels this fallback, and restoreFocus clears its ref, so focus moves once.
+    // Only when focus was actually lost — a consumer that focused something
+    // after the unmount (e.g. the next row) keeps it.
+    if (open) {
+      return () => {
+        queueMicrotask(() => {
+          // eslint-disable-next-line react-hooks/exhaustive-deps -- the generation counter must be read at cleanup time
+          if (focusEffectGenerationRef.current === generation && isFocusLost()) restoreFocus();
+        });
+      };
+    }
+  }, [open, restoreFocus]);
+
+  const { depth, isTop, topMode } = useOverlayStack(drawerId, open, stackMode as OverlayStackMode);
+  useScrollLock(open);
+
+  const setOpen = useCallback((next: boolean) => onOpenChange(next), [onOpenChange]);
+
+  // Dev warning — deferred to microtask so <Drawer.Header>'s registration effect can run.
+  useEffect(() => {
+    if (!open) return;
+    if (process.env.NODE_ENV === 'production') return;
+    let cancelled = false;
+    queueMicrotask(() => {
+      if (cancelled) return;
+      if (!headingId && !ariaLabel) {
+        console.warn(
+          '<Drawer> must be labelled. Either render <Drawer.Header> or pass an `aria-label` prop.',
+        );
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, headingId, ariaLabel]);
+
+  const value: DrawerContextValue = {
+    open,
+    setOpen,
+    drawerId,
+    contentRef,
+    headingId,
+    setHeadingId,
+    side,
+    size,
+    overlay,
+    stackMode,
+    disableEscapeClose,
+    dismissOnOverlayClick,
+    dragToClose,
+    initialFocusRef,
+    ariaLabel,
+    ariaDescribedBy,
+    depth: depth ?? 0,
+    isTop,
+    topMode: topMode as DrawerStackMode | null,
+  };
+
+  return (
+    <DrawerContext.Provider value={value}>
+      {open && (
+        <Overlay>
+          <Content className={className} style={style}>
+            {children}
+          </Content>
+        </Overlay>
+      )}
+    </DrawerContext.Provider>
+  );
+}

package/src/components/Drawer/Footer.tsx

@@ -0,0 +1,24 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import styles from './Drawer.module.scss';
+
+export interface DrawerFooterProps extends HTMLAttributes<HTMLDivElement> {
+  /** Horizontal action alignment. Default 'end'. */
+  align?: 'start' | 'end' | 'space-between';
+}
+
+export const Footer = forwardRef<HTMLDivElement, DrawerFooterProps>(function Footer(
+  { align = 'end', className, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      role="group"
+      className={clsx(styles.footer, styles[`footerAlign-${align}`], className)}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+});

package/src/components/Drawer/Header.tsx

@@ -0,0 +1,64 @@
+import { forwardRef, useEffect, useId, useRef, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import { X } from 'lucide-react';
+import { Button } from '../Button';
+import { useTranslation } from '../../i18n/useTranslation';
+import { useDrawerContext } from './context';
+import { sanitizeId, mergeRefs } from '../_internal/refs';
+import { useDragToClose } from './useDragToClose';
+import styles from './Drawer.module.scss';
+
+export interface DrawerHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /** Show the built-in × close button. Default true. */
+  closeButton?: boolean;
+}
+
+/**
+ * Title bar at the top of the drawer: names the dialog, shows a close button and is the drag-to-close origin.
+ * @see docs/components/Drawer.md
+ */
+export const Header = forwardRef<HTMLDivElement, DrawerHeaderProps>(function Header(
+  { closeButton = true, className, children, ...rest },
+  ref,
+) {
+  const t = useTranslation();
+  const ctx = useDrawerContext('Header');
+  const rawId = useId();
+  const headingId = `drawer-heading-${sanitizeId(rawId)}`;
+  const internalRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    ctx.setHeadingId(headingId);
+    return () => ctx.setHeadingId(null);
+  }, [ctx, headingId]);
+
+  useDragToClose(internalRef, {
+    side: ctx.side,
+    active: ctx.dragToClose && ctx.isTop && ctx.open,
+    onDismiss: () => ctx.setOpen(false),
+    contentRef: ctx.contentRef,
+  });
+
+  return (
+    <div
+      ref={mergeRefs<HTMLDivElement>(internalRef, ref)}
+      className={clsx(styles.header, className)}
+      {...rest}
+    >
+      <h2 id={headingId} className={styles.headerTitle}>
+        {children}
+      </h2>
+      {closeButton && (
+        <Button
+          variant="ghost"
+          size="xs"
+          iconOnly
+          aria-label={t('drawer.close')}
+          onClick={() => ctx.setOpen(false)}
+        >
+          <X size={16} aria-hidden="true" />
+        </Button>
+      )}
+    </div>
+  );
+});

package/src/components/Drawer/Overlay.tsx

@@ -0,0 +1,82 @@
+import {
+  useEffect,
+  type CSSProperties,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { useDrawerContext } from './context';
+import styles from './Drawer.module.scss';
+
+export interface OverlayProps {
+  children: ReactNode;
+}
+
+const PORTAL_EXEMPT_SELECTOR =
+  '[data-modal-portal-root], [data-drawer-portal-root], [data-tour-portal-root]';
+
+/**
+ * Portaled dimming / blurred backdrop. Owns the inert-background attribute
+ * on body children (exempting modal AND drawer portals) + overlay-click
+ * dismissal. Three data-attributes consumed by SCSS:
+ * - data-variant         : 'solid' | 'blur'
+ * - data-stack-position  : 'top' | 'underneath' | 'hidden'
+ * - data-overlay-paint   : 'yes' | 'no'
+ */
+export function Overlay({ children }: OverlayProps) {
+  const ctx = useDrawerContext('Overlay');
+
+  useEffect(() => {
+    if (!ctx.isTop) return;
+    const bodyChildren = Array.from(document.body.children) as HTMLElement[];
+    const toRestore: Array<{ el: HTMLElement; had: boolean }> = [];
+    for (const el of bodyChildren) {
+      if (el.matches(PORTAL_EXEMPT_SELECTOR)) continue;
+      const had = el.hasAttribute('inert');
+      if (!had) el.setAttribute('inert', '');
+      toRestore.push({ el, had });
+    }
+    return () => {
+      for (const { el, had } of toRestore) {
+        if (!had) el.removeAttribute('inert');
+      }
+    };
+  }, [ctx.isTop]);
+
+  const onClick = (e: ReactMouseEvent<HTMLDivElement>) => {
+    if (e.target !== e.currentTarget) return;
+    if (!ctx.dismissOnOverlayClick) return;
+    if (!ctx.isTop) return;
+    ctx.setOpen(false);
+  };
+
+  let stackPosition: 'top' | 'hidden' | 'underneath';
+  if (ctx.isTop) {
+    stackPosition = 'top';
+  } else if (ctx.topMode === 'replace') {
+    stackPosition = 'hidden';
+  } else {
+    stackPosition = 'underneath';
+  }
+
+  const paint =
+    (ctx.topMode === 'replace' && ctx.isTop) || (ctx.topMode === 'overlay' && ctx.depth === 0);
+
+  const style = { ['--modal-depth' as string]: String(ctx.depth) } as CSSProperties;
+
+  return createPortal(
+    <div
+      data-drawer-portal-root=""
+      data-state={ctx.open ? 'open' : 'closed'}
+      data-variant={ctx.overlay}
+      data-stack-position={stackPosition}
+      data-overlay-paint={paint ? 'yes' : 'no'}
+      className={styles.overlay}
+      style={style}
+      onClick={onClick}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+}

package/src/components/Drawer/context.ts

@@ -0,0 +1,44 @@
+import { createContext, useContext, type RefObject } from 'react';
+import type { OverlayStackMode } from '../_internal/overlay';
+import type { DrawerSide } from './useDragToClose';
+
+export type DrawerSize = 'sm' | 'md' | 'lg';
+export type DrawerOverlayVariant = 'solid' | 'blur';
+/** Alias of {@link OverlayStackMode}. */
+export type DrawerStackMode = OverlayStackMode;
+export type { DrawerSide };
+
+export interface DrawerContextValue {
+  open: boolean;
+  setOpen: (next: boolean) => void;
+  /** Stable drawer id, used by the stack registry. */
+  drawerId: string;
+  /** Ref to the dialog container, populated by <Content>. */
+  contentRef: RefObject<HTMLDivElement | null>;
+  /** Stable id for the heading registered by <Header>. */
+  headingId: string | null;
+  setHeadingId: (id: string | null) => void;
+  side: DrawerSide;
+  size: DrawerSize;
+  overlay: DrawerOverlayVariant;
+  stackMode: DrawerStackMode;
+  disableEscapeClose: boolean;
+  dismissOnOverlayClick: boolean;
+  dragToClose: boolean;
+  initialFocusRef: RefObject<HTMLElement | null> | undefined;
+  ariaLabel: string | undefined;
+  ariaDescribedBy: string | undefined;
+  depth: number;
+  isTop: boolean;
+  topMode: DrawerStackMode | null;
+}
+
+export const DrawerContext = createContext<DrawerContextValue | null>(null);
+
+export function useDrawerContext(componentName: string): DrawerContextValue {
+  const ctx = useContext(DrawerContext);
+  if (!ctx) {
+    throw new Error(`<Drawer.${componentName}> must be used inside <Drawer>.`);
+  }
+  return ctx;
+}