@heliosgraphics/ui 2.0.0-alpha.93 → 2.0.0-alpha.95

package/components/Tooltip/Tooltip.tsx

@@ -8,7 +8,7 @@ import { TooltipTrigger } from "./components/TooltipTrigger"
 import { TooltipContent } from "./components/TooltipContent"
 import { TooltipContext } from "./Tooltip.utils"
 
-const POSITION_CLASS_MAP: Record<NonNullable<TooltipProps["position"]>, string | undefined> = {
+const POSITION_CLASS_MAP = {
 	"bottom-center": undefined,
 	"bottom-left": styles.tooltipBottomLeft,
 	"bottom-right": styles.tooltipBottomRight,
@@ -17,13 +17,14 @@ const POSITION_CLASS_MAP: Record<NonNullable<TooltipProps["position"]>, string |
 	"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 [isOpen, setIsOpen] = useState<boolean>(isVisible)
 	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]
@@ -85,9 +86,10 @@ const TooltipComponent: FC<TooltipProps> = ({ children = null, position = "botto
 			popoverRef,
 			tooltipClasses,
 			anchorName,
+			tooltipId,
 			isOpen,
 		}),
-		[tooltipClasses, anchorName, isOpen],
+		[tooltipClasses, anchorName, tooltipId, isOpen],
 	)
 
 	return (

package/components/Tooltip/Tooltip.types.ts

@@ -22,6 +22,7 @@ export interface TooltipContextType {
 	popoverRef: RefObject<HTMLDivElement | null>
 	tooltipClasses: string
 	anchorName: string
+	tooltipId: string
 	isOpen: boolean
 }
 

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

@@ -1,15 +1,24 @@
+"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 } = useTooltipContext()
+	const { popoverRef, tooltipClasses, anchorName, tooltipId } = useTooltipContext()
 
 	const contentStyle: CSSProperties = { positionAnchor: anchorName } as CSSProperties
 
 	return (
-		<div className={tooltipClasses} ref={popoverRef} popover="manual" style={contentStyle}>
+		<div
+			id={tooltipId}
+			role="tooltip"
+			className={tooltipClasses}
+			ref={popoverRef}
+			popover="manual"
+			style={contentStyle}
+		>
 			<Text type="small">{children}</Text>
 		</div>
 	)

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

@@ -1,14 +1,16 @@
+"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 { triggerRef, anchorName, tooltipId, isOpen } = useTooltipContext()
 
 	const triggerStyle: CSSProperties = { anchorName } as CSSProperties
 
 	return (
-		<div ref={triggerRef} style={triggerStyle}>
+		<div ref={triggerRef} style={triggerStyle} aria-describedby={isOpen ? tooltipId : undefined}>
 			{children}
 		</div>
 	)

package/components/shared/ResultList/ResultList.tsx

@@ -4,10 +4,10 @@ import { Flex } from "../../Flex"
 import { Icon } from "../../Icon"
 import { Text } from "../../Text"
 import styles from "./ResultList.module.css"
-import type { ChangeEvent } from "react"
+import type { ChangeEvent, FC } from "react"
 import type { ResultListProps } from "./ResultList.types"
 
-export const ResultList = ({ items, isHidden, ref }: ResultListProps) => {
+export const ResultList: FC<ResultListProps> = ({ items, isHidden, ref }) => {
 	if (!items?.length || isHidden) return null
 
 	const resultListClasses: string = getClasses(styles.resultList, "elevation-lg")

package/constants/components.ts

@@ -32,6 +32,7 @@ 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"
@@ -48,7 +49,7 @@ 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>> = {
+export const COMPONENTS = {
 	Alert: metaAlert,
 	Breadcrumb: metaBreadcrumb,
 	Browser: metaBrowser,
@@ -81,6 +82,7 @@ export const COMPONENTS: Record<string, HeliosAttributeMeta<unknown>> = {
 	Pill: metaPill,
 	Progress: metaProgress,
 	Radio: metaRadio,
+	Range: metaRange,
 	Segments: metaSegments,
 	Select: metaSelect,
 	Separator: metaSeparator,
@@ -96,4 +98,4 @@ export const COMPONENTS: Record<string, HeliosAttributeMeta<unknown>> = {
 	Timestamp: metaTimestamp,
 	Toggle: metaToggle,
 	Tooltip: metaTooltip,
-}
+} as const satisfies Record<string, HeliosAttributeMeta<unknown>>

package/constants/meta.ts

@@ -3,34 +3,34 @@ import type { HeliosComponentStatusType, HeliosComponentCategoryType } from "../
 import type { HeliosColorType } from "../types/colors"
 import type { HeliosIconType } from "../types/icons"
 
-export const STATUS_COLORS: Record<HeliosComponentStatusType, HeliosColorType> = {
+export const STATUS_COLORS = {
 	experimental: "pink",
 	nominal: "gray",
 	stable: "green",
 	internal: "gray",
-}
+} as const satisfies Record<HeliosComponentStatusType, HeliosColorType>
 
-export const STATUS_ICONS: Record<HeliosComponentStatusType, HeliosIconType> = {
+export const STATUS_ICONS = {
 	experimental: "bolt",
 	nominal: "bolt",
 	stable: "check",
 	internal: "bullseye",
-}
+} as const satisfies Record<HeliosComponentStatusType, HeliosIconType>
 
-export const STATUS_NAMES: Record<HeliosComponentStatusType, string> = {
+export const STATUS_NAMES = {
 	experimental: "Experimental",
 	nominal: "Might Change",
 	stable: "Stable",
 	internal: "Internal",
-}
+} as const satisfies Record<HeliosComponentStatusType, string>
 
-export const TYPE_NAMES: Record<HeliosComponentCategoryType, 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
@@ -40,7 +40,7 @@ interface StatusReturnType {
 }
 
 export const getStatus = (component: string = "Example"): StatusReturnType => {
-	const componentMeta = COMPONENTS[component]
+	const componentMeta = COMPONENTS[component as keyof typeof COMPONENTS]
 
 	if (!componentMeta || !componentMeta._status) {
 		throw new Error(`Component "${component}" not found or missing _status`)

package/globals.d.ts

@@ -1,2 +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

package/index.ts

@@ -34,6 +34,7 @@ export { Pill } from "./components/Pill"
 export { Placeholder } from "./components/Placeholder"
 export { Progress } from "./components/Progress"
 export { Radio } from "./components/Radio"
+export { Range } from "./components/Range"
 export { Segments } from "./components/Segments"
 export { Select } from "./components/Select"
 export { Separator } from "./components/Separator"

package/package.json

@@ -1,8 +1,11 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.93",
+	"version": "2.0.0-alpha.95",
 	"type": "module",
-	"sideEffects": false,
+	"sideEffects": [
+		"*.css",
+		"*.module.css"
+	],
 	"author": "Chris Puska <chris@puska.org>",
 	"private": false,
 	"description": "Helios UI",
@@ -42,11 +45,9 @@
 		"@heliosgraphics/css": "^1.0.0-alpha.5",
 		"@heliosgraphics/icons": "^1.0.0-alpha.11",
 		"@heliosgraphics/utils": "^6.0.0-alpha.9",
-		"dayjs": "^1.11.19",
-		"marked": "^17.0.2",
+		"marked": "^17.0.3",
 		"marked-linkify-it": "^3.1.14",
-		"marked-xhtml": "^1.0.14",
-		"react-plock": "^3.6.1"
+		"marked-xhtml": "^1.0.14"
 	},
 	"devDependencies": {
 		"@testing-library/react": "^16.3.2",
@@ -55,8 +56,8 @@
 		"@vitest/coverage-v8": "^4.0.18",
 		"esbuild": "^0.27.3",
 		"esbuild-css-modules-plugin": "^3.1.5",
-		"glob": "^13.0.3",
-		"jsdom": "^28.0.0",
+		"glob": "^13.0.6",
+		"jsdom": "^28.1.0",
 		"next": "^16.1.6",
 		"prettier": "^3.8.1",
 		"typescript": "^5.9.3",