@heliosgraphics/ui 2.0.0-alpha.95 → 2.0.0-alpha.96

package/components/Separator/components/VerticalSeparator/VerticalSeparator.tsx

@@ -18,3 +18,5 @@ export const VerticalSeparator: FC<VerticalSeparatorProps> = ({ height, classNam
 
 	return <HRMarkup style={verticalStyle} className={hrClassNames} aria-orientation="vertical" />
 }
+
+VerticalSeparator.displayName = "VerticalSeparator"

package/components/Setup/Setup.tsx

@@ -41,6 +41,7 @@ export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 				<link key={`stylesheet-${linkProps.id}`} {...linkProps} />
 			))}
 			<script
+				data-ui-component="Setup"
 				dangerouslySetInnerHTML={{
 					__html: `(${code.toString()})("${theme}", ${fixedThemeArg});`,
 				}}
@@ -48,3 +49,5 @@ export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 		</>
 	)
 }
+
+Setup.displayName = "Setup"

package/components/Shimmer/Shimmer.tsx

@@ -27,3 +27,5 @@ export const Shimmer: FC<ShimmerProps> = ({ isRounded, paddingTop, paddingBottom
 		</div>
 	)
 }
+
+Shimmer.displayName = "Shimmer"

package/components/Slider/Slider.tsx

@@ -14,3 +14,5 @@ export const Slider: FC<SliderProps> = ({ "aria-label": ariaLabel, items }) => {
 		</ul>
 	)
 }
+
+Slider.displayName = "Slider"

package/components/Spacer/Spacer.tsx

@@ -4,3 +4,5 @@ import type { SpacerProps } from "./Spacer.types"
 export const Spacer: FC<SpacerProps> = ({ gap }) => {
 	return <div style={{ height: `${gap ?? 0}px` }} data-ui-component="Spacer" />
 }
+
+Spacer.displayName = "Spacer"

package/components/Table/Table.tsx

@@ -17,3 +17,5 @@ export const Table: FC<TableProps> = ({ children, hasBorder, isMonoHeader }) =>
 		</div>
 	)
 }
+
+Table.displayName = "Table"

package/components/Tabs/Tabs.meta.ts

@@ -2,23 +2,23 @@ import type { HeliosAttributeMeta } from "../../types/meta"
 import type { TabsProps } from "./Tabs.types"
 
 export const meta: HeliosAttributeMeta<TabsProps> = {
+	_extends: [],
 	_patterns: [
 		{
 			id: "ui-tabs-default",
 			description: "default",
-			content: `<Tabs items={TAB_ITEMS} sections={TAB_SECTIONS}/>`,
+			content:
+				'<Tabs items={[{ name: "Tab 1", isActive: true, onClick: () => {} }, { name: "Tab 2", onClick: () => {} }]}>{CHILDREN}</Tabs>',
+		},
+		{
+			id: "ui-tabs-with-href",
+			description: "with links",
+			content:
+				'<Tabs items={[{ name: "Overview", href: "/overview", isActive: true }, { name: "Settings", href: "/settings" }]} />',
 		},
 	],
 	_status: "experimental",
-	_category: "layout",
-	active: {
-		type: "number",
-		isOptional: true,
-	},
-	items: {
-		type: "Array<string>",
-	},
-	sections: {
-		type: "Array<ReactNode>",
-	},
+	_category: "core",
+	children: { type: "ReactNode", isOptional: true },
+	items: { type: "Array<TabItem>", description: "Tab items with name, onClick, href, isActive, and isDisabled" },
 }

package/components/Tabs/Tabs.module.css

@@ -1,27 +1,43 @@
-.tabs__ol {
+.tabs__list {
 	position: relative;
+	display: flex;
+	gap: 2px;
 
-	height: 36px;
+	height: 40px;
 	padding: 0 8px 0 0;
 
 	box-shadow: inset 0 -1px 0 0 var(--ui-border-secondary);
-
-	line-height: 36px;
+	line-height: 40px;
 }
 
-.tabs__ol__item {
+.tabs__item {
+	display: flex;
+	align-items: center;
 	padding: 0 12px;
 
 	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-	border: 1px solid var(--ui-border-secondary);
+	color: var(--ui-text-secondary);
+	text-decoration: none;
 
 	cursor: pointer;
+	user-select: none;
+}
+
+.tabs__item:hover {
+	color: var(--ui-text-primary);
+}
+
+.tabs__itemActive {
+	color: var(--ui-text-primary);
+	box-shadow: inset 0 -2px 0 0 var(--ui-text-primary);
 }
 
-.tabs__ol__itemActive {
-	border-bottom-color: var(--ui-bg-secondary);
+.tabs__itemDisabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+	pointer-events: none;
 }
 
-.tabs__section {
+.tabs__content {
 	padding: 24px 0;
 }

package/components/Tabs/Tabs.tsx

@@ -1,69 +1,65 @@
 "use client"
 
 import { getClasses } from "@heliosgraphics/utils"
-import { useId, useRef, useState, type FC, type KeyboardEvent } from "react"
-import type { TabsProps } from "./Tabs.types"
-import styles from "./Tabs.module.css"
 import { Text } from "../Text"
+import styles from "./Tabs.module.css"
+import type { FC, KeyboardEvent } from "react"
+import type { TabItem, TabsProps } from "./Tabs.types"
 
-export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) => {
-	const [active, setActive] = useState(activeNumber || 0)
-	const tabsId: string = useId()
-	const tabRefs = useRef<(HTMLDivElement | null)[]>([])
-
-	if (!items || !sections) return null
-
-	const tabListClasses: string = getClasses(styles.tabs__ol, "flex gap-2")
-
-	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>, index: number): void => {
-		let nextIndex: number | null = null
+export const Tabs: FC<TabsProps> = ({ items, children }) => {
+	if (!items?.length) return null
 
-		if (event.key === "ArrowRight") {
-			event.preventDefault()
-			nextIndex = (index + 1) % items.length
-		} else if (event.key === "ArrowLeft") {
+	const onKeyDown = (event: KeyboardEvent<HTMLElement>, item: TabItem): void => {
+		if (event.key === " " || event.key === "Enter") {
 			event.preventDefault()
-			nextIndex = (index - 1 + items.length) % items.length
-		}
-
-		if (nextIndex !== null) {
-			setActive(nextIndex)
-			tabRefs.current[nextIndex]?.focus()
+			item.onClick?.()
 		}
 	}
 
 	return (
 		<div data-ui-component="Tabs">
-			<div role="tablist" className={tabListClasses}>
-				{items.map((tab, index) => (
-					<div
-						key={tab}
-						ref={(el) => {
-							tabRefs.current[index] = el
-						}}
-						role="tab"
-						tabIndex={active === index ? 0 : -1}
-						aria-selected={active === index}
-						aria-controls={`${tabsId}-panel-${index}`}
-						id={`${tabsId}-tab-${index}`}
-						onClick={() => setActive(index)}
-						onKeyDown={(event) => handleKeyDown(event, index)}
-						className={getClasses(styles.tabs__ol__item, { [styles.tabs__ol__itemActive]: active === index })}
-					>
-						<Text type="small" fontWeight="medium">
-							{tab}
-						</Text>
-					</div>
-				))}
+			<div role="tablist" className={styles.tabs__list}>
+				{items.map((item: TabItem, index: number) => {
+					const itemClasses: string = getClasses(styles.tabs__item, {
+						[styles.tabs__itemActive]: !!item.isActive,
+						[styles.tabs__itemDisabled]: !!item.isDisabled,
+					})
+
+					const commonProps = {
+						key: index,
+						role: "tab" as const,
+						tabIndex: item.isDisabled ? -1 : 0,
+						"aria-selected": !!item.isActive,
+						"aria-disabled": !!item.isDisabled,
+						className: itemClasses,
+					}
+
+					if (item.href) {
+						return (
+							<a {...commonProps} href={item.href}>
+								<Text type="small" fontWeight="medium">
+									{item.name}
+								</Text>
+							</a>
+						)
+					}
+
+					return (
+						<div
+							{...commonProps}
+							onClick={item.isDisabled ? undefined : item.onClick}
+							onKeyDown={(e) => onKeyDown(e, item)}
+						>
+							<Text type="small" fontWeight="medium">
+								{item.name}
+							</Text>
+						</div>
+					)
+				})}
 			</div>
-			<section
-				role="tabpanel"
-				id={`${tabsId}-panel-${active}`}
-				aria-labelledby={`${tabsId}-tab-${active}`}
-				className="tabs__section"
-			>
-				{sections[active]}
-			</section>
+			{children && <section className={styles.tabs__content}>{children}</section>}
 		</div>
 	)
 }
+
+Tabs.displayName = "Tabs"

package/components/Tabs/Tabs.types.ts

@@ -1,7 +1,14 @@
 import type { ReactNode } from "react"
 
+export interface TabItem {
+	href?: string
+	isActive?: boolean
+	isDisabled?: boolean
+	name: string
+	onClick?: () => void
+}
+
 export interface TabsProps {
-	active?: number
-	items: Array<string>
-	sections: Array<ReactNode>
+	children?: ReactNode
+	items: Array<TabItem>
 }

package/components/Text/Text.tsx

@@ -55,3 +55,5 @@ export const Text: FC<TextProps> = (props) => {
 			return <Div {...baseTextProps} />
 	}
 }
+
+Text.displayName = "Text"

package/components/Text/components/Div/Div.tsx

@@ -5,3 +5,5 @@ import type { FC } from "react"
 export const Div: FC<DivProps> = (props) => {
 	return <div {...props} className={getClasses("p", props.className)} data-ui-component="Text.Div" />
 }
+
+Div.displayName = "Div"

package/components/Text/components/Micro/Micro.tsx

@@ -5,3 +5,5 @@ import type { MicroProps } from "./Micro.types"
 export const Micro: FC<MicroProps> = (props) => {
 	return <small {...props} className={getClasses("micro", props.className)} data-ui-component="Text.Micro" />
 }
+
+Micro.displayName = "Micro"

package/components/Text/components/P/P.tsx

@@ -5,3 +5,5 @@ import type { PProps } from "./P.types"
 export const P: FC<PProps> = (props) => {
 	return <p {...props} className={getClasses("p", props.className)} data-ui-component="Text.P" />
 }
+
+P.displayName = "P"

package/components/Text/components/Small/Small.tsx

@@ -5,3 +5,5 @@ import type { SmallProps } from "./Small.types"
 export const Small: FC<SmallProps> = (props) => {
 	return <small {...props} className={getClasses("small", props.className)} data-ui-component="Text.Small" />
 }
+
+Small.displayName = "Small"

package/components/Text/components/Tiny/Tiny.tsx

@@ -5,3 +5,5 @@ import type { TinyProps } from "./Tiny.types"
 export const Tiny: FC<TinyProps> = (props) => {
 	return <small {...props} className={getClasses("tiny", props.className)} data-ui-component="Text.Tiny" />
 }
+
+Tiny.displayName = "Tiny"

package/components/Textarea/Textarea.tsx

@@ -2,16 +2,17 @@
 
 import { getClasses } from "@heliosgraphics/utils"
 import { Text } from "../Text"
-import { useId, useRef, useEffect } from "react"
+import { useId, useRef, useEffect, useImperativeHandle, forwardRef } from "react"
 import { InputLabel } from "../shared/InputLabel"
 import styles from "./Textarea.module.css"
-import type { FC } from "react"
 import type { TextareaProps } from "./Textarea.types"
 
-export const Textarea: FC<TextareaProps> = (props) => {
-	const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
+	const internalRef = useRef<HTMLTextAreaElement | null>(null)
 	const { autoComplete: _autoComplete, helperText: _helperText, isDisabled, isLabelHidden, ...goodProps } = props
 
+	useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement)
+
 	const htmlFor: string = useId()
 	const helperId: string = `${htmlFor}-helper`
 	const textareaClasses: string = getClasses(styles.textarea, "flex flex-column", {
@@ -19,16 +20,14 @@ export const Textarea: FC<TextareaProps> = (props) => {
 	})
 
 	const onInput = (): void => {
-		if (textareaRef?.current) {
-			textareaRef.current.style.height = "auto"
-			textareaRef.current.style.height = textareaRef.current.scrollHeight + "px"
-		}
+		if (!internalRef.current) return
+
+		internalRef.current.style.height = "auto"
+		internalRef.current.style.height = internalRef.current.scrollHeight + "px"
 	}
 
 	useEffect(() => {
-		if (textareaRef?.current) {
-			onInput()
-		}
+		onInput()
 
 		const timer: ReturnType<typeof setTimeout> = setTimeout(() => onInput(), 100)
 
@@ -49,7 +48,7 @@ export const Textarea: FC<TextareaProps> = (props) => {
 			)}
 			<textarea
 				{...goodProps}
-				ref={textareaRef}
+				ref={internalRef}
 				id={htmlFor}
 				rows={goodProps.rows ?? 4}
 				onInput={onInput}
@@ -64,4 +63,6 @@ export const Textarea: FC<TextareaProps> = (props) => {
 			)}
 		</div>
 	)
-}
+})
+
+Textarea.displayName = "Textarea"

package/components/Tile/Tile.tsx

@@ -66,3 +66,5 @@ export const Tile: FC<TileProps> = ({
 		</Flex>
 	)
 }
+
+Tile.displayName = "Tile"

package/components/Timestamp/Timestamp.tsx

@@ -17,3 +17,5 @@ export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format }) =
 		</time>
 	)
 }
+
+Timestamp.displayName = "Timestamp"

package/components/Toggle/Toggle.tsx

@@ -58,3 +58,5 @@ export const Toggle: FC<ToggleProps> = ({
 		</div>
 	)
 }
+
+Toggle.displayName = "Toggle"

package/components/Tooltip/Tooltip.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useRef, useEffect, useMemo, useState, useId, type FC } from "react"
+import { useRef, useEffect, useMemo, useId, type FC } from "react"
 import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Tooltip.module.css"
 import type { TooltipProps, TooltipComposition, TooltipContextType } from "./Tooltip.types"
@@ -20,7 +20,6 @@ const POSITION_CLASS_MAP = {
 } as const satisfies Record<NonNullable<TooltipProps["position"]>, string | undefined>
 
 const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "bottom-center", isVisible = false }) => {
-	const [isOpen, setIsOpen] = useState<boolean>(isVisible)
 	const triggerRef = useRef<HTMLDivElement | null>(null)
 	const popoverRef = useRef<HTMLDivElement | null>(null)
 	const id: string = useId()
@@ -45,27 +44,35 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			return
 		}
 
+		const setAriaDescribedBy = (isOpen: boolean): void => {
+			if (isOpen) {
+				trigger.setAttribute("aria-describedby", tooltipId)
+			} else {
+				trigger.removeAttribute("aria-describedby")
+			}
+		}
+
 		if (isVisible) {
 			popover.showPopover()
-			setIsOpen(true)
+			setAriaDescribedBy(true)
 		}
 
 		const handleMouseEnter = (): void => {
 			popover.showPopover()
-			setIsOpen(true)
+			setAriaDescribedBy(true)
 		}
 
 		const handleMouseLeave = (): void => {
 			if (!isVisible) {
 				popover.hidePopover()
-				setIsOpen(false)
+				setAriaDescribedBy(false)
 			}
 		}
 
 		const handleKeyDown = (event: KeyboardEvent): void => {
 			if (event.key === "Escape") {
 				popover.hidePopover()
-				setIsOpen(false)
+				setAriaDescribedBy(false)
 			}
 		}
 
@@ -78,7 +85,7 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			trigger.removeEventListener("mouseleave", handleMouseLeave)
 			trigger.removeEventListener("keydown", handleKeyDown)
 		}
-	}, [isVisible])
+	}, [isVisible, tooltipId])
 
 	const contextValue: TooltipContextType = useMemo(
 		() => ({
@@ -87,9 +94,8 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			tooltipClasses,
 			anchorName,
 			tooltipId,
-			isOpen,
 		}),
-		[tooltipClasses, anchorName, tooltipId, isOpen],
+		[tooltipClasses, anchorName, tooltipId],
 	)
 
 	return (
@@ -105,3 +111,5 @@ export const Tooltip: FC<TooltipProps> & TooltipComposition = Object.assign(Tool
 	Trigger: TooltipTrigger,
 	Content: TooltipContent,
 })
+
+Tooltip.displayName = "Tooltip"

package/components/Tooltip/Tooltip.types.ts

@@ -23,7 +23,6 @@ export interface TooltipContextType {
 	tooltipClasses: string
 	anchorName: string
 	tooltipId: string
-	isOpen: boolean
 }
 
 export interface TooltipComposition {

package/components/Tooltip/components/TooltipContent/TooltipContent.tsx

@@ -23,3 +23,5 @@ export const TooltipContent: FC<TooltipContentProps> = ({ children }) => {
 		</div>
 	)
 }
+
+TooltipContent.displayName = "TooltipContent"

package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.tsx

@@ -5,13 +5,15 @@ import { useTooltipContext } from "../../Tooltip.utils"
 import type { CSSProperties, FC } from "react"
 
 export const TooltipTrigger: FC<TooltipTriggerProps> = ({ children }) => {
-	const { triggerRef, anchorName, tooltipId, isOpen } = useTooltipContext()
+	const { triggerRef, anchorName } = useTooltipContext()
 
 	const triggerStyle: CSSProperties = { anchorName } as CSSProperties
 
 	return (
-		<div ref={triggerRef} style={triggerStyle} aria-describedby={isOpen ? tooltipId : undefined}>
+		<div ref={triggerRef} style={triggerStyle}>
 			{children}
 		</div>
 	)
 }
+
+TooltipTrigger.displayName = "TooltipTrigger"

package/components/shared/InputLabel/InputLabel.tsx

@@ -16,3 +16,5 @@ export const InputLabel: FC<InputLabelProps> = ({ id, label, isDisabled, isHidde
 		</label>
 	)
 }
+
+InputLabel.displayName = "InputLabel"

package/components/shared/ResultList/ResultList.tsx

@@ -4,7 +4,7 @@ import { Flex } from "../../Flex"
 import { Icon } from "../../Icon"
 import { Text } from "../../Text"
 import styles from "./ResultList.module.css"
-import type { ChangeEvent, FC } from "react"
+import type { ChangeEventHandler, FC } from "react"
 import type { ResultListProps } from "./ResultList.types"
 
 export const ResultList: FC<ResultListProps> = ({ items, isHidden, ref }) => {
@@ -24,9 +24,9 @@ export const ResultList: FC<ResultListProps> = ({ items, isHidden, ref }) => {
 				if (item.type === "separator") return <li key={itemKey} className={styles.resultList__separator} />
 
 				if (item.type === "checkbox") {
-					const onCheck = (event: ChangeEvent<HTMLInputElement>): void =>
-						// eslint-disable-next-line @typescript-eslint/no-explicit-any
-						item.onClick?.(event as any)
+					const onCheck: ChangeEventHandler<HTMLInputElement> = (): void => {
+						item.onClick?.({} as React.MouseEvent)
+					}
 
 					return (
 						<li key={itemKey} onClick={item.onClick} className={itemClasses}>
@@ -63,3 +63,5 @@ export const ResultList: FC<ResultListProps> = ({ items, isHidden, ref }) => {
 		</ol>
 	)
 }
+
+ResultList.displayName = "ResultList"

package/contexts/LayoutContext/LayoutContext.tsx

@@ -15,44 +15,37 @@ type LayoutProviderProps = PropsWithChildren<LayoutProviderBaseProps>
 
 const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 }) => {
 	const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false)
-	const [windowWidth, setWindowWidth] = useState<number>(0)
+	const [isWideEnough, setIsWideEnough] = useState<boolean>(false)
 	const [hasMounted, setHasMounted] = useState<boolean>(false)
 	const asideRef = useRef<HTMLElement | null>(null)
 	const isMenuVisibleRef = useRef<boolean>(false)
-	const windowWidthRef = useRef<number>(0)
-	const resizeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
 	useEffect(() => {
 		isMenuVisibleRef.current = isMenuVisible
 	}, [isMenuVisible])
 
 	useEffect(() => {
-		const initialWidth = globalThis.innerWidth
-
 		setHasMounted(true)
-		setWindowWidth(initialWidth)
-		windowWidthRef.current = initialWidth
-
-		const initialMenuVisible = initialWidth >= breakpoint
 
-		setIsMenuVisible(initialMenuVisible)
-		isMenuVisibleRef.current = initialMenuVisible
+		const mql = globalThis.matchMedia(`(min-width: ${breakpoint}px)`)
 
-		const handleResize = (): void => {
-			const newWidth: number = globalThis.innerWidth
-			const wasWideEnough: boolean = windowWidthRef.current >= breakpoint
-			const isNowWideEnough: boolean = newWidth >= breakpoint
+		const handleChange = (event: MediaQueryListEvent | MediaQueryList): void => {
+			const matches = event.matches
 
-			setWindowWidth(newWidth)
-			windowWidthRef.current = newWidth
+			setIsWideEnough(matches)
 
-			if (isNowWideEnough && !wasWideEnough) {
+			if (matches) {
 				setIsMenuVisible(true)
-			} else if (!isNowWideEnough && wasWideEnough) {
+			} else {
 				setIsMenuVisible(false)
 			}
 		}
 
+		// Set initial state
+		handleChange(mql)
+
+		mql.addEventListener("change", handleChange)
+
 		const handleClickOutside = (event: MouseEvent): void => {
 			if (asideRef?.current?.contains(event.target as Node)) return
 
@@ -60,7 +53,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			const shouldIgnore: Element | null = clickedElement?.closest(`[${IGNORE_DATA_ATTRIBUTE}]`)
 
 			if (!shouldIgnore) {
-				const currentIsWideEnough: boolean = globalThis.innerWidth >= breakpoint
+				const currentIsWideEnough: boolean = mql.matches
 
 				if (!currentIsWideEnough && isMenuVisibleRef.current) {
 					setIsMenuVisible(false)
@@ -68,25 +61,14 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			}
 		}
 
-		const throttledResize = (): void => {
-			if (resizeTimerRef.current) return
-			resizeTimerRef.current = setTimeout(() => {
-				handleResize()
-				resizeTimerRef.current = null
-			}, 150)
-		}
-
-		globalThis.addEventListener("resize", throttledResize)
 		globalThis.document.addEventListener("mousedown", handleClickOutside)
 
 		return (): void => {
-			if (resizeTimerRef.current) globalThis.clearTimeout(resizeTimerRef.current)
-			globalThis.removeEventListener("resize", throttledResize)
+			mql.removeEventListener("change", handleChange)
 			globalThis.document.removeEventListener("mousedown", handleClickOutside)
 		}
 	}, [breakpoint])
 
-	const isWideEnough: boolean = hasMounted ? windowWidth >= breakpoint : false
 	const shouldShowNavigation: boolean = isWideEnough || isMenuVisible
 
 	const onNavigationToggle = useCallback((): void => setIsMenuVisible((prev) => !prev), [])
@@ -101,9 +83,8 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			onAsideClose,
 			onNavigationToggle,
 			shouldShowNavigation,
-			windowWidth,
 		}),
-		[hasMounted, isMenuVisible, isWideEnough, shouldShowNavigation, onAsideClose, onNavigationToggle, windowWidth],
+		[hasMounted, isMenuVisible, isWideEnough, shouldShowNavigation, onAsideClose, onNavigationToggle],
 	)
 
 	return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>

package/contexts/LayoutContext/LayoutContext.types.ts

@@ -8,5 +8,4 @@ export interface LayoutContextProps {
 	onAsideClose: () => void
 	onNavigationToggle: () => void
 	shouldShowNavigation: boolean
-	windowWidth: number
 }