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

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

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { MicroProps } from "./Micro.types"
 
 export const Micro: FC<MicroProps> = (props) => {
-	return <small {...props} className={`micro ${props.className}`} data-ui-component="Text.Micro" />
+	return <small {...props} className={getClasses("micro", props.className)} data-ui-component="Text.Micro" />
 }
+
+Micro.displayName = "Micro"

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

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { PProps } from "./P.types"
 
 export const P: FC<PProps> = (props) => {
-	return <p {...props} className={`p ${props.className}`} data-ui-component="Text.P" />
+	return <p {...props} className={getClasses("p", props.className)} data-ui-component="Text.P" />
 }
+
+P.displayName = "P"

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

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { SmallProps } from "./Small.types"
 
 export const Small: FC<SmallProps> = (props) => {
-	return <small {...props} className={`small ${props.className}`} data-ui-component="Text.Small" />
+	return <small {...props} className={getClasses("small", props.className)} data-ui-component="Text.Small" />
 }
+
+Small.displayName = "Small"

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

@@ -1,6 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
 import type { FC } from "react"
 import type { TinyProps } from "./Tiny.types"
 
 export const Tiny: FC<TinyProps> = (props) => {
-	return <small {...props} className={`tiny ${props.className}`} data-ui-component="Text.Tiny" />
+	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.module.css

@@ -19,6 +19,19 @@
 	border-radius: var(--radius-sm);
 
 	position-area: bottom center;
+
+	opacity: 1;
+	transition:
+		opacity 150ms ease-out,
+		display 150ms ease-out allow-discrete;
+
+	@starting-style {
+		opacity: 0;
+	}
+
+	&:not(:popover-open) {
+		opacity: 0;
+	}
 }
 
 .tooltipBottomLeft {

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"
@@ -8,7 +8,7 @@ import { TooltipTrigger } from "./components/TooltipTrigger"
 import { TooltipContent } from "./components/TooltipContent"
 import { TooltipContext } from "./Tooltip.utils"
 
-const POSITION_CLASS_MAP: Record<NonNullable<TooltipProps["position"]>, string | undefined> = {
+const POSITION_CLASS_MAP = {
 	"bottom-center": undefined,
 	"bottom-left": styles.tooltipBottomLeft,
 	"bottom-right": styles.tooltipBottomRight,
@@ -17,10 +17,9 @@ const POSITION_CLASS_MAP: Record<NonNullable<TooltipProps["position"]>, string |
 	"top-right": styles.tooltipTopRight,
 	"left-center": styles.tooltipLeftCenter,
 	"right-center": styles.tooltipRightCenter,
-}
+} 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

@@ -1,3 +1,5 @@
+"use client"
+
 import { Text } from "../../../Text"
 import { useTooltipContext } from "../../Tooltip.utils"
 import type { CSSProperties, FC } from "react"
@@ -21,3 +23,5 @@ export const TooltipContent: FC<TooltipContentProps> = ({ children }) => {
 		</div>
 	)
 }
+
+TooltipContent.displayName = "TooltipContent"

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

@@ -1,15 +1,19 @@
+"use client"
+
 import type { TooltipTriggerProps } from "./TooltipTrigger.types"
 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,10 +4,10 @@ import { Flex } from "../../Flex"
 import { Icon } from "../../Icon"
 import { Text } from "../../Text"
 import styles from "./ResultList.module.css"
-import type { ChangeEvent } from "react"
+import type { ChangeEventHandler, FC } from "react"
 import type { ResultListProps } from "./ResultList.types"
 
-export const ResultList = ({ items, isHidden, ref }: ResultListProps) => {
+export const ResultList: FC<ResultListProps> = ({ items, isHidden, ref }) => {
 	if (!items?.length || isHidden) return null
 
 	const resultListClasses: string = getClasses(styles.resultList, "elevation-lg")
@@ -24,9 +24,9 @@ export const ResultList = ({ items, isHidden, ref }: ResultListProps) => {
 				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 = ({ items, isHidden, ref }: ResultListProps) => {
 		</ol>
 	)
 }
+
+ResultList.displayName = "ResultList"

package/constants/components.ts

@@ -49,7 +49,7 @@ import { meta as metaTimestamp } from "../components/Timestamp/Timestamp.meta"
 import { meta as metaToggle } from "../components/Toggle/Toggle.meta"
 import { meta as metaTooltip } from "../components/Tooltip/Tooltip.meta"
 
-export const COMPONENTS: Record<string, HeliosAttributeMeta<unknown>> = {
+export const COMPONENTS = {
 	Alert: metaAlert,
 	Breadcrumb: metaBreadcrumb,
 	Browser: metaBrowser,
@@ -98,4 +98,4 @@ export const COMPONENTS: Record<string, HeliosAttributeMeta<unknown>> = {
 	Timestamp: metaTimestamp,
 	Toggle: metaToggle,
 	Tooltip: metaTooltip,
-}
+} as const satisfies Record<string, HeliosAttributeMeta<unknown>>

package/constants/meta.ts

@@ -3,34 +3,34 @@ import type { HeliosComponentStatusType, HeliosComponentCategoryType } from "../
 import type { HeliosColorType } from "../types/colors"
 import type { HeliosIconType } from "../types/icons"
 
-export const STATUS_COLORS: Record<HeliosComponentStatusType, HeliosColorType> = {
+export const STATUS_COLORS = {
 	experimental: "pink",
 	nominal: "gray",
 	stable: "green",
 	internal: "gray",
-}
+} as const satisfies Record<HeliosComponentStatusType, HeliosColorType>
 
-export const STATUS_ICONS: Record<HeliosComponentStatusType, HeliosIconType> = {
+export const STATUS_ICONS = {
 	experimental: "bolt",
 	nominal: "bolt",
 	stable: "check",
 	internal: "bullseye",
-}
+} as const satisfies Record<HeliosComponentStatusType, HeliosIconType>
 
-export const STATUS_NAMES: Record<HeliosComponentStatusType, string> = {
+export const STATUS_NAMES = {
 	experimental: "Experimental",
 	nominal: "Might Change",
 	stable: "Stable",
 	internal: "Internal",
-}
+} as const satisfies Record<HeliosComponentStatusType, string>
 
-export const TYPE_NAMES: Record<HeliosComponentCategoryType, string> = {
+export const TYPE_NAMES = {
 	content: "Content",
 	pattern: "Pattern",
 	core: "Core",
 	layout: "Layout",
 	meta: "Meta",
-}
+} as const satisfies Record<HeliosComponentCategoryType, string>
 
 interface StatusReturnType {
 	color: HeliosColorType
@@ -40,7 +40,7 @@ interface StatusReturnType {
 }
 
 export const getStatus = (component: string = "Example"): StatusReturnType => {
-	const componentMeta = COMPONENTS[component]
+	const componentMeta = COMPONENTS[component as keyof typeof COMPONENTS]
 
 	if (!componentMeta || !componentMeta._status) {
 		throw new Error(`Component "${component}" not found or missing _status`)

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
 }

package/hooks/useLayoutContext.tsx

@@ -12,7 +12,6 @@ const DEFAULT_LAYOUT_CONTEXT: LayoutContextProps = {
 	onAsideClose: () => {},
 	onNavigationToggle: () => {},
 	shouldShowNavigation: true,
-	windowWidth: 0,
 }
 
 export const useLayoutContext = (): LayoutContextProps => {

package/index.ts

@@ -65,10 +65,15 @@ export type { ResultItem } from "./components/shared/ResultList"
 export type { SelectItem } from "./components/Select"
 export type { TextBaseProps, TextProps } from "./components/Text"
 
+export { useChatScroll } from "./hooks/useChatScroll"
+export { useDebounce } from "./hooks/useDebounce"
 export { useIntersection } from "./hooks/useIntersection"
+export { useInterval } from "./hooks/useInterval"
+export { useKeyPress } from "./hooks/useKeyPress"
 export { useLayoutContext } from "./hooks/useLayoutContext"
 export { usePrevious } from "./hooks/usePrevious"
 export { usePrint } from "./hooks/usePrint"
+export { useResizeObserver } from "./hooks/useResizeObserver"
 export { useTheme } from "./hooks/useTheme"
 
 export type { HeliosAppearanceType, HeliosColorType } from "./types/colors"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.94",
+	"version": "2.0.0-alpha.96",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -45,7 +45,7 @@
 		"@heliosgraphics/css": "^1.0.0-alpha.5",
 		"@heliosgraphics/icons": "^1.0.0-alpha.11",
 		"@heliosgraphics/utils": "^6.0.0-alpha.9",
-		"marked": "^17.0.2",
+		"marked": "^17.0.3",
 		"marked-linkify-it": "^3.1.14",
 		"marked-xhtml": "^1.0.14"
 	},
@@ -56,8 +56,8 @@
 		"@vitest/coverage-v8": "^4.0.18",
 		"esbuild": "^0.27.3",
 		"esbuild-css-modules-plugin": "^3.1.5",
-		"glob": "^13.0.3",
-		"jsdom": "^28.0.0",
+		"glob": "^13.0.6",
+		"jsdom": "^28.1.0",
 		"next": "^16.1.6",
 		"prettier": "^3.8.1",
 		"typescript": "^5.9.3",