@heliosgraphics/ui 2.0.0-alpha.100

package/components/shared/ResultList/ResultList.tsx

@@ -0,0 +1,67 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { Checkbox } from "../../Checkbox"
+import { Flex } from "../../Flex"
+import { Icon } from "../../Icon"
+import { Text } from "../../Text"
+import styles from "./ResultList.module.css"
+import type { ChangeEventHandler, FC } from "react"
+import type { ResultListProps } from "./ResultList.types"
+
+export const ResultList: FC<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, index) => {
+				const itemKey: string = item.name ? `${item.name}-${index}` : `separator-${index}`
+				const itemClasses: string = getClasses("flex flex-y-center gap-5", styles.item, {
+					[styles.itemActive]: item.isActive && !item.type,
+					[styles.itemDisabled]: item.isDisabled,
+				})
+
+				if (item.type === "separator") return <li key={itemKey} className={styles.resultList__separator} />
+
+				if (item.type === "checkbox") {
+					const onCheck: ChangeEventHandler<HTMLInputElement> = (): void => {
+						item.onClick?.({} as React.MouseEvent)
+					}
+
+					return (
+						<li key={itemKey} onClick={item.onClick} className={itemClasses}>
+							<Checkbox
+								label={item.name}
+								{...(item.description && { description: item.description })}
+								isChecked={!!item.isActive}
+								onChange={onCheck}
+							/>
+						</li>
+					)
+				}
+
+				return (
+					<li key={itemKey} 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>
+	)
+}
+
+ResultList.displayName = "ResultList"

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

@@ -0,0 +1,19 @@
+import type { Ref, MouseEventHandler } from "react"
+import type { HeliosIconType } from "../../../types/icons"
+
+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
+	ref?: Ref<HTMLOListElement>
+}

package/components/shared/ResultList/index.ts

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

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 "../types/colors"
+
+export const COLORS: Array<HeliosColorType> = [
+	"aqua",
+	"blue",
+	"gray",
+	"green",
+	"olive",
+	"orange",
+	"pink",
+	"purple",
+	"red",
+	"yellow",
+]

package/constants/components.ts

@@ -0,0 +1,101 @@
+import type { HeliosAttributeMeta } from "../types/meta"
+
+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 metaRange } from "../components/Range/Range.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 = {
+	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,
+	Range: metaRange,
+	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,
+} as const satisfies Record<string, HeliosAttributeMeta<unknown>>

package/constants/emphasis.ts

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

package/constants/hooks.ts

@@ -0,0 +1 @@
+export const HOOKS = ["useIntersection", "useLayoutContext", "usePrevious", "usePrint", "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>

package/constants/intentions.ts

@@ -0,0 +1,28 @@
+import type { HeliosColorType } from "../types/colors"
+import type { HeliosIntentionType } from "../types/intentions"
+
+export const INTENTIONS: Array<HeliosIntentionType> = [
+	"action",
+	"automation",
+	"confirmation",
+	"danger",
+	"highlight",
+	"question",
+	"organic",
+	"neutral",
+	"success",
+	"warning",
+]
+
+export const INTENTION_COLOR_MAP: Readonly<Record<HeliosIntentionType, HeliosColorType>> = {
+	action: "blue",
+	automation: "pink",
+	confirmation: "purple",
+	danger: "red",
+	highlight: "orange",
+	neutral: "gray",
+	organic: "olive",
+	question: "aqua",
+	success: "green",
+	warning: "yellow",
+}

package/constants/meta.ts

@@ -0,0 +1,60 @@
+import { COMPONENTS } from "./components"
+import type { HeliosComponentStatusType, HeliosComponentCategoryType } from "../types/meta"
+import type { HeliosColorType } from "../types/colors"
+import type { HeliosIconType } from "../types/icons"
+
+export const STATUS_COLORS = {
+	experimental: "pink",
+	nominal: "gray",
+	stable: "green",
+	internal: "gray",
+} as const satisfies Record<HeliosComponentStatusType, HeliosColorType>
+
+export const STATUS_ICONS = {
+	experimental: "bolt",
+	nominal: "bolt",
+	stable: "check",
+	internal: "bullseye",
+} as const satisfies Record<HeliosComponentStatusType, HeliosIconType>
+
+export const STATUS_NAMES = {
+	experimental: "Experimental",
+	nominal: "Might Change",
+	stable: "Stable",
+	internal: "Internal",
+} as const satisfies Record<HeliosComponentStatusType, string>
+
+export const TYPE_NAMES = {
+	content: "Content",
+	pattern: "Pattern",
+	core: "Core",
+	layout: "Layout",
+	meta: "Meta",
+} as const satisfies Record<HeliosComponentCategoryType, string>
+
+interface StatusReturnType {
+	color: HeliosColorType
+	icon: HeliosIconType
+	name: string
+	status: HeliosComponentStatusType
+}
+
+export const getStatus = (component: string = "Example"): StatusReturnType => {
+	const componentMeta = COMPONENTS[component as keyof typeof COMPONENTS]
+
+	if (!componentMeta || !componentMeta._status) {
+		throw new Error(`Component "${component}" not found or missing _status`)
+	}
+
+	const _status = componentMeta._status as HeliosComponentStatusType
+	const color = STATUS_COLORS[_status]
+	const icon = STATUS_ICONS[_status]
+	const name = STATUS_NAMES[_status]
+
+	return {
+		status: _status,
+		color,
+		icon,
+		name,
+	}
+}

package/constants/positions.ts

@@ -0,0 +1,3 @@
+import { HeliosPositionType } from "../types/positions"
+
+export const POSITIONS: Array<HeliosPositionType> = ["bottom-left", "bottom-right", "top-left", "top-right"]

package/constants/scale.ts

@@ -0,0 +1,5 @@
+import type { HeliosScaleType } from "../types/scale"
+
+export const SCALE: Array<HeliosScaleType> = [
+	1, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 48, 64, 80, 96,
+] as const

package/constants/scope.ts

@@ -0,0 +1,151 @@
+import type { Scope } from "../types/scope"
+import type { BreadcrumbItem } from "../components/Breadcrumb/Breadcrumb.types"
+import type { SelectItem } from "../components/Select/Select.types"
+import type { PieItem } from "../components/Pie/Pie.types"
+import type { ResultItem } from "../components/shared/ResultList/ResultList.types"
+
+const BREADCRUMB_ITEMS: Array<BreadcrumbItem> = [
+	{ name: "Index", href: "/", onClick: () => null },
+	{ name: "Books", href: "/", onClick: () => null },
+	{
+		name: "Lorem Ipsum",
+		href: "/",
+		isActive: true,
+		onClick: () => null,
+	},
+]
+
+const RESULT_ITEMS: Array<ResultItem> = [
+	{ name: "First Item", icon: "bullseye" },
+	{
+		name: "Second Item",
+		icon: "bell",
+		description: "Nulla ultricies ultrices mauris, sed posuere justo ultrices in.",
+	},
+	{ name: "Separator", type: "separator" },
+	{ name: "Disabled", isDisabled: false },
+	{ name: "Checkbox", type: "checkbox", isActive: false, onClick: () => null },
+	{
+		name: "Checkbox Checked",
+		type: "checkbox",
+		isActive: true,
+		onClick: () => null,
+		description: "Nulla ultricies ultrices mauris, sed posuere justo ultrices in.",
+	},
+	{ name: "Random Item", icon: "person" },
+	{ name: "Active Item", icon: "bell", isActive: true },
+	{ name: "Lorem Ipsum Dolor Sit Ameta", icon: "x-x" },
+]
+
+const MARKDOWN: string = `# Donec vestibulum
+## Nam porta, orci porta commodo
+### Pellentesque eu est luctus
+#### Nullam pulvinar convallis
+##### Luctus sollicitudin ipsum
+###### Aliquam erat volutpat
+
+Praesent tincidunt elit ante, <a href="">sit amet aliquet nunc imperdiet</a> nec. In pulvinar volutpat lacus sed semper. Aliquam vulputate risus at lacinia aliquam.
+
+|feature|description|
+|--|--|
+|calt|Contextual alternates|
+|dlig|Discretionary Ligatures|
+
+Mauris efficitur aliquam risus, id tempus quam pharetra vitae.
+
+\`\`\`tsx
+<Flex isCentered={true} gap={4}>
+  <Dot size={8} color="blue"/>
+  <Dot size={8} color="red"/>
+</Flex>
+\`\`\`
+
+Integer leo est, lobortis at nulla at, tempus dignissim velit. ~~Suspendisse dignissim~~, ipsum sit amet rhoncus tristique, urna risus accumsan leo, ut \`auctor augue function() {}\` sit amet metus. Proin purus risus, tincidunt a est a, porttitor dignissim erat. Sed vitae varius urna, sed <mark>mark tincidunt neque</mark>. Aenean egestas molestie ante nec pellentesque. Donec massa diam, molestie ac gravida at, commodo et diam.
+
+---
+
+- First item
+- Second item<sup>1</sup>
+- Third item
+- Orci varius natoque penatibus<sub>2</sub>
+
+Orci varius natoque penatibus et <a>magnis dis parturient</a> montes, nascetur ridiculus mus. Aenean varius non magna dapibus pharetra. Pellentesque eget sapien sit amet massa dapibus lacinia. Integer auctor pulvinar erat, non pharetra felis fermentum ac.
+
+> Proin purus risus, ~~tincidunt~~ a est a, porttitor dignissim erat. Sed vitae varius urna, sed tincidunt neque. Aenean egestas molestie ante nec pellentesque. Donec massa diam, molestie ac gravida at, commodo et diam.
+
+<small>
+Phasellus tristique tortor sed malesuada aliquam. Quisque cursus sodales velit, eget condimentum erat accumsan a. Fusce feugiat felis eros, in dignissim arcu imperdiet non. Fusce tincidunt eu dolor vitae pulvinar. Quisque dignissim nibh erat, eu iaculis est maximus sit amet. Vestibulum id lobortis nisi, a maximus leo. Etiam mattis rhoncus felis id condimentum. Vivamus ut nisi non nunc sollicitudin consectetur at id nisl. Vivamus quis turpis a leo pellentesque interdum et id diam. Fusce egestas diam orci, ut volutpat diam semper nec. Pellentesque accumsan consequat erat, id mattis mi ultrices sit amet.
+</small>
+`
+
+const TAB_ITEMS: Array<string> = ["First", "Second", "Third"]
+
+const TAB_SECTIONS: Array<unknown> = ["1. Content", "2. Content", "3. Content"]
+
+const PIE_ITEMS: Array<PieItem> = [
+	{ name: "X", value: 24 },
+	{ name: "First", value: 24 },
+	{ name: "Second", value: 34 },
+	{ name: "Third", value: 63 },
+]
+
+const SELECT_ITEMS: Array<SelectItem> = [
+	{ name: "First", value: "first" },
+	{ name: "Second", value: "second" },
+]
+
+export const SCOPE: Scope = {
+	APPEARANCE: "light",
+	BREADCRUMB_ITEMS: BREADCRUMB_ITEMS,
+	BUTTONGROUP_ALIGN: "left",
+	CHECKBOX_LABEL: "Helium Enabled",
+	CHILDREN: "Hello World",
+	COLOR: "blue",
+	COLOR_ACCENT: "purple",
+	DATE: new Date().toISOString(),
+	DATE_FORMAT: "YYYY-MM-DD",
+	DONUT_SIZE: 48,
+	EMPHASIS: "primary",
+	FUNCTION: () => console.log(0),
+	GAP: 8,
+	HELPER_TEXT: "Learn this with love",
+	ICON: "robot",
+	ICON_ACCENT: "asterisk",
+	INPUT_LABEL: "Helium Enabled",
+	INTENT: "action",
+	INTENT_PARAGRAPH: "Offer guidance or recommendations based on expertise or experience, allowing for personal choice",
+	INTENT_TITLE: "Action",
+	IS_ACTIVE: false,
+	IS_CENTERED: false,
+	IS_CHECKED: true,
+	IS_COLUMN: true,
+	IS_DISABLED: false,
+	IS_LOADING: false,
+	IS_NARROW: false,
+	IS_OPEN: false,
+	IS_ROUND: false,
+	IS_ROUNDED: true,
+	MARKDOWN,
+	ON_RADIO_CHANGE: () => console.log(0),
+	ON_SELECT_ITEM: (item: SelectItem) => console.log(item),
+	ON_TEXTAREA_CHANGE: () => console.log(0),
+	ON_TEXT_CHANGE: () => console.log(0),
+	ON_TOGGLE_OPEN: () => console.log(0),
+	PERCENTAGE: 49,
+	PIE_ITEMS,
+	PILL_LABEL: "Deployed",
+	POSITION: "bottom-left",
+	RADIO: "radio-state-01",
+	RADIO_LABEL: "Atmosphere",
+	RESULT_LIST_ITEMS: RESULT_ITEMS,
+	SCALE: 24,
+	SELECT_ITEMS,
+	SIZE: "normal",
+	TAB_ITEMS,
+	TAB_SECTIONS,
+	TEXTAREA: "Your Message",
+	TEXTAREA_LABEL: "Your Message",
+	TEXTAREA_PLACEHOLDER: "Your Message",
+	TEXT_LABEL: "Email Address",
+	TEXT_VALUE: "",
+}

package/contexts/LayoutContext/LayoutContext.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { useState, createContext, useRef, useEffect, useMemo, useCallback } from "react"
+import type { FC, PropsWithChildren } from "react"
+import type { LayoutContextProps } from "./LayoutContext.types"
+
+const IGNORE_DATA_ATTRIBUTE = "data-ui-layout-ignore" as const
+
+const LayoutContext = createContext<LayoutContextProps | null>(null)
+
+interface LayoutProviderBaseProps {
+	breakpoint?: number
+}
+type LayoutProviderProps = PropsWithChildren<LayoutProviderBaseProps>
+
+const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 }) => {
+	const [isMenuVisible, setIsMenuVisible] = useState<boolean>(false)
+	const [isWideEnough, setIsWideEnough] = useState<boolean>(false)
+	const [hasMounted, setHasMounted] = useState<boolean>(false)
+	const asideRef = useRef<HTMLElement | null>(null)
+	const isMenuVisibleRef = useRef<boolean>(false)
+
+	useEffect(() => {
+		isMenuVisibleRef.current = isMenuVisible
+	}, [isMenuVisible])
+
+	useEffect(() => {
+		setHasMounted(true)
+
+		const mql = globalThis.matchMedia(`(min-width: ${breakpoint}px)`)
+
+		const handleChange = (event: MediaQueryListEvent | MediaQueryList): void => {
+			const matches = event.matches
+
+			setIsWideEnough(matches)
+
+			if (matches) {
+				setIsMenuVisible(true)
+			} else {
+				setIsMenuVisible(false)
+			}
+		}
+
+		// Set initial state
+		handleChange(mql)
+
+		mql.addEventListener("change", handleChange)
+
+		const handleClickOutside = (event: MouseEvent): void => {
+			if (asideRef?.current?.contains(event.target as Node)) return
+
+			const clickedElement = event.target as Element
+			const shouldIgnore: Element | null = clickedElement?.closest(`[${IGNORE_DATA_ATTRIBUTE}]`)
+
+			if (!shouldIgnore) {
+				const currentIsWideEnough: boolean = mql.matches
+
+				if (!currentIsWideEnough && isMenuVisibleRef.current) {
+					setIsMenuVisible(false)
+				}
+			}
+		}
+
+		globalThis.document.addEventListener("mousedown", handleClickOutside)
+
+		return (): void => {
+			mql.removeEventListener("change", handleChange)
+			globalThis.document.removeEventListener("mousedown", handleClickOutside)
+		}
+	}, [breakpoint])
+
+	const isNavigationVisible: boolean = isWideEnough || isMenuVisible
+
+	const onNavigationToggle = useCallback((): void => setIsMenuVisible((prev) => !prev), [])
+	const onAsideClose = useCallback((): void => setIsMenuVisible(false), [])
+
+	const contextValue: LayoutContextProps = useMemo(
+		() => ({
+			asideRef,
+			hasMounted,
+			isMenuVisible,
+			isWideEnough,
+			onAsideClose,
+			onNavigationToggle,
+			isNavigationVisible,
+		}),
+		[hasMounted, isMenuVisible, isWideEnough, isNavigationVisible, onAsideClose, onNavigationToggle],
+	)
+
+	return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>
+}
+
+export { LayoutContext, LayoutProvider }

package/contexts/LayoutContext/LayoutContext.types.ts

@@ -0,0 +1,11 @@
+import type { RefObject } from "react"
+
+export interface LayoutContextProps {
+	asideRef: RefObject<HTMLElement | null>
+	hasMounted: boolean
+	isMenuVisible: boolean
+	isWideEnough: boolean
+	onAsideClose: () => void
+	onNavigationToggle: () => void
+	isNavigationVisible: boolean
+}

package/contexts/LayoutContext/index.ts

@@ -0,0 +1,2 @@
+export { LayoutContext, LayoutProvider } from "./LayoutContext"
+export type { LayoutContextProps } from "./LayoutContext.types"

package/globals.d.ts

@@ -0,0 +1,14 @@
+declare module "*.module.css"
+declare module "*.css"
+
+type HeliosFixedThemeTypeRef = import("./types/themes").HeliosFixedThemeType
+
+interface Window {
+	__theme: HeliosFixedThemeTypeRef
+	__onThemeChange: ((theme: HeliosFixedThemeTypeRef) => void) | undefined
+	__setPreferredTheme: (theme: HeliosFixedThemeTypeRef) => void
+}
+
+declare var __theme: HeliosFixedThemeTypeRef
+declare var __onThemeChange: ((theme: HeliosFixedThemeTypeRef) => void) | undefined
+declare var __setPreferredTheme: (theme: HeliosFixedThemeTypeRef) => void