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

package/components/Masonry/Masonry.tsx

@@ -1,24 +1,37 @@
 "use client"
 
-import { Masonry as MasonryPlock } from "react-plock"
-import { Children, type ReactElement, type FC } from "react"
+import { type FC, useMemo } from "react"
 import type { MasonryProps } from "./Masonry.types"
 
-export const Masonry: FC<MasonryProps> = ({ children, columns, gap, breakpoints, useBalancedLayout }) => {
+export const Masonry: FC<MasonryProps> = ({
+	children,
+	columns = [1, 2, 3],
+	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 mappedChildren = Children.toArray(children).map((child) => <div className="Row">{child}</div>) as ReactElement[]
+	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; }
+		}
+
+		@media (min-width: ${breakpoints[2]}px) {
+			.${id} { column-count: ${columns[2]}; column-gap: ${gap[2]}px; }
+			.${id} > * { margin-bottom: ${gap[2]}px; }
+		}
+	`
 
 	return (
-		<MasonryPlock
-			items={mappedChildren}
-			render={(item) => <>{item}</>}
-			config={{
-				columns: columns,
-				gap: gap,
-				media: breakpoints,
-				useBalancedLayout: Boolean(useBalancedLayout),
-			}}
-		/>
+		<>
+			<style dangerouslySetInnerHTML={{ __html: mediaStyles }} />
+			<div className={id}>{children}</div>
+		</>
 	)
 }

package/components/Masonry/Masonry.types.ts

@@ -1,10 +1,10 @@
 import type { PropsWithChildren } from "react"
+import type { HeliosScaleType } from "../../types/scale"
 
 export interface MasonryBaseProps {
-	columns: [number, number, number]
-	gap: [number, number, number]
-	breakpoints: [number, number, number]
-	useBalancedLayout?: boolean
+	columns?: [number, number, number]
+	gap?: [HeliosScaleType, HeliosScaleType, HeliosScaleType]
+	breakpoints?: [number, number, number]
 }
 
 export type MasonryProps = PropsWithChildren<MasonryBaseProps>

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

@@ -1,5 +1,3 @@
-"use client"
-
 import type { FC } from "react"
 import { Input } from "../../../Input"
 import { getClasses } from "@heliosgraphics/utils"

package/components/Overlay/Overlay.module.css

@@ -7,18 +7,50 @@
 	height: 100%;
 	overflow: auto;
 	width: 100%;
+
+	display: grid;
+	opacity: 1;
+	transition:
+		opacity var(--speed-md) ease-in-out,
+		display var(--speed-md) ease-in-out allow-discrete;
+}
+
+.overlay[data-open="false"] {
+	display: none;
+	opacity: 0;
+}
+
+@starting-style {
+	.overlay[data-open="true"] {
+		opacity: 0;
+	}
 }
 
 .overlay__content {
 	height: 100%;
-	opacity: 0;
+	opacity: 1;
+	transform: translateY(0);
 
-	animation: animOverlayContent var(--speed-sm) ease-in-out forwards 120ms;
-	transform: translateY(-24px);
+	transition:
+		opacity var(--speed-sm) ease-in-out,
+		transform var(--speed-sm) ease-in-out;
+	transition-delay: 120ms;
 
 	pointer-events: none;
 }
 
+.overlay[data-open="false"] .overlay__content {
+	opacity: 0;
+	transform: translateY(-24px);
+}
+
+@starting-style {
+	.overlay[data-open="true"] .overlay__content {
+		opacity: 0;
+		transform: translateY(-24px);
+	}
+}
+
 .overlay__contentCentered {
 	align-content: center;
 }
@@ -36,26 +68,18 @@
 	height: 100%;
 	width: 100%;
 
-	animation: animOverlayBackground var(--speed-md) ease-in-out forwards;
 	background-color: rgba(0, 0, 0, 0.85);
+	opacity: 1;
+
+	transition: opacity var(--speed-md) ease-in-out;
 }
 
-@keyframes animOverlayBackground {
-	0% {
-		opacity: 0;
-	}
-	100% {
-		opacity: 1;
-	}
+.overlay[data-open="false"] .overlay__layer {
+	opacity: 0;
 }
 
-@keyframes animOverlayContent {
-	0% {
+@starting-style {
+	.overlay[data-open="true"] .overlay__layer {
 		opacity: 0;
-		transform: translateY(-24px);
-	}
-	100% {
-		opacity: 1;
-		transform: translateY(0);
 	}
 }

package/components/Overlay/Overlay.tsx

@@ -4,8 +4,6 @@ import type { OverlayProps } from "./Overlay.types"
 import { getClasses } from "@heliosgraphics/utils"
 
 export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpen }) => {
-	if (!isOpen) return null
-
 	const hideFunction = (event: MouseEvent<HTMLDivElement>): void => {
 		event.preventDefault()
 		event.stopPropagation()
@@ -18,7 +16,14 @@ export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpe
 	})
 
 	return (
-		<section className={styles.overlay} data-ui-component="Overlay">
+		<section
+			className={styles.overlay}
+			role="dialog"
+			aria-modal="true"
+			aria-hidden={!isOpen}
+			data-ui-component="Overlay"
+			data-open={isOpen}
+		>
 			<div className={contentClasses}>{children}</div>
 			<div className={styles.overlay__layer} onClick={hideFunction} />
 		</section>

package/components/Pie/Pie.tsx

@@ -19,6 +19,7 @@ export const Pie: FC<PieProps> = ({ color, size, data }) => {
 			aria-label={`Pie chart with ${data.length} segments`}
 			data-ui-component="Pie"
 		>
+			<title>{data.map((item) => `${item.name}: ${item.value}`).join(", ")}</title>
 			{data.map((item, index) => {
 				const thisData: Array<PieItem> = data.slice(0, index)
 				const thisSize = thisData?.reduce((a, b) => a + b.value, 0)

package/components/Pill/Pill.tsx

@@ -7,11 +7,11 @@ import styles from "./Pill.module.css"
 import { memo, type FC } from "react"
 import type { PillProps } from "./Pill.types"
 
-const PILL_ICON_SIZE: Record<string, number> = {
+const PILL_ICON_SIZE = {
 	tiny: 12,
 	small: 16,
 	normal: 24,
-}
+} as const satisfies Record<string, number>
 
 export const Pill: FC<PillProps> = memo(
 	({

package/components/Progress/Progress.meta.ts

@@ -11,6 +11,10 @@ export const meta: HeliosAttributeMeta<ProgressProps> = {
 	],
 	_status: "nominal",
 	_category: "core",
+	"aria-label": {
+		type: "string",
+		isOptional: true,
+	},
 	isSmall: {
 		type: "boolean",
 		isOptional: true,

package/components/Progress/Progress.tsx

@@ -4,7 +4,13 @@ import { getColorClasses } from "../../utils/colors"
 import type { FC } from "react"
 import type { ProgressProps } from "./Progress.types"
 
-export const Progress: FC<ProgressProps> = ({ color = "blue", isSmall, max = 100, value = 0 }) => {
+export const Progress: FC<ProgressProps> = ({
+	"aria-label": ariaLabel,
+	color = "blue",
+	isSmall,
+	max = 100,
+	value = 0,
+}) => {
 	const progressColorClasses: Array<string> = getColorClasses(color, "dark")
 	const progressClasses: string = getClasses(styles.progress, ...progressColorClasses, {
 		[styles.progressSmall]: isSmall,
@@ -15,7 +21,7 @@ export const Progress: FC<ProgressProps> = ({ color = "blue", isSmall, max = 100
 			className={progressClasses}
 			max={max}
 			value={value}
-			aria-label={`Progress: ${value} of ${max}`}
+			aria-label={ariaLabel ?? `Progress: ${value} of ${max}`}
 			data-ui-component="Progress"
 		/>
 	)

package/components/Progress/Progress.types.ts

@@ -1,6 +1,7 @@
 import type { HeliosColorType } from "../../types/colors"
 
 export interface ProgressProps {
+	"aria-label"?: string
 	isSmall?: boolean
 	color: HeliosColorType
 	max: number

package/components/Radio/Radio.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useId, memo } from "react"
+import { useId } from "react"
 import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { Flex } from "../Flex"
@@ -9,69 +9,63 @@ import styles from "./Radio.module.css"
 import type { FC } from "react"
 import type { RadioProps } from "./Radio.types"
 
-export const Radio: FC<RadioProps> = memo(
-	({
-		color = "gray",
-		isChecked,
-		isVertical,
-		isLabelHidden = false,
-		isSmall,
-		description,
-		isDisabled,
-		isRequired,
-		onChange,
-		label,
-		name,
-		value,
-	}) => {
-		const radioId: string = useId()
+export const Radio: FC<RadioProps> = ({
+	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} 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}
+	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>
+						{description && (
+							<Text type="tiny" emphasis="secondary">
+								{description}
 							</Text>
-							{description && (
-								<Text type="tiny" emphasis="secondary">
-									{description}
-								</Text>
-							)}
-						</Flex>
-					)}
-				</label>
-			</div>
-		)
-	},
-)
+						)}
+					</Flex>
+				)}
+			</label>
+		</div>
+	)
+}

package/components/Range/Range.meta.ts

@@ -0,0 +1,26 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { RangeProps } from "./Range.types"
+
+export const meta: HeliosAttributeMeta<RangeProps> = {
+	_patterns: [
+		{
+			id: "ui-range-default",
+			description: "default",
+			content: `<Range value={3} min={0} max={100} step={1} label={LABEL} onChange={FUNCTION} isDisabled={IS_DISABLED}/>`,
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+	isDisabled: { type: "boolean", isOptional: true },
+	isLabelHidden: { type: "boolean", isOptional: true },
+	label: { type: "string" },
+	max: { type: "number", isOptional: true, default: 100 },
+	min: { type: "number", isOptional: true, default: 0 },
+	name: { type: "string", isOptional: true },
+	onChange: {
+		type: "(event?: ChangeEvent<HTMLInputElement>) => unknown",
+		isOptional: true,
+	},
+	step: { type: "number", isOptional: true, default: 1 },
+	value: { type: "number", isOptional: true },
+}

package/components/Range/Range.module.css

@@ -0,0 +1,68 @@
+.range {
+	width: 100%;
+}
+
+.range__input {
+	width: 100%;
+	height: 4px;
+	margin: var(--space-3) 0;
+
+	appearance: none;
+	background: var(--ui-bg-soft-gray);
+	border-radius: var(--radius-sm);
+	outline: none;
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+	cursor: pointer;
+}
+
+.range__input::-webkit-slider-thumb {
+	appearance: none;
+	width: 18px;
+	height: 18px;
+
+	background: var(--ui-text-primary);
+	border: 2px solid var(--ui-bg-primary);
+	border-radius: var(--radius-round);
+	box-shadow: 0 0 0 1px var(--ui-border-primary);
+	cursor: pointer;
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+}
+
+.range__input::-moz-range-thumb {
+	width: 18px;
+	height: 18px;
+
+	background: var(--ui-text-primary);
+	border: 2px solid var(--ui-bg-primary);
+	border-radius: var(--radius-round);
+	box-shadow: 0 0 0 1px var(--ui-border-primary);
+	cursor: pointer;
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+}
+
+.range__input:focus::-webkit-slider-thumb {
+	box-shadow: 0 0 0 4px var(--ui-border-secondary);
+}
+
+.range__input:focus::-moz-range-thumb {
+	box-shadow: 0 0 0 4px var(--ui-border-secondary);
+}
+
+.range__input::-webkit-slider-runnable-track {
+	height: 4px;
+
+	background: var(--ui-bg-soft-gray);
+	border-radius: var(--radius-sm);
+}
+
+.range__input::-moz-range-track {
+	height: 4px;
+
+	background: var(--ui-bg-soft-gray);
+	border-radius: var(--radius-sm);
+}
+
+.rangeDisabled {
+	pointer-events: none;
+	opacity: 0.5;
+}

package/components/Range/Range.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import { useId } from "react"
+import { getClasses } from "@heliosgraphics/utils"
+import { InputLabel } from "../shared/InputLabel"
+import styles from "./Range.module.css"
+import type { FC } from "react"
+import type { RangeProps } from "./Range.types"
+
+export const Range: FC<RangeProps> = ({
+	isDisabled,
+	isLabelHidden = false,
+	label,
+	max = 100,
+	min = 0,
+	name,
+	onChange,
+	step = 1,
+	value,
+}) => {
+	const htmlFor: string = useId()
+
+	const rangeClasses: string = getClasses(styles.range, {
+		[styles.rangeDisabled]: isDisabled,
+	})
+
+	return (
+		<div className={rangeClasses} data-ui-component="Range">
+			<InputLabel id={htmlFor} label={label} isDisabled={!!isDisabled} isHidden={!!isLabelHidden} />
+			<input
+				className={styles.range__input}
+				disabled={isDisabled}
+				id={htmlFor}
+				max={max}
+				min={min}
+				name={name}
+				onChange={onChange}
+				step={step}
+				type="range"
+				value={value}
+				aria-valuemin={min}
+				aria-valuemax={max}
+				aria-valuenow={value}
+			/>
+		</div>
+	)
+}

package/components/Range/Range.types.ts

@@ -0,0 +1,13 @@
+import type { ChangeEventHandler } from "react"
+
+export interface RangeProps {
+	isDisabled?: boolean
+	isLabelHidden?: boolean
+	label: string
+	max?: number
+	min?: number
+	name?: string
+	onChange?: ChangeEventHandler<HTMLInputElement>
+	step?: number
+	value?: number
+}

package/components/Range/index.ts

@@ -0,0 +1 @@
+export { Range } from "./Range"

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

@@ -1,10 +1,11 @@
 import styles from "./SegmentButton.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import { Icon } from "../../../Icon"
+import type { FC } from "react"
 import type { HeliosIconType } from "../../../../types/icons"
 import type { SegmentButtonProps } from "./SegmentButton.types"
 
-export const SegmentButton = ({ isActive, value, icon, iconLeft, iconRight, onClick, ref }: SegmentButtonProps) => {
+export const SegmentButton: FC<SegmentButtonProps> = ({ isActive, value, icon, iconLeft, iconRight, onClick, ref }) => {
 	const segmentButtonClasses: string = getClasses(styles.segmentButton, {
 		[styles.segmentButtonActive]: isActive,
 	})

package/components/Select/Select.meta.ts

@@ -32,6 +32,10 @@ export const meta: HeliosAttributeMeta<SelectProps> = {
 	onChange: {
 		type: "ChangeEventHandler<HTMLSelectElement>",
 	},
+	isRequired: {
+		type: "boolean",
+		isOptional: true,
+	},
 	selectedValue: {
 		type: "string",
 		isOptional: true,

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" />
 }