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

package/components/Select/Select.tsx

@@ -14,6 +14,7 @@ export const Select: FC<SelectProps> = ({
 	isLabelHidden,
 	isSmall,
 	isDisabled,
+	isRequired,
 	items,
 	label,
 }) => {
@@ -35,6 +36,7 @@ export const Select: FC<SelectProps> = ({
 					id={htmlFor}
 					value={selectedValue}
 					disabled={isDisabled}
+					required={isRequired}
 					aria-label={isLabelHidden ? label : undefined}
 				>
 					{items?.map((item) => {

package/components/Select/Select.types.ts

@@ -9,6 +9,7 @@ export type SelectItem = {
 export interface SelectProps {
 	isDisabled?: boolean
 	isLabelHidden?: boolean
+	isRequired?: boolean
 	isSmall?: boolean
 	items: Array<SelectItem>
 	label: string

package/components/Separator/Separator.tsx

@@ -3,27 +3,32 @@ import { VerticalSeparator } from "./components/VerticalSeparator"
 import styles from "./Separator.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import type { SeparatorProps } from "./Separator.types"
-import { memo, type FC } from "react"
+import type { FC } from "react"
 
-export const Separator: FC<SeparatorProps> = memo(
-	({ className, emphasis = "primary", isVertical, height, lineStyle = "solid", width }) => {
-		const separatorClasses: string = getClasses(className, {
-			[styles.separatorPrimary]: emphasis === "primary",
-			[styles.separatorSecondary]: emphasis === "secondary",
-			[styles.separatorTertiary]: emphasis === "tertiary",
-		})
+export const Separator: FC<SeparatorProps> = ({
+	className,
+	emphasis = "primary",
+	isVertical,
+	height,
+	lineStyle = "solid",
+	width,
+}) => {
+	const separatorClasses: string = getClasses(className, {
+		[styles.separatorPrimary]: emphasis === "primary",
+		[styles.separatorSecondary]: emphasis === "secondary",
+		[styles.separatorTertiary]: emphasis === "tertiary",
+	})
 
-		const separatorProps: SeparatorProps = {
-			className: separatorClasses,
-			emphasis,
-			...(isVertical !== undefined && { isVertical }),
-			...(height !== undefined && { height }),
-			lineStyle,
-			...(width !== undefined && { width }),
-		}
+	const separatorProps: SeparatorProps = {
+		className: separatorClasses,
+		emphasis,
+		...(isVertical !== undefined && { isVertical }),
+		...(height !== undefined && { height }),
+		lineStyle,
+		...(width !== undefined && { width }),
+	}
 
-		if (isVertical) return <VerticalSeparator {...separatorProps} />
+	if (isVertical) return <VerticalSeparator {...separatorProps} />
 
-		return <HorizontalSeparator {...separatorProps} />
-	},
-)
+	return <HorizontalSeparator {...separatorProps} />
+}

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

@@ -16,5 +16,5 @@ export const VerticalSeparator: FC<VerticalSeparatorProps> = ({ height, classNam
 		height: height ? `${height ?? 0}px` : "auto",
 	}
 
-	return <HRMarkup style={verticalStyle} className={hrClassNames} />
+	return <HRMarkup style={verticalStyle} className={hrClassNames} aria-orientation="vertical" />
 }

package/components/Setup/Setup.tsx

@@ -1,22 +1,9 @@
 import "./Setup.components.css"
 
 import type { FC } from "react"
-import type { HeliosFixedThemeType } from "../../types/themes"
 import type { SetupLinkProps, SetupProps } from "./Setup.types"
 import { code } from "./Setup.utils"
 
-declare global {
-	interface Window {
-		__theme: HeliosFixedThemeType
-		__onThemeChange: ((theme: HeliosFixedThemeType) => void) | undefined
-		__setPreferredTheme: (theme: HeliosFixedThemeType) => void
-	}
-
-	var __theme: HeliosFixedThemeType
-	var __onThemeChange: ((theme: HeliosFixedThemeType) => void) | undefined
-	var __setPreferredTheme: (theme: HeliosFixedThemeType) => void
-}
-
 export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
 	const preconnectLinks: Array<SetupLinkProps> = [
 		{ id: "rsms", rel: "preconnect", href: "https://rsms.me/", crossOrigin: "anonymous" },

package/components/Setup/css/feat.responsive.css

@@ -91,6 +91,207 @@
 		.tablet\:radius-max {
 			border-radius: 9999px !important;
 		}
+
+		.tablet\:gap-0 {
+			gap: 0 !important;
+		}
+		.tablet\:gap-px {
+			gap: var(--space-px) !important;
+		}
+		.tablet\:gap-1 {
+			gap: var(--space-1) !important;
+		}
+		.tablet\:gap-2 {
+			gap: var(--space-2) !important;
+		}
+		.tablet\:gap-3 {
+			gap: var(--space-3) !important;
+		}
+		.tablet\:gap-4 {
+			gap: var(--space-4) !important;
+		}
+		.tablet\:gap-5 {
+			gap: var(--space-5) !important;
+		}
+		.tablet\:gap-6 {
+			gap: var(--space-6) !important;
+		}
+		.tablet\:gap-7 {
+			gap: var(--space-7) !important;
+		}
+		.tablet\:gap-8 {
+			gap: var(--space-8) !important;
+		}
+		.tablet\:gap-9 {
+			gap: var(--space-9) !important;
+		}
+		.tablet\:gap-10 {
+			gap: var(--space-10) !important;
+		}
+		.tablet\:gap-11 {
+			gap: var(--space-11) !important;
+		}
+		.tablet\:gap-12 {
+			gap: var(--space-12) !important;
+		}
+		.tablet\:gap-13 {
+			gap: var(--space-13) !important;
+		}
+		.tablet\:gap-14 {
+			gap: var(--space-14) !important;
+		}
+		.tablet\:gap-15 {
+			gap: var(--space-15) !important;
+		}
+		.tablet\:gap-16 {
+			gap: var(--space-16) !important;
+		}
+		.tablet\:gap-24 {
+			gap: var(--space-24) !important;
+		}
+		.tablet\:gap-32 {
+			gap: var(--space-32) !important;
+		}
+		.tablet\:gap-40 {
+			gap: var(--space-40) !important;
+		}
+		.tablet\:gap-48 {
+			gap: var(--space-48) !important;
+		}
+
+		.tablet\:px-0 {
+			padding-inline: 0 !important;
+		}
+		.tablet\:px-px {
+			padding-inline: var(--space-px) !important;
+		}
+		.tablet\:px-1 {
+			padding-inline: var(--space-1) !important;
+		}
+		.tablet\:px-2 {
+			padding-inline: var(--space-2) !important;
+		}
+		.tablet\:px-3 {
+			padding-inline: var(--space-3) !important;
+		}
+		.tablet\:px-4 {
+			padding-inline: var(--space-4) !important;
+		}
+		.tablet\:px-5 {
+			padding-inline: var(--space-5) !important;
+		}
+		.tablet\:px-6 {
+			padding-inline: var(--space-6) !important;
+		}
+		.tablet\:px-7 {
+			padding-inline: var(--space-7) !important;
+		}
+		.tablet\:px-8 {
+			padding-inline: var(--space-8) !important;
+		}
+		.tablet\:px-9 {
+			padding-inline: var(--space-9) !important;
+		}
+		.tablet\:px-10 {
+			padding-inline: var(--space-10) !important;
+		}
+		.tablet\:px-11 {
+			padding-inline: var(--space-11) !important;
+		}
+		.tablet\:px-12 {
+			padding-inline: var(--space-12) !important;
+		}
+		.tablet\:px-13 {
+			padding-inline: var(--space-13) !important;
+		}
+		.tablet\:px-14 {
+			padding-inline: var(--space-14) !important;
+		}
+		.tablet\:px-15 {
+			padding-inline: var(--space-15) !important;
+		}
+		.tablet\:px-16 {
+			padding-inline: var(--space-16) !important;
+		}
+		.tablet\:px-24 {
+			padding-inline: var(--space-24) !important;
+		}
+		.tablet\:px-32 {
+			padding-inline: var(--space-32) !important;
+		}
+		.tablet\:px-40 {
+			padding-inline: var(--space-40) !important;
+		}
+		.tablet\:px-48 {
+			padding-inline: var(--space-48) !important;
+		}
+
+		.tablet\:py-0 {
+			padding-block: 0 !important;
+		}
+		.tablet\:py-px {
+			padding-block: var(--space-px) !important;
+		}
+		.tablet\:py-1 {
+			padding-block: var(--space-1) !important;
+		}
+		.tablet\:py-2 {
+			padding-block: var(--space-2) !important;
+		}
+		.tablet\:py-3 {
+			padding-block: var(--space-3) !important;
+		}
+		.tablet\:py-4 {
+			padding-block: var(--space-4) !important;
+		}
+		.tablet\:py-5 {
+			padding-block: var(--space-5) !important;
+		}
+		.tablet\:py-6 {
+			padding-block: var(--space-6) !important;
+		}
+		.tablet\:py-7 {
+			padding-block: var(--space-7) !important;
+		}
+		.tablet\:py-8 {
+			padding-block: var(--space-8) !important;
+		}
+		.tablet\:py-9 {
+			padding-block: var(--space-9) !important;
+		}
+		.tablet\:py-10 {
+			padding-block: var(--space-10) !important;
+		}
+		.tablet\:py-11 {
+			padding-block: var(--space-11) !important;
+		}
+		.tablet\:py-12 {
+			padding-block: var(--space-12) !important;
+		}
+		.tablet\:py-13 {
+			padding-block: var(--space-13) !important;
+		}
+		.tablet\:py-14 {
+			padding-block: var(--space-14) !important;
+		}
+		.tablet\:py-15 {
+			padding-block: var(--space-15) !important;
+		}
+		.tablet\:py-16 {
+			padding-block: var(--space-16) !important;
+		}
+		.tablet\:py-24 {
+			padding-block: var(--space-24) !important;
+		}
+		.tablet\:py-32 {
+			padding-block: var(--space-32) !important;
+		}
+		.tablet\:py-40 {
+			padding-block: var(--space-40) !important;
+		}
+		.tablet\:py-48 {
+			padding-block: var(--space-48) !important;
+		}
 	}
 
 	@media (min-width: 0) and (max-width: 640px) {
@@ -184,5 +385,206 @@
 		.mobile\:radius-max {
 			border-radius: 9999px !important;
 		}
+
+		.mobile\:gap-0 {
+			gap: 0 !important;
+		}
+		.mobile\:gap-px {
+			gap: var(--space-px) !important;
+		}
+		.mobile\:gap-1 {
+			gap: var(--space-1) !important;
+		}
+		.mobile\:gap-2 {
+			gap: var(--space-2) !important;
+		}
+		.mobile\:gap-3 {
+			gap: var(--space-3) !important;
+		}
+		.mobile\:gap-4 {
+			gap: var(--space-4) !important;
+		}
+		.mobile\:gap-5 {
+			gap: var(--space-5) !important;
+		}
+		.mobile\:gap-6 {
+			gap: var(--space-6) !important;
+		}
+		.mobile\:gap-7 {
+			gap: var(--space-7) !important;
+		}
+		.mobile\:gap-8 {
+			gap: var(--space-8) !important;
+		}
+		.mobile\:gap-9 {
+			gap: var(--space-9) !important;
+		}
+		.mobile\:gap-10 {
+			gap: var(--space-10) !important;
+		}
+		.mobile\:gap-11 {
+			gap: var(--space-11) !important;
+		}
+		.mobile\:gap-12 {
+			gap: var(--space-12) !important;
+		}
+		.mobile\:gap-13 {
+			gap: var(--space-13) !important;
+		}
+		.mobile\:gap-14 {
+			gap: var(--space-14) !important;
+		}
+		.mobile\:gap-15 {
+			gap: var(--space-15) !important;
+		}
+		.mobile\:gap-16 {
+			gap: var(--space-16) !important;
+		}
+		.mobile\:gap-24 {
+			gap: var(--space-24) !important;
+		}
+		.mobile\:gap-32 {
+			gap: var(--space-32) !important;
+		}
+		.mobile\:gap-40 {
+			gap: var(--space-40) !important;
+		}
+		.mobile\:gap-48 {
+			gap: var(--space-48) !important;
+		}
+
+		.mobile\:px-0 {
+			padding-inline: 0 !important;
+		}
+		.mobile\:px-px {
+			padding-inline: var(--space-px) !important;
+		}
+		.mobile\:px-1 {
+			padding-inline: var(--space-1) !important;
+		}
+		.mobile\:px-2 {
+			padding-inline: var(--space-2) !important;
+		}
+		.mobile\:px-3 {
+			padding-inline: var(--space-3) !important;
+		}
+		.mobile\:px-4 {
+			padding-inline: var(--space-4) !important;
+		}
+		.mobile\:px-5 {
+			padding-inline: var(--space-5) !important;
+		}
+		.mobile\:px-6 {
+			padding-inline: var(--space-6) !important;
+		}
+		.mobile\:px-7 {
+			padding-inline: var(--space-7) !important;
+		}
+		.mobile\:px-8 {
+			padding-inline: var(--space-8) !important;
+		}
+		.mobile\:px-9 {
+			padding-inline: var(--space-9) !important;
+		}
+		.mobile\:px-10 {
+			padding-inline: var(--space-10) !important;
+		}
+		.mobile\:px-11 {
+			padding-inline: var(--space-11) !important;
+		}
+		.mobile\:px-12 {
+			padding-inline: var(--space-12) !important;
+		}
+		.mobile\:px-13 {
+			padding-inline: var(--space-13) !important;
+		}
+		.mobile\:px-14 {
+			padding-inline: var(--space-14) !important;
+		}
+		.mobile\:px-15 {
+			padding-inline: var(--space-15) !important;
+		}
+		.mobile\:px-16 {
+			padding-inline: var(--space-16) !important;
+		}
+		.mobile\:px-24 {
+			padding-inline: var(--space-24) !important;
+		}
+		.mobile\:px-32 {
+			padding-inline: var(--space-32) !important;
+		}
+		.mobile\:px-40 {
+			padding-inline: var(--space-40) !important;
+		}
+		.mobile\:px-48 {
+			padding-inline: var(--space-48) !important;
+		}
+
+		.mobile\:py-0 {
+			padding-block: 0 !important;
+		}
+		.mobile\:py-px {
+			padding-block: var(--space-px) !important;
+		}
+		.mobile\:py-1 {
+			padding-block: var(--space-1) !important;
+		}
+		.mobile\:py-2 {
+			padding-block: var(--space-2) !important;
+		}
+		.mobile\:py-3 {
+			padding-block: var(--space-3) !important;
+		}
+		.mobile\:py-4 {
+			padding-block: var(--space-4) !important;
+		}
+		.mobile\:py-5 {
+			padding-block: var(--space-5) !important;
+		}
+		.mobile\:py-6 {
+			padding-block: var(--space-6) !important;
+		}
+		.mobile\:py-7 {
+			padding-block: var(--space-7) !important;
+		}
+		.mobile\:py-8 {
+			padding-block: var(--space-8) !important;
+		}
+		.mobile\:py-9 {
+			padding-block: var(--space-9) !important;
+		}
+		.mobile\:py-10 {
+			padding-block: var(--space-10) !important;
+		}
+		.mobile\:py-11 {
+			padding-block: var(--space-11) !important;
+		}
+		.mobile\:py-12 {
+			padding-block: var(--space-12) !important;
+		}
+		.mobile\:py-13 {
+			padding-block: var(--space-13) !important;
+		}
+		.mobile\:py-14 {
+			padding-block: var(--space-14) !important;
+		}
+		.mobile\:py-15 {
+			padding-block: var(--space-15) !important;
+		}
+		.mobile\:py-16 {
+			padding-block: var(--space-16) !important;
+		}
+		.mobile\:py-24 {
+			padding-block: var(--space-24) !important;
+		}
+		.mobile\:py-32 {
+			padding-block: var(--space-32) !important;
+		}
+		.mobile\:py-40 {
+			padding-block: var(--space-40) !important;
+		}
+		.mobile\:py-48 {
+			padding-block: var(--space-48) !important;
+		}
 	}
 }

package/components/Slider/Slider.meta.ts

@@ -11,6 +11,10 @@ export const meta: HeliosAttributeMeta<SliderProps> = {
 	],
 	_status: "experimental",
 	_category: "pattern",
+	"aria-label": {
+		type: "string",
+		isOptional: true,
+	},
 	items: {
 		type: "Array<ReactNode>",
 		isOptional: true,

package/components/Slider/Slider.tsx

@@ -3,11 +3,11 @@ import styles from "./Slider.module.css"
 import type { FC } from "react"
 import type { SliderProps } from "./Slider.types"
 
-export const Slider: FC<SliderProps> = ({ items }) => {
+export const Slider: FC<SliderProps> = ({ "aria-label": ariaLabel, items }) => {
 	const sliderClasses: string = getClasses(styles.slider, "flex")
 
 	return (
-		<ul className={sliderClasses} data-ui-component="Slider">
+		<ul className={sliderClasses} role="list" aria-label={ariaLabel} data-ui-component="Slider">
 			{items?.map((item, index) => (
 				<li key={`slider-${index}`}>{item}</li>
 			))}

package/components/Slider/Slider.types.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react"
 
 export interface SliderProps {
+	"aria-label"?: string
 	items?: Array<ReactNode>
 }

package/components/Spacer/Spacer.tsx

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

package/components/Tabs/Tabs.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useId, useState, type FC, type KeyboardEvent } from "react"
+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"
@@ -8,16 +8,24 @@ import { Text } from "../Text"
 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 handleKeyDown = (event: KeyboardEvent<HTMLDivElement>, index: number): void => {
+		let nextIndex: number | null = null
+
 		if (event.key === "ArrowRight") {
 			event.preventDefault()
-			setActive((index + 1) % items.length)
+			nextIndex = (index + 1) % items.length
 		} else if (event.key === "ArrowLeft") {
 			event.preventDefault()
-			setActive((index - 1 + items.length) % items.length)
+			nextIndex = (index - 1 + items.length) % items.length
+		}
+
+		if (nextIndex !== null) {
+			setActive(nextIndex)
+			tabRefs.current[nextIndex]?.focus()
 		}
 	}
 
@@ -27,6 +35,9 @@ export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) =
 				{items.map((tab, index) => (
 					<div
 						key={tab}
+						ref={(el) => {
+							tabRefs.current[index] = el
+						}}
 						role="tab"
 						tabIndex={active === index ? 0 : -1}
 						aria-selected={active === index}

package/components/Text/Text.tsx

@@ -4,12 +4,12 @@ import { getTypographyUtility } from "./Text.utils"
 import { P } from "./components/P"
 import { Small } from "./components/Small"
 import { Tiny } from "./components/Tiny"
-import { memo, type FC } from "react"
+import type { FC } from "react"
 import styles from "./Text.module.css"
 import type { TextProps } from "./Text.types"
 import { Micro } from "./components/Micro"
 
-export const Text: FC<TextProps> = memo((props) => {
+export const Text: FC<TextProps> = (props) => {
 	const textClasses: string = getClasses(props.className, styles.text, {
 		[styles.textPrimary]: props.emphasis === "primary",
 		[styles.textSecondary]: props.emphasis === "secondary",
@@ -54,4 +54,4 @@ export const Text: FC<TextProps> = memo((props) => {
 		default:
 			return <Div {...baseTextProps} />
 	}
-})
+}

package/components/Tile/Tile.tsx

@@ -4,7 +4,7 @@ import { Icon } from "../Icon"
 import { Text } from "../Text"
 import { Flex } from "../Flex"
 import styles from "./Tile.module.css"
-import { type FC } from "react"
+import { type FC, type KeyboardEvent } from "react"
 import type { TileProps } from "./Tile.types"
 import type { HeliosColorType } from "../../types/colors"
 
@@ -19,8 +19,16 @@ export const Tile: FC<TileProps> = ({
 	isRound,
 	appearance = "light",
 }) => {
+	const isClickable: boolean = !!onClick
 	const isLarge: boolean = size > 64
 
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		if ((event.key === "Enter" || event.key === " ") && onClick) {
+			event.preventDefault()
+			onClick(event as unknown as React.MouseEvent<HTMLDivElement>)
+		}
+	}
+
 	const resolvedColor: HeliosColorType = color
 
 	const tileColorClasses: Array<string> = getColorClasses(resolvedColor, appearance)
@@ -33,6 +41,7 @@ export const Tile: FC<TileProps> = ({
 	return (
 		<Flex
 			{...(onClick && { onClick })}
+			{...(isClickable && { role: "button" as const, tabIndex: 0, onKeyDown: handleKeyDown })}
 			className={tileClasses}
 			data-ui-component="Tile"
 			isCentered={true}

package/components/Tooltip/Tooltip.tsx

@@ -24,6 +24,7 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 	const triggerRef = useRef<HTMLDivElement | null>(null)
 	const popoverRef = useRef<HTMLDivElement | null>(null)
 	const id: string = useId()
+	const tooltipId: string = `tooltip-${id.replace(/:/g, "")}`
 	const anchorName: string = `--tooltip-${id.replace(/:/g, "")}`
 
 	const positionClass: string | undefined = POSITION_CLASS_MAP[position]
@@ -85,9 +86,10 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			popoverRef,
 			tooltipClasses,
 			anchorName,
+			tooltipId,
 			isOpen,
 		}),
-		[tooltipClasses, anchorName, isOpen],
+		[tooltipClasses, anchorName, tooltipId, isOpen],
 	)
 
 	return (

package/components/Tooltip/Tooltip.types.ts

@@ -22,6 +22,7 @@ export interface TooltipContextType {
 	popoverRef: RefObject<HTMLDivElement | null>
 	tooltipClasses: string
 	anchorName: string
+	tooltipId: string
 	isOpen: boolean
 }