@heliosgraphics/ui 2.0.0-alpha.97 → 2.0.0-alpha.99

package/components/Button/Button.spec.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest"
+import { describe, expect, it } from "bun:test"
 import { Button } from "./Button"
 
 describe("Button", () => {

package/components/ButtonGroup/ButtonGroup.spec.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest"
+import { describe, expect, it } from "bun:test"
 import { ButtonGroup } from "./ButtonGroup"
 
 describe("ButtonGroup", () => {

package/components/Clock/Clock.tsx

@@ -2,26 +2,10 @@
 
 import { useId, useState, useEffect } from "react"
 import styles from "./Clock.module.css"
+import { getRotation } from "./Clock.utils"
 import type { FC } from "react"
 import type { ClockProps } from "./Clock.types"
 
-const getRotation = (time: Date, type: "hours" | "minutes" | "seconds"): string => {
-	const hours = time.getHours() % 12
-	const minutes = time.getMinutes()
-	const seconds = time.getSeconds()
-
-	switch (type) {
-		case "hours":
-			return `rotate(${(hours + minutes / 60) * 30 - 180}, 0, 0)`
-		case "minutes":
-			return `rotate(${minutes * 6 - 180}, 0, 0)`
-		case "seconds":
-			return `rotate(${seconds * 6 - 180}, 0, 0)`
-		default:
-			return ""
-	}
-}
-
 export const Clock: FC<ClockProps> = () => {
 	const titleId: string = useId()
 	const [time, setTime] = useState(() => new Date())

package/components/Clock/Clock.utils.ts

@@ -0,0 +1,16 @@
+export const getRotation = (time: Date, type: "hours" | "minutes" | "seconds"): string => {
+	const hours = time.getHours() % 12
+	const minutes = time.getMinutes()
+	const seconds = time.getSeconds()
+
+	switch (type) {
+		case "hours":
+			return `rotate(${(hours + minutes / 60) * 30 - 180}, 0, 0)`
+		case "minutes":
+			return `rotate(${minutes * 6 - 180}, 0, 0)`
+		case "seconds":
+			return `rotate(${seconds * 6 - 180}, 0, 0)`
+		default:
+			return ""
+	}
+}

package/components/Debug/Debug.tsx

@@ -19,7 +19,7 @@ export const Debug: FC<DebugProps> = ({ color = "gray", appearance = "dark" }) =
 	const [isClosed, setIsClosed] = useState(false)
 
 	return (
-		<Flex className={debugClasses} data-ui-component="Debug">
+		<Flex className={debugClasses} role="status" data-ui-component="Debug">
 			<Flex isColumn={true} gap={4}>
 				<Text type="micro" fontFamily="mono" emphasis="secondary">
 					color: {color}, appearance: {appearance}

package/components/Dialog/Dialog.meta.ts

@@ -12,7 +12,7 @@ export const meta: HeliosAttributeMeta<DialogBaseProps> = {
 		{
 			id: "ui-dialog-no-padding",
 			description: "default dialog without content padding",
-			content: `<Dialog isOpen={IS_OPEN} onClose={ON_TOGGLE_OPEN} title="Hello World" isNarrow={IS_NARROW} isCentered={IS_CENTERED} noPadding={true}>{CHILDREN}</Dialog>`,
+			content: `<Dialog isOpen={IS_OPEN} onClose={ON_TOGGLE_OPEN} title="Hello World" isNarrow={IS_NARROW} isCentered={IS_CENTERED} hasNoPadding={true}>{CHILDREN}</Dialog>`,
 		},
 	],
 	_status: "nominal",
@@ -29,7 +29,7 @@ export const meta: HeliosAttributeMeta<DialogBaseProps> = {
 		type: "boolean",
 		isOptional: true,
 	},
-	noPadding: {
+	hasNoPadding: {
 		type: "boolean",
 		description: "Removes padding from the Dialog content.",
 		isOptional: true,

package/components/Dialog/Dialog.tsx

@@ -16,7 +16,7 @@ export const Dialog: FC<DialogProps> = ({
 	isOpen,
 	isCentered,
 	onClose,
-	noPadding,
+	hasNoPadding,
 	role,
 }) => {
 	const dialogRef = useRef<HTMLDialogElement | null>(null)
@@ -69,7 +69,7 @@ export const Dialog: FC<DialogProps> = ({
 	})
 	const dialogFlexClasses: string = getClasses(styles.dialog__header, "sticky top-0 z-50 ui-bg-glass")
 	const dialogContentClasses: string = getClasses(styles.dialog__content, {
-		[styles.dialog__contentNoPadding]: noPadding,
+		[styles.dialog__contentNoPadding]: hasNoPadding,
 	})
 
 	return (
@@ -79,6 +79,7 @@ export const Dialog: FC<DialogProps> = ({
 			onClick={onDialogClose}
 			onCancel={onCancel}
 			role={role}
+			aria-modal="true"
 			data-ui-component="Dialog"
 		>
 			{!!title && (

package/components/Dialog/Dialog.types.ts

@@ -4,7 +4,7 @@ export interface DialogBaseProps {
 	isCentered?: boolean
 	isNarrow?: boolean
 	isOpen?: boolean
-	noPadding?: boolean
+	hasNoPadding?: boolean
 	onClose: (_?: unknown) => Promise<void> | void
 	role?: "dialog" | "alertdialog"
 	title?: string

package/components/Dot/Dot.spec.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest"
+import { describe, expect, it } from "bun:test"
 import { Dot } from "./Dot"
 
 describe("Dot", () => {

package/components/Flex/Flex.tsx

@@ -15,7 +15,12 @@ export const Flex: FC<FlexProps> = (props) => {
 	}
 
 	const a11yProps = restProps.onClick
-		? { role: (restProps.role ?? "button") as string, tabIndex: restProps.tabIndex ?? 0, onKeyDown: handleKeyDown }
+		? {
+				role: (restProps.role ?? "button") as string,
+				tabIndex: restProps.tabIndex ?? 0,
+				onKeyDown: handleKeyDown,
+				"aria-label": restProps["aria-label"],
+			}
 		: {}
 
 	return (

package/components/Flex/Flex.utils.spec.ts

@@ -1,4 +1,4 @@
-import { it, describe, expect } from "vitest"
+import { it, describe, expect } from "bun:test"
 import { getFlexUtility, getSafeFlexProps } from "./Flex.utils"
 import type { FlexProps } from "./Flex.types"
 
@@ -86,11 +86,11 @@ describe("getSafeFlexProps", () => {
 		xAlign: "start",
 		yAlign: "start",
 	}
-	const MOCK_FLEX_ATTRIBUTES_SAFE: FlexProps = {
+	const MOCK_FLEX_ATTRIBUTES_SAFE = {
 		children: null,
 		className: "xo",
 		draggable: true,
-	}
+	} as Record<string, unknown>
 
 	it("Generates without invalid attributes", () =>
 		expect(getSafeFlexProps(MOCK_FLEX_ATTRIBUTES)).toEqual(MOCK_FLEX_ATTRIBUTES_SAFE))

package/components/Input/Input.meta.ts

@@ -43,7 +43,7 @@ export const meta: HeliosAttributeMeta<InputProps> = {
 	onKeyUp: { type: "string", isOptional: true },
 	placeholder: { type: "string", isOptional: true },
 	results: { type: "Array<ResultItem>", isOptional: true },
-	showResults: { type: "boolean", isOptional: true },
+	isResultsVisible: { type: "boolean", isOptional: true },
 	type: {
 		type: '"text" | "email" | "date" | "time" | "password"',
 		isOptional: true,

package/components/Input/Input.tsx

@@ -36,7 +36,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 			onKeyUp,
 			placeholder,
 			results,
-			showResults,
+			isResultsVisible,
 			type = "text",
 			value,
 		},
@@ -56,7 +56,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
 				})
 				.filter(Boolean) || []
 
-		const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
+		const showingResults: boolean = Boolean(!!filteredItems?.length && isResultsVisible)
 
 		const inputClasses: string = getClasses(styles.input, "relative flex flex-column", className, {
 			[styles.inputDisabled]: isDisabled,

package/components/Input/Input.types.ts

@@ -22,7 +22,7 @@ export interface InputProps {
 	onKeyUp?: KeyboardEventHandler
 	placeholder?: string
 	results?: Array<ResultItem>
-	showResults?: boolean
+	isResultsVisible?: boolean
 	type?: "text" | "email" | "date" | "time" | "password"
 	value?: string
 }

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.tsx

@@ -21,6 +21,8 @@ export const LayoutAsideToggle: FC<LayoutAsideToggleProps> = () => {
 				data-ui-layout-ignore="true"
 				onClick={isMenuVisible ? onAsideClose : onNavigationToggle}
 				size="small"
+				aria-expanded={isMenuVisible}
+				aria-label={isMenuVisible ? "Close navigation" : "Open navigation"}
 			/>
 		</ButtonGroup>
 	)

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.tsx

@@ -34,7 +34,13 @@ export const LayoutMainContent: FC<LayoutMainContentProps> = (props) => {
 	})
 
 	return (
-		<section {...safeProps} ref={contentRef} className={mainContentClasses} data-ui-component="Main.Content">
+		<section
+			{...safeProps}
+			ref={contentRef}
+			className={mainContentClasses}
+			role="main"
+			data-ui-component="Main.Content"
+		>
 			{props.children}
 		</section>
 	)

package/components/Markdown/Markdown.utils.spec.ts

@@ -1,4 +1,4 @@
-import { it, describe, expect } from "vitest"
+import { it, describe, expect } from "bun:test"
 import { renderMarkdown } from "./Markdown.utils"
 
 describe("markdown", () => {

package/components/Masonry/Masonry.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { type FC, useMemo } from "react"
+import { type FC, useId, useInsertionEffect } from "react"
 import type { MasonryProps } from "./Masonry.types"
 
 export const Masonry: FC<MasonryProps> = ({
@@ -9,32 +9,40 @@ export const Masonry: FC<MasonryProps> = ({
 	gap = [2, 4, 6],
 	breakpoints = [0, 640, 960],
 }) => {
-	const id: string = useMemo(() => `masonry-${Math.random().toString(36).slice(2, 8)}`, [])
-
-	if (!children) return null
-
-	const mediaStyles = `
-		.${id} { column-count: ${columns[0]}; column-gap: ${gap[0]}px; }
-		.${id} > * { break-inside: avoid; margin-bottom: ${gap[0]}px; }
-
-		@media (min-width: ${breakpoints[1]}px) {
-			.${id} { column-count: ${columns[1]}; column-gap: ${gap[1]}px; }
-			.${id} > * { margin-bottom: ${gap[1]}px; }
+	const reactId = useId()
+	const id = `masonry${reactId.replace(/:/g, "")}`
+
+	useInsertionEffect(() => {
+		const style = document.createElement("style")
+
+		style.dataset["masonryId"] = id
+		style.textContent = `
+			.${id} { column-count: ${columns[0]}; column-gap: ${gap[0]}px; }
+			.${id} > * { break-inside: avoid; margin-bottom: ${gap[0]}px; }
+
+			@media (min-width: ${breakpoints[1]}px) {
+				.${id} { column-count: ${columns[1]}; column-gap: ${gap[1]}px; }
+				.${id} > * { margin-bottom: ${gap[1]}px; }
+			}
+
+			@media (min-width: ${breakpoints[2]}px) {
+				.${id} { column-count: ${columns[2]}; column-gap: ${gap[2]}px; }
+				.${id} > * { margin-bottom: ${gap[2]}px; }
+			}
+		`
+		document.head.appendChild(style)
+
+		return (): void => {
+			style.remove()
 		}
+	}, [id, columns, gap, breakpoints])
 
-		@media (min-width: ${breakpoints[2]}px) {
-			.${id} { column-count: ${columns[2]}; column-gap: ${gap[2]}px; }
-			.${id} > * { margin-bottom: ${gap[2]}px; }
-		}
-	`
+	if (!children) return null
 
 	return (
-		<>
-			<style dangerouslySetInnerHTML={{ __html: mediaStyles }} />
-			<div className={id} data-ui-component="Masonry">
-				{children}
-			</div>
-		</>
+		<div className={id} data-ui-component="Masonry">
+			{children}
+		</div>
 	)
 }
 

package/components/Menu/components/MenuFilter/MenuFilter.tsx

@@ -8,7 +8,7 @@ export const MenuFilter: FC<MenuFilterProps> = ({ value, onClear, onChange }) =>
 	const menuFilterClasses: string = getClasses(styles.menuFilter, "ui-bg-glass")
 
 	return (
-		<div className={menuFilterClasses} data-ui-component="Menu.Filter">
+		<div className={menuFilterClasses} role="search" data-ui-component="Menu.Filter">
 			<Input
 				{...(onClear && { onClear })}
 				placeholder="Search"

package/components/Segments/Segments.tsx

@@ -4,7 +4,7 @@ import { type FC, useState, useRef, useEffect, useCallback } from "react"
 import { Flex } from "../Flex"
 import styles from "./Segments.module.css"
 import { getClasses } from "@heliosgraphics/utils"
-import { SegmentsContext } from "./Segments.context"
+import { SegmentsContext } from "./Segments.utils"
 import type { SegmentsProps } from "./Segments.types"
 
 export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall, defaultValue }) => {

package/components/Segments/components/SegmentButton/SegmentButton.tsx

@@ -1,7 +1,9 @@
+"use client"
+
 import styles from "./SegmentButton.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import { Icon } from "../../../Icon"
-import { useSegments } from "../../Segments.context"
+import { useSegments } from "../../Segments.utils"
 import { useCallback, type FC } from "react"
 import type { HeliosIconType } from "../../../../types/icons"
 import type { SegmentButtonProps } from "./SegmentButton.types"
@@ -36,7 +38,13 @@ export const SegmentButton: FC<SegmentButtonProps> = ({
 	)
 
 	return (
-		<button ref={handleRef} className={segmentButtonClasses} onClick={handleClick} data-ui-component="SegmentButton">
+		<button
+			ref={handleRef}
+			className={segmentButtonClasses}
+			onClick={handleClick}
+			aria-pressed={isActive}
+			data-ui-component="SegmentButton"
+		>
 			{iconL && <Icon icon={iconL} size={16} />}
 			{value}
 			{iconRight && <Icon icon={iconRight} size={16} />}

package/components/Separator/Separator.spec.tsx

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest"
+import { describe, expect, it } from "bun:test"
 import { Separator } from "./Separator"
 
 describe("Separator", () => {

package/components/Setup/Setup.tsx

@@ -1,4 +1,4 @@
-import "./Setup.components.css"
+import "./Setup.global.css"
 
 import type { FC } from "react"
 import type { SetupLinkProps, SetupProps } from "./Setup.types"

package/components/Tabs/Tabs.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { getClasses } from "@heliosgraphics/utils"
 import { Text } from "../Text"
 import styles from "./Tabs.module.css"

package/components/Text/Text.utils.spec.ts

@@ -1,4 +1,4 @@
-import { it, describe, expect } from "vitest"
+import { it, describe, expect } from "bun:test"
 import { _getFontWeight } from "./Text.utils"
 import type { TextProps } from "./Text.types"
 

package/components/Timestamp/Timestamp.meta.ts

@@ -6,7 +6,7 @@ export const meta: HeliosAttributeMeta<TimestampProps> = {
 		{
 			id: "ui-timestamp-default",
 			description: "default",
-			content: `<Timestamp date={DATE} fromNow={false} format={DATE_FORMAT}/>`,
+			content: `<Timestamp date={DATE} isRelative={false} format={DATE_FORMAT}/>`,
 		},
 	],
 	_status: "nominal",
@@ -17,6 +17,6 @@ export const meta: HeliosAttributeMeta<TimestampProps> = {
 		isOptional: true,
 		default: "{ year: numeric, month: long, day: numeric }",
 	},
-	fromNow: { type: "boolean", isOptional: true },
+	isRelative: { type: "boolean", isOptional: true },
 	text: { type: "string", isOptional: true },
 }

package/components/Timestamp/Timestamp.tsx

@@ -2,13 +2,13 @@ import { getIsValid, formatDate, getFromNow } from "../../utils/date"
 import type { FC } from "react"
 import type { TimestampProps } from "./Timestamp.types"
 
-export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format }) => {
+export const Timestamp: FC<TimestampProps> = ({ date, isRelative, text, format }) => {
 	const fromNowDate = getFromNow(date)
 	const isValid: boolean = getIsValid(date)
 	const parsedIsoString: string = date && isValid ? new Date(Date.parse(date))?.toISOString() : ""
 
 	const timestampDate: string = isValid ? parsedIsoString : ""
-	const formattedDate: string = fromNow ? fromNowDate : formatDate(date, format)
+	const formattedDate: string = isRelative ? fromNowDate : formatDate(date, format)
 
 	return (
 		<time dateTime={timestampDate} suppressHydrationWarning={true} data-ui-component="Timestamp">

package/components/Timestamp/Timestamp.types.ts

@@ -1,6 +1,6 @@
 export interface TimestampProps {
 	date?: string
 	format?: Intl.DateTimeFormatOptions
-	fromNow?: boolean
+	isRelative?: boolean
 	text?: string
 }

package/contexts/LayoutContext/LayoutContext.tsx

@@ -69,7 +69,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 		}
 	}, [breakpoint])
 
-	const shouldShowNavigation: boolean = isWideEnough || isMenuVisible
+	const isNavigationVisible: boolean = isWideEnough || isMenuVisible
 
 	const onNavigationToggle = useCallback((): void => setIsMenuVisible((prev) => !prev), [])
 	const onAsideClose = useCallback((): void => setIsMenuVisible(false), [])
@@ -82,9 +82,9 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			isWideEnough,
 			onAsideClose,
 			onNavigationToggle,
-			shouldShowNavigation,
+			isNavigationVisible,
 		}),
-		[hasMounted, isMenuVisible, isWideEnough, shouldShowNavigation, onAsideClose, onNavigationToggle],
+		[hasMounted, isMenuVisible, isWideEnough, isNavigationVisible, onAsideClose, onNavigationToggle],
 	)
 
 	return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>

package/contexts/LayoutContext/LayoutContext.types.ts

@@ -7,5 +7,5 @@ export interface LayoutContextProps {
 	isWideEnough: boolean
 	onAsideClose: () => void
 	onNavigationToggle: () => void
-	shouldShowNavigation: boolean
+	isNavigationVisible: boolean
 }

package/hooks/useLayoutContext.tsx

@@ -11,7 +11,7 @@ const DEFAULT_LAYOUT_CONTEXT: LayoutContextProps = {
 	isWideEnough: true,
 	onAsideClose: () => {},
 	onNavigationToggle: () => {},
-	shouldShowNavigation: true,
+	isNavigationVisible: true,
 }
 
 export const useLayoutContext = (): LayoutContextProps => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.97",
+	"version": "2.0.0-alpha.99",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -35,10 +35,8 @@
 	],
 	"scripts": {
 		"pub:components": "bun publish --access public",
-		"test": "NODE_ENV=test vitest run",
-		"test:coverage": "NODE_ENV=test vitest run --coverage",
-		"test:update": "NODE_ENV=test vitest run --update",
-		"test:watch": "NODE_ENV=test vitest",
+		"test": "bun test",
+		"test:watch": "bun test --watch",
 		"ts:watch": "tsc --noEmit --incremental --watch"
 	},
 	"dependencies": {
@@ -52,17 +50,13 @@
 	"devDependencies": {
 		"@testing-library/react": "^16.3.2",
 		"@types/node": "^25",
-		"@vitejs/plugin-react": "^5.1.4",
-		"@vitest/coverage-v8": "^4.0.18",
 		"esbuild": "^0.27.3",
 		"esbuild-css-modules-plugin": "^3.1.5",
 		"glob": "^13.0.6",
 		"jsdom": "^28.1.0",
 		"next": "^16.1.6",
 		"prettier": "^3.8.1",
-		"typescript": "^5.9.3",
-		"vite": "^7.3.1",
-		"vitest": "^4.0.18"
+		"typescript": "^5.9.3"
 	},
 	"peerDependencies": {
 		"@types/react": "^19",