@a-type/ui 5.0.21 → 6.0.0

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(

package/src/components/particles/ParticleLayer.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ParticlesProvider } from './ParticleContext.js';
+import cls from './ParticleLayer.module.css';
 import { Particles } from './particlesState.js';
 
 export function ParticleLayer({
@@ -24,12 +25,7 @@ export function ParticleLayer({
 		return null;
 	}
 
-	const canvas = (
-		<canvas
-			ref={particles.setCanvas}
-			className="pointer-events-none fixed inset-0 z-[1000000] h-full w-full"
-		/>
-	);
+	const canvas = <canvas ref={particles.setCanvas} className={cls.canvas} />;
 
 	const ssr = typeof document === 'undefined';
 

package/src/components/peek/Peek.module.css

@@ -0,0 +1,96 @@
+@keyframes peekClose {
+	from {
+		height: calc(var(--collapsible-height) + 80px);
+		max-height: none;
+	}
+	to {
+		height: min(var(--peek-height, 120px), var(--collapsible-height));
+		max-height: var(--peek-height, 120px);
+	}
+}
+
+@keyframes peekOpen {
+	from {
+		height: min(var(--peek-height, 120px), var(--collapsible-height));
+	}
+	to {
+		height: calc(var(--collapsible-height) + 80px);
+	}
+}
+
+.root {
+	position: relative;
+	overflow: clip;
+
+	&[data-state='closed'] {
+		max-height: var(--peek-height, 120px);
+	}
+
+	&[data-has-interacted='true'] {
+		animation-timing-function: var(--m-easing);
+		animation-fill-mode: forwards;
+
+		&[data-state='closed'] {
+			animation-name: peekClose;
+			animation-duration: var(--m-duration);
+		}
+		&[data-state='open'] {
+			animation-name: peekOpen;
+			animation-duration: var(--m-duration-long);
+		}
+	}
+}
+
+.trigger {
+	position: absolute;
+	bottom: 0;
+	z-index: 1;
+	height: 80px;
+	width: 100%;
+	cursor: pointer;
+	@apply --mx-borderColor(var(--mx-fg-ref));
+	border-width: 0px;
+	border-bottom-width: var(--m-lineWidth-sm);
+
+	background: linear-gradient(to bottom, transparent 0%, var(--mx-bg-ref) 100%);
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		background: linear-gradient(
+			to bottom,
+			transparent 0%,
+			var(--m-color-main-wash) 100%
+		);
+		border-color: var(--m-color-main);
+	}
+
+	&::after {
+		content: '- tap to expand -';
+		position: absolute;
+		inset: 0;
+		top: auto;
+		height: 80px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: end;
+		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);
+		@apply --mx-fg(var(--m-color-neutral-heavy));
+	}
+	&[data-state='open'] {
+		&::after {
+			content: '- tap to collapse -';
+		}
+	}
+
+	@starting-style {
+		opacity: 0;
+	}
+	opacity: 1;
+	transition: opacity var(--m-duration) var(--m-easing);
+}

package/src/components/peek/Peek.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Box } from '../box/Box.js';
 import { P } from '../typography/typography.js';
 import { Peek } from './Peek.js';

package/src/components/peek/Peek.tsx

@@ -10,6 +10,7 @@ import {
 } from 'react';
 import { useSize } from '../../hooks/useSize.js';
 import { useToggle } from '../../hooks/useToggle.js';
+import cls from './Peek.module.css';
 
 export interface PeekProps {
 	peekHeight?: number;
@@ -56,15 +57,10 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 
 	return (
 		<div
-			className={classNames(
-				'relative',
-				'overflow-hidden [&[data-state=closed]]:max-h-[var(--peek-height,120px)]',
-				hasInteracted.current &&
-					'animate-ease-default animate-forwards [&[data-state=closed]]:(animate-keyframes-peek-close animate-duration-300) [&[data-state=open]]:(animate-keyframes-peek-open animate-duration-600 animate-forwards)',
-				className,
-			)}
+			className={classNames(cls.root, className)}
 			ref={containerRef}
 			data-state={isPeekable ? (open ? 'open' : 'closed') : 'closed'}
+			data-has-interacted={hasInteracted.current ? true : undefined}
 			style={
 				{
 					'--peek-height': `${peekHeight}px`,
@@ -78,13 +74,7 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 			{isPeekable && (
 				<button
 					data-state={open ? 'open' : 'closed'}
-					className={classNames(
-						'absolute bottom-0 z-1 h-80px w-full cursor-pointer border-b border-none border-b-solid bg-transparent border-white',
-						'animate-fade-in',
-						'focus-visible:(outline-none border-b border-b-solid from-transparent to-primary-wash bg-gradient-to-b border-main',
-						'after:(absolute inset-0 top-auto h-80px flex flex-col items-center justify-end from-transparent to-white bg-gradient-to-b p-3 text-xs content-["-_tap_to_expand_-"] color-gray-dark)',
-						'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]',
-					)}
+					className={cls.trigger}
 					onClick={toggle}
 					aria-label="Toggle show description"
 					aria-expanded={open}

package/src/components/popover/Popover.module.css

@@ -0,0 +1,24 @@
+.close {
+	position: absolute;
+	right: var(--m-spacing-sm);
+	top: var(--m-spacing-sm);
+}
+
+.popup {
+	padding: var(--m-spacing-md);
+}
+
+.title {
+	font-weight: 500;
+	margin: 0;
+	margin-block-end: var(--m-spacing-sm);
+	font-size: var(--m-text-secondary-size);
+	line-height: var(--m-text-secondary-lineHeight);
+}
+
+.description {
+	margin: 0;
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+}

package/src/components/popover/Popover.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../button/Button.js';
 import { Popover } from './Popover.js';
 
@@ -22,7 +22,7 @@ export const Default: Story = {
 				<Popover.Trigger render={<Button color="primary" size="small" />}>
 					Open Popover
 				</Popover.Trigger>
-				<Popover.Content className="p-md">
+				<Popover.Content style={{ padding: 'var(--m-spacing-md)' }}>
 					<Popover.Arrow />
 					<Popover.Title>Hello</Popover.Title>
 					<Popover.Description>This is a popover content.</Popover.Description>

package/src/components/popover/Popover.tsx

@@ -8,13 +8,13 @@ import { MenuArrowProps } from '@base-ui/react/menu';
 import classNames, { clsx } from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { Button, ButtonProps } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
-import { popupClassName } from '../primitives/menus.js';
+import menuCls from '../primitives/menus.module.css';
 import { ArrowSvg } from '../utility/ArrowSvg.js';
+import cls from './Popover.module.css';
 
-const StyledContent = withClassName(PopoverPrimitive.Popup, popupClassName);
+const StyledContent = withClassName(PopoverPrimitive.Popup, menuCls.popup);
 
 const StyledArrow = withClassName(
 	(props: MenuArrowProps) => (
@@ -22,9 +22,7 @@ const StyledArrow = withClassName(
 			<ArrowSvg />
 		</PopoverPrimitive.Arrow>
 	),
-	'layer-components:(arrow)',
-	'layer-components:data-[closed]:(scale-0 opacity-0)',
-	'layer-components:data-[open]:(scale-100 opacity-100)',
+	menuCls.arrow,
 );
 
 const StyledClose = ({
@@ -39,10 +37,7 @@ const StyledClose = ({
 			<Button
 				emphasis="ghost"
 				size="small"
-				className={clsx(
-					!inline && 'layer-composed:(absolute right-sm top-sm)',
-					className,
-				)}
+				className={clsx(!inline && cls.close, className)}
 				{...props}
 			/>
 		}
@@ -61,8 +56,6 @@ export const PopoverContent = function PopoverContent({
 	children,
 	forceMount,
 	className,
-	radius = 'default',
-	padding = 'default',
 	align,
 	alignOffset,
 	side,
@@ -78,58 +71,42 @@ export const PopoverContent = function PopoverContent({
 	...props
 }: PopoverPopupProps &
 	PopoverPositionerProps & {
-		radius?: 'none' | 'default' | 'md';
-		padding?: 'none' | 'default';
 		forceMount?: boolean;
 		ref?: Ref<HTMLDivElement>;
 	}) {
 	return (
 		<PopoverPrimitive.Portal keepMounted={forceMount}>
-			<GroupScaleReset>
-				<PopoverPrimitive.Positioner
-					side={side}
-					sideOffset={sideOffset}
-					align={align}
-					alignOffset={alignOffset}
-					anchor={anchor}
-					disableAnchorTracking={disableAnchorTracking}
-					sticky={sticky}
-					arrowPadding={arrowPadding}
-					collisionAvoidance={collisionAvoidance}
-					collisionBoundary={collisionBoundary}
-					collisionPadding={collisionPadding}
-					positionMethod={positionMethod}
+			<PopoverPrimitive.Positioner
+				side={side}
+				sideOffset={sideOffset}
+				align={align}
+				alignOffset={alignOffset}
+				anchor={anchor}
+				disableAnchorTracking={disableAnchorTracking}
+				sticky={sticky}
+				arrowPadding={arrowPadding}
+				collisionAvoidance={collisionAvoidance}
+				collisionBoundary={collisionBoundary}
+				collisionPadding={collisionPadding}
+				positionMethod={positionMethod}
+			>
+				<StyledContent
+					{...props}
+					ref={ref}
+					className={classNames(cls.popup, className)}
 				>
-					<StyledContent
-						{...props}
-						ref={ref}
-						className={classNames(
-							{
-								'layer-variants:important:p-0': padding === 'none',
-								'layer-variants:p-md': padding === 'default',
-								'layer-variants:rounded-none': radius === 'none',
-								'layer-variants:rounded-lg': radius === 'default',
-								'layer-variants:rounded-md': radius === 'md',
-							},
-							className,
-						)}
-					>
-						{children}
-					</StyledContent>
-				</PopoverPrimitive.Positioner>
-			</GroupScaleReset>
+					{children}
+				</StyledContent>
+			</PopoverPrimitive.Positioner>
 		</PopoverPrimitive.Portal>
 	);
 };
 
-export const PopoverTitle = withClassName(
-	PopoverPrimitive.Title,
-	'layer-components:(m-0 mb-sm text-md font-semibold)',
-);
+export const PopoverTitle = withClassName(PopoverPrimitive.Title, cls.title);
 
 export const PopoverDescription = withClassName(
 	PopoverPrimitive.Description,
-	'layer-components:(m-0 text-sm text-gray-dark)',
+	cls.description,
 );
 
 export const Popover = Object.assign(PopoverRoot, {