@heliosgraphics/ui 2.0.0-alpha.62

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(--gray-0);
+	border: 1px solid var(--ui-border);
+	color: var(--ui-text-primary);
+	border-radius: 4px;
+	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(--box-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);
+	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);
+}
+
+.textareaDisabled textarea::placeholder {
+	color: var(--ui-text-tertiary);
+}

package/components/Textarea/Textarea.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { Text } from "../.."
+import { useId, useRef, useEffect } from "react"
+import { InputLabel } from "../shared/InputLabel"
+import styles from "./Textarea.module.css"
+import type { FC } from "react"
+import type { TextareaProps } from "./Textarea.types"
+
+export const Textarea: FC<TextareaProps> = (props) => {
+	const textareaRef = useRef<HTMLTextAreaElement | null>(null)
+	const { autoComplete: _autoComplete, helperText: _helperText, isDisabled, isLabelHidden, ...goodProps } = props
+
+	const htmlFor: string = useId()
+	const textareaClasses: string = getClasses(styles.textarea, "flex flex-column", {
+		[styles.textareaDisabled]: props.isDisabled,
+	})
+
+	const onInput = (): void => {
+		if (textareaRef?.current) {
+			textareaRef.current.style.height = "auto"
+			textareaRef.current.style.height = textareaRef.current.scrollHeight + "px"
+		}
+	}
+
+	// TODO no longer necessary <3
+	useEffect(() => {
+		if (textareaRef?.current) {
+			onInput()
+		}
+
+		setTimeout(() => onInput(), 100)
+	}, [props.value])
+
+	return (
+		<div className={textareaClasses}>
+			{!props.isLabelHidden && (
+				<InputLabel
+					id={htmlFor}
+					label={props.label}
+					{...(isDisabled !== undefined && { isDisabled })}
+					{...(isLabelHidden !== undefined && { isHidden: isLabelHidden })}
+				/>
+			)}
+			<textarea
+				{...goodProps}
+				ref={textareaRef}
+				id={htmlFor}
+				rows={goodProps.rows ?? 4}
+				onInput={onInput}
+				onLoad={onInput}
+				disabled={isDisabled}
+			/>
+			{!!props.helperText && (
+				<Text type="tiny" emphasis="tertiary" className={styles.input__helper}>
+					{props.helperText}
+				</Text>
+			)}
+		</div>
+	)
+}

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 "../.."
+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: "stable",
+	_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,64 @@
+"use client"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getColorClasses } from "../../utils/colors"
+import { Icon, Text, Flex } from "../.."
+import styles from "./Tile.module.css"
+import { type FC } from "react"
+import type { TileProps } from "./Tile.types"
+import type { HeliosColorType } from "../.."
+
+export const Tile: FC<TileProps> = ({
+	size,
+	text,
+	icon,
+	onClick,
+	iconAccent,
+	color = "gray",
+	isRounded,
+	isRound,
+	appearance = "light",
+}) => {
+	const isLarge: boolean = size > 64
+
+	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 })}
+			className={tileClasses}
+			isCentered={true}
+			isColumn={true}
+			style={{
+				height: `${size}px`,
+				minWidth: `${size}px`,
+				width: `${size}px`,
+			}}
+		>
+			<Icon icon={icon} size={size * 0.5} emphasis="inherit" />
+			{/*<svg width="100%" height="100%" viewBox={`0 0 ${size} ${size}`} className={styles.tile__background}>
+				<linearGradient id={tileId}>
+					<stop stopColor={`var(--${resolvedColor})`} offset="0%" />
+					{colorAccent && <stop stopColor={`var(--${resolvedColorAccent})`} offset="100%" />}
+				</linearGradient>
+				<rect fill={`url(#${tileId})`} x={0} y={0} width={size} height={size} rx={isRound ? size : isRounded ? 8 : 0} />
+			</svg> */}
+			{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>
+	)
+}

package/components/Tile/Tile.types.ts

@@ -0,0 +1,15 @@
+import { MouseEventHandler } from "react"
+import type { HeliosIconType, HeliosColorType, HeliosAppearanceType } from "../.."
+
+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,18 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { TimestampProps } from "./Timestamp.types"
+
+export const meta: HeliosAttributeMeta<TimestampProps> = {
+	_patterns: [
+		{
+			id: "ui-timestamp-default",
+			description: "default",
+			content: `<Timestamp date={DATE} fromNow={false} format={DATE_FORMAT}/>`,
+		},
+	],
+	_status: "stable",
+	_category: "content",
+	date: { type: "string", isOptional: true },
+	format: { type: "string", isOptional: true, default: "MMMM D, YYYY" },
+	fromNow: { type: "boolean", isOptional: true },
+	text: { type: "string", isOptional: true },
+}

package/components/Timestamp/Timestamp.tsx

@@ -0,0 +1,19 @@
+import { getIsValid, formatDate, getFromNow } from "../../utils/dayjs"
+import type { FC } from "react"
+import type { TimestampProps } from "./Timestamp.types"
+
+export const Timestamp: FC<TimestampProps> = ({ date, fromNow, text, format = "MMMM D, YYYY" }) => {
+	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 = fromNow ? fromNowDate : formatDate(date, format)
+
+	return (
+		<time dateTime={timestampDate} suppressHydrationWarning={true}>
+			{!!text && text}
+			{formattedDate}
+		</time>
+	)
+}

package/components/Timestamp/Timestamp.types.ts

@@ -0,0 +1,6 @@
+export interface TimestampProps {
+	date?: string
+	format?: string
+	fromNow?: 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 "../.."
+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: "stable",
+	_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,133 @@
+.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-normal);
+}
+
+.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: 24px;
+
+	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;
+}

package/components/Toggle/Toggle.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import { useId } from "react"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { getColorClasses } from "../../utils/colors"
+import { INTENTION_COLOR_MAP, Text } from "../.."
+import styles from "./Toggle.module.css"
+import type { FC } from "react"
+import type { ToggleProps } from "./Toggle.types"
+
+export const Toggle: FC<ToggleProps> = ({
+	isChecked,
+	isSmall,
+	isRequired,
+	intent = "neutral",
+	isDisabled,
+	isLabelHidden = false,
+	color,
+	onChange,
+	label,
+	style = "toggle",
+}) => {
+	const toggleId: string = useId()
+
+	const consideredColor = color ? color : INTENTION_COLOR_MAP[intent]
+
+	const toggleColorClasses = getColorClasses(consideredColor, "dark")
+	const toggleClasses = getClasses(styles.toggle, ...toggleColorClasses, {
+		[styles.toggleDisabled]: isDisabled,
+		[styles.toggleSmall]: isSmall,
+		[styles.toggleStyleSwitch]: style === "switch",
+	})
+
+	const toggleLabelClasses = getClasses(styles.toggle__toggleLabel, "flex flex-y-center gap-4 flex-wrap")
+
+	return (
+		<div className={toggleClasses}>
+			<label className={toggleLabelClasses} htmlFor={toggleId}>
+				<input
+					type="checkbox"
+					checked={isChecked}
+					onChange={onChange}
+					required={isRequired}
+					disabled={isDisabled}
+					id={toggleId}
+				/>
+				<span className={styles.toggle__toggleMark} />
+				{!isLabelHidden && (
+					<Text type={isSmall ? "tiny" : "small"} fontWeight="medium" emphasis={isDisabled ? "tertiary" : "primary"}>
+						{label}
+					</Text>
+				)}
+			</label>
+		</div>
+	)
+}

package/components/Toggle/Toggle.types.ts

@@ -0,0 +1,9 @@
+import type { HeliosIntentionType } from "../.."
+import type { BaseCheckboxProps } from "../Checkbox/Checkbox.types"
+
+export interface BaseToggleProps {
+	intent?: HeliosIntentionType
+	style?: "toggle" | "switch"
+}
+
+export type ToggleProps = BaseToggleProps & BaseCheckboxProps

package/components/Toggle/index.ts

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

package/components/Tooltip/Tooltip.meta.ts

@@ -0,0 +1,78 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { TooltipBaseProps } from "./Tooltip.types"
+
+export const meta: HeliosAttributeMeta<TooltipBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-tooltip-default",
+			description: "Default tooltip (bottom-center)",
+			content: `<Tooltip><Tooltip.Trigger><Button value="Hover me" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>This is a tooltip</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-bottom-center",
+			description: "Bottom center position",
+			content: `<Tooltip position="bottom-center"><Tooltip.Trigger><Button value="Bottom Center" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>Tooltip at bottom center</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-bottom-left",
+			description: "Bottom left position",
+			content: `<Tooltip position="bottom-left"><Tooltip.Trigger><Button value="Bottom Left" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>Tooltip at bottom left</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-bottom-right",
+			description: "Bottom right position",
+			content: `<Tooltip position="bottom-right"><Tooltip.Trigger><Button value="Bottom Right" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>Tooltip at bottom right</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-top-center",
+			description: "Top center position",
+			content: `<Tooltip position="top-center"><Tooltip.Trigger><Button value="Top Center" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>Tooltip at top center</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-top-left",
+			description: "Top left position",
+			content: `<Tooltip position="top-left"><Tooltip.Trigger><Button value="Top Left" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>Tooltip at top left</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-top-right",
+			description: "Top right position",
+			content: `<Tooltip position="top-right"><Tooltip.Trigger><Button value="Top Right" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>Tooltip at top right</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-left-center",
+			description: "Left center position",
+			content: `<Tooltip position="left-center"><Tooltip.Trigger><Button value="Left Center" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>Tooltip at left center</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-right-center",
+			description: "Right center position",
+			content: `<Tooltip position="right-center"><Tooltip.Trigger><Button value="Right Center" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>Tooltip at right center</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-long",
+			description: "With long content",
+			content: `<Tooltip position="left-center"><Tooltip.Trigger><Button value="Long" icon="book" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>This is a very long tooltip that will wrap to multiple lines. This is a very long tooltip that will wrap to multiple lines</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-visible",
+			description: "Initially visible tooltip",
+			content: `<Tooltip isVisible={true}><Tooltip.Trigger><Button value="Always Visible" intent="neutral"/></Tooltip.Trigger><Tooltip.Content>This tooltip is open by default</Tooltip.Content></Tooltip>`,
+		},
+		{
+			id: "ui-tooltip-rich-content",
+			description: "Rich content in tooltip",
+			content: `<Tooltip><Tooltip.Trigger><Button value="Rich Content" intent="neutral"/></Tooltip.Trigger><Tooltip.Content><Text type="small">Rich content with <strong>bold text</strong></Text></Tooltip.Content></Tooltip>`,
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+	position: {
+		type: "'bottom-center' | 'bottom-left' | 'bottom-right' | 'left-center' | 'right-center' | 'top-center' | 'top-left' | 'top-right'",
+		isOptional: true,
+	},
+	isVisible: {
+		type: "boolean",
+		isOptional: true,
+	},
+}

package/components/Tooltip/Tooltip.module.css

@@ -0,0 +1,18 @@
+.tooltipContainer {
+	position: relative;
+
+	display: inline-block;
+}
+
+.tooltip {
+	position: fixed;
+	z-index: 10;
+
+	max-width: 320px;
+	padding: 8px;
+
+	background-color: var(--ui-bg-secondary);
+	border: 0;
+	color: var(--ui-text-primary);
+	border-radius: var(--radius-small);
+}