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

package/components/Alert/Alert.tsx

@@ -3,7 +3,7 @@ import { ButtonGroup } from "../ButtonGroup"
 import { Flex } from "../Flex"
 import { Text } from "../Text"
 import { Icon } from "../Icon"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { getColorClasses } from "../../utils/colors"
 import { INTENTION_COLOR_MAP } from "../../constants/intentions"
 import styles from "./Alert.module.css"

package/components/Breadcrumb/Breadcrumb.meta.ts

@@ -12,6 +12,6 @@ export const meta: HeliosAttributeMeta<BreadcrumbProps> = {
 	_status: "nominal",
 	_category: "content",
 	items: {
-		type: "Array<BreadCrumbItem>",
+		type: "Array<BreadcrumbItem>",
 	},
 }

package/components/Breadcrumb/Breadcrumb.tsx

@@ -8,13 +8,13 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items }) => {
 	if (!items?.length) return null
 
 	return (
-		<Flex isYCentered={true} gap={2} isWrapped={true}>
-			{items?.map((item, key) => {
-				const isLast: boolean = Boolean(key + 1 === items?.length)
+		<Flex isYCentered={true} gap={2} isWrapped={true} data-ui-component="Breadcrumb">
+			{items?.map((item, index) => {
+				const isLast: boolean = Boolean(index + 1 === items?.length)
 				const AComponent: ElementType = item.as || "a"
 
 				return (
-					<Fragment key={key}>
+					<Fragment key={item.href ?? item.name}>
 						<AComponent
 							href={item.href}
 							onClick={item.onClick}

package/components/Browser/Browser.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./Browser.module.css"
 import type { BrowserProps } from "./Browser.types"
 import type { FC } from "react"
@@ -6,5 +6,9 @@ import type { FC } from "react"
 export const Browser: FC<BrowserProps> = ({ children }) => {
 	const browserClasses: string = getClasses(styles.browser)
 
-	return <div className={browserClasses}>{children}</div>
+	return (
+		<div className={browserClasses} data-ui-component="Browser">
+			{children}
+		</div>
+	)
 }

package/components/Button/Button.tsx

@@ -1,12 +1,12 @@
 "use client"
 
 import styles from "./Button.module.css"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import { Flex } from "../Flex"
 import { Icon } from "../Icon"
 import { Loading } from "../Loading"
 import { Text } from "../Text"
-import { useState, useId, type KeyboardEvent, type MouseEvent, type FC, useMemo } from "react"
+import { useState, useId, memo, type KeyboardEvent, type MouseEvent, type FC, useMemo } from "react"
 import { getColorClasses } from "../../utils/colors"
 import { INTENTION_COLOR_MAP } from "../../constants/intentions"
 import type { HeliosIconType } from "../../types/icons"
@@ -25,179 +25,181 @@ const BUTTON_ICON_LABEL_SIZE: Record<string, number> = {
 	normal: 16,
 }
 
-export const Button: FC<ButtonProps> = ({
-	accept,
-	appearance,
-	badge,
-	badgeIcon,
-	color,
-	flair,
-	icon,
-	iconLeft,
-	iconRight,
-	intent = "neutral",
-	isDisabled,
-	isIconOnly,
-	isLoading,
-	isRounded,
-	multiple,
-	onChange,
-	onClick,
-	role = "button",
-	size = "normal",
-	tabIndex,
-	type = "button",
-	value,
-	...restProps
-}) => {
-	const [isActive, setIsActive] = useState<boolean>(false)
-
-	const buttonId = useId()
-	const isIconOnlyLoading: boolean = !!isIconOnly && !!isLoading
-
-	const localIconLeft: HeliosIconType | undefined = icon || iconLeft
-	const localIconRight: HeliosIconType | undefined = iconRight
-
-	const consideredColor: HeliosColorType = color ? color : INTENTION_COLOR_MAP[intent]
-	const consideredAppearance: HeliosAppearanceType = useMemo(
-		() => (appearance ? appearance : consideredColor === "gray" ? "light" : "dark"),
-		[appearance, consideredColor],
-	)
-
-	const colorClasses = getColorClasses(consideredColor, consideredAppearance)
-	const buttonClasses = getClasses(styles.button, "relative cursor-pointer", ...colorClasses, {
-		[styles.buttonLight]: consideredAppearance === "light",
-
-		[styles.buttonActive]: isActive,
-		[styles.buttonDisabled]: isDisabled,
-		[styles.buttonLoading]: isLoading,
-
-		[styles.buttonRounded]: isRounded,
-		[styles.buttonRound]: !isRounded && size !== "tiny",
-		[styles.buttonRoundTiny]: !isRounded && size === "tiny",
-
-		[styles.buttonSizeNormal]: !size || size === "normal",
-		[styles.buttonSizeSmall]: size === "small",
-		[styles.buttonSizeTiny]: size === "tiny",
-
-		[styles.buttonWithIconLeft]: localIconLeft,
-		[styles.buttonWithIconRight]: localIconRight,
-		[styles.buttonIconOnly]: isIconOnly,
-		[styles.buttonIconOnlyLoading]: isIconOnlyLoading,
-	})
-
-	const buttonIconLeftClasses = getClasses("relative", styles.button__icon, {
-		[styles.button__iconLeft]: localIconLeft,
-	})
-
-	const buttonIconRightClasses = getClasses("relative", styles.button__icon, {
-		[styles.button__iconRight]: localIconRight,
-		[styles.button__iconRightLoading]: isLoading,
-	})
-
-	const buttonLoadingSize: 10 | 20 = size && size !== "normal" ? 10 : 20
-	const isFileType: boolean = type === "file"
-	const showFileLabel: boolean = isFileType && !isIconOnly
-
-	const baseInputClasses = getClasses(styles.button__baseElement, "sans fw-medium", {
-		tiny: size === "tiny" || size === "small",
-		"small ": size === "normal",
-		"radius-max": isRounded,
-		[styles.button__baseElementNormal]: size === "normal" && !isIconOnly,
-		[styles.button__baseElementSmall]: size === "small" && !isIconOnly,
-		[styles.button__baseElementTiny]: size === "tiny" && !isIconOnly,
-	})
-
-	const buttonLabelClasses: string = getClasses(baseInputClasses, styles.button__label)
-	const buttonInputClasses: string = getClasses(baseInputClasses, styles.button__input, {
-		[styles.button__inputFile]: isFileType,
-	})
-
-	const handleClick = (event: MouseEvent<HTMLDivElement>): void => {
-		if (isDisabled || isLoading) {
+export const Button: FC<ButtonProps> = memo(
+	({
+		accept,
+		appearance,
+		badge,
+		badgeIcon,
+		color,
+		flair,
+		icon,
+		iconLeft,
+		iconRight,
+		intent = "neutral",
+		isDisabled,
+		isIconOnly,
+		isLoading,
+		isRounded,
+		multiple,
+		onChange,
+		onClick,
+		role = "button",
+		size = "normal",
+		tabIndex,
+		type = "button",
+		value,
+		...restProps
+	}) => {
+		const [isActive, setIsActive] = useState<boolean>(false)
+
+		const buttonId = useId()
+		const isIconOnlyLoading: boolean = !!isIconOnly && !!isLoading
+
+		const localIconLeft: HeliosIconType | undefined = icon || iconLeft
+		const localIconRight: HeliosIconType | undefined = iconRight
+
+		const consideredColor: HeliosColorType = color ? color : INTENTION_COLOR_MAP[intent]
+		const consideredAppearance: HeliosAppearanceType = useMemo(
+			() => (appearance ? appearance : consideredColor === "gray" ? "light" : "dark"),
+			[appearance, consideredColor],
+		)
+
+		const colorClasses = getColorClasses(consideredColor, consideredAppearance)
+		const buttonClasses = getClasses(styles.button, "relative cursor-pointer", ...colorClasses, {
+			[styles.buttonLight]: consideredAppearance === "light",
+
+			[styles.buttonActive]: isActive,
+			[styles.buttonDisabled]: isDisabled,
+			[styles.buttonLoading]: isLoading,
+
+			[styles.buttonRounded]: isRounded,
+			[styles.buttonRound]: !isRounded && size !== "tiny",
+			[styles.buttonRoundTiny]: !isRounded && size === "tiny",
+
+			[styles.buttonSizeNormal]: !size || size === "normal",
+			[styles.buttonSizeSmall]: size === "small",
+			[styles.buttonSizeTiny]: size === "tiny",
+
+			[styles.buttonWithIconLeft]: localIconLeft,
+			[styles.buttonWithIconRight]: localIconRight,
+			[styles.buttonIconOnly]: isIconOnly,
+			[styles.buttonIconOnlyLoading]: isIconOnlyLoading,
+		})
+
+		const buttonIconLeftClasses = getClasses("relative", styles.button__icon, {
+			[styles.button__iconLeft]: localIconLeft,
+		})
+
+		const buttonIconRightClasses = getClasses("relative", styles.button__icon, {
+			[styles.button__iconRight]: localIconRight,
+			[styles.button__iconRightLoading]: isLoading,
+		})
+
+		const buttonLoadingSize: 10 | 20 = size && size !== "normal" ? 10 : 20
+		const isFileType: boolean = type === "file"
+		const showFileLabel: boolean = isFileType && !isIconOnly
+
+		const baseInputClasses = getClasses(styles.button__baseElement, "sans fw-medium", {
+			tiny: size === "tiny" || size === "small",
+			"small ": size === "normal",
+			"radius-max": isRounded,
+			[styles.button__baseElementNormal]: size === "normal" && !isIconOnly,
+			[styles.button__baseElementSmall]: size === "small" && !isIconOnly,
+			[styles.button__baseElementTiny]: size === "tiny" && !isIconOnly,
+		})
+
+		const buttonLabelClasses: string = getClasses(baseInputClasses, styles.button__label)
+		const buttonInputClasses: string = getClasses(baseInputClasses, styles.button__input, {
+			[styles.button__inputFile]: isFileType,
+		})
+
+		const handleClick = (event: MouseEvent<HTMLDivElement>): void => {
+			if (isDisabled || isLoading) {
+				event.preventDefault()
+				return
+			}
+
+			onClick?.(event)
+		}
+
+		const handleKeyUp = (): void => {
+			setIsActive(false)
+		}
+
+		const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+			if (event.key !== "Enter" && event.key !== " ") return
 			event.preventDefault()
-			return
+
+			if (isDisabled || isLoading || !buttonId) return
+
+			setIsActive(true)
+			document.getElementById(buttonId)?.click()
 		}
 
-		onClick?.(event)
-	}
-
-	const handleKeyUp = (): void => {
-		setIsActive(false)
-	}
-
-	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
-		if (event.key !== "Enter" && event.key !== " ") return
-		event.preventDefault()
-
-		if (isDisabled || isLoading || !buttonId) return
-
-		setIsActive(true)
-		document.getElementById(buttonId)?.click()
-	}
-
-	return (
-		<Flex
-			className={buttonClasses}
-			isInline={true}
-			isCentered={true}
-			onKeyDown={handleKeyDown}
-			onKeyUp={handleKeyUp}
-			data-ui-component="Button"
-			data-ui-size={size}
-			aria-disabled={isDisabled || isLoading}
-			aria-busy={isLoading}
-			aria-label={isIconOnly ? value : undefined}
-			tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
-			role={role}
-			{...(onClick && { onClick: handleClick })}
-			{...restProps}
-		>
-			{localIconLeft && !isIconOnlyLoading && (
-				<Flex className={buttonIconLeftClasses}>
-					<Icon icon={localIconLeft} size={BUTTON_ICON_SIZE[size] || 24} />
-				</Flex>
-			)}
-			<input
-				id={buttonId}
+		return (
+			<Flex
+				className={buttonClasses}
+				isInline={true}
+				isCentered={true}
+				onKeyDown={handleKeyDown}
+				onKeyUp={handleKeyUp}
+				data-ui-component="Button"
+				data-ui-size={size}
 				aria-disabled={isDisabled || isLoading}
-				disabled={isDisabled || isLoading}
-				type={type}
-				className={buttonInputClasses}
-				accept={accept}
-				multiple={multiple}
-				tabIndex={-1}
-				onChange={onChange}
-				defaultValue={isIconOnly || isFileType ? "" : value}
-			/>
-			{showFileLabel && (
-				<label htmlFor={buttonId} className={buttonLabelClasses}>
-					{value}
-				</label>
-			)}
-			{isLoading && <Loading size={buttonLoadingSize} className={styles.button__loading} />}
-			{localIconRight && !isIconOnlyLoading && (
-				<Flex className={buttonIconRightClasses}>
-					<Icon icon={localIconRight} size={BUTTON_ICON_SIZE[size] || 24} />
-				</Flex>
-			)}
-			{!!flair && (
-				<Flex className={styles.button__flair} isCentered={true}>
-					<Text type={size !== "normal" ? "micro" : "tiny"} fontFamily="mono">
-						{flair}
-					</Text>
-				</Flex>
-			)}
-			{(!!badge || !!badgeIcon) && (
-				<Flex className={styles.button__badge} isCentered={true} gap={2}>
-					{badgeIcon && <Icon icon={badgeIcon} size={BUTTON_ICON_LABEL_SIZE[size] || 16} />}
-					{badge && (
-						<Text type={size !== "normal" ? "tiny" : "tiny"} fontFamily="mono" emphasis="inherit">
-							{badge}
+				aria-busy={isLoading}
+				aria-label={isIconOnly ? value : undefined}
+				tabIndex={isDisabled ? -1 : (tabIndex ?? 0)}
+				role={role}
+				{...(onClick && { onClick: handleClick })}
+				{...restProps}
+			>
+				{localIconLeft && !isIconOnlyLoading && (
+					<Flex className={buttonIconLeftClasses}>
+						<Icon icon={localIconLeft} size={BUTTON_ICON_SIZE[size] || 24} />
+					</Flex>
+				)}
+				<input
+					id={buttonId}
+					aria-disabled={isDisabled || isLoading}
+					disabled={isDisabled || isLoading}
+					type={type}
+					className={buttonInputClasses}
+					accept={accept}
+					multiple={multiple}
+					tabIndex={-1}
+					onChange={onChange}
+					defaultValue={isIconOnly || isFileType ? "" : value}
+				/>
+				{showFileLabel && (
+					<label htmlFor={buttonId} className={buttonLabelClasses}>
+						{value}
+					</label>
+				)}
+				{isLoading && <Loading size={buttonLoadingSize} className={styles.button__loading} />}
+				{localIconRight && !isIconOnlyLoading && (
+					<Flex className={buttonIconRightClasses}>
+						<Icon icon={localIconRight} size={BUTTON_ICON_SIZE[size] || 24} />
+					</Flex>
+				)}
+				{!!flair && (
+					<Flex className={styles.button__flair} isCentered={true}>
+						<Text type={size !== "normal" ? "micro" : "tiny"} fontFamily="mono">
+							{flair}
 						</Text>
-					)}
-				</Flex>
-			)}
-		</Flex>
-	)
-}
+					</Flex>
+				)}
+				{(!!badge || !!badgeIcon) && (
+					<Flex className={styles.button__badge} isCentered={true} gap={2}>
+						{badgeIcon && <Icon icon={badgeIcon} size={BUTTON_ICON_LABEL_SIZE[size] || 16} />}
+						{badge && (
+							<Text type="tiny" fontFamily="mono" emphasis="inherit">
+								{badge}
+							</Text>
+						)}
+					</Flex>
+				)}
+			</Flex>
+		)
+	},
+)

package/components/ButtonGroup/ButtonGroup.tsx

@@ -1,7 +1,5 @@
-"use client"
-
-import { ButtonGroupProps } from "./ButtonGroup.types"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import type { ButtonGroupProps } from "./ButtonGroup.types"
+import { getClasses } from "@heliosgraphics/utils"
 import { Flex } from "../Flex"
 import styles from "./ButtonGroup.module.css"
 import type { FC } from "react"

package/components/Checkbox/Checkbox.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 { Icon } from "../Icon"
@@ -10,60 +10,66 @@ import styles from "./Checkbox.module.css"
 import type { FC } from "react"
 import type { CheckboxProps } from "./Checkbox.types"
 
-export const Checkbox: FC<CheckboxProps> = ({
-	color = "gray",
-	isChecked,
-	isVertical,
-	isLabelHidden = false,
-	isSmall,
-	description,
-	isDisabled,
-	isRequired,
-	onChange,
-	label,
-}) => {
-	const checkboxId: string = useId()
+export const Checkbox: FC<CheckboxProps> = memo(
+	({
+		color = "gray",
+		isChecked,
+		isVertical,
+		isLabelHidden = false,
+		isSmall,
+		description,
+		isDisabled,
+		isRequired,
+		onChange,
+		label,
+	}) => {
+		const checkboxId: string = useId()
 
-	const colorClasses = getColorClasses(color, "dark")
-	const checkboxClasses = getClasses(styles.checkbox, ...colorClasses, {
-		[styles.checkboxDisabled]: isDisabled,
-		[styles.checkboxSmall]: isSmall,
-	})
+		const colorClasses = getColorClasses(color, "dark")
+		const checkboxClasses = getClasses(styles.checkbox, ...colorClasses, {
+			[styles.checkboxDisabled]: isDisabled,
+			[styles.checkboxSmall]: isSmall,
+		})
 
-	const checkboxLabelClasses = getClasses(styles.checkbox__checkboxLabel, "flex gap-4", {
-		"flex-x-center flex-column": isVertical,
-		"flex-y-center": !isVertical,
-	})
+		const checkboxLabelClasses = getClasses(styles.checkbox__checkboxLabel, "flex gap-4", {
+			"flex-x-center flex-column": isVertical,
+			"flex-y-center": !isVertical,
+		})
 
-	return (
-		<div className={checkboxClasses}>
-			<label className={checkboxLabelClasses} htmlFor={checkboxId}>
-				<span className={styles.checkbox__mark}>
-					<input
-						type="checkbox"
-						checked={isChecked}
-						onChange={onChange}
-						disabled={isDisabled}
-						required={isRequired}
-						aria-label={isLabelHidden ? label : undefined}
-						id={checkboxId}
-					/>
-					<Icon icon="check" size={isSmall ? 14 : 18} className={styles.checkbox__checkboxIcon} />
-					<div className={styles.checkbox__checkboxMark} />
-				</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={checkboxClasses} data-ui-component="Checkbox">
+				<label className={checkboxLabelClasses} htmlFor={checkboxId}>
+					<span className={styles.checkbox__mark}>
+						<input
+							type="checkbox"
+							checked={isChecked}
+							onChange={onChange}
+							disabled={isDisabled}
+							required={isRequired}
+							aria-label={isLabelHidden ? label : undefined}
+							id={checkboxId}
+						/>
+						<Icon icon="check" size={isSmall ? 14 : 18} className={styles.checkbox__checkboxIcon} />
+						<div className={styles.checkbox__checkboxMark} />
+					</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/Clock/Clock.module.css

@@ -23,5 +23,5 @@
 
 .clock__second {
 	stroke: var(--ui-text-primary);
-	transform: all 100ms linear;
+	transition: transform 100ms linear;
 }

package/components/Clock/Clock.tsx

@@ -34,7 +34,7 @@ export const Clock: FC<ClockProps> = () => {
 	}
 
 	return (
-		<div className={styles.clock}>
+		<div className={styles.clock} data-ui-component="Clock">
 			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
 				<g transform="translate(128,128)">
 					<circle r="124" fill="none" strokeWidth="8" className={styles.clock__border} />

package/components/Column/Column.tsx

@@ -1,5 +1,5 @@
 import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import type { ColumnProps } from "./Column.types"
 import type { FC } from "react"
 
@@ -15,5 +15,5 @@ export const Column: FC<ColumnProps> = (props) => {
 		width: `${props.width ?? 960}px`,
 	}
 
-	return <div {...safeProps} style={columnStyle} className={columnClasses} />
+	return <div {...safeProps} style={columnStyle} className={columnClasses} data-ui-component="Column" />
 }

package/components/Confirm/Confirm.tsx

@@ -25,7 +25,7 @@ export const Confirm: FC<ConfirmProps> = ({
 
 	return (
 		<Dialog title={title} onClose={onCancel} isOpen={isOpen} isCentered={true}>
-			<Flex gap={12} isColumn={true}>
+			<Flex gap={12} isColumn={true} data-ui-component="Confirm">
 				{!!description && <Text type="paragraph">{description}</Text>}
 				<ButtonGroup align={buttonGroupAlign}>
 					{confirmOrder === "left" && confirmButton}

package/components/DatePicker/DatePicker.tsx

@@ -1,4 +1,4 @@
-import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getClasses } from "@heliosgraphics/utils"
 import styles from "./DatePicker.module.css"
 import type { DatePickerProps } from "./DatePicker.types"
 import type { FC } from "react"
@@ -6,5 +6,9 @@ import type { FC } from "react"
 export const DatePicker: FC<DatePickerProps> = ({ date }) => {
 	const datePickerClasses: string = getClasses(styles.datePicker)
 
-	return <div className={datePickerClasses}>{date}</div>
+	return (
+		<div className={datePickerClasses} data-ui-component="DatePicker">
+			{date}
+		</div>
+	)
 }

package/components/Debug/Debug.tsx

@@ -5,7 +5,7 @@ import { ButtonGroup } from "../ButtonGroup"
 import { Text } from "../Text"
 import { Flex } from "../Flex"
 import { Separator } from "../Separator"
-import { DebugProps } from "./Debug.types"
+import type { DebugProps } from "./Debug.types"
 import styles from "./Debug.module.css"
 import { useState } from "react"
 import type { FC } from "react"
@@ -19,7 +19,7 @@ export const Debug: FC<DebugProps> = ({ color = "gray", appearance = "dark" }) =
 	const [isClosed, setIsClosed] = useState(false)
 
 	return (
-		<Flex className={debugClasses}>
+		<Flex className={debugClasses} data-ui-component="Debug">
 			<Flex isColumn={true} gap={4}>
 				<Text type="micro" fontFamily="mono" emphasis="secondary">
 					color: {color}, appearance: {appearance}