@heliosgraphics/ui 2.0.0-alpha.76 → 2.0.0-alpha.78

package/components/Tile/Tile.types.ts

@@ -1,5 +1,6 @@
 import { MouseEventHandler } from "react"
-import type { HeliosIconType, HeliosColorType, HeliosAppearanceType } from "../.."
+import type { HeliosIconType } from "../../types/icons"
+import type { HeliosColorType, HeliosAppearanceType } from "../../types/colors"
 
 export interface TileProps {
 	appearance?: HeliosAppearanceType

package/components/Timestamp/Timestamp.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { TimestampProps } from "./Timestamp.types"
 
 export const meta: HeliosAttributeMeta<TimestampProps> = {

package/components/Toggle/Toggle.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { BaseToggleProps } from "./Toggle.types"
 
 export const meta: HeliosAttributeMeta<BaseToggleProps> = {

package/components/Toggle/Toggle.tsx

@@ -3,7 +3,8 @@
 import { useId } from "react"
 import { getClasses } from "@heliosgraphics/utils/classnames"
 import { getColorClasses } from "../../utils/colors"
-import { INTENTION_COLOR_MAP, Text } from "../.."
+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"

package/components/Toggle/Toggle.types.ts

@@ -1,4 +1,4 @@
-import type { HeliosIntentionType } from "../.."
+import type { HeliosIntentionType } from "../../types/intentions"
 import type { BaseCheckboxProps } from "../Checkbox/Checkbox.types"
 
 export interface BaseToggleProps {

package/components/Tooltip/Tooltip.meta.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../.."
+import type { HeliosAttributeMeta } from "../../types/meta"
 import type { TooltipBaseProps } from "./Tooltip.types"
 
 export const meta: HeliosAttributeMeta<TooltipBaseProps> = {

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

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { TooltipContentProps } from "./TooltipContent.types"
 
 export const meta: HeliosAttributeMeta<TooltipContentProps> = {

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

@@ -1,4 +1,4 @@
-import { Text } from "../../../.."
+import { Text } from "../../../Text"
 import { useTooltipContext } from "../../Tooltip.utils"
 import type { FC } from "react"
 import type { TooltipContentProps } from "./TooltipContent.types"

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

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../../.."
+import type { HeliosAttributeMeta } from "../../../../types/meta"
 import type { TooltipTriggerProps } from "./TooltipTrigger.types"
 
 export const meta: HeliosAttributeMeta<TooltipTriggerProps> = {

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

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../.."
+import type { HeliosAttributeMeta } from "../../../types/meta"
 import type { InputLabelProps } from "./InputLabel.types"
 
 export const meta: HeliosAttributeMeta<InputLabelProps> = {

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

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from "../../.."
+import type { HeliosAttributeMeta } from "../../../types/meta"
 import type { ResultListProps } from "./ResultList.types"
 
 export const meta: HeliosAttributeMeta<ResultListProps> = {

package/components/shared/ResultList/ResultList.tsx

@@ -1,5 +1,8 @@
 import { getClasses } from "@heliosgraphics/utils/classnames"
-import { Checkbox, Flex, Icon, Text } from "../../.."
+import { Checkbox } from "../../Checkbox"
+import { Flex } from "../../Flex"
+import { Icon } from "../../Icon"
+import { Text } from "../../Text"
 import styles from "./ResultList.module.css"
 import { forwardRef } from "react"
 import type { ChangeEvent } from "react"

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

@@ -1,5 +1,5 @@
 import type { Ref, MouseEventHandler } from "react"
-import type { HeliosIconType } from "../../.."
+import type { HeliosIconType } from "../../../types/icons"
 
 export interface ResultItem {
 	description?: string

package/constants/colors.ts

@@ -1,4 +1,4 @@
-import type { HeliosColorType } from ".."
+import type { HeliosColorType } from "../types/colors"
 
 export const COLORS: Array<HeliosColorType> = [
 	"aqua",

package/constants/components.ts

@@ -1,4 +1,4 @@
-import type { HeliosAttributeMeta } from ".."
+import type { HeliosAttributeMeta } from "../types/meta"
 
 import { meta as metaAlert } from "../components/Alert/Alert.meta"
 import { meta as metaBreadcrumb } from "../components/Breadcrumb/Breadcrumb.meta"

package/constants/emphasis.ts

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

package/constants/meta.ts

@@ -1,10 +1,7 @@
-import {
-	COMPONENTS,
-	type HeliosComponentStatusType,
-	type HeliosComponentCategoryType,
-	type HeliosColorType,
-	type HeliosIconType,
-} from ".."
+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: Record<HeliosComponentStatusType, HeliosColorType> = {
 	experimental: "pink",

package/constants/scale.ts

@@ -1,4 +1,4 @@
-import type { HeliosScaleType } from ".."
+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,

package/constants/scope.ts

@@ -1,5 +1,8 @@
 import type { Scope } from "../types/scope"
-import type { BreadcrumbItem, SelectItem, PieItem, ResultItem } from ".."
+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 },

package/contexts/LayoutContext/LayoutContext.tsx

@@ -19,6 +19,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 	const [hasMounted, setHasMounted] = useState<boolean>(false)
 	const asideRef = useRef<HTMLElement | null>(null)
 	const isMenuVisibleRef = useRef<boolean>(false)
+	const windowWidthRef = useRef<number>(0)
 
 	useEffect(() => {
 		isMenuVisibleRef.current = isMenuVisible
@@ -29,6 +30,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 
 		setHasMounted(true)
 		setWindowWidth(initialWidth)
+		windowWidthRef.current = initialWidth
 
 		const initialMenuVisible = initialWidth >= breakpoint
 
@@ -37,10 +39,11 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 
 		const handleResize = (): void => {
 			const newWidth: number = globalThis.innerWidth
-			const wasWideEnough: boolean = windowWidth >= breakpoint
+			const wasWideEnough: boolean = windowWidthRef.current >= breakpoint
 			const isNowWideEnough: boolean = newWidth >= breakpoint
 
 			setWindowWidth(newWidth)
+			windowWidthRef.current = newWidth
 
 			if (isNowWideEnough && !wasWideEnough) {
 				setIsMenuVisible(true)
@@ -71,7 +74,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			globalThis.removeEventListener("resize", handleResize)
 			globalThis.document.removeEventListener("mousedown", handleClickOutside)
 		}
-	}, [breakpoint, windowWidth])
+	}, [breakpoint])
 
 	const isWideEnough: boolean = hasMounted ? windowWidth >= breakpoint : false
 	const shouldShowNavigation: boolean = isWideEnough || isMenuVisible

package/hooks/useChatScroll.tsx

@@ -19,11 +19,11 @@ export const useChatScroll = (
 	onResetManual: () => void
 } => {
 	const [isManual, setManual] = useState<boolean>(false)
-	const [scrollPos, setScrollPos] = useState<ScrollPosition>({
+	const [scrollPos, setScrollPos] = useState<ScrollPosition>(() => ({
 		top: 0,
 		bottom: 0,
 		height: 0,
-	})
+	}))
 	const ref = useRef<HTMLDivElement>(null)
 	const wasAtBottom = useRef<boolean>(true)
 

package/hooks/useTheme.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { useCallback, useEffect, useState } from "react"
-import type { HeliosThemeType } from ".."
+import type { HeliosThemeType } from "../types/themes"
 
 export const useTheme = (): { theme: HeliosThemeType; isDark: boolean; toggleTheme: () => void } => {
 	const [theme, setTheme] = useState<HeliosThemeType | null>(null)

package/package.json

@@ -1,7 +1,8 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.76",
+	"version": "2.0.0-alpha.78",
 	"type": "module",
+	"sideEffects": false,
 	"author": "Chris Puska <chris@puska.org>",
 	"private": false,
 	"description": "Helios UI",
@@ -36,23 +37,23 @@
 		"react-plock": "^3.6.1"
 	},
 	"devDependencies": {
-		"@testing-library/react": "^16.3.1",
+		"@testing-library/react": "^16.3.2",
 		"@types/node": "^25",
-		"@typescript-eslint/eslint-plugin": "^8.50.1",
+		"@typescript-eslint/eslint-plugin": "^8.53.1",
 		"@vitejs/plugin-react": "^5.1.2",
-		"@vitest/coverage-v8": "^4.0.16",
+		"@vitest/coverage-v8": "^4.0.18",
 		"esbuild": "latest",
 		"esbuild-css-modules-plugin": "latest",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-prettier": "^5.5.4",
+		"eslint-plugin-prettier": "^5.5.5",
 		"glob": "latest",
-		"jsdom": "^27.3.0",
-		"next": "^16.1.1",
-		"prettier": "^3.7.4",
+		"jsdom": "^27.4.0",
+		"next": "^16.1.4",
+		"prettier": "^3.8.1",
 		"typescript": "^5.9.3",
-		"vite": "^7.3.0",
-		"vitest": "^4.0.16"
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18"
 	},
 	"peerDependencies": {
 		"@types/react": "^19",

package/types/scope.ts

@@ -1,18 +1,14 @@
-import type {
-	BreadcrumbItem,
-	ButtonGroupProps,
-	DonutSizeType,
-	HeliosColorType,
-	HeliosEmphasisType,
-	HeliosIconType,
-	HeliosIntentionType,
-	HeliosPositionType,
-	HeliosScaleType,
-	HeliosSizeType,
-	PieItem,
-	ResultItem,
-	SelectItem,
-} from ".."
+import type { BreadcrumbItem } from "../components/Breadcrumb/Breadcrumb.types"
+import type { ButtonGroupProps } from "../components/ButtonGroup/ButtonGroup.types"
+import type { DonutSizeType } from "../components/Donut/Donut.types"
+import type { PieItem } from "../components/Pie/Pie.types"
+import type { ResultItem } from "../components/shared/ResultList/ResultList.types"
+import type { SelectItem } from "../components/Select/Select.types"
+import type { HeliosColorType } from "./colors"
+import type { HeliosIconType } from "./icons"
+import type { HeliosEmphasisType, HeliosIntentionType } from "./intentions"
+import type { HeliosPositionType } from "./positions"
+import type { HeliosScaleType, HeliosSizeType } from "./scale"
 
 export interface Scope {
 	APPEARANCE: "light" | "dark"

package/utils/colors.ts

@@ -1,5 +1,5 @@
-import { COLORS } from ".."
-import type { HeliosAppearanceType, HeliosColorType } from ".."
+import { COLORS } from "../constants/colors"
+import type { HeliosAppearanceType, HeliosColorType } from "../types/colors"
 
 export const getColorClasses = (
 	consideredColor: HeliosColorType,