@a-type/ui 5.0.22 → 6.0.0

package/src/components/combobox/Combobox.module.css

@@ -0,0 +1,168 @@
+.backdrop {
+	position: fixed;
+	inset: 0;
+}
+
+.empty:not(:empty) {
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	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);
+}
+
+.group {
+	display: flex;
+	flex-direction: column;
+	overflow: clip;
+	padding: var(--m-spacing-sm);
+	gap: var(--m-spacing-xs);
+}
+
+.groupItem {
+	@apply --mx-shadow;
+	&[data-highlighted] {
+		--mx-ring-value: --fn-ring(var(--m-color-main-mid), 2px);
+	}
+}
+
+.groupItemList {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--m-spacing-xs);
+}
+
+.groupLabel {
+	text-transform: uppercase;
+	width: 100%;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	padding-inline: 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);
+}
+
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	transition: transform var(--m-duration) var(--m-easing);
+
+	&[data-open] {
+		transform: rotate(180deg);
+	}
+}
+
+.chips {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--m-spacing-xs);
+	padding-inline-start: var(--m-spacing-md);
+}
+
+.chipsList {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--m-spacing-xs);
+	padding-inline: var(--m-spacing-sm);
+	margin-inline-start: calc(-1 * var(--m-spacing-md));
+
+	&:empty {
+		display: none;
+	}
+}
+
+.chipInput {
+	min-width: 3ch;
+	flex-grow: 1;
+	padding-inline-start: 0px;
+}
+
+.chipInputWrapper {
+	max-width: 100%;
+	min-width: 12ch;
+	display: flex;
+	flex-direction: row;
+	flex-grow: 1;
+	align-items: center;
+	gap: var(--m-spacing-xs);
+}
+
+.chip {
+	margin-block: auto;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding-inline: var(--m-spacing-sm);
+	gap: var(--m-spacing-xs);
+}
+
+.chipRemove {
+	min-height: 0;
+	min-width: 0;
+	padding: 0;
+	line-height: 1;
+	margin-block: calc(-1 * var(--m-spacing-xs));
+	margin-inline-end: calc(-1 * var(--m-spacing-sm));
+}
+
+.item[data-selected] {
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+}
+
+.itemIndicator {
+	margin-inline-start: auto;
+	height: 10px;
+	width: 10px;
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	outline: none;
+	overscroll-behavior: contain;
+	overflow-y: auto;
+	overflow-x: clip;
+
+	&:empty {
+		padding: 0;
+	}
+}
+
+.popup {
+	width: var(--anchor-width);
+	display: flex;
+	flex-direction: column;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--m-spacing-xs);
+}
+
+.multiValue {
+	max-width: 100%;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: var(--m-spacing-xs);
+}
+
+.clearAndCaret {
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	margin-right: calc(-1 * var(--m-control-padding-inline));
+}
+
+.details {
+	@apply --mx-text-ambient;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	padding: var(--m-spacing-sm);
+}

package/src/components/combobox/Combobox.stories.tsx

@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-import { PaletteName } from '../../uno/index.js';
 import { Box } from '../box/Box.js';
 import { Icon } from '../icon/Icon.js';
+import { Text } from '../typography/typography.js';
 import { Combobox } from './Combobox.js';
 
 interface Args {
@@ -100,13 +100,13 @@ export const Default: Story = {
 			>
 				<ExampleCombobox.Input
 					icon={<Icon name="food" />}
-					className="w-[200px]"
+					style={{ width: 200 }}
 				>
 					{creatable && (
 						<ExampleCombobox.CreateButton
 							size="small"
 							emphasis="primary"
-							className="aspect-1 h-full"
+							style={{ aspectRatio: '1', height: '100%' }}
 						>
 							<Icon name="plus" />
 						</ExampleCombobox.CreateButton>
@@ -129,8 +129,8 @@ export const Default: Story = {
 
 interface ItemGroup {
 	category: string;
-	color: PaletteName;
 	items: Item[];
+	color: string; // TODO: restore typechecking of modes
 }
 const groupedItems: ItemGroup[] = [
 	{
@@ -174,7 +174,7 @@ export const Grouped: Story = {
 						: undefined
 				}
 			>
-				<GroupedCombobox.Input />
+				<GroupedCombobox.Input placeholder="Select an item..." />
 				<GroupedCombobox.Content arrow={arrow}>
 					<GroupedCombobox.List>
 						{(group) => (
@@ -187,7 +187,7 @@ export const Grouped: Story = {
 										<GroupedCombobox.Item
 											key={item.id}
 											value={item}
-											color={group.color}
+											className={`@mode-${group.color}`}
 										>
 											{item.label}
 										</GroupedCombobox.Item>
@@ -206,10 +206,12 @@ export const Grouped: Story = {
 						)}
 					</GroupedCombobox.Empty>
 					<GroupedCombobox.Separator />
-					<div className="p-sm text-xs color-gray-dark">
-						Select your favorite fruit or berry.
-						{creatable ? ' Enter creates a new item.' : ''}
-					</div>
+					<Box p="xs">
+						<Text emphasis="ambient">
+							Select your favorite fruit or berry.
+							{creatable ? ' Enter creates a new item.' : ''}
+						</Text>
+					</Box>
 				</GroupedCombobox.Content>
 			</GroupedCombobox>
 		);
@@ -232,12 +234,19 @@ export const NotPopover: Story = {
 						: undefined
 				}
 			>
-				<Box border p surface="white" col>
-					<GroupedCombobox.Input disableCaret className="w-full" disableClear>
+				<Box border p surface="ambient" col items="stretch">
+					<GroupedCombobox.Input
+						style={{ width: '100%' }}
+						disableCaret
+						disableClear
+					>
 						<GroupedCombobox.CreateButton
 							size="small"
 							emphasis="primary"
-							className="aspect-1 h-full"
+							style={{
+								aspectRatio: '1',
+								height: '100%',
+							}}
 						>
 							<Icon name="plus" />
 						</GroupedCombobox.CreateButton>
@@ -278,7 +287,7 @@ export const MultiSelect: Story = {
 				highlightItemOnHover={highlightItemOnHover}
 				showCreatableItem={creatable}
 			>
-				<ExampleCombobox.Chips className="w-300px">
+				<ExampleCombobox.Chips style={{ width: 300 }}>
 					<ExampleCombobox.MultiValue>
 						{(items) => (
 							<>

package/src/components/combobox/Combobox.tsx

@@ -2,6 +2,7 @@ import * as BaseCombobox from '@base-ui/react/combobox';
 import clsx from 'clsx';
 import {
 	createContext,
+	CSSProperties,
 	ReactNode,
 	Ref,
 	RefObject,
@@ -10,75 +11,28 @@ import {
 	useState,
 } from 'react';
 import { withClassName } from '../../hooks.js';
-import { PaletteName } from '../../uno/index.js';
 import { Button } from '../button/Button.js';
 import { ButtonProps } from '../button/index.js';
 import { Chip, ChipProps } from '../chip/Chip.js';
 import { Icon } from '../icon/Icon.js';
 import { Input, InputProps } from '../input/Input.js';
-import {
-	arrowClassName,
-	itemClassName,
-	itemListClassName,
-	popupClassName,
-	separatorClassName,
-} from '../primitives/menus.js';
+import menuCls from '../primitives/menus.module.css';
 import { ArrowSvg } from '../utility/ArrowSvg.js';
 import { SlotDiv, SlotDivProps } from '../utility/SlotDiv.js';
-
-export const comboboxPopupClassName = clsx(
-	popupClassName,
-	'layer-components:(w-[--anchor-width] flex flex-col)',
-);
-
-export const comboboxBackdropClassName = clsx(
-	'layer-components:(fixed inset-0)',
-);
-
-export const comboboxListClassName = clsx(
-	itemListClassName,
-	'layer-components:(flex flex-col overscroll-contain outline-none overflow-y-auto overflow-unstable)',
-	'layer-components:empty:(p-0)',
-);
-
-export const comboboxIconClassName = clsx(
-	'icon',
-	'layer-components:(flex shrink-0 items-center justify-center transition-transform)',
-	'layer-components:data-[open]:(rotate-180)',
-);
-
-export const comboboxEmptyClassName = clsx(
-	'layer-components:[&:not(:empty)]:(p-sm text-sm color-gray-dark)',
-);
-
-export const comboboxGroupClassName = clsx(
-	'layer-components:(flex flex-col gap-xs overflow-hidden p-sm)',
-);
-
-export const comboboxGroupItemListClassName = clsx(
-	'layer-components:(flex flex-row flex-wrap gap-xs)',
-);
-
-export const comboboxGroupLabelClassName = clsx(
-	'layer-components:(w-full px-xs text-xs font-medium uppercase color-gray-dark)',
-);
-
-export const comboboxRowClassName = clsx(
-	'layer-components:(flex items-center gap-xs)',
-);
-
-export const comboboxGroupItemClassName = clsx(
-	'layer-composed-2:data-[highlighted]:(ring-2 bg-main-wash ring-main)',
-);
+import cls from './Combobox.module.css';
 
 export interface ComboboxInputProps
-	extends Omit<BaseCombobox.ComboboxInputProps, 'className' | 'render'> {
+	extends Omit<
+		BaseCombobox.ComboboxInputProps,
+		'className' | 'style' | 'render'
+	> {
 	ref?: React.Ref<HTMLInputElement>;
 	icon?: ReactNode;
 	disableCaret?: boolean;
 	disableClear?: boolean;
 	children?: ReactNode;
 	className?: string;
+	style?: CSSProperties;
 }
 
 export function ComboboxComposedInput({
@@ -89,10 +43,11 @@ export function ComboboxComposedInput({
 	children,
 	disableCaret,
 	disableClear,
+	style,
 	...props
 }: ComboboxInputProps & {
 	className?: string;
-	ref?: React.Ref<HTMLInputElement>;
+	ref?: React.Ref<HTMLDivElement>;
 	open: boolean;
 	disableCaret?: boolean;
 	disableClear?: boolean;
@@ -104,7 +59,7 @@ export function ComboboxComposedInput({
 	const isInChips = useContext(ComboboxChipsContext);
 
 	const clearAndCaret = ((!disableClear && hasValue) || !disableCaret) && (
-		<div className="flex flex-shrink-0 items-center">
+		<div className={cls.clearAndCaret}>
 			{!disableClear && hasValue && <ComboboxClear />}
 			{!disableCaret && <ComboboxTrigger open={open} />}
 		</div>
@@ -113,19 +68,14 @@ export function ComboboxComposedInput({
 	if (isInChips) {
 		return (
 			<div
-				className={clsx(
-					'layer-components:(max-w-full min-w-12ch flex flex-1 flex-row items-center gap-xs)',
-					className,
-				)}
+				ref={ref}
+				className={clsx(cls.chipInputWrapper, className)}
+				style={style}
 			>
 				<BaseCombobox.Combobox.Input
 					render={<Input.Input />}
 					autoComplete="off"
-					ref={ref}
-					className={clsx(
-						'layer-components:(min-w-3ch flex-1)',
-						'layer-composed:pl-0',
-					)}
+					className={clsx(cls.chipInput)}
 					minLength={3}
 					{...props}
 				/>
@@ -136,7 +86,7 @@ export function ComboboxComposedInput({
 	}
 
 	return (
-		<Input.Border ref={ref} className={className}>
+		<Input.Border ref={ref} className={className} style={style}>
 			{icon}
 			<BaseCombobox.Combobox.Input
 				render={<Input.Input />}
@@ -373,11 +323,7 @@ function ComboboxChips({
 		<ComboboxChipsContext.Provider value={true}>
 			<BaseCombobox.Combobox.Chips
 				ref={anchorRef || undefined}
-				className={clsx(
-					'layer-components:(flex flex-row items-center gap-xs)',
-					'layer-composed:pl-md',
-					className,
-				)}
+				className={clsx(cls.chips, className)}
 				render={<Input.Border />}
 				{...props}
 			/>
@@ -385,11 +331,7 @@ function ComboboxChips({
 	);
 }
 
-const ComboboxChipsList = withClassName(
-	SlotDiv,
-	'layer-components:(flex flex-row flex-wrap gap-xs px-sm py-xs -ml-md)',
-	'layer-components:empty:hidden',
-);
+const ComboboxChipsList = withClassName(SlotDiv, cls.chipsList);
 
 function ComboboxChip({
 	className,
@@ -402,20 +344,14 @@ function ComboboxChip({
 	return (
 		<BaseCombobox.Combobox.Chip
 			render={<Chip color={color} />}
-			className={clsx(
-				'layer-composed-2:(my-auto flex flex-row items-center gap-xs px-sm)',
-				className,
-			)}
+			className={clsx(cls.chip, className)}
 			{...props}
 		>
 			{children}
 			<BaseCombobox.Combobox.ChipRemove
+				className="@mode-denser"
 				render={
-					<Button
-						size="small"
-						emphasis="ghost"
-						className="min-h-0 min-w-0 p-0 leading-1"
-					>
+					<Button emphasis="ghost" className={cls.chipRemove}>
 						<Icon name="x" size={10} />
 					</Button>
 				}
@@ -428,7 +364,8 @@ function ComboboxIcon({ className, ...props }: BaseCombobox.ComboboxIconProps) {
 	return (
 		<BaseCombobox.Combobox.Icon
 			{...props}
-			className={clsx(comboboxIconClassName, className)}
+			className={clsx(cls.icon, className)}
+			data-icon
 		>
 			<Icon name="chevron" />
 		</BaseCombobox.Combobox.Icon>
@@ -437,12 +374,13 @@ function ComboboxIcon({ className, ...props }: BaseCombobox.ComboboxIconProps) {
 
 const ComboboxPopup = withClassName(
 	BaseCombobox.Combobox.Popup,
-	comboboxPopupClassName,
+	menuCls.popup,
+	cls.popup,
 );
 
 const ComboboxBackdrop = withClassName(
 	BaseCombobox.Combobox.Backdrop,
-	comboboxBackdropClassName,
+	cls.backdrop,
 );
 
 function ComboboxArrow({
@@ -452,7 +390,7 @@ function ComboboxArrow({
 	return (
 		<BaseCombobox.Combobox.Arrow
 			{...props}
-			className={clsx(arrowClassName, className)}
+			className={clsx(menuCls.arrow, className)}
 		>
 			<ArrowSvg />
 		</BaseCombobox.Combobox.Arrow>
@@ -491,36 +429,22 @@ function ComboboxContent({
 function ComboboxList({ className, ...props }: BaseCombobox.ComboboxListProps) {
 	return (
 		<BaseCombobox.Combobox.List
-			className={clsx(comboboxListClassName, className)}
+			className={clsx(cls.list, className)}
 			{...props}
 		/>
 	);
 }
 
-const ComboboxEmpty = withClassName(
-	BaseCombobox.Combobox.Empty,
-	comboboxEmptyClassName,
-);
+const ComboboxEmpty = withClassName(BaseCombobox.Combobox.Empty, cls.empty);
 
 export interface ComboboxItemProps extends BaseCombobox.ComboboxItemProps {
 	ref?: Ref<HTMLDivElement>;
-	color?: PaletteName;
 }
-function ComboboxItem({
-	className,
-	color = 'gray',
-	children,
-	...props
-}: ComboboxItemProps) {
+function ComboboxItem({ className, children, ...props }: ComboboxItemProps) {
 	return (
 		<BaseCombobox.Combobox.Item
 			{...props}
-			className={clsx(
-				color && `palette-${color}`,
-				itemClassName,
-				'layer-components:data-[selected]:color-gray-dark',
-				className,
-			)}
+			className={clsx(menuCls.item, cls.item, className)}
 		>
 			{children}
 			<ComboboxItemIndicator />
@@ -535,32 +459,23 @@ const ComboboxItemIndicator = withClassName(
 			render={({ children: _, ...rest }) => <Icon name="check" {...rest} />}
 		/>
 	),
-	'layer-components:(ml-auto)',
+	cls.itemIndicator,
 );
 
-const ComboboxGroup = withClassName(
-	BaseCombobox.Combobox.Group,
-	comboboxGroupClassName,
-);
+const ComboboxGroup = withClassName(BaseCombobox.Combobox.Group, cls.group);
 
-const ComboboxGroupItemList = withClassName(
-	SlotDiv,
-	comboboxGroupItemListClassName,
-);
+const ComboboxGroupItemList = withClassName(SlotDiv, cls.groupItemList);
 
 const ComboboxGroupLabel = withClassName(
 	BaseCombobox.Combobox.GroupLabel,
-	comboboxGroupLabelClassName,
+	cls.groupLabel,
 );
 
-const ComboboxRow = withClassName(
-	BaseCombobox.Combobox.Row,
-	comboboxRowClassName,
-);
+const ComboboxRow = withClassName(BaseCombobox.Combobox.Row, cls.row);
 
 const ComboboxSeparator = withClassName(
 	BaseCombobox.Combobox.Separator,
-	separatorClassName,
+	menuCls.separator,
 );
 
 export interface ComboboxGroupItemProps
@@ -581,17 +496,18 @@ function ComboboxGroupItem({
 	return (
 		<BaseCombobox.Combobox.Item
 			render={
-				replace ?? <Button render={<Chip render={render} color={color} />} />
+				replace ?? (
+					<Button
+						emphasis="light"
+						render={<Chip render={render} color={color} />}
+					/>
+				)
 			}
 			{...props}
-			className={clsx(
-				comboboxGroupItemClassName,
-				'layer-components:data-[selected]:color-gray-dark',
-				className,
-			)}
+			className={clsx(cls.groupItem, cls.item, className)}
 		>
 			{children}
-			<ComboboxItemIndicator className="layer-components:(h-10px w-10px)" />
+			<ComboboxItemIndicator className={cls.itemIndicator} />
 		</BaseCombobox.Combobox.Item>
 	);
 }
@@ -605,10 +521,7 @@ function ComboboxMultiValue({
 	...props
 }: ComboboxMultiValueProps) {
 	return (
-		<SlotDiv
-			className={clsx('max-w-full flex flex-row flex-wrap gap-xs', className)}
-			{...props}
-		>
+		<SlotDiv className={clsx(cls.multiValue, className)} {...props}>
 			<BaseCombobox.Combobox.Value>{children}</BaseCombobox.Combobox.Value>
 		</SlotDiv>
 	);

package/src/components/contextMenu/contextMenu.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/index.js';
 import { ContextMenu } from './contextMenu.js';
 

package/src/components/contextMenu/contextMenu.tsx

@@ -4,7 +4,7 @@ import {
 } from '@base-ui/react/context-menu';
 import classNames from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
+import menuCls from '../primitives/menus.module.css';
 
 export const ContextMenuRoot = BaseContextMenu.Root;
 
@@ -19,25 +19,19 @@ export const ContextMenuContent = function Content({
 	return (
 		<BaseContextMenu.Portal>
 			<BaseContextMenu.Positioner alignOffset={-10}>
-				<GroupScaleReset>
-					<BaseContextMenu.Popup
-						className={classNames(
-							'layer-components:(z-menu min-w-120px overflow-hidden border rounded-md shadow-md bg-white border-gray-dark)',
-							'layer-components:transform-origin-[var(--transform-origin)]',
-							'layer-components:start-end:(scale-95 opacity-0)',
-							'layer-components:(overflow-y-auto overflow-unstable)',
-							'important:motion-reduce:animate-none',
-							'layer-components:(max-h-[--available-height] max-w-[--available-width])',
-							className,
-						)}
-						onClick={(ev) => {
-							ev.stopPropagation();
-							onClick?.(ev);
-						}}
-						ref={ref}
-						{...props}
-					/>
-				</GroupScaleReset>
+				<BaseContextMenu.Popup
+					className={classNames(
+						menuCls.popup,
+
+						className,
+					)}
+					onClick={(ev) => {
+						ev.stopPropagation();
+						onClick?.(ev);
+					}}
+					ref={ref}
+					{...props}
+				/>
 			</BaseContextMenu.Positioner>
 		</BaseContextMenu.Portal>
 	);
@@ -45,15 +39,13 @@ export const ContextMenuContent = function Content({
 
 export const ContextMenuArrow = withClassName(
 	BaseContextMenu.Arrow,
-	'layer-components:arrow',
+	menuCls.arrow,
 );
 
 export const ContextMenuItem = withClassName(
 	BaseContextMenu.Item,
-	'palette-gray',
-	'layer-components:(relative min-h-touch-large flex cursor-pointer select-none items-center overflow-hidden px-2 py-sm pl-25px outline-none)',
-	'layer-components:[&[data-highlighted=true]]:bg-main-light layer-components:hover:bg-main-light',
-	'layer-components:disabled:cursor-default) layer-components:[&[data-disabled=true]]:(cursor-default opacity-50) layer-components:disabled:(opacity-50)',
+	'@mode-gray',
+	menuCls.item,
 );
 
 export const ContextMenuTrigger = withClassName(BaseContextMenu.Trigger, '');