@heliosgraphics/ui 2.0.0-alpha.62

package/components/Clock/Clock.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import styles from "./Clock.module.css"
+import type { FC } from "react"
+import type { ClockProps } from "./Clock.types"
+
+export const Clock: FC<ClockProps> = () => {
+	const [time, setTime] = useState(new Date())
+
+	useEffect(() => {
+		const timerId = globalThis.setInterval(() => {
+			setTime(new Date())
+		}, 1000)
+
+		return (): void => globalThis.clearInterval(timerId)
+	}, [])
+
+	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 ""
+		}
+	}
+
+	return (
+		<div className={styles.clock}>
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+				<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>
+	)
+}

package/components/Clock/Clock.types.ts

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

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 "../.."
+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: "stable",
+	_category: "layout",
+	_extends: ["FlexProps"],
+	isColumnCentered: {
+		type: "boolean",
+		isOptional: true,
+	},
+	width: {
+		type: "number",
+	},
+}

package/components/Column/Column.tsx

@@ -0,0 +1,19 @@
+import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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} />
+}

package/components/Column/Column.types.ts

@@ -0,0 +1,8 @@
+import type { FlexProps } from "../.."
+
+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,43 @@
+import type { HeliosAttributeMeta } from "../.."
+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",
+	cancelText: {
+		type: "string",
+	},
+	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,27 @@
+import { Button, ButtonGroup, Dialog, Flex, Text } from "../.."
+import type { ConfirmProps } from "./Confirm.types"
+import type { FC } from "react"
+
+export const Confirm: FC<ConfirmProps> = ({
+	onCancel,
+	onConfirm,
+	isOpen,
+	title,
+	intent,
+	description,
+	icon,
+	cancelText,
+	confirmText,
+}) => {
+	return (
+		<Dialog title={title} onClose={onCancel} isOpen={isOpen} isCentered={true}>
+			<Flex gap={12} isColumn={true}>
+				{!!description && <Text type="paragraph">{description}</Text>}
+				<ButtonGroup>
+					<Button intent={intent} value={confirmText} onClick={onConfirm} {...(icon && { icon })} />
+					<Button intent="neutral" value={cancelText} onClick={onCancel} />
+				</ButtonGroup>
+			</Flex>
+		</Dialog>
+	)
+}

package/components/Confirm/Confirm.types.ts

@@ -0,0 +1,13 @@
+import type { HeliosIconType, HeliosIntentionType } from "../.."
+
+export interface ConfirmProps {
+	cancelText: string
+	confirmText: string
+	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,18 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { DatePickerProps } from "./DatePicker.types"
+
+export const meta: HeliosAttributeMeta<DatePickerProps> = {
+	_patterns: [
+		{
+			id: "ui-datepicker-default",
+			description: "default",
+			content: `<DatePicker/>`,
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+	date: {
+		type: "string",
+		isOptional: true,
+	},
+}

package/components/DatePicker/DatePicker.module.css

@@ -0,0 +1,3 @@
+.datePicker {
+	border: 1px solid gold;
+}

package/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,10 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import styles from "./DatePicker.module.css"
+import type { DatePickerProps } from "./DatePicker.types"
+import type { FC } from "react"
+
+export const DatePicker: FC<DatePickerProps> = ({ date }) => {
+	const datePickerClasses: string = getClasses(styles.datePicker)
+
+	return <div className={datePickerClasses}>{date}</div>
+}

package/components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,3 @@
+export interface DatePickerProps {
+	date?: string
+}

package/components/DatePicker/index.ts

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

package/components/Debug/Debug.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { DebugProps } from "./Debug.types"
+
+export const meta: HeliosAttributeMeta<DebugProps> = {
+	_patterns: [
+		{
+			id: "ui-debug-default",
+			description: "default",
+			content: `<Debug/>`,
+		},
+	],
+	_status: "experimental",
+	_category: "meta",
+	color: {
+		type: "HeliosColorType",
+		isOptional: true,
+	},
+	appearance: {
+		type: "HeliosAppearanceType",
+		isOptional: true,
+	},
+}

package/components/Debug/Debug.module.css

@@ -0,0 +1,17 @@
+.debug {
+	position: fixed;
+	bottom: 12px;
+	left: 12px;
+	z-index: var(--z-index-10);
+
+	padding: 12px;
+	max-width: calc(100% - 24px);
+
+	background-color: var(--ui-bg-primary);
+	border: 1px solid var(--ui-border-primary);
+}
+
+.debugColor {
+	height: 16px;
+	width: 16px;
+}

package/components/Debug/Debug.tsx

@@ -0,0 +1,42 @@
+"use client"
+
+import { Button, ButtonGroup, Text, Flex, Separator } from "../.."
+import { DebugProps } from "./Debug.types"
+import styles from "./Debug.module.css"
+import { useState } from "react"
+import type { FC } from "react"
+import { getClasses } from "@heliosgraphics/utils"
+import { getColorMap } from "./Debug.utils"
+
+export const Debug: FC<DebugProps> = ({ color = "gray", appearance = "dark" }) => {
+	const debugClasses: string = getClasses(styles.debug, "elevation-large")
+	const colorMap = getColorMap(color)
+
+	const [isClosed, setIsClosed] = useState(false)
+
+	return (
+		<Flex className={debugClasses}>
+			<Flex isColumn={true} gap={4}>
+				<Text type="micro" fontFamily="mono" emphasis="secondary">
+					color: {color}, appearance: {appearance}
+				</Text>
+				<ButtonGroup>
+					<Button onClick={() => setIsClosed(!isClosed)} value={isClosed ? "Open" : "Close"} />
+				</ButtonGroup>
+				<Separator emphasis="secondary" lineStyle="dashed" />
+				{!isClosed && (
+					<Flex gap={2} isColumn={false} isWrapped={true}>
+						{Object.entries(colorMap).map(([key, value]) => (
+							<Flex key={key} isYCentered={true} gap={2}>
+								<div className={styles.debugColor} style={{ backgroundColor: value }} />
+								<Text type="micro" emphasis="tertiary">
+									{key}
+								</Text>
+							</Flex>
+						))}
+					</Flex>
+				)}
+			</Flex>
+		</Flex>
+	)
+}

package/components/Debug/Debug.types.ts

@@ -0,0 +1,6 @@
+import type { HeliosAppearanceType, HeliosColorType } from "../.."
+
+export interface DebugProps {
+	appearance?: HeliosAppearanceType
+	color?: HeliosColorType
+}

package/components/Debug/Debug.utils.ts

@@ -0,0 +1,23 @@
+export const getColorMap = (color: string): Record<string, string> => ({
+	[`--bg-${color}`]: `oklch(var(--ui-bg-l) var(--ui-chroma) var(--ui-${color}))`,
+	[`--bg-hover-${color}`]: `oklch(var(--ui-bg-hover-l) var(--ui-chroma) var(--ui-${color}))`,
+	[`--bg-active-${color}`]: `oklch(var(--ui-bg-active-l) var(--ui-chroma) var(--ui-${color}))`,
+	[`--bg-disabled-${color}`]: `oklch(var(--ui-bg-disabled-l) var(--ui-chroma-tone) var(--ui-${color}))`,
+	[`--text-${color}`]: `oklch(var(--ui-text-l) var(--ui-chroma-tone) var(--ui-${color}))`,
+	[`--text-disabled-${color}`]: `oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-tone) var(--ui-${color}))`,
+	[`--border-${color}`]: `oklch(var(--ui-border-l) var(--ui-chroma) var(--ui-${color}))`,
+	[`--border-hover-${color}`]: `oklch(var(--ui-border-hover-l) var(--ui-chroma) var(--ui-${color}))`,
+	[`--border-active-${color}`]: `oklch(var(--ui-border-active-l) var(--ui-chroma) var(--ui-${color}))`,
+	[`--border-focus-${color}`]: `oklch(var(--ui-border-focus-l) var(--ui-chroma) var(--ui-${color}))`,
+	[`--border-selected-${color}`]: `oklch(var(--ui-border-selected-l) var(--ui-chroma) var(--ui-${color}))`,
+	[`--border-soft-${color}`]: `oklch(var(--ui-border-soft-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+	[`--border-soft-hover-${color}`]: `oklch(var(--ui-border-soft-hover-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+	[`--border-soft-active-${color}`]: `oklch(var(--ui-border-soft-active-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+	[`--border-soft-focus-${color}`]: `oklch(var(--ui-border-soft-focus-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+	[`--bg-soft-${color}`]: `oklch(var(--ui-bg-soft-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+	[`--bg-soft-hover-${color}`]: `oklch(var(--ui-bg-soft-hover-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+	[`--bg-soft-active-${color}`]: `oklch(var(--ui-bg-soft-active-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+	[`--bg-soft-disabled-${color}`]: `oklch(var(--ui-bg-soft-disabled-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+	[`--text-soft-${color}`]: `oklch(var(--ui-text-soft-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+	[`--text-soft-disabled-${color}`]: `oklch(var(--ui-text-soft-secondary-l) var(--ui-chroma-soft) var(--ui-${color}))`,
+})

package/components/Debug/index.ts

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

package/components/Details/Details.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { DetailsBaseProps } from "./Details.types"
+
+export const meta: HeliosAttributeMeta<DetailsBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-details-default",
+			description: "default",
+			content: `<Details label={LABEL} isOpen={IS_OPEN}>{CHILDREN}</Details>`,
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	isOpen: {
+		type: "boolean",
+		isOptional: true,
+	},
+	label: {
+		type: "string",
+	},
+}

package/components/Details/Details.module.css

@@ -0,0 +1,36 @@
+details.details {
+	padding: 0;
+
+	border: 1px solid var(--ui-border-primary);
+	background-color: var(--ui-bg-primary);
+	border-radius: var(--radius-md);
+}
+
+details.details summary + * {
+	padding: 24px;
+
+	box-shadow: inset 0 1px 0 0 var(--ui-border-secondary);
+}
+
+details.details[open] summary svg {
+	transform: rotate(180deg);
+}
+
+details.details summary::-webkit-details-marker {
+	display: none;
+}
+
+details.details summary {
+	align-items: center;
+	display: flex;
+	padding: 12px 16px;
+
+	border-radius: var(--radius-md);
+	color: var(--ui-text-primary);
+	cursor: pointer;
+	user-select: none;
+}
+
+details.details[open] summary {
+	border-radius: var(--radius-md) var(--radius-md) 0 0;
+}

package/components/Details/Details.tsx

@@ -0,0 +1,18 @@
+import styles from "./Details.module.css"
+import { Icon, Text } from "../.."
+import type { DetailsProps } from "./Details.types"
+import type { FC } from "react"
+
+export const Details: FC<DetailsProps> = ({ children, label, isOpen }) => {
+	return (
+		<details className={styles.details} open={isOpen}>
+			<summary className="flex space-between flex-y-center">
+				<Text type="small" fontWeight="medium">
+					{label}
+				</Text>
+				<Icon icon="caret-down" size={20} emphasis="tertiary" />
+			</summary>
+			<div>{children}</div>
+		</details>
+	)
+}

package/components/Details/Details.types.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from "react"
+
+export interface DetailsBaseProps {
+	isOpen?: boolean
+	label: string
+}
+
+export type DetailsProps = PropsWithChildren<DetailsBaseProps>

package/components/Details/index.ts

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

package/components/Dialog/Dialog.meta.ts

@@ -0,0 +1,44 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { DialogBaseProps } from "./Dialog.types"
+
+export const meta: HeliosAttributeMeta<DialogBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-dialog-default",
+			description: "default dialog",
+			content: `<Dialog isOpen={IS_OPEN} onClose={ON_TOGGLE_OPEN} title="Hello World" isNarrow={IS_NARROW} isCentered={IS_CENTERED}>{CHILDREN}</Dialog>`,
+		},
+		{
+			id: "ui-dialog-no-padding",
+			description: "default dialog without content padding",
+			content: `<Dialog isOpen={IS_OPEN} onClose={ON_TOGGLE_OPEN} title="Hello World" isNarrow={IS_NARROW} isCentered={IS_CENTERED} noPadding={true}>{CHILDREN}</Dialog>`,
+		},
+	],
+	_status: "stable",
+	_category: "pattern",
+	isOpen: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isCentered: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isNarrow: {
+		type: "boolean",
+		isOptional: true,
+	},
+	noPadding: {
+		type: "boolean",
+		description: "Removes padding from the Dialog content.",
+		isOptional: true,
+	},
+	onClose: {
+		type: "(_?: unknown) => Promise<void> | void",
+	},
+	title: {
+		type: "string",
+		isOptional: true,
+	},
+}

package/components/Dialog/Dialog.module.css

@@ -0,0 +1,108 @@
+.dialog {
+	left: 50%;
+	top: calc(12px + env(safe-area-inset-top, 12px));
+
+	max-height: calc(100% - 24px);
+	max-width: 100%;
+	overflow: auto;
+	overscroll-behavior: none;
+	width: 580px;
+
+	border: 0;
+	border-radius: var(--radius-large);
+	touch-action: pan-y;
+	transform: translateX(-50%);
+}
+
+.dialogNarrow {
+	width: 420px;
+}
+
+.dialog:not(.dialogCentered) {
+	animation: dialogFadeIn var(--speed-lg) ease-in-out;
+}
+
+.dialogCentered {
+	top: 50%;
+
+	animation: dialogCenterFadeIn var(--speed-lg) ease-in-out;
+	transform: translateX(-50%) translateY(-50%);
+}
+
+.dialog::-webkit-scrollbar {
+	height: 8px;
+	width: 8px;
+}
+
+.dialog__content {
+	position: relative;
+	z-index: var(--z-index-1);
+
+	padding: 24px;
+}
+
+.dialog__content.dialog__contentNoPadding {
+	padding: 0;
+}
+
+.dialog__header {
+	border-radius: 8px 8px 0 0;
+	box-shadow: 0 1px 0 var(--ui-border-secondary);
+}
+
+.dialog::backdrop {
+	--ui-bg-backdrop: rgba(80, 80, 80, 0.5);
+
+	animation: backdropFadeIn var(--speed-sm) ease-in-out;
+	background-color: var(--ui-bg-tertiary);
+	backdrop-filter: blur(2px);
+}
+
+@media (max-width: 576px) {
+	.dialog:not(.dialogCentered) {
+		margin-left: 8px;
+		margin-right: 8px;
+		width: calc(100% - 16px);
+	}
+
+	.dialog__content {
+		padding: 12px;
+	}
+}
+
+@media (max-width: 576px) {
+	.dialogCentered {
+		width: calc(100% - 16px);
+	}
+}
+
+@keyframes dialogFadeIn {
+	0% {
+		opacity: 0;
+		transform: translateX(-50%) translateY(6px);
+	}
+	100% {
+		opacity: 1;
+		transform: translateX(-50%) translateY(0);
+	}
+}
+
+@keyframes dialogCenterFadeIn {
+	0% {
+		opacity: 0;
+		transform: translateX(-50%) translateY(calc(-50% + 6px));
+	}
+	100% {
+		opacity: 1;
+		transform: translateX(-50%) translateY(-50%);
+	}
+}
+
+@keyframes backdropFadeIn {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}