@heliosgraphics/ui 2.0.0-alpha.100

package/components/Text/components/Micro/Micro.types.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from "../../Text.types"
+
+export interface MicroProps extends Omit<TextProps, "type"> {}

package/components/Text/components/Micro/index.ts

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

package/components/Text/components/P/P.meta.ts

@@ -0,0 +1,11 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { PProps } from "./P.types"
+import { SHARED_TEXT_META } from "../../Text.meta"
+
+export const meta: HeliosAttributeMeta<PProps> = {
+	...(SHARED_TEXT_META as unknown as HeliosAttributeMeta<PProps>),
+	_category: "core",
+	_extends: ['Omit<TextProps, "type">'],
+	_patterns: [],
+	_status: "internal",
+}

package/components/Text/components/P/P.tsx

@@ -0,0 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
+import type { FC } from "react"
+import type { PProps } from "./P.types"
+
+export const P: FC<PProps> = (props) => {
+	return <p {...props} className={getClasses("p", props.className)} data-ui-component="Text.P" />
+}
+
+P.displayName = "P"

package/components/Text/components/P/P.types.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from "../../Text.types"
+
+export interface PProps extends Omit<TextProps, "type"> {}

package/components/Text/components/P/index.ts

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

package/components/Text/components/Small/Small.meta.ts

@@ -0,0 +1,11 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { SmallProps } from "./Small.types"
+import { SHARED_TEXT_META } from "../../Text.meta"
+
+export const meta: HeliosAttributeMeta<SmallProps> = {
+	...(SHARED_TEXT_META as unknown as HeliosAttributeMeta<SmallProps>),
+	_category: "core",
+	_extends: ['Omit<TextProps, "type">'],
+	_patterns: [],
+	_status: "internal",
+}

package/components/Text/components/Small/Small.tsx

@@ -0,0 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
+import type { FC } from "react"
+import type { SmallProps } from "./Small.types"
+
+export const Small: FC<SmallProps> = (props) => {
+	return <small {...props} className={getClasses("small", props.className)} data-ui-component="Text.Small" />
+}
+
+Small.displayName = "Small"

package/components/Text/components/Small/Small.types.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from "../../Text.types"
+
+export interface SmallProps extends Omit<TextProps, "type"> {}

package/components/Text/components/Small/index.ts

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

package/components/Text/components/Tiny/Tiny.meta.ts

@@ -0,0 +1,11 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { TinyProps } from "./Tiny.types"
+import { SHARED_TEXT_META } from "../../Text.meta"
+
+export const meta: HeliosAttributeMeta<TinyProps> = {
+	...(SHARED_TEXT_META as unknown as HeliosAttributeMeta<TinyProps>),
+	_category: "core",
+	_extends: ['Omit<TextProps, "type">'],
+	_patterns: [],
+	_status: "internal",
+}

package/components/Text/components/Tiny/Tiny.tsx

@@ -0,0 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
+import type { FC } from "react"
+import type { TinyProps } from "./Tiny.types"
+
+export const Tiny: FC<TinyProps> = (props) => {
+	return <small {...props} className={getClasses("tiny", props.className)} data-ui-component="Text.Tiny" />
+}
+
+Tiny.displayName = "Tiny"

package/components/Text/components/Tiny/Tiny.types.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from "../../Text.types"
+
+export interface TinyProps extends Omit<TextProps, "type"> {}

package/components/Text/components/Tiny/index.ts

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

package/components/Text/index.ts

@@ -0,0 +1,2 @@
+export { Text } from "./Text"
+export type { TextBaseProps, TextProps } from "./Text.types"

package/components/Textarea/Textarea.meta.ts

@@ -0,0 +1,26 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { TextareaProps } from "./Textarea.types"
+
+export const meta: HeliosAttributeMeta<TextareaProps> = {
+	_patterns: [
+		{
+			id: "ui-textarea-default",
+			description: "default",
+			content: `<Textarea onChange={ON_TEXTAREA_CHANGE} value={TEXTAREA} placeholder={TEXTAREA_PLACEHOLDER} isDisabled={IS_DISABLED} label={TEXTAREA_LABEL} helperText={HELPER_TEXT}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	autoComplete: { type: "boolean", isOptional: true },
+	autoFocus: { type: "boolean", isOptional: true },
+	helperText: { type: "string", isOptional: true },
+	isDisabled: { type: "boolean", isOptional: true },
+	isLabelHidden: { type: "boolean", isOptional: true },
+	label: { type: "string" },
+	maxLength: { type: "number", isOptional: true },
+	name: { type: "string", isOptional: true },
+	onChange: { type: "(_event?: ChangeEvent<HTMLTextAreaElement>) => unknown" },
+	placeholder: { type: "string", isOptional: true },
+	rows: { type: "number", isOptional: true },
+	value: { type: "string", isOptional: true },
+}

package/components/Textarea/Textarea.module.css

@@ -0,0 +1,52 @@
+.textarea {
+	width: 100%;
+}
+
+.textarea textarea {
+	padding: 8px 10px;
+	height: auto;
+	min-height: 96px;
+	overflow: hidden;
+	width: 100%;
+
+	background-clip: padding-box;
+	background-color: var(--ui-bg-primary);
+	border: 1px solid var(--ui-border-primary);
+	color: var(--ui-text-primary);
+	border-radius: var(--radius-sm);
+	resize: none;
+	outline: none;
+	transition: all var(--speed-md) var(--ease-in-out-sine);
+
+	font-family: var(--font-family-mono);
+	font-size: var(--font-size-small);
+	line-height: var(--line-height-small);
+}
+
+.input__helper {
+	margin-top: var(--space-3);
+}
+
+.textarea textarea:active:not(:disabled),
+.textarea textarea:focus:not(:disabled) {
+	box-shadow: 0 0 0 4px var(--ui-border-secondary);
+	border-color: var(--ui-border-active-gray);
+	color: var(--ui-text-primary);
+}
+
+.textarea textarea::placeholder {
+	color: var(--ui-text-tertiary);
+	opacity: 1;
+}
+
+.textareaDisabled {
+	pointer-events: none;
+}
+
+.textareaDisabled textarea {
+	background-color: var(--ui-bg-disabled-gray);
+}
+
+.textareaDisabled textarea::placeholder {
+	color: var(--ui-text-tertiary);
+}

package/components/Textarea/Textarea.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { getClasses } from "@heliosgraphics/utils"
+import { Text } from "../Text"
+import { useId, useRef, useEffect, useImperativeHandle, forwardRef } from "react"
+import { InputLabel } from "../shared/InputLabel"
+import styles from "./Textarea.module.css"
+import type { TextareaProps } from "./Textarea.types"
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, ref) => {
+	const internalRef = useRef<HTMLTextAreaElement | null>(null)
+	const { autoComplete: _autoComplete, helperText: _helperText, isDisabled, isLabelHidden, ...goodProps } = props
+
+	useImperativeHandle(ref, () => internalRef.current as HTMLTextAreaElement)
+
+	const htmlFor: string = useId()
+	const helperId: string = `${htmlFor}-helper`
+	const textareaClasses: string = getClasses(styles.textarea, "flex flex-column", {
+		[styles.textareaDisabled]: props.isDisabled,
+	})
+
+	const onInput = (): void => {
+		if (!internalRef.current) return
+
+		internalRef.current.style.height = "auto"
+		internalRef.current.style.height = internalRef.current.scrollHeight + "px"
+	}
+
+	useEffect(() => {
+		onInput()
+
+		const timer: ReturnType<typeof setTimeout> = setTimeout(() => onInput(), 100)
+
+		return (): void => {
+			globalThis.clearTimeout(timer)
+		}
+	}, [props.value])
+
+	return (
+		<div className={textareaClasses} data-ui-component="Textarea">
+			{!props.isLabelHidden && (
+				<InputLabel
+					id={htmlFor}
+					label={props.label}
+					{...(isDisabled !== undefined && { isDisabled })}
+					{...(isLabelHidden !== undefined && { isHidden: isLabelHidden })}
+				/>
+			)}
+			<textarea
+				{...goodProps}
+				ref={internalRef}
+				id={htmlFor}
+				rows={goodProps.rows ?? 4}
+				onInput={onInput}
+				onLoad={onInput}
+				disabled={isDisabled}
+				aria-describedby={props.helperText ? helperId : undefined}
+			/>
+			{!!props.helperText && (
+				<Text type="tiny" emphasis="tertiary" className={styles.input__helper} id={helperId}>
+					{props.helperText}
+				</Text>
+			)}
+		</div>
+	)
+})
+
+Textarea.displayName = "Textarea"

package/components/Textarea/Textarea.types.ts

@@ -0,0 +1,16 @@
+import type { ChangeEvent } from "react"
+
+export interface TextareaProps {
+	autoComplete?: boolean
+	autoFocus?: boolean
+	helperText?: string
+	isDisabled?: boolean
+	isLabelHidden?: boolean
+	label: string
+	maxLength?: number
+	name?: string
+	onChange: (_event?: ChangeEvent<HTMLTextAreaElement>) => unknown
+	placeholder?: string
+	rows?: number
+	value?: string
+}

package/components/Textarea/index.ts

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

package/components/Tile/Tile.meta.ts

@@ -0,0 +1,24 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { TileProps } from "./Tile.types"
+
+export const meta: HeliosAttributeMeta<TileProps> = {
+	_patterns: [
+		{
+			id: "ui-tile-default",
+			description: "default",
+			content: `<Tile color={COLOR} icon={ICON} iconAccent={ICON_ACCENT} size={64} isRound={IS_ROUND} isRounded={IS_ROUNDED} colorAccent={COLOR_ACCENT}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "pattern",
+	appearance: { type: "light | dark", isOptional: true, default: "light" },
+	color: { type: "HeliosColorType", isOptional: true },
+	colorAccent: { type: "HeliosColorType", isOptional: true },
+	icon: { type: "HeliosIconType" },
+	iconAccent: { type: "HeliosIconType", isOptional: true },
+	isRound: { type: "boolean", isOptional: true },
+	isRounded: { type: "boolean", isOptional: true },
+	onClick: { type: "HeliosOnClickType", isOptional: true },
+	size: { type: "number" },
+	text: { type: "string", isOptional: true },
+}

package/components/Tile/Tile.module.css

@@ -0,0 +1,35 @@
+.tile {
+	position: relative;
+
+	background-color: var(--bg);
+	border: 1px solid var(--border);
+	border-radius: var(--radius-md);
+	color: var(--text);
+	overflow: hidden;
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+
+	user-select: none;
+}
+
+.tile .tile__background {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	height: 100%;
+	width: 100%;
+}
+
+.tileLarge {
+	padding: 8px;
+}
+
+.tile__iconAccent {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	color: var(--text);
+
+	opacity: 0.2;
+}

package/components/Tile/Tile.tsx

@@ -0,0 +1,70 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { getColorClasses } from "../../utils/colors"
+import { Icon } from "../Icon"
+import { Text } from "../Text"
+import { Flex } from "../Flex"
+import styles from "./Tile.module.css"
+import { type FC, type KeyboardEvent } from "react"
+import type { TileProps } from "./Tile.types"
+import type { HeliosColorType } from "../../types/colors"
+
+export const Tile: FC<TileProps> = ({
+	size,
+	text,
+	icon,
+	onClick,
+	iconAccent,
+	color = "gray",
+	isRounded,
+	isRound,
+	appearance = "light",
+}) => {
+	const isClickable: boolean = !!onClick
+	const isLarge: boolean = size > 64
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		if ((event.key === "Enter" || event.key === " ") && onClick) {
+			event.preventDefault()
+			onClick(event as unknown as React.MouseEvent<HTMLDivElement>)
+		}
+	}
+
+	const resolvedColor: HeliosColorType = color
+
+	const tileColorClasses: Array<string> = getColorClasses(resolvedColor, appearance)
+	const tileClasses = getClasses(styles.tile, ...tileColorClasses, {
+		[styles.tileLarge]: isLarge,
+		["radius-normal"]: isRounded,
+		["radius-max"]: isRound,
+	})
+
+	return (
+		<Flex
+			{...(onClick && { onClick })}
+			{...(isClickable && { role: "button" as const, tabIndex: 0, onKeyDown: handleKeyDown })}
+			className={tileClasses}
+			data-ui-component="Tile"
+			isCentered={true}
+			isColumn={true}
+			style={{
+				height: `${size}px`,
+				minWidth: `${size}px`,
+				width: `${size}px`,
+			}}
+		>
+			<Icon icon={icon} size={size * 0.5} emphasis="inherit" />
+			{iconAccent && (
+				<Flex isCentered={true}>
+					<Icon icon={iconAccent} size={size * 1} className={styles.tile__iconAccent} />
+				</Flex>
+			)}
+			{text && (
+				<Text type={isLarge ? "small" : "tiny"} fontFamily="mono" lineClamp={1} textAlign="center">
+					{text}
+				</Text>
+			)}
+		</Flex>
+	)
+}
+
+Tile.displayName = "Tile"

package/components/Tile/Tile.types.ts

@@ -0,0 +1,16 @@
+import type { MouseEventHandler } from "react"
+import type { HeliosIconType } from "../../types/icons"
+import type { HeliosColorType, HeliosAppearanceType } from "../../types/colors"
+
+export interface TileProps {
+	appearance?: HeliosAppearanceType
+	color?: HeliosColorType
+	colorAccent?: HeliosColorType
+	icon: HeliosIconType
+	iconAccent?: HeliosIconType
+	isRound?: boolean
+	isRounded?: boolean
+	onClick?: MouseEventHandler<HTMLDivElement>
+	size: number
+	text?: string
+}

package/components/Tile/index.ts

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

package/components/Timestamp/Timestamp.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { TimestampProps } from "./Timestamp.types"
+
+export const meta: HeliosAttributeMeta<TimestampProps> = {
+	_patterns: [
+		{
+			id: "ui-timestamp-default",
+			description: "default",
+			content: `<Timestamp date={DATE} isRelative={false} format={DATE_FORMAT}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "content",
+	date: { type: "string", isOptional: true },
+	format: {
+		type: "Intl.DateTimeFormatOptions",
+		isOptional: true,
+		default: "{ year: numeric, month: long, day: numeric }",
+	},
+	isRelative: { type: "boolean", isOptional: true },
+	text: { type: "string", isOptional: true },
+}

package/components/Timestamp/Timestamp.tsx

@@ -0,0 +1,21 @@
+import { getIsValid, formatDate, getFromNow } from "../../utils/date"
+import type { FC } from "react"
+import type { TimestampProps } from "./Timestamp.types"
+
+export const Timestamp: FC<TimestampProps> = ({ date, isRelative, text, format }) => {
+	const fromNowDate = getFromNow(date)
+	const isValid: boolean = getIsValid(date)
+	const parsedIsoString: string = date && isValid ? new Date(Date.parse(date))?.toISOString() : ""
+
+	const timestampDate: string = isValid ? parsedIsoString : ""
+	const formattedDate: string = isRelative ? fromNowDate : formatDate(date, format)
+
+	return (
+		<time dateTime={timestampDate} suppressHydrationWarning={true} data-ui-component="Timestamp">
+			{!!text && text}
+			{formattedDate}
+		</time>
+	)
+}
+
+Timestamp.displayName = "Timestamp"

package/components/Timestamp/Timestamp.types.ts

@@ -0,0 +1,6 @@
+export interface TimestampProps {
+	date?: string
+	format?: Intl.DateTimeFormatOptions
+	isRelative?: boolean
+	text?: string
+}

package/components/Timestamp/index.ts

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

package/components/Toggle/Toggle.meta.ts

@@ -0,0 +1,40 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { BaseToggleProps } from "./Toggle.types"
+
+export const meta: HeliosAttributeMeta<BaseToggleProps> = {
+	_patterns: [
+		{
+			id: "ui-toggle-default",
+			description: "default toggle style",
+			content: `<Toggle isChecked={IS_CHECKED} intent={INTENT} isDisabled={IS_DISABLED} label="Suicide Burn" onChange={FUNCTION}/>`,
+		},
+		{
+			id: "ui-toggle-small",
+			description: "small toggle style",
+			content: `<Toggle intent={INTENT} isChecked={IS_CHECKED} isSmall={true} isDisabled={IS_DISABLED} label="Suicide Burn" onChange={FUNCTION}/>`,
+		},
+		{
+			id: "ui-toggle-switch",
+			description: "switch style",
+			content: `<Toggle isChecked={IS_CHECKED} intent={INTENT} style="switch" isDisabled={IS_DISABLED} label="Suicide Burn" onChange={FUNCTION}/>`,
+		},
+		{
+			id: "ui-toggle-switch-small",
+			description: "small switch style",
+			content: `<Toggle intent={INTENT} isChecked={IS_CHECKED} style="switch" isSmall={true} isDisabled={IS_DISABLED} label="Suicide Burn" onChange={FUNCTION}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	_extends: ["BaseCheckboxProps"],
+	intent: {
+		type: "HeliosIntentionType",
+		default: "neutral",
+		isOptional: true,
+	},
+	style: {
+		type: '"toggle" | "switch"',
+		default: "toggle",
+		isOptional: true,
+	},
+}

package/components/Toggle/Toggle.module.css

@@ -0,0 +1,137 @@
+.toggle {
+	--toggle-height: 24px;
+	--toggle-width: 42px;
+
+	position: relative;
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.toggleSmall {
+	--toggle-height: 18px;
+	--toggle-width: 36px;
+}
+
+.toggleStyleSwitch {
+	--toggle-height: 40px;
+	--toggle-width: 40px;
+}
+
+.toggleStyleSwitch.toggleSmall {
+	--toggle-height: 30px;
+	--toggle-width: 30px;
+}
+
+.toggleDisabled {
+	pointer-events: none;
+}
+
+.toggleDisabled .toggle__toggleMark {
+	opacity: 0.5;
+}
+
+.toggle input {
+	position: absolute;
+	top: 0;
+	left: 0;
+
+	appearance: none;
+	display: flex;
+	overflow: hidden;
+	height: var(--toggle-height);
+	width: var(--toggle-width);
+
+	border-radius: var(--toggle-height);
+	outline-color: var(--bg);
+
+	cursor: pointer;
+}
+
+.toggleStyleSwitch input {
+	border-radius: var(--radius-md);
+}
+
+.toggle input:active ~ .toggle__toggleMark:after {
+	transform: scale(1.1);
+}
+
+.toggle input:checked ~ .toggle__toggleMark:after {
+	left: 22px;
+}
+
+.toggleStyleSwitch input:checked ~ .toggle__toggleMark:after {
+	left: 22px;
+}
+
+.toggleStyleSwitch.toggleSmall input:checked ~ .toggle__toggleMark:after {
+	left: 16px;
+}
+
+.toggle input:checked ~ .toggle__toggleMark {
+	background-color: var(--bg);
+}
+
+.toggle__toggleLabel {
+	position: relative;
+
+	max-width: max-content;
+
+	cursor: pointer;
+	user-select: none;
+}
+
+.toggle__toggleMark {
+	box-sizing: border-box;
+	height: var(--toggle-height);
+	overflow: hidden;
+	width: var(--toggle-width);
+
+	background-color: var(--bg-disabled);
+	border-radius: var(--toggle-height);
+
+	pointer-events: none;
+}
+
+.toggleStyleSwitch .toggle__toggleMark {
+	border-radius: var(--radius-sm);
+}
+
+.toggle__toggleMark:after {
+	left: 4px;
+	top: 4px;
+	position: absolute;
+
+	height: 16px;
+	width: 16px;
+
+	background-color: var(--ui-bg-secondary);
+	border-radius: 100%;
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+	content: " ";
+
+	pointer-events: none;
+}
+
+.toggleSmall .toggle__toggleMark:after {
+	left: 4px;
+	top: 4px;
+
+	height: 10px;
+	width: 10px;
+}
+
+.toggleStyleSwitch .toggle__toggleMark:after {
+	height: 32px;
+	width: 14px;
+
+	border-radius: var(--radius-xs);
+}
+
+.toggleStyleSwitch.toggleSmall .toggle__toggleMark:after {
+	height: 22px;
+	width: 10px;
+}
+
+:root[data-theme="dark"] .toggle__toggleMark:after {
+	background-color: var(--ui-text-primary);
+}