@heliosgraphics/ui 2.0.0-alpha.62

package/components/Flex/Flex.types.ts

@@ -0,0 +1,34 @@
+import type { HTMLAttributes, MouseEventHandler, PropsWithChildren, ForwardedRef } from "react"
+import type { HeliosScaleType, HeliosRadiusType } from "../.."
+
+export type ResponsiveScaleType = HeliosScaleType | [HeliosScaleType, HeliosScaleType, HeliosScaleType]
+export type ResponsiveRadiusType = HeliosRadiusType | [HeliosRadiusType, HeliosRadiusType, HeliosRadiusType]
+
+export interface FlexBaseProps {
+	className?: string
+	elevation?: "small" | "medium" | "large"
+	gap?: HeliosScaleType
+	grow?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
+	isAround?: boolean
+	isBetween?: boolean
+	isCentered?: boolean
+	isColumn?: boolean
+	isFullWidth?: boolean
+	isInline?: boolean
+	isNoWrap?: boolean
+	isStretch?: boolean
+	isWrapped?: boolean
+	isXCentered?: boolean
+	isYCentered?: boolean
+	onClick?: MouseEventHandler<HTMLDivElement>
+	padding?: ResponsiveScaleType
+	paddingX?: HeliosScaleType
+	paddingY?: HeliosScaleType
+	ref?: ForwardedRef<HTMLDivElement>
+	withBackground?: boolean
+	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,94 @@
+import { it, describe, expect } from "vitest"
+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`
+	const MOCK_FLEX_DUPLICATE: FlexProps = {
+		children: null,
+		isCentered: true,
+		className: "flex",
+		withBackground: true,
+	}
+
+	it("Generates without duplicated classes", () =>
+		expect(getFlexUtility(MOCK_FLEX_DUPLICATE)).toEqual(MOCK_FLEX_DUPLICATE_CLASSES))
+
+	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: 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: FlexProps = {
+		children: null,
+		className: "xo",
+		draggable: true,
+	}
+
+	it("Generates without invalid attributes", () =>
+		expect(getSafeFlexProps(MOCK_FLEX_ATTRIBUTES)).toEqual(MOCK_FLEX_ATTRIBUTES_SAFE))
+})

package/components/Flex/Flex.utils.ts

@@ -0,0 +1,122 @@
+import type { HeliosScaleType, HeliosRadiusType } from "../.."
+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 === "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.isFullWidth) flexClasses.add("wp-100")
+	if (props.isNoWrap) flexClasses.add("nowrap")
+	if (props.elevation === "small") flexClasses.add("elevation-small")
+	if (props.elevation === "medium") flexClasses.add("elevation-medium")
+	if (props.elevation === "large") flexClasses.add("elevation-large")
+	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) flexClasses.add(`gap-${props.gap}`)
+	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) flexClasses.add("ui-bg")
+
+	return Array.from(flexClasses).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: any): Partial<FlexProps> => {
+	const {
+		gap: _gap,
+		isAround: _isAround,
+		isBetween: _isBetween,
+		isCentered: _isCentered,
+		isColumn: _isColumn,
+		isColumnCentered: _isColumnCentered,
+		isFullWidth: _isFullWidth,
+		isInline: _isInline,
+		isStretch: _isStretch,
+		isJoined: _isJoined,
+		isWrapped: _isWrapped,
+		isXCentered: _isXCentered,
+		isYCentered: _isYCentered,
+		padding: _padding,
+		paddingX: _paddingX,
+		paddingY: _paddingY,
+		withBackground: _withBackground,
+		withRadius: _withRadius,
+		xAlign: _xAlign,
+		yAlign: _yAlign,
+		...safeProps
+	} = props
+
+	return safeProps
+}

package/components/Flex/index.ts

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

package/components/Grid/Grid.meta.ts

@@ -0,0 +1,22 @@
+import type { HeliosAttributeMeta } from "../.."
+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,11 @@
+import { GridProps } from "./Grid.types"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import type { FC } from "react"
+
+export const Grid: FC<GridProps> = ({ columns, children }) => {
+	const gridClasses = getClasses("grid", {
+		[`grid-cols-${columns}`]: columns,
+	})
+
+	return <div className={gridClasses}>{children}</div>
+}

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,18 @@
+import type { HeliosAttributeMeta } from "../.."
+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: "stable",
+	_category: "content",
+	level: {
+		type: "0 | 1 | 2 | 3 | 4 | 5 | 6",
+	},
+}

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,58 @@
+import { getTypographyUtility } from "../Text/Text.utils"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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 headingClasses: string = getClasses(props.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 = props.lineClamp
+		? {
+				display: "-webkit-box",
+				WebkitLineClamp: props.lineClamp,
+				WebkitBoxOrient: "vertical",
+				overflow: "hidden",
+			}
+		: undefined
+
+	const allProps: Omit<HeadingProps, "level"> = {
+		onClick: props.onClick,
+		children: props.children,
+		style: lineClampStyle,
+		className: utility,
+	}
+
+	switch (props.level) {
+		case 0:
+			return <H0 {...allProps} />
+		case 1:
+			return <H1 {...allProps} />
+		case 2:
+			return <H2 {...allProps} />
+		case 3:
+			return <H3 {...allProps} />
+		case 4:
+			return <H4 {...allProps} />
+		case 5:
+			return <H5 {...allProps} />
+		case 6:
+			return <H6 {...allProps} />
+		default:
+			return null
+	}
+}

package/components/Heading/Heading.types.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "react"
+import type { TextBaseProps } from "../.."
+
+export interface HeadingBaseProps {
+	level: 0 | 1 | 2 | 3 | 4 | 5 | 6
+}
+
+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 "../../../.."
+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,10 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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" />
+}

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 "../../../.."
+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,6 @@
+import type { FC } from "react"
+import type { H1Props } from "./H1.types"
+
+export const H1: FC<H1Props> = (props) => {
+	return <h1 {...props} className={`h1 ${props.className}`} data-ui-component="Heading.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 "../../../.."
+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,6 @@
+import type { FC } from "react"
+import type { H2Props } from "./H2.types"
+
+export const H2: FC<H2Props> = (props) => {
+	return <h2 {...props} className={`h2 ${props.className}`} data-ui-component="Heading.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"> {}

package/components/Heading/components/H2/index.ts

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

package/components/Heading/components/H3/H3.meta.ts

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

package/components/Heading/components/H3/H3.tsx

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

package/components/Heading/components/H3/H3.types.ts

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

package/components/Heading/components/H3/index.ts

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

package/components/Heading/components/H4/H4.meta.ts

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

package/components/Heading/components/H4/H4.tsx

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

package/components/Heading/components/H4/H4.types.ts

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

package/components/Heading/components/H4/index.ts

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

package/components/Heading/components/H5/H5.meta.ts

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

package/components/Heading/components/H5/H5.tsx

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

package/components/Heading/components/H5/H5.types.ts

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

package/components/Heading/components/H5/index.ts

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

package/components/Heading/components/H6/H6.meta.ts

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

package/components/Heading/components/H6/H6.tsx

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

package/components/Heading/components/H6/H6.types.ts

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

package/components/Heading/components/H6/index.ts

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

package/components/Heading/index.ts

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