From 9f932fb97de72f39fa4226e0792b43f806b0e68e Mon Sep 17 00:00:00 2001
From: Segun Adebayo <joseshegs@gmail.com>
Date: Sun, 11 Jul 2021 01:43:35 +0400
Subject: [PATCH] refactor: more updates

---
 packages/machines/package.json                |  1 +
 .../machines/src/editable/editable.connect.ts |  8 +--
 .../machines/src/editable/editable.machine.ts |  4 +-
 packages/machines/src/menu/menu.connect.ts    |  6 +-
 packages/machines/src/menu/menu.dom.ts        | 24 +++++--
 packages/machines/src/menu/menu.machine.ts    | 16 ++---
 .../src/number-input/number-input.connect.ts  |  4 +-
 .../src/number-input/number-input.machine.ts  |  6 +-
 .../src/pin-input/pin-input.connect.ts        |  2 +-
 .../machines/src/pin-input/pin-input.dom.ts   |  6 +-
 .../src/pin-input/pin-input.machine.ts        | 28 ++++----
 .../machines/src/popover/popover.connect.ts   |  6 +-
 packages/machines/src/popover/popover.dom.ts  | 12 ++++
 .../machines/src/popover/popover.machine.ts   | 16 ++---
 .../src/pressable/pressable.machine.ts        |  2 +-
 .../src/range-slider/range-slider.connect.ts  |  4 +-
 .../src/range-slider/range-slider.dom.ts      |  2 +-
 .../src/range-slider/range-slider.machine.ts  | 24 +++----
 .../machines/src/rating/rating.connect.ts     |  8 +--
 packages/machines/src/rating/rating.dom.ts    |  2 +-
 .../machines/src/rating/rating.machine.ts     |  4 +-
 .../machines/src/slider/slider.connect.ts     |  4 +-
 packages/machines/src/slider/slider.dom.ts    |  2 +-
 .../machines/src/slider/slider.machine.ts     | 20 +++---
 packages/machines/src/tabs/tabs.connect.ts    |  4 +-
 packages/machines/src/tabs/tabs.dom.ts        | 16 ++---
 packages/machines/src/tabs/tabs.machine.ts    | 16 ++---
 .../src/tags-input/tags-input.connect.ts      |  7 +-
 .../machines/src/tags-input/tags-input.dom.ts | 19 ++++-
 .../src/tags-input/tags-input.machine.ts      |  7 +-
 .../machines/src/toast/toast-group.machine.ts |  2 +-
 packages/machines/src/toast/toast.connect.ts  |  2 +-
 packages/machines/src/toast/toast.machine.ts  |  2 +-
 .../machines/src/tooltip/tooltip.connect.ts   |  2 +-
 .../machines/src/tooltip/tooltip.machine.ts   |  6 +-
 packages/machines/src/type-utils.ts           |  5 +-
 packages/utilities/src/array.ts               | 17 +++--
 packages/utilities/src/assertion.ts           | 26 -------
 packages/utilities/src/dom-collection.ts      |  9 ++-
 packages/utilities/src/dom-event.ts           | 50 +++++++++++--
 packages/utilities/src/dom-helper.ts          | 30 ++++----
 packages/utilities/src/function.ts            | 23 +++++-
 packages/utilities/src/index.ts               |  1 -
 packages/utilities/src/types.ts               | 31 --------
 yarn.lock                                     | 70 +++++++++----------
 45 files changed, 306 insertions(+), 250 deletions(-)
 delete mode 100644 packages/utilities/src/types.ts

diff --git a/packages/machines/package.json b/packages/machines/package.json
index b16f60fbcc..358b10fa99 100644
--- a/packages/machines/package.json
+++ b/packages/machines/package.json
@@ -28,6 +28,7 @@
   },
   "dependencies": {
     "@ui-machines/core": "0.1.0",
+    "@ui-machines/utils": "0.1.0",
     "@types/react": "^17.0.6",
     "valtio": "^1.0.5"
   }
diff --git a/packages/machines/src/editable/editable.connect.ts b/packages/machines/src/editable/editable.connect.ts
index 0dfd9ed1cd..ea29a87702 100644
--- a/packages/machines/src/editable/editable.connect.ts
+++ b/packages/machines/src/editable/editable.connect.ts
@@ -1,10 +1,10 @@
 import {
   defaultPropNormalizer,
-  determineBlur,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
-import { ariaAttr } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { ariaAttr } from "@ui-machines/utils/dom-helper"
+import { isValidBlurEvent } from "@ui-machines/utils/dom-event"
 import {
   DOMButtonProps,
   DOMHTMLProps,
@@ -42,7 +42,7 @@ export function connectEditableMachine(
       value: ctx.value,
       onBlur(event) {
         const { cancelBtn, submitBtn } = getElements(ctx)
-        const isValidBlur = determineBlur(event, {
+        const isValidBlur = isValidBlurEvent(event, {
           pointerdownNode: ctx.pointerdownNode,
           exclude: [cancelBtn, submitBtn],
         })
diff --git a/packages/machines/src/editable/editable.machine.ts b/packages/machines/src/editable/editable.machine.ts
index 7368fc8c15..271ab4db00 100644
--- a/packages/machines/src/editable/editable.machine.ts
+++ b/packages/machines/src/editable/editable.machine.ts
@@ -3,8 +3,8 @@ import {
   guards,
   preserve,
   trackPointerDown,
-} from "@chakra-ui/machine"
-import { nextTick } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
 import { getElements } from "./editable.dom"
 
diff --git a/packages/machines/src/menu/menu.connect.ts b/packages/machines/src/menu/menu.connect.ts
index 816d88be3d..d7922b0c87 100644
--- a/packages/machines/src/menu/menu.connect.ts
+++ b/packages/machines/src/menu/menu.connect.ts
@@ -1,9 +1,9 @@
 import {
   defaultPropNormalizer,
-  determineBlur,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
+} from "@ui-machines/core"
+import { isValidBlurEvent } from "@ui-machines/utils"
 import {
   DOMButtonProps,
   DOMHTMLProps,
@@ -65,7 +65,7 @@ export function connectMenuMachine(
       onBlur(event) {
         const { button } = getElements(ctx)
 
-        const isValidBlur = determineBlur(event, {
+        const isValidBlur = isValidBlurEvent(event, {
           exclude: button,
           pointerdownNode: ctx.pointerdownNode,
         })
diff --git a/packages/machines/src/menu/menu.dom.ts b/packages/machines/src/menu/menu.dom.ts
index 0edbed88b3..4796c650c6 100644
--- a/packages/machines/src/menu/menu.dom.ts
+++ b/packages/machines/src/menu/menu.dom.ts
@@ -1,4 +1,4 @@
-import { createCollection } from "@chakra-ui/utilities"
+import { createDOMCollection } from "@ui-machines/utils"
 import { MenuMachineContext } from "./menu.machine"
 
 export function getElementIds(uid: string) {
@@ -17,17 +17,27 @@ export function getElements(ctx: MenuMachineContext) {
   }
 }
 
-export function collection(ctx: MenuMachineContext) {
+export function dom(ctx: MenuMachineContext) {
   const ids = getElementIds(ctx.uid)
   const { menu } = getElements(ctx)
   const selector = `[role=menuitem][data-ownedby=${ids.menu}]:not([disabled])`
-  const dom = createCollection(menu, selector)
+  const {
+    prevById,
+    nextById,
+    first,
+    last,
+    findByEventKey,
+    getActiveDescendantId,
+  } = createDOMCollection(menu, selector)
 
   return {
-    ...dom,
-    getElementByCharacter(key: string) {
-      const activeDescendant = menu?.getAttribute("aria-activedescendant")
-      return dom.searchByKey(key, activeDescendant)
+    first,
+    last,
+    prev: prevById,
+    next: nextById,
+    searchByKey(key: string) {
+      const activeId = getActiveDescendantId()
+      return findByEventKey(key, activeId)
     },
   }
 }
diff --git a/packages/machines/src/menu/menu.machine.ts b/packages/machines/src/menu/menu.machine.ts
index cac14c7e3d..ee8947b62b 100644
--- a/packages/machines/src/menu/menu.machine.ts
+++ b/packages/machines/src/menu/menu.machine.ts
@@ -1,7 +1,7 @@
-import { createMachine, preserve, trackPointerDown } from "@chakra-ui/machine"
-import { nextTick } from "@chakra-ui/utilities"
+import { createMachine, preserve, trackPointerDown } from "@ui-machines/core"
+import { nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
-import { collection, getElements } from "./menu.dom"
+import { dom, getElements } from "./menu.dom"
 
 export type MenuMachineContext = WithDOM<{
   activeDescendantId: string | null
@@ -122,20 +122,20 @@ export const menuMachine = createMachine<MenuMachineContext, MenuMachineState>(
         nextTick(() => menu?.focus())
       },
       focusFirstItem(ctx) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         ctx.activeDescendantId = menuitems.first.id
       },
       focusLastItem(ctx) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         ctx.activeDescendantId = menuitems.last.id
       },
       focusNextItem(ctx) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         const next = menuitems.next(ctx.activeDescendantId ?? "")
         ctx.activeDescendantId = next?.id ?? null
       },
       focusPrevItem(ctx) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         const prev = menuitems.prev(ctx.activeDescendantId ?? "")
         ctx.activeDescendantId = prev?.id ?? null
       },
@@ -150,7 +150,7 @@ export const menuMachine = createMachine<MenuMachineContext, MenuMachineState>(
         nextTick(() => button?.focus())
       },
       focusMatchedItem(ctx, evt) {
-        const menuitems = collection(ctx)
+        const menuitems = dom(ctx)
         const node = menuitems.searchByKey(evt.key)
         ctx.activeDescendantId = node?.id ?? ctx.activeDescendantId
       },
diff --git a/packages/machines/src/number-input/number-input.connect.ts b/packages/machines/src/number-input/number-input.connect.ts
index 23b257969d..0639e6b06f 100644
--- a/packages/machines/src/number-input/number-input.connect.ts
+++ b/packages/machines/src/number-input/number-input.connect.ts
@@ -2,8 +2,8 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine/vanilla"
-import { Range } from "@chakra-ui/utilities/range-utils"
+} from "@ui-machines/core"
+import { Range } from "@ui-machines/utils/range"
 import { getStepMultipler } from "../event-utils"
 import { DOMButtonProps, DOMInputProps, EventKeyMap } from "../type-utils"
 import { getElementIds } from "./number-input.dom"
diff --git a/packages/machines/src/number-input/number-input.machine.ts b/packages/machines/src/number-input/number-input.machine.ts
index b452a2cd44..71f5157976 100644
--- a/packages/machines/src/number-input/number-input.machine.ts
+++ b/packages/machines/src/number-input/number-input.machine.ts
@@ -1,5 +1,5 @@
-import { createMachine, guards, preserve } from "@chakra-ui/machine"
-import { addEventListener, nextTick, noop, Range } from "@chakra-ui/utilities"
+import { createMachine, guards, preserve } from "@ui-machines/core"
+import { addDomEvent, nextTick, noop, Range } from "@ui-machines/utils"
 import { getElements } from "./number-input.dom"
 import { sanitize } from "./number-input.utils"
 
@@ -149,7 +149,7 @@ export const numberInputMachine = createMachine<
             ctx.value = new Range(ctx).decrement().clamp().toString()
           }
         }
-        return addEventListener(input, "wheel", listener, { passive: false })
+        return addDomEvent(input, "wheel", listener, { passive: false })
       },
     },
     actions: {
diff --git a/packages/machines/src/pin-input/pin-input.connect.ts b/packages/machines/src/pin-input/pin-input.connect.ts
index 859cc3b4a6..a6adca92d5 100644
--- a/packages/machines/src/pin-input/pin-input.connect.ts
+++ b/packages/machines/src/pin-input/pin-input.connect.ts
@@ -2,7 +2,7 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine/vanilla"
+} from "@ui-machines/core"
 import { DOMInputProps, EventKeyMap, WithDataAttr } from "../type-utils"
 import { getElementIds } from "./pin-input.dom"
 import {
diff --git a/packages/machines/src/pin-input/pin-input.dom.ts b/packages/machines/src/pin-input/pin-input.dom.ts
index 301a7b38e6..24e488b97b 100644
--- a/packages/machines/src/pin-input/pin-input.dom.ts
+++ b/packages/machines/src/pin-input/pin-input.dom.ts
@@ -1,4 +1,4 @@
-import { createCollection } from "@chakra-ui/utilities"
+import { createDOMCollection } from "@ui-machines/utils"
 import { PinInputMachineContext } from "./pin-input.machine"
 
 export function getElementIds(uid: string) {
@@ -8,9 +8,9 @@ export function getElementIds(uid: string) {
   }
 }
 
-export function collection(ctx: PinInputMachineContext) {
+export function dom(ctx: PinInputMachineContext) {
   const doc = ctx.doc ?? document
   const ids = getElementIds(ctx.uid)
   const selector = `input[data-ownedby=${ids.root}]`
-  return createCollection<HTMLInputElement>(doc, selector)
+  return createDOMCollection<HTMLInputElement>(doc, selector)
 }
diff --git a/packages/machines/src/pin-input/pin-input.machine.ts b/packages/machines/src/pin-input/pin-input.machine.ts
index 1f2347bb45..a4bbd1f8b6 100644
--- a/packages/machines/src/pin-input/pin-input.machine.ts
+++ b/packages/machines/src/pin-input/pin-input.machine.ts
@@ -1,7 +1,7 @@
-import { createMachine, guards, preserve } from "@chakra-ui/machine"
-import { isArrayEmpty, nextTick } from "@chakra-ui/utilities"
+import { createMachine, guards, preserve } from "@ui-machines/core"
+import { ArrayCollection, nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
-import { collection } from "./pin-input.dom"
+import { dom } from "./pin-input.dom"
 
 const { not } = guards
 
@@ -103,11 +103,11 @@ export const pinInputMachine = createMachine<
         return ctx.value.every(Boolean)
       },
       isLastValueBeforeComplete: (ctx) => {
-        const { count } = collection(ctx)
+        const { count } = dom(ctx)
         return ctx.value.filter(Boolean).length === count - 1
       },
       isLastInputFocused: (ctx) => {
-        const { count } = collection(ctx)
+        const { count } = dom(ctx)
         return ctx.focusedIndex === count - 1
       },
     },
@@ -117,17 +117,17 @@ export const pinInputMachine = createMachine<
       },
       initializeValue: (ctx) => {
         nextTick(() => {
-          const dom = collection(ctx)
-          const empty = [...new Array(dom.count).fill("")]
-          ctx.value = isArrayEmpty(ctx.value) ? preserve(empty) : ctx.value
+          const inputs = dom(ctx)
+          const empty = ArrayCollection.fromLength(inputs.count)
+          ctx.value = ctx.value.length === 0 ? preserve(empty.value) : ctx.value
         })
       },
       setOwnerDocument: (ctx, evt) => {
         ctx.doc = preserve(evt.doc)
       },
       focusInput: (ctx) => {
-        const dom = collection(ctx)
-        const input = dom.item(ctx.focusedIndex)
+        const inputs = dom(ctx)
+        const input = inputs.itemAt(ctx.focusedIndex)
         nextTick(() => input.focus())
       },
       invokeComplete: (ctx) => {
@@ -171,14 +171,14 @@ export const pinInputMachine = createMachine<
         if (!ctx.autoFocus) return
         ctx.focusedIndex = 0
         nextTick(() => {
-          const dom = collection(ctx)
-          dom.first?.focus()
+          const inputs = dom(ctx)
+          inputs.first?.focus()
         })
       },
       setNextFocusedIndex: (ctx, evt, { guards }) => {
         if (guards?.isValueComplete(ctx, evt)) return
-        const dom = collection(ctx)
-        let nextIndex = Math.min(ctx.focusedIndex + 1, dom.count)
+        const inputs = dom(ctx)
+        let nextIndex = Math.min(ctx.focusedIndex + 1, inputs.count)
         ctx.focusedIndex = nextIndex
       },
       setPrevFocusIndex: (ctx) => {
diff --git a/packages/machines/src/popover/popover.connect.ts b/packages/machines/src/popover/popover.connect.ts
index 1c82b83c92..1e398fec58 100644
--- a/packages/machines/src/popover/popover.connect.ts
+++ b/packages/machines/src/popover/popover.connect.ts
@@ -1,9 +1,9 @@
 import {
   defaultPropNormalizer,
-  determineBlur,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
+} from "@ui-machines/core"
+import { isValidBlurEvent } from "@ui-machines/utils"
 import { DOMHTMLProps } from "../type-utils"
 import { getElementIds, getElements } from "./popover.dom"
 import { PopoverMachineContext, PopoverMachineState } from "./popover.machine"
@@ -42,7 +42,7 @@ export function connectPopoverMachine(
       },
       onBlur(event) {
         const { trigger } = getElements(ctx)
-        const isValidBlur = determineBlur(event, {
+        const isValidBlur = isValidBlurEvent(event, {
           exclude: trigger,
           pointerdownNode: ctx.pointerdownNode,
         })
diff --git a/packages/machines/src/popover/popover.dom.ts b/packages/machines/src/popover/popover.dom.ts
index 8c587f13be..4ea3446434 100644
--- a/packages/machines/src/popover/popover.dom.ts
+++ b/packages/machines/src/popover/popover.dom.ts
@@ -1,3 +1,4 @@
+import { ArrayCollection, DOMHelper } from "@ui-machines/utils"
 import { PopoverMachineContext } from "./popover.machine"
 
 export function getElementIds(uid: string) {
@@ -20,3 +21,14 @@ export function getElements(ctx: PopoverMachineContext) {
     body: doc.getElementById(ids.body),
   }
 }
+
+export function dom(ctx: PopoverMachineContext) {
+  const { content } = getElements(ctx)
+  return {
+    getFirstFocusable() {
+      const focusables = new DOMHelper(content).getFocusables(true)
+      const nodelist = new ArrayCollection(focusables)
+      return nodelist.first
+    },
+  }
+}
diff --git a/packages/machines/src/popover/popover.machine.ts b/packages/machines/src/popover/popover.machine.ts
index 051cafbb92..db77f0143f 100644
--- a/packages/machines/src/popover/popover.machine.ts
+++ b/packages/machines/src/popover/popover.machine.ts
@@ -3,10 +3,10 @@ import {
   guards,
   preserve,
   trackPointerDown,
-} from "@chakra-ui/machine"
-import { getFirstFocusable, isTabbable, nextTick } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { DOMHelper, nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
-import { getElements } from "./popover.dom"
+import { dom, getElements } from "./popover.dom"
 
 const { and } = guards
 
@@ -85,7 +85,8 @@ export const popoverMachine = createMachine<
     activities: { trackPointerDown },
     guards: {
       shouldCloseOnEsc: (ctx) => !!ctx.closeOnEsc,
-      isPointerdownFocusable: (ctx) => isTabbable(ctx.pointerdownNode),
+      isPointerdownFocusable: (ctx) =>
+        new DOMHelper(ctx.pointerdownNode).isTabbable,
       shouldCloseOnOutsideClick: (ctx) => !!ctx.closeOnOutsideClick,
     },
     actions: {
@@ -100,10 +101,9 @@ export const popoverMachine = createMachine<
       },
       autoFocus(ctx) {
         nextTick(() => {
-          const nodes = getElements(ctx)
-          if (!nodes.content) return
-          const el = getFirstFocusable(nodes.content) ?? nodes.content
-          el.focus()
+          const { getFirstFocusable } = dom(ctx)
+          const el = getFirstFocusable()
+          el?.focus()
         })
       },
       restoreFocus(ctx) {
diff --git a/packages/machines/src/pressable/pressable.machine.ts b/packages/machines/src/pressable/pressable.machine.ts
index c6140f6c02..3749a99345 100644
--- a/packages/machines/src/pressable/pressable.machine.ts
+++ b/packages/machines/src/pressable/pressable.machine.ts
@@ -1,4 +1,4 @@
-import { createMachine } from "@chakra-ui/machine"
+import { createMachine } from "@ui-machines/core"
 
 export type PressableMachineState = {
   value: "hover" | "pressIn" | "idle" | "longPressIn" | "test"
diff --git a/packages/machines/src/range-slider/range-slider.connect.ts b/packages/machines/src/range-slider/range-slider.connect.ts
index abec6e0d35..8f2d191918 100644
--- a/packages/machines/src/range-slider/range-slider.connect.ts
+++ b/packages/machines/src/range-slider/range-slider.connect.ts
@@ -2,8 +2,8 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
-import { cast, dataAttr, Point, Range } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { cast, dataAttr, Point, Range } from "@ui-machines/utils"
 import { determineEventKey, getStepMultipler } from "../event-utils"
 import {
   DOMHTMLProps,
diff --git a/packages/machines/src/range-slider/range-slider.dom.ts b/packages/machines/src/range-slider/range-slider.dom.ts
index 7680acbe3c..20657391eb 100644
--- a/packages/machines/src/range-slider/range-slider.dom.ts
+++ b/packages/machines/src/range-slider/range-slider.dom.ts
@@ -1,4 +1,4 @@
-import { Point, Range } from "@chakra-ui/utilities"
+import { Point, Range } from "@ui-machines/utils"
 import { RangeSliderMachineContext } from "./range-slider.machine"
 
 export function getElementIds(uid: string) {
diff --git a/packages/machines/src/range-slider/range-slider.machine.ts b/packages/machines/src/range-slider/range-slider.machine.ts
index 2f97eedf72..4c7292a811 100644
--- a/packages/machines/src/range-slider/range-slider.machine.ts
+++ b/packages/machines/src/range-slider/range-slider.machine.ts
@@ -1,14 +1,14 @@
-import { createMachine, dispatchInputEvent, preserve } from "@chakra-ui/machine"
+import { createMachine, preserve } from "@ui-machines/core"
 import {
-  addPointerEvent,
-  nextTick,
-  pipe,
+  addDomEvent,
+  dispatchInputEvent,
   EventListenerWithPointInfo as Listener,
   isMouseEvent,
-  Point,
-  Rect,
-  Range,
-} from "@chakra-ui/utilities"
+} from "@ui-machines/utils/dom-event"
+import { nextTick, pipe } from "@ui-machines/utils/function"
+import { Rect } from "@ui-machines/utils/rect"
+import { Point } from "@ui-machines/utils/point"
+import { Range } from "@ui-machines/utils/range"
 import { WithDOM } from "../type-utils"
 import { getElements, getRangeAtIndex, pointToValue } from "./range-slider.dom"
 
@@ -152,10 +152,10 @@ export const rangeSliderMachine = createMachine<
         }
 
         return pipe(
-          addPointerEvent(doc, "pointermove", onPointerMove, false),
-          addPointerEvent(doc, "pointerup", onPointerUp, false),
-          addPointerEvent(doc, "pointercancel", onPointerUp, false),
-          addPointerEvent(doc, "contextmenu", onPointerUp, false),
+          addDomEvent(doc, "pointermove", onPointerMove, false),
+          addDomEvent(doc, "pointerup", onPointerUp, false),
+          addDomEvent(doc, "pointercancel", onPointerUp, false),
+          addDomEvent(doc, "contextmenu", onPointerUp, false),
         )
       },
     },
diff --git a/packages/machines/src/rating/rating.connect.ts b/packages/machines/src/rating/rating.connect.ts
index e11ea2291b..cae3df3b28 100644
--- a/packages/machines/src/rating/rating.connect.ts
+++ b/packages/machines/src/rating/rating.connect.ts
@@ -2,10 +2,10 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
-import { Point } from "@chakra-ui/utilities/point-utils"
-import { Rect } from "@chakra-ui/utilities/rect-utils"
-import { cast } from "@chakra-ui/utilities/type-utils"
+} from "@ui-machines/core"
+import { cast } from "@ui-machines/utils/function"
+import { Point } from "@ui-machines/utils/point"
+import { Rect } from "@ui-machines/utils/rect"
 import { determineEventKey } from "../event-utils"
 import {
   DOMHTMLProps,
diff --git a/packages/machines/src/rating/rating.dom.ts b/packages/machines/src/rating/rating.dom.ts
index 3579ede866..1f426a5dce 100644
--- a/packages/machines/src/rating/rating.dom.ts
+++ b/packages/machines/src/rating/rating.dom.ts
@@ -17,7 +17,7 @@ export function getElements(ctx: RatingMachineContext) {
   const rootNode = doc.getElementById(rootId)
 
   const selector = `[role=radio][aria-posinset='${Math.ceil(ctx.value)}']`
-  const radio = rootNode?.querySelector(selector) as HTMLElement | null
+  const radio = rootNode?.querySelector<HTMLElement>(selector)
 
   return {
     radio,
diff --git a/packages/machines/src/rating/rating.machine.ts b/packages/machines/src/rating/rating.machine.ts
index 9a28bb4171..69793d639c 100644
--- a/packages/machines/src/rating/rating.machine.ts
+++ b/packages/machines/src/rating/rating.machine.ts
@@ -1,5 +1,5 @@
-import { createMachine, preserve } from "@chakra-ui/machine"
-import { nextTick } from "@chakra-ui/utilities"
+import { createMachine, preserve } from "@ui-machines/core"
+import { nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
 import { getElements } from "./rating.dom"
 
diff --git a/packages/machines/src/slider/slider.connect.ts b/packages/machines/src/slider/slider.connect.ts
index 5fa50b1f12..4584f0a41e 100644
--- a/packages/machines/src/slider/slider.connect.ts
+++ b/packages/machines/src/slider/slider.connect.ts
@@ -2,8 +2,8 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
-import { cast, dataAttr, Point, Range } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { cast, dataAttr, Point, Range } from "@ui-machines/utils"
 import { determineEventKey, getStepMultipler } from "../event-utils"
 import {
   DOMHTMLProps,
diff --git a/packages/machines/src/slider/slider.dom.ts b/packages/machines/src/slider/slider.dom.ts
index bff0c47f50..83ff34bb8d 100644
--- a/packages/machines/src/slider/slider.dom.ts
+++ b/packages/machines/src/slider/slider.dom.ts
@@ -1,4 +1,4 @@
-import { Point, Range } from "@chakra-ui/utilities"
+import { Point, Range } from "@ui-machines/utils"
 import { SliderMachineContext } from "./slider.machine"
 
 export function getElementIds(uid: string) {
diff --git a/packages/machines/src/slider/slider.machine.ts b/packages/machines/src/slider/slider.machine.ts
index 2a449011dc..7b0ea891c0 100644
--- a/packages/machines/src/slider/slider.machine.ts
+++ b/packages/machines/src/slider/slider.machine.ts
@@ -1,12 +1,12 @@
-import { createMachine, dispatchInputEvent, preserve } from "@chakra-ui/machine"
+import { createMachine, preserve } from "@ui-machines/core"
 import {
-  addPointerEvent,
+  addDomEvent,
+  dispatchInputEvent,
   EventListenerWithPointInfo as Listener,
   isMouseEvent,
-  nextTick,
-  pipe,
-  Range,
-} from "@chakra-ui/utilities"
+} from "@ui-machines/utils/dom-event"
+import { nextTick, pipe } from "@ui-machines/utils/function"
+import { Range } from "@ui-machines/utils/range"
 import { WithDOM } from "../type-utils"
 import { getElements, pointToValue } from "./slider.dom"
 
@@ -145,10 +145,10 @@ export const sliderMachine = createMachine<
         }
 
         return pipe(
-          addPointerEvent(doc, "pointermove", onPointerMove, false),
-          addPointerEvent(doc, "pointerup", onPointerUp, false),
-          addPointerEvent(doc, "pointercancel", onPointerUp, false),
-          addPointerEvent(doc, "contextmenu", onPointerUp, false),
+          addDomEvent(doc, "pointermove", onPointerMove, false),
+          addDomEvent(doc, "pointerup", onPointerUp, false),
+          addDomEvent(doc, "pointercancel", onPointerUp, false),
+          addDomEvent(doc, "contextmenu", onPointerUp, false),
         )
       },
     },
diff --git a/packages/machines/src/tabs/tabs.connect.ts b/packages/machines/src/tabs/tabs.connect.ts
index 7385fbd06d..57352ac09c 100644
--- a/packages/machines/src/tabs/tabs.connect.ts
+++ b/packages/machines/src/tabs/tabs.connect.ts
@@ -2,8 +2,8 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
-import { cast, isSafari } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { cast, isSafari } from "@ui-machines/utils"
 import { determineEventKey } from "../event-utils"
 import {
   DOMButtonProps,
diff --git a/packages/machines/src/tabs/tabs.dom.ts b/packages/machines/src/tabs/tabs.dom.ts
index 6eef9797bb..03a19b28db 100644
--- a/packages/machines/src/tabs/tabs.dom.ts
+++ b/packages/machines/src/tabs/tabs.dom.ts
@@ -1,4 +1,4 @@
-import { createCollection } from "@chakra-ui/utilities"
+import { createDOMCollection } from "@ui-machines/utils"
 import { TabsMachineContext } from "./tabs.machine"
 
 export function getElementIds(uid: string) {
@@ -9,25 +9,25 @@ export function getElementIds(uid: string) {
   }
 }
 
-export function collection(ctx: TabsMachineContext) {
+export function dom(ctx: TabsMachineContext) {
   const doc = ctx.doc ?? document
-
   const ids = getElementIds(ctx.uid)
   const tablist = doc.getElementById(ids.tablist)
 
   const selector = `[role=tab][data-ownedby='${ids.tablist}']`
+  const collection = createDOMCollection(tablist, selector)
 
-  const dom = createCollection(tablist, selector)
   return {
-    ...dom,
+    first: collection.first,
+    last: collection.last,
     next(id: string) {
-      return dom.next(ids.getTabId(id))
+      return collection.nextById(ids.getTabId(id))
     },
     prev(id: string) {
-      return dom.prev(ids.getTabId(id))
+      return collection.prevById(ids.getTabId(id))
     },
     rectById(id: string) {
-      const tab = dom.itemById(ids.getTabId(id))
+      const tab = collection.itemById(ids.getTabId(id))
       return {
         left: tab?.offsetLeft,
         width: tab?.offsetWidth,
diff --git a/packages/machines/src/tabs/tabs.machine.ts b/packages/machines/src/tabs/tabs.machine.ts
index 39be968126..7d1d52c1ed 100644
--- a/packages/machines/src/tabs/tabs.machine.ts
+++ b/packages/machines/src/tabs/tabs.machine.ts
@@ -1,7 +1,7 @@
-import { createMachine, guards, preserve } from "@chakra-ui/machine"
-import { nextTick } from "@chakra-ui/utilities"
+import { createMachine, guards, preserve } from "@ui-machines/core"
+import { nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
-import { collection } from "./tabs.dom"
+import { dom } from "./tabs.dom"
 
 const { not } = guards
 
@@ -95,27 +95,27 @@ export const tabsMachine = createMachine<TabsMachineContext, TabsMachineState>(
         ctx.activeTabId = evt.uid
       },
       focusFirstTab(ctx) {
-        const tabs = collection(ctx)
+        const tabs = dom(ctx)
         nextTick(() => tabs.first.focus())
       },
       focusLastTab(ctx) {
-        const tabs = collection(ctx)
+        const tabs = dom(ctx)
         nextTick(() => tabs.last.focus())
       },
       focusNextTab(ctx) {
         if (!ctx.focusedTabId) return
-        const tabs = collection(ctx)
+        const tabs = dom(ctx)
         const next = tabs.next(ctx.focusedTabId)
         nextTick(() => next.focus())
       },
       focusPrevTab(ctx) {
         if (!ctx.focusedTabId) return
-        const tabs = collection(ctx)
+        const tabs = dom(ctx)
         const prev = tabs.prev(ctx.focusedTabId)
         nextTick(() => prev.focus())
       },
       setActiveTabRect(ctx) {
-        const tabs = collection(ctx)
+        const tabs = dom(ctx)
         ctx.indicatorRect = tabs.rectById(ctx.activeTabId)
         if (ctx.measuredRect) return
         setTimeout(() => {
diff --git a/packages/machines/src/tags-input/tags-input.connect.ts b/packages/machines/src/tags-input/tags-input.connect.ts
index d0387e6d27..0ea489cfb5 100644
--- a/packages/machines/src/tags-input/tags-input.connect.ts
+++ b/packages/machines/src/tags-input/tags-input.connect.ts
@@ -1,10 +1,9 @@
 import {
   defaultPropNormalizer,
-  determineBlur,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine/vanilla"
-import { dataAttr } from "@chakra-ui/utilities"
+} from "@ui-machines/core"
+import { dataAttr, isValidBlurEvent } from "@ui-machines/utils"
 import { determineEventKey } from "../event-utils"
 import {
   DOMButtonProps,
@@ -61,7 +60,7 @@ export function connectTagsInputMachine(
         send("FOCUS")
       },
       onBlur(event) {
-        const isValidBlur = determineBlur(event, {
+        const isValidBlur = isValidBlurEvent(event, {
           exclude: getElements(ctx).root,
         })
         if (isValidBlur) {
diff --git a/packages/machines/src/tags-input/tags-input.dom.ts b/packages/machines/src/tags-input/tags-input.dom.ts
index e67d58d215..4dd51b9391 100644
--- a/packages/machines/src/tags-input/tags-input.dom.ts
+++ b/packages/machines/src/tags-input/tags-input.dom.ts
@@ -1,4 +1,4 @@
-import { createCollection } from "@chakra-ui/utilities"
+import { DOMCollection, domHelper } from "@ui-machines/utils"
 import { TagsInputMachineContext } from "./tags-input.machine"
 
 export function getElementIds(uid: string) {
@@ -22,6 +22,19 @@ export function getElements(ctx: TagsInputMachineContext) {
 
 export function collection(ctx: TagsInputMachineContext) {
   const ids = getElementIds(ctx.uid)
-  const { root } = getElements(ctx)
-  return createCollection(root, `[data-ownedby=${ids.root}]`)
+  const { root, input } = getElements(ctx)
+  const selector = `[data-ownedby=${ids.root}]`
+  const { first, last, prevById, nextById, indexOfId } = new DOMCollection(
+    root,
+    selector,
+  )
+
+  return {
+    isInputFocused: domHelper(input).isActiveElement,
+    first,
+    last,
+    indexOfId,
+    prev: prevById,
+    next: nextById,
+  }
 }
diff --git a/packages/machines/src/tags-input/tags-input.machine.ts b/packages/machines/src/tags-input/tags-input.machine.ts
index 8101b05850..c7e34ab359 100644
--- a/packages/machines/src/tags-input/tags-input.machine.ts
+++ b/packages/machines/src/tags-input/tags-input.machine.ts
@@ -1,5 +1,5 @@
-import { createMachine, guards, preserve } from "@chakra-ui/machine"
-import { isActiveElement, nextTick } from "@chakra-ui/utilities"
+import { createMachine, guards, preserve } from "@ui-machines/core"
+import { nextTick } from "@ui-machines/utils"
 import { WithDOM } from "../type-utils"
 import { collection, getElements } from "./tags-input.dom"
 
@@ -194,7 +194,8 @@ export const tagsInputMachine = createMachine<
       isAtMax: (ctx) => ctx.max != null && ctx.value.length === ctx.max,
       hasFocusedId: (ctx) => ctx.focusedId !== null,
       isInputFocused: (ctx) => {
-        return isActiveElement(getElements(ctx).input)
+        const { isInputFocused } = collection(ctx)
+        return isInputFocused
       },
       isTagFocused(ctx, evt) {
         return ctx.focusedId === evt.id
diff --git a/packages/machines/src/toast/toast-group.machine.ts b/packages/machines/src/toast/toast-group.machine.ts
index 1270d7a74f..0d2de1f09e 100644
--- a/packages/machines/src/toast/toast-group.machine.ts
+++ b/packages/machines/src/toast/toast-group.machine.ts
@@ -1,4 +1,4 @@
-import { createMachine, Machine, preserve } from "@chakra-ui/machine"
+import { createMachine, Machine, preserve } from "@ui-machines/core"
 import { WithDOM } from "../type-utils"
 import {
   createToastMachine,
diff --git a/packages/machines/src/toast/toast.connect.ts b/packages/machines/src/toast/toast.connect.ts
index 2f9501e1f9..9a18abf4d0 100644
--- a/packages/machines/src/toast/toast.connect.ts
+++ b/packages/machines/src/toast/toast.connect.ts
@@ -2,7 +2,7 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
+} from "@ui-machines/core"
 import { DOMHTMLProps, WithDataAttr } from "../type-utils"
 import { ToastGroupMachineContext } from "./toast-group.machine"
 import { ToastMachineContext, ToastPlacement } from "./toast.machine"
diff --git a/packages/machines/src/toast/toast.machine.ts b/packages/machines/src/toast/toast.machine.ts
index d76d2e7dcc..bc4ee092ba 100644
--- a/packages/machines/src/toast/toast.machine.ts
+++ b/packages/machines/src/toast/toast.machine.ts
@@ -1,4 +1,4 @@
-import { createMachine, Machine } from "@chakra-ui/machine"
+import { createMachine, Machine } from "@ui-machines/core"
 import { defaultTimeouts } from "./toast.utils"
 
 export type ToastType = "success" | "error" | "loading" | "blank" | "custom"
diff --git a/packages/machines/src/tooltip/tooltip.connect.ts b/packages/machines/src/tooltip/tooltip.connect.ts
index 47dc285f98..f49955efeb 100644
--- a/packages/machines/src/tooltip/tooltip.connect.ts
+++ b/packages/machines/src/tooltip/tooltip.connect.ts
@@ -2,7 +2,7 @@ import {
   defaultPropNormalizer,
   PropNormalizer,
   StateMachine as S,
-} from "@chakra-ui/machine"
+} from "@ui-machines/core"
 import { snapshot } from "valtio"
 import { DOMButtonProps, DOMHTMLProps } from "../type-utils"
 import {
diff --git a/packages/machines/src/tooltip/tooltip.machine.ts b/packages/machines/src/tooltip/tooltip.machine.ts
index b16cd14f81..94053cb695 100644
--- a/packages/machines/src/tooltip/tooltip.machine.ts
+++ b/packages/machines/src/tooltip/tooltip.machine.ts
@@ -1,5 +1,5 @@
-import { createMachine, preserve } from "@chakra-ui/machine"
-import { addEventListener } from "@chakra-ui/utilities/event-utils"
+import { createMachine, preserve } from "@ui-machines/core"
+import { addDomEvent } from "@ui-machines/utils/dom-event"
 import { proxy } from "valtio"
 
 export const tooltipStore = proxy<{ id: string | null }>({ id: null })
@@ -75,7 +75,7 @@ export const tooltipMachine = createMachine<
     activities: {
       attachEscapeKeyListener: (ctx, evt, { send }) => {
         const doc = ctx.doc ?? document
-        return addEventListener(doc, "keydown", (event) => {
+        return addDomEvent(doc, "keydown", (event) => {
           if (event.key === "Escape") {
             send("ESCAPE")
           }
diff --git a/packages/machines/src/type-utils.ts b/packages/machines/src/type-utils.ts
index d0063f14ff..5f79f05c58 100644
--- a/packages/machines/src/type-utils.ts
+++ b/packages/machines/src/type-utils.ts
@@ -1,4 +1,3 @@
-import { Booleanish, Dict } from "@chakra-ui/utilities/type-utils"
 import type {
   ButtonHTMLAttributes,
   CSSProperties,
@@ -7,6 +6,10 @@ import type {
   KeyboardEvent,
 } from "react"
 
+export type Dict<T = any> = Record<string, T>
+
+export type Booleanish = boolean | "true" | "false"
+
 export type WithDataAttr<T> = T & {
   "data-uid"?: string
   "data-ownedby"?: string
diff --git a/packages/utilities/src/array.ts b/packages/utilities/src/array.ts
index 4f6bd54ef6..e47046b1f1 100644
--- a/packages/utilities/src/array.ts
+++ b/packages/utilities/src/array.ts
@@ -14,12 +14,17 @@ export class ArrayCollection<T> {
     return new ArrayCollection(result)
   }
 
+  static fromLength(length: number, fill: string | number = "") {
+    const result = [...new Array(length).fill(fill)]
+    return new ArrayCollection(result)
+  }
+
   constructor(array: T[]) {
     this.value = [...array]
   }
 
   // Get the length of the array
-  get size() {
+  get count() {
     return this.value.length
   }
 
@@ -30,12 +35,12 @@ export class ArrayCollection<T> {
 
   // Get the last item in the array
   get last(): T {
-    return this.value[this.size - 1]
+    return this.value[this.count - 1]
   }
 
   // Check if the array instance is empty
   get isEmpty(): boolean {
-    return this.size === 0
+    return this.count === 0
   }
 
   // get an item at index
@@ -76,7 +81,7 @@ export class ArrayCollection<T> {
 
   // Faster version `Array.prototype.find`
   find(fn: (value: T, key: number, arr: T[]) => boolean): T | undefined {
-    for (let i = 0, len = this.size; i < len; ++i) {
+    for (let i = 0, len = this.count; i < len; ++i) {
       if (fn(this.value[i], i, this.value)) {
         return this.value[i]
       }
@@ -87,7 +92,7 @@ export class ArrayCollection<T> {
   filter(fn: (value: T, key: number, arr: T[]) => boolean) {
     const filteredArr = []
 
-    for (let i = 0, len = this.size; i < len; ++i) {
+    for (let i = 0, len = this.count; i < len; ++i) {
       const value = this.value[i]
 
       if (fn(value, i, this.value)) {
@@ -167,7 +172,7 @@ export class ArrayCollection<T> {
     }
 
     // If there is only one match, return it
-    if (filtered.size === 1) {
+    if (filtered.count === 1) {
       return filtered.first
     }
 
diff --git a/packages/utilities/src/assertion.ts b/packages/utilities/src/assertion.ts
index 5791bc9ce5..d66f957916 100644
--- a/packages/utilities/src/assertion.ts
+++ b/packages/utilities/src/assertion.ts
@@ -37,29 +37,3 @@ export function isRefObject(value: unknown): value is { current: unknown } {
 export function isString(value: unknown): value is string {
   return typeof value === "string"
 }
-
-export const isInputEvent = (
-  event: unknown,
-): event is { target: HTMLInputElement } =>
-  event != null &&
-  isObject(event) &&
-  "target" in event &&
-  event.target instanceof HTMLInputElement
-
-export const isRightClickEvent = (event: unknown) =>
-  isMouseEvent(event) && event.button !== 0
-
-export const isTouchEvent = (event: unknown): event is TouchEvent =>
-  Boolean(event instanceof TouchEvent && event.touches)
-
-export const isMouseEvent = (event: unknown): event is MouseEvent =>
-  // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.
-  isPointerEvent(event)
-    ? event.pointerType === "mouse"
-    : event instanceof MouseEvent
-
-export const isMultiTouchEvent = (event: unknown) =>
-  isTouchEvent(event) && event.touches.length > 1
-
-export const isPointerEvent = (event: unknown): event is PointerEvent =>
-  typeof PointerEvent !== "undefined" && event instanceof PointerEvent
diff --git a/packages/utilities/src/dom-collection.ts b/packages/utilities/src/dom-collection.ts
index bbc8a9b207..c0983d244a 100644
--- a/packages/utilities/src/dom-collection.ts
+++ b/packages/utilities/src/dom-collection.ts
@@ -40,7 +40,7 @@ export class DOMCollection<
     const matched = this.find(fn)
     const filtered = this.filter(fn)
 
-    if (matched && matched.id === currentId && filtered.size > 1) {
+    if (matched && matched.id === currentId && filtered.count > 1) {
       const index = filtered.value.indexOf(matched)
       return this.next(index)
     }
@@ -56,3 +56,10 @@ export class DOMCollection<
       : undefined
   }
 }
+
+export function createDOMCollection<T extends HTMLElement>(
+  root: Document | Element | null,
+  selector: string,
+) {
+  return new DOMCollection<T>(root, selector)
+}
diff --git a/packages/utilities/src/dom-event.ts b/packages/utilities/src/dom-event.ts
index 50c3769b12..883416eafb 100644
--- a/packages/utilities/src/dom-event.ts
+++ b/packages/utilities/src/dom-event.ts
@@ -1,14 +1,52 @@
-import { MaybeArray, toArray } from "./array"
-import { isMouseEvent, isRefObject, isRightClickEvent } from "./assertion"
+import { toArray, MaybeArray } from "./array"
+import { isObject, isRefObject } from "./assertion"
 import { contains, domHelper, isHTMLElement } from "./dom-helper"
 import {
   supportsMouseEvents,
   supportsPointerEvents,
   supportsTouchEvents,
 } from "./env"
-import { cast, runIfFn } from "./function"
+import { runIfFn, cast } from "./function"
 import { AnyPointerEvent, Point, PointType } from "./point"
 
+/* -----------------------------------------------------------------------------
+ * Event assertions
+ * -----------------------------------------------------------------------------*/
+
+export function isInputEvent(
+  event: unknown,
+): event is { target: HTMLInputElement } {
+  return (
+    event != null &&
+    isObject(event) &&
+    "target" in event &&
+    event.target instanceof HTMLInputElement
+  )
+}
+
+export function isRightClickEvent(event: unknown) {
+  return isMouseEvent(event) && event.button !== 0
+}
+
+export function isTouchEvent(event: unknown): event is TouchEvent {
+  return Boolean(event instanceof TouchEvent && event.touches)
+}
+
+export function isMouseEvent(event: unknown): event is MouseEvent {
+  // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check.
+  return isPointerEvent(event)
+    ? event.pointerType === "mouse"
+    : event instanceof MouseEvent
+}
+
+export function isMultiTouchEvent(event: unknown) {
+  return isTouchEvent(event) && event.touches.length > 1
+}
+
+export function isPointerEvent(event: unknown): event is PointerEvent {
+  return typeof PointerEvent !== "undefined" && event instanceof PointerEvent
+}
+
 /* -----------------------------------------------------------------------------
  * Pointer Events
  * -----------------------------------------------------------------------------*/
@@ -62,19 +100,19 @@ export type EventListenerWithPointInfo = (
 export function addDomEvent<K extends keyof WindowEventMap>(
   target: DOMEventTarget,
   type: K,
-  listener: (ev: WindowEventMap[K]) => any,
+  listener: (ev: WindowEventMap[K], info: PointerEventInfo) => void,
   options?: EventListenerOptions,
 ): VoidFunction
 export function addDomEvent<K extends keyof HTMLElementEventMap>(
   target: DOMEventTarget,
   event: K,
-  listener: (ev: HTMLElementEventMap[K]) => any,
+  listener: (ev: HTMLElementEventMap[K], info: PointerEventInfo) => void,
   options?: EventListenerOptions,
 ): VoidFunction
 export function addDomEvent<K extends keyof DocumentEventMap>(
   target: DOMEventTarget,
   event: K,
-  listener: EventListener,
+  listener: EventListenerWithPointInfo,
   options?: EventListenerOptions,
 ) {
   const node = isRefObject(target) ? target.current : runIfFn(target)
diff --git a/packages/utilities/src/dom-helper.ts b/packages/utilities/src/dom-helper.ts
index 3c6e1bf002..df29a80783 100644
--- a/packages/utilities/src/dom-helper.ts
+++ b/packages/utilities/src/dom-helper.ts
@@ -10,7 +10,7 @@ export function isSelectableInput(el: unknown): el is HTMLInputElement {
   return el instanceof HTMLInputElement && "select" in el
 }
 
-export function contains(parent: DOMNode, child: DOMNode) {
+export function contains(parent: DOMNode | undefined, child: DOMNode) {
   if (!parent) return false
   return (
     parent === child ||
@@ -19,7 +19,7 @@ export function contains(parent: DOMNode, child: DOMNode) {
 }
 
 export function isHidden(
-  node: HTMLElement | null,
+  node: HTMLElement | null | undefined,
   { until }: { until?: HTMLElement | null } = {},
 ) {
   if (!node || getComputedStyle(node).visibility === "hidden") return true
@@ -53,25 +53,27 @@ const focusableElements = [
 const FOCUSABLE_ELEMENT_SELECTOR = focusableElements.join()
 
 export class DOMHelper {
-  constructor(public el: HTMLElement) {}
+  constructor(public el: HTMLElement | null | undefined) {}
 
   attr(value: string) {
-    return this.el.getAttribute(value)
+    return this.el?.getAttribute(value)
   }
 
   has(value: string) {
-    return this.el.hasAttribute(value)
+    return this.el?.hasAttribute(value)
   }
 
   $<T extends HTMLElement>(selector: string) {
-    return this.el.querySelector<T>(selector)
+    return this.el?.querySelector<T>(selector)
   }
 
   $$<T extends HTMLElement>(selector: string) {
-    return Array.from(this.el.querySelectorAll<T>(selector))
+    return Array.from(this.el?.querySelectorAll<T>(selector) ?? [])
   }
 
   getFocusables(includeContainer = false) {
+    if (!this.el) return []
+
     let els = this.$$(FOCUSABLE_ELEMENT_SELECTOR)
 
     if (includeContainer) {
@@ -93,14 +95,16 @@ export class DOMHelper {
   }
 
   get hasDisplayNone() {
+    if (!this.el) return false
     return this.win.getComputedStyle(this.el).display === "none"
   }
 
   get hasTabIndex() {
-    return this.el.hasAttribute("tabindex")
+    return this.el?.hasAttribute("tabindex")
   }
 
   get hasNegativeTabIndex() {
+    if (!this.el) return false
     return this.hasTabIndex && this.el.tabIndex < 0
   }
 
@@ -115,14 +119,14 @@ export class DOMHelper {
   }
 
   get isContentEditable() {
-    return this.el.isContentEditable
+    return this.el?.isContentEditable
   }
 
   get isFocusable() {
     if (!isHTMLElement(this.el) || this.isHidden || this.isDisabled) {
       return false
     }
-    return this.el.matches(FOCUSABLE_ELEMENT_SELECTOR)
+    return this.el?.matches(FOCUSABLE_ELEMENT_SELECTOR)
   }
 
   get isTabbable() {
@@ -130,11 +134,11 @@ export class DOMHelper {
   }
 
   get doc() {
-    return this.el.ownerDocument
+    return this.el?.ownerDocument ?? document
   }
 
   get win() {
-    return this.el.ownerDocument.defaultView ?? window
+    return this.el?.ownerDocument.defaultView ?? window
   }
 
   contains(node: DOMNode) {
@@ -146,7 +150,7 @@ export class DOMHelper {
   }
 
   get tagName() {
-    return this.el.tagName.toLowerCase()
+    return this.el?.tagName.toLowerCase()
   }
 }
 
diff --git a/packages/utilities/src/function.ts b/packages/utilities/src/function.ts
index f868361241..0b32ce1ed5 100644
--- a/packages/utilities/src/function.ts
+++ b/packages/utilities/src/function.ts
@@ -17,7 +17,11 @@ export function nextTick(fn: VoidFunction) {
   }
 }
 
-type AnyFunction = (...args: any) => void
+export type AnyFunction = (...args: any[]) => void
+
+export type MaybeFunction<T, Args extends any[] = []> =
+  | T
+  | ((...args: Args) => T)
 
 // invokes a value if it is a function
 export function runIfFn<T>(
@@ -53,3 +57,20 @@ export function warn(...args: any[]): void {
     }
   })
 }
+
+/**
+ * Compose multiple functions, from right-to-left into a single function
+ * ```jsx
+ * import { pipe } from "@chakra-ui/function-utils"
+ *
+ * const getName = (p) => p.name;
+ * const getLength = (str) => str.length;
+ *
+ * const fn = pipe(getName, getLength)
+ * const result = fn({ name: 'Sage' }) // => 4
+ * ```
+ */
+export const pipe =
+  <T>(...fns: Array<(a: T) => T>) =>
+  (v: T) =>
+    fns.reduce((a, b) => b(a), v)
diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts
index 33d544dfea..5634e536c2 100644
--- a/packages/utilities/src/index.ts
+++ b/packages/utilities/src/index.ts
@@ -10,4 +10,3 @@ export * from "./number"
 export * from "./point"
 export * from "./range"
 export * from "./rect"
-export * from "./types"
diff --git a/packages/utilities/src/types.ts b/packages/utilities/src/types.ts
deleted file mode 100644
index c36738389d..0000000000
--- a/packages/utilities/src/types.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export type Dict<T = any> = Record<string, T>
-
-export type Booleanish = boolean | "true" | "false"
-
-export type AnyFunction = (...args: any) => void
-
-export type AnyEventHandler = (event: any) => void
-
-export type MaybeFunction<T, Args extends any[] = []> =
-  | T
-  | ((...args: Args) => T)
-
-export type EventKeys =
-  | "ArrowDown"
-  | "ArrowUp"
-  | "ArrowLeft"
-  | "ArrowRight"
-  | "Enter"
-  | "Space"
-  | "Tab"
-  | "Backspace"
-  | "Control"
-  | "Meta"
-  | "Home"
-  | "End"
-  | "PageDown"
-  | "PageUp"
-  | "Delete"
-  | "Escape"
-  | " "
-  | "Shift"
diff --git a/yarn.lock b/yarn.lock
index 94f4abaef6..da2a295e72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1651,9 +1651,9 @@
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
 "@nodelib/fs.walk@^1.2.3":
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.7.tgz#94c23db18ee4653e129abd26fb06f870ac9e1ee2"
-  integrity sha512-BTIhocbPBSrRmHxOAJFtR18oLhxTtAFDAvL8hY1S3iU8k+E60W/YFs4jrixGzQjMpF4qPXxIQHcjVD9dz1C2QA==
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
   dependencies:
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
@@ -1840,9 +1840,9 @@
     "@babel/types" "^7.0.0"
 
 "@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
-  version "7.14.1"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.1.tgz#46c2f9501a7a8f0596ddfd365e08c15285a47cce"
-  integrity sha512-DomsDK/nX3XXHs6jlQ8/YYE6jZAuhmoGAFfcYi1h1jbBNGS7Efdx74FKLTO3HCCyLqQyLlNbql87xqa7C3M/FQ==
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.2.tgz#ffcd470bbb3f8bf30481678fb5502278ca833a43"
+  integrity sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==
   dependencies:
     "@babel/types" "^7.3.0"
 
@@ -1857,9 +1857,9 @@
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
 "@types/form-serialize@^0.7.1":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@types/form-serialize/-/form-serialize-0.7.1.tgz#f3b2dc5df2d62f0360d0ee430d29902703b06e7e"
-  integrity sha512-8+kF+91ztfvBir0VQX5CtXI7jKJCzCvmIXfexC9wQVRmRVie1cLc4YEHquXrskpbfUk1smm1SwvuFwlZ9iHIyg==
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@types/form-serialize/-/form-serialize-0.7.2.tgz#6995e5541f6e1d4770c6e6bb7b226db6220984b9"
+  integrity sha512-DOHz5r47gNIcA6bsKjMV7G/Bgs3FFTQBFCHw95D0+5bANYIjazCmrOCTnGhtgIKeg0dJGhKlnT0WOkS2HdeqXQ==
 
 "@types/glob@*", "@types/glob@^7.1.1":
   version "7.1.4"
@@ -1932,9 +1932,9 @@
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
 "@types/node@*":
-  version "16.0.1"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.0.1.tgz#70cedfda26af7a2ca073fdcc9beb2fff4aa693f8"
-  integrity sha512-hBOx4SUlEPKwRi6PrXuTGw1z6lz0fjsibcWCM378YxsSu/6+C30L6CR49zIBKHiwNWCYIcOLjg4OHKZaFeLAug==
+  version "16.3.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.3.1.tgz#24691fa2b0c3ec8c0d34bfcfd495edac5593ebb4"
+  integrity sha512-N87VuQi7HEeRJkhzovao/JviiqKjDKMVKxKMfUvSKw+MbkbW8R0nA3fi/MQhhlxV2fQ+2ReM+/Nt4efdrJx3zA==
 
 "@types/node@^12.7.1":
   version "12.20.16"
@@ -2172,9 +2172,9 @@ acorn-globals@^6.0.0:
     acorn-walk "^7.1.1"
 
 acorn-jsx@^5.3.1:
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
-  integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
+  version "5.3.2"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
 acorn-walk@^7.1.1:
   version "7.2.0"
@@ -3418,9 +3418,9 @@ duplexer3@^0.1.4:
   integrity sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=
 
 electron-to-chromium@^1.3.723:
-  version "1.3.770"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.770.tgz#a9e705a73315f4900880622b3ab76cf1d7221b77"
-  integrity sha512-Kyh8DGK1KfEZuYKIHvuOmrKotsKZQ+qBkDIWHciE3QoFkxXB1KzPP+tfLilSHAfxTON0yYMnFCWkQtUOR7g6KQ==
+  version "1.3.772"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.772.tgz#fd1ed39f9f3149f62f581734e4f026e600369479"
+  integrity sha512-X/6VRCXWALzdX+RjCtBU6cyg8WZgoxm9YA02COmDOiNJEZ59WkQggDbWZ4t/giHi/3GS+cvdrP6gbLISANAGYA==
 
 emittery@^0.7.1:
   version "0.7.2"
@@ -3894,9 +3894,9 @@ fast-glob@^2.2.6:
     micromatch "^3.1.10"
 
 fast-glob@^3.0.3, fast-glob@^3.1.1, fast-glob@^3.2.4:
-  version "3.2.6"
-  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.6.tgz#434dd9529845176ea049acc9343e8282765c6e1a"
-  integrity sha512-GnLuqj/pvQ7pX8/L4J84nijv6sAnlwvSDpMkJi9i7nPmPxGtRPkBSStfvDW5l6nMdX9VWe+pkKWFTgD+vF2QSQ==
+  version "3.2.7"
+  resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
+  integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
     "@nodelib/fs.walk" "^1.2.3"
@@ -6635,10 +6635,10 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-proxy-compare@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.0.0.tgz#36f41114a25fcf359037308d12529183a9dc182c"
-  integrity sha512-xhJF1+vPCnu93QYva3Weii5ho1AeX5dsR/P5O7pzy9QLxeOgMSQNC8zDo0bGg9vtn61Pu5Qn+5w/Y8OSU5k+8g==
+proxy-compare@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/proxy-compare/-/proxy-compare-2.0.1.tgz#3ae19cf47f64e89bd60fe4f57afd124f733ef64f"
+  integrity sha512-uXj3TtWdR1S2SNwJKbgJB+1FJm9HM3sFzlVc8W6PZvU6ogt9mlkb1WwZQpuKFLkDS6LKY4+FBE18K6ZArphnHA==
 
 pseudomap@^1.0.2:
   version "1.0.2"
@@ -6980,9 +6980,9 @@ rimraf@^3.0.0, rimraf@^3.0.2:
     glob "^7.1.3"
 
 rollup@^2.32.0:
-  version "2.52.8"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.52.8.tgz#b6462f9c16ffe8995b9a2b313f2e4247fa75e4d9"
-  integrity sha512-IjAB0C6KK5/lvqzJWAzsvOik+jV5Bt907QdkQ/gDP4j+R9KYNI1tjqdxiPitGPVrWC21Mf/ucXgowUjN/VemaQ==
+  version "2.53.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.53.0.tgz#5b6bc7820a03f361d2ae3dcabdc99d269a754709"
+  integrity sha512-spgrY78Toh+m0+zaOoeaayJKuzFuWy6o1PdFIBMVwRcuxT0xCOX9A5rChyKe+2ruL4lePKWUMImS4mMW1QAkmQ==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -7971,11 +7971,11 @@ validate-npm-package-name@^3.0.0:
     builtins "^1.0.3"
 
 valtio@^1.0.5:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.0.6.tgz#b316deea5537d254a141e2e5af1692d9eae2f60f"
-  integrity sha512-ylCis9IkcE7b92XjMb3ebdJgLvJEFJ2NjfuD01QNr98pVOhRa5WsW4LSykFgbO4W7ftrZtO8jN4svZL0XlD77w==
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/valtio/-/valtio-1.0.7.tgz#bbcf1bdf722923d1a3b91452c05936c6ab127b21"
+  integrity sha512-zaaM+QiE6P0pBllFIyDnbjaRILEYsy1YYJf6F1D8dsADKxL2r+Fb3SupM8SHQn2tNx4cbSTu9aarOaoiH+X1dg==
   dependencies:
-    proxy-compare "2.0.0"
+    proxy-compare "2.0.1"
 
 vue@^3.0.5:
   version "3.1.4"
@@ -8134,9 +8134,9 @@ write-file-atomic@^3.0.0:
     typedarray-to-buffer "^3.1.5"
 
 ws@^7.4.5:
-  version "7.5.2"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.2.tgz#09cc8fea3bec1bc5ed44ef51b42f945be36900f6"
-  integrity sha512-lkF7AWRicoB9mAgjeKbGqVUekLnSNO4VjKVnuPHpQeOxZOErX6BPXwJk70nFslRCEEA8EVW7ZjKwXaP9N+1sKQ==
+  version "7.5.3"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74"
+  integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==
 
 xml-name-validator@^3.0.0:
   version "3.0.0"