@heliosgraphics/ui 2.0.0-alpha.62

package/components/Menu/components/MenuItem/MenuItem.meta.ts

@@ -0,0 +1,42 @@
+import type { HeliosAttributeMeta } from "../../../.."
+import type { MenuItemProps } from "./MenuItem.types"
+
+export const meta: HeliosAttributeMeta<MenuItemProps> = {
+	_patterns: [
+		{
+			id: "ui-menu-item-default",
+			description: "default",
+			content: `<Menu.Item title={title} />`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+	icon: {
+		type: "HeliosIconType",
+		isOptional: true,
+	},
+	isActive: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isLabelHidden: {
+		type: "boolean",
+		isOptional: true,
+	},
+	label: {
+		type: "string",
+		isOptional: true,
+	},
+	labelColor: {
+		type: "HeliosColorType",
+		isOptional: true,
+		default: "aqua",
+	},
+	labelIcon: {
+		type: "HeliosIconType",
+		isOptional: true,
+	},
+	title: {
+		type: "string",
+	},
+}

package/components/Menu/components/MenuItem/MenuItem.module.css

@@ -0,0 +1,37 @@
+.menuItem {
+	position: relative;
+
+	margin-inline: 8px;
+	padding: 6px 8px 6px 12px;
+
+	border-radius: var(--radius-xs);
+	background-color: var(--ui-bg-primary);
+
+	user-select: none;
+	transition: all var(--speed-xs) var(--ease-in-out-sine);
+}
+
+.menuItem__icon {
+	color: var(--ui-text-secondary);
+}
+
+.menuItem small {
+	max-width: 36ch;
+}
+
+.menuItem:hover,
+.menuItemActive {
+	background-color: var(--ui-bg-tertiary);
+	color: var(--ui-text-secondary);
+}
+
+.menuItemActive:before {
+	position: absolute;
+	left: -10px;
+
+	height: 100%;
+	width: 2px;
+
+	background-color: hsl(var(--orange-hue), var(--orange-saturation), 50%);
+	content: " ";
+}

package/components/Menu/components/MenuItem/MenuItem.tsx

@@ -0,0 +1,53 @@
+"use client"
+
+import { FC } from "react"
+import { Flex, Pill, Icon, Text, useLayoutContext } from "../../../.."
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./MenuItem.module.css"
+import type { MenuItemProps } from "./MenuItem.types"
+
+export const MenuItem: FC<MenuItemProps> = ({
+	icon,
+	isActive,
+	isLabelHidden,
+	label,
+	labelColor = "aqua",
+	labelIcon,
+	title,
+}) => {
+	const { onAsideClose } = useLayoutContext()
+	const menuItemClasses: string = getClasses(styles.menuItem, {
+		[styles.menuItemActive]: isActive,
+	})
+
+	return (
+		<Flex
+			className={menuItemClasses}
+			data-ui-component="MenuItem"
+			onClick={onAsideClose}
+			isBetween={true}
+			gap={4}
+			isYCentered={true}
+		>
+			<Flex isYCentered={true} gap={4}>
+				{icon && (
+					<Flex isCentered={true} className={styles.menuItem__icon}>
+						<Icon icon={icon} size={20} emphasis="inherit" />
+					</Flex>
+				)}
+				<Text type="small" fontWeight="medium" isEllipsis={true}>
+					{title}
+				</Text>
+			</Flex>
+			{label && (
+				<Pill
+					label={label}
+					color={labelColor}
+					isLabelHidden={!!isLabelHidden}
+					size="tiny"
+					{...(labelIcon && { icon: labelIcon })}
+				/>
+			)}
+		</Flex>
+	)
+}

package/components/Menu/components/MenuItem/MenuItem.types.ts

@@ -0,0 +1,11 @@
+import type { HeliosColorType, HeliosIconType } from "../../../.."
+
+export interface MenuItemProps {
+	icon?: HeliosIconType
+	isActive?: boolean
+	isLabelHidden?: boolean
+	label?: string
+	labelColor?: HeliosColorType
+	labelIcon?: HeliosIconType
+	title: string
+}

package/components/Menu/components/MenuItem/index.ts

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

package/components/Menu/index.ts

@@ -0,0 +1,14 @@
+import type { MenuComposition } from "./Menu.types"
+import { MenuCategory } from "./components/MenuCategory/MenuCategory"
+import { MenuFilter } from "./components/MenuFilter/MenuFilter"
+import { MenuItem } from "./components/MenuItem/MenuItem"
+import { Menu as SC } from "./Menu"
+
+const MenuComponent = SC as MenuComposition
+
+MenuComponent.Category = MenuCategory
+MenuComponent.Filter = MenuFilter
+MenuComponent.Item = MenuItem
+
+export { MenuComponent as Menu }
+export type { MenuComposition }

package/components/Overlay/Overlay.meta.ts

@@ -0,0 +1,25 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { OverlayBaseProps } from "./Overlay.types"
+
+export const meta: HeliosAttributeMeta<OverlayBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-overlay-default",
+			description: "default",
+			content: `<Overlay isOpen={IS_OPEN} isCentered={IS_CENTERED} onClose={ON_TOGGLE_OPEN}>{CHILDREN}</Overlay>`,
+		},
+	],
+	_status: "stable",
+	_category: "layout",
+	isCentered: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isOpen: {
+		type: "boolean",
+	},
+	onClose: {
+		type: "() => void",
+	},
+}

package/components/Overlay/Overlay.module.css

@@ -0,0 +1,61 @@
+.overlay {
+	left: 0;
+	position: fixed;
+	top: 0;
+	z-index: var(--z-index-9);
+
+	height: 100%;
+	overflow: auto;
+	width: 100%;
+}
+
+.overlay__content {
+	height: 100%;
+	opacity: 0;
+
+	animation: animOverlayContent var(--speed-sm) ease-in-out forwards 120ms;
+	transform: translateY(-24px);
+
+	pointer-events: none;
+}
+
+.overlay__contentCentered {
+	align-content: center;
+}
+
+.overlay__content > * {
+	pointer-events: all;
+}
+
+.overlay__layer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: -1;
+
+	height: 100%;
+	width: 100%;
+
+	animation: animOverlayBackground var(--speed-md) ease-in-out forwards;
+	background-color: rgba(0, 0, 0, 0.85);
+}
+
+@keyframes animOverlayBackground {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes animOverlayContent {
+	0% {
+		opacity: 0;
+		transform: translateY(-24px);
+	}
+	100% {
+		opacity: 1;
+		transform: translateY(0);
+	}
+}

package/components/Overlay/Overlay.tsx

@@ -0,0 +1,26 @@
+import styles from "./Overlay.module.css"
+import type { FC, MouseEvent } from "react"
+import type { OverlayProps } from "./Overlay.types"
+import { getClasses } from "@heliosgraphics/utils"
+
+export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpen }) => {
+	if (!isOpen) return null
+
+	const hideFunction = (event: MouseEvent<HTMLDivElement>): void => {
+		event.preventDefault()
+		event.stopPropagation()
+
+		return onClose?.()
+	}
+
+	const contentClasses: string = getClasses(styles.overlay__content, {
+		[styles.overlay__contentCentered]: isCentered,
+	})
+
+	return (
+		<section className={styles.overlay}>
+			<div className={contentClasses}>{children}</div>
+			<div className={styles.overlay__layer} onClick={hideFunction} />
+		</section>
+	)
+}

package/components/Overlay/Overlay.types.ts

@@ -0,0 +1,9 @@
+import type { PropsWithChildren } from "react"
+
+export interface OverlayBaseProps {
+	isCentered?: boolean
+	isOpen: boolean
+	onClose: () => void
+}
+
+export type OverlayProps = PropsWithChildren<OverlayBaseProps>

package/components/Overlay/index.ts

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

package/components/Pie/Pie.meta.ts

@@ -0,0 +1,23 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { PieProps } from "./Pie.types"
+
+export const meta: HeliosAttributeMeta<PieProps> = {
+	_patterns: [
+		{
+			id: "ui-pie-default",
+			description: "default",
+			content: `<Pie size={64} data={PIE_ITEMS} color={COLOR} />`,
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+	color: {
+		type: "HeliosColorType",
+	},
+	data: {
+		type: "Array<PieItem>",
+	},
+	size: {
+		type: "number",
+	},
+}

package/components/Pie/Pie.module.css

@@ -0,0 +1,5 @@
+.pie {
+	overflow: hidden;
+
+	border-radius: 100%;
+}

package/components/Pie/Pie.tsx

@@ -0,0 +1,41 @@
+import type { FC } from "react"
+import styles from "./Pie.module.css"
+import type { PieProps, PieItem } from "./Pie.types"
+
+export const Pie: FC<PieProps> = ({ color, size, data }) => {
+	const r: number = size / 4
+	const whole = data?.reduce((a, b) => a + b.value, 0)
+	const circumferencePercentage: number = (2 * Math.PI * r) / whole
+	const backgroundColor: string = `hsl(var(--${color}-hue), var(--${color}-saturation), 50%)`
+
+	return (
+		<svg
+			className={styles.pie}
+			height={size}
+			width={size}
+			viewBox={`0 0 ${size} ${size}`}
+			style={{ backgroundColor: backgroundColor }}
+		>
+			{data.map((item, key) => {
+				const thisData: Array<PieItem> = data.slice(0, key)
+				const thisSize = thisData?.reduce((a, b) => a + b.value, 0)
+				const thisColor: string = `hsl(var(--${color}-hue), ${(key + 1) * 20}%, 50%)`
+
+				return (
+					<circle
+						key={key}
+						r={size / 4}
+						cx={size / 2}
+						cy={size / 2}
+						fill="transparent"
+						stroke={thisColor}
+						strokeDashoffset={-thisSize * circumferencePercentage}
+						strokeWidth={size / 2}
+						strokeDasharray={`${circumferencePercentage * item.value} ${circumferencePercentage * whole}`}
+						transform={`rotate(-90) translate(-${size})`}
+					/>
+				)
+			})}
+		</svg>
+	)
+}

package/components/Pie/Pie.types.ts

@@ -0,0 +1,12 @@
+import type { HeliosColorType } from "../.."
+
+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,56 @@
+import type { HeliosAttributeMeta } from "../.."
+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: "stable",
+	_category: "core",
+	appearance: {
+		type: "HeliosAppearanceType",
+		isOptional: true,
+		default: "light",
+	},
+	className: {
+		type: "string",
+		isOptional: true,
+	},
+	color: {
+		type: "HeliosColorType",
+		default: "gray",
+	},
+	icon: {
+		type: "HeliosIconType",
+		isOptional: true,
+	},
+	isLabelHidden: {
+		type: "(event?: unknown) => void",
+		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,53 @@
+.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;
+}

package/components/Pill/Pill.tsx

@@ -0,0 +1,53 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getColorClasses } from "../../utils/colors"
+import { Flex, Text, Icon } from "../.."
+import styles from "./Pill.module.css"
+import type { FC } from "react"
+import type { PillProps } from "./Pill.types"
+
+const PILL_ICON_SIZE: Record<string, number> = {
+	tiny: 12,
+	small: 16,
+	normal: 24,
+}
+
+export const Pill: FC<PillProps> = ({
+	appearance = "light",
+	color = "gray",
+	className,
+	icon,
+	isLabelHidden,
+	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,
+	})
+
+	const isSmall: boolean = size !== "normal"
+	const pillTextSize = isSmall ? "tiny" : "small"
+
+	return (
+		<Flex {...(onClick && { onClick })} className={pillClasses} isCentered={true} gap={2} data-ui-component="Pill">
+			{icon && <Icon size={PILL_ICON_SIZE[size] || 16} icon={icon} />}
+			{!isLabelHidden && (
+				<Text type={pillTextSize} whiteSpace="nowrap" {...(isMono && { fontFamily: "mono" })} fontWeight="medium">
+					{label}
+				</Text>
+			)}
+		</Flex>
+	)
+}

package/components/Pill/Pill.types.ts

@@ -0,0 +1,15 @@
+import type { MouseEventHandler } from "react"
+import type { HeliosIconType, HeliosSizeType, HeliosColorType, HeliosAppearanceType } from "../.."
+
+export interface PillProps {
+	appearance?: HeliosAppearanceType
+	color: HeliosColorType
+	className?: string
+	icon?: HeliosIconType
+	isLabelHidden?: 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 "../.."
+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: "stable",
+	_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: hsl(var(--color-intent-highlight), 75%);
+}

package/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,20 @@
+import { Flex, Text } from "../.."
+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}
+			style={{
+				height: height ? `${height}px` : "inherit",
+			}}
+		>
+			<Text type="small" fontFamily="mono">
+				{children}
+			</Text>
+		</Flex>
+	)
+}

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,31 @@
+import type { HeliosAttributeMeta } from "../.."
+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: "stable",
+	_category: "core",
+	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: 8px;
+}
+
+.progress::-webkit-progress-bar {
+	background-color: transparent;
+}
+
+.progress::-webkit-progress-value {
+	background-color: var(--bg);
+	border-radius: 16px;
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+}
+
+.progress.progressSmall {
+	height: 4px;
+}