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

package/components/Flex/Flex.tsx

@@ -1,8 +1,7 @@
-import { memo } from "react"
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
 import type { FlexProps } from "./Flex.types"
 
-export const Flex = memo((props: FlexProps) => {
+export const Flex = (props: FlexProps) => {
 	const { ref, ...restProps } = props
 	const flexClasses: string = getFlexUtility(restProps)
 	const safeProps = getSafeFlexProps(restProps)
@@ -12,4 +11,4 @@ export const Flex = memo((props: FlexProps) => {
 			{restProps.children}
 		</div>
 	)
-})
+}

package/components/Flex/Flex.types.ts

@@ -8,7 +8,7 @@ export type ResponsiveRadiusType = HeliosRadiusType | [HeliosRadiusType, HeliosR
 export interface FlexBaseProps {
 	className?: string
 	elevation?: "small" | "medium" | "large"
-	gap?: HeliosScaleType
+	gap?: ResponsiveScaleType
 	grow?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
 	isAround?: boolean
 	isBetween?: boolean
@@ -23,6 +23,8 @@ export interface FlexBaseProps {
 	isYCentered?: boolean
 	onClick?: MouseEventHandler<HTMLDivElement>
 	padding?: ResponsiveScaleType
+	paddingBlock?: ResponsiveScaleType
+	paddingInline?: ResponsiveScaleType
 	paddingX?: HeliosScaleType
 	paddingY?: HeliosScaleType
 	ref?: Ref<HTMLDivElement>

package/components/Flex/Flex.utils.ts

@@ -42,7 +42,21 @@ export const getFlexUtility = (props?: FlexProps): string => {
 		flexClasses.add(responsivePadding)
 	}
 
-	if (props.gap) flexClasses.add(`gap-${props.gap}`)
+	if (props.gap) {
+		const responsiveGap: string = getResponsiveScale(props.gap, "gap")
+		flexClasses.add(responsiveGap)
+	}
+
+	if (props.paddingBlock) {
+		const responsivePaddingBlock: string = getResponsiveScale(props.paddingBlock, "py")
+		flexClasses.add(responsivePaddingBlock)
+	}
+
+	if (props.paddingInline) {
+		const responsivePaddingInline: string = getResponsiveScale(props.paddingInline, "px")
+		flexClasses.add(responsivePaddingInline)
+	}
+
 	if (props.paddingY) flexClasses.add(`py-${props.paddingY}`)
 	if (props.paddingX) flexClasses.add(`px-${props.paddingX}`)
 
@@ -54,6 +68,25 @@ export const getFlexUtility = (props?: FlexProps): string => {
 	return Array.from(flexClasses).join(" ")
 }
 
+export const getResponsiveScale = (value?: ResponsiveScaleType, prefix: string = "p"): string => {
+	if (!value) return ""
+
+	const isArray: boolean = Boolean(value && value instanceof Array)
+	const classes = new Set<string>()
+
+	if (!isArray) return `${prefix}-${value}`
+
+	for (let index: number = 0; index < 3; index++) {
+		const element = (value as [HeliosScaleType, HeliosScaleType, HeliosScaleType])[index]
+
+		if (index === 0) classes.add(`mobile:${prefix}-${element ?? 0}`)
+		if (index === 1) classes.add(`tablet:${prefix}-${element ?? 0}`)
+		if (index === 2) classes.add(`${prefix}-${element ?? 0}`)
+	}
+
+	return Array.from(classes).join(" ")
+}
+
 export const getPadding = (paddingValue?: ResponsiveScaleType): string => {
 	if (!paddingValue) return ""
 
@@ -111,6 +144,8 @@ export const getSafeFlexProps = (props: any): Partial<FlexProps> => {
 		isXCentered: _isXCentered,
 		isYCentered: _isYCentered,
 		padding: _padding,
+		paddingBlock: _paddingBlock,
+		paddingInline: _paddingInline,
 		paddingX: _paddingX,
 		paddingY: _paddingY,
 		withBackground: _withBackground,

package/components/Flex/index.ts

@@ -1,6 +1,4 @@
 import { Flex } from "./Flex"
 
-Flex.displayName = "Flex"
-
 export { Flex }
 export type { FlexProps, ResponsiveRadiusType } from "./Flex.types"

package/components/Heading/Heading.tsx

@@ -9,9 +9,9 @@ import { H5 } from "./components/H5"
 import { H6 } from "./components/H6"
 import styles from "./Heading.module.css"
 import type { HeadingProps } from "./Heading.types"
-import { memo, type FC, type CSSProperties } from "react"
+import type { FC, CSSProperties } from "react"
 
-export const Heading: FC<HeadingProps> = memo((props) => {
+export const Heading: FC<HeadingProps> = (props) => {
 	const { level, lineClamp, style, className, ...rest } = props
 
 	const headingClasses: string = getClasses(className, styles.heading, {
@@ -60,4 +60,4 @@ export const Heading: FC<HeadingProps> = memo((props) => {
 		default:
 			return null
 	}
-})
+}

package/components/Icon/Icon.tsx

@@ -1,10 +1,10 @@
 import { getClasses } from "@heliosgraphics/utils"
 import { icons } from "@heliosgraphics/icons"
 import styles from "./Icon.module.css"
-import { memo, type FC } from "react"
+import type { FC } from "react"
 import type { IconProps } from "./Icon.types"
 
-export const Icon: FC<IconProps> = memo(({ icon, className, emphasis, size }) => {
+export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 	const iconSizeStyle = {
 		height: size + "px",
 		minHeight: size + "px",
@@ -27,4 +27,4 @@ export const Icon: FC<IconProps> = memo(({ icon, className, emphasis, size }) =>
 			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
 		/>
 	)
-})
+}

package/components/Input/Input.tsx

@@ -14,7 +14,9 @@ import type { InputProps } from "./Input.types"
 import type { ResultItem } from "../shared/ResultList"
 
 export const Input: FC<InputProps> = ({
+	className,
 	helperText,
+	id,
 	isDisabled,
 	autoComplete,
 	autoFocus,
@@ -36,7 +38,8 @@ export const Input: FC<InputProps> = ({
 	type = "text",
 	value,
 }) => {
-	const htmlFor: string = useId()
+	const generatedId: string = useId()
+	const htmlFor: string = id || generatedId
 	const helperId: string = `${htmlFor}-helper`
 
 	const filteredItems: Array<ResultItem> =
@@ -51,7 +54,7 @@ export const Input: FC<InputProps> = ({
 
 	const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
 
-	const inputClasses: string = getClasses(styles.input, "relative flex flex-column", {
+	const inputClasses: string = getClasses(styles.input, "relative flex flex-column", className, {
 		[styles.inputDisabled]: isDisabled,
 		[styles.inputShowingResults]: showingResults,
 	})

package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { getClasses } from "@heliosgraphics/utils"
 import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
 import styles from "./LayoutAsideContent.module.css"

package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import { getClasses } from "@heliosgraphics/utils"
 import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
 import styles from "./LayoutAsideFooter.module.css"

package/components/Loading/Loading.tsx

@@ -1,9 +1,12 @@
+"use client"
+
 import { getClasses } from "@heliosgraphics/utils"
+import { useId, type FC } from "react"
 import styles from "./Loading.module.css"
-import { memo, type FC } from "react"
 import type { LoadingProps } from "./Loading.types"
 
-export const Loading: FC<LoadingProps> = memo(({ className, size, emphasis }) => {
+export const Loading: FC<LoadingProps> = ({ className, size, emphasis }) => {
+	const titleId: string = useId()
 	const rSize = size / 2
 	const cSize = rSize + 2
 	const dashSize = size + cSize
@@ -24,9 +27,10 @@ export const Loading: FC<LoadingProps> = memo(({ className, size, emphasis }) =>
 			height={size + 4}
 			width={size + 4}
 			role="status"
-			aria-label="Loading"
+			aria-labelledby={titleId}
 			data-ui-component="Loading"
 		>
+			<title id={titleId}>Loading</title>
 			<circle
 				fill="none"
 				strokeWidth={4}
@@ -48,4 +52,4 @@ export const Loading: FC<LoadingProps> = memo(({ className, size, emphasis }) =>
 			/>
 		</svg>
 	)
-})
+}

package/components/Masonry/Masonry.meta.ts

@@ -19,10 +19,6 @@ export const meta: HeliosAttributeMeta<MasonryBaseProps> = {
 		type: "[number, number, number]",
 	},
 	gap: {
-		type: "[number, number, number]",
-	},
-	useBalancedLayout: {
-		type: "boolean",
-		isOptional: true,
+		type: "[HeliosScaleType, HeliosScaleType, HeliosScaleType]",
 	},
 }

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/Overlay/Overlay.tsx

@@ -18,7 +18,7 @@ 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" data-ui-component="Overlay">
 			<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/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/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,