@a-type/ui 5.0.21 → 6.0.0

package/src/components/toasts/toasts.module.css

@@ -0,0 +1,201 @@
+.toaster {
+	pointer-events: none;
+	overflow: clip;
+}
+
+.toast {
+	--gap: var(--m-spacing-sm);
+	--peek: var(--m-spacing-sm);
+	--scale: calc(max(0, 1 - var(--toast-index) * 0.1));
+	--height: var(--toast-frontmost-height, var(--toast-height));
+	--shrink: calc(1 - var(--scale));
+	--offset-y: calc(
+		var(--toast-offset-y) + calc(var(--toast-index) * var(--gap)) +
+			var(--toast-swipe-movement-y)
+	);
+
+	/* basic positioning */
+	position: fixed;
+	left: auto;
+	top: var(--m-spacing-xs);
+	z-index: calc(100000 - var(--toast-index));
+	margin-right: 0;
+	width: 100%;
+	transform-origin: top;
+	/* all toasts copy height of frontmost */
+	height: var(--height);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: var(--m-spacing-xs);
+
+	/* styling happens in content element */
+
+	/* misc */
+	pointer-events: none;
+	user-select: none;
+
+	/* animation and interaction */
+	transform: translateX(var(--toast-swipe-movement-x))
+		translateY(
+			calc(var(--toast-swipe-movement-y) + var(--toast-index) * var(--peek)) +
+				(var(--shrink) * var(--height))
+		)
+		scale(var(--scale));
+	transition:
+		transform var(--m-duration) var(--m-easing),
+		opacity var(--m-duration) var(--m-easing),
+		height var(--m-duration-short) var(--m-easing);
+
+	&::after {
+		position: absolute;
+		content: '';
+		left: 0;
+		top: 100%;
+		height: --fn-literal(calc(var(--gap) + 1px));
+		width: 100%;
+	}
+
+	&[data-limited] {
+		opacity: 0;
+	}
+	&[data-expanded] {
+		height: var(--toast-height);
+		transform: translateX(var(--toast-swipe-movement-x))
+			translateY(var(--offset-y)) scale(1);
+	}
+
+	&[data-starting-style] {
+		transform: translateY(-150%);
+	}
+	&[data-ending-style] {
+		opacity: 0;
+
+		&[data-swipe-direction='up'] {
+			transform: translateY(calc(var(--toast-swipe-movement-y) - 150%));
+		}
+		&[data-swipe-direction='down'] {
+			transform: translateY(calc(var(--toast-swipe-movement-y) + 150%));
+		}
+		&[data-swipe-direction='left'] {
+			transform: translateX(calc(var(--toast-swipe-movement-x) - 150%))
+				translateY(var(--offset-y));
+		}
+		&[data-swipe-direction='right'] {
+			transform: translateX(calc(var(--toast-swipe-movement-x) + 150%))
+				translateY(var(--offset-y));
+		}
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		box-shadow: --fn-focus-ring();
+	}
+}
+
+.toastContent {
+	max-width: 400px;
+	pointer-events: auto;
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-sm);
+
+	&[data-behind]:not([data-expanded]) {
+		pointer-events: none;
+	}
+}
+
+.toastMain {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+
+	@apply --mx-shadow(var(--m-shadow-md));
+	@apply --mx-surface-secondary;
+
+	padding-inline-start: var(--m-spacing-md);
+	padding-inline-end: var(--m-spacing-sm);
+	padding-block: var(--m-spacing-sm);
+	gap: var(--m-spacing-sm);
+
+	[data-behind]:not([data-expanded]) & {
+		max-height: var(--height);
+		@apply --mx-bg-heavier(2);
+	}
+}
+
+.toastMainBody {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-xs);
+	@apply --mx-fg(inherit);
+
+	transition: opacity var(--m-duration) var(--m-easing);
+
+	/* Hide content when not in front */
+	[data-behind]:not([data-expanded]) & {
+		opacity: 0;
+	}
+
+	[data-expanded] & {
+		opacity: 1;
+	}
+}
+
+.toastMainBodyContent {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-xs);
+	@apply --mx-fg(inherit);
+}
+
+.toastTitle {
+	@apply --mx-fg(inherit);
+	@apply --mx-text-secondary;
+	font-weight: var(--m-typography-weight-bold);
+	margin: 0;
+}
+
+.toastDescriptionRow {
+	display: flex;
+	gap: var(--m-spacing-sm);
+}
+
+.icon {
+	position: relative;
+	top: --fn-literal(4px);
+}
+
+.toastDescription {
+	margin: 0;
+	@apply --mx-fg(inherit);
+	@apply --mx-text-ambient;
+}
+
+.toastClose {
+	margin-block-end: auto;
+
+	[data-behind]:not([data-expanded]) & {
+		visibility: hidden;
+	}
+}
+
+.toastActions {
+	margin-inline-start: auto;
+	display: flex;
+	align-items: center;
+	gap: var(--m-spacing-xs);
+
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: var(--m-text-ambient-weight);
+
+	transition: opacity var(--m-duration) var(--m-easing);
+
+	[data-behind]:not([data-expanded]) & {
+		opacity: 0;
+	}
+}

package/src/components/toasts/toasts.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 { Button } from '../button/Button.js';
 import { toast } from './toasts.js';
@@ -35,7 +35,8 @@ export const Default: Story = {
 					Show Default Toast
 				</Button>
 				<Button
-					color="success"
+					className="@mode-success"
+					emphasis="light"
 					onClick={() => {
 						toast.success('This is a success toast!', {
 							duration: 20_000,
@@ -45,7 +46,8 @@ export const Default: Story = {
 					Show Success Toast
 				</Button>
 				<Button
-					color="attention"
+					className="@mode-attention"
+					emphasis="light"
 					onClick={() => {
 						toast.error('This is an error toast!', {
 							duration: 20_000,
@@ -122,6 +124,19 @@ export const Default: Story = {
 				>
 					Show Rich Toast
 				</Button>
+				<Button
+					onClick={() => {
+						toast({
+							id: 'unique-toast-id',
+							title: 'Unique Toast',
+							description:
+								"This toast has a unique ID. If you click the button multiple times, it won't create multiple toasts, but will update the existing one.",
+							timeout: 20_000,
+						});
+					}}
+				>
+					Show Unique Toast
+				</Button>
 			</Box>
 		);
 	},

package/src/components/toasts/toasts.tsx

@@ -6,10 +6,10 @@ import {
 } from '@base-ui/react/toast';
 import clsx from 'clsx';
 import { ReactNode } from 'react';
-import { useResolvedColorMode } from '../../colorMode.js';
 import { Button, ButtonProps } from '../button/index.js';
 import { Icon } from '../icon/Icon.js';
 import { Spinner } from '../spinner/Spinner.js';
+import cls from './toasts.module.css';
 
 export const manager = Toast.createToastManager();
 
@@ -30,7 +30,7 @@ export const DefaultToastProvider = ({
 export function Toaster() {
 	return (
 		<Toast.Portal>
-			<Toast.Viewport className="pointer-events-none overflow-clip">
+			<Toast.Viewport className={cls.toaster}>
 				<ToastList />
 			</Toast.Viewport>
 		</Toast.Portal>
@@ -39,8 +39,6 @@ export function Toaster() {
 
 function ToastList() {
 	const { toasts: untypedToasts } = Toast.useToastManager();
-	const mode = useResolvedColorMode();
-
 	const toasts = untypedToasts as Array<ToastObject<CustomToastData>>;
 
 	return toasts.map((toast) => (
@@ -49,89 +47,36 @@ function ToastList() {
 			toast={toast}
 			swipeDirection={['up', 'right', 'left']}
 			className={clsx(
-				// variable setup
-				'[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))]',
-				'[--height:var(--toast-frontmost-height,var(--toast-height))] [--shrink:calc(1-var(--scale))]',
-				'[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]',
-				// basic positioning
-				'fixed left-0 left-auto top-xs z-[calc(100000-var(--toast-index))] mr-0 w-full origin-top',
-				'h-[--height]',
-				'flex flex-col items-center gap-xs',
-				// other properties
-				'pointer-events-none select-none',
-				// animation and interaction
-				'translate-x-[--toast-swipe-movement-x] translate-y-[calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height)))] scale-[var(--scale)]',
-				'[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]',
-				// ::after
-				'after:(absolute left-0 top-full h-[calc(var(--gap)+1px)] w-full content-empty)',
-				// starting style
-				'data-[starting-style]:(-translate-y-150%)',
-				// limited
-				'data-[limited]:opacity-0',
-				//expanded
-				'data-[expanded]:(h-[--toast-height] translate-x-[--toast-swipe-movement-x] translate-y-[--offset-y] scale-100)',
-				// ending styles
-				'data-[ending-style]:(opacity-0)',
-				// natural or close button
-				'[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:(scale-90 opacity-50 -translate-y-150%)',
-				// swiping down
-				'data-[ending-style]:data-[swipe-direction=down]:(translate-y-[calc(var(--toast-swipe-movement-y)+150%)])',
-				'data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:(translate-y-[calc(var(--toast-swipe-movement-y)+150%)])',
-				// swiping left
-				'data-[ending-style]:data-[swipe-direction=left]:(translate-x-[calc(var(--toast-swipe-movement-x)-150%)] translate-y-[var(--offset-y)])',
-				'data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:(translate-x-[calc(var(--toast-swipe-movement-x)-150%)] translate-y-[var(--offset-y)])',
-				// swiping right
-				'data-[ending-style]:data-[swipe-direction=right]:(translate-x-[calc(var(--toast-swipe-movement-x)+150%)] translate-y-[var(--offset-y)])',
-				'data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:(translate-x-[calc(var(--toast-swipe-movement-x)+150%)] translate-y-[var(--offset-y)])',
-				// swiping up
-				'data-[ending-style]:data-[swipe-direction=up]:(translate-y-[calc(var(--toast-swipe-movement-y)-150%)])',
-				'data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:(translate-y-[calc(var(--toast-swipe-movement-y)-150%)])',
+				cls.toast,
 				// themeing
+				'@mode-inverted',
 				{
-					'palette-success': toast.type === 'success',
-					'palette-attention': toast.type === 'error',
-					'palette-info': toast.type === 'blank',
+					'@mode-success': toast.type === 'success',
+					'@mode-attention': toast.type === 'error',
 				},
-				mode === 'dark' ? 'override-light' : 'override-dark',
+				'@mode-dense',
 			)}
 		>
-			<Toast.Content className="pointer-events-auto max-w-sm flex flex-col gap-2px [&[data-behind]:not([data-expanded])]:pointer-events-none">
-				<div
-					className={clsx(
-						'layer-components:(relative b-1 rounded-md b-solid py-sm pl-md pr-sm shadow-md color-black bg-main-wash b-black)',
-						'layer-components:(flex flex-row gap-sm)',
-						'[[data-behind]:not([data-expanded])_&]:(max-h-[--height] bg-darken-2)',
-					)}
-				>
-					<div
-						className={clsx(
-							'flex flex-row items-center gap-xs',
-							'[transition-duration:250ms] transition-opacity [[data-behind]:not([data-expanded])_&]:(opacity-0) [[data-expanded]_&]:(opacity-100)',
-						)}
-					>
-						<div className="flex flex-col gap-xs">
-							<Toast.Title className="m-0 text-sm font-bold leading-tight" />
-							<div className="flex gap-sm">
+			<Toast.Content className={cls.toastContent}>
+				<div className={cls.toastMain}>
+					<div className={cls.toastMainBody}>
+						<div className={cls.toastMainBodyContent}>
+							<Toast.Title className={cls.toastTitle}>
+								{toast.title}
+							</Toast.Title>
+							<div className={cls.toastDescriptionRow}>
 								{toast.data?.loading ? (
-									<Spinner size={15} className="relative top-2px" />
+									<Spinner size={15} className={cls.icon} />
 								) : toast.type === 'success' ? (
-									<Icon
-										name="check"
-										color="success"
-										className="relative top-2px"
-									/>
+									<Icon name="check" color="success" className={cls.icon} />
 								) : toast.type === 'error' ? (
-									<Icon
-										name="warning"
-										color="attention"
-										className="relative top-2px"
-									/>
+									<Icon name="warning" color="attention" className={cls.icon} />
 								) : null}
-								<Toast.Description className="m-0 text-sm" />
+								<Toast.Description className={cls.toastDescription} />
 							</div>
 						</div>
 						<Toast.Close
-							className="mb-auto [[data-behind]:not([data-expanded])_&]:(invisible)"
+							className={cls.toastClose}
 							aria-label="Close"
 							render={
 								<Button size="small" emphasis="ghost">
@@ -142,11 +87,10 @@ function ToastList() {
 					</div>
 				</div>
 				{toast.data?.actions && (
-					<div className="ml-auto flex items-center gap-xxs transition-opacity [[data-behind]:not([data-expanded])_&]:(opacity-0)">
+					<div className={clsx('@mode-denser', cls.toastActions)}>
 						{toast.data.actions.toReversed().map((action, index: number) => (
 							<Toast.Action
 								key={index}
-								className="text-xs"
 								onClick={action.onClick}
 								render={
 									<Button
@@ -210,6 +154,7 @@ function baseToast(
 	maybeOptions?: ToastOptions,
 ) {
 	const finalOptions = toOptions(messageOrOptions, maybeOptions);
+	console.log('finalOptions', finalOptions);
 	return manager.add(finalOptions);
 }
 

package/src/components/toggleGroup/toggleGroup.module.css

@@ -0,0 +1,55 @@
+.root {
+	width: fit-content;
+	display: inline-flex;
+	gap: var(--m-spacing-sm);
+	border-radius: var(--m-radius-lg);
+
+	@apply --mx-bg(--fn-color-faded(var(--m-color-main-light), 20%));
+}
+
+.item {
+	display: flex;
+	cursor: pointer;
+	align-items: center;
+	justify-content: center;
+	white-space: nowrap;
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-fg(var(--m-color-neutral-ink));
+
+	padding: var(--m-action-padding);
+
+	@apply --mx-borderColor(transparent);
+	border-radius: var(--m-radius-lg);
+
+	&[data-pressed] {
+		@apply --mx-shadow;
+		--mx-shadow-value: var(--m-shadow-sm);
+		@apply --mx-bg(var(--m-color-main));
+		@apply --mx-borderColor(var(--m-color-neutral-ink));
+	}
+
+	&:not([data-pressed]) {
+		@apply --mx-bg(--fn-color-faded(var(--m-color-neutral), 30%));
+	}
+
+	&:hover:not([data-pressed]) {
+		@apply --mx-bg-lighter(2);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
+		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 20%));
+	}
+
+	&:active:not([data-pressed]) {
+		@apply --mx-bg-lighter(1);
+		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 4px);
+		@apply --mx-borderColor(--fn-color-faded(var(--m-color-main-ink), 30%));
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+}

package/src/components/toggleGroup/toggleGroup.stories.tsx

@@ -1,10 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { ToggleGroup } from './toggleGroup.js';
 
 const meta = {
 	title: 'Components/ToggleGroup',
 	component: ToggleGroup,
-	argTypes: {},
+	argTypes: {
+		multiple: {
+			type: 'boolean',
+		},
+	},
 	parameters: {
 		controls: { expanded: true },
 	},

package/src/components/toggleGroup/toggleGroup.tsx

@@ -4,19 +4,10 @@ import {
 	ToggleGroupProps,
 } from '@base-ui/react/toggle-group';
 import { withClassName } from '../../hooks/withClassName.js';
+import cls from './toggleGroup.module.css';
 
-const ToggleGroupRoot = withClassName(
-	ToggleGroupPrimitive,
-	'layer-components:(w-fit inline-flex gap-sm rounded-lg bg-main-light/20)',
-);
-export const ToggleGroupItem = withClassName(
-	TogglePrimitive,
-	'layer-components:(flex cursor-pointer items-center justify-center border-1 rounded-lg border-solid px-md py-sm text-nowrap transition-all color-black bg-gray/30 border-transparent)',
-	'layer-components:hover:(ring-2 bg-lighten-2 border-main-ink/20 ring-bg)',
-	'layer-components:active:(ring-4 bg-darken-1 border-main-ink/30)',
-	'layer-components:foc',
-	'layer-components:data-[pressed]:(border-default shadow-sm bg-main hover:border-default)',
-);
+const ToggleGroupRoot = withClassName(ToggleGroupPrimitive, cls.root);
+export const ToggleGroupItem = withClassName(TogglePrimitive, cls.item);
 
 export type { ToggleGroupProps };
 export const ToggleGroup = Object.assign(ToggleGroupRoot, {

package/src/components/tooltip/Tooltip.module.css

@@ -0,0 +1,72 @@
+.popup {
+	position: relative;
+	display: flex;
+	user-select: none;
+
+	padding: var(--m-surface-padding);
+	border-radius: var(--m-surface-radius);
+
+	font-size: var(--m-text-ambient-size);
+
+	transition:
+		opacity 0.2s ease,
+		transform 0.2s ease;
+
+	transform-origin: var(--transform-origin);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: var(--m-shadow-sm);
+
+	&[data-color='contrast'] {
+		@apply --mx-fg(var(--m-color-neutral-paper));
+		@apply --mx-bg(var(--m-color-neutral-ink));
+	}
+
+	&[data-color='white'],
+	&[data-color='neutral'] {
+		@apply --mx-fg(var(--m-color-neutral-ink));
+		@apply --mx-bg(var(--m-color-neutral-paper));
+		@apply --mx-borderColor(var(--m-color-neutral));
+		border-style: solid;
+		border-width: var(--m-lineWidth-sm);
+	}
+
+	&[data-color='attention'] {
+		@apply --mx-bg(var(--m-color-main-heavy));
+		@apply --mx-fg(var(--m-color-neutral-paper));
+	}
+
+	opacity: 0;
+	transform: scale(0.95);
+	&[data-open] {
+		opacity: 1;
+		transform: scale(1);
+	}
+
+	&[data-instant] {
+		transition: none;
+	}
+
+	--y: 0px;
+	--x: 0px;
+	transform: translate(var(--x), var(--y));
+
+	&[data-starting-style] {
+		opacity: 0;
+		&[data-side='bottom'] {
+			--y: 4px;
+		}
+		&[data-side='top'] {
+			--y: -4px;
+		}
+		&[data-side='left'] {
+			--x: -4px;
+		}
+		&[data-side='right'] {
+			--x: 4px;
+		}
+	}
+	&[data-ending-style] {
+		opacity: 0;
+	}
+}

package/src/components/tooltip/Tooltip.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 { Button } from '../button/index.js';
 import { Tooltip } from './Tooltip.js';
@@ -9,7 +9,7 @@ const meta: Meta = {
 	argTypes: {
 		color: {
 			control: 'select',
-			options: ['contrast', 'white', 'neutral', 'attention'],
+			options: ['contrast', 'neutral', 'attention'],
 		},
 	},
 	parameters: {
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof Tooltip>;
 
 export const Default: Story = {
 	render: (args) => (
-		<Tooltip open {...args}>
+		<Tooltip {...args}>
 			<Button>Hover me</Button>
 		</Tooltip>
 	),
@@ -51,14 +51,13 @@ export const Color: Story = {
 		</Tooltip>
 	),
 	args: {
-		color: 'white',
+		color: 'neutral',
 	},
 };
 
 export const Customized: Story = {
 	render: (args) => (
 		<Tooltip
-			className="bg-attention"
 			open
 			{...args}
 			content={