@heliosgraphics/ui 2.0.0-alpha.100

package/components/Toggle/Toggle.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { useId } from "react"
+import { getClasses } from "@heliosgraphics/utils"
+import { getColorClasses } from "../../utils/colors"
+import { INTENTION_COLOR_MAP } from "../../constants/intentions"
+import { Text } from "../Text"
+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} data-ui-component="Toggle">
+			<label className={toggleLabelClasses} htmlFor={toggleId}>
+				<input
+					type="checkbox"
+					role="switch"
+					checked={isChecked}
+					aria-checked={isChecked}
+					aria-label={isLabelHidden ? label : undefined}
+					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>
+	)
+}
+
+Toggle.displayName = "Toggle"

package/components/Toggle/Toggle.types.ts

@@ -0,0 +1,9 @@
+import type { HeliosIntentionType } from "../../types/intentions"
+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 "../../types/meta"
+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,63 @@
+.tooltipContainer {
+	position: relative;
+
+	display: inline-block;
+	anchor-scope: --tooltip;
+}
+
+.tooltip {
+	position: fixed;
+	z-index: 10;
+
+	max-width: 320px;
+	margin: 8px;
+	padding: 8px;
+
+	background-color: var(--ui-bg-secondary);
+	border: 0;
+	color: var(--ui-text-primary);
+	border-radius: var(--radius-sm);
+
+	position-area: bottom center;
+
+	opacity: 1;
+	transition:
+		opacity 150ms ease-out,
+		display 150ms ease-out allow-discrete;
+
+	@starting-style {
+		opacity: 0;
+	}
+
+	&:not(:popover-open) {
+		opacity: 0;
+	}
+}
+
+.tooltipBottomLeft {
+	position-area: bottom left;
+}
+
+.tooltipBottomRight {
+	position-area: bottom right;
+}
+
+.tooltipTopCenter {
+	position-area: top center;
+}
+
+.tooltipTopLeft {
+	position-area: top left;
+}
+
+.tooltipTopRight {
+	position-area: top right;
+}
+
+.tooltipLeftCenter {
+	position-area: left center;
+}
+
+.tooltipRightCenter {
+	position-area: right center;
+}

package/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,115 @@
+"use client"
+
+import { useRef, useEffect, useMemo, useId, type FC } from "react"
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./Tooltip.module.css"
+import type { TooltipProps, TooltipComposition, TooltipContextType } from "./Tooltip.types"
+import { TooltipTrigger } from "./components/TooltipTrigger"
+import { TooltipContent } from "./components/TooltipContent"
+import { TooltipContext } from "./Tooltip.utils"
+
+const POSITION_CLASS_MAP = {
+	"bottom-center": undefined,
+	"bottom-left": styles.tooltipBottomLeft,
+	"bottom-right": styles.tooltipBottomRight,
+	"top-center": styles.tooltipTopCenter,
+	"top-left": styles.tooltipTopLeft,
+	"top-right": styles.tooltipTopRight,
+	"left-center": styles.tooltipLeftCenter,
+	"right-center": styles.tooltipRightCenter,
+} as const satisfies Record<NonNullable<TooltipProps["position"]>, string | undefined>
+
+const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "bottom-center", isVisible = false }) => {
+	const triggerRef = useRef<HTMLDivElement | null>(null)
+	const popoverRef = useRef<HTMLDivElement | null>(null)
+	const id: string = useId()
+	const tooltipId: string = `tooltip-${id.replace(/:/g, "")}`
+	const anchorName: string = `--tooltip-${id.replace(/:/g, "")}`
+
+	const positionClass: string | undefined = POSITION_CLASS_MAP[position]
+
+	const tooltipClasses: string = useMemo(
+		() => getClasses(styles.tooltip, "elevation-md", positionClass),
+		[positionClass],
+	)
+
+	useEffect(() => {
+		const trigger = triggerRef.current
+		const popover = popoverRef.current as HTMLElement & {
+			showPopover?: () => void
+			hidePopover?: () => void
+		}
+
+		if (!trigger || !popover || typeof popover.showPopover !== "function") {
+			return
+		}
+
+		const setAriaDescribedBy = (isOpen: boolean): void => {
+			if (isOpen) {
+				trigger.setAttribute("aria-describedby", tooltipId)
+			} else {
+				trigger.removeAttribute("aria-describedby")
+			}
+		}
+
+		if (isVisible) {
+			popover.showPopover()
+			setAriaDescribedBy(true)
+		}
+
+		const handleMouseEnter = (): void => {
+			popover.showPopover()
+			setAriaDescribedBy(true)
+		}
+
+		const handleMouseLeave = (): void => {
+			if (!isVisible) {
+				popover.hidePopover()
+				setAriaDescribedBy(false)
+			}
+		}
+
+		const handleKeyDown = (event: KeyboardEvent): void => {
+			if (event.key === "Escape") {
+				popover.hidePopover()
+				setAriaDescribedBy(false)
+			}
+		}
+
+		trigger.addEventListener("mouseenter", handleMouseEnter)
+		trigger.addEventListener("mouseleave", handleMouseLeave)
+		trigger.addEventListener("keydown", handleKeyDown)
+
+		return (): void => {
+			trigger.removeEventListener("mouseenter", handleMouseEnter)
+			trigger.removeEventListener("mouseleave", handleMouseLeave)
+			trigger.removeEventListener("keydown", handleKeyDown)
+		}
+	}, [isVisible, tooltipId])
+
+	const contextValue: TooltipContextType = useMemo(
+		() => ({
+			triggerRef,
+			popoverRef,
+			tooltipClasses,
+			anchorName,
+			tooltipId,
+		}),
+		[tooltipClasses, anchorName, tooltipId],
+	)
+
+	return (
+		<TooltipContext.Provider value={contextValue}>
+			<div className={styles.tooltipContainer} data-ui-component="Tooltip">
+				{children}
+			</div>
+		</TooltipContext.Provider>
+	)
+}
+
+export const Tooltip: FC<TooltipProps> & TooltipComposition = Object.assign(TooltipComponent, {
+	Trigger: TooltipTrigger,
+	Content: TooltipContent,
+})
+
+Tooltip.displayName = "Tooltip"

package/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,31 @@
+import type { FC, PropsWithChildren, RefObject } from "react"
+import type { TooltipContentProps } from "./components/TooltipContent/TooltipContent.types"
+import type { TooltipTriggerProps } from "./components/TooltipTrigger/TooltipTrigger.types"
+
+export interface TooltipBaseProps {
+	position?:
+		| "bottom-center"
+		| "bottom-left"
+		| "bottom-right"
+		| "left-center"
+		| "right-center"
+		| "top-center"
+		| "top-left"
+		| "top-right"
+	isVisible?: boolean
+}
+
+export type TooltipProps = PropsWithChildren<TooltipBaseProps>
+
+export interface TooltipContextType {
+	triggerRef: RefObject<HTMLDivElement | null>
+	popoverRef: RefObject<HTMLDivElement | null>
+	tooltipClasses: string
+	anchorName: string
+	tooltipId: string
+}
+
+export interface TooltipComposition {
+	Trigger: FC<TooltipTriggerProps>
+	Content: FC<TooltipContentProps>
+}

package/components/Tooltip/Tooltip.utils.ts

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react"
+import type { TooltipContextType } from "./Tooltip.types"
+
+export const TooltipContext = createContext<TooltipContextType | undefined>(undefined)
+
+export const useTooltipContext = (): TooltipContextType => {
+	const context = useContext(TooltipContext)
+
+	if (!context) {
+		throw new Error("Tooltip components must be used within a Tooltip component")
+	}
+
+	return context
+}

package/components/Tooltip/components/TooltipContent/TooltipContent.meta.ts

@@ -0,0 +1,12 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { TooltipContentProps } from "./TooltipContent.types"
+
+export const meta: HeliosAttributeMeta<TooltipContentProps> = {
+	_category: "pattern",
+	_extends: ["PropsWithChildren"],
+	_patterns: [],
+	_status: "internal",
+	children: {
+		type: "ReactElement<unknown>",
+	},
+}

package/components/Tooltip/components/TooltipContent/TooltipContent.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Text } from "../../../Text"
+import { useTooltipContext } from "../../Tooltip.utils"
+import type { CSSProperties, FC } from "react"
+import type { TooltipContentProps } from "./TooltipContent.types"
+
+export const TooltipContent: FC<TooltipContentProps> = ({ children }) => {
+	const { popoverRef, tooltipClasses, anchorName, tooltipId } = useTooltipContext()
+
+	const contentStyle: CSSProperties = { positionAnchor: anchorName } as CSSProperties
+
+	return (
+		<div
+			id={tooltipId}
+			role="tooltip"
+			className={tooltipClasses}
+			ref={popoverRef}
+			popover="manual"
+			style={contentStyle}
+		>
+			<Text type="small">{children}</Text>
+		</div>
+	)
+}
+
+TooltipContent.displayName = "TooltipContent"

package/components/Tooltip/components/TooltipContent/TooltipContent.types.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from "react"
+
+export type TooltipContentProps = PropsWithChildren

package/components/Tooltip/components/TooltipContent/index.ts

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

package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.meta.ts

@@ -0,0 +1,12 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { TooltipTriggerProps } from "./TooltipTrigger.types"
+
+export const meta: HeliosAttributeMeta<TooltipTriggerProps> = {
+	_category: "pattern",
+	_extends: ["PropsWithChildren"],
+	_patterns: [],
+	_status: "internal",
+	children: {
+		type: "ReactElement<unknown>",
+	},
+}

package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import type { TooltipTriggerProps } from "./TooltipTrigger.types"
+import { useTooltipContext } from "../../Tooltip.utils"
+import type { CSSProperties, FC } from "react"
+
+export const TooltipTrigger: FC<TooltipTriggerProps> = ({ children }) => {
+	const { triggerRef, anchorName } = useTooltipContext()
+
+	const triggerStyle: CSSProperties = { anchorName } as CSSProperties
+
+	return (
+		<div ref={triggerRef} style={triggerStyle}>
+			{children}
+		</div>
+	)
+}
+
+TooltipTrigger.displayName = "TooltipTrigger"

package/components/Tooltip/components/TooltipTrigger/TooltipTrigger.types.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from "react"
+
+export type TooltipTriggerProps = PropsWithChildren

package/components/Tooltip/components/TooltipTrigger/index.ts

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

package/components/Tooltip/index.ts

@@ -0,0 +1,6 @@
+import type { TooltipComposition } from "./Tooltip.types"
+import { Tooltip as TooltipComponent } from "./Tooltip"
+
+const Tooltip = TooltipComponent as TooltipComposition
+
+export { Tooltip }

package/components/shared/InputLabel/InputLabel.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../../../types/meta"
+import type { InputLabelProps } from "./InputLabel.types"
+
+export const meta: HeliosAttributeMeta<InputLabelProps> = {
+	_status: "internal",
+	_patterns: [],
+	_category: "core",
+	label: {
+		type: "string",
+	},
+	id: {
+		type: "string",
+	},
+	isDisabled: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isHidden: {
+		type: "boolean",
+		isOptional: true,
+	},
+}

package/components/shared/InputLabel/InputLabel.module.css

@@ -0,0 +1,14 @@
+.inputLabel {
+	margin-bottom: var(--space-3);
+
+	color: var(--ui-text-secondary);
+
+	font-size: var(--font-size-small);
+	font-weight: var(--font-weight-normal);
+	font-family: var(--font-family-sans);
+	line-height: var(--line-height-small);
+}
+
+.inputLabelDisabled {
+	color: var(--ui-text-tertiary);
+}

package/components/shared/InputLabel/InputLabel.tsx

@@ -0,0 +1,20 @@
+import { type FC } from "react"
+import styles from "./InputLabel.module.css"
+import { getClasses } from "@heliosgraphics/utils"
+import type { InputLabelProps } from "./InputLabel.types"
+
+export const InputLabel: FC<InputLabelProps> = ({ id, label, isDisabled, isHidden }) => {
+	if (isHidden || !label) return null
+
+	const inputLabelClasses: string = getClasses(styles.inputLabel, {
+		[styles.inputLabelDisabled]: isDisabled,
+	})
+
+	return (
+		<label className={inputLabelClasses} htmlFor={id}>
+			{label}
+		</label>
+	)
+}
+
+InputLabel.displayName = "InputLabel"

package/components/shared/InputLabel/InputLabel.types.ts

@@ -0,0 +1,6 @@
+export interface InputLabelProps {
+	label: string
+	id: string
+	isDisabled?: boolean
+	isHidden?: boolean
+}

package/components/shared/InputLabel/index.ts

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

package/components/shared/ResultList/ResultList.meta.ts

@@ -0,0 +1,20 @@
+import type { HeliosAttributeMeta } from "../../../types/meta"
+import type { ResultListProps } from "./ResultList.types"
+
+export const meta: HeliosAttributeMeta<ResultListProps> = {
+	_status: "internal",
+	_category: "core",
+	_patterns: [],
+	items: {
+		type: "Array<ResultItem>",
+		isOptional: true,
+	},
+	isHidden: {
+		type: "boolean",
+		isOptional: true,
+	},
+	ref: {
+		type: "Ref<HTMLOListElement>",
+		isOptional: true,
+	},
+}

package/components/shared/ResultList/ResultList.module.css

@@ -0,0 +1,71 @@
+.resultList {
+	position: absolute;
+	z-index: var(--z-index-1);
+
+	max-height: 360px;
+	max-width: 100%;
+	overflow-y: scroll;
+	overflow-x: hidden;
+	opacity: 0;
+	width: 360px;
+
+	background-color: var(--ui-bg-primary);
+	border-radius: var(--radius-md);
+	transform: translateX(-8px);
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+
+	animation: resultsFadeIn var(--speed-sm) ease-in-out forwards;
+}
+
+.itemActive {
+	background-color: var(--ui-bg-tertiary);
+}
+
+.itemDisabled {
+	background: var(--ui-bg-tertiary);
+	color: var(--ui-text-tertiary);
+
+	pointer-events: none;
+}
+
+.resultList .item:hover {
+	background-color: var(--ui-bg-secondary);
+}
+
+.resultList .item:not(:first-child) {
+	border-top: 1px solid var(--ui-border-secondary);
+}
+
+.resultList .item {
+	padding: 10px 12px;
+
+	cursor: pointer;
+
+	-webkit-tap-highlight-color: transparent;
+}
+
+.resultList li.resultList__separator {
+	position: relative;
+
+	padding: 4px;
+	background-color: var(--ui-bg-tertiary);
+	border-top: 1px solid var(--ui-border-secondary);
+	border-bottom: 1px solid var(--ui-border-secondary);
+
+	pointer-events: none;
+}
+
+.resultList li.resultList__separator + .item {
+	border-top: 0;
+}
+
+@keyframes resultsFadeIn {
+	0% {
+		opacity: 0;
+		transform: translateX(-8px);
+	}
+	100% {
+		opacity: 1;
+		transform: translateX(0);
+	}
+}