@heliosgraphics/ui 2.0.0-alpha.62

package/components/Select/Select.types.ts

@@ -0,0 +1,17 @@
+import type { ChangeEventHandler } from "react"
+
+export type SelectItem = {
+	name: string
+	value: string
+	isDisabled?: boolean
+}
+
+export interface SelectProps {
+	isDisabled?: boolean
+	isLabelHidden?: boolean
+	isSmall?: boolean
+	items: Array<SelectItem>
+	label: string
+	onChange: ChangeEventHandler<HTMLSelectElement>
+	selectedValue?: string
+}

package/components/Select/index.ts

@@ -0,0 +1,2 @@
+export { Select } from "./Select"
+export type { SelectItem } from "./Select.types"

package/components/Separator/Separator.meta.ts

@@ -0,0 +1,69 @@
+import type { HeliosAttributeMeta } from "../.."
+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: "stable",
+	_category: "core",
+}

package/components/Separator/Separator.module.css

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

package/components/Separator/Separator.spec.tsx

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

package/components/Separator/Separator.tsx

@@ -0,0 +1,34 @@
+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} />
+}

package/components/Separator/Separator.types.ts

@@ -0,0 +1,10 @@
+import type { HeliosEmphasisType } from "../.."
+
+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 "../../../.."
+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,8 @@
+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" />
+}

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 "../../../.."
+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,20 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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} />
+}

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 "../../../.."
+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,20 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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} />
+}

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.meta.ts

@@ -0,0 +1,14 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { SetupProps } from "./Setup.types"
+
+export const meta: HeliosAttributeMeta<SetupProps> = {
+	_patterns: [
+		{
+			id: "ui-setup-default",
+			description: "default",
+			content: `<Setup/>`,
+		},
+	],
+	_status: "stable",
+	_category: "meta",
+}

package/components/Setup/Setup.tsx

@@ -0,0 +1,56 @@
+import type { FC } from "react"
+import type { HeliosThemeType } from "../../types/themes"
+import type { SetupLinkProps, SetupProps } from "./Setup.types"
+import { code } from "./Setup.utils"
+
+declare global {
+	interface Window {
+		__theme: HeliosThemeType
+		__onThemeChange: ((theme: HeliosThemeType) => void) | undefined
+		__setPreferredTheme: (theme: HeliosThemeType) => void
+	}
+
+	var __theme: HeliosThemeType
+	var __onThemeChange: ((theme: HeliosThemeType) => void) | undefined
+	var __setPreferredTheme: (theme: HeliosThemeType) => void
+}
+
+export const Setup: FC<SetupProps> = () => {
+	const preconnectLinks: Array<SetupLinkProps> = [
+		{ rel: "preconnect", href: "https://rsms.me/", crossOrigin: "anonymous" },
+		{
+			rel: "preconnect",
+			href: "https://fonts.googleapis.com",
+			crossOrigin: "anonymous",
+		},
+		{
+			rel: "preconnect",
+			href: "https://fonts.gstatic.com",
+			crossOrigin: "anonymous",
+		},
+	]
+
+	const stylesheetLinks: Array<SetupLinkProps> = [
+		{ rel: "stylesheet", href: "https://rsms.me/inter/inter.css" },
+		{
+			rel: "stylesheet",
+			href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap",
+		},
+	]
+
+	return (
+		<>
+			{preconnectLinks.map((linkProps, index) => (
+				<link key={`preconnect-${index}`} {...linkProps} />
+			))}
+			{stylesheetLinks.map((linkProps, index) => (
+				<link key={`stylesheet-${index}`} {...linkProps} />
+			))}
+			<script
+				dangerouslySetInnerHTML={{
+					__html: `(${code.toString()})();`,
+				}}
+			/>
+		</>
+	)
+}

package/components/Setup/Setup.types.ts

@@ -0,0 +1,7 @@
+export interface SetupProps {}
+
+export interface SetupLinkProps {
+	rel: string
+	href: string
+	crossOrigin?: "anonymous" | "use-credentials"
+}

package/components/Setup/Setup.utils.ts

@@ -0,0 +1,48 @@
+import type { HeliosThemeType } from "../../types/themes"
+
+export const code = (): void => {
+	globalThis.__onThemeChange = function (_theme: HeliosThemeType): void {}
+
+	const setTheme = (newTheme: HeliosThemeType): void => {
+		globalThis.__theme = newTheme
+		preferredTheme = newTheme
+		document.documentElement.dataset["theme"] = newTheme
+		globalThis.__onThemeChange?.(newTheme)
+	}
+
+	let preferredTheme: HeliosThemeType | undefined
+	const darkQuery: MediaQueryList = globalThis.matchMedia("(prefers-color-scheme: dark)")
+
+	try {
+		const storedTheme = 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: HeliosThemeType): 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")
+	}
+
+	const handleDocumentClick = (event: MouseEvent): void => {
+		if (event.x > 256 && globalThis.location.hash === "#ui-menu") {
+			globalThis.location.hash = "#ui"
+		}
+	}
+
+	darkQuery.addEventListener("change", handleDarkModeChange)
+	document.addEventListener("click", handleDocumentClick)
+
+	setTheme(preferredTheme ?? (darkQuery.matches ? "dark" : "light"))
+}

package/components/Setup/index.ts

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

package/components/Shimmer/Shimmer.meta.ts

@@ -0,0 +1,32 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { ShimmerProps } from "./Shimmer.types"
+
+export const meta: HeliosAttributeMeta<ShimmerProps> = {
+	_patterns: [
+		{
+			id: "ui-shimmer-default",
+			description: "default",
+			content: `<Shimmer height={16} width={256}/>`,
+		},
+	],
+	_status: "stable",
+	_category: "content",
+	height: {
+		type: "number",
+	},
+	isRounded: {
+		type: "boolean",
+		isOptional: true,
+	},
+	paddingTop: {
+		type: "number",
+		isOptional: true,
+	},
+	paddingBottom: {
+		type: "number",
+		isOptional: true,
+	},
+	width: {
+		type: "number",
+	},
+}

package/components/Shimmer/Shimmer.module.css

@@ -0,0 +1,24 @@
+.shimmer div {
+	height: 100%;
+	width: 100%;
+	animation: shimmer 760ms linear infinite forwards;
+
+	background-color: var(--ui-bg-disabled);
+	background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
+	background-position: -256px 0;
+	background-repeat: no-repeat;
+	background-size: 256px 100%;
+}
+
+:root[data-theme="dark"] .shimmer div {
+	background-image: linear-gradient(to left, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.25), rgba(128, 128, 128, 0));
+}
+
+@keyframes shimmer {
+	0% {
+		background-position: -256px 0;
+	}
+	100% {
+		background-position: calc(100% + 256px) 0;
+	}
+}

package/components/Shimmer/Shimmer.tsx

@@ -0,0 +1,25 @@
+import { ShimmerProps } from "./Shimmer.types"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import styles from "./Shimmer.module.css"
+import type { FC } from "react"
+
+export const Shimmer: FC<ShimmerProps> = ({ isRounded, paddingTop, paddingBottom, height, width }) => {
+	const shimmerDivClasses: string = getClasses({
+		["radius-max"]: isRounded,
+		["radius-small"]: !isRounded,
+	})
+
+	return (
+		<div
+			className={styles.shimmer}
+			style={{
+				height: height + "px",
+				paddingTop: (paddingTop ?? 0) + "px",
+				paddingBottom: (paddingBottom ?? 0) + "px",
+				width: width + "px",
+			}}
+		>
+			<div className={shimmerDivClasses} />
+		</div>
+	)
+}

package/components/Shimmer/Shimmer.types.ts

@@ -0,0 +1,7 @@
+export interface ShimmerProps {
+	height: number
+	isRounded?: boolean
+	paddingTop?: number
+	paddingBottom?: number
+	width: number
+}

package/components/Shimmer/index.ts

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

package/components/Slider/Slider.meta.ts

@@ -0,0 +1,18 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { SliderProps } from "./Slider.types"
+
+export const meta: HeliosAttributeMeta<SliderProps> = {
+	_patterns: [
+		{
+			id: "ui-slider-default",
+			description: "default",
+			content: `<Slider/>`,
+		},
+	],
+	_status: "experimental",
+	_category: "pattern",
+	items: {
+		type: "Array<ReactNode>",
+		isOptional: true,
+	},
+}

package/components/Slider/Slider.module.css

@@ -0,0 +1,49 @@
+.slider {
+	overflow-x: scroll;
+
+	scroll-snap-type: mandatory;
+	scroll-snap-points-x: repeat(48px);
+	scroll-snap-type: x mandatory;
+
+	background: var(--gray-25);
+	border-radius: 4px;
+}
+
+.slider li {
+	padding: 24px;
+
+	scroll-snap-align: start;
+}
+
+.slider::-webkit-scrollbar {
+	height: 4px;
+	width: 4px;
+}
+
+.slider::-webkit-scrollbar-thumb {
+	height: 4px;
+	width: 4px;
+
+	background-color: var(--gray-300);
+	border-radius: 4px;
+	transition: all var(--speed-md) var(--ease-in-out-sine);
+}
+
+.slider::-webkit-scrollbar-track {
+	background-color: var(--gray-25);
+	border-radius: 4px;
+}
+
+@media (max-width: 960px) {
+	.slider {
+		margin-left: -20px;
+		width: calc(100% + 40px);
+	}
+}
+
+@media (max-width: 640px) {
+	.slider {
+		margin-left: -12px;
+		width: calc(100% + 24px);
+	}
+}

package/components/Slider/Slider.tsx

@@ -0,0 +1,16 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import styles from "./Slider.module.css"
+import type { FC } from "react"
+import type { SliderProps } from "./Slider.types"
+
+export const Slider: FC<SliderProps> = ({ items }) => {
+	const sliderClasses: string = getClasses(styles.slider, "flex")
+
+	return (
+		<ul className={sliderClasses}>
+			{items?.map((item, key) => (
+				<li key={key}>{item}</li>
+			))}
+		</ul>
+	)
+}

package/components/Slider/Slider.types.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react"
+
+export interface SliderProps {
+	items?: Array<ReactNode>
+}