@heliosgraphics/ui 2.0.0-alpha.100

package/components/Menu/components/MenuCategory/MenuCategory.module.css

@@ -0,0 +1,73 @@
+.menuCategoryPlain {
+	padding-top: 8px;
+}
+
+.menuCategoryTitle {
+	height: 40px;
+	padding-inline: 8px;
+}
+
+.menuCategoryFolder .menuCategoryTitle {
+	border-bottom: 1px solid var(--ui-border-secondary);
+}
+
+.menuCategoryFolder .menuCategoryItems {
+	margin-left: 8px;
+
+	border-left: 1px solid var(--ui-border-secondary);
+}
+
+.menuCategory.menuCategoryFolderOpen .menuCategoryItems {
+	padding-block: 8px;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+}
+
+.menuCategory .menuCategoryItems {
+	display: grid;
+	grid-template-rows: 1fr;
+	padding-block: 8px;
+	opacity: 1;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+	transition:
+		grid-template-rows var(--speed-md) var(--ease-in-out-sine),
+		opacity var(--speed-md) var(--ease-in-out-sine),
+		padding-block var(--speed-md) var(--ease-in-out-sine);
+}
+
+.menuCategory .menuCategoryItems.menuCategoryItemsHidden,
+.menuCategory.menuCategoryFolderOpen .menuCategoryItems.menuCategoryItemsHidden {
+	grid-template-rows: 0fr;
+	opacity: 0;
+	padding-block: 0;
+
+	border-bottom: none !important;
+}
+
+.menuCategory:has(.menuCategoryFolder) > .menuCategoryItems:not(.menuCategoryItemsHidden) {
+	padding-block: 0;
+
+	border-bottom: none;
+}
+
+.menuCategory:has(.menuCategoryFolder.menuCategoryFolderOpen:last-child)
+	.menuCategoryItems:not(.menuCategoryItemsHidden) {
+	padding-bottom: 8px;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+}
+
+.menuCategoryItemsInner {
+	min-height: 0;
+	overflow: hidden;
+}
+
+.menuCategoryFolderIcon {
+	transform: rotate(0deg);
+	transition: transform var(--speed-md) var(--ease-in-out-sine);
+}
+
+.menuCategoryFolderIconOpen {
+	transform: rotate(90deg);
+}

package/components/Menu/components/MenuCategory/MenuCategory.tsx

@@ -0,0 +1,88 @@
+"use client"
+
+import { useCallback, useState, type FC, type KeyboardEvent } from "react"
+import { Flex } from "../../../Flex"
+import { Icon } from "../../../Icon"
+import { Text } from "../../../Text"
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./MenuCategory.module.css"
+import type { MenuCategoryProps } from "./MenuCategory.types"
+
+export const MenuCategory: FC<MenuCategoryProps> = ({
+	category,
+	children,
+	isFolder,
+	isOpen: controlledIsOpen,
+	isInitiallyClosed,
+}) => {
+	const [localIsOpen, setLocalIsOpen] = useState<boolean>(!isInitiallyClosed)
+
+	const isControlled: boolean = controlledIsOpen !== undefined
+	const isOpen: boolean = isControlled ? !!controlledIsOpen : localIsOpen
+
+	const onToggle = (): void => {
+		if (!isControlled) {
+			setLocalIsOpen((prev) => !prev)
+		}
+	}
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>): void => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault()
+				onToggle()
+			}
+		},
+		[isControlled],
+	)
+
+	const menuCategoryClasses: string = getClasses(styles.menuCategory, {
+		[styles.menuCategoryFolder]: category,
+		[styles.menuCategoryFolderOpen]: isOpen,
+		[styles.menuCategoryPlain]: !category,
+	})
+
+	const menuCategoryItemsClasses: string = getClasses(styles.menuCategoryItems, {
+		[styles.menuCategoryItemsHidden]: !isOpen,
+	})
+
+	const folderIconClasses: string = getClasses(styles.menuCategoryFolderIcon, {
+		[styles.menuCategoryFolderIconOpen]: isOpen,
+	})
+
+	const showHeader: boolean = Boolean(category || isFolder)
+
+	return (
+		<Flex isColumn={true} isXCentered={true} data-ui-component="Menu.Category" className={menuCategoryClasses}>
+			{showHeader && (
+				<Flex
+					{...(isFolder && { onClick: onToggle, onKeyDown: handleKeyDown, role: "button" as const, tabIndex: 0 })}
+					isBetween={true}
+					isYCentered={true}
+					gap={4}
+					aria-expanded={isFolder ? isOpen : undefined}
+					className={styles.menuCategoryTitle}
+				>
+					<Text type="tiny" emphasis={isOpen ? "secondary" : "primary"} fontWeight="medium" isNonSelectable={true}>
+						{category}
+					</Text>
+					{isFolder && (
+						<Icon
+							size={16}
+							emphasis={isOpen ? "tertiary" : "primary"}
+							icon="chevron-right"
+							className={folderIconClasses}
+						/>
+					)}
+				</Flex>
+			)}
+			<Flex className={menuCategoryItemsClasses}>
+				<Flex isColumn={true} gap={1} className={styles.menuCategoryItemsInner}>
+					{children}
+				</Flex>
+			</Flex>
+		</Flex>
+	)
+}
+
+MenuCategory.displayName = "MenuCategory"

package/components/Menu/components/MenuCategory/MenuCategory.types.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react"
+
+export interface MenuCategoryBaseProps {
+	category?: string
+	isFolder?: boolean
+	isInitiallyClosed?: boolean
+	isOpen?: boolean
+}
+
+export type MenuCategoryProps = PropsWithChildren<MenuCategoryBaseProps>

package/components/Menu/components/MenuCategory/index.ts

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

package/components/Menu/components/MenuFilter/MenuFilter.meta.ts

@@ -0,0 +1,24 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { MenuFilterProps } from "./MenuFilter.types"
+
+export const meta: HeliosAttributeMeta<MenuFilterProps> = {
+	_patterns: [
+		{
+			id: "ui-menu-filter-default",
+			description: "default",
+			content: `<Menu.Filter onChange={onChange} value={value} />`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+	onChange: {
+		type: "(event?: ChangeEvent<HTMLInputElement>) => void",
+	},
+	onClear: {
+		type: "HeliosOnClickType",
+		isOptional: true,
+	},
+	value: {
+		type: "string",
+	},
+}

package/components/Menu/components/MenuFilter/MenuFilter.module.css

@@ -0,0 +1,11 @@
+.menuFilter {
+	position: sticky;
+	top: 0;
+	z-index: var(--z-index-1);
+
+	/* NOTE @03b8 leaks intentionally */
+	margin-right: 1px;
+	padding: 16px;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+}

package/components/Menu/components/MenuFilter/MenuFilter.tsx

@@ -0,0 +1,25 @@
+import type { FC } from "react"
+import { Input } from "../../../Input"
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./MenuFilter.module.css"
+import type { MenuFilterProps } from "./MenuFilter.types"
+
+export const MenuFilter: FC<MenuFilterProps> = ({ value, onClear, onChange }) => {
+	const menuFilterClasses: string = getClasses(styles.menuFilter, "ui-bg-glass")
+
+	return (
+		<div className={menuFilterClasses} role="search" data-ui-component="Menu.Filter">
+			<Input
+				{...(onClear && { onClear })}
+				placeholder="Search"
+				value={value}
+				onChange={onChange}
+				autoComplete="new-password"
+				label="Search"
+				isLabelHidden={true}
+			/>
+		</div>
+	)
+}
+
+MenuFilter.displayName = "MenuFilter"

package/components/Menu/components/MenuFilter/MenuFilter.types.ts

@@ -0,0 +1,7 @@
+import type { ChangeEventHandler, MouseEventHandler } from "react"
+
+export interface MenuFilterProps {
+	onChange: ChangeEventHandler<HTMLInputElement>
+	onClear?: MouseEventHandler<HTMLDivElement>
+	value: string
+}

package/components/Menu/components/MenuFilter/index.ts

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

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

@@ -0,0 +1,42 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+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: var(--ui-border-orange);
+	content: " ";
+}

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

@@ -0,0 +1,73 @@
+"use client"
+
+import { useCallback, type FC, type KeyboardEvent } from "react"
+import { Flex } from "../../../Flex"
+import { Pill } from "../../../Pill"
+import { Icon } from "../../../Icon"
+import { Text } from "../../../Text"
+import { useLayoutContext } from "../../../../hooks/useLayoutContext"
+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,
+	})
+
+	const handleKeyDown = useCallback(
+		(event: KeyboardEvent<HTMLDivElement>): void => {
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault()
+				onAsideClose()
+			}
+		},
+		[onAsideClose],
+	)
+
+	return (
+		<Flex
+			className={menuItemClasses}
+			data-ui-component="MenuItem"
+			role="menuitem"
+			tabIndex={0}
+			onClick={onAsideClose}
+			onKeyDown={handleKeyDown}
+			isBetween={true}
+			gap={4}
+			isYCentered={true}
+			{...(isActive && { "aria-current": "page" as const })}
+		>
+			<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>
+	)
+}
+
+MenuItem.displayName = "MenuItem"

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

@@ -0,0 +1,12 @@
+import type { HeliosColorType } from "../../../../types/colors"
+import type { HeliosIconType } from "../../../../types/icons"
+
+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 "../../types/meta"
+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: "nominal",
+	_category: "layout",
+	isCentered: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isOpen: {
+		type: "boolean",
+	},
+	onClose: {
+		type: "() => void",
+	},
+}

package/components/Overlay/Overlay.module.css

@@ -0,0 +1,85 @@
+.overlay {
+	left: 0;
+	position: fixed;
+	top: 0;
+	z-index: var(--z-index-9);
+
+	height: 100%;
+	overflow: auto;
+	width: 100%;
+
+	display: grid;
+	opacity: 1;
+	transition:
+		opacity var(--speed-md) ease-in-out,
+		display var(--speed-md) ease-in-out allow-discrete;
+}
+
+.overlay[data-open="false"] {
+	display: none;
+	opacity: 0;
+}
+
+@starting-style {
+	.overlay[data-open="true"] {
+		opacity: 0;
+	}
+}
+
+.overlay__content {
+	height: 100%;
+	opacity: 1;
+	transform: translateY(0);
+
+	transition:
+		opacity var(--speed-sm) ease-in-out,
+		transform var(--speed-sm) ease-in-out;
+	transition-delay: 120ms;
+
+	pointer-events: none;
+}
+
+.overlay[data-open="false"] .overlay__content {
+	opacity: 0;
+	transform: translateY(-24px);
+}
+
+@starting-style {
+	.overlay[data-open="true"] .overlay__content {
+		opacity: 0;
+		transform: translateY(-24px);
+	}
+}
+
+.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%;
+
+	background-color: rgba(0, 0, 0, 0.85);
+	opacity: 1;
+
+	transition: opacity var(--speed-md) ease-in-out;
+}
+
+.overlay[data-open="false"] .overlay__layer {
+	opacity: 0;
+}
+
+@starting-style {
+	.overlay[data-open="true"] .overlay__layer {
+		opacity: 0;
+	}
+}

package/components/Overlay/Overlay.tsx

@@ -0,0 +1,47 @@
+import styles from "./Overlay.module.css"
+import type { FC, MouseEvent, KeyboardEvent } from "react"
+import type { OverlayProps } from "./Overlay.types"
+import { getClasses } from "@heliosgraphics/utils"
+
+export const Overlay: FC<OverlayProps> = ({ onClose, isCentered, children, isOpen }) => {
+	const hideFunction = (event: MouseEvent<HTMLDivElement>): void => {
+		event.preventDefault()
+		event.stopPropagation()
+
+		return onClose?.()
+	}
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault()
+			onClose?.()
+		}
+	}
+
+	const contentClasses: string = getClasses(styles.overlay__content, {
+		[styles.overlay__contentCentered]: isCentered,
+	})
+
+	return (
+		<section
+			className={styles.overlay}
+			role="dialog"
+			aria-modal="true"
+			aria-hidden={!isOpen}
+			data-ui-component="Overlay"
+			data-open={isOpen}
+		>
+			<div className={contentClasses}>{children}</div>
+			<div
+				className={styles.overlay__layer}
+				onClick={hideFunction}
+				onKeyDown={handleKeyDown}
+				role="button"
+				tabIndex={0}
+				aria-label="Close overlay"
+			/>
+		</section>
+	)
+}
+
+Overlay.displayName = "Overlay"

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 "../../types/meta"
+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,47 @@
+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 }}
+			role="img"
+			aria-label={`Pie chart with ${data.length} segments`}
+			data-ui-component="Pie"
+		>
+			<title>{data.map((item) => `${item.name}: ${item.value}`).join(", ")}</title>
+			{data.map((item, index) => {
+				const thisData: Array<PieItem> = data.slice(0, index)
+				const thisSize = thisData?.reduce((a, b) => a + b.value, 0)
+				const thisColor: string = `hsl(var(--${color}-hue), ${(index + 1) * 20}%, 50%)`
+
+				return (
+					<circle
+						key={item.name ?? `segment-${index}`}
+						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>
+	)
+}
+
+Pie.displayName = "Pie"