@heliosgraphics/ui 2.0.0-alpha.100

package/components/Separator/Separator.meta.ts

@@ -0,0 +1,69 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { SeparatorProps } from "./Separator.types"
+
+export const SHARED_SEPARATOR_META: Partial<HeliosAttributeMeta<SeparatorProps>> = {
+	className: {
+		type: "string",
+		isOptional: true,
+	},
+	height: {
+		type: "number",
+		isOptional: true,
+	},
+	emphasis: {
+		type: "HeliosEmphasisType",
+		isOptional: true,
+		default: "primary",
+	},
+	isVertical: {
+		type: "boolean",
+		isOptional: true,
+	},
+	lineStyle: {
+		type: "solid | dashed | dotted | double",
+		isOptional: true,
+		default: "solid",
+	},
+	width: {
+		type: "number",
+		isOptional: true,
+	},
+}
+
+export const meta: HeliosAttributeMeta<SeparatorProps> = {
+	...(SHARED_SEPARATOR_META as HeliosAttributeMeta<SeparatorProps>),
+	_patterns: [
+		{
+			id: "ui-separator-default",
+			description: "default",
+			content: `<Separator/>`,
+		},
+		{
+			id: "ui-separator-secondary",
+			description: "as secondary",
+			content: `<Separator emphasis="secondary"/>`,
+		},
+		{
+			id: "ui-separator-tertiary",
+			description: "as tertiary",
+			content: `<Separator emphasis="tertiary"/>`,
+		},
+		{
+			id: "ui-separator-tertiary-dashed",
+			description: "as tertiary with dashed line",
+			content: `<Separator emphasis="tertiary" lineStyle="dashed"/>`,
+		},
+		{
+			id: "ui-separator-vertical",
+			description: "as vertical",
+			content: `<Separator isVertical={true} height={32}/>`,
+		},
+		{
+			id: "ui-separator-width",
+			description: "with custom width",
+			content: `<Separator width={64}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+}

package/components/Separator/Separator.module.css

@@ -0,0 +1,11 @@
+.separatorPrimary {
+	border-color: var(--ui-border-primary) !important;
+}
+
+.separatorSecondary {
+	border-color: var(--ui-border-secondary) !important;
+}
+
+.separatorTertiary {
+	border-color: var(--ui-border-tertiary) !important;
+}

package/components/Separator/Separator.spec.tsx

@@ -0,0 +1,6 @@
+import { describe, expect, it } from "bun:test"
+import { Separator } from "./Separator"
+
+describe("Separator", () => {
+	it("should be defined", () => expect(Separator).toBeDefined())
+})

package/components/Separator/Separator.tsx

@@ -0,0 +1,36 @@
+import { HorizontalSeparator } from "./components/HorizontalSeparator"
+import { VerticalSeparator } from "./components/VerticalSeparator"
+import styles from "./Separator.module.css"
+import { getClasses } from "@heliosgraphics/utils"
+import type { SeparatorProps } from "./Separator.types"
+import type { FC } from "react"
+
+export const Separator: FC<SeparatorProps> = ({
+	className,
+	emphasis = "primary",
+	isVertical,
+	height,
+	lineStyle = "solid",
+	width,
+}) => {
+	const separatorClasses: string = getClasses(className, {
+		[styles.separatorPrimary]: emphasis === "primary",
+		[styles.separatorSecondary]: emphasis === "secondary",
+		[styles.separatorTertiary]: emphasis === "tertiary",
+	})
+
+	const separatorProps: SeparatorProps = {
+		className: separatorClasses,
+		emphasis,
+		...(isVertical !== undefined && { isVertical }),
+		...(height !== undefined && { height }),
+		lineStyle,
+		...(width !== undefined && { width }),
+	}
+
+	if (isVertical) return <VerticalSeparator {...separatorProps} />
+
+	return <HorizontalSeparator {...separatorProps} />
+}
+
+Separator.displayName = "Separator"

package/components/Separator/Separator.types.ts

@@ -0,0 +1,10 @@
+import type { HeliosEmphasisType } from "../../types/intentions"
+
+export interface SeparatorProps {
+	className?: string
+	emphasis?: HeliosEmphasisType
+	height?: number
+	isVertical?: boolean
+	lineStyle?: "solid" | "dashed" | "dotted" | "double"
+	width?: number
+}

package/components/Separator/components/HRMarkup/HRMarkup.meta.ts

@@ -0,0 +1,15 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { HRMarkupProps } from "./HRMarkup.types"
+import { SHARED_SEPARATOR_META } from "../../Separator.meta"
+
+export const meta: HeliosAttributeMeta<HRMarkupProps> = {
+	...(SHARED_SEPARATOR_META as HeliosAttributeMeta<HRMarkupProps>),
+	_category: "core",
+	_extends: ["SeparatorProps"],
+	_patterns: [],
+	_status: "internal",
+	style: {
+		type: "object",
+		isOptional: true,
+	},
+}

package/components/Separator/components/HRMarkup/HRMarkup.tsx

@@ -0,0 +1,10 @@
+import type { FC } from "react"
+import type { HRMarkupProps } from "./HRMarkup.types"
+
+export const HRMarkup: FC<HRMarkupProps> = (props) => {
+	const { ...goodProps } = props
+
+	return <hr {...goodProps} data-ui-component="Separator" />
+}
+
+HRMarkup.displayName = "HRMarkup"

package/components/Separator/components/HRMarkup/HRMarkup.types.ts

@@ -0,0 +1,5 @@
+import type { SeparatorProps } from "../../../Separator/Separator.types"
+
+export interface HRMarkupProps extends SeparatorProps {
+	style?: object
+}

package/components/Separator/components/HRMarkup/index.ts

@@ -0,0 +1 @@
+export { HRMarkup } from "./HRMarkup"

package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { HorizontalSeparatorProps } from "./HorizontalSeparator.types"
+
+export const meta: HeliosAttributeMeta<HorizontalSeparatorProps> = {
+	_category: "core",
+	_extends: [],
+	_patterns: [],
+	_status: "internal",
+	className: {
+		type: "string",
+		isOptional: true,
+	},
+	lineStyle: {
+		type: "solid | dashed | dotted | double",
+		isOptional: true,
+		default: "solid",
+	},
+	width: {
+		type: "number",
+		isOptional: true,
+	},
+}

package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.module.css

@@ -0,0 +1,22 @@
+.horizontalSeparator {
+	width: 100%;
+
+	border: 0;
+	border-bottom-width: 1px;
+}
+
+.horizontalSeparatorSolid {
+	border-bottom-style: solid;
+}
+
+.horizontalSeparatorDotted {
+	border-bottom-style: dotted;
+}
+
+.horizontalSeparatorDashed {
+	border-bottom-style: dashed;
+}
+
+.horizontalSeparatorDouble {
+	border-bottom-style: double;
+}

package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.tsx

@@ -0,0 +1,22 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { HRMarkup } from "../HRMarkup"
+import styles from "./HorizontalSeparator.module.css"
+import type { FC } from "react"
+import type { HorizontalSeparatorProps } from "./HorizontalSeparator.types"
+
+export const HorizontalSeparator: FC<HorizontalSeparatorProps> = ({ lineStyle, className, width }) => {
+	const hrClassNames: string = getClasses(styles.horizontalSeparator, className, {
+		[styles.horizontalSeparatorSolid]: lineStyle === "solid",
+		[styles.horizontalSeparatorDashed]: lineStyle === "dashed",
+		[styles.horizontalSeparatorDotted]: lineStyle === "dotted",
+		[styles.horizontalSeparatorDouble]: lineStyle === "double",
+	})
+
+	const horizontalStyle: object = {
+		width: width ? `${width ?? 0}px` : undefined,
+	}
+
+	return <HRMarkup className={hrClassNames} style={horizontalStyle} />
+}
+
+HorizontalSeparator.displayName = "HorizontalSeparator"

package/components/Separator/components/HorizontalSeparator/HorizontalSeparator.types.ts

@@ -0,0 +1,3 @@
+import type { SeparatorProps } from "../../../Separator/Separator.types"
+
+export type HorizontalSeparatorProps = Pick<SeparatorProps, "className" | "lineStyle" | "width">

package/components/Separator/components/HorizontalSeparator/index.ts

@@ -0,0 +1 @@
+export { HorizontalSeparator } from "./HorizontalSeparator"

package/components/Separator/components/VerticalSeparator/VerticalSeparator.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { VerticalSeparatorProps } from "./VerticalSeparator.types"
+
+export const meta: HeliosAttributeMeta<VerticalSeparatorProps> = {
+	_category: "core",
+	_extends: [],
+	_patterns: [],
+	_status: "internal",
+	className: {
+		type: "string",
+		isOptional: true,
+	},
+	lineStyle: {
+		type: "solid | dashed | dotted | double",
+		isOptional: true,
+		default: "solid",
+	},
+	height: {
+		type: "number",
+		isOptional: true,
+	},
+}

package/components/Separator/components/VerticalSeparator/VerticalSeparator.module.css

@@ -0,0 +1,20 @@
+.verticalSeparator {
+	border: 0;
+	border-left-width: 1px;
+}
+
+.verticalSeparatorDotted {
+	border-left-style: dotted;
+}
+
+.verticalSeparatorDashed {
+	border-left-style: dashed;
+}
+
+.verticalSeparatorDouble {
+	border-left-style: double;
+}
+
+.verticalSeparatorSolid {
+	border-left-style: solid;
+}

package/components/Separator/components/VerticalSeparator/VerticalSeparator.tsx

@@ -0,0 +1,22 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { HRMarkup } from "../HRMarkup"
+import styles from "./VerticalSeparator.module.css"
+import type { FC } from "react"
+import type { VerticalSeparatorProps } from "./VerticalSeparator.types"
+
+export const VerticalSeparator: FC<VerticalSeparatorProps> = ({ height, className, lineStyle }) => {
+	const hrClassNames: string = getClasses(styles.verticalSeparator, className, {
+		[styles.verticalSeparatorDashed]: lineStyle === "dashed",
+		[styles.verticalSeparatorDotted]: lineStyle === "dotted",
+		[styles.verticalSeparatorDouble]: lineStyle === "double",
+		[styles.verticalSeparatorSolid]: lineStyle === "solid",
+	})
+
+	const verticalStyle: object = {
+		height: height ? `${height ?? 0}px` : "auto",
+	}
+
+	return <HRMarkup style={verticalStyle} className={hrClassNames} aria-orientation="vertical" />
+}
+
+VerticalSeparator.displayName = "VerticalSeparator"

package/components/Separator/components/VerticalSeparator/VerticalSeparator.types.ts

@@ -0,0 +1,3 @@
+import type { SeparatorProps } from "../../../Separator/Separator.types"
+
+export type VerticalSeparatorProps = Pick<SeparatorProps, "className" | "lineStyle" | "height">

package/components/Separator/components/VerticalSeparator/index.ts

@@ -0,0 +1 @@
+export { VerticalSeparator } from "./VerticalSeparator"

package/components/Separator/index.ts

@@ -0,0 +1 @@
+export { Separator } from "./Separator"

package/components/Setup/Setup.global.css

@@ -0,0 +1,14 @@
+@layer helios;
+
+@import "@heliosgraphics/css/layered";
+@import "@heliosgraphics/css/easings/layered";
+
+@import "./css/core.colors.css";
+@import "./css/core.colors-helpers.css";
+@import "./css/core.scale.css";
+@import "./css/core.setup.css";
+@import "./css/core.typography.css";
+
+@import "./css/feat.atomics.css";
+@import "./css/feat.markdown.css";
+@import "./css/feat.responsive.css";

package/components/Setup/Setup.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { SetupProps } from "./Setup.types"
+
+export const meta: HeliosAttributeMeta<SetupProps> = {
+	_patterns: [
+		{
+			id: "ui-setup-default",
+			description: "default",
+			content: `<Setup/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "meta",
+	fixedTheme: {
+		type: "HeliosFixedThemeType",
+		isOptional: true,
+	},
+	theme: {
+		type: "HeliosThemeType",
+		isOptional: true,
+	},
+}

package/components/Setup/Setup.tsx

@@ -0,0 +1,53 @@
+import "./Setup.global.css"
+
+import type { FC } from "react"
+import type { SetupLinkProps, SetupProps } from "./Setup.types"
+import { code } from "./Setup.utils"
+
+export const Setup: FC<SetupProps> = ({ theme = "system", fixedTheme }) => {
+	const preconnectLinks: Array<SetupLinkProps> = [
+		{ id: "rsms", rel: "preconnect", href: "https://rsms.me/", crossOrigin: "anonymous" },
+		{
+			id: "googleapis",
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com",
+			crossOrigin: "anonymous",
+		},
+		{
+			id: "gstatic",
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossOrigin: "anonymous",
+		},
+	]
+
+	const stylesheetLinks: Array<SetupLinkProps> = [
+		{ id: "rsms", rel: "stylesheet", href: "https://rsms.me/inter/inter.css" },
+		{
+			id: "googleapis",
+			rel: "stylesheet",
+			href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap",
+		},
+	]
+
+	const fixedThemeArg: string = fixedTheme ? `"${fixedTheme}"` : "undefined"
+
+	return (
+		<>
+			{preconnectLinks.map((linkProps) => (
+				<link key={`preconnect-${linkProps.id}`} {...linkProps} />
+			))}
+			{stylesheetLinks.map((linkProps) => (
+				<link key={`stylesheet-${linkProps.id}`} {...linkProps} />
+			))}
+			<script
+				data-ui-component="Setup"
+				dangerouslySetInnerHTML={{
+					__html: `(${code.toString()})("${theme}", ${fixedThemeArg});`,
+				}}
+			/>
+		</>
+	)
+}
+
+Setup.displayName = "Setup"

package/components/Setup/Setup.types.ts

@@ -0,0 +1,13 @@
+import type { HeliosFixedThemeType, HeliosThemeType } from "../../types/themes"
+
+export interface SetupProps {
+	theme?: HeliosThemeType
+	fixedTheme?: HeliosFixedThemeType
+}
+
+export interface SetupLinkProps {
+	id: string
+	rel: string
+	href: string
+	crossOrigin?: "anonymous" | "use-credentials"
+}

package/components/Setup/Setup.utils.ts

@@ -0,0 +1,61 @@
+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"))
+}