@heliosgraphics/ui 2.0.0-alpha.62

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 "../.."
+import type { SpacerProps } from "./Spacer.types"
+
+export const meta: HeliosAttributeMeta<SpacerProps> = {
+	_patterns: [
+		{
+			id: "ui-spacer-default",
+			description: "default",
+			content: `<Spacer gap={GAP}/>`,
+		},
+	],
+	_status: "stable",
+	_category: "layout",
+	gap: {
+		type: "number",
+	},
+}

package/components/Spacer/Spacer.tsx

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

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 "../.."
+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: "stable",
+	_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-action);
+	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,19 @@
+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}>
+			<table className={tableElementClasses}>{children}</table>
+		</div>
+	)
+}

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 "../.."
+import type { TabsProps } from "./Tabs.types"
+
+export const meta: HeliosAttributeMeta<TabsProps> = {
+	_patterns: [
+		{
+			id: "ui-tabs-default",
+			description: "default",
+			content: `<Tabs items={TAB_ITEMS} sections={TAB_SECTIONS}/>`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+	active: {
+		type: "number",
+		isOptional: true,
+	},
+	items: {
+		type: "Array<string>",
+	},
+	sections: {
+		type: "Array<ReactNode>",
+	},
+}

package/components/Tabs/Tabs.module.css

@@ -0,0 +1,27 @@
+.tabs__ol {
+	position: relative;
+
+	height: 36px;
+	padding: 0 8px 0 0;
+
+	box-shadow: inset 0 -1px 0 0 var(--ui-border);
+
+	line-height: 36px;
+}
+
+.tabs__ol__item {
+	padding: 0 12px;
+
+	border-radius: 4px 4px 0 0;
+	border: 1px solid var(--ui-border);
+
+	cursor: pointer;
+}
+
+.tabs__ol__itemActive {
+	border-bottom-color: var(--ui-bg-secondary);
+}
+
+.tabs__section {
+	padding: 24px 0;
+}

package/components/Tabs/Tabs.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { useState, type FC } from "react"
+import { TabsProps } from "./Tabs.types"
+import styles from "./Tabs.module.css"
+import { Text } from "../.."
+
+export const Tabs: FC<TabsProps> = ({ active: activeNumber, items, sections }) => {
+	const [active, setActive] = useState(activeNumber || 0)
+
+	if (!items || !sections) return null
+
+	return (
+		<div>
+			<ol className={`${styles.tabs__ol} flex gap-2`}>
+				{items.map((tab, key) => (
+					<li
+						key={key}
+						onClick={() => setActive(key)}
+						className={`${styles.tabs__ol__item} ${active === key ? styles.tabs__ol__itemActive : ""}`}
+					>
+						<Text type="small" fontWeight="medium">
+							{tab}
+						</Text>
+					</li>
+				))}
+			</ol>
+			<section className="tabs__section">{sections[active]}</section>
+		</div>
+	)
+}

package/components/Tabs/Tabs.types.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react"
+
+export interface TabsProps {
+	active?: number
+	items: Array<string>
+	sections: Array<ReactNode>
+}

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 "../.."
+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: "stable",
+	_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,54 @@
+import { Div } from "./components/Div"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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 baseTextProps: Omit<TextProps, "type"> = {
+		onClick: props.onClick,
+		children: props.children,
+		style: lineClampStyle,
+		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} />
+	}
+}

package/components/Text/Text.types.ts

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "react"
+import type { HeliosEmphasisType } from "../.."
+
+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 "vitest"
+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 "../../../.."
+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,6 @@
+import type { DivProps } from "./Div.types"
+import type { FC } from "react"
+
+export const Div: FC<DivProps> = (props) => {
+	return <div {...props} className={`p ${props.className}`} data-ui-component="Text.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 "../../../.."
+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,6 @@
+import type { FC } from "react"
+import type { MicroProps } from "./Micro.types"
+
+export const Micro: FC<MicroProps> = (props) => {
+	return <small {...props} className={`micro ${props.className}`} data-ui-component="Text.Micro" />
+}

package/components/Text/components/Micro/Micro.types.ts

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

package/components/Text/components/Micro/index.ts

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

package/components/Text/components/P/P.meta.ts

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

package/components/Text/components/P/P.tsx

@@ -0,0 +1,6 @@
+import type { FC } from "react"
+import type { PProps } from "./P.types"
+
+export const P: FC<PProps> = (props) => {
+	return <p {...props} className={`p ${props.className}`} data-ui-component="Text.P" />
+}

package/components/Text/components/P/P.types.ts

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

package/components/Text/components/P/index.ts

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

package/components/Text/components/Small/Small.meta.ts

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

package/components/Text/components/Small/Small.tsx

@@ -0,0 +1,6 @@
+import type { FC } from "react"
+import type { SmallProps } from "./Small.types"
+
+export const Small: FC<SmallProps> = (props) => {
+	return <small {...props} className={`small ${props.className}`} data-ui-component="Text.Small" />
+}

package/components/Text/components/Small/Small.types.ts

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

package/components/Text/components/Small/index.ts

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

package/components/Text/components/Tiny/Tiny.meta.ts

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

package/components/Text/components/Tiny/Tiny.tsx

@@ -0,0 +1,6 @@
+import type { FC } from "react"
+import type { TinyProps } from "./Tiny.types"
+
+export const Tiny: FC<TinyProps> = (props) => {
+	return <small {...props} className={`tiny ${props.className}`} data-ui-component="Text.Tiny" />
+}

package/components/Text/components/Tiny/Tiny.types.ts

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

package/components/Text/components/Tiny/index.ts

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

package/components/Text/index.ts

@@ -0,0 +1,2 @@
+export { Text } from "./Text"
+export type { TextBaseProps, TextProps } from "./Text.types"

package/components/Textarea/Textarea.meta.ts

@@ -0,0 +1,26 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { TextareaProps } from "./Textarea.types"
+
+export const meta: HeliosAttributeMeta<TextareaProps> = {
+	_patterns: [
+		{
+			id: "ui-textarea-default",
+			description: "default",
+			content: `<Textarea onChange={ON_TEXTAREA_CHANGE} value={TEXTAREA} placeholder={TEXTAREA_PLACEHOLDER} isDisabled={IS_DISABLED} label={TEXTAREA_LABEL} helperText={HELPER_TEXT}/>`,
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	autoComplete: { type: "boolean", isOptional: true },
+	autoFocus: { type: "boolean", isOptional: true },
+	helperText: { type: "string", isOptional: true },
+	isDisabled: { type: "boolean", isOptional: true },
+	isLabelHidden: { type: "boolean", isOptional: true },
+	label: { type: "string" },
+	maxLength: { type: "number", isOptional: true },
+	name: { type: "string", isOptional: true },
+	onChange: { type: "(_event?: ChangeEvent<HTMLTextAreaElement>) => unknown" },
+	placeholder: { type: "string", isOptional: true },
+	rows: { type: "number", isOptional: true },
+	value: { type: "string", isOptional: true },
+}