@heliosgraphics/ui 2.0.0-alpha.100

package/components/Loading/Loading.module.css

@@ -0,0 +1,65 @@
+.loading {
+	z-index: var(--z-index-1);
+
+	animation: showIconLoading var(--speed-sm) ease-in-out;
+}
+
+.loading128 circle {
+	animation: rotateIconLoading128 600ms linear forwards infinite;
+}
+
+.loading64 circle {
+	animation: rotateIconLoading64 600ms linear forwards infinite;
+}
+
+.loading32 circle {
+	animation: rotateIconLoading32 600ms linear forwards infinite;
+}
+
+.loadingPrimary {
+	color: var(--ui-text-primary);
+}
+
+.loadingSecondary {
+	color: var(--ui-text-secondary);
+}
+
+.loadingTertiary {
+	color: var(--ui-text-tertiary);
+}
+
+@keyframes showIconLoading {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes rotateIconLoading32 {
+	from {
+		stroke-dashoffset: 0;
+	}
+	to {
+		stroke-dashoffset: 32;
+	}
+}
+
+@keyframes rotateIconLoading64 {
+	from {
+		stroke-dashoffset: 0;
+	}
+	to {
+		stroke-dashoffset: 64;
+	}
+}
+
+@keyframes rotateIconLoading128 {
+	from {
+		stroke-dashoffset: 0;
+	}
+	to {
+		stroke-dashoffset: 128;
+	}
+}

package/components/Loading/Loading.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { getClasses } from "@heliosgraphics/utils"
+import { useId, type FC } from "react"
+import styles from "./Loading.module.css"
+import type { LoadingProps } from "./Loading.types"
+
+export const Loading: FC<LoadingProps> = ({ className, size, emphasis }) => {
+	const titleId: string = useId()
+	const rSize = size / 2
+	const cSize = rSize + 2
+	const dashSize = size + cSize
+
+	const loadingClasses: string = getClasses(className, styles.loading, {
+		[styles.loading32]: size === 10,
+		[styles.loading64]: size === 20,
+		[styles.loading128]: size === 40,
+		[styles.loadingPrimary]: emphasis === "primary",
+		[styles.loadingSecondary]: emphasis === "secondary",
+		[styles.loadingTertiary]: emphasis === "tertiary",
+	})
+
+	return (
+		<svg
+			className={loadingClasses}
+			xmlns="http://www.w3.org/2000/svg"
+			height={size + 4}
+			width={size + 4}
+			role="status"
+			aria-labelledby={titleId}
+			data-ui-component="Loading"
+		>
+			<title id={titleId}>Loading</title>
+			<circle
+				fill="none"
+				strokeWidth={4}
+				stroke="currentcolor"
+				cx={cSize}
+				cy={cSize}
+				r={rSize}
+				style={{ opacity: 0.25 }}
+			/>
+			<circle
+				fill="none"
+				strokeWidth={4}
+				stroke="currentcolor"
+				strokeDasharray={dashSize}
+				strokeLinecap="round"
+				cx={cSize}
+				cy={cSize}
+				r={rSize}
+			/>
+		</svg>
+	)
+}
+
+Loading.displayName = "Loading"

package/components/Loading/Loading.types.ts

@@ -0,0 +1,7 @@
+import type { HeliosEmphasisType } from "../../types/intentions"
+
+export interface LoadingProps {
+	className?: string
+	size: 10 | 20 | 40
+	emphasis?: HeliosEmphasisType
+}

package/components/Loading/index.ts

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

package/components/Markdown/Markdown.meta.ts

@@ -0,0 +1,28 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { MarkdownProps } from "./Markdown.types"
+
+export const meta: HeliosAttributeMeta<MarkdownProps> = {
+	_patterns: [
+		{
+			id: "ui-markdown-default",
+			description: "default",
+			content: `<Markdown text={MARKDOWN}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "content",
+	children: {
+		type: "ReactNode",
+		isOptional: true,
+		description: "Children to render inside the markdown wrapper",
+	},
+	isNonSelectable: {
+		type: "boolean",
+		isOptional: true,
+	},
+	text: {
+		type: "string",
+		isOptional: true,
+		description: "Markdown string to render as HTML",
+	},
+}

package/components/Markdown/Markdown.module.css

@@ -0,0 +1,274 @@
+.markdown {
+	overflow-wrap: break-word;
+
+	font-family: var(--font-family-sans);
+	font-size: var(--font-size-p);
+	line-height: var(--line-height-p);
+}
+
+.markdownNonSelectable {
+	user-select: none;
+}
+
+.markdown del,
+.markdown s {
+	color: var(--ui-text-tertiary);
+}
+
+.markdown h1:not(:first-child),
+.markdown h2:not(:first-child),
+.markdown h3:not(:first-child),
+.markdown h4:not(:first-child),
+.markdown h5:not(:first-child),
+.markdown h6:not(:first-child),
+.markdown p:not(:first-child),
+.markdown small:not(:first-child),
+.markdown img:not(:first-child),
+.markdown blockquote:not(:first-child),
+.markdown table:not(:first-child),
+.markdown hr:not(:first-child),
+.markdown ul:not(:first-child),
+.markdown ol:not(:first-child) {
+	margin-top: 20px;
+}
+
+.markdown h1:not(:last-child),
+.markdown h2:not(:last-child),
+.markdown h3:not(:last-child),
+.markdown h4:not(:last-child),
+.markdown h5:not(:last-child),
+.markdown h6:not(:last-child),
+.markdown p:not(:last-child),
+.markdown small:not(:last-child),
+.markdown img:not(:last-child),
+.markdown blockquote:not(:last-child),
+.markdown table:not(:last-child),
+.markdown hr:not(:last-child),
+.markdown ul:not(:last-child),
+.markdown ol:not(:last-child) {
+	margin-bottom: 20px;
+}
+
+.markdown hr:has(+ hr):not(:last-child) {
+	margin-bottom: 32px;
+}
+
+.markdown hr:has(+ hr):not(:first-child) {
+	margin-top: 32px;
+}
+
+.markdown hr + hr {
+	display: none;
+}
+
+.markdown sub,
+.markdown sup {
+	font-size: var(--font-size-tiny);
+	line-height: normal;
+}
+
+/* Element: Blockquote */
+.markdown blockquote {
+	position: relative;
+
+	display: block;
+	padding: 16px 42px;
+
+	background-color: var(--ui-bg-secondary);
+	border-radius: var(--radius-md);
+	color: var(--ui-text-secondary);
+}
+
+.markdown blockquote:before,
+.markdown blockquote:after {
+	position: absolute;
+
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	width: 48px;
+
+	color: var(--ui-text-tertiary);
+
+	content: "“ ";
+	font-size: var(--font-size-h1);
+	line-height: 48px;
+}
+
+.markdown blockquote:before {
+	top: 8px;
+	left: 0;
+}
+
+.markdown blockquote:after {
+	bottom: -16px;
+	right: 0;
+}
+
+.markdown blockquote p {
+	font-size: inherit;
+	line-height: inherit;
+}
+
+/* Element: Link */
+.markdown a {
+	color: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-blue));
+
+	font-weight: var(--font-weight-medium);
+	text-decoration: underline;
+}
+
+/* Element: List */
+.markdown ul li {
+	list-style-type: disc;
+}
+
+.markdown ol li {
+	margin-left: 32px;
+	list-style-type: decimal;
+}
+
+.markdown li {
+	margin-left: 24px;
+}
+
+.markdown ul:not(:first-child) ul {
+	margin-top: 0;
+}
+
+.markdown ul:not(:first-child) ul li {
+	list-style-type: circle;
+}
+
+/* Element: Separator */
+.markdown hr {
+	border: 0;
+	border-top: 1px solid var(--ui-border-secondary);
+}
+
+/* Element: Table */
+.markdown table {
+	max-width: 100%;
+
+	border: 1px solid var(--ui-border-secondary);
+	border-collapse: collapse;
+
+	font-size: var(--font-size-small);
+	line-height: var(--line-height-small);
+	text-align: left;
+	word-break: initial;
+}
+
+.markdown table tr,
+.markdown table tr th,
+.markdown table tr td {
+	border: 1px solid var(--ui-border-secondary);
+}
+
+.markdown table tr th {
+	padding: 4px 8px;
+	font-weight: bold;
+}
+
+.markdown table tr td {
+	padding: 4px 8px;
+}
+
+.markdown img {
+	max-width: max-content;
+	width: 100%;
+
+	border-radius: var(--radius-md);
+}
+
+/* Element: Headings */
+.markdown h1 {
+	font-size: var(--font-size-h1);
+	line-height: var(--line-height-h1);
+}
+.markdown h2 {
+	font-size: var(--font-size-h2);
+	line-height: var(--line-height-h2);
+}
+.markdown h3 {
+	font-size: var(--font-size-h3);
+	line-height: var(--line-height-h3);
+}
+.markdown h4 {
+	font-size: var(--font-size-h4);
+	line-height: var(--line-height-h4);
+}
+.markdown h5 {
+	font-size: var(--font-size-h5);
+	line-height: var(--line-height-h5);
+}
+.markdown h6 {
+	font-size: var(--font-size-h6);
+	line-height: var(--line-height-h6);
+}
+
+.markdown h1,
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+	font-weight: var(--font-weight-semi-bold);
+	color: var(--ui-text-primary);
+}
+
+.markdown p {
+	font-size: var(--font-size-p);
+	line-height: var(--line-height-p);
+}
+
+/* Element: strong, bold: 700 */
+.markdown b,
+.markdown strong {
+	font-weight: var(--font-weight-bold);
+}
+
+/* Element: Delete */
+.markdown del {
+	text-decoration: line-through;
+}
+
+/* Element: Italic */
+.markdown i,
+.markdown em {
+	font-style: italic;
+}
+
+/* Modifier: Code */
+.markdown *:not(pre) code {
+	display: inline-block;
+	padding: 0 4px;
+
+	background-color: var(--ui-bg-secondary);
+	border-radius: var(--radius-sm);
+	color: var(--ui-text-secondary);
+}
+
+.markdown code {
+	font-family: var(--font-family-mono);
+	font-size: var(--font-size-small);
+	line-height: var(--line-height-small);
+	word-break: break-word;
+}
+
+.markdown pre {
+	position: relative;
+
+	padding: 16px 24px;
+	overflow: auto;
+
+	background-color: var(--ui-bg-tertiary);
+	border-radius: var(--radius-md);
+	color: var(--ui-text-secondary);
+
+	counter-reset: line;
+	tab-size: 4;
+	font-family: var(--font-family-mono);
+	font-size: var(--font-size-tiny);
+	line-height: var(--line-height-tiny);
+}

package/components/Markdown/Markdown.tsx

@@ -0,0 +1,27 @@
+import { renderMarkdown } from "./Markdown.utils"
+import { getClasses } from "@heliosgraphics/utils"
+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 }) => {
+	if (!text && !children) return null
+
+	const markdownClasses: string = getClasses(styles.markdown, {
+		[styles.markdownNonSelectable]: isNonSelectable,
+	})
+
+	if (text) {
+		const innerHTML = { __html: renderMarkdown(text) }
+
+		return <div className={markdownClasses} dangerouslySetInnerHTML={innerHTML} data-ui-component="Markdown"></div>
+	}
+
+	return (
+		<div className={markdownClasses} data-ui-component="Markdown">
+			{children}
+		</div>
+	)
+}
+
+Markdown.displayName = "Markdown"

package/components/Markdown/Markdown.types.ts

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

package/components/Markdown/Markdown.utils.spec.ts

@@ -0,0 +1,11 @@
+import { it, describe, expect } from "bun:test"
+import { renderMarkdown } from "./Markdown.utils"
+
+describe("markdown", () => {
+	describe("renderMarkdown", () => {
+		const SAMPLE = `Hello\n\nHey`
+		const SAMPLE_OUTPUT = `<p>Hello</p>\n<p>Hey</p>\n`
+
+		it("Returns", () => expect(renderMarkdown(SAMPLE)).toEqual(SAMPLE_OUTPUT))
+	})
+})

package/components/Markdown/Markdown.utils.ts

@@ -0,0 +1,10 @@
+import { Marked } from "marked"
+import { markedXhtml } from "marked-xhtml"
+import markedLinkifyIt from "marked-linkify-it"
+
+const marked = new Marked({ breaks: true, gfm: true })
+
+marked.use(markedXhtml())
+marked.use(markedLinkifyIt())
+
+export const renderMarkdown = (text: string): string => marked.parse(text) as string

package/components/Markdown/index.ts

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

package/components/Masonry/Masonry.meta.ts

@@ -0,0 +1,24 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { MasonryBaseProps } from "./Masonry.types"
+
+export const meta: HeliosAttributeMeta<MasonryBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-masonry-default",
+			description: "default",
+			content: `<Masonry columns={2}>{CHILDREN}</Masonry>`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+	breakpoints: {
+		type: "[number, number, number]",
+	},
+	columns: {
+		type: "[number, number, number]",
+	},
+	gap: {
+		type: "[HeliosScaleType, HeliosScaleType, HeliosScaleType]",
+	},
+}

package/components/Masonry/Masonry.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { type FC, useId, useInsertionEffect } from "react"
+import type { MasonryProps } from "./Masonry.types"
+
+export const Masonry: FC<MasonryProps> = ({
+	children,
+	columns = [1, 2, 3],
+	gap = [2, 4, 6],
+	breakpoints = [0, 640, 960],
+}) => {
+	const reactId = useId()
+	const id = `masonry${reactId.replace(/:/g, "")}`
+
+	useInsertionEffect(() => {
+		const style = document.createElement("style")
+
+		style.dataset["masonryId"] = id
+		style.textContent = `
+			.${id} { column-count: ${columns[0]}; column-gap: ${gap[0]}px; }
+			.${id} > * { break-inside: avoid; margin-bottom: ${gap[0]}px; }
+
+			@media (min-width: ${breakpoints[1]}px) {
+				.${id} { column-count: ${columns[1]}; column-gap: ${gap[1]}px; }
+				.${id} > * { margin-bottom: ${gap[1]}px; }
+			}
+
+			@media (min-width: ${breakpoints[2]}px) {
+				.${id} { column-count: ${columns[2]}; column-gap: ${gap[2]}px; }
+				.${id} > * { margin-bottom: ${gap[2]}px; }
+			}
+		`
+		document.head.appendChild(style)
+
+		return (): void => {
+			style.remove()
+		}
+	}, [id, columns, gap, breakpoints])
+
+	if (!children) return null
+
+	return (
+		<div className={id} data-ui-component="Masonry">
+			{children}
+		</div>
+	)
+}
+
+Masonry.displayName = "Masonry"

package/components/Masonry/Masonry.types.ts

@@ -0,0 +1,10 @@
+import type { PropsWithChildren } from "react"
+import type { HeliosScaleType } from "../../types/scale"
+
+export interface MasonryBaseProps {
+	columns?: [number, number, number]
+	gap?: [HeliosScaleType, HeliosScaleType, HeliosScaleType]
+	breakpoints?: [number, number, number]
+}
+
+export type MasonryProps = PropsWithChildren<MasonryBaseProps>

package/components/Masonry/index.ts

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

package/components/Menu/Menu.meta.ts

@@ -0,0 +1,15 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { MenuBaseProps } from "./Menu.types"
+
+export const meta: HeliosAttributeMeta<MenuBaseProps> = {
+	_extends: ["FlexProps", "PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-menu-default",
+			description: "default",
+			content: `<Menu>{CHILDREN}</Menu>`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+}

package/components/Menu/Menu.tsx

@@ -0,0 +1,18 @@
+import type { FC } from "react"
+import type { MenuProps } from "./Menu.types"
+import { getClasses } from "@heliosgraphics/utils"
+import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
+
+export const Menu: FC<MenuProps> = (props) => {
+	const menuFlexClasses: string = getFlexUtility({ ...props, isColumn: true, isFullWidth: true })
+	const asideContentClasses: string = getClasses(menuFlexClasses)
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<nav {...safeProps} className={asideContentClasses} data-ui-component="Menu">
+			{props.children}
+		</nav>
+	)
+}
+
+Menu.displayName = "Menu"

package/components/Menu/Menu.types.ts

@@ -0,0 +1,15 @@
+import type { FC, ReactElement } from "react"
+import type { MenuCategoryProps } from "./components/MenuCategory/MenuCategory.types"
+import type { MenuFilterProps } from "./components/MenuFilter/MenuFilter.types"
+import type { MenuItemProps } from "./components/MenuItem/MenuItem.types"
+import type { FlexProps } from "../Flex/Flex.types"
+
+export interface MenuBaseProps {}
+export type MenuProps = FlexProps & MenuBaseProps
+
+export interface MenuComposition {
+	(props: MenuProps): ReactElement
+	Category: FC<MenuCategoryProps>
+	Filter: FC<MenuFilterProps>
+	Item: FC<MenuItemProps>
+}

package/components/Menu/components/MenuCategory/MenuCategory.meta.ts

@@ -0,0 +1,32 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { MenuCategoryBaseProps } from "./MenuCategory.types"
+
+export const meta: HeliosAttributeMeta<MenuCategoryBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-menu-category-default",
+			description: "default",
+			content: `<Menu.Category>{CHILDREN}</Menu.Category>`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+	category: {
+		type: "string",
+		isOptional: true,
+	},
+	isFolder: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isInitiallyClosed: {
+		type: "boolean",
+		isOptional: true,
+		default: "false",
+	},
+	isOpen: {
+		type: "boolean",
+		isOptional: true,
+	},
+}