@a-type/ui 5.0.21 → 6.0.0

package/src/components/layouts/PageContent.tsx

@@ -2,17 +2,12 @@ import classNames from 'clsx';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { useBoundsCssVars } from '../../hooks/useSize.js';
 import { Box, BoxProps } from '../box/Box.js';
+import cls from './PageContent.module.css';
 
 const bodyRef =
 	typeof document !== 'undefined' ? { current: document.body } : undefined;
 
-export function PageContent({
-	children,
-	className,
-	ref,
-	p,
-	...rest
-}: BoxProps) {
+export function PageContent({ children, className, ref, ...rest }: BoxProps) {
 	const innerRef = useBoundsCssVars<HTMLDivElement>(200, bodyRef, {
 		left: '--content-left',
 		top: '--content-top',
@@ -25,22 +20,9 @@ export function PageContent({
 
 	return (
 		<Box
-			col
-			layout="stretch start"
-			full="width"
-			p={
-				p || {
-					default: 'md',
-					sm: 'lg',
-				}
-			}
-			gap="md"
-			container="reset"
-			className={classNames(
-				'[grid-area:content]',
-				'layer-components:flex-1-0-auto layer-components:(mx-auto max-w-full min-w-0)',
-				className,
-			)}
+			{...rest}
+			render={<main />}
+			className={classNames(cls.root, className)}
 			ref={finalRef}
 			{...rest}
 		>

package/src/components/layouts/PageFixedArea.module.css

@@ -0,0 +1,11 @@
+.root {
+	position: sticky;
+	top: 0;
+	z-index: var(--z-nav);
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: var(--m-spacing-sm);
+	@apply --mx-bg(inherit);
+}

package/src/components/layouts/PageFixedArea.tsx

@@ -1,17 +1,10 @@
-import { HTMLAttributes } from 'react';
 import classNames from 'clsx';
+import { HTMLAttributes } from 'react';
+import cls from './PageFixedArea.module.css';
 
 export function PageFixedArea({
 	className,
 	...props
 }: HTMLAttributes<HTMLDivElement>) {
-	return (
-		<div
-			{...props}
-			className={classNames(
-				'layer-components:(sticky top-0 z-nav w-full flex flex-col items-stretch gap-2 bg-wash)',
-				className,
-			)}
-		/>
-	);
+	return <div {...props} className={classNames(cls.root, className)} />;
 }

package/src/components/layouts/PageNav.module.css

@@ -0,0 +1,31 @@
+.root {
+	grid-area: nav;
+	position: sticky;
+	bottom: 0;
+	z-index: var(--z-nav);
+
+	padding-block-end: calc(0.25rem + env(safe-area-inset-bottom, 0px));
+
+	@apply --mx-bg(inherit);
+
+	&::before {
+		position: absolute;
+		content: '';
+		top: 0;
+		left: var(--m-spacing-md);
+		right: var(--m-spacing-md);
+		height: 1px;
+		@apply --mx-bg(var(--m-color-neutral-heavy));
+		@media (min-width: 768px) {
+			display: none;
+		}
+	}
+
+	@media (min-width: 768px) {
+		bottom: auto;
+		left: auto;
+		right: auto;
+		top: var(--m-spacing-lg);
+		height: auto;
+	}
+}

package/src/components/layouts/PageNav.tsx

@@ -1,10 +1,8 @@
-'use client';
-
 import classNames from 'clsx';
 import { HTMLAttributes, useRef } from 'react';
 import { useBoundsCssVars } from '../../hooks.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { HideWhileKeyboardOpen } from '../utility/HideWhileKeyboardOpen.js';
+import cls from './PageNav.module.css';
 
 export function PageNav({
 	className,
@@ -25,15 +23,10 @@ export function PageNav({
 	return (
 		<HideWhileKeyboardOpen
 			{...props}
-			className={classNames(
-				'layer-components:([grid-area:nav] sticky bottom-0 z-[var(--z-nav)] pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))] bg-inherit)',
-				'layer-components:before:(absolute inset-x-4 top-0 h-px content-[""] bg-gray-dark/80)',
-				'layer-components:md:([grid-area:nav] sticky bottom-auto left-auto right-auto top-lg h-auto) layer-components:md:before:(hidden)',
-				className,
-			)}
+			className={classNames(cls.root, className)}
 			ref={ref}
 		>
-			<GroupScaleReset>{children}</GroupScaleReset>
+			{children}
 		</HideWhileKeyboardOpen>
 	);
 }

package/src/components/layouts/PageNowPlaying.module.css

@@ -0,0 +1,46 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--m-spacing-sm);
+
+	padding: var(--m-spacing-sm);
+
+	position: fixed;
+	position-anchor: --page-content;
+	left: anchor(left);
+	right: anchor(right);
+	top: auto;
+	bottom: --fn-literal(var(--nav-height, env(safe-area-inset-bottom, 0px)));
+
+	@media (min-width: 768px) {
+		bottom: var(--m-spacing-md);
+		align-items: center;
+		transition: bottom var(--m-duration) var(--m-easing);
+	}
+
+	&[data-disable-portal='true'] {
+		z-index: var(--z-now-playing);
+	}
+
+	&[data-keep-above-keyboard='true'] {
+		@media (max-width: 767px) {
+			top: auto;
+			&[data-virtual-keyboard-behavior='overlay'] {
+				bottom: max(
+					var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px)),
+					var(--nav-height, env(safe-area-inset-bottom, 0px))
+				);
+			}
+			&[data-virtual-keyboard-behavior='displace'] {
+				bottom: max(
+					var(
+						--mock-virtual-keyboard-height,
+						var(--viewport-bottom-offset, 0px)
+					),
+					var(--nav-height, env(safe-area-inset-bottom, 0px))
+				);
+			}
+		}
+	}
+}

package/src/components/layouts/PageNowPlaying.tsx

@@ -1,8 +1,8 @@
 import classNames from 'clsx';
 import { HTMLAttributes } from 'react';
 import { createPortal } from 'react-dom';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { useConfig } from '../provider/Provider.js';
+import cls from './PageNowPlaying.module.css';
 
 export function PageNowPlaying({
 	className,
@@ -18,27 +18,13 @@ export function PageNowPlaying({
 	const { virtualKeyboardBehavior } = useConfig();
 
 	const content = (
-		<GroupScaleReset>
-			<div
-				{...props}
-				className={classNames(
-					disablePortal && 'layer-components:z-now-playing',
-					'layer-components:(fixed left-0 right-0 flex flex-col items-center gap-2)',
-					// on mobile, this must be positioned above any nav bar that's present,
-					// or at minimum in the safe area
-					'layer-components:bottom-[var(--nav-height,env(safe-area-inset-bottom,0px))]',
-					'layer-components:md:(bottom-md left-[var(--content-left,0)] w-[var(--content-width,100%)] items-center p-0 opacity-[var(--content-ready,0)] transition-opacity,bottom)',
-					'layer-variants:p-2',
-					keepAboveKeyboard &&
-						virtualKeyboardBehavior === 'overlay' &&
-						'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px),var(--nav-height,env(safe-area-inset-bottom,0px))))]',
-					keepAboveKeyboard &&
-						virtualKeyboardBehavior === 'displace' &&
-						'layer-variants:lt-md:bottom-[max(var(--mock-virtual-keyboard-height,var(--viewport-bottom-offset,0px)),var(--nav-height,env(safe-area-inset-bottom,0px)))]',
-					className,
-				)}
-			/>
-		</GroupScaleReset>
+		<div
+			{...props}
+			className={classNames(cls.root, className)}
+			data-disable-portal={disablePortal}
+			data-keep-above-keyboard={keepAboveKeyboard}
+			data-virtual-keyboard-behavior={virtualKeyboardBehavior}
+		/>
 	);
 
 	if (disablePortal) {

package/src/components/layouts/PageRoot.module.css

@@ -0,0 +1,29 @@
+.root {
+	align-items: stretch;
+	justify-content: center;
+	min-height: 100dvh;
+	flex-shrink: 1;
+	flex-grow: 1;
+	flex-basis: auto;
+	height: max-content;
+
+	display: flex;
+	flex-direction: column;
+
+	@apply --mx-bg(var(--m-color-main-paper));
+
+	@media (min-width: 768px) {
+		display: grid;
+		grid-template-areas: 'gutter1 nav content gutter2';
+		grid-template-columns: 1fr auto 20fr 1fr;
+		grid-template-rows: auto;
+		height: auto;
+		min-height: auto;
+		align-items: start;
+		flex-basis: 0;
+	}
+
+	@media (min-width: 1024px) {
+		grid-template-columns: 1fr auto min(800px, 70vw) 1fr;
+	}
+}

package/src/components/layouts/PageRoot.tsx

@@ -1,32 +1,5 @@
-import clsx from 'clsx';
-import { HTMLAttributes } from 'react';
+import { withClassName } from '../../hooks.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './PageRoot.module.css';
 
-export interface PageRootProps extends HTMLAttributes<HTMLDivElement> {
-	mobileBasis?: '0' | 'auto';
-}
-
-export function PageRoot({
-	className,
-	children,
-	mobileBasis = 'auto',
-	...rest
-}: PageRootProps) {
-	return (
-		<div
-			className={clsx(
-				// TODO: once I'm sure which one is right, remove the other
-				mobileBasis === '0'
-					? 'layer-components:flex-basis-0'
-					: 'layer-components:flex-basis-auto',
-				'layer-components:(min-h-100dvh flex-shrink-1 flex-grow-1 bg-wash)',
-				'layer-components:(grid grid-cols-[1fr] grid-rows-[1fr_auto] grid-areas-[content]-[nav] items-start justify-center)',
-				'md:layer-responsive:(grid-cols-[1fr_auto_20fr_1fr] grid-areas-[gutter1_nav_content_gutter2] h-auto min-h-auto bg-wash)',
-				'lg:layer-responsive:(grid-cols-[1fr_auto_min(800px,70vw)_1fr])',
-				className,
-			)}
-			{...rest}
-		>
-			{children}
-		</div>
-	);
-}
+export const PageRoot = withClassName(SlotDiv, cls.root);

package/src/components/layouts/PageSection.module.css

@@ -0,0 +1,19 @@
+.root {
+	max-width: 80vw;
+	width: 100%;
+	padding: var(--m-spacing-md);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	border-radius: var(--m-radius-lg);
+	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+
+	@media (min-width: 768px) {
+		min-width: 0;
+	}
+}
+
+.grid {
+	display: grid;
+	gap: var(--m-spacing-md);
+	align-items: start;
+	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}

package/src/components/layouts/PageSection.tsx

@@ -1,11 +1,6 @@
 import { withClassName } from '../../hooks/withClassName.js';
+import cls from './PageSection.module.css';
 
-export const PageSection = withClassName(
-	'div',
-	'layer-components:(bg-white rounded-lg border-default p-4 w-full max-w-80vw md:min-w-0)',
-);
+export const PageSection = withClassName('div', cls.root);
 
-export const PageSectionGrid = withClassName(
-	'div',
-	'layer-components:(grid grid-cols-[repeat(auto-fit,minmax(300px,1fr))] gap-4 items-start)',
-);
+export const PageSectionGrid = withClassName('div', cls.grid);

package/src/components/layouts/layouts.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 import { Avatar } from '../avatar/Avatar.js';
 import { Box } from '../box/Box.js';
@@ -39,9 +39,11 @@ export const Default: Story = {
 		return (
 			<PageRoot>
 				<PageContent>
-					<div className="text-center">
-						<h1 className="text-3xl font-bold">Hello, World!</h1>
-						<p className="text-lg">This is a simple page layout.</p>
+					<div style={{ textAlign: 'center' }}>
+						<h1 className="text-primary" style={{ fontWeight: 'bold' }}>
+							Hello, World!
+						</h1>
+						<p className="text-primary">This is a simple page layout.</p>
 					</div>
 					<Switch checked={content} onCheckedChange={toggleContent} />
 					{content && (
@@ -54,7 +56,7 @@ export const Default: Story = {
 						</Card.Grid>
 					)}
 					<PageNowPlaying>
-						<Box surface="white" elevated="lg" full p>
+						<Box surface="ambient" elevated="lg" full p>
 							Now playing
 						</Box>
 					</PageNowPlaying>
@@ -74,7 +76,7 @@ export const Default: Story = {
 							<NavBarItemText>Item 2</NavBarItemText>
 							<NavBarItemPip />
 						</NavBarItem>
-						<NavBarItem color="gray" active={true}>
+						<NavBarItem color="neutral" active={true}>
 							<NavBarItemIconWrapper>
 								<NavBarItemIcon
 									render={(_, { size }) => (
@@ -96,10 +98,12 @@ export const ManualWidth: Story = {
 	render: () => {
 		return (
 			<PageRoot>
-				<PageContent className="max-w-300px">
-					<div className="text-center">
-						<h1 className="text-3xl font-bold">Hello, World!</h1>
-						<p className="text-lg">This is a simple page layout.</p>
+				<PageContent style={{ maxWidth: 300 }}>
+					<div style={{ textAlign: 'center' }}>
+						<h1 className="text-primary" style={{ fontWeight: 'bold' }}>
+							Hello, World!
+						</h1>
+						<p className="text-primary">This is a simple page layout.</p>
 					</div>
 					<Card.Grid>
 						{new Array(100).fill(null).map((_, i) => (
@@ -124,7 +128,7 @@ export const ManualWidth: Story = {
 							<NavBarItemText>Item 2</NavBarItemText>
 							<NavBarItemPip />
 						</NavBarItem>
-						<NavBarItem color="gray" active={true}>
+						<NavBarItem color="neutral" active={true}>
 							<NavBarItemIconWrapper>
 								<NavBarItemIcon name="book" />
 							</NavBarItemIconWrapper>
@@ -140,11 +144,13 @@ export const ManualWidth: Story = {
 
 export const WithoutNav: Story = {
 	render: () => (
-		<PageRoot className="h-full w-full">
+		<PageRoot style={{ height: '100%', width: '100%' }}>
 			<PageContent>
-				<div className="text-center">
-					<h1 className="text-3xl font-bold">Hello, World!</h1>
-					<p className="text-lg">This is a simple page layout.</p>
+				<div style={{ textAlign: 'center' }}>
+					<h1 className="text-primary" style={{ fontWeight: 'bold' }}>
+						Hello, World!
+					</h1>
+					<p className="text-primary">This is a simple page layout.</p>
 					<Card.Grid>
 						{new Array(100).fill(null).map((_, i) => (
 							<Card key={i}>
@@ -154,7 +160,7 @@ export const WithoutNav: Story = {
 					</Card.Grid>
 				</div>
 				<PageNowPlaying>
-					<Box full elevated="lg" p surface="white">
+					<Box full elevated="lg" p surface="ambient">
 						Now playing
 					</Box>
 				</PageNowPlaying>
@@ -179,11 +185,13 @@ export const WithVirtualKeyboard: Story = {
 		}, [keyboard]);
 
 		return (
-			<PageRoot className="h-full w-full">
+			<PageRoot style={{ height: '100%', width: '100%' }}>
 				<PageContent>
-					<div className="text-center">
-						<h1 className="text-3xl font-bold">Hello, World!</h1>
-						<p className="text-lg">This is a simple page layout.</p>
+					<div style={{ textAlign: 'center' }}>
+						<h1 className="text-primary" style={{ fontWeight: 'bold' }}>
+							Hello, World!
+						</h1>
+						<p className="text-primary">This is a simple page layout.</p>
 					</div>
 					<PageNowPlaying keepAboveKeyboard>
 						<Button onClick={() => setKeyboard((v) => !v)}>
@@ -209,7 +217,18 @@ export const WithVirtualKeyboard: Story = {
 						</NavBarItem>
 					</NavBarRoot>
 				</PageNav>
-				<div className="fixed bottom-0 left-0 right-0 h-[var(--mock-virtual-keyboard-height,0)] w-full transition-height bg-black" />
+				<div
+					className="bg-neutral-ink"
+					style={{
+						position: 'fixed',
+						bottom: 0,
+						left: 0,
+						right: 0,
+						height: 'var(--mock-virtual-keyboard-height,0)',
+						width: '100%',
+						transition: 'height var(--m-duration) var(--m-easing)',
+					}}
+				/>
 			</PageRoot>
 		);
 	},

package/src/components/lightbox/Lightbox.module.css

@@ -0,0 +1,104 @@
+.trigger {
+	cursor: pointer;
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		@apply --mx-shadow;
+		--mx-ring-value: --fn-focus-ring();
+		border-radius: var(--m-action-radius);
+	}
+}
+
+.title {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
+.close {
+	position: absolute;
+	right: var(--m-spacing-md);
+	top: var(--m-spacing-md);
+}
+
+.overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	backdrop-filter: blur(4px);
+	transition: opacity 0.2s ease;
+
+	@apply --mx-bg(var(--m-color-neutral-ink));
+	@apply --mx-bg-faded(50%);
+
+	&[data-state='closed'] {
+		opacity: 0;
+	}
+}
+
+.contentRoot {
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	z-index: 1001;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	height: 100%;
+	max-height: 85vh;
+	width: 90vw;
+	max-width: 100%;
+
+	padding: var(--m-spacing-lg);
+	border: none;
+	background: none;
+	pointer-events: none;
+
+	transform: translate(-50%, -50%);
+	transition:
+		opacity 0.2s ease,
+		transform 0.2s ease;
+
+	&[data-state='closed'] {
+		opacity: 0;
+		transform: translate(-50%, -45%) scale(0.95);
+	}
+}
+
+.contentInner {
+	max-height: 100%;
+	max-width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	pointer-events: none;
+
+	& > * {
+		pointer-events: auto;
+	}
+}
+
+.pointerEventsAuto {
+	pointer-events: auto;
+}
+
+.image {
+	object-fit: contain;
+	max-height: 100%;
+	max-width: 100%;
+	min-height: 80px;
+	min-width: 80px;
+}

package/src/components/lightbox/Lightbox.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Lightbox } from './Lightbox.js';
 
 const meta = {

package/src/components/lightbox/Lightbox.tsx

@@ -7,20 +7,17 @@ import { ReactElement, ReactNode } from 'react';
 import { withClassName } from '../../hooks.js';
 import { Button } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
+import cls from './Lightbox.module.css';
 
 export interface LightboxProps {
 	children?: ReactNode;
 }
 
 export const LightboxRoot = Dialog.Root;
-export const LightboxTrigger = withClassName(
-	Dialog.Trigger,
-	'layer-components:cursor-pointer',
-	'foc-effect',
-);
+export const LightboxTrigger = withClassName(Dialog.Trigger, cls.trigger);
 export const LightboxPortal = Dialog.Portal;
 export const LightboxTitle = () => (
-	<Dialog.Title className="sr-only">Lightbox</Dialog.Title>
+	<Dialog.Title className={cls.title}>Lightbox</Dialog.Title>
 );
 export const LightboxClose = (props: DialogCloseProps) => (
 	<Dialog.Close
@@ -30,41 +27,24 @@ export const LightboxClose = (props: DialogCloseProps) => (
 				<Icon name="x" />
 			</Button>
 		}
-		className="absolute right-md top-md"
+		className={cls.close}
 	/>
 );
 
-export const LightboxOverlay = withClassName(
-	Dialog.Backdrop,
-	'layer-components:(fixed inset-0 z-backdrop backdrop-blur-sm bg-black/50)',
-	'transform-gpu !motion-reduce:animate-none',
-	'layer-components:(animate-fade-in [&[data-state=closed]]:animate-fade-out) animate-duration-200',
-);
+export const LightboxOverlay = withClassName(Dialog.Backdrop, cls.overlay);
 
-export const LightboxContentRoot = withClassName(
-	Dialog.Popup,
-	'layer-components:(fixed z-dialog h-full max-h-full max-w-full w-full flex items-center justify-center border-none bg-none p-lg)',
-	'transform-gpu !motion-reduce:animate-none',
-	'layer-components:(left-50% top-50% max-h-85vh w-90vw translate-[-50%])',
-	'layer-components:animate-dialog-in',
-	'layer-components:[&[data-state=closed]]:animate-dialog-out',
-	'!pointer-events-none',
-);
+export const LightboxContentRoot = withClassName(Dialog.Popup, cls.contentRoot);
 export const LightboxContent = (props: DialogPopupProps) => {
 	return (
 		<LightboxContentRoot {...props}>
 			<LightboxTitle />
-			<LightboxClose className="pointer-events-auto" />
+			<LightboxClose className={cls.pointerEventsAuto} />
 			<LightboxContentInner>{props.children}</LightboxContentInner>
 		</LightboxContentRoot>
 	);
 };
 
-const LightboxContentInner = withClassName(
-	'div',
-	'layer-components:(max-h-full max-w-full flex flex-col items-center justify-center overflow-hidden)',
-	'layer-components:pointer-events-none layer-components:[&>*]:pointer-events-auto',
-);
+const LightboxContentInner = withClassName('div', cls.contentInner);
 
 function LightboxDefault({
 	children,
@@ -82,10 +62,7 @@ function LightboxDefault({
 	);
 }
 
-const LightboxImage = withClassName(
-	'img',
-	'max-h-full max-w-full min-h-80px min-w-80px object-contain',
-);
+const LightboxImage = withClassName('img', cls.image);
 
 export const Lightbox = Object.assign(LightboxDefault, {
 	Overlay: LightboxOverlay,

package/src/components/lists/lists.module.css

@@ -0,0 +1,21 @@
+.ol,
+.ul {
+	list-style-position: inside;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-sm);
+
+	& > li {
+		margin-left: var(--m-spacing-sm);
+	}
+}
+
+.ol {
+	list-style: decimal;
+}
+
+.ul {
+	list-style: disc;
+}