@heliosgraphics/ui 2.0.0-alpha.100

package/components/Button/Button.module.css

@@ -0,0 +1,337 @@
+.button {
+	position: relative;
+
+	background-color: var(--bg);
+	color: var(--text);
+	transition: all var(--speed-xs) var(--ease-in-out-sine);
+
+	cursor: pointer;
+	user-select: none;
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.button:hover {
+	background-color: var(--bg-hover);
+}
+
+.button:focus-visible {
+	z-index: 1;
+
+	outline: 2px solid var(--border-focus);
+}
+
+.button:not(.buttonDisabled):active,
+.button:not(.buttonDisabled).buttonActive {
+	background-color: var(--bg-active);
+}
+
+.button:not(.buttonDisabled):active .button__badge,
+.button:not(.buttonDisabled).buttonActive .button__badge {
+	background-color: var(--bg-active);
+}
+
+.buttonDisabled {
+	background: var(--bg-disabled);
+	color: var(--text-disabled);
+}
+
+.buttonLight:not(.buttonDisabled) {
+	box-shadow: inset 0 0 0 1px var(--border);
+}
+
+.buttonLight:not(.buttonDisabled):hover {
+	box-shadow: inset 0 0 0 1px var(--border-hover);
+}
+
+.buttonLight:not(.buttonDisabled).active,
+.buttonLight:not(.buttonDisabled).buttonActive {
+	box-shadow: inset 0 0 0 1px var(--border-active);
+}
+
+/* Reset */
+.button .button__baseElement {
+	display: inline-flex;
+
+	background-color: transparent;
+	border: 0;
+	color: inherit;
+	transition: all var(--speed-xs) var(--ease-in-out-sine);
+
+	cursor: pointer;
+}
+
+.button .button__icon {
+	position: relative;
+	z-index: 2;
+
+	pointer-events: none;
+}
+
+/* Sizes */
+.buttonSizeNormal {
+	--button-badge-size: 24px;
+	--button-badge-margin: 8px;
+	--button-badge-radius: var(--radius-sm);
+
+	--button-flair-size: 20px;
+	--button-flair-offset: -10px;
+}
+
+.buttonSizeNormal,
+.buttonSizeNormal .button__baseElement {
+	height: 40px;
+	min-width: 40px;
+
+	line-height: 40px;
+}
+
+.buttonSizeNormal .button__baseElementNormal {
+	padding-inline: 11px;
+}
+
+.buttonSizeSmall {
+	--button-badge-size: 20px;
+	--button-badge-margin: 5px;
+	--button-badge-radius: var(--radius-sm);
+
+	--button-flair-size: 18px;
+	--button-flair-offset: -11px;
+}
+
+.buttonSizeSmall,
+.buttonSizeSmall .button__baseElement {
+	height: 30px;
+	min-width: 30px;
+
+	line-height: 30px;
+}
+
+.buttonSizeSmall .button__baseElementSmall {
+	padding-inline: 9px;
+}
+
+.buttonSizeSmall .button__baseElementSmall {
+	padding-inline: 9px;
+}
+
+.buttonSizeTiny {
+	--button-badge-size: 16px;
+	--button-badge-margin: 4px;
+	--button-badge-radius: var(--radius-xs);
+
+	--button-flair-size: 16px;
+	--button-flair-offset: -10px;
+}
+
+.buttonSizeTiny,
+.buttonSizeTiny .button__baseElement {
+	height: 24px;
+	min-width: 24px;
+
+	line-height: 24px;
+}
+
+.buttonSizeTiny .button__baseElementTiny {
+	padding-inline: 7px;
+}
+
+/* Loading */
+.buttonLoading,
+.buttonDisabled {
+	pointer-events: none;
+}
+
+.buttonDisabled .button__baseElement {
+	text-shadow: 0 0 0 transparent;
+}
+
+.buttonSizeNormal.buttonLoading:not(.buttonIconOnly) .button__baseElement {
+	padding-right: 40px;
+}
+
+.buttonSizeSmall.buttonLoading:not(.buttonIconOnly) .button__baseElement {
+	padding-right: 26px;
+}
+
+.buttonSizeTiny.buttonLoading:not(.buttonIconOnly) .button__baseElement {
+	padding-right: 24px;
+}
+
+.button__loading {
+	position: absolute;
+}
+
+.buttonSizeNormal:not(.buttonIconOnly) .button__loading {
+	right: 10px;
+}
+
+.buttonSizeSmall:not(.buttonIconOnly) .button__loading {
+	right: 6px;
+}
+
+.buttonSizeTiny:not(.buttonIconOnly) .button__loading {
+	right: 6px;
+}
+
+/* Badge */
+.button__badge {
+	z-index: 2;
+
+	height: var(--button-badge-size);
+	padding-inline: var(--space-2);
+	margin-right: var(--button-badge-margin);
+	margin-left: -2px;
+
+	background-color: var(--bg-active);
+	border-radius: var(--button-badge-radius);
+}
+
+/* Flair */
+.button__flair {
+	position: absolute;
+	top: var(--button-flair-offset);
+	right: var(--button-flair-offset);
+	z-index: 2;
+
+	height: var(--button-flair-size);
+	padding-inline: var(--space-3);
+	min-width: var(--button-flair-size);
+
+	background-color: var(--bg-active);
+	border-radius: 100px;
+	color: var(--text);
+}
+
+/* Icon */
+.buttonSizeNormal .button__iconLeft,
+.buttonSizeNormal .button__iconRight {
+	padding-left: 8px;
+	padding-right: 8px;
+}
+
+.buttonSizeNormal:not(.buttonIconOnly) .button__iconLeft {
+	margin-right: -12px;
+}
+
+.buttonSizeSmall:not(.buttonIconOnly) .button__iconLeft {
+	margin-right: -11px;
+	margin-top: -1px;
+}
+
+.buttonSizeSmall .button__iconLeft,
+.buttonSizeSmall .button__iconRight {
+	padding-left: 6px;
+	padding-right: 6px;
+}
+
+.buttonSizeTiny:not(.buttonIconOnly) .button__iconLeft {
+	margin-right: -6px;
+}
+
+.buttonSizeTiny .button__iconLeft,
+.buttonSizeTiny .button__iconRight {
+	padding-left: 5px;
+	padding-right: 5px;
+}
+
+/* IconRight */
+.buttonSizeNormal:not(.buttonIconOnly) .button__iconRight {
+	margin-left: -12px;
+}
+
+.buttonSizeSmall:not(.buttonIconOnly) .button__iconRight {
+	margin-left: -11px;
+	margin-top: -1px;
+}
+
+.buttonSizeTiny:not(.buttonIconOnly) .button__iconRight {
+	margin-left: -6px;
+}
+
+.button__iconRightLoading {
+	opacity: 0;
+}
+
+/* Icon:focus */
+.buttonSizeNormal.buttonIconOnly:not(.buttonIconOnlyLoading) .button__baseElement {
+	margin-left: -40px;
+	width: 40px;
+}
+
+.buttonSizeSmall.buttonIconOnly:not(.buttonIconOnlyLoading) .button__baseElement {
+	margin-left: -30px;
+	width: 30px;
+}
+
+.buttonSizeTiny.buttonIconOnly:not(.buttonIconOnlyLoading) .button__baseElement {
+	margin-left: -24px;
+	width: 24px;
+}
+
+.buttonSizeNormal.buttonWithIconLeft:not(.buttonIconOnly) .button__baseElement {
+	margin-left: -28px;
+	padding-left: 40px;
+}
+
+.buttonSizeSmall.buttonWithIconLeft:not(.buttonIconOnly) .button__baseElement {
+	margin-left: -19px;
+	padding-left: 28px;
+}
+
+.buttonSizeTiny.buttonWithIconLeft:not(.buttonIconOnly) .button__baseElement {
+	margin-left: -18px;
+	padding-left: 24px;
+}
+
+.buttonSizeNormal.buttonWithIconRight:not(.buttonIconOnly) .button__baseElement {
+	margin-right: -28px;
+	padding-right: 40px;
+}
+
+.buttonSizeSmall.buttonWithIconRight:not(.buttonIconOnly) .button__baseElement {
+	margin-right: -19px;
+	padding-right: 28px;
+}
+
+.buttonSizeTiny.buttonWithIconRight:not(.buttonIconOnly) .button__baseElement {
+	margin-right: -18px;
+	padding-right: 24px;
+}
+
+.buttonRounded {
+	border-radius: 24px;
+}
+
+.buttonRound,
+.buttonRound .button__baseElement {
+	border-radius: var(--radius-md);
+}
+
+.buttonRoundTiny,
+.buttonRoundTiny .button__baseElement {
+	border-radius: var(--radius-sm);
+}
+
+.button__input {
+	outline: none;
+}
+
+.button__label {
+	position: relative;
+	z-index: 1;
+
+	cursor: pointer;
+}
+
+.button__inputFile {
+	position: absolute;
+
+	opacity: 0.0001;
+	padding: 0;
+	height: 0;
+	width: 100%;
+
+	pointer-events: none;
+	cursor: pointer;
+}

package/components/Button/Button.spec.tsx

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

package/components/Button/Button.tsx

@@ -0,0 +1,207 @@
+"use client"
+
+import styles from "./Button.module.css"
+import { getClasses } from "@heliosgraphics/utils"
+import { Flex } from "../Flex"
+import { Icon } from "../Icon"
+import { Loading } from "../Loading"
+import { Text } from "../Text"
+import { useState, useId, useRef, 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 = {
+	tiny: 14,
+	small: 18,
+	normal: 24,
+} as const satisfies Record<string, number>
+
+const BUTTON_ICON_LABEL_SIZE = {
+	tiny: 12,
+	small: 14,
+	normal: 16,
+} as const satisfies Record<string, number>
+
+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 inputRef = useRef<HTMLInputElement>(null)
+	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) return
+
+		setIsActive(true)
+		inputRef.current?.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
+				ref={inputRef}
+				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>
+			)}
+			{(!!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>
+	)
+}
+
+Button.displayName = "Button"

package/components/Button/Button.types.ts

@@ -0,0 +1,30 @@
+import type { AriaRole, MouseEvent, MouseEventHandler, SyntheticEvent } from "react"
+import type { HeliosIntentionType } from "../../types/intentions"
+import type { HeliosAppearanceType, HeliosColorType } from "../../types/colors"
+import type { HeliosIconType } from "../../types/icons"
+import type { HeliosSizeType } from "../../types/scale"
+
+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 "../../types/meta"
+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: "nominal",
+	_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 "bun:test"
+import { ButtonGroup } from "./ButtonGroup"
+
+describe("ButtonGroup", () => {
+	it("should be defined", () => expect(ButtonGroup).toBeDefined())
+})