@heliosgraphics/ui 2.0.1-alpha.7 → 2.0.1-alpha.9

package/components/Flex/Flex.utils.ts

@@ -73,7 +73,7 @@ export const getFlexUtility = (props?: FlexProps): string => {
 export const getResponsiveScale = (value?: ResponsiveScaleType, prefix: string = "p"): string => {
 	if (!value) return ""
 
-	const isArray: boolean = Boolean(value && value instanceof Array)
+	const isArray: boolean = Array.isArray(value)
 	const classes = new Set<string>()
 
 	if (!isArray) return `${prefix}-${value}`
@@ -92,7 +92,7 @@ export const getResponsiveScale = (value?: ResponsiveScaleType, prefix: string =
 export const getPadding = (paddingValue?: ResponsiveScaleType): string => {
 	if (!paddingValue) return ""
 
-	const isArray: boolean = Boolean(paddingValue && paddingValue instanceof Array)
+	const isArray: boolean = Array.isArray(paddingValue)
 	const paddingClasses = new Set<string>()
 
 	if (!isArray) return `p-${paddingValue}`
@@ -111,7 +111,7 @@ export const getPadding = (paddingValue?: ResponsiveScaleType): string => {
 export const getRadius = (radiusValue?: ResponsiveRadiusType): string => {
 	if (!radiusValue) return ""
 
-	const isArray: boolean = Boolean(radiusValue && radiusValue instanceof Array)
+	const isArray: boolean = Array.isArray(radiusValue)
 	const radiusClasses = new Set<string>()
 
 	if (!isArray) return `radius-${radiusValue}`

package/components/Heading/Heading.tsx

@@ -32,9 +32,7 @@ export const Heading: FC<HeadingProps> = (props) => {
 	const lineHeightStyle: CSSProperties | undefined = lineHeight !== undefined ? { lineHeight } : undefined
 
 	const mergedStyle: CSSProperties | undefined =
-		style || lineClampStyle || lineHeightStyle
-			? { ...(style || {}), ...(lineClampStyle || {}), ...(lineHeightStyle || {}) }
-			: undefined
+		style || lineClampStyle || lineHeightStyle ? { ...style, ...lineClampStyle, ...lineHeightStyle } : undefined
 	const safeHeadingProps: Omit<HeadingProps, "level" | "lineClamp" | "lineHeight" | "className" | "style"> =
 		stripTypographyProps(rest)
 

package/components/Icon/Icon.module.css

@@ -7,16 +7,20 @@
 	width: 100%;
 
 	fill: currentcolor;
+	stroke: currentcolor;
 }
 
 .iconPrimary svg {
 	fill: var(--ui-text-primary);
+	stroke: var(--ui-text-primary);
 }
 
 .iconSecondary svg {
 	fill: var(--ui-text-secondary);
+	stroke: var(--ui-text-secondary);
 }
 
 .iconTertiary svg {
 	fill: var(--ui-text-tertiary);
+	stroke: var(--ui-text-tertiary);
 }

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.utils.ts

@@ -3,6 +3,10 @@
 let lastLocation: string | null = null
 let isHistoryPatched: boolean = false
 
+const dispatchLocationChange = (): void => {
+	globalThis.dispatchEvent(new Event("locationchange"))
+}
+
 const getLocationKey = (): string | null => {
 	if (!globalThis?.location) return null
 
@@ -15,9 +19,6 @@ const patchHistory = (): void => {
 	isHistoryPatched = true
 
 	const { pushState, replaceState } = globalThis.history
-	const dispatchLocationChange = (): void => {
-		globalThis.dispatchEvent(new Event("locationchange"))
-	}
 
 	const pushStateWrapper = (...args: Parameters<History["pushState"]>): ReturnType<History["pushState"]> => {
 		const result = pushState.apply(globalThis.history, args as Parameters<History["pushState"]>)

package/components/Markdown/Markdown.meta.ts

@@ -16,6 +16,11 @@ export const meta: HeliosAttributeMeta<MarkdownProps> = {
 		isOptional: true,
 		description: "Children to render inside the markdown wrapper",
 	},
+	isLinksAllowed: {
+		type: "boolean",
+		isOptional: true,
+		description: "Preserves markdown links and auto-linked URLs in sanitized output",
+	},
 	isNonSelectable: {
 		type: "boolean",
 		isOptional: true,

package/components/Markdown/Markdown.tsx

@@ -4,7 +4,7 @@ import styles from "./Markdown.module.css"
 import type { FC } from "react"
 import type { MarkdownProps } from "./Markdown.types"
 
-export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable }) => {
+export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable, isLinksAllowed }) => {
 	if (!text && !children) return null
 
 	const markdownClasses: string = getClasses(styles.markdown, {
@@ -12,7 +12,7 @@ export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable })
 	})
 
 	if (text) {
-		const innerHTML = { __html: renderMarkdown(text) }
+		const innerHTML = { __html: renderMarkdown(text, { allowLinks: !!isLinksAllowed }) }
 
 		return <div className={markdownClasses} dangerouslySetInnerHTML={innerHTML} data-ui-component="Markdown"></div>
 	}

package/components/Markdown/Markdown.types.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from "react"
 
 export interface MarkdownProps {
 	children?: ReactNode
+	isLinksAllowed?: boolean
 	isNonSelectable?: boolean
 	text?: string
 }

package/components/Setup/Setup.utils.ts

@@ -1,61 +0,0 @@
-import type { HeliosFixedThemeType, HeliosThemeType } from "../../types/themes"
-
-export const code = (theme: HeliosThemeType = "system", fixedTheme?: HeliosFixedThemeType): void => {
-	globalThis.__onThemeChange = function (_theme: HeliosFixedThemeType): void {}
-
-	const setTheme = (newTheme: HeliosFixedThemeType): void => {
-		globalThis.__theme = newTheme
-		document.documentElement.dataset["theme"] = newTheme
-		globalThis.__onThemeChange?.(newTheme)
-	}
-
-	const handleDocumentClick = (event: MouseEvent): void => {
-		if (event.x > 256 && globalThis.location.hash === "#ui-menu") {
-			globalThis.location.hash = "#ui"
-		}
-	}
-
-	document.addEventListener("click", handleDocumentClick)
-
-	const isLocked: boolean = fixedTheme !== undefined || theme !== "system"
-
-	if (fixedTheme !== undefined && theme !== "system") {
-		console.warn("Setup: Both theme and fixedTheme props are set. fixedTheme takes precedence, theme prop is ignored.")
-	}
-
-	if (isLocked) {
-		const lockedTheme: HeliosFixedThemeType = fixedTheme ?? (theme as HeliosFixedThemeType)
-		globalThis.__setPreferredTheme = function (_newTheme: HeliosFixedThemeType): void {}
-		setTheme(lockedTheme)
-		return
-	}
-
-	let preferredTheme: HeliosFixedThemeType | undefined
-	const darkQuery: MediaQueryList = globalThis.matchMedia("(prefers-color-scheme: dark)")
-
-	try {
-		const storedTheme: string | null = globalThis.localStorage.getItem("theme")
-		if (storedTheme === "dark" || storedTheme === "light") {
-			preferredTheme = storedTheme
-		}
-	} catch (error: unknown) {
-		console.error("failed to read theme from localStorage:", error)
-	}
-
-	globalThis.__setPreferredTheme = function (newTheme: HeliosFixedThemeType): void {
-		try {
-			setTheme(newTheme)
-			globalThis.localStorage.setItem("theme", newTheme)
-		} catch (error: unknown) {
-			console.error("failed to set theme:", error)
-		}
-	}
-
-	const handleDarkModeChange = (event: MediaQueryListEvent): void => {
-		globalThis.__setPreferredTheme(event.matches ? "dark" : "light")
-	}
-
-	darkQuery.addEventListener("change", handleDarkModeChange)
-
-	setTheme(preferredTheme ?? (darkQuery.matches ? "dark" : "light"))
-}

package/components/Tabs/Tabs.tsx

@@ -1,19 +1,13 @@
 import { getClasses } from "@heliosgraphics/utils"
 import { Text } from "../Text"
+import { onTabKeyDown } from "./Tabs.utils"
 import styles from "./Tabs.module.css"
-import type { FC, KeyboardEvent } from "react"
+import type { FC } from "react"
 import type { TabItem, TabsProps } from "./Tabs.types"
 
 export const Tabs: FC<TabsProps> = ({ items, children }) => {
 	if (!items?.length) return null
 
-	const onKeyDown = (event: KeyboardEvent<HTMLElement>, item: TabItem): void => {
-		if (event.key === " " || event.key === "Enter") {
-			event.preventDefault()
-			item.onClick?.()
-		}
-	}
-
 	return (
 		<div data-ui-component="Tabs">
 			<div role="tablist" className={styles.tabs__list}>
@@ -46,7 +40,7 @@ export const Tabs: FC<TabsProps> = ({ items, children }) => {
 						<div
 							{...commonProps}
 							onClick={item.isDisabled ? undefined : item.onClick}
-							onKeyDown={(e) => onKeyDown(e, item)}
+							onKeyDown={(event) => onTabKeyDown(event, item)}
 						>
 							<Text type="small" fontWeight="medium">
 								{item.name}

package/components/Tabs/Tabs.utils.ts

@@ -0,0 +1,9 @@
+import type { KeyboardEvent } from "react"
+import type { TabItem } from "./Tabs.types"
+
+export const onTabKeyDown = (event: KeyboardEvent<HTMLElement>, item: TabItem): void => {
+	if (event.key === " " || event.key === "Enter") {
+		event.preventDefault()
+		item.onClick?.()
+	}
+}

package/components/Text/Text.tsx

@@ -28,7 +28,7 @@ export const Text: FC<TextProps> = (props) => {
 		: undefined
 
 	const mergedStyle: object | undefined =
-		props.style || lineClampStyle ? { ...(props.style || {}), ...(lineClampStyle || {}) } : undefined
+		props.style || lineClampStyle ? { ...props.style, ...lineClampStyle } : undefined
 
 	const baseTextProps: Omit<TextProps, "type"> = {
 		onClick: props.onClick,

package/hooks/useTheme.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from "react"
 import type { HeliosFixedThemeType } from "../types/themes"
 
+const getTheme = (): HeliosFixedThemeType => (typeof globalThis !== "undefined" ? globalThis.__theme : "light")
+
 export const useTheme = (): { theme: HeliosFixedThemeType; isDark: boolean; toggleTheme: () => void } => {
 	const [theme, setTheme] = useState<HeliosFixedThemeType | null>(null)
 
@@ -10,8 +12,6 @@ export const useTheme = (): { theme: HeliosFixedThemeType; isDark: boolean; togg
 		setTheme(getTheme())
 	}, [])
 
-	const getTheme = (): HeliosFixedThemeType => (typeof globalThis !== "undefined" ? globalThis.__theme : "light")
-
 	const toggleTheme = useCallback(() => {
 		const currentIsDark: boolean = getTheme() === "dark"
 		globalThis.__setPreferredTheme?.(currentIsDark ? "light" : "dark")

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.7",
+	"version": "2.0.1-alpha.9",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -40,10 +40,10 @@
 		"ts:watch": "tsc --noEmit --incremental --watch"
 	},
 	"dependencies": {
-		"@heliosgraphics/css": "^1.0.0-alpha.5",
-		"@heliosgraphics/icons": "^1.0.0-alpha.11",
-		"@heliosgraphics/utils": "^6.0.0-alpha.9",
-		"marked": "^17.0.3",
+		"@heliosgraphics/css": "^1.0.0-alpha.10",
+		"@heliosgraphics/icons": "^1.0.0-alpha.14",
+		"@heliosgraphics/utils": "^6.0.0-alpha.16",
+		"marked": "^17.0.5",
 		"marked-linkify-it": "^3.1.14",
 		"marked-xhtml": "^1.0.14",
 		"react-plock": "^3.6.1"
@@ -51,13 +51,13 @@
 	"devDependencies": {
 		"@testing-library/react": "^16.3.2",
 		"@types/node": "^25",
-		"esbuild": "^0.27.3",
+		"esbuild": "^0.28.0",
 		"esbuild-css-modules-plugin": "^3.1.5",
 		"glob": "^13.0.6",
-		"jsdom": "^28.1.0",
-		"next": "^16.1.6",
+		"jsdom": "^29.0.1",
+		"next": "^16.2.2",
 		"prettier": "^3.8.1",
-		"typescript": "^5.9.3"
+		"typescript": "^6.0.2"
 	},
 	"peerDependencies": {
 		"@types/react": "^19",

package/utils/markdown.spec.ts

@@ -5,6 +5,10 @@ describe("markdown", () => {
 	describe("renderMarkdown", () => {
 		const SAMPLE = `Hello\n\nHey`
 		const SAMPLE_OUTPUT = `<p>Hello</p>\n<p>Hey</p>\n`
+		const LINK_SAMPLE = `[x](https://example.com)`
+		const LINK_SAMPLE_OUTPUT = `<p><a href="https://example.com">x</a></p>\n`
+		const BARE_URL_SAMPLE = `Visit https://example.com/path for details.`
+		const BARE_URL_SAMPLE_OUTPUT = `<p>Visit <a href="https://example.com/path">https://example.com/path</a> for details.</p>\n`
 		const MALICIOUS_SAMPLE = `Hello <script>alert(1)</script> **world**`
 		const MALICIOUS_SAMPLE_OUTPUT = `<p>Hello  <strong>world</strong></p>`
 		const MALICIOUS_LINK_SAMPLE = `[x](data:text/html,<script>alert(1)</script>)`
@@ -14,6 +18,19 @@ describe("markdown", () => {
 
 		it("Returns", () => expect(renderMarkdown(SAMPLE)).toEqual(SAMPLE_OUTPUT))
 
+		it("keeps explicit markdown links when links are allowed", () => {
+			expect(renderMarkdown(LINK_SAMPLE, { allowLinks: true })).toEqual(LINK_SAMPLE_OUTPUT)
+		})
+
+		it("autolinks bare urls when links are allowed", () => {
+			expect(renderMarkdown(BARE_URL_SAMPLE, { allowLinks: true })).toEqual(BARE_URL_SAMPLE_OUTPUT)
+		})
+
+		it("keeps links disabled by default", () => {
+			expect(renderMarkdown(LINK_SAMPLE)).toEqual(`<p>x</p>\n`)
+			expect(renderMarkdown(BARE_URL_SAMPLE)).toEqual(`<p>Visit https://example.com/path for details.</p>\n`)
+		})
+
 		it("strips unsafe html from markdown output", () => {
 			const result = renderMarkdown(MALICIOUS_SAMPLE)
 
@@ -23,13 +40,19 @@ describe("markdown", () => {
 		})
 
 		it("strips unsafe link protocols without leaving broken markup", () => {
-			const result = renderMarkdown(MALICIOUS_LINK_SAMPLE)
+			const result = renderMarkdown(MALICIOUS_LINK_SAMPLE, { allowLinks: true })
 
 			expect(result).toEqual(MALICIOUS_LINK_SAMPLE_OUTPUT)
 			expect(result).not.toContain("data:")
 			expect(result).not.toContain("<script")
 		})
 
+		it("does not autolink urls inside inline code", () => {
+			const result = renderMarkdown("`https://example.com`", { allowLinks: true })
+
+			expect(result).toEqual(`<p><code>https://example.com</code></p>\n`)
+		})
+
 		it("removes inline event handler attributes from raw html", () => {
 			const result = renderMarkdown(MALICIOUS_EVENT_HANDLER_SAMPLE)
 

package/utils/markdown.ts

@@ -6,6 +6,10 @@ import { sanitizeText } from "@heliosgraphics/utils"
 const marked = new Marked({ breaks: true, gfm: true })
 const SAFE_MARKDOWN_LINK_PATTERN: RegExp = /^(?:https?:|mailto:|tel:|\/|#)/i
 
+export interface RenderMarkdownOptions {
+	allowLinks?: boolean
+}
+
 marked.use(markedXhtml())
 marked.use(markedLinkifyIt())
 
@@ -15,9 +19,9 @@ const stripUnsafeMarkdownLinks = (html: string): string => {
 	})
 }
 
-export const renderMarkdown = (text: string): string => {
+export const renderMarkdown = (text: string, options: RenderMarkdownOptions = {}): string => {
 	const renderedMarkdown: string = marked.parse(text) as string
-	const sanitizedMarkdown: string = sanitizeText(stripUnsafeMarkdownLinks(renderedMarkdown))
+	const sanitizedMarkdown: string = sanitizeText(stripUnsafeMarkdownLinks(renderedMarkdown), options)
 
 	return renderedMarkdown.endsWith("\n") ? `${sanitizedMarkdown}\n` : sanitizedMarkdown
 }