@heliosgraphics/ui 2.0.0-alpha.62

package/components/Icon/Icon.meta.ts

@@ -0,0 +1,28 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { IconProps } from "./Icon.types"
+
+export const meta: HeliosAttributeMeta<IconProps> = {
+	_patterns: [
+		{
+			id: "ui-icon-default",
+			description: "default",
+			content: `<Icon icon={ICON} size={SCALE} emphasis={EMPHASIS}/>`,
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	className: {
+		type: "string",
+		isOptional: true,
+	},
+	icon: {
+		type: "HeliosIconType",
+	},
+	emphasis: {
+		type: "HeliosEmphasisType",
+		isOptional: true,
+	},
+	size: {
+		type: "number",
+	},
+}

package/components/Icon/Icon.module.css

@@ -0,0 +1,22 @@
+.icon {
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+}
+
+.icon svg {
+	height: 100%;
+	width: 100%;
+
+	fill: currentcolor;
+}
+
+.iconPrimary svg {
+	fill: var(--ui-text-primary);
+}
+
+.iconSecondary svg {
+	fill: var(--ui-text-secondary);
+}
+
+.iconTertiary svg {
+	fill: var(--ui-text-tertiary);
+}

package/components/Icon/Icon.tsx

@@ -0,0 +1,29 @@
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { icons } from "@heliosgraphics/icons"
+import styles from "./Icon.module.css"
+import type { FC } from "react"
+import type { IconProps } from "./Icon.types"
+
+export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
+	const iconSizeStyle = {
+		height: size + "px",
+		minHeight: size + "px",
+		minWidth: size + "px",
+		width: size + "px",
+	}
+
+	const iconClasses: string = getClasses(styles.icon, className, "flex flex-center", {
+		[styles.iconPrimary]: emphasis === "primary",
+		[styles.iconSecondary]: emphasis === "secondary",
+		[styles.iconTertiary]: emphasis === "tertiary",
+	})
+
+	return (
+		<div
+			className={iconClasses}
+			style={iconSizeStyle}
+			data-ui-component="Icon"
+			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
+		/>
+	)
+}

package/components/Icon/Icon.types.ts

@@ -0,0 +1,8 @@
+import type { HeliosIconType, HeliosEmphasisType } from "../.."
+
+export interface IconProps {
+	className?: string
+	icon: HeliosIconType
+	emphasis?: HeliosEmphasisType
+	size: number
+}

package/components/Icon/index.ts

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

package/components/Input/Input.meta.ts

@@ -0,0 +1,53 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { InputProps } from "./Input.types"
+
+export const meta: HeliosAttributeMeta<InputProps> = {
+	_patterns: [
+		{
+			id: "ui-input-default",
+			description: "default",
+			content: `<Input value={TEXT_VALUE} isDisabled={IS_DISABLED} isLoading={IS_LOADING} label={TEXT_LABEL} onChange={ON_TEXT_CHANGE} placeholder="hello@acme.com"/>`,
+		},
+	],
+	_status: "stable",
+	_category: "core",
+	autoComplete: {
+		type: '"new-password" | "username" | "current-password"',
+		isOptional: true,
+	},
+	autoFocus: { type: "boolean", isOptional: true },
+	className: { type: "string", isOptional: true },
+	helperText: { type: "string", isOptional: true },
+	id: { type: "string", isOptional: true },
+	isDisabled: { type: "boolean", isOptional: true },
+	isLabelHidden: { type: "boolean", isOptional: true },
+	isLoading: { type: "boolean", isOptional: true },
+	isRequired: { type: "boolean", isOptional: true },
+	label: { type: "string" },
+	maxLength: { type: "number", isOptional: true },
+	name: { type: "string", isOptional: true },
+	onBlur: {
+		type: "(event?: FocusEvent<HTMLInputElement>) => unknown",
+		isOptional: true,
+	},
+	onChange: {
+		type: "(event?: ChangeEvent<HTMLInputElement>) => unknown",
+		isOptional: true,
+	},
+	onClear: { type: "HeliosOnClickType", isOptional: true },
+	onFocus: {
+		type: "(event?: FocusEvent<HTMLInputElement>) => unknown",
+		isOptional: true,
+	},
+	onKeyDown: { type: "(event?: KeyboardEvent) => unknown", isOptional: true },
+	onKeyUp: { type: "string", isOptional: true },
+	placeholder: { type: "string", isOptional: true },
+	results: { type: "Array<ResultItem>", isOptional: true },
+	showResults: { type: "boolean", isOptional: true },
+	type: {
+		type: '"text" | "email" | "date" | "time" | "password"',
+		isOptional: true,
+		default: "text",
+	},
+	value: { type: "string" },
+}

package/components/Input/Input.module.css

@@ -0,0 +1,82 @@
+.input {
+	width: 100%;
+}
+
+.input__helper {
+	margin-top: var(--space-3);
+}
+
+.input__results {
+	position: relative;
+}
+
+.input__results ol[data-ui-component="ResultList"] {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+}
+
+.input input.input__input {
+	padding: 0 10px;
+	height: 42px;
+	width: 100%;
+
+	background-clip: padding-box;
+	background-color: transparent;
+	background-color: var(--ui-bg-primary);
+	border: 1px solid var(--ui-border-primary);
+	border-radius: var(--radius-sm);
+	outline: none;
+	transition: all var(--speed-sm) var(--ease-in-out-sine);
+
+	font-family: var(--font-family-mono);
+	font-size: var(--font-size-small);
+	line-height: var(--line-height-small);
+}
+
+.inputShowingResults input.input__input {
+	border-bottom-left-radius: 0;
+}
+
+.input input.input__input:active,
+.input input.input__input:focus {
+	box-shadow: 0 0 0 4px var(--ui-border-secondary);
+	border-color: var(--ui-border-primary);
+	color: var(--ui-text-primary);
+}
+
+.input input.input__input::placeholder {
+	color: var(--ui-text-tertiary);
+	opacity: 1;
+}
+
+.input__loading {
+	position: absolute;
+	top: 28px;
+	right: 0;
+
+	align-items: center;
+	justify-content: center;
+	display: flex;
+	height: 42px;
+	width: 42px;
+
+	color: var(--ui-text-tertiary);
+}
+
+.inputDisabled {
+	pointer-events: none;
+}
+
+.inputDisabled input.input__input {
+	background-color: var(--ui-bg-disabled);
+}
+
+.inputDisabled input.input__input::placeholder {
+	color: var(--ui-text-tertiary);
+}
+
+.input__clear {
+	position: absolute;
+	right: 9px;
+	top: 9px;
+}

package/components/Input/Input.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import { useId, type FC } from "react"
+import { getClasses } from "@heliosgraphics/utils/classnames"
+import { Button, ButtonGroup, Loading, Text, Flex } from "../.."
+import { InputLabel } from "../shared/InputLabel"
+import { ResultList } from "../shared/ResultList"
+import styles from "./Input.module.css"
+import type { InputProps } from "./Input.types"
+import type { ResultItem } from "../.."
+
+export const Input: FC<InputProps> = ({
+	helperText,
+	isDisabled,
+	autoComplete,
+	autoFocus,
+	isLabelHidden,
+	isLoading,
+	isRequired,
+	label,
+	onBlur,
+	onChange,
+	onClear,
+	onFocus,
+	placeholder,
+	results,
+	showResults,
+	type = "text",
+	value,
+}) => {
+	const htmlFor: string = useId()
+
+	const filteredItems: Array<ResultItem> =
+		results
+			?.filter((item) => {
+				const lowerCaseItem: string = item.name.toLowerCase()
+				const lowerCaseFilter: string | undefined = value?.toLowerCase()
+
+				return lowerCaseFilter && lowerCaseItem.includes(lowerCaseFilter)
+			})
+			.filter(Boolean) || []
+
+	const showingResults: boolean = Boolean(!!filteredItems?.length && showResults)
+
+	const inputClasses: string = getClasses(styles.input, "relative flex flex-column gap-3", {
+		[styles.inputDisabled]: isDisabled,
+		[styles.inputShowingResults]: showingResults,
+	})
+
+	return (
+		<div className={inputClasses}>
+			<InputLabel id={htmlFor} label={label} isDisabled={!!isDisabled} isHidden={!!isLabelHidden} />
+			<Flex className="grow-1">
+				{onClear && !!value && (
+					<ButtonGroup className={styles.input__clear}>
+						<Button
+							value="Clear"
+							size="tiny"
+							intent="neutral"
+							icon="x"
+							onClick={onClear}
+							isIconOnly={true}
+							isRounded={true}
+						/>
+					</ButtonGroup>
+				)}
+				<input
+					className={styles.input__input}
+					disabled={isDisabled}
+					autoComplete={autoComplete}
+					autoFocus={autoFocus}
+					id={htmlFor}
+					onBlur={onBlur}
+					type={type}
+					onChange={onChange}
+					onFocus={onFocus}
+					placeholder={placeholder}
+					required={isRequired}
+					value={value}
+				/>
+				{isLoading && (
+					<div className={styles.input__loading}>
+						<Loading size={20} />
+					</div>
+				)}
+			</Flex>
+			{showingResults && (
+				<div className={styles.input__results}>
+					<ResultList items={filteredItems} />
+				</div>
+			)}
+			{!!helperText && (
+				<Text type="tiny" emphasis="tertiary" className={styles.input__helper}>
+					{helperText}
+				</Text>
+			)}
+		</div>
+	)
+}

package/components/Input/Input.types.ts

@@ -0,0 +1,28 @@
+import type { ResultItem } from "../.."
+import type { KeyboardEventHandler, MouseEventHandler, FocusEventHandler, ChangeEventHandler } from "react"
+
+export interface InputProps {
+	autoComplete?: "new-password" | "username" | "current-password"
+	autoFocus?: boolean
+	className?: string
+	helperText?: string
+	id?: string
+	isDisabled?: boolean
+	isLabelHidden?: boolean
+	isLoading?: boolean
+	isRequired?: boolean
+	label: string
+	maxLength?: number
+	name?: string
+	onBlur?: FocusEventHandler<HTMLInputElement>
+	onChange?: ChangeEventHandler<HTMLInputElement>
+	onClear?: MouseEventHandler<HTMLDivElement>
+	onFocus?: FocusEventHandler<HTMLInputElement>
+	onKeyDown?: KeyboardEventHandler
+	onKeyUp?: KeyboardEventHandler
+	placeholder?: string
+	results?: Array<ResultItem>
+	showResults?: boolean
+	type?: "text" | "email" | "date" | "time" | "password"
+	value?: string
+}

package/components/Input/index.ts

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

package/components/Layout/Layout.meta.ts

@@ -0,0 +1,19 @@
+import type { HeliosAttributeMeta } from "../.."
+import type { LayoutBaseProps } from "./Layout.types"
+
+export const meta: HeliosAttributeMeta<LayoutBaseProps> = {
+	_extends: ["PropsWithChildren"],
+	_patterns: [
+		{
+			id: "ui-layout-default",
+			description: "default",
+			content: `<Layout>{CHILDREN}</Layout>`,
+		},
+	],
+	_status: "stable",
+	_category: "layout",
+	isFullHeight: {
+		type: "boolean",
+		isOptional: true,
+	},
+}

package/components/Layout/Layout.module.css

@@ -0,0 +1,7 @@
+.layoutWideForAside:has(aside[data-ui-component="Layout.Aside"]) main[data-ui-component="Layout.Main"] {
+	padding-left: 260px;
+}
+
+.layoutFullHeight {
+	min-height: 100dvh;
+}

package/components/Layout/Layout.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { getClasses } from "@heliosgraphics/utils"
+import { LayoutProvider } from "../../contexts/LayoutContext"
+import { useLayoutContext } from "../../hooks/useLayoutContext"
+import styles from "./Layout.module.css"
+import type { FC } from "react"
+import type { LayoutProps } from "./Layout.types"
+
+const LayoutComponent: FC<LayoutProps> = ({ children, isFullHeight }) => {
+	const { isWideEnough } = useLayoutContext()
+
+	const layoutClasses: string = getClasses("flex flex-column", {
+		[styles.layoutWideForAside]: isWideEnough,
+		[styles.layoutFullHeight]: isFullHeight,
+	})
+
+	return (
+		<div data-ui-component="Layout" className={layoutClasses}>
+			{children}
+		</div>
+	)
+}
+
+export const Layout: FC<LayoutProps> = (props) => {
+	return (
+		<LayoutProvider breakpoint={960}>
+			<LayoutComponent {...props} />
+		</LayoutProvider>
+	)
+}

package/components/Layout/Layout.types.ts

@@ -0,0 +1,17 @@
+import type { FC, ReactElement, PropsWithChildren } from "react"
+import type { LayoutAsideComposition } from "./components/LayoutAside/LayoutAside.types"
+import type { LayoutMainComposition } from "./components/LayoutMain/LayoutMain.types"
+import type { LayoutNavigationProps } from "./components/LayoutNavigation/LayoutNavigation.types"
+
+export type LayoutBaseProps = {
+	isFullHeight?: boolean
+}
+
+export type LayoutProps = PropsWithChildren<LayoutBaseProps>
+
+export interface LayoutComposition {
+	(props: LayoutProps): ReactElement
+	Aside: LayoutAsideComposition
+	Main: LayoutMainComposition
+	Navigation: FC<LayoutNavigationProps>
+}

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

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

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

@@ -0,0 +1,40 @@
+.layoutAside {
+	position: fixed;
+	top: 0;
+	z-index: var(--z-index-7);
+
+	display: block;
+	opacity: 1;
+	width: 260px;
+
+	background-color: var(--ui-bg-primary);
+	transition: transform var(--speed-xl) var(--ease-in-out-circ);
+}
+
+.layoutAsideFloatingLeft {
+	left: 0;
+
+	box-shadow: inset -1px 0 0 0 var(--ui-border-secondary);
+	transform: translateX(0);
+}
+
+.layoutAsideFloatingLeft.layoutAsideHidden {
+	transform: translateX(-100%);
+}
+
+.layoutAsideFloatingLeft.layoutAsideFloating {
+	transform: translateX(0);
+}
+
+.layoutAside:has(nav[data-ui-component="Layout.Navigation"]) section[data-ui-component="Layout.Aside.Content"] {
+	height: calc(100vh - 64px);
+	margin-top: 64px;
+}
+
+.layoutAside:has(footer[data-ui-component="Layout.Aside.Footer"]) section[data-ui-component="Layout.Aside.Content"] {
+	height: calc(100vh - 64px - 64px);
+}
+
+.layoutAside.layoutAsideFloatingRight:has(nav[data-ui-component="Layout.Navigation"]) {
+	border-left: 1px solid var(--ui-border-secondary);
+}

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

@@ -0,0 +1,25 @@
+"use client"
+
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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>
+	)
+}

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 "../../../../../.."
+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 @@
+"use client"
+
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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>
+	)
+}

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 @@
+"use client"
+
+import { getClasses } from "@heliosgraphics/utils/classnames"
+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>
+	)
+}

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 "../../../../../.."
+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",
+}