@heliosgraphics/ui 2.0.0-alpha.100

package/components/Layout/components/LayoutAside/LayoutAside.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { getClasses } from "@heliosgraphics/utils"
+import { useLayoutContext } from "../../../../hooks/useLayoutContext"
+import styles from "./LayoutAside.module.css"
+import type { LayoutAsideProps } from "./LayoutAside.types"
+import type { FC } from "react"
+
+export const LayoutAside: FC<LayoutAsideProps> = ({ children }) => {
+	const { isWideEnough, isMenuVisible, hasMounted, asideRef } = useLayoutContext()
+
+	if (!hasMounted) return null
+
+	const layoutAsideClasses: string = getClasses(styles.layoutAside, {
+		[styles.layoutAsideHidden]: !isMenuVisible && !isWideEnough,
+		[styles.layoutAsideFloating]: isMenuVisible && !isWideEnough,
+		[styles.layoutAsideFloatingLeft]: true,
+	})
+
+	return (
+		<aside data-ui-component="Layout.Aside" className={layoutAsideClasses} ref={asideRef}>
+			{children}
+		</aside>
+	)
+}
+
+LayoutAside.displayName = "LayoutAside"

package/components/Layout/components/LayoutAside/LayoutAside.types.ts

@@ -0,0 +1,14 @@
+import type { FC, ReactElement, PropsWithChildren } from "react"
+import type { LayoutAsideFooterProps } from "./components/LayoutAsideFooter/LayoutAsideFooter.types"
+import type { LayoutAsideContentProps } from "./components/LayoutAsideContent/LayoutAsideContent.types"
+import type { LayoutAsideToggleProps } from "./components/LayoutAsideToggle/LayoutAsideToggle.types"
+
+export type LayoutAsideBaseProps = {}
+export type LayoutAsideProps = PropsWithChildren<LayoutAsideBaseProps>
+
+export interface LayoutAsideComposition {
+	(props: LayoutAsideProps): ReactElement
+	Content: FC<LayoutAsideContentProps>
+	Footer: FC<LayoutAsideFooterProps>
+	Toggle: FC<LayoutAsideToggleProps>
+}

package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.meta.ts

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

package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.module.css

@@ -0,0 +1,5 @@
+.layoutAsideContent {
+	height: 100vh;
+	overflow: auto;
+	padding-bottom: 32px;
+}

package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.tsx

@@ -0,0 +1,19 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
+import styles from "./LayoutAsideContent.module.css"
+import type { LayoutAsideContentProps } from "./LayoutAsideContent.types"
+import type { FC } from "react"
+
+export const LayoutAsideContent: FC<LayoutAsideContentProps> = (props) => {
+	const layoutAsideContentFlexClasses: string = getFlexUtility({ ...props, isColumn: true, isFullWidth: true })
+	const layoutAsideContentClasses: string = getClasses(layoutAsideContentFlexClasses, styles.layoutAsideContent)
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<section {...safeProps} data-ui-component="Layout.Aside.Content" className={layoutAsideContentClasses}>
+			{props.children}
+		</section>
+	)
+}
+
+LayoutAsideContent.displayName = "LayoutAsideContent"

package/components/Layout/components/LayoutAside/components/LayoutAsideContent/LayoutAsideContent.types.ts

@@ -0,0 +1,5 @@
+import type { FlexProps } from "../../../../../Flex/Flex.types"
+
+export interface LayoutAsideContentBaseProps {}
+
+export type LayoutAsideContentProps = FlexProps & LayoutAsideContentBaseProps

package/components/Layout/components/LayoutAside/components/LayoutAsideContent/index.ts

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

package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.meta.ts

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

package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.module.css

@@ -0,0 +1,10 @@
+.layoutAsideFooter {
+	bottom: 0;
+	position: sticky;
+
+	height: 64px;
+	overflow: hidden;
+
+	border-top: 1px solid var(--ui-border-secondary);
+	border-right: 1px solid var(--ui-border-secondary);
+}

package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.tsx

@@ -0,0 +1,19 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
+import styles from "./LayoutAsideFooter.module.css"
+import type { LayoutAsideFooterProps } from "./LayoutAsideFooter.types"
+import type { FC } from "react"
+
+export const LayoutAsideFooter: FC<LayoutAsideFooterProps> = (props) => {
+	const layoutAsideFooterFlexClasses: string = getFlexUtility({ ...props, isColumn: !!props.isColumn || true })
+	const layoutAsideFooterClasses: string = getClasses(layoutAsideFooterFlexClasses, styles.layoutAsideFooter)
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<footer {...safeProps} data-ui-component="Layout.Aside.Footer" className={layoutAsideFooterClasses}>
+			{props.children}
+		</footer>
+	)
+}
+
+LayoutAsideFooter.displayName = "LayoutAsideFooter"

package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/LayoutAsideFooter.types.ts

@@ -0,0 +1,5 @@
+import type { FlexProps } from "../../../../../Flex/Flex.types"
+
+export interface LayoutAsideFooterBaseProps {}
+
+export type LayoutAsideFooterProps = FlexProps & LayoutAsideFooterBaseProps

package/components/Layout/components/LayoutAside/components/LayoutAsideFooter/index.ts

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

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.meta.ts

@@ -0,0 +1,14 @@
+import type { HeliosAttributeMeta } from "../../../../../../types/meta"
+import type { LayoutAsideToggleProps } from "./LayoutAsideToggle.types"
+
+export const meta: HeliosAttributeMeta<LayoutAsideToggleProps> = {
+	_patterns: [
+		{
+			id: "ui-layout-aside-toggle-default",
+			description: "default",
+			content: `<Layout.Aside.Toggle/>`,
+		},
+	],
+	_status: "experimental",
+	_category: "layout",
+}

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import type { FC } from "react"
+import { Button } from "../../../../../Button/Button"
+import { ButtonGroup } from "../../../../../ButtonGroup/ButtonGroup"
+import { useLayoutContext } from "../../../../../../hooks/useLayoutContext"
+import type { LayoutAsideToggleProps } from "./LayoutAsideToggle.types"
+
+export const LayoutAsideToggle: FC<LayoutAsideToggleProps> = () => {
+	const { isWideEnough, onAsideClose, onNavigationToggle, isMenuVisible, hasMounted } = useLayoutContext()
+
+	if (!hasMounted || isWideEnough) return null
+
+	return (
+		<ButtonGroup data-ui-component="Layout.Aside.Toggle">
+			<Button
+				value="Toggle"
+				intent="neutral"
+				icon={isMenuVisible ? "x" : "bars"}
+				isIconOnly={true}
+				data-ui-layout-ignore="true"
+				onClick={isMenuVisible ? onAsideClose : onNavigationToggle}
+				size="small"
+				aria-expanded={isMenuVisible}
+				aria-label={isMenuVisible ? "Close navigation" : "Open navigation"}
+			/>
+		</ButtonGroup>
+	)
+}
+
+LayoutAsideToggle.displayName = "LayoutAsideToggle"

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.types.ts

@@ -0,0 +1 @@
+export interface LayoutAsideToggleProps {}

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/index.ts

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

package/components/Layout/components/LayoutAside/index.ts

@@ -0,0 +1,13 @@
+import type { LayoutAsideComposition } from "./LayoutAside.types"
+import { LayoutAsideContent } from "./components/LayoutAsideContent/LayoutAsideContent"
+import { LayoutAsideFooter } from "./components/LayoutAsideFooter/LayoutAsideFooter"
+import { LayoutAsideToggle } from "./components/LayoutAsideToggle/LayoutAsideToggle"
+import { LayoutAside as LAC } from "./LayoutAside"
+
+const LayoutAsideComponent = LAC as LayoutAsideComposition
+
+LayoutAsideComponent.Content = LayoutAsideContent
+LayoutAsideComponent.Footer = LayoutAsideFooter
+LayoutAsideComponent.Toggle = LayoutAsideToggle
+
+export { LayoutAsideComponent as LayoutAside }

package/components/Layout/components/LayoutMain/LayoutMain.meta.ts

@@ -0,0 +1,15 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { LayoutMainBaseProps } from "./LayoutMain.types"
+
+export const meta: HeliosAttributeMeta<LayoutMainBaseProps> = {
+	_extends: ["FlexProps"],
+	_patterns: [
+		{
+			id: "ui-layout-main-default",
+			description: "default",
+			content: `<Layout.Main>{CHILDREN}</Layout.Main>`,
+		},
+	],
+	_status: "internal",
+	_category: "layout",
+}

package/components/Layout/components/LayoutMain/LayoutMain.module.css

@@ -0,0 +1,15 @@
+.layoutMain {
+	position: relative;
+
+	background-color: var(--ui-bg-secondary);
+}
+
+.layoutMain:has(nav[data-ui-component="Layout.Navigation"]) {
+	height: calc(100dvh - 64px);
+	margin-top: 64px;
+}
+
+.layoutMain:has(nav[data-ui-component="Layout.Navigation"]):has(nav[data-ui-component="Layout.SubNavigation"]) {
+	height: calc(100dvh - 120px);
+	margin-top: 120px;
+}

package/components/Layout/components/LayoutMain/LayoutMain.tsx

@@ -0,0 +1,23 @@
+import { getClasses } from "@heliosgraphics/utils"
+import { getFlexUtility, getSafeFlexProps } from "../../../Flex/Flex.utils"
+import styles from "./LayoutMain.module.css"
+import type { FC } from "react"
+import type { LayoutMainProps } from "./LayoutMain.types"
+
+export const LayoutMain: FC<LayoutMainProps> = (props) => {
+	const layoutMainFlexClasses: string = getFlexUtility({
+		...props,
+		isColumn: !!props.isColumn || true,
+	})
+
+	const layoutMainClasses: string = getClasses(layoutMainFlexClasses, styles.layoutMain)
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<main {...safeProps} data-ui-component="Layout.Main" className={layoutMainClasses}>
+			{props.children}
+		</main>
+	)
+}
+
+LayoutMain.displayName = "LayoutMain"

package/components/Layout/components/LayoutMain/LayoutMain.types.ts

@@ -0,0 +1,12 @@
+import type { FC, ReactElement } from "react"
+import type { LayoutMainContentProps } from "./components/LayoutMainContent/LayoutMainContent.types"
+import type { FlexProps } from "../../../Flex/Flex.types"
+
+export interface LayoutMainBaseProps {}
+
+export type LayoutMainProps = FlexProps & LayoutMainBaseProps
+
+export interface LayoutMainComposition {
+	(props: LayoutMainProps): ReactElement
+	Content: FC<LayoutMainContentProps>
+}

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.meta.ts

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

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.module.css

@@ -0,0 +1,4 @@
+.layoutMainContent {
+	height: 100%;
+	overflow: auto;
+}

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import { getFlexUtility, getSafeFlexProps } from "../../../../../Flex/Flex.utils"
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./LayoutMainContent.module.css"
+import { useLayoutEffect, useRef, type FC } from "react"
+import {
+	initLocationTracker,
+	shouldResetScrollOnLocationChange,
+	subscribeToLocationChanges,
+} from "./LayoutMainContent.utils"
+import type { LayoutMainContentProps } from "./LayoutMainContent.types"
+
+export const LayoutMainContent: FC<LayoutMainContentProps> = (props) => {
+	const contentRef = useRef<HTMLElement>(null)
+
+	const layoutMainFlexClasses: string = getFlexUtility({
+		...props,
+		isColumn: true,
+	})
+	const mainContentClasses: string = getClasses(layoutMainFlexClasses, styles.layoutMainContent, "ui-bg-secondary")
+	const safeProps = getSafeFlexProps(props)
+
+	useLayoutEffect((): (() => void) => {
+		const onLocationChange = (): void => {
+			if (shouldResetScrollOnLocationChange()) {
+				contentRef.current?.scrollTo(0, 0)
+			}
+		}
+
+		initLocationTracker()
+
+		return subscribeToLocationChanges(onLocationChange)
+	})
+
+	return (
+		<section
+			{...safeProps}
+			ref={contentRef}
+			className={mainContentClasses}
+			role="main"
+			data-ui-component="Main.Content"
+		>
+			{props.children}
+		</section>
+	)
+}
+
+LayoutMainContent.displayName = "LayoutMainContent"

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.types.ts

@@ -0,0 +1,5 @@
+import type { FlexProps } from "../../../../../Flex/Flex.types"
+
+export interface LayoutMainContentBaseProps {}
+
+export type LayoutMainContentProps = FlexProps & LayoutMainContentBaseProps

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.utils.ts

@@ -0,0 +1,65 @@
+"use client"
+
+let lastLocation: string | null = null
+let isHistoryPatched: boolean = false
+
+const getLocationKey = (): string | null => {
+	if (!globalThis?.location) return null
+
+	return `${globalThis.location.pathname}${globalThis.location.search}${globalThis.location.hash}`
+}
+
+const patchHistory = (): void => {
+	if (isHistoryPatched || !globalThis?.history) return
+
+	isHistoryPatched = true
+
+	const { pushState, replaceState } = globalThis.history
+	const dispatchLocationChange = (): void => {
+		globalThis.dispatchEvent(new Event("locationchange"))
+	}
+
+	const pushStateWrapper = (...args: Parameters<History["pushState"]>): ReturnType<History["pushState"]> => {
+		const result = pushState.apply(globalThis.history, args as Parameters<History["pushState"]>)
+		dispatchLocationChange()
+		return result
+	}
+
+	const replaceStateWrapper = (...args: Parameters<History["replaceState"]>): ReturnType<History["replaceState"]> => {
+		const result = replaceState.apply(globalThis.history, args as Parameters<History["replaceState"]>)
+		dispatchLocationChange()
+		return result
+	}
+
+	globalThis.history.pushState = pushStateWrapper
+	globalThis.history.replaceState = replaceStateWrapper
+
+	globalThis.addEventListener("popstate", dispatchLocationChange)
+	globalThis.addEventListener("hashchange", dispatchLocationChange)
+}
+
+export const initLocationTracker = (): void => {
+	patchHistory()
+	lastLocation = getLocationKey()
+}
+
+export const shouldResetScrollOnLocationChange = (): boolean => {
+	const currentLocation: string | null = getLocationKey()
+	const shouldReset: boolean = Boolean(currentLocation && lastLocation && currentLocation !== lastLocation)
+
+	lastLocation = currentLocation
+
+	return shouldReset
+}
+
+export const subscribeToLocationChanges = (handler: () => void): (() => void) => {
+	patchHistory()
+
+	globalThis.addEventListener("locationchange", handler)
+
+	const unsubscribe = (): void => {
+		globalThis.removeEventListener("locationchange", handler)
+	}
+
+	return unsubscribe
+}

package/components/Layout/components/LayoutMain/components/LayoutMainContent/index.ts

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

package/components/Layout/components/LayoutMain/index.ts

@@ -0,0 +1,9 @@
+import type { LayoutMainComposition } from "./LayoutMain.types"
+import { LayoutMainContent } from "./components/LayoutMainContent/LayoutMainContent"
+import { LayoutMain as SC } from "./LayoutMain"
+
+const LayoutMainComponent = SC as LayoutMainComposition
+
+LayoutMainComponent.Content = LayoutMainContent
+
+export { LayoutMainComponent as LayoutMain }

package/components/Layout/components/LayoutNavigation/LayoutNavigation.meta.ts

@@ -0,0 +1,15 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { LayoutNavigationBaseProps } from "./LayoutNavigation.types"
+
+export const meta: HeliosAttributeMeta<LayoutNavigationBaseProps> = {
+	_patterns: [
+		{
+			id: "ui-layout-navigation-default",
+			description: "default",
+			content: `<Layout.Navigation>{CHILDREN}</Layout.Navigation>`,
+		},
+	],
+	_status: "internal",
+	_category: "layout",
+	_extends: ["FlexProps"],
+}

package/components/Layout/components/LayoutNavigation/LayoutNavigation.module.css

@@ -0,0 +1,12 @@
+.layoutNavigation {
+	position: fixed;
+	top: 0;
+	z-index: var(--z-index-5);
+
+	height: 64px;
+	width: -moz-available;
+	width: -webkit-fill-available;
+	width: stretch;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+}

package/components/Layout/components/LayoutNavigation/LayoutNavigation.tsx

@@ -0,0 +1,24 @@
+import { getFlexUtility, getSafeFlexProps } from "../../../Flex/Flex.utils"
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./LayoutNavigation.module.css"
+import type { FC } from "react"
+import type { LayoutNavigationProps } from "./LayoutNavigation.types"
+
+export const LayoutNavigation: FC<LayoutNavigationProps> = (props) => {
+	const mainNavigationFlexClasses: string = getFlexUtility({
+		...props,
+		isYCentered: props.isYCentered ?? true,
+		paddingX: props.paddingX ?? 8,
+	})
+
+	const navigationClasses: string = getClasses(mainNavigationFlexClasses, styles.layoutNavigation, "ui-bg")
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<nav {...safeProps} className={navigationClasses} data-ui-component="Layout.Navigation">
+			{props.children}
+		</nav>
+	)
+}
+
+LayoutNavigation.displayName = "LayoutNavigation"

package/components/Layout/components/LayoutNavigation/LayoutNavigation.types.ts

@@ -0,0 +1,5 @@
+import type { FlexProps } from "../../../Flex/Flex.types"
+
+export interface LayoutNavigationBaseProps {}
+
+export type LayoutNavigationProps = FlexProps & LayoutNavigationBaseProps

package/components/Layout/components/LayoutNavigation/index.ts

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

package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.meta.ts

@@ -0,0 +1,15 @@
+import type { HeliosAttributeMeta } from "../../../../types/meta"
+import type { LayoutSubNavigationBaseProps } from "./LayoutSubNavigation.types"
+
+export const meta: HeliosAttributeMeta<LayoutSubNavigationBaseProps> = {
+	_patterns: [
+		{
+			id: "ui-layout-sub-navigation-default",
+			description: "default",
+			content: `<Layout.SubNavigation>{CHILDREN}</Layout.SubNavigation>`,
+		},
+	],
+	_status: "internal",
+	_category: "layout",
+	_extends: ["FlexProps"],
+}

package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.module.css

@@ -0,0 +1,12 @@
+.layoutNavigation {
+	position: fixed;
+	top: 64px;
+	z-index: var(--z-index-4);
+
+	height: 56px;
+	width: -moz-available;
+	width: -webkit-fill-available;
+	width: stretch;
+
+	border-bottom: 1px solid var(--ui-border-secondary);
+}

package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.tsx

@@ -0,0 +1,24 @@
+import { getFlexUtility, getSafeFlexProps } from "../../../Flex/Flex.utils"
+import { getClasses } from "@heliosgraphics/utils"
+import styles from "./LayoutSubNavigation.module.css"
+import type { FC } from "react"
+import type { LayoutSubNavigationProps } from "./LayoutSubNavigation.types"
+
+export const LayoutSubNavigation: FC<LayoutSubNavigationProps> = (props) => {
+	const mainNavigationFlexClasses: string = getFlexUtility({
+		...props,
+		isYCentered: props.isYCentered ?? true,
+		paddingX: props.paddingX ?? 8,
+	})
+
+	const navigationClasses: string = getClasses(mainNavigationFlexClasses, styles.layoutNavigation)
+	const safeProps = getSafeFlexProps(props)
+
+	return (
+		<nav {...safeProps} className={navigationClasses} data-ui-component="Layout.SubNavigation">
+			{props.children}
+		</nav>
+	)
+}
+
+LayoutSubNavigation.displayName = "LayoutSubNavigation"

package/components/Layout/components/LayoutSubNavigation/LayoutSubNavigation.types.ts

@@ -0,0 +1,5 @@
+import type { FlexProps } from "../../../Flex/Flex.types"
+
+export interface LayoutSubNavigationBaseProps {}
+
+export type LayoutSubNavigationProps = FlexProps & LayoutSubNavigationBaseProps

package/components/Layout/components/LayoutSubNavigation/index.ts

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

package/components/Layout/index.ts

@@ -0,0 +1,17 @@
+import type { LayoutComposition } from "./Layout.types"
+import { LayoutAside } from "./components/LayoutAside"
+import { LayoutMain } from "./components/LayoutMain"
+import { LayoutNavigation } from "./components/LayoutNavigation/LayoutNavigation"
+import { LayoutSubNavigation } from "./components/LayoutSubNavigation"
+import { Layout as LC } from "./Layout"
+import type { LayoutAsideComposition } from "./components/LayoutAside/LayoutAside.types"
+import type { LayoutMainComposition } from "./components/LayoutMain/LayoutMain.types"
+
+const LayoutComponent = LC as LayoutComposition
+
+LayoutComponent.Aside = LayoutAside as LayoutAsideComposition
+LayoutComponent.Main = LayoutMain as LayoutMainComposition
+LayoutComponent.Navigation = LayoutNavigation
+LayoutComponent.SubNavigation = LayoutSubNavigation
+
+export { LayoutComponent as Layout }

package/components/Loading/Loading.meta.ts

@@ -0,0 +1,20 @@
+import type { HeliosAttributeMeta } from "../../types/meta"
+import type { LoadingProps } from "./Loading.types"
+
+export const meta: HeliosAttributeMeta<LoadingProps> = {
+	_patterns: [
+		{
+			id: "ui-loading-default",
+			description: "default",
+			content: `<Loading emphasis={EMPHASIS} size={20}/>`,
+		},
+	],
+	_status: "nominal",
+	_category: "core",
+	className: { type: "string", isOptional: true },
+	size: { type: "10 | 20 | 40" },
+	emphasis: {
+		type: "HeliosEmphasisType",
+		isOptional: true,
+	},
+}