@heliosgraphics/ui 2.0.0-alpha.100

package/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,41 @@
+import type { ButtonGroupProps } from "./ButtonGroup.types"
+import { getClasses } from "@heliosgraphics/utils"
+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>
+	)
+}
+
+ButtonGroup.displayName = "ButtonGroup"

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 "../../types/meta"
+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: "nominal",
+	_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,80 @@
+"use client"
+
+import { useId, forwardRef } from "react"
+import { getClasses } from "@heliosgraphics/utils"
+import { getColorClasses } from "../../utils/colors"
+import { Flex } from "../Flex"
+import { Icon } from "../Icon"
+import { Text } from "../Text"
+import styles from "./Checkbox.module.css"
+import type { CheckboxProps } from "./Checkbox.types"
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+	(
+		{
+			color = "gray",
+			isChecked,
+			isVertical,
+			isLabelHidden = false,
+			isSmall,
+			description,
+			isDisabled,
+			isRequired,
+			onChange,
+			label,
+		},
+		ref,
+	) => {
+		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} data-ui-component="Checkbox">
+				<label className={checkboxLabelClasses} htmlFor={checkboxId}>
+					<span className={styles.checkbox__mark}>
+						<input
+							ref={ref}
+							type="checkbox"
+							checked={isChecked}
+							onChange={onChange}
+							disabled={isDisabled}
+							required={isRequired}
+							aria-label={isLabelHidden ? label : undefined}
+							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>
+		)
+	},
+)
+
+Checkbox.displayName = "Checkbox"

package/components/Checkbox/Checkbox.types.ts

@@ -0,0 +1,17 @@
+import type { ChangeEventHandler } from "react"
+import type { HeliosColorType } from "../../types/colors"
+
+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 "../../types/meta"
+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: 50%;
+}
+
+.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);
+	transition: transform 100ms linear;
+}

package/components/Clock/Clock.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { useId, useState, useEffect } from "react"
+import styles from "./Clock.module.css"
+import { getRotation } from "./Clock.utils"
+import type { FC } from "react"
+import type { ClockProps } from "./Clock.types"
+
+export const Clock: FC<ClockProps> = () => {
+	const titleId: string = useId()
+	const [time, setTime] = useState(() => new Date())
+
+	useEffect(() => {
+		const timerId = globalThis.setInterval(() => {
+			setTime(new Date())
+		}, 1000)
+
+		return (): void => globalThis.clearInterval(timerId)
+	}, [])
+
+	return (
+		<div className={styles.clock} data-ui-component="Clock">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" role="img" aria-labelledby={titleId}>
+				<title id={titleId}>Clock</title>
+				<g transform="translate(128,128)">
+					<circle r="124" fill="none" strokeWidth="8" className={styles.clock__border} />
+					<g transform="rotate(180)">
+						<line
+							className={styles.clock__hour}
+							x1="0"
+							y1="0"
+							x2="0"
+							y2="-50"
+							strokeWidth="8"
+							strokeLinecap="round"
+							transform={getRotation(time, "hours")}
+						/>
+						<line
+							className={styles.clock__minute}
+							x1="0"
+							y1="0"
+							x2="0"
+							y2="-80"
+							strokeWidth="8"
+							strokeLinecap="round"
+							transform={getRotation(time, "minutes")}
+						/>
+						<line
+							className={styles.clock__second}
+							x1="0"
+							y1="0"
+							x2="0"
+							y2="-90"
+							strokeWidth="4"
+							strokeLinecap="round"
+							transform={getRotation(time, "seconds")}
+						/>
+						<circle r="8" className={styles.clock__center} />
+					</g>
+				</g>
+			</svg>
+		</div>
+	)
+}
+
+Clock.displayName = "Clock"

package/components/Clock/Clock.types.ts

@@ -0,0 +1 @@
+export interface ClockProps {}

package/components/Clock/Clock.utils.ts

@@ -0,0 +1,16 @@
+export const getRotation = (time: Date, type: "hours" | "minutes" | "seconds"): string => {
+	const hours = time.getHours() % 12
+	const minutes = time.getMinutes()
+	const seconds = time.getSeconds()
+
+	switch (type) {
+		case "hours":
+			return `rotate(${(hours + minutes / 60) * 30 - 180}, 0, 0)`
+		case "minutes":
+			return `rotate(${minutes * 6 - 180}, 0, 0)`
+		case "seconds":
+			return `rotate(${seconds * 6 - 180}, 0, 0)`
+		default:
+			return ""
+	}
+}

package/components/Clock/index.ts

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

package/components/Column/Column.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { ColumnBaseProps } from "./Column.types"
+
+export const meta: HeliosAttributeMeta<ColumnBaseProps> = {
+	_patterns: [
+		{
+			id: "ui-column-default",
+			description: "default",
+			content: "<Column width={480}>{CHILDREN}</Column>",
+		},
+	],
+	_status: "nominal",
+	_category: "layout",
+	_extends: ["FlexProps"],
+	isColumnCentered: {
+		type: "boolean",
+		isOptional: true,
+	},
+	width: {
+		type: "number",
+	},
+}

package/components/Column/Column.tsx

@@ -0,0 +1,21 @@
+import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
+import { getClasses } from "@heliosgraphics/utils"
+import type { ColumnProps } from "./Column.types"
+import type { FC } from "react"
+
+export const Column: FC<ColumnProps> = (props) => {
+	const mainFlexClasses = getFlexUtility({ ...props, isColumn: true })
+	const columnClasses: string = getClasses(mainFlexClasses, {
+		["mx-auto"]: props.isColumnCentered,
+	})
+
+	const safeProps = getSafeFlexProps(props)
+	const columnStyle = {
+		maxWidth: "100%",
+		width: `${props.width ?? 960}px`,
+	}
+
+	return <div {...safeProps} style={columnStyle} className={columnClasses} data-ui-component="Column" />
+}
+
+Column.displayName = "Column"

package/components/Column/Column.types.ts

@@ -0,0 +1,8 @@
+import type { FlexProps } from "../Flex/Flex.types"
+
+export interface ColumnBaseProps {
+	isColumnCentered?: boolean
+	width: number
+}
+
+export type ColumnProps = ColumnBaseProps & FlexProps

package/components/Column/index.ts

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

package/components/Confirm/Confirm.meta.ts

@@ -0,0 +1,51 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { ConfirmProps } from "./Confirm.types"
+
+export const meta: HeliosAttributeMeta<ConfirmProps> = {
+	_patterns: [
+		{
+			id: "ui-confirm-delete",
+			description: "confirm deletion dialog",
+			content: `<Confirm cancelText="Cancel" confirmText="Delete" description="Are you sure you want to delete?" icon="trash" intent="danger" isOpen={IS_OPEN} onCancel={ON_TOGGLE_OPEN} onConfirm={ON_TOGGLE_OPEN} title="Confirm Deletion"/>`,
+		},
+	],
+	_status: "experimental",
+	_category: "pattern",
+	buttonGroupAlign: {
+		type: "'left' | 'center' | 'right'",
+		isOptional: true,
+	},
+	cancelText: {
+		type: "string",
+	},
+	confirmOrder: {
+		type: "'left' | 'right'",
+		isOptional: true,
+	},
+	confirmText: {
+		type: "string",
+	},
+	description: {
+		type: "string",
+		isOptional: true,
+	},
+	icon: {
+		type: "HeliosIconType",
+		isOptional: true,
+	},
+	intent: {
+		type: "HeliosIntentionType",
+	},
+	isOpen: {
+		type: "boolean",
+	},
+	onCancel: {
+		type: "(_?: unknown) => Promise<void> | void",
+	},
+	onConfirm: {
+		type: "(_?: unknown) => Promise<void> | void",
+	},
+	title: {
+		type: "string",
+	},
+}

package/components/Confirm/Confirm.tsx

@@ -0,0 +1,40 @@
+import { Button } from "../Button"
+import { ButtonGroup } from "../ButtonGroup"
+import { Dialog } from "../Dialog"
+import { Flex } from "../Flex"
+import { Text } from "../Text"
+import type { ConfirmProps } from "./Confirm.types"
+import type { FC, ReactNode } from "react"
+
+export const Confirm: FC<ConfirmProps> = ({
+	buttonGroupAlign = "right",
+	cancelText,
+	confirmOrder = "right",
+	confirmText,
+	description,
+	icon,
+	intent,
+	isOpen,
+	onCancel,
+	onConfirm,
+	title,
+}) => {
+	const confirmButton: ReactNode = (
+		<Button intent={intent} value={confirmText} onClick={onConfirm} {...(icon && { icon })} />
+	)
+
+	return (
+		<Dialog title={title} onClose={onCancel} isOpen={isOpen} isCentered={true} role="alertdialog">
+			<Flex gap={12} isColumn={true} data-ui-component="Confirm">
+				{!!description && <Text type="paragraph">{description}</Text>}
+				<ButtonGroup align={buttonGroupAlign}>
+					{confirmOrder === "left" && confirmButton}
+					<Button intent="neutral" value={cancelText} onClick={onCancel} />
+					{confirmOrder === "right" && confirmButton}
+				</ButtonGroup>
+			</Flex>
+		</Dialog>
+	)
+}
+
+Confirm.displayName = "Confirm"

package/components/Confirm/Confirm.types.ts

@@ -0,0 +1,17 @@
+import type { ButtonGroupProps } from "../ButtonGroup/ButtonGroup.types"
+import type { HeliosIconType } from "../../types/icons"
+import type { HeliosIntentionType } from "../../types/intentions"
+
+export interface ConfirmProps {
+	cancelText: string
+	confirmText: string
+	confirmOrder?: "left" | "right"
+	buttonGroupAlign?: ButtonGroupProps["align"]
+	description?: string
+	icon?: HeliosIconType
+	intent: HeliosIntentionType
+	isOpen: boolean
+	onCancel: (_?: unknown) => Promise<void> | void
+	onConfirm: (_?: unknown) => Promise<void> | void
+	title: string
+}

package/components/Confirm/index.ts

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

package/components/DatePicker/DatePicker.meta.ts

@@ -0,0 +1,25 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { DatePickerProps } from "./DatePicker.types"
+
+export const meta: HeliosAttributeMeta<DatePickerProps> = {
+	_patterns: [
+		{
+			id: "ui-datepicker-default",
+			description: "default",
+			content: '<DatePicker label="Date" />',
+		},
+		{
+			id: "ui-datepicker-with-value",
+			description: "with value",
+			content: '<DatePicker label="Birthday" value="2024-03-15" onChange={ON_CHANGE} />',
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+	isDisabled: { type: "boolean", isOptional: true },
+	isLabelHidden: { type: "boolean", isOptional: true },
+	isRequired: { type: "boolean", isOptional: true },
+	label: { type: "string" },
+	onChange: { type: "(date: string) => void", isOptional: true, description: "Returns YYYY-MM-DD format" },
+	value: { type: "string", isOptional: true, description: "YYYY-MM-DD format" },
+}