		@@ -8,3 +8,3 @@ import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
		mount: (element: HTMLElement \| null, selected?: boolean) => () => void
		onClickOutside?: (event: MouseEvent) => void
		onClickOutside?: (event: MouseEvent \| TouchEvent) => void
		onEscape?: () => void
		@@ -11,0 +11,0 @@ onItemClick?: () => void

src/core/components/menu/useMenuController.ts

		@@ -1,2 +0,2 @@
		import {useCallback, useEffect, useRef, useState} from 'react'
		import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
		import {_getFocusableElements, _sortElements} from './helpers'
		@@ -14,4 +14,2 @@
		mount: (element: HTMLElement \| null, selected?: boolean) => () => void
		rootElement: HTMLDivElement \| null
		setRootElement: (el: HTMLDivElement \| null) => void
		}
		@@ -28,10 +26,10 @@
		shouldFocus: 'first' \| 'last' \| null
		rootElementRef: React.MutableRefObject<HTMLDivElement \| null>
		}): MenuController {
		const {onKeyDown, originElement, shouldFocus} = props
		const {onKeyDown, originElement, shouldFocus, rootElementRef} = props
		const elementsRef = useRef<HTMLElement[]>([])
		const [rootElement, setRootElement] = useState<HTMLDivElement \| null>(null)
		const [activeIndex, _setActiveIndex] = useState(-1)
		const activeIndexRef = useRef(activeIndex)
		const activeElement = elementsRef.current[activeIndex] \|\| null
		const mounted = Boolean(rootElement)
		const activeElement = useMemo(() => elementsRef.current[activeIndex] \|\| null, [activeIndex])
		const mounted = Boolean(rootElementRef.current)

		@@ -49,3 +47,3 @@ const setActiveIndex = useCallback((nextActiveIndex: number) => {
		elementsRef.current.push(element)
		_sortElements(rootElement, elementsRef.current)
		_sortElements(rootElementRef.current, elementsRef.current)
		}
		@@ -67,3 +65,3 @@
		},
		[rootElement, setActiveIndex],
		[rootElementRef, setActiveIndex],
		)
		@@ -186,4 +184,4 @@
		setActiveIndex(-2)
		rootElement?.focus()
		}, [setActiveIndex, rootElement])
		rootElementRef.current?.focus()
		}, [rootElementRef, setActiveIndex])

		@@ -195,5 +193,3 @@ // Set focus on the currently active element
		const rafId = window.requestAnimationFrame(() => {
		const _activeIndex = activeIndexRef.current

		if (_activeIndex === -1) {
		if (activeIndex === -1) {
		if (shouldFocus === 'first') {
		@@ -226,3 +222,3 @@ const focusableElements = _getFocusableElements(elementsRef.current)

		const element = elementsRef.current[_activeIndex] \|\| null
		const element = elementsRef.current[activeIndex] \|\| null

		@@ -244,5 +240,3 @@ element?.focus()
		mount,
		rootElement,
		setRootElement,
		}
		}

src/core/components/toast/styles.ts

		@@ -17,3 +17,3 @@ import {styled, keyframes, css} from 'styled-components'
		width: 100%;
		}
		}
		`
		@@ -23,2 +23,3 @@

		// @TODO get rid of $duration modifier, set data attribute instead and use stable selector
		export function rootStyles(
		@@ -25,0 +26,0 @@ props: {$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps,

src/core/components/toast/useToast.ts

		@@ -16,2 +16,3 @@ import {useContext} from 'react'

		// @TODO context and hooks doesn't really work like this, there will never be a mismatch between the provider and the consumer, we can remove these version specifiers
		// NOTE: This check is for future-compatiblity
		@@ -18,0 +19,0 @@ // - If the value is not an object, it’s not compatible with the current version

src/core/helpers/focus.ts

		@@ -18,2 +18,3 @@ import {
		export function _hasFocus(element: HTMLElement): boolean {
		// @TODO verify this is not called during render
		return Boolean(document.activeElement) && element.contains(document.activeElement)
		@@ -20,0 +21,0 @@ }

src/core/helpers/scroll.ts

		@@ -7,2 +7,3 @@ /**

		// @TODO check if this is called during render
		const style = window.getComputedStyle(el)
		@@ -9,0 +10,0 @@

src/core/hooks/index.ts

		export * from './useArrayProp'
		export * from './useClickOutside'
		export * from './useCustomValidity'
		export * from './useElementRect'
		export * from './useElementSize'
		export * from './useForwardedRef'
		export * from './useGlobalKeyDown'
		export * from './useMatchMedia'
		export * from './useMediaIndex'
		export * from './usePrefersDark'
		export * from './usePrefersReducedMotion'
		export * from './useForwardedRef'
		export * from './useCustomValidity'

108

src/core/hooks/useClickOutside.ts

		@@ -1,2 +0,3 @@
		import {useEffect, useRef, useState} from 'react'
		import {useEffect} from 'react'
		import {useEffectEvent} from 'use-effect-event'
		import {EMPTY_ARRAY} from '../constants'
		@@ -7,22 +8,12 @@
		*/
		export type ClickOutsideListener = (event: MouseEvent) => void
		export type ClickOutsideListener = (event: MouseEvent \| TouchEvent) => void

		function _getElements(
		element: HTMLElement \| null,
		elementsArg: Array<HTMLElement \| HTMLElement[] \| null>,
		): HTMLElement[] {
		const ret = [element]

		for (const el of elementsArg) {
		if (Array.isArray(el)) {
		ret.push(...el)
		} else {
		ret.push(el)
		}
		}

		return ret.filter(Boolean) as HTMLElement[]
		}

		/**
		* Use the callback version of `elementsArg` if you're using `useRef` to handle elements:
		* ```tsx
		* useClickOutside(
		* () => {},
		* () => [ref.current],
		* )
		*
		* @public
		@@ -32,25 +23,29 @@ */
		listener: ClickOutsideListener,
		elementsArg: Array<HTMLElement \| HTMLElement[] \| null> = EMPTY_ARRAY,
		elementsArg:
		\| Array<HTMLElement \| HTMLElement[] \| null>
		\| (() => Array<HTMLElement \| HTMLElement[] \| null>) = EMPTY_ARRAY,
		boundaryElement?: HTMLElement \| null,
		): (el: HTMLElement \| null) => void {
		const [element, setElement] = useState<HTMLElement \| null>(null)
		const [elements, setElements] = useState(() => _getElements(element, elementsArg))
		const elementsRef = useRef(elements)
		): void {
		/**
		* The `useEffectEvent` hook allow us to always see the latest value of `listener`, `elementsArg` and `boundaryElement` without needing to
		* juggle `useState`, `useRef` and `useState` to make sure the `mousedown` event listener isn't constantly being added and removed.
		*/
		const eventHandler = useEffectEvent((evt: MouseEvent \| TouchEvent) => {
		const target = evt.target

		useEffect(() => {
		const prevElements = elementsRef.current
		const nextElements = _getElements(element, elementsArg)
		if (!(target instanceof Node)) {
		return
		}

		if (prevElements.length !== nextElements.length) {
		setElements(nextElements)
		elementsRef.current = nextElements

		if (boundaryElement && !boundaryElement.contains(target)) {
		return
		}

		for (const el of prevElements) {
		if (!nextElements.includes(el)) {
		setElements(nextElements)
		elementsRef.current = nextElements
		const resolvedElements = Array.isArray(elementsArg) ? elementsArg : elementsArg()
		const elements = resolvedElements.flat()

		for (const el of elements) {
		if (!el) continue

		if (target === el \|\| el.contains(target)) {
		return
		@@ -60,43 +55,14 @@ }

		for (const el of nextElements) {
		if (!prevElements.includes(el)) {
		setElements(nextElements)
		elementsRef.current = nextElements
		listener(evt)
		})

		return
		}
		}
		}, [element, elementsArg])

		useEffect(() => {
		if (!listener) return undefined
		document.addEventListener('mousedown', eventHandler)
		document.addEventListener('touchstart', eventHandler)

		const handleWindowMouseDown = (evt: MouseEvent) => {
		const target = evt.target

		if (!(target instanceof Node)) {
		return
		}

		if (boundaryElement && !boundaryElement.contains(target)) {
		return
		}

		for (const el of elements) {
		if (target === el \|\| el.contains(target)) {
		return
		}
		}

		listener(evt)
		}

		window.addEventListener('mousedown', handleWindowMouseDown)

		return () => {
		window.removeEventListener('mousedown', handleWindowMouseDown)
		document.removeEventListener('mousedown', eventHandler)
		document.removeEventListener('touchstart', eventHandler)
		}
		}, [boundaryElement, listener, elements])

		return setElement
		}, [eventHandler])
		}

src/core/hooks/useElementSize.ts

		@@ -9,2 +9,3 @@ import {useEffect, useState} from 'react'
		export function useElementSize(element: HTMLElement \| null): ElementSize \| null {
		// @TODO we can probably use something in framer-motion or @floating-ui instead of rolling our own
		const [size, setSize] = useState<ElementSize \| null>(null)
		@@ -11,0 +12,0 @@

src/core/hooks/useMediaIndex/useMediaIndex.ts

		@@ -1,2 +0,2 @@
		import {useSyncExternalStore} from 'react'
		import {useMemo, useSyncExternalStore} from 'react'
		import {useTheme_v2} from '../../theme'
		@@ -12,4 +12,2 @@

		const MEDIA_STORE_CACHE = new WeakMap<number[], _MediaStore>()

		type MediaQueryMinWidth = `(min-width: ${number}px)`
		@@ -101,11 +99,5 @@ type MediaQueryMaxWidth = `(max-width: ${number}px)`
		const {media} = useTheme_v2()
		const store = useMemo(() => _createMediaStore(media), [media])

		let store = MEDIA_STORE_CACHE.get(media)

		if (!store) {
		store = _createMediaStore(media)
		MEDIA_STORE_CACHE.set(media, store)
		}

		return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
		}

src/core/hooks/usePrefersDark.ts

		@@ -1,61 +0,16 @@
		import {useSyncExternalStore} from 'react'
		import {useMatchMedia} from './useMatchMedia'

		let MEDIA_QUERY_CACHE: MediaQueryList \| undefined

		/**
		* Lazy init the matchMedia instance
		*/
		function getMatchMedia(): MediaQueryList {
		if (!MEDIA_QUERY_CACHE) {
		// As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
		// the `window` global is available and we're in a browser environment
		MEDIA_QUERY_CACHE = window.matchMedia('(prefers-color-scheme: dark)')
		}

		return MEDIA_QUERY_CACHE
		}

		/**
		* As the query is the same for all instances of this hook, we can cache the matchMedia instance
		* and have cheap `change` event listeners, while getSnapshot always reads from the same
		* matchMedia instance and we don't get any tearing.
		* Tearing in this context means the bad edge case in React concurrent render mdoe
		* where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
		* during the same render.
		* By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
		* what React.memo boundaries there might be between the layers..
		*/
		function subscribe(onStoreChange: () => void): () => void {
		const matchMedia = getMatchMedia()

		matchMedia.addEventListener('change', onStoreChange)

		return () => matchMedia.removeEventListener('change', onStoreChange)
		}

		/**
		* Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
		* It's important that this function does not create new objects or arrays when called:
		* https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
		*/
		function getSnapshot() {
		return getMatchMedia().matches
		}

		/**
		* Only called during server-side rendering, and hydration if using hydrateRoot
		* Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
		* and we assume `(prefers-color-scheme: light)` since it's the most common scheme
		* Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
		*
		* @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
		*/
		function getServerSnapshot() {
		return false
		}

		/**
		* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
		*
		* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
		* Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
		* @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
		*
		* @public
		*/
		export function usePrefersDark(): boolean {
		return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
		export function usePrefersDark(getServerSnapshot = () => false): boolean {
		return useMatchMedia('(prefers-color-scheme: dark)', getServerSnapshot)
		}

src/core/hooks/usePrefersReducedMotion.ts

		@@ -1,62 +0,16 @@
		import {useSyncExternalStore} from 'react'
		import {useMatchMedia} from './useMatchMedia'

		let MEDIA_QUERY_CACHE: MediaQueryList \| undefined

		/**
		* Lazy init the matchMedia instance
		*/
		function getMatchMedia(): MediaQueryList {
		if (!MEDIA_QUERY_CACHE) {
		// As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
		// the `window` global is available and we're in a browser environment
		MEDIA_QUERY_CACHE = window.matchMedia('(prefers-reduced-motion: reduce)')
		}

		return MEDIA_QUERY_CACHE
		}

		/**
		* As the query is the same for all instances of this hook, we can cache the matchMedia instance
		* and have cheap `change` event listeners, while getSnapshot always reads from the same
		* matchMedia instance and we don't get any tearing.
		* Tearing in this context means the bad edge case in React concurrent render mdoe
		* where you sometimes would end up with some components doing render while seeing `usePrefersDark() === true` while others would see `usePrefersDark() === false`
		* during the same render.
		* By using `useSyncExternalStore` every component only sees the same value during the same render, and always re-render when it changes no matter
		* what React.memo boundaries there might be between the layers..
		*/
		function subscribe(onStoreChange: () => void): () => void {
		const matchMedia = getMatchMedia()

		matchMedia.addEventListener('change', onStoreChange)

		return () => matchMedia.removeEventListener('change', onStoreChange)
		}

		/**
		* Only called client-side, when using createRoot, or after hydration is complete when using hydrateRoot.
		* It's important that this function does not create new objects or arrays when called:
		* https://beta.reactjs.org/apis/react/useSyncExternalStore#im-getting-an-error-the-result-of-getsnapshot-should-be-cached
		*/
		function getSnapshot() {
		return getMatchMedia().matches
		}

		/**
		* Only called during server-side rendering, and hydration if using hydrateRoot
		* Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query
		* and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme
		* Returns true if motion should be reduced
		*
		* @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
		*/
		function getServerSnapshot() {
		return false
		}

		/**
		* Returns true if motion should be reduced
		* @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
		*
		* If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
		* Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
		* @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
		*
		* @public
		*/
		export function usePrefersReducedMotion(): boolean {
		return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
		export function usePrefersReducedMotion(getServerSnapshot = () => false): boolean {
		return useMatchMedia('(prefers-reduced-motion: reduce)', getServerSnapshot)
		}

src/core/hooks/_internal/index.ts

src/core/hooks/_internal/useUnique.ts

dist/index.d.mts