@heliosgraphics/ui 2.0.0-alpha.62

package/components/Button/Button.tsx

@@ -0,0 +1,203 @@
+"use client"
+
+import styles from "./Button.module.css"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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 { getColorClasses } from "../../utils/colors"
+import { INTENTION_COLOR_MAP } from "../../constants/intentions"
+import type { HeliosIconType } from "../../types/icons"
+import type { HeliosColorType, HeliosAppearanceType } from "../../types/colors"
+import type { ButtonProps } from "./Button.types"
+
+const BUTTON_ICON_SIZE: Record<string, number> = {
+	tiny: 14,
+	small: 18,
+	normal: 24,
+}
+
+const BUTTON_ICON_LABEL_SIZE: Record<string, number> = {
+	tiny: 12,
+	small: 14,
+	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) {
+			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()
+
+		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}
+			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}
+				role={role}
+				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}
+						</Text>
+					)}
+				</Flex>
+			)}
+		</Flex>
+	)
+}

package/components/Button/Button.types.ts

@@ -0,0 +1,27 @@
+import type { AriaRole, MouseEvent, MouseEventHandler, SyntheticEvent } from "react"
+import type { HeliosIntentionType, HeliosAppearanceType, HeliosIconType, HeliosSizeType, HeliosColorType } from "../.."
+
+export interface ButtonProps {
+	accept?: string
+	appearance?: HeliosAppearanceType
+	badge?: number | string
+	badgeIcon?: HeliosIconType
+	color?: HeliosColorType
+	flair?: number | string
+	icon?: HeliosIconType
+	iconLeft?: HeliosIconType
+	iconRight?: HeliosIconType
+	intent?: HeliosIntentionType
+	isDisabled?: boolean
+	isIconOnly?: boolean
+	isLoading?: boolean
+	isRounded?: boolean
+	multiple?: boolean
+	onChange?: (event?: MouseEvent | SyntheticEvent) => Promise<void> | void
+	onClick?: MouseEventHandler<HTMLDivElement>
+	role?: AriaRole
+	size?: HeliosSizeType
+	tabIndex?: number
+	type?: "button" | "submit" | "file"
+	value: string
+}

package/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from "./Button"
+export type { ButtonProps } from "./Button.types"

package/components/ButtonGroup/ButtonGroup.meta.ts

@@ -0,0 +1,37 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { ButtonGroupBaseProps } from "./ButtonGroup.types"
+
+export const meta: HeliosAttributeMeta<ButtonGroupBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-button-group-default",
+			content:
+				'<ButtonGroup align="right" isVertical={IS_VERTICAL} isJoined={IS_JOINED} align={ALIGN}><Button value="Back" icon="arrow-left" isIconOnly={IS_VERTICAL}/><Button intent="action" iconRight="arrow-right" isIconOnly={IS_VERTICAL} value="Send"/></ButtonGroup>',
+			description: "default",
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	align: {
+		type: "HeliosAlignType",
+		isOptional: true,
+		default: "left",
+	},
+	className: {
+		type: "string",
+		isOptional: true,
+	},
+	isJoined: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isVertical: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isWrapped: {
+		type: "boolean",
+		isOptional: true,
+	},
+}

package/components/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,55 @@
+.buttonGroup:has(div[data-ui-size="tiny"]):not(.buttonGroupJoin) {
+	gap: var(--space-3);
+}
+
+.buttonGroup:has(div[data-ui-size="small"]):not(.buttonGroupJoin) {
+	gap: var(--space-4);
+}
+
+.buttonGroup:has(div[data-ui-size="normal"]):not(.buttonGroupJoin) {
+	gap: var(--space-5);
+}
+
+.buttonGroupJoin {
+	gap: 0;
+}
+
+.buttonGroupJoin *[data-ui-component="Button"],
+.buttonGroupJoin *[data-ui-component="Button"]:hover,
+.buttonGroupJoin *[data-ui-component="Button"]:active {
+	box-shadow: 0 0 0 transparent;
+}
+
+.buttonGroupJoin.buttonGroupHorizontal > *[data-ui-component="Button"]:first-child,
+.buttonGroupJoin.buttonGroupHorizontal > *:first-child *[data-ui-component="Button"] {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.buttonGroupJoin.buttonGroupHorizontal > *[data-ui-component="Button"]:not(:first-child):not(:last-child),
+.buttonGroupJoin.buttonGroupHorizontal > *:not(:first-child):not(:last-child) *[data-ui-component="Button"] {
+	border-radius: 0;
+}
+
+.buttonGroupJoin.buttonGroupHorizontal > *[data-ui-component="Button"]:last-child,
+.buttonGroupJoin.buttonGroupHorizontal > *:last-child *[data-ui-component="Button"] {
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+
+.buttonGroupJoin.buttonGroupVertical > *[data-ui-component="Button"]:first-child,
+.buttonGroupJoin.buttonGroupVertical > *:first-child *[data-ui-component="Button"] {
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+.buttonGroupJoin.buttonGroupVertical > *[data-ui-component="Button"]:not(:first-child):not(:last-child),
+.buttonGroupJoin.buttonGroupVertical > *:not(:first-child):not(:last-child) *[data-ui-component="Button"] {
+	border-radius: 0;
+}
+
+.buttonGroupJoin.buttonGroupVertical > *[data-ui-component="Button"]:last-child,
+.buttonGroupJoin.buttonGroupVertical > *:last-child *[data-ui-component="Button"] {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}

package/components/ButtonGroup/ButtonGroup.spec.tsx

@@ -0,0 +1,6 @@
+import { describe, expect, it } from "vitest"
+import { ButtonGroup } from "./ButtonGroup"
+
+describe("ButtonGroup", () => {
+	it("should be defined", () => expect(ButtonGroup).toBeDefined())
+})

package/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,41 @@
+"use client"
+
+import { ButtonGroupProps } from "./ButtonGroup.types"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { Flex } from "../Flex"
+import styles from "./ButtonGroup.module.css"
+import type { FC } from "react"
+
+export const ButtonGroup: FC<ButtonGroupProps> = ({
+	align = "left",
+	children,
+	className,
+	isJoined,
+	isVertical,
+	isWrapped,
+}) => {
+	const buttonGroupClasses: string = getClasses(className, styles.buttonGroup, {
+		[styles.buttonGroupJoin]: isJoined,
+		[styles.buttonGroupVertical]: isVertical,
+		[styles.buttonGroupHorizontal]: !isVertical,
+
+		["justify-flex-start"]: !isVertical && align === "left",
+		["justify-flex-end"]: !isVertical && align === "right",
+		["flex-x-center"]: !isVertical && align === "center",
+
+		["align-flex-start"]: isVertical && align === "left",
+		["align-flex-end"]: isVertical && align === "right",
+		["flex-y-center"]: (isVertical && align === "center") || !isVertical,
+	})
+
+	return (
+		<Flex
+			className={buttonGroupClasses}
+			isColumn={!!isVertical}
+			isWrapped={!!isWrapped}
+			data-ui-component="ButtonGroup"
+		>
+			{children}
+		</Flex>
+	)
+}

package/components/ButtonGroup/ButtonGroup.types.ts

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from "react"
+
+export interface ButtonGroupBaseProps {
+	align?: "left" | "center" | "right"
+	className?: string
+	isJoined?: boolean
+	isVertical?: boolean
+	isWrapped?: boolean
+}
+
+export type ButtonGroupProps = PropsWithChildren<ButtonGroupBaseProps>

package/components/ButtonGroup/index.ts

@@ -0,0 +1,2 @@
+export { ButtonGroup } from "./ButtonGroup"
+export type { ButtonGroupProps } from "./ButtonGroup.types"

package/components/Checkbox/Checkbox.meta.ts

@@ -0,0 +1,54 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { CheckboxProps } from "./Checkbox.types"
+
+export const meta: HeliosAttributeMeta<CheckboxProps> = {
+	_patterns: [
+		{
+			id: "ui-checkbox-default",
+			description: "default",
+			content:
+				"<Checkbox isChecked={IS_CHECKED} color={COLOR} label={LABEL} onChange={FUNCTION} isDisabled={IS_DISABLED} isSmall={IS_SMALL} isVertical={IS_VERTICAL} description={DESCRIPTION}/>",
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	color: {
+		type: "HeliosColorType",
+		isOptional: true,
+	},
+	description: {
+		type: "string",
+		isOptional: true,
+	},
+	isChecked: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isDisabled: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isLabelHidden: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isRequired: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isSmall: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isVertical: {
+		type: "boolean",
+		isOptional: true,
+	},
+	label: {
+		type: "string",
+	},
+	onChange: {
+		type: "(event?: ChangeEvent) => void",
+		isOptional: true,
+	},
+}

package/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,99 @@
+.checkbox {
+	--checkbox-size: 24px;
+	--checkbox-margin: 3px;
+	--checkbox-radius: var(--radius-sm);
+
+	position: relative;
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.checkboxSmall {
+	--checkbox-size: 18px;
+	--checkbox-margin: 2px;
+	--checkbox-radius: var(--radius-xs);
+}
+
+.checkboxDisabled {
+	pointer-events: none;
+	cursor: not-allowed;
+}
+
+.checkboxDisabled .checkbox__checkboxLabel {
+	color: var(--text-disabled);
+}
+
+.checkboxDisabled .checkbox__checkboxIcon {
+	color: var(--text-disabled, var(--ui-text-disabled-gray));
+}
+
+.checkboxDisabled .checkbox__checkboxMark {
+	border-color: var(--ui-border-secondary);
+}
+
+.checkbox input {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	appearance: none;
+	display: flex;
+	overflow: hidden;
+	height: var(--checkbox-size);
+	width: var(--checkbox-size);
+
+	border-radius: var(--checkbox-radius);
+	outline-color: var(--border-focus);
+
+	cursor: pointer;
+}
+
+.checkbox input:active ~ .checkbox__checkboxIcon {
+	transform: scale(1.1);
+}
+
+.checkbox input:checked ~ .checkbox__checkboxIcon {
+	opacity: 1;
+}
+
+.checkbox__checkboxLabel {
+	position: relative;
+
+	max-width: max-content;
+
+	color: var(--border-selected);
+
+	cursor: pointer;
+	user-select: none;
+}
+
+.checkbox__mark {
+	position: relative;
+
+	height: var(--checkbox-size);
+	min-width: var(--checkbox-size);
+	width: var(--checkbox-size);
+}
+
+.checkbox__checkboxMark {
+	height: 100%;
+	overflow: hidden;
+	width: 100%;
+
+	background: var(--ui-bg-primary);
+	border-radius: var(--checkbox-radius);
+	border: 1px solid var(--ui-border-primary);
+
+	pointer-events: none;
+}
+
+.checkbox__checkboxIcon {
+	position: absolute;
+	left: var(--checkbox-margin);
+	top: var(--checkbox-margin);
+
+	opacity: 0;
+
+	color: var(--border-selected);
+	pointer-events: none;
+}

package/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { useId } from "react"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getColorClasses } from "../../utils/colors"
+import { Flex, Icon, Text } from "../.."
+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,
+	onChange,
+	label,
+}) => {
+	const checkboxId: string = useId()
+
+	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,
+	})
+
+	return (
+		<div className={checkboxClasses}>
+			<label className={checkboxLabelClasses} htmlFor={checkboxId}>
+				<span className={styles.checkbox__mark}>
+					<input type="checkbox" checked={isChecked} onChange={onChange} disabled={isDisabled} 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}
+							</Text>
+						)}
+					</Flex>
+				)}
+			</label>
+		</div>
+	)
+}

package/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,17 @@
+import type { ChangeEventHandler } from "react"
+import type { HeliosColorType } from "../.."
+
+export interface BaseCheckboxProps {
+	color?: HeliosColorType
+	description?: string
+	isChecked?: boolean
+	isDisabled?: boolean
+	isLabelHidden?: boolean
+	isRequired?: boolean
+	isSmall?: boolean
+	isVertical?: boolean
+	label: string
+	onChange?: ChangeEventHandler<HTMLInputElement>
+}
+
+export interface CheckboxProps extends BaseCheckboxProps {}

package/components/Checkbox/index.ts

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

package/components/Clock/Clock.meta.ts

@@ -0,0 +1,14 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { ClockProps } from "./Clock.types"
+
+export const meta: HeliosAttributeMeta<ClockProps> = {
+	_patterns: [
+		{
+			id: "ui-clock-default",
+			description: "default",
+			content: "<Clock />",
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+}

package/components/Clock/Clock.module.css

@@ -0,0 +1,27 @@
+.clock {
+	height: 64px;
+	width: 64px;
+
+	border-radius: 64px;
+}
+
+.clock__center {
+	fill: var(--ui-text-primary);
+}
+
+.clock__border {
+	stroke: var(--ui-border-secondary);
+}
+
+.clock__hour {
+	stroke: var(--ui-text-tertiary);
+}
+
+.clock__minute {
+	stroke: var(--ui-text-tertiary);
+}
+
+.clock__second {
+	stroke: var(--ui-text-primary);
+	transform: all 100ms linear;
+}