@heliosgraphics/ui 2.0.0-alpha.89 → 2.0.0-alpha.90

package/components/Masonry/Masonry.types.ts

@@ -3,7 +3,7 @@ import type { PropsWithChildren } from "react"
 export interface MasonryBaseProps {
 	columns: [number, number, number]
 	gap: [number, number, number]
-	brakepoints: [number, number, number]
+	breakpoints: [number, number, number]
 	useBalancedLayout?: boolean
 }
 

package/components/Menu/Menu.tsx

@@ -1,6 +1,4 @@
-"use client"
-
-import { FC } from "react"
+import type { FC } from "react"
 import type { MenuProps } from "./Menu.types"
 import { getClasses } from "@heliosgraphics/utils"
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"

package/components/Menu/components/MenuCategory/MenuCategory.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState, type FC } from "react"
+import { useCallback, useState, type FC, type KeyboardEvent } from "react"
 import { Flex } from "../../../Flex"
 import { Icon } from "../../../Icon"
 import { Text } from "../../../Text"
@@ -26,6 +26,16 @@ export const MenuCategory: FC<MenuCategoryProps> = ({
 		}
 	}
 
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>): void => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault()
+				onToggle()
+			}
+		},
+		[isControlled],
+	)
+
 	const menuCategoryClasses: string = getClasses(styles.menuCategory, {
 		[styles.menuCategoryFolder]: category,
 		[styles.menuCategoryFolderOpen]: isOpen,
@@ -46,10 +56,11 @@ export const MenuCategory: FC<MenuCategoryProps> = ({
 		<Flex isColumn={true} isXCentered={true} data-ui-component="Menu.Category" className={menuCategoryClasses}>
 			{showHeader && (
 				<Flex
-					{...(isFolder && onToggle && { onClick: onToggle })}
+					{...(isFolder && { onClick: onToggle, onKeyDown: handleKeyDown, role: "button" as const, tabIndex: 0 })}
 					isBetween={true}
 					isYCentered={true}
 					gap={4}
+					aria-expanded={isFolder ? isOpen : undefined}
 					className={styles.menuCategoryTitle}
 				>
 					<Text type="tiny" emphasis={isOpen ? "secondary" : "primary"} fontWeight="medium" isNonSelectable={true}>

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC } from "react"
+import type { FC } from "react"
 import { Input } from "../../../Input"
 import { getClasses } from "@heliosgraphics/utils"
 import styles from "./MenuFilter.module.css"

package/components/Menu/components/MenuItem/MenuItem.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { FC } from "react"
+import { useCallback, type FC, type KeyboardEvent } from "react"
 import { Flex } from "../../../Flex"
 import { Pill } from "../../../Pill"
 import { Icon } from "../../../Icon"
@@ -24,11 +24,24 @@ export const MenuItem: FC<MenuItemProps> = ({
 		[styles.menuItemActive]: isActive,
 	})
 
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>): void => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault()
+				onAsideClose()
+			}
+		},
+		[onAsideClose],
+	)
+
 	return (
 		<Flex
 			className={menuItemClasses}
 			data-ui-component="MenuItem"
+			role="menuitem"
+			tabIndex={0}
 			onClick={onAsideClose}
+			onKeyDown={handleKeyDown}
 			isBetween={true}
 			gap={4}
 			isYCentered={true}

package/components/Overlay/Overlay.tsx

@@ -18,7 +18,7 @@ export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpe
 	})
 
 	return (
-		<section className={styles.overlay}>
+		<section className={styles.overlay} data-ui-component="Overlay">
 			<div className={contentClasses}>{children}</div>
 			<div className={styles.overlay__layer} onClick={hideFunction} />
 		</section>

package/components/Pie/Pie.tsx

@@ -15,15 +15,18 @@ export const Pie: FC<PieProps> = ({ color, size, data }) => {
 			width={size}
 			viewBox={`0 0 ${size} ${size}`}
 			style={{ backgroundColor: backgroundColor }}
+			role="img"
+			aria-label={`Pie chart with ${data.length} segments`}
+			data-ui-component="Pie"
 		>
-			{data.map((item, key) => {
-				const thisData: Array<PieItem> = data.slice(0, key)
+			{data.map((item, index) => {
+				const thisData: Array<PieItem> = data.slice(0, index)
 				const thisSize = thisData?.reduce((a, b) => a + b.value, 0)
-				const thisColor: string = `hsl(var(--${color}-hue), ${(key + 1) * 20}%, 50%)`
+				const thisColor: string = `hsl(var(--${color}-hue), ${(index + 1) * 20}%, 50%)`
 
 				return (
 					<circle
-						key={key}
+						key={item.name ?? `segment-${index}`}
 						r={size / 4}
 						cx={size / 2}
 						cy={size / 2}

package/components/Pill/Pill.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { Flex } from "../Flex"
 import { Text } from "../Text"

package/components/Placeholder/Placeholder.tsx

@@ -9,6 +9,7 @@ export const Placeholder: FC<PlaceholderProps> = ({ children, height }) => {
 		<Flex
 			className={styles.placeholder}
 			padding={16}
+			data-ui-component="Placeholder"
 			style={{
 				height: height ? `${height}px` : "inherit",
 			}}

package/components/Progress/Progress.tsx

@@ -10,5 +10,13 @@ export const Progress: FC<ProgressProps> = ({ color = "blue", isSmall, max = 100
 		[styles.progressSmall]: isSmall,
 	})
 
-	return <progress className={progressClasses} max={max} value={value} />
+	return (
+		<progress
+			className={progressClasses}
+			max={max}
+			value={value}
+			aria-label={`Progress: ${value} of ${max}`}
+			data-ui-component="Progress"
+		/>
+	)
 }

package/components/Radio/Radio.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { useId } from "react"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { useId, memo } from "react"
+import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { Flex } from "../Flex"
 import { Text } from "../Text"
@@ -9,63 +9,69 @@ import styles from "./Radio.module.css"
 import type { FC } from "react"
 import type { RadioProps } from "./Radio.types"
 
-export const Radio: FC<RadioProps> = ({
-	color = "gray",
-	isChecked,
-	isVertical,
-	isLabelHidden = false,
-	isSmall,
-	description,
-	isDisabled,
-	isRequired,
-	onChange,
-	label,
-	name,
-	value,
-}) => {
-	const radioId: string = useId()
+export const Radio: FC<RadioProps> = memo(
+	({
+		color = "gray",
+		isChecked,
+		isVertical,
+		isLabelHidden = false,
+		isSmall,
+		description,
+		isDisabled,
+		isRequired,
+		onChange,
+		label,
+		name,
+		value,
+	}) => {
+		const radioId: string = useId()
 
-	const colorClasses = getColorClasses(color, "dark")
-	const radioClasses = getClasses(styles.radio, ...colorClasses, {
-		[styles.radioDisabled]: isDisabled,
-		[styles.radioSmall]: isSmall,
-	})
+		const colorClasses = getColorClasses(color, "dark")
+		const radioClasses = getClasses(styles.radio, ...colorClasses, {
+			[styles.radioDisabled]: isDisabled,
+			[styles.radioSmall]: isSmall,
+		})
 
-	const radioLabelClasses = getClasses(styles.radio__radioLabel, "flex gap-4", {
-		"flex-x-center flex-column": isVertical,
-		"flex-y-center": !isVertical,
-	})
+		const radioLabelClasses = getClasses(styles.radio__radioLabel, "flex gap-4", {
+			"flex-x-center flex-column": isVertical,
+			"flex-y-center": !isVertical,
+		})
 
-	return (
-		<div className={radioClasses}>
-			<label className={radioLabelClasses} htmlFor={radioId}>
-				<span className={styles.radio__mark}>
-					<input
-						type="radio"
-						checked={isChecked}
-						onChange={onChange}
-						disabled={isDisabled}
-						required={isRequired}
-						aria-label={isLabelHidden ? label : undefined}
-						id={radioId}
-						name={name}
-						value={value}
-					/>
-					<div className={styles.radio__radioMark} />
-				</span>
-				{!isLabelHidden && (
-					<Flex isColumn={true}>
-						<Text type={isSmall ? "tiny" : "small"} fontWeight="medium" emphasis={isDisabled ? "tertiary" : "inherit"}>
-							{label}
-						</Text>
-						{description && (
-							<Text type="tiny" emphasis="secondary">
-								{description}
+		return (
+			<div className={radioClasses} data-ui-component="Radio">
+				<label className={radioLabelClasses} htmlFor={radioId}>
+					<span className={styles.radio__mark}>
+						<input
+							type="radio"
+							checked={isChecked}
+							onChange={onChange}
+							disabled={isDisabled}
+							required={isRequired}
+							aria-label={isLabelHidden ? label : undefined}
+							id={radioId}
+							name={name}
+							value={value}
+						/>
+						<div className={styles.radio__radioMark} />
+					</span>
+					{!isLabelHidden && (
+						<Flex isColumn={true}>
+							<Text
+								type={isSmall ? "tiny" : "small"}
+								fontWeight="medium"
+								emphasis={isDisabled ? "tertiary" : "inherit"}
+							>
+								{label}
 							</Text>
-						)}
-					</Flex>
-				)}
-			</label>
-		</div>
-	)
-}
+							{description && (
+								<Text type="tiny" emphasis="secondary">
+									{description}
+								</Text>
+							)}
+						</Flex>
+					)}
+				</label>
+			</div>
+		)
+	},
+)

package/components/Segments/Segments.tsx

@@ -6,6 +6,7 @@ import {
 	useState,
 	useRef,
 	useEffect,
+	useCallback,
 	Children,
 	isValidElement,
 	cloneElement,
@@ -35,7 +36,7 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 	const containerRef = useRef<HTMLDivElement>(null)
 	const sliderRef = useRef<HTMLDivElement>(null)
 
-	const updateSliderPosition = (): void => {
+	const updateSliderPosition = useCallback((): void => {
 		if (!containerRef.current || !sliderRef.current || !activeValue) return
 
 		const activeIndex: number = validChildren.findIndex((child) => child.props.value === activeValue)
@@ -52,19 +53,18 @@ export const Segments: FC<SegmentsProps> = ({ children, isFullWidth, isSmall })
 		sliderRef.current.style.transform = `translateX(${left}px)`
 		sliderRef.current.style.width = `${width}px`
 		sliderRef.current.style.opacity = "1"
-	}
+	}, [activeValue, validChildren])
 
 	useEffect(() => {
 		const timer: ReturnType<typeof setTimeout> = setTimeout(updateSliderPosition, 0)
-		const handleResize = (): void => updateSliderPosition()
 
-		globalThis.addEventListener("resize", handleResize)
+		globalThis.addEventListener("resize", updateSliderPosition)
 
 		return (): void => {
 			globalThis.clearTimeout(timer)
-			globalThis.removeEventListener("resize", handleResize)
+			globalThis.removeEventListener("resize", updateSliderPosition)
 		}
-	}, [activeValue])
+	}, [updateSliderPosition])
 
 	const segmentedControlClasses: string = getClasses(styles.segmentedControl, {
 		[styles.segmentedControlSmall]: isSmall,

package/components/Select/Select.tsx

@@ -2,7 +2,7 @@
 
 import { Flex } from "../Flex"
 import { Icon } from "../Icon"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { useId, type FC } from "react"
 import { InputLabel } from "../shared/InputLabel"
 import styles from "./Select.module.css"
@@ -26,7 +26,7 @@ export const Select: FC<SelectProps> = ({
 	})
 
 	return (
-		<Flex isColumn={true} className={selectClasses}>
+		<Flex isColumn={true} className={selectClasses} data-ui-component="Select">
 			<InputLabel label={label} id={htmlFor} isHidden={!!isLabelHidden} isDisabled={!!isDisabled} />
 			<Flex>
 				<select
@@ -34,11 +34,12 @@ export const Select: FC<SelectProps> = ({
 					onChange={onChange}
 					id={htmlFor}
 					value={selectedValue}
+					disabled={isDisabled}
 					aria-label={isLabelHidden ? label : undefined}
 				>
-					{items?.map((item, key) => {
+					{items?.map((item) => {
 						return (
-							<option key={key} value={item.value} disabled={item.isDisabled}>
+							<option key={item.value} value={item.value} disabled={item.isDisabled}>
 								{item.name}
 							</option>
 						)

package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { HRMarkup } from "../HRMarkup"
 import styles from "./HorizontalSeparator.module.css"
 import type { FC } from "react"

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

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { HRMarkup } from "../HRMarkup"
 import styles from "./VerticalSeparator.module.css"
 import type { FC } from "react"

package/{components.css → components/Setup/Setup.components.css}

@@ -1,7 +1,7 @@
 @layer helios;
 
-@import "@heliosgraphics/css/dist/css.min.layered.css";
-@import "@heliosgraphics/css/dist/css.easings.layered.css";
+@import "@heliosgraphics/css/layered";
+@import "@heliosgraphics/css/easings/layered";
 
 @import "./css/core.colors.css";
 @import "./css/core.colors-helpers.css";

package/components/Setup/Setup.meta.ts

@@ -12,11 +12,11 @@ export const meta: HeliosAttributeMeta<SetupProps> = {
 	_status: "nominal",
 	_category: "meta",
 	fixedTheme: {
-		type: "HeliosThemeType",
+		type: "HeliosFixedThemeType",
 		isOptional: true,
 	},
 	theme: {
-		type: "HeliosFixedThemeType",
+		type: "HeliosThemeType",
 		isOptional: true,
 	},
 }

package/components/Setup/Setup.tsx

@@ -1,4 +1,4 @@
-import "../../components.css"
+import "./Setup.components.css"
 
 import type { FC } from "react"
 import type { HeliosFixedThemeType } from "../../types/themes"
@@ -19,13 +19,15 @@ declare global {
 
 export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 	const preconnectLinks: Array<SetupLinkProps> = [
-		{ rel: "preconnect", href: "https://rsms.me/", crossOrigin: "anonymous" },
+		{ id: "rsms", rel: "preconnect", href: "https://rsms.me/", crossOrigin: "anonymous" },
 		{
+			id: "googleapis",
 			rel: "preconnect",
 			href: "https://fonts.googleapis.com",
 			crossOrigin: "anonymous",
 		},
 		{
+			id: "gstatic",
 			rel: "preconnect",
 			href: "https://fonts.gstatic.com",
 			crossOrigin: "anonymous",
@@ -33,8 +35,9 @@ export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 	]
 
 	const stylesheetLinks: Array<SetupLinkProps> = [
-		{ rel: "stylesheet", href: "https://rsms.me/inter/inter.css" },
+		{ id: "rsms", rel: "stylesheet", href: "https://rsms.me/inter/inter.css" },
 		{
+			id: "googleapis",
 			rel: "stylesheet",
 			href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap",
 		},
@@ -44,11 +47,11 @@ export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 
 	return (
 		<>
-			{preconnectLinks.map((linkProps, index) => (
-				<link key={`preconnect-${index}`} {...linkProps} />
+			{preconnectLinks.map((linkProps) => (
+				<link key={`preconnect-${linkProps.id}`} {...linkProps} />
 			))}
-			{stylesheetLinks.map((linkProps, index) => (
-				<link key={`stylesheet-${index}`} {...linkProps} />
+			{stylesheetLinks.map((linkProps) => (
+				<link key={`stylesheet-${linkProps.id}`} {...linkProps} />
 			))}
 			<script
 				dangerouslySetInnerHTML={{

package/components/Setup/Setup.types.ts

@@ -6,6 +6,7 @@ export interface SetupProps {
 }
 
 export interface SetupLinkProps {
+	id: string
 	rel: string
 	href: string
 	crossOrigin?: "anonymous" | "use-credentials"

package/components/Shimmer/Shimmer.tsx

@@ -1,5 +1,5 @@
-import { ShimmerProps } from "./Shimmer.types"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import type { ShimmerProps } from "./Shimmer.types"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Shimmer.module.css"
 import type { FC } from "react"
 
@@ -12,6 +12,7 @@ export const Shimmer: FC<ShimmerProps> = ({ isRounded, paddingTop, paddingBottom
 	return (
 		<div
 			className={styles.shimmer}
+			data-ui-component="Shimmer"
 			role="status"
 			aria-busy={true}
 			aria-label="Loading"

package/components/Slider/Slider.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Slider.module.css"
 import type { FC } from "react"
 import type { SliderProps } from "./Slider.types"
@@ -7,9 +7,9 @@ export const Slider: FC<SliderProps> = ({ items }) => {
 	const sliderClasses: string = getClasses(styles.slider, "flex")
 
 	return (
-		<ul className={sliderClasses}>
-			{items?.map((item, key) => (
-				<li key={key}>{item}</li>
+		<ul className={sliderClasses} data-ui-component="Slider">
+			{items?.map((item, index) => (
+				<li key={`slider-${index}`}>{item}</li>
 			))}
 		</ul>
 	)

package/components/Spacer/Spacer.tsx

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

package/components/Table/Table.tsx

@@ -12,7 +12,7 @@ export const Table: FC<TableProps> = ({ children, hasBorder, isMonoHeader }) =>
 	})
 
 	return (
-		<div className={tableClasses}>
+		<div className={tableClasses} data-ui-component="Table">
 			<table className={tableElementClasses}>{children}</table>
 		</div>
 	)

package/components/Tabs/Tabs.tsx

@@ -1,31 +1,55 @@
 "use client"
 
-import { useState, type FC } from "react"
-import { TabsProps } from "./Tabs.types"
+import { useId, useState, type FC, type KeyboardEvent } from "react"
+import type { TabsProps } from "./Tabs.types"
 import styles from "./Tabs.module.css"
 import { Text } from "../Text"
 
 export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) => {
 	const [active, setActive] = useState(activeNumber || 0)
+	const tabsId: string = useId()
 
 	if (!items || !sections) return null
 
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>, index: number): void => {
+		if (event.key === "ArrowRight") {
+			event.preventDefault()
+			setActive((index + 1) % items.length)
+		} else if (event.key === "ArrowLeft") {
+			event.preventDefault()
+			setActive((index - 1 + items.length) % items.length)
+		}
+	}
+
 	return (
-		<div>
-			<ol className={`${styles.tabs__ol} flex gap-2`}>
-				{items.map((tab, key) => (
-					<li
-						key={key}
-						onClick={() => setActive(key)}
-						className={`${styles.tabs__ol__item} ${active === key ? styles.tabs__ol__itemActive : ""}`}
+		<div data-ui-component="Tabs">
+			<div role="tablist" className={`${styles.tabs__ol} flex gap-2`}>
+				{items.map((tab, index) => (
+					<div
+						key={tab}
+						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={`${styles.tabs__ol__item} ${active === index ? styles.tabs__ol__itemActive : ""}`}
 					>
 						<Text type="small" fontWeight="medium">
 							{tab}
 						</Text>
-					</li>
+					</div>
 				))}
-			</ol>
-			<section className="tabs__section">{sections[active]}</section>
+			</div>
+			<section
+				role="tabpanel"
+				id={`${tabsId}-panel-${active}`}
+				aria-labelledby={`${tabsId}-tab-${active}`}
+				className="tabs__section"
+			>
+				{sections[active]}
+			</section>
 		</div>
 	)
 }

package/components/Text/Text.tsx

@@ -1,5 +1,5 @@
 import { Div } from "./components/Div"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getTypographyUtility } from "./Text.utils"
 import { P } from "./components/P"
 import { Small } from "./components/Small"
@@ -30,10 +30,13 @@ export const Text: FC<TextProps> = memo((props) => {
 			}
 		: undefined
 
+	const mergedStyle: object | undefined =
+		props.style || lineClampStyle ? { ...(props.style || {}), ...(lineClampStyle || {}) } : undefined
+
 	const baseTextProps: Omit<TextProps, "type"> = {
 		onClick: props.onClick,
 		children: props.children,
-		style: lineClampStyle,
+		style: mergedStyle,
 		className: utility,
 	}