@heliosgraphics/ui 2.0.0-alpha.100

package/components/Pie/Pie.types.ts

@@ -0,0 +1,12 @@
+import type { HeliosColorType } from "../../types/colors"
+
+export interface PieItem {
+	name?: string
+	value: number
+}
+
+export interface PieProps {
+	color: HeliosColorType
+	data: Array<PieItem>
+	size: number
+}

package/components/Pie/index.ts

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

package/components/Pill/Pill.meta.ts

@@ -0,0 +1,64 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { PillProps } from "./Pill.types"
+
+export const meta: HeliosAttributeMeta<PillProps> = {
+	_patterns: [
+		{
+			id: "ui-pill-default",
+			description: "default",
+			content: `<Pill label={PILL_LABEL} color={COLOR}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	appearance: {
+		type: "HeliosAppearanceType",
+		isOptional: true,
+		default: "light",
+	},
+	className: {
+		type: "string",
+		isOptional: true,
+	},
+	color: {
+		type: "HeliosColorType",
+		default: "gray",
+	},
+	icon: {
+		type: "HeliosIconType",
+		isOptional: true,
+	},
+	isEllipsis: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isLabelHidden: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isLoading: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isMono: {
+		type: "string",
+		isOptional: true,
+	},
+	isRounded: {
+		type: "string",
+		isOptional: true,
+	},
+	onClick: {
+		type: "HeliosOnClickType",
+		isOptional: true,
+	},
+	label: {
+		type: "string",
+		isOptional: true,
+	},
+	size: {
+		type: "HeliosSizeType",
+		isOptional: true,
+		default: "normal",
+	},
+}

package/components/Pill/Pill.module.css

@@ -0,0 +1,64 @@
+.pill {
+	position: relative;
+
+	background-color: var(--bg);
+	border-radius: var(--radius-sm);
+	color: var(--text);
+	transition: all var(--speed-xs) var(--ease-in-out-sine);
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.pillLight {
+	border: 1px solid var(--border);
+}
+
+.pillRounded {
+	border-radius: 30px;
+}
+
+.pillNormal {
+	height: 30px;
+	padding: 0 8px;
+}
+
+.pillNormal.pillIconOnly {
+	padding: 0 3px;
+}
+
+.pillSmall {
+	height: 24px;
+	padding: 0 6px;
+}
+
+.pillSmall.pillIconOnly {
+	padding: 0 4px;
+}
+
+.pillSmall.pillRounded:not(.pillIconOnly) {
+	padding: 0 8px;
+}
+
+.pillTiny {
+	height: 20px;
+	padding: 0 4px;
+}
+
+.pillTiny.pillIconOnly {
+	padding: 0 4px;
+}
+
+.pillTiny.pillRounded:not(.pillIconOnly) {
+	padding: 0 8px;
+}
+
+.pillEllipsis {
+	overflow: hidden;
+	max-width: 100%;
+}
+
+.pillEllipsis :global(.text) {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

package/components/Pill/Pill.tsx

@@ -0,0 +1,89 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { getColorClasses } from "../../utils/colors"
+import { Flex } from "../Flex"
+import { Text } from "../Text"
+import { Icon } from "../Icon"
+import { Loading } from "../Loading"
+import styles from "./Pill.module.css"
+import { memo, type FC, type KeyboardEvent } from "react"
+import type { PillProps } from "./Pill.types"
+
+const PILL_ICON_SIZE = {
+	tiny: 12,
+	small: 16,
+	normal: 24,
+} as const satisfies Record<string, number>
+
+const PILL_LOADING_SIZE = {
+	tiny: 10,
+	small: 10,
+	normal: 20,
+} as const satisfies Record<string, 10 | 20 | 40>
+
+export const Pill: FC<PillProps> = memo(
+	({
+		appearance = "light",
+		color = "gray",
+		className,
+		icon,
+		isEllipsis,
+		isLabelHidden,
+		isLoading,
+		isMono,
+		isRounded,
+		label,
+		onClick,
+		size = "normal",
+	}) => {
+		const pillColorClasses: Array<string> = getColorClasses(color, appearance)
+		const pillClasses = getClasses(styles.pill, "non-selectable break-word", ...pillColorClasses, className, {
+			[styles.pillRounded]: isRounded,
+			[`radius-md`]: !isRounded,
+
+			[styles.pillLight]: appearance === "light",
+
+			[styles.pillNormal]: !size || size === "normal",
+			[styles.pillSmall]: size === "small",
+			[styles.pillTiny]: size === "tiny",
+
+			[styles.pillIconOnly]: !!icon && isLabelHidden,
+			[styles.pillEllipsis]: isEllipsis,
+		})
+
+		const isSmall: boolean = size !== "normal"
+		const pillTextSize = isSmall ? "tiny" : "small"
+
+		const onKeyDown = onClick
+			? (event: KeyboardEvent<HTMLDivElement>): void => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault()
+						onClick(event as unknown as React.MouseEvent<HTMLDivElement>)
+					}
+				}
+			: undefined
+
+		const isInteractive: boolean = !!onClick && !isLoading
+
+		return (
+			<Flex
+				{...(isInteractive && { onClick, role: "button", tabIndex: 0 })}
+				{...(isInteractive && onKeyDown && { onKeyDown })}
+				className={pillClasses}
+				isCentered={true}
+				gap={2}
+				aria-label={isLabelHidden ? label : undefined}
+				data-ui-component="Pill"
+			>
+				{isLoading && <Loading size={PILL_LOADING_SIZE[size] || 20} />}
+				{!isLoading && icon && <Icon size={PILL_ICON_SIZE[size] || 16} icon={icon} />}
+				{!isLabelHidden && (
+					<Text type={pillTextSize} whiteSpace="nowrap" {...(isMono && { fontFamily: "mono" })} fontWeight="medium">
+						{label}
+					</Text>
+				)}
+			</Flex>
+		)
+	},
+)
+
+Pill.displayName = "Pill"

package/components/Pill/Pill.types.ts

@@ -0,0 +1,19 @@
+import type { MouseEventHandler } from "react"
+import type { HeliosIconType } from "../../types/icons"
+import type { HeliosSizeType } from "../../types/scale"
+import type { HeliosColorType, HeliosAppearanceType } from "../../types/colors"
+
+export interface PillProps {
+	appearance?: HeliosAppearanceType
+	color: HeliosColorType
+	className?: string
+	icon?: HeliosIconType
+	isEllipsis?: boolean
+	isLabelHidden?: boolean
+	isLoading?: boolean
+	isMono?: boolean
+	isRounded?: boolean
+	label: string
+	onClick?: MouseEventHandler<HTMLDivElement>
+	size?: HeliosSizeType
+}

package/components/Pill/index.ts

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

package/components/Placeholder/Placeholder.meta.ts

@@ -0,0 +1,25 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { PlaceholderBaseProps } from "./Placeholder.types"
+
+export const meta: HeliosAttributeMeta<PlaceholderBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-placeholder-default",
+			description: "default",
+			content: "<Placeholder>{CONTENT}</Placeholder>",
+		},
+		{
+			id: "ui-placeholder-height",
+			description: "with custom height",
+			content: "<Placeholder height={200}>{CONTENT}</Placeholder>",
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	height: {
+		type: "number",
+		isOptional: true,
+		description: "custom height in pixels",
+	},
+}

package/components/Placeholder/Placeholder.module.css

@@ -0,0 +1,3 @@
+.placeholder {
+	background-color: var(--ui-bg-soft-yellow);
+}

package/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,24 @@
+import { Flex } from "../Flex"
+import { Text } from "../Text"
+import styles from "./Placeholder.module.css"
+import type { PlaceholderProps } from "./Placeholder.types"
+import type { FC } from "react"
+
+export const Placeholder: FC<PlaceholderProps> = ({ children, height }) => {
+	return (
+		<Flex
+			className={styles.placeholder}
+			padding={16}
+			data-ui-component="Placeholder"
+			style={{
+				height: height ? `${height}px` : "inherit",
+			}}
+		>
+			<Text type="small" fontFamily="mono">
+				{children}
+			</Text>
+		</Flex>
+	)
+}
+
+Placeholder.displayName = "Placeholder"

package/components/Placeholder/Placeholder.types.ts

@@ -0,0 +1,7 @@
+import type { PropsWithChildren } from "react"
+
+export interface PlaceholderBaseProps {
+	height?: number
+}
+
+export type PlaceholderProps = PropsWithChildren<PlaceholderBaseProps>

package/components/Placeholder/index.ts

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

package/components/Progress/Progress.meta.ts

@@ -0,0 +1,35 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { ProgressProps } from "./Progress.types"
+
+export const meta: HeliosAttributeMeta<ProgressProps> = {
+	_patterns: [
+		{
+			id: "ui-progress-default",
+			description: "default",
+			content: `<Progress max={100} color={COLOR} value={PERCENTAGE} isSmall={IS_SMALL} />`,
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	"aria-label": {
+		type: "string",
+		isOptional: true,
+	},
+	isSmall: {
+		type: "boolean",
+		isOptional: true,
+	},
+	color: {
+		type: "HeliosColorType",
+		default: "blue",
+		isOptional: true,
+	},
+	max: {
+		type: "number",
+		default: 100,
+	},
+	value: {
+		type: "number",
+		default: 0,
+	},
+}

package/components/Progress/Progress.module.css

@@ -0,0 +1,22 @@
+.progress {
+	height: 8px;
+	width: 100%;
+
+	background-color: var(--ui-bg-tertiary);
+	border: 0;
+	border-radius: var(--radius-md);
+}
+
+.progress::-webkit-progress-bar {
+	background-color: transparent;
+}
+
+.progress::-webkit-progress-value {
+	background-color: var(--bg);
+	border-radius: var(--radius-xl);
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+}
+
+.progress.progressSmall {
+	height: 4px;
+}

package/components/Progress/Progress.tsx

@@ -0,0 +1,30 @@
+import styles from "./Progress.module.css"
+import { getClasses } from "@heliosgraphics/utils"
+import { getColorClasses } from "../../utils/colors"
+import type { FC } from "react"
+import type { ProgressProps } from "./Progress.types"
+
+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,
+	})
+
+	return (
+		<progress
+			className={progressClasses}
+			max={max}
+			value={value}
+			aria-label={ariaLabel ?? `Progress: ${value} of ${max}`}
+			data-ui-component="Progress"
+		/>
+	)
+}
+
+Progress.displayName = "Progress"

package/components/Progress/Progress.types.ts

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

package/components/Progress/index.ts

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

package/components/Radio/Radio.meta.ts

@@ -0,0 +1,21 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { BaseRadioProps } from "./Radio.types"
+
+export const meta: HeliosAttributeMeta<BaseRadioProps> = {
+	_patterns: [
+		{
+			id: "ui-radio-default",
+			description: "default",
+			content: `<Radio label={RADIO_LABEL} isSmall={IS_SMALL} color={COLOR} onChange={ON_RADIO_CHANGE} value="radio-01" isDisabled={IS_DISABLED} isChecked={IS_CHECKED} name="radio-group"/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	_extends: ["BaseCheckboxProps"],
+	name: {
+		type: "string",
+	},
+	value: {
+		type: "string",
+	},
+}

package/components/Radio/Radio.module.css

@@ -0,0 +1,101 @@
+.radio {
+	--radio-size: 24px;
+	--radio-margin: 3px;
+
+	position: relative;
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.radioSmall {
+	--radio-size: 18px;
+	--radio-margin: 2px;
+}
+
+.radioDisabled {
+	pointer-events: none;
+	cursor: not-allowed;
+}
+
+.radioDisabled .radio__radioLabel {
+	color: var(--text-disabled);
+}
+
+.radioDisabled .radio__radioMark {
+	border-color: var(--ui-border-secondary);
+}
+
+.radio input {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	appearance: none;
+	display: flex;
+	overflow: hidden;
+	height: var(--radio-size);
+	width: var(--radio-size);
+
+	background-color: var(--bg);
+	border-radius: var(--radio-size);
+	outline-color: var(--border-focus);
+
+	cursor: pointer;
+}
+
+.radio input:active ~ .radio__radioMark:after {
+	transform: scale(1.1);
+}
+
+.radio input:checked ~ .radio__radioMark:after {
+	opacity: 1;
+}
+
+.radio__radioLabel {
+	position: relative;
+
+	max-width: max-content;
+
+	color: var(--border-selected);
+
+	cursor: pointer;
+	user-select: none;
+}
+
+.radio__mark {
+	position: relative;
+
+	height: var(--radio-size);
+	min-width: var(--radio-size);
+	width: var(--radio-size);
+}
+
+.radio__radioMark {
+	height: 100%;
+	overflow: hidden;
+	width: 100%;
+
+	background: var(--ui-bg-primary);
+	border-radius: var(--radio-size);
+	border: 1px solid var(--border-selected);
+
+	pointer-events: none;
+}
+
+.radio__radioMark:after {
+	left: calc(var(--radio-margin) + 1px);
+	top: calc(var(--radio-margin) + 1px);
+	position: absolute;
+
+	box-sizing: inherit;
+	height: calc(var(--radio-size) - 2 * var(--radio-margin) - 2px);
+	width: calc(var(--radio-size) - 2 * var(--radio-margin) - 2px);
+
+	background-color: var(--ui-bg-primary);
+	border-radius: 100%;
+	opacity: 0;
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+	content: " ";
+
+	pointer-events: none;
+}

package/components/Radio/Radio.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import { useId } from "react"
+import { getClasses } from "@heliosgraphics/utils"
+import { getColorClasses } from "../../utils/colors"
+import { Flex } from "../Flex"
+import { Text } from "../Text"
+import styles from "./Radio.module.css"
+import type { FC } from "react"
+import type { RadioProps } from "./Radio.types"
+
+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 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}
+						</Text>
+						{description && (
+							<Text type="tiny" emphasis="secondary">
+								{description}
+							</Text>
+						)}
+					</Flex>
+				)}
+			</label>
+		</div>
+	)
+}
+
+Radio.displayName = "Radio"

package/components/Radio/Radio.types.ts

@@ -0,0 +1,8 @@
+import type { BaseCheckboxProps } from "../Checkbox/Checkbox.types"
+
+export interface BaseRadioProps {
+	name: string
+	value: string
+}
+
+export type RadioProps = BaseRadioProps & BaseCheckboxProps

package/components/Radio/index.ts

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

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 },
+}