@a-type/ui 5.0.22 → 6.0.1

package/src/components/marquee/marquee.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Marquee } from './marquee.js';
 
 const meta = {
@@ -17,11 +17,18 @@ type Story = StoryObj<typeof Marquee>;
 export const Default: Story = {
 	render(params) {
 		return (
-			<Marquee {...params}>
+			<Marquee style={{ height: 200 }} {...params}>
 				<Marquee.Item>
 					<img src="https://resources.biscuits.club/images/pashka.jpg" />
 				</Marquee.Item>
-				<Marquee.Item className="flex items-center justify-center text-lg color-primary-dark bg-primary-wash">
+				<Marquee.Item
+					className="bg-primary-wash color-main-heavy text-primary"
+					style={{
+						display: 'flex',
+						alignItems: 'center',
+						justifyContent: 'center',
+					}}
+				>
 					Hello, world
 				</Marquee.Item>
 				<Marquee.Item

package/src/components/marquee/marquee.tsx

@@ -1,15 +1,19 @@
 import { clsx } from 'clsx';
-import { Children, ReactNode, useEffect, useState } from 'react';
+import { Children, ComponentProps, useEffect, useState } from 'react';
 import { withClassName } from '../../hooks.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './marquee.module.css';
 
-export interface MarqueeProps {
-	className?: string;
-	children?: ReactNode;
+export interface MarqueeProps extends ComponentProps<'div'> {
 	timeout?: number;
 }
 
-export function Marquee({ className, children, timeout = 5000 }: MarqueeProps) {
+export function Marquee({
+	className,
+	children,
+	timeout = 5000,
+	...rest
+}: MarqueeProps) {
 	const [currentIndex, setCurrentIndex] = useState(0);
 	const offset = `${currentIndex * -100}%`;
 
@@ -24,14 +28,9 @@ export function Marquee({ className, children, timeout = 5000 }: MarqueeProps) {
 	}, [currentIndex, childCount, timeout]);
 
 	return (
-		<div
-			className={clsx(
-				'layer-components:(relative h-full w-full overflow-hidden)',
-				className,
-			)}
-		>
+		<div className={clsx(cls.root, className)} {...rest}>
 			<div
-				className="layer-components:(absolute left-0 top-0 h-full w-full flex flex-row overflow-visible transition-transform duration-300)"
+				className={clsx(cls.inner)}
 				style={{ transform: `translateX(${offset})` }}
 			>
 				{children}
@@ -40,9 +39,6 @@ export function Marquee({ className, children, timeout = 5000 }: MarqueeProps) {
 	);
 }
 
-const MarqueeItem = withClassName(
-	SlotDiv,
-	'layer-components:(h-full w-full flex-shrink-0 object-cover)',
-);
+const MarqueeItem = withClassName(SlotDiv, cls.item);
 
 Marquee.Item = MarqueeItem;

package/src/components/masonry/masonry.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Box } from '../box/Box.js';
 import { Masonry } from './masonry.js';

package/src/components/masonry/masonry.tsx

@@ -102,9 +102,10 @@ abstract class MasonryLayout implements Layout {
 			child.style.setProperty('width', `${width}%`);
 			child.style.setProperty('left', `${x}%`);
 			child.style.setProperty('top', `${y}px`);
-			child.style.setProperty('z-index', index.toString());
+			// wrap z-index after some items to avoid getting too high
+			child.style.setProperty('z-index', (index % 30).toString());
 			requestAnimationFrame(() => {
-				child.classList.add('transition-all');
+				child.style.setProperty('transition', 'transform 0.3s, top 0.3s');
 			});
 			for (let i = 0; i < itemTrackSpan; i++) {
 				tracks[trackIndex + i] = y + child.offsetHeight + gap;

package/src/components/navBar/NavBar.module.css

@@ -0,0 +1,137 @@
+.root {
+	display: grid;
+	grid-auto-columns: 1fr;
+	grid-auto-flow: column;
+	height: auto;
+	justify-items: center;
+	overflow: clip;
+	border-radius: 0;
+	padding: var(--m-spacing-sm);
+	z-index: 50;
+	padding-bottom: calc(var(--m-spacing-sm) + env(safe-area-inset-bottom, 0px));
+
+	@media (min-width: 768px) {
+		height: min-content;
+		display: flex;
+		flex-direction: column;
+		align-items: stretch;
+		justify-content: start;
+		gap: var(--m-spacing-sm);
+		overflow-x: clip;
+		overflow-y: auto;
+		border-radius: 0;
+		padding-bottom: var(--m-spacing-xl);
+		box-shadow: none;
+		@apply --mx-bg(transparent);
+		border: none;
+	}
+}
+
+.item {
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	cursor: pointer;
+	user-select: none;
+	align-items: center;
+	justify-content: center;
+	gap: var(--m-spacing-sm);
+	white-space: nowrap;
+	padding: var(--m-action-padding);
+	transition: all var(--m-duration) var(--m-easing);
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-bg(transparent);
+	border-radius: var(--m-radius-sm);
+	border: none;
+	font-size: var(--m-text-ambient-size);
+	line-height: 1;
+	font-weight: var(--m-text-ambient-weight);
+	@apply --mx-shadow;
+
+	&:active {
+		@apply --mx-bg-heavier(1);
+	}
+
+	&:hover {
+		@apply --mx-bg(var(--m-action-light-bg));
+		@apply --mx-bg-faded(50%);
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+
+	&[data-active='true'] {
+		@apply --mx-bg(var(--m-action-light-bg));
+		@apply --mx-fg(var(--m-action-light-fg));
+	}
+
+	@media (min-width: 768px) {
+		height: auto;
+		display: flex;
+		flex-direction: row-reverse;
+		justify-content: end;
+		align-items: center;
+		gap: var(--m-spacing-md);
+		padding: var(--m-action-padding);
+		overflow: visible;
+		font-size: var(--m-text-secondary-size);
+		&:active {
+			@apply --mx-bg-heavier(1);
+		}
+	}
+}
+
+.itemIconWrapper {
+	position: relative;
+	display: flex;
+
+	@media (min-width: 768px) {
+		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg-faded(50%);
+		padding: var(--m-spacing-sm);
+		border-radius: var(--m-action-radius);
+
+		[data-active='true'] & {
+			@apply --mx-bg(inherit);
+		}
+	}
+}
+
+.itemText {
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	font-size: var(--m-text-ambient-size);
+	line-height: 1;
+	font-weight: inherit;
+	display: inline-block;
+	overflow: clip;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.icon {
+	position: relative;
+	z-index: 1;
+	display: flex;
+	@apply --mx-fg(inherit);
+
+	[data-active='true'] & {
+		@apply --mx-fill(var(--m-color-main));
+	}
+}
+
+.pip {
+	position: absolute;
+	top: var(--m-spacing-sm);
+	right: var(--m-spacing-sm);
+	width: 6px;
+	height: 6px;
+	border-radius: 50%;
+	background-color: var(--m-color-main);
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+}

package/src/components/navBar/NavBar.tsx

@@ -3,22 +3,15 @@ import { UseRenderComponentProps } from '@base-ui/react/use-render';
 import classNames, { clsx } from 'clsx';
 import { ReactElement, ReactNode, Ref } from 'react';
 import { withClassName } from '../../hooks.js';
+import { useMediaQuery } from '../../hooks/useMediaQuery.js';
 import { Icon, IconProps } from '../icon/index.js';
-
-export const navBarItemClass = classNames(
-	'layer-components:(relative h-full flex flex-col cursor-pointer select-none items-center justify-center gap-6px whitespace-nowrap rounded-sm border-none px-3 py-1 text-sm transition-colors color-black bg-transparent)',
-	'layer-components:active:bg-darken-2',
-	'layer-components:hover:(bg-main-light)',
-	'layer-components:foc-effect',
-	'layer-components:[&[data-active=true]]:(color-black color-lighten-2 bg-main-light/50)',
-	'layer-responsive:md:(h-auto flex-row-reverse justify-start gap-2 overflow-visible active:bg-darken-2)',
-);
+import cls from './NavBar.module.css';
 
 export interface NavBarItemProps extends UseRenderComponentProps<'button'> {
 	className?: string;
 	children?: ReactNode;
 	active?: boolean;
-	color?: 'primary' | 'gray';
+	color?: 'primary' | 'neutral' | 'accent';
 	render?: ReactElement | (() => ReactElement);
 }
 
@@ -31,27 +24,25 @@ export const NavBarItem = function NavBarItem({
 }: NavBarItemProps & {
 	ref?: React.Ref<HTMLButtonElement>;
 }) {
+	const mobile = useMediaQuery('(max-width: 768px)');
 	return (
 		<Button
 			ref={ref}
-			className={classNames(navBarItemClass, `palette-${color}`, className)}
+			className={classNames(
+				cls.item,
+				mobile ? `@mode-denser` : '@mode-dense',
+				`@mode-${color}`,
+				className,
+			)}
 			data-active={active}
 			{...rest}
 		/>
 	);
 };
 
-export const NavBarItemIconWrapper = withClassName(
-	'div',
-	'layer-components:(relative flex)',
-	'layer-components:md:bg-gray-blend layer-components:md:(rounded-lg p-6px)',
-	'layer-variants:md:[*[data-active=true]_&]:bg-[var(--bg)]',
-);
+export const NavBarItemIconWrapper = withClassName('div', cls.itemIconWrapper);
 
-export const NavBarItemText = withClassName(
-	'span',
-	'layer-components:(inline-block overflow-hidden text-ellipsis whitespace-nowrap text-xxs) layer-components:md:(text-md leading-normal)',
-);
+export const NavBarItemText = withClassName('span', cls.itemText);
 
 interface NavBarItemIconProps extends Omit<IconProps, 'name'> {
 	name?: IconProps['name'];
@@ -68,29 +59,16 @@ export const NavBarItemIcon = function NavBarItemIcon({
 	return (
 		<Icon
 			name={name}
-			className={clsx(
-				'layer-components:(relative z-1 flex color-inherit)',
-				'layer-variants:[*[data-active=true]_&]:fill-main',
-				className,
-			)}
+			className={clsx(cls.icon, className)}
 			{...rest}
 			ref={ref}
 		/>
 	);
 };
 
-export const NavBarItemPip = withClassName(
-	'div',
-	'palette-attention',
-	'layer-components:(absolute right-6px top-6px h-6px w-6px rounded-lg shadow-sm bg-main)',
-);
+export const NavBarItemPip = withClassName('div', '@mode-attention', cls.pip);
 
-export const NavBarRoot = withClassName(
-	'div',
-	'layer-components:([grid-auto-columns:1fr] [grid-auto-flow:column] z-50 grid h-auto w-full justify-items-center overflow-hidden rounded-none p-1)',
-	'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
-	'layer-components:md:(h-min-content flex flex-col items-stretch justify-start gap-2 overflow-x-hidden rounded-none border-none pb-10 bg-transparent border-transparent overflow-y-auto shadow-none)',
-);
+export const NavBarRoot = withClassName('div', cls.root);
 
 export const NavBar = Object.assign(NavBarRoot, {
 	Item: NavBarItem,

package/src/components/note/Note.module.css

@@ -0,0 +1,114 @@
+.root {
+	@apply --mx-shadow;
+
+	&:has(input:focus[data-focus-clicked]),
+	&:has(textarea:focus[data-focus-clicked]) {
+		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-ring(var(--m-color-main-light), 4px);
+	}
+
+	&:has(input:focus-visible),
+	&:has(textarea:focus-visible) {
+		@apply --mx-bg(var(--m-color-main-light));
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-focus-ring();
+	}
+}
+
+.layout {
+	display: flex;
+	flex-direction: row;
+}
+
+.content {
+	position: relative;
+	flex: 1;
+	padding: var(--m-spacing-sm);
+
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: var(--m-text-ambient-weight);
+	font-style: italic;
+
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-bg-heavier(1);
+	@apply --mx-borderColor(var(--m-color-main-heavy));
+	border-right-width: 0;
+
+	& input,
+	& textarea {
+		padding: 0;
+		box-shadow: none;
+		background: transparent;
+		outline: none;
+		border: none;
+	}
+}
+
+.fold {
+	display: flex;
+	flex: 0 0 20px;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: stretch;
+}
+
+.foldTop {
+	position: relative;
+	height: 20px;
+	width: 20px;
+	flex: 0 0 20px;
+
+	@apply --mx-borderColor(var(--m-color-main-heavy));
+	border-bottom-width: var(--m-lineWidth-md);
+	border-left-width: var(--m-lineWidth-md);
+	border-top-width: 0;
+	border-right-width: 0;
+}
+
+.topCorner {
+	box-sizing: content-box;
+	height: 0;
+	width: 0;
+	top: 0;
+	right: 0;
+	transform-origin: right bottom;
+
+	@apply --mx-borderColor(var(--m-color-main-wash));
+	@apply --mx-borderColor-heavier(1);
+	border-width: 9.5px;
+	border-style: solid;
+	border-color: transparent;
+	border-bottom-color: var(--mx-borderColor-ref);
+	border-left-color: var(--mx-borderColor-ref);
+}
+
+.diagonal {
+	position: absolute;
+	left: 9px;
+	top: -3px;
+	height: 27px;
+	width: 0.5px;
+	transform-origin: center center;
+	transform: rotate(-45deg);
+
+	@apply --mx-bg(var(--m-color-main-heavy));
+}
+
+.foldBottom {
+	flex: 1;
+	@apply --mx-borderColor(var(--m-color-main-heavy));
+	@apply --mx-bg(var(--m-color-main-wash));
+	@apply --mx-bg-heavier(1);
+	border-right-width: var(--m-lineWidth-md);
+	border-bottom-width: var(--m-lineWidth-md);
+	border-left-width: 0;
+	border-top-width: 0;
+}
+
+.input {
+	width: 100%;
+	padding: 0;
+}

package/src/components/note/Note.stories.tsx

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

package/src/components/note/Note.tsx

@@ -1,59 +1,31 @@
-import classNames, { clsx } from 'clsx';
+import classNames from 'clsx';
 import { HTMLAttributes, ReactNode } from 'react';
 import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/index.js';
 import { TextArea } from '../textArea/TextArea.js';
+import cls from './Note.module.css';
 
 export interface NoteProps extends HTMLAttributes<HTMLDivElement> {
 	children?: ReactNode;
-	color?: PaletteName;
 }
 
-function NoteRoot({ className, color, children, ...rest }: NoteProps) {
+function NoteRoot({ className, children, ...rest }: NoteProps) {
 	return (
-		<div
-			className={classNames(
-				color && `palette-${color}`,
-				'foc-contained',
-				'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:(ring ring-4 bg-lighten-3 ring-main-light)',
-				className,
-			)}
-			{...rest}
-		>
-			<div className="layer-components:(flex flex-row)">
-				<div
-					className={clsx(
-						'layer-components:(relative flex-1 border border-solid p-sm text-sm italic color-black bg-main-wash bg-darken-1 border-main-dark) layer-variants:border-r-0',
-						'layer-variants:[&_input,&_textarea]:(border-none p-0 bg-transparent ring-none shadow-none)',
-					)}
-				>
-					{children}
-				</div>
-				<div
-					className="layer-components:(flex flex-[0_0_20px] flex-col items-stretch justify-stretch)"
-					aria-hidden
-				>
-					{/* folded corner */}
-					<div className="layer-components:(relative h-[20px] w-[20px] flex-[0_0_20px] border-0 border-solid border-main-dark) layer-variants:(border-b border-l)">
-						{/* top corner */}
-						<div
-							className={`layer-components:(box-content h-0 w-0 transform-origin-br translate--7px rotate--45 border-13px border-solid border-transparent border-r-main-wash border-r-darken-1)`}
-						/>
-						{/* diagonal line */}
-						<div className="layer-components:(absolute left-9px top--3px h-27px w-0.5px transform-origin-cc rotate--45 bg-main-dark)" />
+		<div className={classNames(cls.root, className)} {...rest}>
+			<div className={cls.layout}>
+				<div className={cls.content}>{children}</div>
+				<div className={cls.fold} aria-hidden>
+					<div className={cls.foldTop}>
+						<div className={cls.topCorner} />
+						<div className={cls.diagonal} />
 					</div>
-					{/* bottom right corner */}
-					<div className="layer-components:(flex-1 border-0 border-solid bg-main-wash bg-darken-1 border-main-dark) layer-variants:(border-b border-r)" />
+					<div className={cls.foldBottom} />
 				</div>
 			</div>
 		</div>
 	);
 }
 
-export const NoteInput = withClassName(
-	TextArea.Input,
-	'layer-composed2:(w-full p-0)',
-);
+export const NoteInput = withClassName(TextArea.Input, cls.input);
 
 export const Note = Object.assign(NoteRoot, {
 	Input: NoteInput,

package/src/components/numberStepper/NumberStepper.module.css

@@ -0,0 +1,32 @@
+.root {
+	width: min-content;
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	overflow: clip;
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+
+	@apply --mx-bg(var(--m-control-bg));
+	@apply --mx-fg(var(--m-control-fg));
+	@apply --mx-borderColor(var(--m-control-borderColor));
+	border-radius: var(--m-control-radius);
+
+	&:disabled,
+	&[data-disabled='true'] {
+		--mx-shadow-value: 0 0 0 0 transparent;
+		@apply --mx-bg(transparent);
+		@apply --mx-borderColor-lighter(2);
+		@apply --mx-fg-lighter(2);
+	}
+
+	&[data-emphasis='primary'] {
+		@apply --mx-bg(var(--m-color-main-wash));
+		@apply --mx-fg(var(--m-color-main-ink));
+	}
+}
+
+.value {
+	width: 80px;
+	text-align: center;
+}

package/src/components/numberStepper/NumberStepper.stories.tsx

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

package/src/components/numberStepper/NumberStepper.tsx

@@ -3,6 +3,7 @@ import classNames from 'clsx';
 import { ReactNode } from 'react';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/Icon.js';
+import cls from './NumberStepper.module.css';
 
 export interface NumberStepperProps {
 	value: number;
@@ -16,6 +17,7 @@ export interface NumberStepperProps {
 	min?: number;
 	max?: number;
 	id?: string;
+	defaultValue?: number;
 }
 
 export function NumberStepper({
@@ -29,6 +31,7 @@ export function NumberStepper({
 	disabled,
 	min,
 	max,
+	defaultValue,
 	...rest
 }: NumberStepperProps) {
 	const index = steps?.indexOf(value) ?? 0;
@@ -64,18 +67,19 @@ export function NumberStepper({
 		(steps ? index > 0 : true) &&
 		(min === undefined || value > min);
 
+	const highlighted = highlightChange && value !== (defaultValue ?? 0);
+
 	return (
 		<div
 			className={classNames(
-				'layer-components:(w-min-content flex flex-shrink-0 items-center overflow-hidden border rounded-lg border-solid shadow-sm bg-white border-gray-dark)',
-				disabled &&
-					'layer-variants:(shadow-none bg-transparent border-gray-dark/80)',
+				cls.root,
 				{
-					'layer-variants:(color-black bg-accent-wash)':
-						!!highlightChange && value !== 1,
+					'@mode-accent': highlighted,
 				},
 				className,
 			)}
+			data-disabled={disabled ? true : undefined}
+			data-emphasis={highlighted ? 'primary' : 'secondary'}
 			{...rest}
 		>
 			<Button
@@ -86,7 +90,7 @@ export function NumberStepper({
 			>
 				<Icon name="minus" />
 			</Button>
-			<div className="w-80px text-center">{renderValue(value)}</div>
+			<div className={cls.value}>{renderValue(value)}</div>
 			<Button
 				emphasis="ghost"
 				onClick={increment}

package/src/components/particles/ParticleLayer.module.css

@@ -0,0 +1,8 @@
+.canvas {
+	pointer-events: none;
+	position: fixed;
+	inset: 0;
+	z-index: 999999;
+	width: 100%;
+	height: 100%;
+}

package/src/components/particles/ParticleLayer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { MouseEvent, useRef, useState } from 'react';
 import { Button } from '../button/index.js';
 import { Checkbox } from '../checkbox/index.js';
@@ -20,7 +20,17 @@ type Story = StoryObj<typeof ParticleLayer>;
 export const Default: Story = {
 	render() {
 		return (
-			<div className="relative h-[100vh] w-full flex flex-col items-center justify-center">
+			<div
+				style={{
+					position: 'relative',
+					height: '100vh',
+					width: '100%',
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					justifyContent: 'center',
+				}}
+			>
 				<ExplodeButton />
 			</div>
 		);
@@ -54,12 +64,20 @@ export const HiddenTest: Story = {
 		return (
 			<>
 				<div
-					className="relative w-full flex flex-col items-center justify-center p-10"
-					style={{ visibility: hide ? 'hidden' : 'visible' }}
+					style={{
+						position: 'relative',
+						width: '100%',
+						display: 'flex',
+						flexDirection: 'column',
+						alignItems: 'center',
+						justifyContent: 'center',
+						padding: '2.5rem',
+						visibility: hide ? 'hidden' : 'visible',
+					}}
 				>
 					<Icon name="placeholder" ref={targetRef} />
 				</div>
-				<div className="row">
+				<div style={{ display: 'flex', flexDirection: 'row' }}>
 					<Button
 						onClick={() => {
 							particles?.addParticles(