@a-type/ui 5.0.22 → 6.0.0

package/src/components/avatar/Avatar.tsx

@@ -5,9 +5,11 @@ import {
 import classNames from 'clsx';
 import { CSSProperties, HTMLProps } from 'react';
 import { Icon } from '../icon/index.js';
+import cls from './Avatar.module.css';
 
 export interface AvatarProps extends BaseAvatarProps {
 	className?: string;
+	/** @deprecated */
 	popIn?: boolean;
 	style?: CSSProperties;
 	imageSrc?: string | null;
@@ -18,7 +20,6 @@ export interface AvatarProps extends BaseAvatarProps {
 
 export function Avatar({
 	className,
-	popIn = false,
 	imageSrc,
 	name,
 	crossOrigin,
@@ -27,22 +28,17 @@ export function Avatar({
 	...rest
 }: AvatarProps) {
 	const empty = !name && !imageSrc;
+	const sizeStyle = { '--avatar-size': size } as CSSProperties;
 	return (
 		<BaseAvatar.Root
-			data-pop={popIn}
-			className={classNames(
-				'layer-components:(relative aspect-1 w-24px flex flex-shrink-0 select-none items-center justify-center overflow-hidden border-default rounded-lg bg-white)',
-				popIn &&
-					'layer-variants:animate-pop-in-from-half layer-variants:animate-duration-200 layer-variants:animate-ease-springy',
-				empty && 'layer-components:(border-dashed bg-gray-light)',
-				className,
-			)}
-			style={size ? { width: size, height: size, ...style } : style}
+			className={classNames(cls.root, className)}
+			data-empty={empty}
+			style={size ? { ...sizeStyle, ...style } : style}
 			{...rest}
 		>
 			{imageSrc && (
 				<BaseAvatar.Image
-					className="h-full w-full object-cover"
+					className={cls.image}
 					referrerPolicy="no-referrer"
 					src={imageSrc}
 					alt={`${name ?? 'user'}'s profile picture`}
@@ -50,10 +46,7 @@ export function Avatar({
 				/>
 			)}
 			{name && (
-				<BaseAvatar.Fallback
-					className="text-size-[calc(0.5px*var(--avatar-size,24px))]"
-					style={{ '--avatar-size': size } as any}
-				>
+				<BaseAvatar.Fallback className={cls.fallback}>
 					{name.charAt(0).toUpperCase()}
 				</BaseAvatar.Fallback>
 			)}

package/src/components/avatar/AvatarList.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import { ReactNode, createContext, useContext } from 'react';
 import { Avatar, AvatarProps } from './Avatar.js';
 
@@ -11,6 +10,7 @@ export function AvatarListRoot({
 	count,
 	size = 24,
 	className,
+	...rest
 }: {
 	children: ReactNode;
 	count: number;
@@ -22,11 +22,15 @@ export function AvatarListRoot({
 	return (
 		<AvatarListContext.Provider value={{ size }}>
 			<div
-				className={clsx(
-					'layer-components:(relative flex-basis-auto)',
-					className,
-				)}
-				style={{ width, minWidth: width, height: size }}
+				className={className}
+				style={{
+					position: 'relative',
+					flexBasis: 'auto',
+					width,
+					minWidth: width,
+					height: size,
+				}}
+				{...rest}
 			>
 				{children}
 			</div>
@@ -46,8 +50,9 @@ export function AvatarListItemRoot({
 	const { size } = useContext(AvatarListContext);
 	return (
 		<div
-			className={clsx('layer-components:absolute', className)}
+			className={className}
 			style={{
+				position: 'absolute',
 				left: index === 0 ? 0 : index * ((size * 2) / 3),
 				zIndex: index,
 				top: 0,

package/src/components/box/Box.module.css

@@ -0,0 +1,236 @@
+@layer box {
+	.root {
+		display: flex;
+		position: relative;
+
+		&[data-direction='row'] {
+			flex-direction: row;
+		}
+		&[data-direction='col'] {
+			flex-direction: column;
+		}
+		&[data-direction='row-reverse'] {
+			flex-direction: row-reverse;
+		}
+		&[data-direction='col-reverse'] {
+			flex-direction: column-reverse;
+		}
+
+		&[data-wrap='wrap'],
+		&[data-wrap='true'] {
+			flex-wrap: wrap;
+		}
+		&[data-wrap='nowrap'] {
+			flex-wrap: nowrap;
+		}
+
+		&[data-gap='none'] {
+			gap: 0;
+		}
+		&[data-gap='xs'] {
+			gap: var(--m-spacing-xs);
+		}
+		&[data-gap='sm'] {
+			gap: var(--m-spacing-sm);
+		}
+		&[data-gap='md'],
+		&[data-gap='true'] {
+			gap: var(--m-spacing-md);
+		}
+		&[data-gap='lg'] {
+			gap: var(--m-spacing-lg);
+		}
+		&[data-gap='xl'] {
+			gap: var(--m-spacing-xl);
+		}
+
+		&[data-items='start'] {
+			align-items: flex-start;
+		}
+		&[data-items='center'] {
+			align-items: center;
+		}
+		&[data-items='end'] {
+			align-items: flex-end;
+		}
+		&[data-items='stretch'] {
+			align-items: stretch;
+		}
+		&[data-justify='start'] {
+			justify-content: flex-start;
+		}
+		&[data-justify='center'] {
+			justify-content: center;
+		}
+		&[data-justify='end'] {
+			justify-content: flex-end;
+		}
+		&[data-justify='between'] {
+			justify-content: space-between;
+		}
+		&[data-justify='around'] {
+			justify-content: space-around;
+		}
+		&[data-justify='evenly'] {
+			justify-content: space-evenly;
+		}
+
+		&[data-p='none'] {
+			padding: 0;
+		}
+		&[data-p='xs'] {
+			padding: var(--m-spacing-xs);
+		}
+		&[data-p='sm'] {
+			padding: var(--m-spacing-sm);
+		}
+		&[data-p='md'] {
+			padding: var(--m-spacing-md);
+		}
+		&[data-p='lg'],
+		&[data-p='true'] {
+			padding: var(--m-spacing-lg);
+		}
+		&[data-p='xl'] {
+			padding: var(--m-spacing-xl);
+		}
+
+		&[data-rounded='none'] {
+			border-radius: 0;
+		}
+		&[data-rounded='xs'] {
+			border-radius: var(--m-radius-xs);
+		}
+		&[data-rounded='sm'] {
+			border-radius: var(--m-radius-sm);
+		}
+		&[data-rounded='md'],
+		&[data-rounded='true'] {
+			border-radius: var(--m-radius-md);
+		}
+		&[data-rounded='lg'] {
+			border-radius: var(--m-radius-lg);
+		}
+
+		&[data-w='auto'] {
+			width: auto;
+		}
+		&[data-w='full'] {
+			width: 100%;
+		}
+		&[data-h='auto'] {
+			height: auto;
+		}
+		&[data-h='full'] {
+			height: 100%;
+		}
+
+		&[data-overflow='visible'] {
+			overflow: visible;
+		}
+		&[data-overflow='hidden'] {
+			overflow: hidden;
+		}
+		&[data-overflow='scroll'] {
+			overflow: scroll;
+		}
+		&[data-overflow='auto'] {
+			overflow: auto;
+		}
+		&[data-overflow='clip'] {
+			overflow: clip;
+		}
+		&[data-overflow='auto-y'] {
+			overflow-y: auto;
+			overflow-x: clip;
+		}
+		&[data-overflow='auto-x'] {
+			overflow-x: auto;
+			overflow-y: clip;
+		}
+
+		&[data-border='true'] {
+			@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+		}
+
+		&[data-surface='ambient'],
+		&[data-surface='true'] {
+			@apply --mx-bg(var(--m-surface-ambient-bg));
+			@apply --mx-fg(var(--m-surface-ambient-fg));
+			&[data-border='true'] {
+				@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
+			}
+		}
+		&[data-surface='secondary'] {
+			@apply --mx-bg(var(--m-surface-secondary-bg));
+			@apply --mx-fg(var(--m-surface-secondary-fg));
+			&[data-border='true'] {
+				@apply --mx-borderColor(var(--m-surface-secondary-borderColor));
+			}
+		}
+		&[data-surface='primary'] {
+			@apply --mx-bg(var(--m-surface-primary-bg));
+			@apply --mx-fg(var(--m-surface-primary-fg));
+			&[data-border='true'] {
+				@apply --mx-borderColor(var(--m-surface-primary-borderColor));
+			}
+		}
+
+		&[data-glass='true'] {
+			@apply --mx-bg-faded(80%);
+			@apply --mx-borderColor-faded(80%);
+		}
+
+		&[data-grow='true'] {
+			flex-grow: 1;
+		}
+		&[data-shrink='true'] {
+			flex-shrink: 1;
+		}
+
+		@apply --mx-shadow;
+		--mx-shadow-value: var(--shadow-inset) var(--shadow-x, 0)
+			calc(var(--shadow-y, 0) * var(--shadow-invert, 1)) var(--shadow-blur, 0)
+			var(--shadow-spread, 0) var(--shadow-color, transparent);
+		--shadow-inset: ;
+		&[data-elevated='sm'] {
+			--shadow-x: var(--m-shadow-sm-x);
+			--shadow-y: var(--m-shadow-sm-y);
+			--shadow-blur: var(--m-shadow-sm-blur);
+			--shadow-spread: var(--m-shadow-sm-spread);
+			--shadow-color: var(--m-shadow-sm-color);
+		}
+		&[data-elevated='md'],
+		&[data-elevated='true'] {
+			--shadow-x: var(--m-shadow-md-x);
+			--shadow-y: var(--m-shadow-md-y);
+			--shadow-blur: var(--m-shadow-md-blur);
+			--shadow-spread: var(--m-shadow-md-spread);
+			--shadow-color: var(--m-shadow-md-color);
+		}
+		&[data-elevated='lg'] {
+			--shadow-x: var(--m-shadow-lg-x);
+			--shadow-y: var(--m-shadow-lg-y);
+			--shadow-blur: var(--m-shadow-lg-blur);
+			--shadow-spread: var(--m-shadow-lg-spread);
+			--shadow-color: var(--m-shadow-lg-color);
+		}
+		&[data-elevated='xl'] {
+			--shadow-x: var(--m-shadow-xl-x);
+			--shadow-y: var(--m-shadow-xl-y);
+			--shadow-blur: var(--m-shadow-xl-blur);
+			--shadow-spread: var(--m-shadow-xl-spread);
+			--shadow-color: var(--m-shadow-xl-color);
+		}
+		&[data-shadow-up='true'] {
+			--shadow-invert: -1;
+		}
+		&[data-shadow-inset='true'] {
+			--shadow-inset: inset;
+		}
+
+		&[data-container='true'] {
+			container-type: inline-size;
+		}
+	}
+}

package/src/components/box/Box.stories.tsx

@@ -1,5 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { paletteNames } from '../../uno/index.js';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from '../button/Button.js';
 import { Checkbox } from '../checkbox/Checkbox.js';
 import { Progress } from '../progress/Progress.js';
@@ -53,13 +52,6 @@ const meta = {
 		container: {
 			type: 'boolean',
 		},
-		color: {
-			type: 'string',
-			options: paletteNames,
-			control: {
-				type: 'select',
-			},
-		},
 		children: {
 			table: {
 				disable: true,
@@ -90,70 +82,72 @@ export const Default: Story = {
 	},
 };
 
-export const NestedContainers: Story = {
-	render(args) {
-		return (
-			<Box {...args} p gap container surface color="accent" direction="col">
-				<Box {...args} p gap container surface items="center" color="primary">
-					<Button>Button</Button>
-					<Button>Button</Button>
-					<Box {...args} p gap surface color="attention">
-						<Button>Button</Button>
-						<Button>Button</Button>
-					</Box>
-				</Box>
-				<Box {...args} p gap surface color="gray">
-					<Button>Button</Button>
-					<Button>Button</Button>
-				</Box>
-			</Box>
-		);
-	},
-};
-
 function SurfaceContent({ name }: { name: string }) {
 	return (
 		<>
 			<div>{name} Surface</div>
 			<Box gap layout="center start">
 				<Button emphasis="primary">Primary</Button>
+				<Button emphasis="ghost">Ghost</Button>
 				<Checkbox checked />
 				<Switch checked />
 			</Box>
-			<Progress value={50} className="w-full" />
+			<Progress value={50} style={{ width: '100%' }} />
 			<ToggleGroup defaultValue={['one']}>
 				<ToggleGroup.Item value="one">One</ToggleGroup.Item>
 				<ToggleGroup.Item value="two">Two</ToggleGroup.Item>
 			</ToggleGroup>
-			<Slider defaultValue={[30]} className="w-full" />
+			<Slider defaultValue={[30]} style={{ width: '100%' }} />
 		</>
 	);
 }
 export const Surfaces: Story = {
 	render(args) {
 		return (
-			<div className="grid grid-cols-2 gap-lg bg-wash md:grid-cols-3" {...args}>
-				<Box {...args} surface="white" p="lg" col gap>
-					<SurfaceContent name="White" />
+			<div
+				className="bg-main-wash"
+				style={{
+					display: 'grid',
+					gridTemplateColumns: 'repeat(2, 1fr)',
+					gap: 'var(--m-spacing-lg)',
+				}}
+				{...args}
+			>
+				<Box {...args} surface="ambient" p="lg" col gap>
+					<SurfaceContent name="Ambient" />
 				</Box>
-				<Box {...args} surface color="primary" p="lg" col gap>
+				<Box
+					{...args}
+					surface="primary"
+					className="@mode-primary"
+					p="lg"
+					col
+					gap
+				>
 					<SurfaceContent name="Primary" />
 				</Box>
-				<Box {...args} surface color="accent" p="lg" col gap>
+				<Box
+					{...args}
+					surface="secondary"
+					className="@mode-primary"
+					p="lg"
+					col
+					gap
+				>
+					<SurfaceContent name="Secondary" />
+				</Box>
+				<Box {...args} surface className="@mode-accent" p="lg" col gap>
 					<SurfaceContent name="Accent" />
 				</Box>
-				<Box {...args} surface color="gray" p="lg" col gap>
-					<SurfaceContent name="Gray" />
+				<Box {...args} surface className="@mode-neutral" p="lg" col gap>
+					<SurfaceContent name="Neutral" />
 				</Box>
-				<Box {...args} surface color="attention" p="lg" col gap>
+				<Box {...args} surface className="@mode-attention" p="lg" col gap>
 					<SurfaceContent name="Attention" />
 				</Box>
-				<Box {...args} surface color="success" p="lg" col gap>
+				<Box {...args} surface className="@mode-success" p="lg" col gap>
 					<SurfaceContent name="Success" />
 				</Box>
-				<Box {...args} surface color="high-contrast" p="lg" col gap>
-					<SurfaceContent name="High Contrast" />
-				</Box>
 			</div>
 		);
 	},