Lib Utilities

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

---

Class names and responsive helpers

• CN (Class Names) — Compose className strings and intelligently merge Tailwind classes via clsx + tailwind-merge.
• Responsive — Typed helpers for size/color/dimension variants, responsive arrays, and cva integrations.

---

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.