@heliosgraphics/ui 2.0.0-alpha.100

package/components/DatePicker/DatePicker.module.css

@@ -0,0 +1,72 @@
+.datePicker {
+	display: flex;
+	flex-direction: column;
+	width: 280px;
+}
+
+.datePicker__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 4px;
+}
+
+.datePicker__grid {
+	display: grid;
+	grid-template-columns: repeat(7, 1fr);
+	gap: 2px;
+}
+
+.datePicker__dayLabel {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 32px;
+	font-size: 11px;
+	font-weight: 500;
+	color: var(--ui-text-tertiary);
+	user-select: none;
+}
+
+.datePicker__day {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 32px;
+	border-radius: var(--radius-sm);
+	font-size: 13px;
+	cursor: pointer;
+	user-select: none;
+	color: var(--ui-text-primary);
+	border: none;
+	background: none;
+	padding: 0;
+}
+
+.datePicker__day:hover {
+	background: var(--ui-bg-tertiary);
+}
+
+.datePicker__dayToday {
+	font-weight: 600;
+	box-shadow: inset 0 0 0 1px var(--ui-border-secondary);
+}
+
+.datePicker__daySelected {
+	background: var(--ui-text-primary);
+	color: var(--ui-bg-primary);
+}
+
+.datePicker__daySelected:hover {
+	background: var(--ui-text-primary);
+	opacity: 0.9;
+}
+
+.datePicker__dayEmpty {
+	pointer-events: none;
+}
+
+.datePicker__dayDisabled {
+	opacity: 0.3;
+	pointer-events: none;
+}

package/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,126 @@
+"use client"
+
+import { getClasses } from "@heliosgraphics/utils"
+import { useMemo, useState, type FC } from "react"
+import { Button } from "../Button"
+import { ButtonGroup } from "../ButtonGroup"
+import { InputLabel } from "../shared/InputLabel"
+import { Text } from "../Text"
+import {
+	DAYS_OF_WEEK,
+	MONTH_NAMES,
+	getDaysInMonth,
+	getFirstDayOfMonth,
+	formatDate,
+	parseDate,
+	isToday,
+} from "./DatePicker.utils"
+import styles from "./DatePicker.module.css"
+import type { DatePickerProps } from "./DatePicker.types"
+
+export const DatePicker: FC<DatePickerProps> = ({ isDisabled, isLabelHidden, label, onChange, value }) => {
+	const parsed = value ? parseDate(value) : null
+	const now: Date = new Date()
+
+	const [viewYear, setViewYear] = useState<number>(parsed?.year ?? now.getFullYear())
+	const [viewMonth, setViewMonth] = useState<number>(parsed?.month ?? now.getMonth())
+
+	const daysInMonth: number = useMemo(() => getDaysInMonth(viewYear, viewMonth), [viewYear, viewMonth])
+	const firstDay: number = useMemo(() => getFirstDayOfMonth(viewYear, viewMonth), [viewYear, viewMonth])
+
+	const onPreviousMonth = (): void => {
+		if (viewMonth === 0) {
+			setViewMonth(11)
+			setViewYear(viewYear - 1)
+		} else {
+			setViewMonth(viewMonth - 1)
+		}
+	}
+
+	const onNextMonth = (): void => {
+		if (viewMonth === 11) {
+			setViewMonth(0)
+			setViewYear(viewYear + 1)
+		} else {
+			setViewMonth(viewMonth + 1)
+		}
+	}
+
+	const onSelectDay = (day: number): void => {
+		const formatted: string = formatDate(viewYear, viewMonth, day)
+
+		onChange?.(formatted)
+	}
+
+	const datePickerClasses: string = getClasses(styles.datePicker, {
+		[styles.datePicker__dayDisabled]: !!isDisabled,
+	})
+
+	return (
+		<div className={datePickerClasses} data-ui-component="DatePicker">
+			{!isLabelHidden && <InputLabel label={label} id="datepicker" isDisabled={!!isDisabled} />}
+			<div className={styles.datePicker__header}>
+				<ButtonGroup>
+					<Button
+						size="tiny"
+						icon="chevron-left"
+						isIconOnly={true}
+						onClick={onPreviousMonth}
+						isDisabled={!!isDisabled}
+						value=""
+					/>
+				</ButtonGroup>
+				<Text type="small" fontWeight="medium">
+					{MONTH_NAMES[viewMonth]} {viewYear}
+				</Text>
+				<ButtonGroup>
+					<Button
+						size="tiny"
+						icon="chevron-right"
+						isIconOnly={true}
+						onClick={onNextMonth}
+						isDisabled={!!isDisabled}
+						value=""
+					/>
+				</ButtonGroup>
+			</div>
+			<div className={styles.datePicker__grid}>
+				{DAYS_OF_WEEK.map((day: string) => (
+					<div key={day} className={styles.datePicker__dayLabel}>
+						{day}
+					</div>
+				))}
+				{Array.from({ length: firstDay }).map((_, i: number) => (
+					<div key={`empty-${i}`} className={styles.datePicker__dayEmpty} />
+				))}
+				{Array.from({ length: daysInMonth }).map((_, i: number) => {
+					const day: number = i + 1
+					const dateStr: string = formatDate(viewYear, viewMonth, day)
+					const isSelected: boolean = value === dateStr
+					const isTodayDate: boolean = isToday(viewYear, viewMonth, day)
+
+					const dayClasses: string = getClasses(styles.datePicker__day, {
+						[styles.datePicker__daySelected]: isSelected,
+						[styles.datePicker__dayToday]: isTodayDate && !isSelected,
+					})
+
+					return (
+						<button
+							key={day}
+							type="button"
+							className={dayClasses}
+							onClick={() => onSelectDay(day)}
+							disabled={isDisabled}
+							aria-label={`${MONTH_NAMES[viewMonth]} ${day}, ${viewYear}`}
+							aria-pressed={isSelected}
+						>
+							{day}
+						</button>
+					)
+				})}
+			</div>
+		</div>
+	)
+}
+
+DatePicker.displayName = "DatePicker"

package/components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,8 @@
+export interface DatePickerProps {
+	isDisabled?: boolean
+	isLabelHidden?: boolean
+	isRequired?: boolean
+	label: string
+	onChange?: (date: string) => void
+	value?: string
+}

package/components/DatePicker/DatePicker.utils.ts

@@ -0,0 +1,53 @@
+export const DAYS_OF_WEEK: Array<string> = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"]
+
+export const MONTH_NAMES: Array<string> = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December",
+]
+
+export const getDaysInMonth = (year: number, month: number): number => {
+	return new Date(year, month + 1, 0).getDate()
+}
+
+export const getFirstDayOfMonth = (year: number, month: number): number => {
+	const day: number = new Date(year, month, 1).getDay()
+
+	return day === 0 ? 6 : day - 1
+}
+
+export const formatDate = (year: number, month: number, day: number): string => {
+	const m: string = String(month + 1).padStart(2, "0")
+	const d: string = String(day).padStart(2, "0")
+
+	return `${year}-${m}-${d}`
+}
+
+export const parseDate = (value: string): { year: number; month: number; day: number } | null => {
+	const parts: Array<string> = value.split("-")
+
+	if (parts.length !== 3) return null
+
+	const year: number = parseInt(parts[0] ?? "", 10)
+	const month: number = parseInt(parts[1] ?? "", 10) - 1
+	const day: number = parseInt(parts[2] ?? "", 10)
+
+	if (isNaN(year) || isNaN(month) || isNaN(day)) return null
+
+	return { year, month, day }
+}
+
+export const isToday = (year: number, month: number, day: number): boolean => {
+	const now: Date = new Date()
+
+	return now.getFullYear() === year && now.getMonth() === month && now.getDate() === day
+}

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 "../../types/meta"
+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,48 @@
+"use client"
+
+import { Button } from "../Button"
+import { ButtonGroup } from "../ButtonGroup"
+import { Text } from "../Text"
+import { Flex } from "../Flex"
+import { Separator } from "../Separator"
+import type { 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-lg")
+	const colorMap = getColorMap(color)
+
+	const [isClosed, setIsClosed] = useState(false)
+
+	return (
+		<Flex className={debugClasses} role="status" data-ui-component="Debug">
+			<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>
+	)
+}
+
+Debug.displayName = "Debug"

package/components/Debug/Debug.types.ts

@@ -0,0 +1,6 @@
+import type { HeliosAppearanceType, HeliosColorType } from "../../types/colors"
+
+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 "../../types/meta"
+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: "nominal",
+	_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,21 @@
+import styles from "./Details.module.css"
+import { Icon } from "../Icon"
+import { Text } from "../Text"
+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} data-ui-component="Details">
+			<summary className="flex space-between flex-y-center">
+				<Text type="small" fontWeight="medium">
+					{label}
+				</Text>
+				<Icon icon="caret-down" size={20} emphasis="tertiary" aria-hidden={true} />
+			</summary>
+			<div>{children}</div>
+		</details>
+	)
+}
+
+Details.displayName = "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,48 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+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} hasNoPadding={true}>{CHILDREN}</Dialog>`,
+		},
+	],
+	_status: "nominal",
+	_category: "pattern",
+	isOpen: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isCentered: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isNarrow: {
+		type: "boolean",
+		isOptional: true,
+	},
+	hasNoPadding: {
+		type: "boolean",
+		description: "Removes padding from the Dialog content.",
+		isOptional: true,
+	},
+	onClose: {
+		type: "(_?: unknown) => Promise<void> | void",
+	},
+	role: {
+		type: '"dialog" | "alertdialog"',
+		isOptional: true,
+	},
+	title: {
+		type: "string",
+		isOptional: true,
+	},
+}

package/components/Dialog/Dialog.module.css

@@ -0,0 +1,109 @@
+.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-lg) 0 0 var(--radius-lg);
+	touch-action: pan-y;
+	transform: translateX(-50%);
+
+	opacity: 0;
+	transition:
+		opacity var(--speed-lg) ease-in-out,
+		transform var(--speed-lg) ease-in-out,
+		overlay var(--speed-lg) ease-in-out allow-discrete,
+		display var(--speed-lg) ease-in-out allow-discrete;
+}
+
+.dialog[open] {
+	opacity: 1;
+	transform: translateX(-50%);
+}
+
+@starting-style {
+	.dialog[open] {
+		opacity: 0;
+		transform: translateX(-50%) translateY(6px);
+	}
+}
+
+.dialogNarrow {
+	width: 420px;
+}
+
+.dialogCentered {
+	top: 50%;
+
+	transform: translateX(-50%) translateY(-50%);
+}
+
+.dialogCentered[open] {
+	opacity: 1;
+	transform: translateX(-50%) translateY(-50%);
+}
+
+@starting-style {
+	.dialogCentered[open] {
+		opacity: 0;
+		transform: translateX(-50%) translateY(calc(-50% + 6px));
+	}
+}
+
+.dialog__content {
+	position: relative;
+	z-index: var(--z-index-1);
+
+	padding: 24px;
+}
+
+.dialog__content.dialog__contentNoPadding {
+	padding: 0;
+}
+
+.dialog__header {
+	border-radius: var(--radius-md) var(--radius-md) 0 0;
+	box-shadow: 0 1px 0 var(--ui-border-secondary);
+}
+
+.dialog::backdrop {
+	--ui-bg-backdrop: rgba(80, 80, 80, 0.5);
+
+	background-color: var(--ui-bg-backdrop);
+	backdrop-filter: blur(2px);
+
+	opacity: 0;
+	transition:
+		opacity var(--speed-sm) ease-in-out,
+		overlay var(--speed-sm) ease-in-out allow-discrete,
+		display var(--speed-sm) ease-in-out allow-discrete;
+}
+
+.dialog[open]::backdrop {
+	opacity: 1;
+}
+
+@starting-style {
+	.dialog[open]::backdrop {
+		opacity: 0;
+	}
+}
+
+@media (max-width: 576px) {
+	.dialog:not(.dialogCentered) {
+		width: calc(100% - 16px);
+	}
+
+	.dialogCentered {
+		width: calc(100% - 16px);
+	}
+
+	.dialog__content {
+		padding: 12px;
+	}
+}