@heliosgraphics/ui 2.0.0-alpha.95 → 2.0.0-alpha.97

package/components/Alert/Alert.tsx

@@ -50,3 +50,5 @@ export const Alert: FC<AlertProps> = ({ children, onClose, title, icon, color, a
 		</Flex>
 	)
 }
+
+Alert.displayName = "Alert"

package/components/Breadcrumb/Breadcrumb.tsx

@@ -1,4 +1,4 @@
-import { Fragment, type FC, type ElementType } from "react"
+import { Fragment, type FC, type ElementType, type KeyboardEvent } from "react"
 import { Text } from "../Text"
 import { Flex } from "../Flex"
 import { Icon } from "../Icon"
@@ -13,12 +13,26 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items }) => {
 				{items?.map((item, index) => {
 					const isLast: boolean = Boolean(index + 1 === items?.length)
 					const AComponent: ElementType = item.as || "a"
+					const isCustomElement: boolean = !!item.as && item.as !== "a" && item.as !== "button"
+					const keyboardProps =
+						isCustomElement && item.onClick
+							? {
+									role: "link" as const,
+									tabIndex: 0,
+									onKeyDown: (event: KeyboardEvent): void => {
+										if (event.key === "Enter") {
+											item.onClick?.(event as unknown as React.MouseEvent<HTMLAnchorElement>)
+										}
+									},
+								}
+							: {}
 
 					return (
 						<Fragment key={item.href ?? item.name}>
 							<AComponent
 								href={item.href}
 								onClick={item.onClick}
+								{...keyboardProps}
 								{...(item.isActive && { "aria-current": "page" as const })}
 							>
 								<Text
@@ -37,3 +51,5 @@ export const Breadcrumb: FC<BreadcrumbProps> = ({ items }) => {
 		</nav>
 	)
 }
+
+Breadcrumb.displayName = "Breadcrumb"

package/components/Browser/Browser.tsx

@@ -12,3 +12,5 @@ export const Browser: FC<BrowserProps> = ({ children }) => {
 		</div>
 	)
 }
+
+Browser.displayName = "Browser"

package/components/Button/Button.tsx

@@ -6,7 +6,7 @@ import { Flex } from "../Flex"
 import { Icon } from "../Icon"
 import { Loading } from "../Loading"
 import { Text } from "../Text"
-import { useState, useId, type KeyboardEvent, type MouseEvent, type FC, useMemo } from "react"
+import { useState, useId, useRef, type KeyboardEvent, type MouseEvent, type FC, useMemo } from "react"
 import { getColorClasses } from "../../utils/colors"
 import { INTENTION_COLOR_MAP } from "../../constants/intentions"
 import type { HeliosIconType } from "../../types/icons"
@@ -52,6 +52,7 @@ export const Button: FC<ButtonProps> = ({
 }) => {
 	const [isActive, setIsActive] = useState<boolean>(false)
 
+	const inputRef = useRef<HTMLInputElement>(null)
 	const buttonId = useId()
 	const isIconOnlyLoading: boolean = !!isIconOnly && !!isLoading
 
@@ -130,10 +131,10 @@ export const Button: FC<ButtonProps> = ({
 		if (event.key !== "Enter" && event.key !== " ") return
 		event.preventDefault()
 
-		if (isDisabled || isLoading || !buttonId) return
+		if (isDisabled || isLoading) return
 
 		setIsActive(true)
-		document.getElementById(buttonId)?.click()
+		inputRef.current?.click()
 	}
 
 	return (
@@ -159,6 +160,7 @@ export const Button: FC<ButtonProps> = ({
 				</Flex>
 			)}
 			<input
+				ref={inputRef}
 				id={buttonId}
 				aria-disabled={isDisabled || isLoading}
 				disabled={isDisabled || isLoading}
@@ -201,3 +203,5 @@ export const Button: FC<ButtonProps> = ({
 		</Flex>
 	)
 }
+
+Button.displayName = "Button"

package/components/ButtonGroup/ButtonGroup.tsx

@@ -37,3 +37,5 @@ export const ButtonGroup: FC<ButtonGroupProps> = ({
 		</Flex>
 	)
 }
+
+ButtonGroup.displayName = "ButtonGroup"

package/components/Checkbox/Checkbox.tsx

@@ -1,69 +1,80 @@
 "use client"
 
-import { useId } from "react"
+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 { FC } from "react"
 import type { CheckboxProps } from "./Checkbox.types"
 
-export const Checkbox: FC<CheckboxProps> = ({
-	color = "gray",
-	isChecked,
-	isVertical,
-	isLabelHidden = false,
-	isSmall,
-	description,
-	isDisabled,
-	isRequired,
-	onChange,
-	label,
-}) => {
-	const checkboxId: string = useId()
+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 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,
-	})
+		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
-						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}
+		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>
-						)}
-					</Flex>
-				)}
-			</label>
-		</div>
-	)
-}
+							{description && (
+								<Text type="tiny" emphasis="secondary">
+									{description}
+								</Text>
+							)}
+						</Flex>
+					)}
+				</label>
+			</div>
+		)
+	},
+)
+
+Checkbox.displayName = "Checkbox"

package/components/Clock/Clock.tsx

@@ -1,11 +1,29 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useId, useState, useEffect } from "react"
 import styles from "./Clock.module.css"
 import type { FC } from "react"
 import type { ClockProps } from "./Clock.types"
 
+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 ""
+	}
+}
+
 export const Clock: FC<ClockProps> = () => {
+	const titleId: string = useId()
 	const [time, setTime] = useState(() => new Date())
 
 	useEffect(() => {
@@ -16,26 +34,10 @@ export const Clock: FC<ClockProps> = () => {
 		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} data-ui-component="Clock">
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+			<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)">
@@ -76,3 +78,5 @@ export const Clock: FC<ClockProps> = () => {
 		</div>
 	)
 }
+
+Clock.displayName = "Clock"

package/components/Column/Column.tsx

@@ -17,3 +17,5 @@ export const Column: FC<ColumnProps> = (props) => {
 
 	return <div {...safeProps} style={columnStyle} className={columnClasses} data-ui-component="Column" />
 }
+
+Column.displayName = "Column"

package/components/Confirm/Confirm.tsx

@@ -36,3 +36,5 @@ export const Confirm: FC<ConfirmProps> = ({
 		</Dialog>
 	)
 }
+
+Confirm.displayName = "Confirm"

package/components/DatePicker/DatePicker.meta.ts

@@ -6,13 +6,20 @@ export const meta: HeliosAttributeMeta<DatePickerProps> = {
 		{
 			id: "ui-datepicker-default",
 			description: "default",
-			content: `<DatePicker/>`,
+			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",
-	date: {
-		type: "string",
-		isOptional: true,
-	},
+	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" },
 }

package/components/DatePicker/DatePicker.module.css

@@ -1,3 +1,72 @@
 .datePicker {
-	border: 1px solid gold;
+	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

@@ -1,14 +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"
-import type { FC } from "react"
 
-export const DatePicker: FC<DatePickerProps> = ({ date }) => {
-	const datePickerClasses: string = getClasses(styles.datePicker)
+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">
-			{date}
+			{!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

@@ -1,3 +1,8 @@
 export interface DatePickerProps {
-	date?: string
+	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/Debug/Debug.tsx

@@ -44,3 +44,5 @@ export const Debug: FC<DebugProps> = ({ color = "gray", appearance = "dark" }) =
 		</Flex>
 	)
 }
+
+Debug.displayName = "Debug"

package/components/Details/Details.tsx

@@ -17,3 +17,5 @@ export const Details: FC<DetailsProps> = ({ children, label, isOpen }) => {
 		</details>
 	)
 }
+
+Details.displayName = "Details"

package/components/Dialog/Dialog.module.css

@@ -99,13 +99,11 @@
 		width: calc(100% - 16px);
 	}
 
-	.dialog__content {
-		padding: 12px;
-	}
-}
-
-@media (max-width: 576px) {
 	.dialogCentered {
 		width: calc(100% - 16px);
 	}
+
+	.dialog__content {
+		padding: 12px;
+	}
 }