@heliosgraphics/ui 2.0.0-alpha.100

package/components/Flex/Flex.meta.ts

@@ -0,0 +1,47 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { FlexBaseProps } from "./Flex.types"
+
+export const meta: HeliosAttributeMeta<FlexBaseProps> = {
+	_extends: ["PropsWithChildren", 'Omit<HTMLAttributes<HTMLDivElement>, "color" | "results">'],
+	_patterns: [
+		{
+			id: "ui-flex-default",
+			description: "default",
+			content: `<Flex gap={GAP} isColumn={IS_COLUMN}>{CHILDREN}</Flex>`,
+		},
+		{
+			id: "ui-flex-responsive-padding",
+			description: "with responsive padding",
+			content: `<Flex padding={[0, 16, 24]}>{CHILDREN}</Flex>`,
+		},
+	],
+	_status: "nominal",
+	_category: "layout",
+	className: { type: "string", isOptional: true },
+	gap: { type: "HeliosScale", isOptional: true },
+	grow: { type: "1 | 2 | 3 | 4 | 5 | 6 | 7 | 8", isOptional: true },
+	elevation: { type: '"small" | "medium" | "large"', isOptional: true },
+	isAround: { type: "boolean", isOptional: true },
+	isBetween: { type: "boolean", isOptional: true },
+	isCentered: { type: "boolean", isOptional: true },
+	isColumn: { type: "boolean", isOptional: true },
+	isFullHeight: { type: "boolean", isOptional: true },
+	isFullWidth: { type: "boolean", isOptional: true },
+	isInline: { type: "boolean", isOptional: true },
+	isNoWrap: { type: "boolean", isOptional: true },
+	isStretch: { type: "boolean", isOptional: true },
+	isWrapped: { type: "boolean", isOptional: true },
+	isXCentered: { type: "boolean", isOptional: true },
+	isYCentered: { type: "boolean", isOptional: true },
+	onClick: { type: "HeliosOnClickType", isOptional: true },
+	padding: { type: "ResponsiveScaleType", isOptional: true },
+	paddingBlock: { type: "ResponsiveScaleType", isOptional: true },
+	paddingInline: { type: "ResponsiveScaleType", isOptional: true },
+	paddingX: { type: "HeliosScale", isOptional: true },
+	paddingY: { type: "HeliosScale", isOptional: true },
+	ref: { type: "RefObject<HTMLDivElement>", isOptional: true },
+	withBackground: { type: "HeliosEmphasisType", isOptional: true },
+	withRadius: { type: "ResponsiveRadiusType", isOptional: true },
+	xAlign: { type: '"start" | "end" | "center"', isOptional: true },
+	yAlign: { type: '"start" | "end" | "baseline"', isOptional: true },
+}

package/components/Flex/Flex.tsx

@@ -0,0 +1,40 @@
+import { getFlexUtility, getSafeFlexProps } from "../Flex/Flex.utils"
+import type { FlexProps } from "./Flex.types"
+import type { FC, KeyboardEvent } from "react"
+
+export const Flex: FC<FlexProps> = (props) => {
+	const { ref, ...restProps } = props
+	const flexClasses: string = getFlexUtility(restProps)
+	const safeProps = getSafeFlexProps(restProps)
+
+	const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {
+		if (restProps.onClick && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault()
+			restProps.onClick(event as unknown as React.MouseEvent<HTMLDivElement>)
+		}
+	}
+
+	const a11yProps = restProps.onClick
+		? {
+				role: (restProps.role ?? "button") as string,
+				tabIndex: restProps.tabIndex ?? 0,
+				onKeyDown: handleKeyDown,
+				"aria-label": restProps["aria-label"],
+			}
+		: {}
+
+	return (
+		<div
+			{...safeProps}
+			className={flexClasses}
+			onClick={restProps.onClick}
+			ref={ref}
+			data-ui-component="Flex"
+			{...a11yProps}
+		>
+			{restProps.children}
+		</div>
+	)
+}
+
+Flex.displayName = "Flex"

package/components/Flex/Flex.types.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes, MouseEventHandler, PropsWithChildren, Ref } from "react"
+import type { HeliosScaleType, HeliosRadiusType } from "../../types/scale"
+import type { HeliosEmphasisType } from "../../types/intentions"
+
+export type ResponsiveScaleType = HeliosScaleType | [HeliosScaleType, HeliosScaleType, HeliosScaleType]
+export type ResponsiveRadiusType = HeliosRadiusType | [HeliosRadiusType, HeliosRadiusType, HeliosRadiusType]
+
+export interface FlexBaseProps {
+	className?: string
+	elevation?: "small" | "medium" | "large"
+	gap?: ResponsiveScaleType
+	grow?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+	isAround?: boolean
+	isBetween?: boolean
+	isCentered?: boolean
+	isColumn?: boolean
+	isFullHeight?: boolean
+	isFullWidth?: boolean
+	isInline?: boolean
+	isNoWrap?: boolean
+	isStretch?: boolean
+	isWrapped?: boolean
+	isXCentered?: boolean
+	isYCentered?: boolean
+	onClick?: MouseEventHandler<HTMLDivElement>
+	padding?: ResponsiveScaleType
+	paddingBlock?: ResponsiveScaleType
+	paddingInline?: ResponsiveScaleType
+	paddingX?: HeliosScaleType
+	paddingY?: HeliosScaleType
+	ref?: Ref<HTMLDivElement>
+	withBackground?: HeliosEmphasisType
+	withRadius?: ResponsiveRadiusType
+	xAlign?: "start" | "end" | "center"
+	yAlign?: "start" | "end" | "baseline"
+}
+
+export type FlexProps = PropsWithChildren<FlexBaseProps> & Omit<HTMLAttributes<HTMLElement>, "color" | "results">

package/components/Flex/Flex.utils.spec.ts

@@ -0,0 +1,97 @@
+import { it, describe, expect } from "bun:test"
+import { getFlexUtility, getSafeFlexProps } from "./Flex.utils"
+import type { FlexProps } from "./Flex.types"
+
+describe("getFlexUtility", () => {
+	const MOCK_FLEX_COLUMN_CLASSES = `flex flex-center flex-column flex-wrap`
+	const MOCK_FLEX_COLUMN: FlexProps = {
+		children: null,
+		isColumn: true,
+		isWrapped: true,
+		isCentered: true,
+	}
+
+	it("Generates simple wrapping column classes", () =>
+		expect(getFlexUtility(MOCK_FLEX_COLUMN)).toEqual(MOCK_FLEX_COLUMN_CLASSES))
+
+	const MOCK_FLEX_INLINE_CLASSES = `inline-flex gap-16`
+	const MOCK_FLEX_INLINE: FlexProps = {
+		children: null,
+		isInline: true,
+		gap: 16,
+	}
+
+	it("Generates inline classes", () => expect(getFlexUtility(MOCK_FLEX_INLINE)).toEqual(MOCK_FLEX_INLINE_CLASSES))
+
+	const MOCK_FLEX_CLASSES = `flex`
+	const MOCK_FLEX: FlexProps = { children: null }
+
+	it("Generates empty flex without attrs", () => expect(getFlexUtility(MOCK_FLEX)).toEqual(MOCK_FLEX_CLASSES))
+	it("Generates empty flex with undefined", () => expect(getFlexUtility(undefined)).toEqual(MOCK_FLEX_CLASSES))
+
+	const MOCK_FLEX_DUPLICATE_CLASSES = `flex flex-center ui-bg-primary`
+	const MOCK_FLEX_DUPLICATE: FlexProps = {
+		children: null,
+		isCentered: true,
+		className: "flex",
+		withBackground: "primary",
+	}
+
+	it("Generates without duplicated classes", () =>
+		expect(getFlexUtility(MOCK_FLEX_DUPLICATE)).toEqual(MOCK_FLEX_DUPLICATE_CLASSES))
+
+	it("Generates xAlign center class", () =>
+		expect(getFlexUtility({ children: null, xAlign: "center" })).toEqual("flex flex-x-center"))
+
+	const MOCK_FLEX_RESPONSIVE_CLASSES = `flex mobile:p-0 tablet:p-8 p-16`
+	const MOCK_FLEX_RESPONSIVE: FlexProps = {
+		children: null,
+		padding: [0, 8, 16],
+	}
+
+	it("Generates responsive padding scale", () =>
+		expect(getFlexUtility(MOCK_FLEX_RESPONSIVE)).toEqual(MOCK_FLEX_RESPONSIVE_CLASSES))
+
+	const MOCK_FLEX_RADIUS_CLASSES = `flex mobile:radius-none tablet:radius-small radius-normal`
+	const MOCK_FLEX_RADIUS: FlexProps = {
+		children: null,
+		withRadius: ["none", "small", "normal"],
+	}
+
+	it("Generates responsive radius scale", () =>
+		expect(getFlexUtility(MOCK_FLEX_RADIUS)).toEqual(MOCK_FLEX_RADIUS_CLASSES))
+})
+
+describe("getSafeFlexProps", () => {
+	const MOCK_FLEX_ATTRIBUTES: Record<string, unknown> = {
+		children: null,
+		className: "xo",
+		draggable: true,
+		gap: 24,
+		isAround: true,
+		isBetween: true,
+		isCentered: true,
+		isColumn: true,
+		isColumnCentered: true,
+		isInline: true,
+		isStretch: true,
+		isWrapped: true,
+		isXCentered: true,
+		isYCentered: true,
+		padding: 16,
+		paddingX: 16,
+		paddingY: 16,
+		withBackground: true,
+		withRadius: "normal",
+		xAlign: "start",
+		yAlign: "start",
+	}
+	const MOCK_FLEX_ATTRIBUTES_SAFE = {
+		children: null,
+		className: "xo",
+		draggable: true,
+	} as Record<string, unknown>
+
+	it("Generates without invalid attributes", () =>
+		expect(getSafeFlexProps(MOCK_FLEX_ATTRIBUTES)).toEqual(MOCK_FLEX_ATTRIBUTES_SAFE))
+})

package/components/Flex/Flex.utils.ts

@@ -0,0 +1,162 @@
+import type { HeliosScaleType, HeliosRadiusType } from "../../types/scale"
+import type { FlexProps } from "./Flex.types"
+import type { ResponsiveScaleType, ResponsiveRadiusType } from "./Flex.types"
+
+export const getFlexUtility = (props?: FlexProps): string => {
+	if (!props) return "flex"
+
+	const flexClasses: Set<string> = new Set<string>()
+	const flexBase: "flex" | "inline-flex" = props?.isInline ? "inline-flex" : "flex"
+	const flexGrow: number = props.grow ?? 0
+
+	flexClasses.add(flexBase)
+
+	if (props.isStretch) flexClasses.add("align-stretch")
+	if (props.isCentered) flexClasses.add("flex-center")
+	if (props.isColumn) flexClasses.add("flex-column")
+	if (props.isWrapped) flexClasses.add("flex-wrap")
+	if (props.isYCentered) flexClasses.add("flex-y-center")
+	if (props.isXCentered) flexClasses.add("flex-x-center")
+	if (props.yAlign === "baseline") flexClasses.add("align-baseline")
+	if (props.yAlign === "start") flexClasses.add("align-flex-start")
+	if (props.yAlign === "end") flexClasses.add("align-flex-end")
+	if (props.xAlign === "start") flexClasses.add("justify-flex-start")
+	if (props.xAlign === "center") flexClasses.add("flex-x-center")
+	if (props.xAlign === "end") flexClasses.add("justify-flex-end")
+	if (props.isBetween) flexClasses.add("space-between")
+	if (props.isAround) flexClasses.add("space-around")
+	if (props.onClick) flexClasses.add("cursor-pointer")
+	if (props.isFullHeight) flexClasses.add("hp-100")
+	if (props.isFullWidth) flexClasses.add("wp-100")
+	if (props.isNoWrap) flexClasses.add("nowrap")
+	if (props.elevation === "small") flexClasses.add("elevation-sm")
+	if (props.elevation === "medium") flexClasses.add("elevation-md")
+	if (props.elevation === "large") flexClasses.add("elevation-lg")
+	if (flexGrow > 0 && flexGrow <= 8) flexClasses.add(`grow-${props.grow}`)
+
+	if (props.withRadius) {
+		const responsiveRadius = getRadius(props.withRadius)
+		flexClasses.add(responsiveRadius)
+	}
+
+	if (props.padding) {
+		const responsivePadding: string = getPadding(props.padding)
+		flexClasses.add(responsivePadding)
+	}
+
+	if (props.gap) {
+		const responsiveGap: string = getResponsiveScale(props.gap, "gap")
+		flexClasses.add(responsiveGap)
+	}
+
+	if (props.paddingBlock) {
+		const responsivePaddingBlock: string = getResponsiveScale(props.paddingBlock, "py")
+		flexClasses.add(responsivePaddingBlock)
+	}
+
+	if (props.paddingInline) {
+		const responsivePaddingInline: string = getResponsiveScale(props.paddingInline, "px")
+		flexClasses.add(responsivePaddingInline)
+	}
+
+	if (props.paddingY) flexClasses.add(`py-${props.paddingY}`)
+	if (props.paddingX) flexClasses.add(`px-${props.paddingX}`)
+
+	if (props.className) flexClasses.add(props.className)
+	if (props.withBackground === "primary") flexClasses.add("ui-bg-primary")
+	if (props.withBackground === "secondary") flexClasses.add("ui-bg-secondary")
+	if (props.withBackground === "tertiary") flexClasses.add("ui-bg-tertiary")
+
+	return Array.from(flexClasses).join(" ")
+}
+
+export const getResponsiveScale = (value?: ResponsiveScaleType, prefix: string = "p"): string => {
+	if (!value) return ""
+
+	const isArray: boolean = Boolean(value && value instanceof Array)
+	const classes = new Set<string>()
+
+	if (!isArray) return `${prefix}-${value}`
+
+	for (let index: number = 0; index < 3; index++) {
+		const element = (value as [HeliosScaleType, HeliosScaleType, HeliosScaleType])[index]
+
+		if (index === 0) classes.add(`mobile:${prefix}-${element ?? 0}`)
+		if (index === 1) classes.add(`tablet:${prefix}-${element ?? 0}`)
+		if (index === 2) classes.add(`${prefix}-${element ?? 0}`)
+	}
+
+	return Array.from(classes).join(" ")
+}
+
+export const getPadding = (paddingValue?: ResponsiveScaleType): string => {
+	if (!paddingValue) return ""
+
+	const isArray: boolean = Boolean(paddingValue && paddingValue instanceof Array)
+	const paddingClasses = new Set<string>()
+
+	if (!isArray) return `p-${paddingValue}`
+
+	for (let index: number = 0; index < 3; index++) {
+		const element = (paddingValue as [HeliosScaleType, HeliosScaleType, HeliosScaleType])[index]
+
+		if (index === 0) paddingClasses.add(`mobile:p-${element ?? 0}`)
+		if (index === 1) paddingClasses.add(`tablet:p-${element ?? 0}`)
+		if (index === 2) paddingClasses.add(`p-${element ?? 0}`)
+	}
+
+	return Array.from(paddingClasses).join(" ")
+}
+
+export const getRadius = (radiusValue?: ResponsiveRadiusType): string => {
+	if (!radiusValue) return ""
+
+	const isArray: boolean = Boolean(radiusValue && radiusValue instanceof Array)
+	const radiusClasses = new Set<string>()
+
+	if (!isArray) return `radius-${radiusValue}`
+
+	for (let index: number = 0; index < 3; index++) {
+		const element: HeliosRadiusType | undefined = (
+			radiusValue as [HeliosRadiusType, HeliosRadiusType, HeliosRadiusType]
+		)[index]
+
+		if (index === 0 && !!element) radiusClasses.add(`mobile:radius-${element}`)
+		if (index === 1 && !!element) radiusClasses.add(`tablet:radius-${element}`)
+		if (index === 2 && !!element) radiusClasses.add(`radius-${element}`)
+	}
+
+	return Array.from(radiusClasses).join(" ")
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const getSafeFlexProps = (props: Record<string, any>): Record<string, unknown> => {
+	const {
+		gap: _gap,
+		isAround: _isAround,
+		isBetween: _isBetween,
+		isCentered: _isCentered,
+		isColumn: _isColumn,
+		isColumnCentered: _isColumnCentered,
+		isFullHeight: _isFullHeight,
+		isFullWidth: _isFullWidth,
+		isInline: _isInline,
+		isStretch: _isStretch,
+		isJoined: _isJoined,
+		isWrapped: _isWrapped,
+		isXCentered: _isXCentered,
+		isYCentered: _isYCentered,
+		padding: _padding,
+		paddingBlock: _paddingBlock,
+		paddingInline: _paddingInline,
+		paddingX: _paddingX,
+		paddingY: _paddingY,
+		withBackground: _withBackground,
+		withRadius: _withRadius,
+		xAlign: _xAlign,
+		yAlign: _yAlign,
+		...safeProps
+	} = props
+
+	return safeProps
+}

package/components/Flex/index.ts

@@ -0,0 +1,4 @@
+import { Flex } from "./Flex"
+
+export { Flex }
+export type { FlexProps, ResponsiveRadiusType } from "./Flex.types"

package/components/Grid/Grid.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { GridBaseProps } from "./Grid.types"
+
+export const meta: HeliosAttributeMeta<GridBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-grid-default",
+			description: "default",
+			content: `<Grid columns={4}>{CHILDREN}</Grid>`,
+		},
+	],
+	_status: "experimental",
+	_category: "core",
+	columns: {
+		type: "number",
+	},
+	isResponsive: {
+		type: "boolean",
+		isOptional: true,
+	},
+}

package/components/Grid/Grid.tsx

@@ -0,0 +1,17 @@
+import type { GridProps } from "./Grid.types"
+import { getClasses } from "@heliosgraphics/utils"
+import type { FC } from "react"
+
+export const Grid: FC<GridProps> = ({ columns, children }) => {
+	const gridClasses = getClasses("grid", {
+		[`grid-cols-${columns}`]: columns,
+	})
+
+	return (
+		<div className={gridClasses} data-ui-component="Grid">
+			{children}
+		</div>
+	)
+}
+
+Grid.displayName = "Grid"

package/components/Grid/Grid.types.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from "react"
+
+export interface GridBaseProps {
+	columns: number
+	isResponsive?: boolean
+}
+
+export type GridProps = PropsWithChildren<GridBaseProps>

package/components/Grid/index.ts

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

package/components/Heading/Heading.meta.ts

@@ -0,0 +1,23 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { HeadingBaseProps } from "./Heading.types"
+
+export const meta: HeliosAttributeMeta<HeadingBaseProps> = {
+	_patterns: [
+		{
+			id: "ui-heading-default",
+			description: "default",
+			content: `<Heading level={1}>{CHILDREN}</Heading>`,
+		},
+	],
+	_extends: ['Omit<BaseTextProps, "type">', "HTMLAttributes<HTMLHeadingElement>"],
+	_status: "nominal",
+	_category: "content",
+	level: {
+		type: "0 | 1 | 2 | 3 | 4 | 5 | 6",
+	},
+	lineHeight: {
+		type: "number",
+		isOptional: true,
+		description: "Overrides the default line-height",
+	},
+}

package/components/Heading/Heading.module.css

@@ -0,0 +1,19 @@
+.heading {
+	white-space: break-spaces;
+}
+
+.headingPrimary {
+	color: var(--ui-text-primary);
+}
+
+.headingSecondary {
+	color: var(--ui-text-secondary);
+}
+
+.headingTertiary {
+	color: var(--ui-text-tertiary);
+}
+
+.heading a {
+	text-decoration: none;
+}

package/components/Heading/Heading.tsx

@@ -0,0 +1,69 @@
+import { getTypographyUtility } from "../Text/Text.utils"
+import { getClasses } from "@heliosgraphics/utils"
+import { H0 } from "./components/H0"
+import { H1 } from "./components/H1"
+import { H2 } from "./components/H2"
+import { H3 } from "./components/H3"
+import { H4 } from "./components/H4"
+import { H5 } from "./components/H5"
+import { H6 } from "./components/H6"
+import styles from "./Heading.module.css"
+import type { HeadingProps } from "./Heading.types"
+import type { FC, CSSProperties } from "react"
+
+export const Heading: FC<HeadingProps> = (props) => {
+	const { level, lineClamp, lineHeight, style, className, ...rest } = props
+
+	const headingClasses: string = getClasses(className, styles.heading, {
+		[styles.headingPrimary]: props.emphasis === "primary",
+		[styles.headingSecondary]: props.emphasis === "secondary",
+		[styles.headingTertiary]: props.emphasis === "tertiary",
+	})
+	const utility: string = getTypographyUtility({
+		...props,
+		className: headingClasses,
+	})
+	const lineClampStyle: CSSProperties | undefined = lineClamp
+		? {
+				display: "-webkit-box",
+				WebkitLineClamp: lineClamp,
+				WebkitBoxOrient: "vertical",
+				overflow: "hidden",
+			}
+		: undefined
+
+	const lineHeightStyle: CSSProperties | undefined = lineHeight !== undefined ? { lineHeight } : undefined
+
+	const mergedStyle: CSSProperties | undefined =
+		style || lineClampStyle || lineHeightStyle
+			? { ...(style || {}), ...(lineClampStyle || {}), ...(lineHeightStyle || {}) }
+			: undefined
+
+	const allProps: Omit<HeadingProps, "level"> = {
+		...rest,
+		children: props.children,
+		style: mergedStyle,
+		className: utility,
+	}
+
+	switch (level) {
+		case 0:
+			return <H0 {...allProps} data-ui-component="Heading" />
+		case 1:
+			return <H1 {...allProps} data-ui-component="Heading" />
+		case 2:
+			return <H2 {...allProps} data-ui-component="Heading" />
+		case 3:
+			return <H3 {...allProps} data-ui-component="Heading" />
+		case 4:
+			return <H4 {...allProps} data-ui-component="Heading" />
+		case 5:
+			return <H5 {...allProps} data-ui-component="Heading" />
+		case 6:
+			return <H6 {...allProps} data-ui-component="Heading" />
+		default:
+			return null
+	}
+}
+
+Heading.displayName = "Heading"

package/components/Heading/Heading.types.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "react"
+import type { TextBaseProps } from "../Text/Text.types"
+
+export interface HeadingBaseProps {
+	level: 0 | 1 | 2 | 3 | 4 | 5 | 6
+	lineHeight?: number
+}
+
+export type HeadingProps = HeadingBaseProps & Omit<TextBaseProps, "type"> & HTMLAttributes<HTMLHeadingElement>

package/components/Heading/components/H0/H0.meta.ts

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

package/components/Heading/components/H0/H0.module.css

@@ -0,0 +1,4 @@
+.h0 {
+	font-size: 60px;
+	line-height: 72px;
+}

package/components/Heading/components/H0/H0.tsx

@@ -0,0 +1,12 @@
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./H0.module.css"
+import type { FC } from "react"
+import type { H0Props } from "./H0.types"
+
+export const H0: FC<H0Props> = (props) => {
+	const h0Classes: string = getClasses(props.className, styles.h0)
+
+	return <h1 {...props} className={h0Classes} data-ui-component="Heading.H0" />
+}
+
+H0.displayName = "H0"

package/components/Heading/components/H0/H0.types.ts

@@ -0,0 +1,3 @@
+import type { HeadingProps } from "../../Heading.types"
+
+export interface H0Props extends Omit<HeadingProps, "level"> {}

package/components/Heading/components/H0/index.ts

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

package/components/Heading/components/H1/H1.meta.ts

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

package/components/Heading/components/H1/H1.tsx

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

package/components/Heading/components/H1/H1.types.ts

@@ -0,0 +1,3 @@
+import type { HeadingProps } from "../../Heading.types"
+
+export interface H1Props extends Omit<HeadingProps, "level"> {}

package/components/Heading/components/H1/index.ts

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

package/components/Heading/components/H2/H2.meta.ts

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

package/components/Heading/components/H2/H2.tsx

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

package/components/Heading/components/H2/H2.types.ts

@@ -0,0 +1,3 @@
+import type { HeadingProps } from "../../Heading.types"
+
+export interface H2Props extends Omit<HeadingProps, "level"> {}