@a-type/ui 5.0.22 → 6.0.0

package/src/components/box/Box.tsx

@@ -1,12 +1,7 @@
 import clsx from 'clsx';
 import { Ref } from 'react';
-import {
-	GroupScaleLayer,
-	GroupScaleReset,
-	useGroupScaleStyles,
-} from '../../systems/GroupScale.js';
-import { PaletteName } from '../../uno/index.js';
 import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
+import cls from './Box.module.css';
 
 export type BoxAlignment = 'center' | 'stretch' | 'start' | 'end';
 export type BoxJustification =
@@ -18,24 +13,6 @@ export type BoxJustification =
 	| 'around'
 	| 'end';
 export type BoxSpacingSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type BoxResponsive<T> =
-	| T
-	| {
-			default?: T;
-			sm?: T;
-			md?: T;
-			lg?: T;
-	  };
-
-function isResponsive<T>(
-	value: BoxResponsive<T>,
-): value is { sm?: T; md?: T; lg?: T } {
-	return typeof value === 'object';
-}
-
-function hasDefault<T>(value: BoxResponsive<T>, val: T) {
-	return value === val || (isResponsive(value) && value.default === val);
-}
 
 type ShadowSize = 'sm' | 'md' | 'lg' | 'xl';
 type MaybeMinus = '' | '-';
@@ -44,25 +21,25 @@ type ShadowValue = `${MaybeMinus}${ShadowSize}${MaybeUp}`;
 
 export interface BoxProps extends Omit<SlotDivProps, 'wrap'> {
 	className?: string;
-	direction?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
-	d?: BoxResponsive<'row' | 'col' | 'row-reverse' | 'col-reverse'>;
+	direction?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
+	d?: 'row' | 'col' | 'row-reverse' | 'col-reverse';
 	col?: boolean;
 	items?: BoxAlignment;
 	justify?: BoxJustification;
 	layout?: `${BoxAlignment} ${BoxJustification}`;
 	gap?: BoxSpacingSize | boolean;
-	wrap?: BoxResponsive<boolean>;
-	p?: BoxResponsive<BoxSpacingSize | boolean>;
-	container?: boolean | 'reset';
-	surface?: boolean | 'white';
-	color?: PaletteName;
+	wrap?: boolean;
+	p?: BoxSpacingSize | boolean;
+	surface?: boolean | 'ambient' | 'secondary' | 'primary';
 	border?: boolean;
 	full?: boolean | 'width' | 'height';
-	overflow?: 'hidden' | 'auto' | 'auto-x' | 'auto-y';
+	overflow?: 'hidden' | 'clip' | 'auto' | 'auto-x' | 'auto-y';
 	grow?: boolean;
 	elevated?: ShadowValue;
-	rounded?: 'sm' | 'md' | 'lg' | 'xl' | boolean;
+	rounded?: 'xs' | 'sm' | 'md' | 'lg' | boolean;
 	ref?: Ref<HTMLDivElement>;
+	container?: boolean;
+	glass?: boolean;
 }
 
 export function Box({
@@ -70,32 +47,29 @@ export function Box({
 	items: itemsSolo,
 	justify: justifySolo,
 	layout: align,
-	gap = 'none',
+	gap,
 	wrap,
-	p = 'none',
-	d = 'row',
+	p,
+	col,
+	d = col ? 'col' : undefined,
 	direction = d,
+	style,
 	container,
-	style: userStyle,
 	surface,
 	color,
 	border,
 	full,
 	overflow,
-	col,
 	grow,
 	elevated,
-	rounded,
+	rounded = surface ? true : undefined,
+	glass,
 	ref,
 	...rest
 }: BoxProps) {
-	const style = useGroupScaleStyles(
-		userStyle,
-		container === 'reset' ? 1 : undefined,
-	);
-
 	const items = itemsSolo ?? align?.split(' ')[0];
 	const justify = justifySolo ?? align?.split(' ')[1];
+	const [inset, elevation, up] = parseElevated(elevated);
 
 	const main = (
 		<SlotDiv
@@ -104,126 +78,48 @@ export function Box({
 			style={style}
 			className={clsx(
 				'layer-components:relative layer-components:flex',
-				color && `palette-${color}`,
-				{
-					'layer-components:flex-row': hasDefault(direction, 'row') && !col,
-					'layer-components:flex-col': hasDefault(direction, 'col') || col,
-					'layer-components:flex-row-reverse': hasDefault(
-						direction,
-						'row-reverse',
-					),
-					'layer-components:flex-col-reverse': hasDefault(
-						direction,
-						'col-reverse',
-					),
-					'layer-components:sm:flex-row':
-						isResponsive(direction) && direction.sm === 'row',
-					'layer-components:sm:flex-col':
-						isResponsive(direction) && direction.sm === 'col',
-					'layer-components:sm:flex-row-reverse':
-						isResponsive(direction) && direction.sm === 'row-reverse',
-					'layer-components:sm:flex-col-reverse':
-						isResponsive(direction) && direction.sm === 'col-reverse',
-					'layer-components:md:flex-row':
-						isResponsive(direction) && direction.md === 'row',
-					'layer-components:md:flex-col':
-						isResponsive(direction) && direction.md === 'col',
-					'layer-components:md:flex-row-reverse':
-						isResponsive(direction) && direction.md === 'row-reverse',
-					'layer-components:md:flex-col-reverse':
-						isResponsive(direction) && direction.md === 'col-reverse',
-					'layer-components:lg:flex-row':
-						isResponsive(direction) && direction.lg === 'row',
-					'layer-components:lg:flex-col':
-						isResponsive(direction) && direction.lg === 'col',
-					'layer-components:lg:flex-row-reverse':
-						isResponsive(direction) && direction.lg === 'row-reverse',
-					'layer-components:lg:flex-col-reverse':
-						isResponsive(direction) && direction.lg === 'col-reverse',
-					'layer-components:flex-wrap': hasDefault(wrap, true),
-					'layer-components:sm:flex-wrap': isResponsive(wrap) && wrap.sm,
-					'layer-components:md:flex-wrap': isResponsive(wrap) && wrap.md,
-					'layer-components:lg:flex-wrap': isResponsive(wrap) && wrap.lg,
-					'layer-components:gap-xs': gap === 'xs',
-					'layer-components:gap-sm': gap === 'sm',
-					'layer-components:gap-md': gap === 'md' || gap === true,
-					'layer-components:gap-lg': gap === 'lg',
-					'layer-components:gap-xl': gap === 'xl',
-					'layer-components:items-center': items === 'center',
-					'layer-components:items-stretch': items === 'stretch',
-					'layer-components:items-start': items === 'start',
-					'layer-components:items-end': items === 'end',
-					'layer-components:justify-center': justify === 'center',
-					'layer-components:[justify-content:safe_center]':
-						justify === 'safe-center',
-					'layer-components:justify-stretch': justify === 'stretch',
-					'layer-components:justify-start': justify === 'start',
-					'layer-components:justify-end': justify === 'end',
-					'layer-components:justify-between': justify === 'between',
-					'layer-components:justify-around': justify === 'around',
-					'layer-components:p-xs': hasDefault(p, 'xs'),
-					'layer-components:p-sm': hasDefault(p, 'sm'),
-					'layer-components:p-md': hasDefault(p, 'md') || hasDefault(p, true),
-					'layer-components:p-lg': hasDefault(p, 'lg'),
-					'layer-components:p-xl': hasDefault(p, 'xl'),
-					'layer-components:sm:p-xs': isResponsive(p) && p.sm === 'xs',
-					'layer-components:sm:p-sm': isResponsive(p) && p.sm === 'sm',
-					'layer-components:sm:p-md': isResponsive(p) && p.sm === 'md',
-					'layer-components:sm:p-lg': isResponsive(p) && p.sm === 'lg',
-					'layer-components:sm:p-xl': isResponsive(p) && p.sm === 'xl',
-					'layer-components:md:p-xs': isResponsive(p) && p.md === 'xs',
-					'layer-components:md:p-sm': isResponsive(p) && p.md === 'sm',
-					'layer-components:md:p-md': isResponsive(p) && p.md === 'md',
-					'layer-components:md:p-lg': isResponsive(p) && p.md === 'lg',
-					'layer-components:md:p-xl': isResponsive(p) && p.md === 'xl',
-					'layer-components:lg:p-xs': isResponsive(p) && p.lg === 'xs',
-					'layer-components:lg:p-sm': isResponsive(p) && p.lg === 'sm',
-					'layer-components:lg:p-md': isResponsive(p) && p.lg === 'md',
-					'layer-components:lg:p-lg': isResponsive(p) && p.lg === 'lg',
-					'layer-components:lg:p-xl': isResponsive(p) && p.lg === 'xl',
-
-					'layer-components:rounded-sm': rounded === 'sm',
-					'layer-components:rounded-md': rounded === 'md',
-					'layer-components:rounded-lg':
-						rounded === 'lg' ||
-						rounded === true ||
-						(rounded === undefined && (surface || border)),
-					'layer-components:rounded-xl': rounded === 'xl',
-
-					'layer-components:(color-black bg-white border-gray-dark)':
-						surface === 'white',
-					'layer-components:(color-main-ink bg-main-wash border-main-dark)':
-						surface === true,
-
-					'layer-components:(border border-solid)': border,
-					'layer-components:w-full': full === true || full === 'width',
-					'layer-components:h-full': full === true || full === 'height',
-					'layer-components:overflow-hidden': overflow === 'hidden',
-					'layer-components:overflow-auto': overflow === 'auto',
-					'layer-components:(overflow-y-hidden overflow-x-auto)':
-						overflow === 'auto-x',
-					'layer-components:(overflow-x-hidden overflow-y-auto)':
-						overflow === 'auto-y',
-					'layer-components:flex-grow': grow,
-					'layer-components:@container': container === true,
-					'layer-components:shadow-sm': elevated?.includes('sm'),
-					'layer-components:shadow-md': elevated?.includes('md'),
-					'layer-components:shadow-lg': elevated?.includes('lg'),
-					'layer-components:shadow-xl': elevated?.includes('xl'),
-					'layer-components:shadow-inset': elevated?.startsWith('-'),
-					'layer-components:(shadow-up)': elevated?.endsWith('-up'),
-				},
+				color && `@mode-${color}`,
+				cls.root,
 				className,
 			)}
+			data-direction={direction}
+			data-gap={gap}
+			data-items={items}
+			data-justify={justify}
+			data-wrap={wrap}
+			data-p={p}
+			data-rounded={rounded}
+			data-surface={surface}
+			data-border={border}
+			data-full={full}
+			data-overflow={overflow}
+			data-grow={grow}
+			data-elevated={elevation}
+			data-shadow-up={up}
+			data-shadow-inset={inset}
+			data-container={container}
+			data-glass={glass}
 		/>
 	);
 
-	if (container || p) {
-		if (container === 'reset') {
-			return <GroupScaleReset>{main}</GroupScaleReset>;
-		}
-		return <GroupScaleLayer>{main}</GroupScaleLayer>;
+	return main;
+}
+
+function parseElevated(elevated?: ShadowValue) {
+	if (!elevated) return [false, false, false] as const;
+
+	const match = elevated.match(/^(-)?(sm|md|lg|xl)(-up)?$/);
+	if (!match) {
+		console.warn(
+			`Invalid elevated value: ${elevated}. Expected format: "[-]size[-up]", where size is one of "sm", "md", "lg", "xl".`,
+		);
+		return [false, false, false] as const;
 	}
 
-	return main;
+	const [, minus, size, up] = match;
+	const inset = minus === '-';
+	const elevation = size as ShadowSize;
+	const isUp = up === '-up';
+
+	return [inset, elevation, isUp] as const;
 }

package/src/components/button/Button.module.css

@@ -0,0 +1,126 @@
+.root {
+	user-select: none;
+	appearance: none;
+	cursor: pointer;
+	transition: all var(--m-duration) var(--m-easing);
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-sm);
+	align-self: center;
+
+	position: relative;
+	overflow: visible;
+	white-space: nowrap;
+
+	@apply --mx-action-secondary;
+
+	font-size: var(--m-text-secondary-size);
+	line-height: 1;
+	font-family: inherit;
+	font-weight: 500;
+
+	@apply --mx-shadow(var(--m-shadow-sm));
+	@apply --mx-ring;
+
+	&[data-emphasis='primary'] {
+		@apply --mx-action-primary;
+	}
+	&[data-emphasis='light'] {
+		@apply --mx-action-light;
+	}
+	&[data-emphasis='default'] {
+		@apply --mx-action-secondary;
+	}
+	&[data-emphasis='ghost'] {
+		@apply --mx-action-ambient;
+		--mx-ring-value: 0 0 0 0 transparent;
+		--mx-shadow-value: 0 0 0 0 transparent;
+
+		font-weight: 600;
+
+		&:hover,
+		&:focus {
+			--mx-bg-applied: inherit;
+			--mx-bg-ref: --fn-color-heavier(
+				color-mix(var(--mx-bg-applied), var(--m-color-main-light) 10%),
+				1
+			);
+		}
+	}
+	&[data-emphasis='ghost'],
+	&[data-emphasis='default'] {
+		&[aria-pressed='true'] {
+			@apply --mx-bg(var(--m-color-main-light));
+		}
+	}
+
+	&[data-has-icon='true'][data-has-label='false']:not(
+			[data-disable-icon-mode='true']
+		):not([data-size='wrapper']),
+	&[data-force-icon-mode='true']:not([data-size='wrapper']) {
+		padding: var(--m-spacing-md);
+
+		&[data-size='small'] {
+			padding: var(--m-spacing-sm);
+		}
+
+		&:not([aria-pressed='true']) {
+			aspect-ratio: 1/1;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	&[data-size='small'] {
+		min-height: --fn-literal(28px);
+	}
+	&[data-size='wrapper'] {
+		padding: 0;
+		width: fit-content;
+	}
+
+	@apply --mx-hover;
+	@apply --mx-active;
+	@apply --mx-focus;
+	@apply --mx-disabled;
+
+	/* Always turn off background for toggleable buttons that aren't pressed */
+	&[data-toggleable='true'][aria-pressed='false']:not(:hover) {
+		@apply --mx-bg(transparent);
+		--mx-bg-contrast: var(--m-global-trueLightColor);
+	}
+}
+
+.unstyled {
+	@apply --mx-bg(transparent);
+	margin: 0;
+	padding: 0;
+	appearance: none;
+	border: none;
+	cursor: pointer;
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		box-shadow: 0 0 0 4px var(--m-color-main-ink);
+	}
+}
+
+.icon {
+	display: flex;
+	flex-shrink: 0;
+}
+
+.toggleIndicator {
+	width: 0;
+	transition: width var(--m-duration) var(--m-easing);
+
+	&[data-open='true'] {
+		width: --fn-literal(15px);
+	}
+	&[data-open='false'] {
+		margin-left: calc(-1 * var(--m-spacing-sm));
+	}
+}

package/src/components/button/Button.stories.tsx

@@ -1,21 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-import { paletteNames } from '../../uno/index.js';
 import { Avatar } from '../avatar/Avatar.js';
 import { Box } from '../box/Box.js';
 import { Icon } from '../icon/index.js';
-import { Button } from './Button.js';
+import { Button, ButtonProps } from './Button.js';
 import { ConfirmedButton } from './ConfirmedButton.js';
 
 const meta = {
 	title: 'Components/Button',
 	component: Button,
-	argTypes: {
-		color: {
-			control: 'select',
-			options: paletteNames,
-		},
-	},
 	parameters: {
 		controls: { expanded: true },
 	},
@@ -37,13 +30,16 @@ type Story = StoryObj<typeof Button>;
 export const Default: Story = {
 	render: (args) => {
 		return (
-			<Box col gap>
+			<Box col gap wrap full="width">
 				<Box gap items="center">
 					<Button {...args} />
 					<Button {...args}>
 						<Icon name="placeholder" />
 						{args.children}
 					</Button>
+					<Button {...args} disabled>
+						Disabled
+					</Button>
 					<Button {...args} size="small" />
 					<Button {...args} size="wrapper">
 						<Button.Icon render={<Avatar name="A" />} />
@@ -51,6 +47,9 @@ export const Default: Story = {
 					<Button {...args}>
 						<Icon name="placeholder" />
 					</Button>
+					<Button {...args} size="small">
+						<Icon name="placeholder" />
+					</Button>
 				</Box>
 				<Box gap items="center">
 					<Button {...args} emphasis="primary">
@@ -65,7 +64,7 @@ export const Default: Story = {
 					<Button {...args} emphasis="ghost">
 						Ghost
 					</Button>
-					<Button {...args} emphasis="contrast">
+					<Button {...args} emphasis="primary" className="@mode-inverted">
 						Contrast
 					</Button>
 				</Box>
@@ -74,6 +73,67 @@ export const Default: Story = {
 	},
 };
 
+function ButtonStack({ emphasis }: { emphasis: ButtonProps['emphasis'] }) {
+	return (
+		<Box col gap>
+			<Button emphasis={emphasis}>Button</Button>
+			<Button emphasis={emphasis}>
+				<Icon name="placeholder" />
+				Icon
+			</Button>
+			<Button emphasis={emphasis} disabled>
+				Disabled
+			</Button>
+			<Button emphasis={emphasis} size="small">
+				Small
+			</Button>
+			<Button emphasis={emphasis} size="wrapper">
+				<Button.Icon
+					render={<Avatar imageSrc="https://i.pravatar.cc/300" name="Avatar" />}
+				/>
+			</Button>
+			<Button emphasis={emphasis}>
+				<Icon name="placeholder" />
+			</Button>
+			<Button emphasis={emphasis} size="small">
+				<Icon name="placeholder" />
+			</Button>
+		</Box>
+	);
+}
+export const AllButtons: Story = {
+	render() {
+		return (
+			<Box col gap>
+				<Box gap justify="between">
+					{['primary', 'light', 'default', 'ghost'].map((emphasis) => (
+						<ButtonStack
+							key={emphasis}
+							emphasis={emphasis as ButtonProps['emphasis']}
+						/>
+					))}
+				</Box>
+				<Box gap surface justify="between" className="@mode-success">
+					{['primary', 'light', 'default', 'ghost'].map((emphasis) => (
+						<ButtonStack
+							key={emphasis}
+							emphasis={emphasis as ButtonProps['emphasis']}
+						/>
+					))}
+				</Box>
+				<Box gap surface justify="between" className="@mode-attention">
+					{['primary', 'light', 'default', 'ghost'].map((emphasis) => (
+						<ButtonStack
+							key={emphasis}
+							emphasis={emphasis as ButtonProps['emphasis']}
+						/>
+					))}
+				</Box>
+			</Box>
+		);
+	},
+};
+
 export const WithIcon: Story = {
 	args: {
 		children: (
@@ -125,8 +185,15 @@ export const ToggledIcon: Story = {
 export const Alignment: Story = {
 	render(args) {
 		return (
-			<div className="col">
-				<div className="row border-default">
+			<div style={{ display: 'flex', flexDirection: 'column' }}>
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'row',
+						borderStyle: 'solid',
+						borderWidth: 1,
+					}}
+				>
 					<Button {...args} size="small">
 						Button
 					</Button>
@@ -134,7 +201,14 @@ export const Alignment: Story = {
 						<Icon name="placeholder" />
 					</Button>
 				</div>
-				<div className="row border-default">
+				<div
+					style={{
+						display: 'flex',
+						flexDirection: 'row',
+						borderStyle: 'solid',
+						borderWidth: 1,
+					}}
+				>
 					<Button {...args}>Button</Button>
 					<Button {...args}>
 						<Icon name="placeholder" />