@heliosgraphics/ui 2.0.0-alpha.62

package/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { useRef, useEffect, useMemo, useState, FC } from "react"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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 TooltipComponent: FC<TooltipProps> = ({ children = null, position = "bottom-center", isVisible = false }) => {
+	const [isOpen, setIsOpen] = useState<boolean>(isVisible)
+	const triggerRef = useRef<HTMLDivElement | null>(null)
+	const popoverRef = useRef<HTMLDivElement | null>(null)
+
+	const tooltipClasses: string = useMemo(() => getClasses(styles.tooltip, "elevation-medium"), [])
+
+	useEffect(() => {
+		const trigger = triggerRef.current
+		const popover = popoverRef.current as HTMLElement & {
+			showPopover?: () => void
+			hidePopover?: () => void
+		}
+
+		if (!trigger || !popover || typeof popover.showPopover !== "function") {
+			return
+		}
+
+		const positionTooltip = (): void => {
+			if (!trigger || !popover) return
+
+			const triggerRect = trigger.getBoundingClientRect()
+			const popoverRect = popover.getBoundingClientRect()
+			const viewportWidth = globalThis.innerWidth
+			const viewportHeight = globalThis.innerHeight
+
+			let top = 0
+			let left = 0
+
+			switch (position) {
+				case "bottom-center":
+					top = triggerRect.bottom + 8
+					left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2
+					break
+				case "bottom-left":
+					top = triggerRect.bottom + 8
+					left = triggerRect.left
+					break
+				case "bottom-right":
+					top = triggerRect.bottom + 8
+					left = triggerRect.right - popoverRect.width
+					break
+				case "top-center":
+					top = triggerRect.top - popoverRect.height - 8
+					left = triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2
+					break
+				case "top-left":
+					top = triggerRect.top - popoverRect.height - 8
+					left = triggerRect.left
+					break
+				case "top-right":
+					top = triggerRect.top - popoverRect.height - 8
+					left = triggerRect.right - popoverRect.width
+					break
+				case "left-center":
+					top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2
+					left = triggerRect.left - popoverRect.width - 8
+					break
+				case "right-center":
+					top = triggerRect.top + triggerRect.height / 2 - popoverRect.height / 2
+					left = triggerRect.right + 8
+					break
+			}
+
+			left = Math.max(10, Math.min(left, viewportWidth - popoverRect.width - 10))
+			top = Math.max(10, Math.min(top, viewportHeight - popoverRect.height - 10))
+
+			popover.style.top = `${top}px`
+			popover.style.left = `${left}px`
+		}
+
+		if (isVisible) {
+			popover.showPopover()
+			setIsOpen(true)
+			setTimeout(positionTooltip, 0)
+		}
+
+		const handleMouseEnter = (): void => {
+			popover.showPopover()
+			setIsOpen(true)
+			setTimeout(positionTooltip, 0)
+		}
+
+		const handleMouseLeave = (): void => {
+			if (!isVisible) {
+				popover.hidePopover()
+				setIsOpen(false)
+			}
+		}
+
+		trigger.addEventListener("mouseenter", handleMouseEnter)
+		trigger.addEventListener("mouseleave", handleMouseLeave)
+
+		globalThis.addEventListener("resize", positionTooltip)
+		globalThis.addEventListener("scroll", positionTooltip, true)
+
+		return (): void => {
+			trigger.removeEventListener("mouseenter", handleMouseEnter)
+			trigger.removeEventListener("mouseleave", handleMouseLeave)
+			globalThis.removeEventListener("resize", positionTooltip)
+			globalThis.removeEventListener("scroll", positionTooltip, true)
+		}
+	}, [isVisible, position])
+
+	const contextValue: TooltipContextType = {
+		triggerRef,
+		popoverRef,
+		tooltipClasses,
+		isOpen,
+	}
+
+	return (
+		<TooltipContext.Provider value={contextValue}>
+			<div className={styles.tooltipContainer}>{children}</div>
+		</TooltipContext.Provider>
+	)
+}
+
+export const Tooltip: FC<TooltipProps> & TooltipComposition = Object.assign(TooltipComponent, {
+	Trigger: TooltipTrigger,
+	Content: TooltipContent,
+})

package/components/Tooltip/Tooltip.types.ts

@@ -0,0 +1,30 @@
+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
+	isOpen: boolean
+}
+
+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 "../../../.."
+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,14 @@
+import { Text } from "../../../.."
+import { useTooltipContext } from "../../Tooltip.utils"
+import type { FC } from "react"
+import type { TooltipContentProps } from "./TooltipContent.types"
+
+export const TooltipContent: FC<TooltipContentProps> = ({ children }) => {
+	const { popoverRef, tooltipClasses } = useTooltipContext()
+
+	return (
+		<div className={tooltipClasses} ref={popoverRef} popover="manual">
+			<Text type="small">{children}</Text>
+		</div>
+	)
+}

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 "../../../.."
+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,9 @@
+import { TooltipTriggerProps } from "./TooltipTrigger.types"
+import { useTooltipContext } from "../../Tooltip.utils"
+import type { FC } from "react"
+
+export const TooltipTrigger: FC<TooltipTriggerProps> = ({ children }) => {
+	const { triggerRef } = useTooltipContext()
+
+	return <div ref={triggerRef}>{children}</div>
+}

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 "../../.."
+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(--box-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,18 @@
+import { type FC } from "react"
+import styles from "./InputLabel.module.css"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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>
+	)
+}

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,16 @@
+import type { HeliosAttributeMeta } from "../../.."
+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,
+	},
+}

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);
+	}
+}

package/components/shared/ResultList/ResultList.tsx

@@ -0,0 +1,64 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { Checkbox, Flex, Icon, Text } from "../../.."
+import styles from "./ResultList.module.css"
+import { forwardRef } from "react"
+import type { ChangeEvent } from "react"
+import type { ResultListProps } from "./ResultList.types"
+
+export const ResultList = forwardRef<HTMLOListElement, ResultListProps>(({ items, isHidden }, ref) => {
+	if (!items?.length || isHidden) return null
+
+	const resultListClasses: string = getClasses(styles.resultList, "elevation-lg")
+
+	return (
+		<ol className={resultListClasses} data-ui-component="ResultList" role="listbox" ref={ref}>
+			{items?.map((item, key) => {
+				const itemClasses: string = getClasses("flex flex-y-center gap-5", styles.item, {
+					[styles.itemActive]: item.isActive && !item.type,
+					[styles.itemDisabled]: item.isDisabled,
+				})
+
+				// NOTE @03b8 future composit
+				if (item.type === "separator") return <li key={key} className={styles.resultList__separator} />
+
+				// NOTE @03b8 future composit
+				if (item.type === "checkbox") {
+					const onCheck = (event: ChangeEvent<HTMLInputElement>): void =>
+						// eslint-disable-next-line @typescript-eslint/no-explicit-any
+						item.onClick?.(event as any)
+
+					return (
+						<li key={key} onClick={item.onClick} className={itemClasses}>
+							<Checkbox
+								label={item.name}
+								{...(item.description && { description: item.description })}
+								isChecked={!!item.isActive}
+								onChange={onCheck}
+							/>
+						</li>
+					)
+				}
+
+				return (
+					<li key={key} onClick={item.onClick} className={itemClasses}>
+						{item.icon && (
+							<Flex isCentered={true}>
+								<Icon icon={item.icon} size={18} />
+							</Flex>
+						)}
+						<Flex isColumn={true} gap={1}>
+							<Text type="small" fontWeight="medium" lineClamp={1}>
+								{item.name}
+							</Text>
+							{!!item.description && (
+								<Text type="tiny" fontFamily="sans">
+									{item.description}
+								</Text>
+							)}
+						</Flex>
+					</li>
+				)
+			})}
+		</ol>
+	)
+})

package/components/shared/ResultList/ResultList.types.ts

@@ -0,0 +1,18 @@
+import type { Ref, MouseEventHandler } from "react"
+import type { HeliosIconType } from "../../.."
+
+export interface ResultItem {
+	description?: string
+	icon?: HeliosIconType
+	isActive?: boolean
+	isDisabled?: boolean
+	name: string
+	onClick?: MouseEventHandler
+	ref?: Ref<HTMLOListElement>
+	type?: "separator" | "checkbox"
+}
+
+export interface ResultListProps {
+	items?: Array<ResultItem>
+	isHidden?: boolean
+}

package/components/shared/ResultList/index.ts

@@ -0,0 +1,2 @@
+export { ResultList } from "./ResultList"
+export type { ResultItem } from "./ResultList.types"

package/components.css

@@ -0,0 +1,12 @@
+@import "@heliosgraphics/css";
+@import "@heliosgraphics/css/dist/css.easings.css";
+
+@import "./css/core.colors.css";
+@import "./css/core.colors-helpers.css";
+@import "./css/core.scale.css";
+@import "./css/core.setup.css";
+@import "./css/core.typography.css";
+
+@import "./css/feat.atomics.css";
+@import "./css/feat.markdown.css";
+@import "./css/feat.responsive.css";

package/constants/animations.ts

@@ -0,0 +1,5 @@
+export const ANIMATION_FASTEST = 64 as const
+export const ANIMATION_FAST = 96 as const
+export const ANIMATION_NORMAL = 128 as const
+export const ANIMATION_SLOW = 160 as const
+export const ANIMATION_SLOWEST = 192 as const

package/constants/colors.ts

@@ -0,0 +1,14 @@
+import type { HeliosColorType } from ".."
+
+export const COLORS: Array<HeliosColorType> = [
+	"aqua",
+	"blue",
+	"gray",
+	"green",
+	"olive",
+	"orange",
+	"pink",
+	"purple",
+	"red",
+	"yellow",
+]

package/constants/components.ts

@@ -0,0 +1,99 @@
+import type { HeliosAttributeMeta } from ".."
+
+import { meta as metaAlert } from "../components/Alert/Alert.meta"
+import { meta as metaBreadcrumb } from "../components/Breadcrumb/Breadcrumb.meta"
+import { meta as metaBrowser } from "../components/Browser/Browser.meta"
+import { meta as metaButton } from "../components/Button/Button.meta"
+import { meta as metaButtonGroup } from "../components/ButtonGroup/ButtonGroup.meta"
+import { meta as metaCheckbox } from "../components/Checkbox/Checkbox.meta"
+import { meta as metaClock } from "../components/Clock/Clock.meta"
+import { meta as metaColumn } from "../components/Column/Column.meta"
+import { meta as metaConfirm } from "../components/Confirm/Confirm.meta"
+import { meta as metaDatePicker } from "../components/DatePicker/DatePicker.meta"
+import { meta as metaDebug } from "../components/Debug/Debug.meta"
+import { meta as metaDetails } from "../components/Details/Details.meta"
+import { meta as metaDialog } from "../components/Dialog/Dialog.meta"
+import { meta as metaDonut } from "../components/Donut/Donut.meta"
+import { meta as metaLayout } from "../components/Layout/Layout.meta"
+import { meta as metaDot } from "../components/Dot/Dot.meta"
+import { meta as metaDropdown } from "../components/Dropdown/Dropdown.meta"
+import { meta as metaFieldset } from "../components/Fieldset/Fieldset.meta"
+import { meta as metaFlex } from "../components/Flex/Flex.meta"
+import { meta as metaGrid } from "../components/Grid/Grid.meta"
+import { meta as metaHeading } from "../components/Heading/Heading.meta"
+import { meta as metaIcon } from "../components/Icon/Icon.meta"
+import { meta as metaInput } from "../components/Input/Input.meta"
+import { meta as metaLoading } from "../components/Loading/Loading.meta"
+import { meta as metaMarkdown } from "../components/Markdown/Markdown.meta"
+import { meta as metaMasonry } from "../components/Masonry/Masonry.meta"
+import { meta as metaMenu } from "../components/Menu/Menu.meta"
+import { meta as metaOverlay } from "../components/Overlay/Overlay.meta"
+import { meta as metaPie } from "../components/Pie/Pie.meta"
+import { meta as metaPill } from "../components/Pill/Pill.meta"
+import { meta as metaProgress } from "../components/Progress/Progress.meta"
+import { meta as metaRadio } from "../components/Radio/Radio.meta"
+import { meta as metaSegments } from "../components/Segments/Segments.meta"
+import { meta as metaSelect } from "../components/Select/Select.meta"
+import { meta as metaSeparator } from "../components/Separator/Separator.meta"
+import { meta as metaSetup } from "../components/Setup/Setup.meta"
+import { meta as metaShimmer } from "../components/Shimmer/Shimmer.meta"
+import { meta as metaSlider } from "../components/Slider/Slider.meta"
+import { meta as metaSpacer } from "../components/Spacer/Spacer.meta"
+import { meta as metaTable } from "../components/Table/Table.meta"
+import { meta as metaTabs } from "../components/Tabs/Tabs.meta"
+import { meta as metaText } from "../components/Text/Text.meta"
+import { meta as metaTextarea } from "../components/Textarea/Textarea.meta"
+import { meta as metaTile } from "../components/Tile/Tile.meta"
+import { meta as metaTimestamp } from "../components/Timestamp/Timestamp.meta"
+import { meta as metaToggle } from "../components/Toggle/Toggle.meta"
+import { meta as metaTooltip } from "../components/Tooltip/Tooltip.meta"
+
+export const COMPONENTS: Record<string, HeliosAttributeMeta<unknown>> = {
+	Alert: metaAlert,
+	Breadcrumb: metaBreadcrumb,
+	Browser: metaBrowser,
+	Button: metaButton,
+	ButtonGroup: metaButtonGroup,
+	Checkbox: metaCheckbox,
+	Clock: metaClock,
+	Column: metaColumn,
+	Confirm: metaConfirm,
+	DatePicker: metaDatePicker,
+	Debug: metaDebug,
+	Details: metaDetails,
+	Dialog: metaDialog,
+	Donut: metaDonut,
+	Dot: metaDot,
+	Dropdown: metaDropdown,
+	Fieldset: metaFieldset,
+	Flex: metaFlex,
+	Grid: metaGrid,
+	Heading: metaHeading,
+	Icon: metaIcon,
+	Input: metaInput,
+	Layout: metaLayout,
+	Loading: metaLoading,
+	Markdown: metaMarkdown,
+	Masonry: metaMasonry,
+	Menu: metaMenu,
+	Overlay: metaOverlay,
+	Pie: metaPie,
+	Pill: metaPill,
+	Progress: metaProgress,
+	Radio: metaRadio,
+	Segments: metaSegments,
+	Select: metaSelect,
+	Separator: metaSeparator,
+	Setup: metaSetup,
+	Shimmer: metaShimmer,
+	Slider: metaSlider,
+	Spacer: metaSpacer,
+	Table: metaTable,
+	Tabs: metaTabs,
+	Text: metaText,
+	Textarea: metaTextarea,
+	Tile: metaTile,
+	Timestamp: metaTimestamp,
+	Toggle: metaToggle,
+	Tooltip: metaTooltip,
+}

package/constants/emphasis.ts

@@ -0,0 +1,3 @@
+import type { HeliosEmphasisType } from ".."
+
+export const EMPHASES: Array<HeliosEmphasisType> = ["primary", "secondary", "tertiary", "inherit"]

package/constants/hooks.ts

@@ -0,0 +1 @@
+export const HOOKS = ["useIntersection", "usePrevious", "useLayoutContext", "useTheme"] as const

package/constants/icons.ts

@@ -0,0 +1,4 @@
+import { icons } from "@heliosgraphics/icons"
+import type { HeliosIconType } from "../types/icons"
+
+export const ICONS: ReadonlyArray<HeliosIconType> = Object.keys(icons) as Array<HeliosIconType>