@heliosgraphics/ui 2.0.0-alpha.100

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(--ui-bg-soft-gray);
+	border-radius: var(--radius-sm);
+}
+
+.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(--ui-border-gray);
+	border-radius: var(--radius-sm);
+	transition: all var(--speed-md) var(--ease-in-out-sine);
+}
+
+.slider::-webkit-scrollbar-track {
+	background-color: var(--ui-bg-soft-gray);
+	border-radius: var(--radius-sm);
+}
+
+@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,18 @@
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./Slider.module.css"
+import type { FC } from "react"
+import type { SliderProps } from "./Slider.types"
+
+export const Slider: FC<SliderProps> = ({ "aria-label": ariaLabel, items }) => {
+	const sliderClasses: string = getClasses(styles.slider, "flex")
+
+	return (
+		<ul className={sliderClasses} role="list" aria-label={ariaLabel} data-ui-component="Slider">
+			{items?.map((item, index) => (
+				<li key={`slider-${index}`}>{item}</li>
+			))}
+		</ul>
+	)
+}
+
+Slider.displayName = "Slider"

package/components/Slider/Slider.types.ts

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

package/components/Slider/index.ts

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

package/components/Spacer/Spacer.meta.ts

@@ -0,0 +1,17 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { SpacerProps } from "./Spacer.types"
+
+export const meta: HeliosAttributeMeta<SpacerProps> = {
+	_patterns: [
+		{
+			id: "ui-spacer-default",
+			description: "default",
+			content: `<Spacer gap={GAP}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "layout",
+	gap: {
+		type: "number",
+	},
+}

package/components/Spacer/Spacer.tsx

@@ -0,0 +1,8 @@
+import type { FC } from "react"
+import type { SpacerProps } from "./Spacer.types"
+
+export const Spacer: FC<SpacerProps> = ({ gap }) => {
+	return <div style={{ height: `${gap ?? 0}px` }} data-ui-component="Spacer" />
+}
+
+Spacer.displayName = "Spacer"

package/components/Spacer/Spacer.types.ts

@@ -0,0 +1,3 @@
+export interface SpacerProps {
+	gap: number
+}

package/components/Spacer/index.ts

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

package/components/Table/Table.meta.ts

@@ -0,0 +1,36 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { TableBaseProps } from "./Table.types"
+
+export const meta: HeliosAttributeMeta<TableBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-table-default",
+			description: "default",
+			content: `<Table>
+  <tr>
+		<th>Color Mode</th>
+		<th>Description</th>
+	</tr>
+	<tr>
+	<td>Display P3</td>
+		<td>Wider color space than sRGB, more vibrant colors.</td>
+	</tr>
+	<tr>
+		<td>HSL</td>
+		<td>Defines colors by hue, saturation, and lightness.</td>
+	</tr>
+</Table>`,
+		},
+	],
+	_status: "nominal",
+	_category: "content",
+	hasBorder: {
+		type: "boolean",
+		isOptional: true,
+	},
+	isMonoHeader: {
+		type: "boolean",
+		isOptional: true,
+	},
+}

package/components/Table/Table.module.css

@@ -0,0 +1,53 @@
+.table {
+	overflow: auto;
+}
+
+.tableElement {
+	min-width: 420px;
+	width: 100%;
+
+	border: 0;
+	border-collapse: collapse;
+}
+
+.tableElement tr td,
+.tableElement tr th {
+	padding: 8px 12px;
+
+	text-align: left;
+}
+
+.tableElementBorder {
+	border: 1px solid var(--ui-border-primary);
+}
+
+.tableElement:not(.tableElementBorder) tr td:first-child,
+.tableElement:not(.tableElementBorder) tr th:first-child {
+	padding-left: 24px;
+}
+
+/* Header */
+.tableElement thead tr td,
+.tableElement th {
+	font-weight: var(--font-weight-semi-bold);
+
+	background-color: var(--ui-bg-tertiary);
+	color: var(--ui-text-secondary);
+}
+
+.tableElementMonoHeader thead tr td,
+.tableElementMonoHeader th {
+	font-family: var(--font-family-mono);
+	font-weight: var(--font-weight-normal);
+}
+
+/* Cells */
+.tableElement tr td {
+	border-top: 1px solid var(--ui-border-secondary);
+}
+
+/* Both */
+.tableElement td:not(:last-child),
+.tableElement th:not(:last-child) {
+	border-right: 1px solid var(--ui-border-secondary);
+}

package/components/Table/Table.tsx

@@ -0,0 +1,21 @@
+import styles from "./Table.module.css"
+import { getClasses } from "@heliosgraphics/utils"
+import type { FC } from "react"
+import type { TableProps } from "./Table.types"
+
+export const Table: FC<TableProps> = ({ children, hasBorder, isMonoHeader }) => {
+	const tableClasses: string = getClasses(styles.table, "small")
+
+	const tableElementClasses: string = getClasses(styles.tableElement, {
+		[styles.tableElementBorder]: hasBorder,
+		[styles.tableElementMonoHeader]: isMonoHeader,
+	})
+
+	return (
+		<div className={tableClasses} data-ui-component="Table">
+			<table className={tableElementClasses}>{children}</table>
+		</div>
+	)
+}
+
+Table.displayName = "Table"

package/components/Table/Table.types.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from "react"
+
+export interface TableBaseProps {
+	hasBorder?: boolean
+	isMonoHeader?: boolean
+}
+
+export type TableProps = PropsWithChildren<TableBaseProps>

package/components/Table/index.ts

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

package/components/Tabs/Tabs.meta.ts

@@ -0,0 +1,24 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { TabsProps } from "./Tabs.types"
+
+export const meta: HeliosAttributeMeta<TabsProps> = {
+	_extends: [],
+	_patterns: [
+		{
+			id: "ui-tabs-default",
+			description: "default",
+			content:
+				'<Tabs items={[{ name: "Tab 1", isActive: true, onClick: () => {} }, { name: "Tab 2", onClick: () => {} }]}>{CHILDREN}</Tabs>',
+		},
+		{
+			id: "ui-tabs-with-href",
+			description: "with links",
+			content:
+				'<Tabs items={[{ name: "Overview", href: "/overview", isActive: true }, { name: "Settings", href: "/settings" }]} />',
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+	children: { type: "ReactNode", isOptional: true },
+	items: { type: "Array<TabItem>", description: "Tab items with name, onClick, href, isActive, and isDisabled" },
+}

package/components/Tabs/Tabs.module.css

@@ -0,0 +1,43 @@
+.tabs__list {
+	position: relative;
+	display: flex;
+	gap: 2px;
+
+	height: 40px;
+	padding: 0 8px 0 0;
+
+	box-shadow: inset 0 -1px 0 0 var(--ui-border-secondary);
+	line-height: 40px;
+}
+
+.tabs__item {
+	display: flex;
+	align-items: center;
+	padding: 0 12px;
+
+	border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+	color: var(--ui-text-secondary);
+	text-decoration: none;
+
+	cursor: pointer;
+	user-select: none;
+}
+
+.tabs__item:hover {
+	color: var(--ui-text-primary);
+}
+
+.tabs__itemActive {
+	color: var(--ui-text-primary);
+	box-shadow: inset 0 -2px 0 0 var(--ui-text-primary);
+}
+
+.tabs__itemDisabled {
+	opacity: 0.4;
+	cursor: not-allowed;
+	pointer-events: none;
+}
+
+.tabs__content {
+	padding: 24px 0;
+}

package/components/Tabs/Tabs.tsx

@@ -0,0 +1,63 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { Text } from "../Text"
+import styles from "./Tabs.module.css"
+import type { FC, KeyboardEvent } 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}>
+				{items.map((item: TabItem, index: number) => {
+					const itemClasses: string = getClasses(styles.tabs__item, {
+						[styles.tabs__itemActive]: !!item.isActive,
+						[styles.tabs__itemDisabled]: !!item.isDisabled,
+					})
+
+					const commonProps = {
+						key: index,
+						role: "tab" as const,
+						tabIndex: item.isDisabled ? -1 : 0,
+						"aria-selected": !!item.isActive,
+						"aria-disabled": !!item.isDisabled,
+						className: itemClasses,
+					}
+
+					if (item.href) {
+						return (
+							<a {...commonProps} href={item.href}>
+								<Text type="small" fontWeight="medium">
+									{item.name}
+								</Text>
+							</a>
+						)
+					}
+
+					return (
+						<div
+							{...commonProps}
+							onClick={item.isDisabled ? undefined : item.onClick}
+							onKeyDown={(e) => onKeyDown(e, item)}
+						>
+							<Text type="small" fontWeight="medium">
+								{item.name}
+							</Text>
+						</div>
+					)
+				})}
+			</div>
+			{children && <section className={styles.tabs__content}>{children}</section>}
+		</div>
+	)
+}
+
+Tabs.displayName = "Tabs"

package/components/Tabs/Tabs.types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+
+export interface TabItem {
+	href?: string
+	isActive?: boolean
+	isDisabled?: boolean
+	name: string
+	onClick?: () => void
+}
+
+export interface TabsProps {
+	children?: ReactNode
+	items: Array<TabItem>
+}

package/components/Tabs/index.ts

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

package/components/Text/Text.meta.ts

@@ -0,0 +1,38 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { TextBaseProps } from "./Text.types"
+
+export const SHARED_TEXT_META: Partial<HeliosAttributeMeta<TextBaseProps>> = {
+	emphasis: { type: "HeliosEmphasisType", isOptional: true },
+	fontFamily: { type: '"sans" | "serif" | "mono"', isOptional: true },
+	fontStyle: { type: '"italic" | "normal" | "oblique"', isOptional: true },
+	fontWeight: {
+		type: '"thin" | "extra-light" | "light" | "normal" | "medium" | "semibold" | "bold" | "extra-bold" | "black"',
+		isOptional: true,
+	},
+	isBalanced: { type: "boolean", isOptional: true },
+	isEllipsis: { type: "boolean", isOptional: true },
+	isNonSelectable: { type: "boolean", isOptional: true },
+	lineClamp: { type: "1 | 2 | 3", isOptional: true },
+	textAlign: { type: '"left" | "right" | "center" | "justify"', isOptional: true },
+	textDecoration: {
+		type: '"delete" | "overline" | "underline" | "capitalize" | "lowercase" | "uppercase"',
+		isOptional: true,
+	},
+	type: { type: '"tiny" | "small" | "paragraph" | "div"' },
+	whiteSpace: { type: '"pre" | "pre-line" | "pre-wrap" | "nowrap"', isOptional: true },
+	wordWrap: { type: '"break-word"', isOptional: true },
+}
+
+export const meta: HeliosAttributeMeta<TextBaseProps> = {
+	...(SHARED_TEXT_META as HeliosAttributeMeta<TextBaseProps>),
+	_patterns: [
+		{
+			id: "ui-text-default",
+			description: "default",
+			content: `<Text type='paragraph' emphasis={EMPHASIS}>{TEXT}</Text>`,
+		},
+	],
+	_status: "nominal",
+	_category: "content",
+	_extends: ["HTMLAttributes<HTMLDivElement | HTMLParagraphElement>"],
+}

package/components/Text/Text.module.css

@@ -0,0 +1,41 @@
+.text {
+	color: currentcolor;
+
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+}
+
+.textPrimary {
+	color: var(--ui-text-primary);
+}
+
+.textSecondary {
+	color: var(--ui-text-secondary);
+}
+
+.textTertiary {
+	color: var(--ui-text-tertiary);
+}
+
+.textInherit {
+	color: currentColor;
+}
+
+.text a {
+	color: inherit;
+	cursor: pointer;
+
+	text-decoration: underline;
+}
+
+.text a[rel="author"] {
+	text-decoration-style: dashed;
+}
+
+.text u {
+	text-decoration: underline;
+}
+
+.textWithLinks a {
+	font-weight: var(--font-weight-medium);
+	text-decoration: underline;
+}

package/components/Text/Text.tsx

@@ -0,0 +1,59 @@
+import { Div } from "./components/Div"
+import { getClasses } from "@heliosgraphics/utils"
+import { getTypographyUtility } from "./Text.utils"
+import { P } from "./components/P"
+import { Small } from "./components/Small"
+import { Tiny } from "./components/Tiny"
+import type { FC } from "react"
+import styles from "./Text.module.css"
+import type { TextProps } from "./Text.types"
+import { Micro } from "./components/Micro"
+
+export const Text: FC<TextProps> = (props) => {
+	const textClasses: string = getClasses(props.className, styles.text, {
+		[styles.textPrimary]: props.emphasis === "primary",
+		[styles.textSecondary]: props.emphasis === "secondary",
+		[styles.textTertiary]: props.emphasis === "tertiary",
+		[styles.textInherit]: props.emphasis === "inherit",
+	})
+
+	const utility: string = getTypographyUtility({
+		...props,
+		className: textClasses,
+	})
+	const lineClampStyle: object | undefined = props.lineClamp
+		? {
+				display: "-webkit-box",
+				WebkitLineClamp: props.lineClamp,
+				WebkitBoxOrient: "vertical",
+				overflow: "hidden",
+			}
+		: undefined
+
+	const mergedStyle: object | undefined =
+		props.style || lineClampStyle ? { ...(props.style || {}), ...(lineClampStyle || {}) } : undefined
+
+	const baseTextProps: Omit<TextProps, "type"> = {
+		onClick: props.onClick,
+		children: props.children,
+		style: mergedStyle,
+		className: utility,
+	}
+
+	switch (props.type) {
+		case "div":
+			return <Div {...baseTextProps} />
+		case "paragraph":
+			return <P {...baseTextProps} />
+		case "small":
+			return <Small {...baseTextProps} />
+		case "tiny":
+			return <Tiny {...baseTextProps} />
+		case "micro":
+			return <Micro {...baseTextProps} />
+		default:
+			return <Div {...baseTextProps} />
+	}
+}
+
+Text.displayName = "Text"

package/components/Text/Text.types.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "react"
+import type { HeliosEmphasisType } from "../../types/intentions"
+
+export interface TextBaseProps {
+	emphasis?: HeliosEmphasisType
+	fontFamily?: "sans" | "serif" | "mono"
+	fontStyle?: "italic" | "normal" | "oblique"
+	fontWeight?: "thin" | "extra-light" | "light" | "normal" | "medium" | "semibold" | "bold" | "extra-bold" | "black"
+	isBalanced?: boolean
+	isEllipsis?: boolean
+	isNonSelectable?: boolean
+	lineClamp?: 1 | 2 | 3
+	textAlign?: "left" | "right" | "center" | "justify"
+	textDecoration?: "delete" | "overline" | "underline" | "capitalize" | "lowercase" | "uppercase"
+	type: "micro" | "tiny" | "small" | "paragraph" | "div"
+	whiteSpace?: "pre" | "pre-line" | "pre-wrap" | "nowrap"
+	wordWrap?: "break-word"
+}
+
+export type TextProps = TextBaseProps & Omit<HTMLAttributes<HTMLElement>, "color" | "results">

package/components/Text/Text.utils.spec.ts

@@ -0,0 +1,13 @@
+import { it, describe, expect } from "bun:test"
+import { _getFontWeight } from "./Text.utils"
+import type { TextProps } from "./Text.types"
+
+describe("typography", () => {
+	describe("_getFontWeight", () => {
+		it("generates thin", () => expect(_getFontWeight("thin")).toEqual("fw-thin"))
+		it("generates regular", () => expect(_getFontWeight("normal")).toEqual("fw-normal"))
+		it("generates black", () => expect(_getFontWeight("black")).toEqual("fw-black"))
+		it("nothing for undefined", () => expect(_getFontWeight(undefined)).toEqual(""))
+		it("nothing for empty", () => expect(_getFontWeight("" as unknown as TextProps["fontWeight"])).toEqual(""))
+	})
+})

package/components/Text/Text.utils.ts

@@ -0,0 +1,50 @@
+import type { TextProps } from "./Text.types"
+import type { HeadingProps } from "../Heading/Heading.types"
+
+export const _getFontWeight = (fw: TextProps["fontWeight"]): string => {
+	switch (fw) {
+		case "thin":
+			return "fw-thin"
+		case "extra-light":
+			return "fw-extra-light"
+		case "light":
+			return "fw-light"
+		case "normal":
+			return "fw-normal"
+		case "medium":
+			return "fw-medium"
+		case "semibold":
+			return "fw-semi-bold"
+		case "bold":
+			return "fw-bold"
+		case "extra-bold":
+			return "fw-extra-bold"
+		case "black":
+			return "fw-black"
+
+		default:
+			return ""
+	}
+}
+
+export const getTypographyUtility = (props: TextProps | HeadingProps): string => {
+	const typoClasses: Array<string> = []
+
+	const fontFamily = props.fontFamily ? props.fontFamily : "sans"
+	const fontWeight = _getFontWeight(props.fontWeight)
+
+	typoClasses.push(fontFamily)
+	typoClasses.push(fontWeight)
+
+	if (props.className) typoClasses.push(props.className)
+	if (props.fontStyle) typoClasses.push(props.fontStyle)
+	if (props.isBalanced) typoClasses.push("text-balanced")
+	if (props.isEllipsis) typoClasses.push("ellipsis")
+	if (props.isNonSelectable) typoClasses.push("non-selectable")
+	if (props.textAlign) typoClasses.push(props.textAlign)
+	if (props.textDecoration) typoClasses.push(props.textDecoration)
+	if (props.whiteSpace) typoClasses.push(props.whiteSpace)
+	if (props.wordWrap) typoClasses.push(props.wordWrap)
+
+	return typoClasses.join(" ")
+}

package/components/Text/components/Div/Div.meta.ts

@@ -0,0 +1,11 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { DivProps } from "./Div.types"
+import { SHARED_TEXT_META } from "../../Text.meta"
+
+export const meta: HeliosAttributeMeta<DivProps> = {
+	...(SHARED_TEXT_META as unknown as HeliosAttributeMeta<DivProps>),
+	_category: "core",
+	_extends: ['Omit<TextProps, "type">'],
+	_patterns: [],
+	_status: "internal",
+}

package/components/Text/components/Div/Div.tsx

@@ -0,0 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
+import type { DivProps } from "./Div.types"
+import type { FC } from "react"
+
+export const Div: FC<DivProps> = (props) => {
+	return <div {...props} className={getClasses("p", props.className)} data-ui-component="Text.Div" />
+}
+
+Div.displayName = "Div"

package/components/Text/components/Div/Div.types.ts

@@ -0,0 +1,3 @@
+import type { TextProps } from "../../Text.types"
+
+export interface DivProps extends Omit<TextProps, "type"> {}

package/components/Text/components/Div/index.ts

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

package/components/Text/components/Micro/Micro.meta.ts

@@ -0,0 +1,11 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { MicroProps } from "./Micro.types"
+import { SHARED_TEXT_META } from "../../Text.meta"
+
+export const meta: HeliosAttributeMeta<MicroProps> = {
+	...(SHARED_TEXT_META as unknown as HeliosAttributeMeta<MicroProps>),
+	_category: "core",
+	_extends: ['Omit<TextProps, "type">'],
+	_patterns: [],
+	_status: "internal",
+}

package/components/Text/components/Micro/Micro.tsx

@@ -0,0 +1,9 @@
+import { getClasses } from "@heliosgraphics/utils"
+import type { FC } from "react"
+import type { MicroProps } from "./Micro.types"
+
+export const Micro: FC<MicroProps> = (props) => {
+	return <small {...props} className={getClasses("micro", props.className)} data-ui-component="Text.Micro" />
+}
+
+Micro.displayName = "Micro"