@heliosgraphics/ui 2.0.0-alpha.89 → 2.0.0-alpha.91

package/contexts/LayoutContext/LayoutContext.types.ts

@@ -8,4 +8,5 @@ export interface LayoutContextProps {
 	onAsideClose: () => void
 	onNavigationToggle: () => void
 	shouldShowNavigation: boolean
+	windowWidth: number
 }

package/hooks/useDebounce.tsx

@@ -2,8 +2,8 @@
 
 import { useState, useEffect } from "react"
 
-export const useDebounce = (value: unknown, delay: number): unknown => {
-	const [debouncedValue, setDebouncedValue] = useState<unknown>(value)
+export const useDebounce = <T,>(value: T, delay: number): T => {
+	const [debouncedValue, setDebouncedValue] = useState<T>(value)
 
 	useEffect(() => {
 		const handler: ReturnType<typeof setTimeout> = setTimeout(() => {

package/hooks/useLayoutContext.tsx

@@ -12,6 +12,7 @@ const DEFAULT_LAYOUT_CONTEXT: LayoutContextProps = {
 	onAsideClose: () => {},
 	onNavigationToggle: () => {},
 	shouldShowNavigation: true,
+	windowWidth: 0,
 }
 
 export const useLayoutContext = (): LayoutContextProps => {

package/hooks/usePrint.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+
+interface UsePrintReturn {
+	isPrinting: boolean
+	print: () => void
+}
+
+export const usePrint = (): UsePrintReturn => {
+	const [isPrinting, setIsPrinting] = useState<boolean>(false)
+
+	useEffect(() => {
+		const handleBeforePrint = (): void => setIsPrinting(true)
+		const handleAfterPrint = (): void => setIsPrinting(false)
+
+		globalThis.addEventListener("beforeprint", handleBeforePrint)
+		globalThis.addEventListener("afterprint", handleAfterPrint)
+
+		return (): void => {
+			globalThis.removeEventListener("beforeprint", handleBeforePrint)
+			globalThis.removeEventListener("afterprint", handleAfterPrint)
+		}
+	}, [])
+
+	const print = useCallback((): void => {
+		globalThis.print()
+	}, [])
+
+	return { isPrinting, print }
+}

package/index.ts

@@ -1,3 +1,6 @@
+// eslint-disable-next-line typescript/triple-slash-reference
+/// <reference path="./globals.d.ts" />
+
 export { Alert } from "./components/Alert"
 export { Breadcrumb } from "./components/Breadcrumb"
 export { Browser } from "./components/Browser"
@@ -64,6 +67,7 @@ export type { TextBaseProps, TextProps } from "./components/Text"
 export { useIntersection } from "./hooks/useIntersection"
 export { useLayoutContext } from "./hooks/useLayoutContext"
 export { usePrevious } from "./hooks/usePrevious"
+export { usePrint } from "./hooks/usePrint"
 export { useTheme } from "./hooks/useTheme"
 
 export type { HeliosAppearanceType, HeliosColorType } from "./types/colors"

package/package.json

@@ -1,12 +1,23 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.89",
+	"version": "2.0.0-alpha.91",
 	"type": "module",
 	"sideEffects": false,
 	"author": "Chris Puska <chris@puska.org>",
 	"private": false,
 	"description": "Helios UI",
 	"main": "./index.ts",
+	"exports": {
+		".": "./index.ts",
+		"./components/*": "./components/*/index.ts",
+		"./constants/*": "./constants/*.ts",
+		"./contexts/*": "./contexts/*/index.ts",
+		"./hooks/*": "./hooks/*.tsx",
+		"./types/*": "./types/*.ts",
+		"./utils/*": "./utils/*.ts",
+		"./css/*": "./css/*.css",
+		"./components.css": "./components.css"
+	},
 	"files": [
 		"components/**/*.*",
 		"constants/*.*",
@@ -31,24 +42,21 @@
 		"@heliosgraphics/css": "1.0.0-alpha.3",
 		"@heliosgraphics/icons": "1.0.0-alpha.11",
 		"@heliosgraphics/utils": "6.0.0-alpha.9",
-		"@types/markdown-it": "^14.1.2",
 		"dayjs": "^1.11.19",
-		"markdown-it": "^14.1.0",
+		"marked": "^17.0.2",
+		"marked-linkify-it": "^3.1.14",
+		"marked-xhtml": "^1.0.14",
 		"react-plock": "^3.6.1"
 	},
 	"devDependencies": {
 		"@testing-library/react": "^16.3.2",
 		"@types/node": "^25",
-		"@typescript-eslint/eslint-plugin": "^8.54.0",
-		"@vitejs/plugin-react": "^5.1.2",
+		"@vitejs/plugin-react": "^5.1.4",
 		"@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.5",
-		"glob": "latest",
-		"jsdom": "^27.4.0",
+		"esbuild": "^0.27.3",
+		"esbuild-css-modules-plugin": "^3.1.5",
+		"glob": "^13.0.3",
+		"jsdom": "^28.0.0",
 		"next": "^16.1.6",
 		"prettier": "^3.8.1",
 		"typescript": "^5.9.3",

package/utils/date.ts

@@ -0,0 +1,54 @@
+const DEFAULT_FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
+	year: "numeric",
+	month: "long",
+	day: "numeric",
+}
+
+const RELATIVE_UNITS: Array<{ unit: Intl.RelativeTimeFormatUnit; ms: number }> = [
+	{ unit: "year", ms: 365.25 * 24 * 60 * 60 * 1000 },
+	{ unit: "month", ms: 30.44 * 24 * 60 * 60 * 1000 },
+	{ unit: "week", ms: 7 * 24 * 60 * 60 * 1000 },
+	{ unit: "day", ms: 24 * 60 * 60 * 1000 },
+	{ unit: "hour", ms: 60 * 60 * 1000 },
+	{ unit: "minute", ms: 60 * 1000 },
+	{ unit: "second", ms: 1000 },
+]
+
+const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" })
+
+export const formatDate = (
+	date?: string | null,
+	options: Intl.DateTimeFormatOptions = DEFAULT_FORMAT_OPTIONS,
+): string => {
+	if (!date) return ""
+
+	const parsed = new Date(date)
+
+	if (Number.isNaN(parsed.getTime())) return ""
+
+	return new Intl.DateTimeFormat("en-US", options).format(parsed)
+}
+
+export const getIsValid = (date?: string | null): boolean => {
+	if (!date) return false
+
+	return !Number.isNaN(new Date(date).getTime())
+}
+
+export const getFromNow = (date?: string | null): string => {
+	if (!date) return ""
+
+	const parsed = new Date(date)
+
+	if (Number.isNaN(parsed.getTime())) return ""
+
+	const diff: number = parsed.getTime() - Date.now()
+
+	for (const { unit, ms } of RELATIVE_UNITS) {
+		if (Math.abs(diff) >= ms) {
+			return rtf.format(Math.round(diff / ms), unit)
+		}
+	}
+
+	return rtf.format(0, "second")
+}

package/utils/dayjs.ts

@@ -1,21 +0,0 @@
-import dayjs from "dayjs"
-import relativeTime from "dayjs/plugin/relativeTime"
-
-dayjs.extend(relativeTime)
-
-export const formatDate = (date?: string | null, format?: string): string => {
-	if (!date || !format) return ""
-
-	const formatted: string = dayjs(date).format(format)
-
-	return formatted
-}
-
-export const getIsValid = (date?: string | null): boolean => {
-	const parseDate = dayjs(date)
-	const isValid: boolean = parseDate.isValid()
-
-	return isValid
-}
-
-export const getFromNow = (date?: string | null): string => dayjs(date).fromNow()