Component Anatomy

Temper follows compound component patterns to provide fine-grained control over layout, styling, and behavior.

import { Drawer } from '@ughur/temper';

<Drawer.Root>
  <Drawer.Trigger />
  <Drawer.Portal>
    <Drawer.Overlay />
    <Drawer.Content>
      <Drawer.Handle />
      <Drawer.Title />
      <Drawer.Description />
      <Drawer.Close />
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>

---

Component Roles

Component	Required	Description
Drawer.Root	Yes	Manages open state, gesture tracking, snap points, and physics calculations.
Drawer.Trigger	Yes	Interactive element (button) that toggles the drawer open.
Drawer.Portal	Yes	Renders overlay and content into document body portal to avoid parent clipping/z-index issues.
Drawer.Overlay	Yes	Backdrop overlay covering the page content behind the drawer.
Drawer.Content	Yes	Main visible drawer container that handles drag gestures and position fixed locking.
Drawer.Handle	Optional	Visual drag handle bar with built-in touch target area (44x44px hit target).
Drawer.Title	Yes (A11y)	Accessible title element announced by screen readers when opened.
Drawer.Description	Optional	Accessible description element providing supplementary context to screen readers.
Drawer.Close	Optional	Action trigger button to close the active drawer.
Drawer.NestedRoot	Optional	Root component for drawers rendered inside an active drawer stack.

---

Compound Export

The components are exported as standard named sub-properties on the default Drawer object or individually if needed:

import { Drawer, Root, Content, Trigger } from '@ughur/temper';