Lib Utilities

This section documents reusable, framework-agnostic helpers that power the LOKE Design System and can be used in your own custom components. They’re designed for composability, strong typing, and accessibility.

What’s here?

Low-level utilities for building custom components and component libraries:

• Context creation: Simple and advanced scoped contexts for state management across component trees
• Event & ref composition: Safely combine multiple handlers and refs without loss of functionality
• DOM utilities: Measure elements, observe changes, manage focus, and detect interactions
• Collection management: Build ordered, scoped collections for lists, menus, tabs, and other grouped components
• Small helpers: Utility functions like number clamping for specific use cases

These utilities are used in @loke/ui primitives and work well in any component library or custom implementation.

---

DOM measurement and interaction

• Rect (observeElementRect) — Observe element bounding rect changes with a batched rAF loop.
• DismissableLayer — Build overlays/popovers that dismiss on outside interactions or Escape; supports branches and nesting.
• Focus Guards — Inject invisible focus guards at document edges for reliable focus transitions (useful for modals/overlays).

---

Events and refs

• Compose Events — Safely combine multiple event handlers into one with defaultPrevented checks.
• Compose Refs — Combine multiple refs (callback and RefObject) into a single stable ref, plus a memoized hook.

---

Context and collections

• Context — Create standard or scoped contexts; compose scopes for complex component trees.
• Collection — Build ordered, scoped collections (lists, menus, tabs) with Provider/Slot/ItemSlot and read items in DOM order.

---

Numbers

• Number — clamp — Clamp a number within a range using a tiny, zero‑dependency helper.

---

Where to start

• Need to build a responsive component quickly? Use Responsive with cva.
• Merging className props? Reach for CN.
• Popovers/modals that dismiss on outside click? DismissableLayer.
• Managing nested/isolated state across instances? See Context and Collection.