@a-type/ui 5.0.22 → 6.0.1

package/src/components/dialog/Dialog.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useEffect, useState } from 'react';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/index.js';
@@ -32,9 +32,9 @@ type Story = StoryObj<typeof Dialog>;
 
 function DummyContent() {
 	return (
-		<div className="col">
+		<div style={{ display: 'flex', flexDirection: 'column' }}>
 			<H1>Some content</H1>
-			<div className="max-h-20vh overflow-y-auto">
+			<div style={{ maxHeight: '20vh', overflowY: 'auto' }}>
 				<P>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at
 					porttitor sem. Aliquam erat volutpat. Donec fermentum tortor eget
@@ -127,7 +127,7 @@ export const Positioned: Story = {
 			<ParticleLayer noPortal>
 				<DialogTrigger render={<Button />}>Open</DialogTrigger>
 				<DummyContent />
-				<DialogContent className="bottom-0px top-auto">
+				<DialogContent style={{ bottom: 0, top: 'auto' }}>
 					<DialogTitle>Hello world</DialogTitle>
 					<DialogActions>
 						<DialogClose />
@@ -169,7 +169,18 @@ export const VirtualKeyboard: Story = {
 						</DialogActions>
 					</DialogContent>
 				</Dialog>
-				<div className="fixed bottom-0 left-0 right-0 h-[var(--mock-virtual-keyboard-height,0)] w-full transition-height bg-black" />
+				<div
+					className="bg-neutral-ink"
+					style={{
+						position: 'fixed',
+						bottom: 0,
+						left: 0,
+						right: 0,
+						height: 'var(--mock-virtual-keyboard-height,0)',
+						width: '100%',
+						transition: 'height var(--m-duration) var(--m-easing)',
+					}}
+				/>
 			</Provider>
 		);
 	},

package/src/components/dialog/Dialog.tsx

@@ -22,43 +22,18 @@ import {
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { withClassName } from '../../hooks/withClassName.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/Icon.js';
 import { useParticles } from '../particles/index.js';
+import menuCls from '../primitives/menus.module.css';
 import { useConfig } from '../provider/Provider.js';
 import { ScrollArea } from '../scrollArea/ScrollArea.js';
 import { selectTriggerClassName } from '../select/index.js';
+import cls from './Dialog.module.css';
 
-const StyledOverlay = withClassName(
-	BaseDialog.Backdrop,
-	'layer-components:border-top-1 layer-components:border-top-gray layer-components:border-top-solid layer-components:(fixed inset-0 shadow-[0_30px_60px_0px] shadow-black/20 shadow-inset transition bg-black/15)',
-	'layer-components:backdrop-blur-sm',
-	'start-end:opacity-0',
-);
-
-const StyledContent = withClassName(
-	BaseDialog.Popup,
-	'layer-components:(pointer-events-auto fixed flex flex-col items-stretch overflow-hidden border border shadow-xl transition bg-white border-gray-dark)',
-	'layer-components:sm:shadow-down',
-	'transform-gpu',
-	'layer-components:(left-50% top-50% max-h-85vh max-w-450px w-90vw translate-[-50%] border-b-1 rounded-lg)',
-
-	'layer-components:start-end:scale-95 layer-components:start-end:opacity-0',
-);
-const sheetClassNames = clsx(
-	'layer-variants:lt-sm:(left-0 right-0 top-auto h-min-content max-w-none w-screen translate-0 border-b-0 rounded-b-0 rounded-tl-xl rounded-tr-xl pt-lg shadow-up)',
-	'layer-variants:lt-sm:pb-[calc(env(safe-area-inset-bottom,0px))]',
+const StyledOverlay = withClassName(BaseDialog.Backdrop, cls.overlay);
 
-	'layer-variants:start-end:lt-sm:(translate-y-full opacity-0)',
-);
-const sheetClassNameWithOverlayKeyboard = clsx(
-	'layer-variants:lt-sm:bottom-[calc(var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px))+var(--gesture-y,0px))]',
-	'layer-variants:lt-sm:max-h-[calc(95vh-var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px)))]',
-);
-const sheetClassNameWithDisplaceKeyboard = clsx(
-	'layer-variants:lt-sm:(bottom-[calc(var(--viewport-bottom-offset,0px)+var(--gesture-y,0px))] max-h-[calc(0.85*var(--viewport-height,100vh))])',
-);
+const StyledContent = withClassName(BaseDialog.Popup, cls.content);
 
 function sheetCloseGestureLogic(
 	swipeY: number,
@@ -187,53 +162,34 @@ export const Content = function Content({
 	return (
 		<BaseDialog.Portal>
 			<StyledOverlay />
-			<GroupScaleReset>
-				<StyledContent
-					data-dialog-content
-					ref={finalRef}
-					{...props}
-					onTouchStart={onTouchStart}
-					onTouchMove={onTouchMove}
-					onTouchEnd={onTouchEnd}
-					onTouchCancel={onTouchEnd}
-					className={clsx(
-						{
-							'layer-variants:md:max-w-800px': width === 'lg',
-							'layer-variants:max-w-600px': width === 'md',
-							'layer-variants:max-w-300px': width === 'sm',
-						},
-						!disableSheet && sheetClassNames,
-						!disableSheet &&
-							virtualKeyboardBehavior === 'overlay' &&
-							sheetClassNameWithOverlayKeyboard,
-						!disableSheet &&
-							virtualKeyboardBehavior === 'displace' &&
-							sheetClassNameWithDisplaceKeyboard,
-						outerClassName || className,
-					)}
-				>
-					{!disableDefaultClose && (
-						<DialogDefaultClose showOnMobile={disableSheet} />
-					)}
-					{!disableSheet && <DialogSwipeHandle />}
-					<ScrollArea
-						direction="vertical"
-						className="layer-components:(h-full w-full)"
+			<StyledContent
+				data-dialog-content
+				ref={finalRef}
+				{...props}
+				onTouchStart={onTouchStart}
+				onTouchMove={onTouchMove}
+				onTouchEnd={onTouchEnd}
+				onTouchCancel={onTouchEnd}
+				data-disable-sheet={disableSheet ? 'true' : undefined}
+				data-keyboard-behavior={virtualKeyboardBehavior}
+				data-width={width}
+				className={clsx(outerClassName || className)}
+			>
+				{!disableDefaultClose && (
+					<DialogDefaultClose showOnMobile={disableSheet} />
+				)}
+				{!disableSheet && <DialogSwipeHandle />}
+				<ScrollArea direction="vertical" className={cls.contentScrollArea}>
+					<ScrollArea.Content
+						className={clsx(cls.contentScrollAreaContent, innerClassName)}
+						style={{
+							minWidth: undefined,
+						}}
 					>
-						<ScrollArea.Content
-							className={clsx(
-								'layer-components:(flex flex-col gap-md p-md)',
-								innerClassName,
-							)}
-							style={{
-								minWidth: undefined,
-							}}
-						>
-							{children}
-						</ScrollArea.Content>
-					</ScrollArea>
-				</StyledContent>
-			</GroupScaleReset>
+						{children}
+					</ScrollArea.Content>
+				</ScrollArea>
+			</StyledContent>
 		</BaseDialog.Portal>
 	);
 };
@@ -354,15 +310,8 @@ export function DialogSwipeHandle({
 	);
 	const finalRef = useMergedRef(ref, innerRef);
 	return (
-		<div
-			ref={finalRef}
-			{...props}
-			className={clsx(
-				'layer-components:(absolute left-50% top-0 w-20% transform-gpu cursor-grab touch-none rounded-lg py-2 sm:hidden -translate-x-1/2)',
-				className,
-			)}
-		>
-			<div className="layer-components:(h-[4px] w-full rounded-lg bg-gray)" />
+		<div ref={finalRef} {...props} className={clsx(cls.swipeHandle, className)}>
+			<div className={cls.swipeHandleBar} />
 		</div>
 	);
 }
@@ -388,11 +337,8 @@ export const DialogDefaultClose = function DialogDefaultClose({
 }) {
 	return (
 		<DialogClose
-			className={clsx(
-				'absolute right-sm top-sm z-101',
-				showOnMobile ? 'flex' : 'hidden sm:flex',
-				className,
-			)}
+			className={clsx(cls.close, className)}
+			data-show-on-mobile={showOnMobile}
 			aria-label="Close dialog"
 			ref={ref}
 			{...props}
@@ -403,14 +349,11 @@ export const DialogDefaultClose = function DialogDefaultClose({
 	);
 };
 
-const StyledTitle = withClassName(
-	BaseDialog.Title,
-	'layer-components:(mb-4 mt-0 text-3xl font-title color-black)',
-);
+const StyledTitle = withClassName(BaseDialog.Title, cls.title);
 
 const StyledDescription = withClassName(
 	BaseDialog.Description,
-	'layer-components:(mb-6 mt-3 text-md leading-6 color-gray-dark)',
+	cls.description,
 );
 
 // Exports
@@ -472,10 +415,7 @@ export const DialogClose = function DialogClose({
 
 export type { DialogRootProps as DialogProps } from '@base-ui/react/dialog';
 
-export const DialogActions = withClassName(
-	'div',
-	'layer-components:([--global-shadow-spread:1] sticky bottom-md z-100 mt-md flex flex-wrap items-center self-end justify-end gap-sm rounded-lg pb-1px shadow-md shadow-white bg-white shadow-up)',
-);
+export const DialogActions = withClassName('div', cls.actions);
 
 export const DialogSelectTrigger = function DialogSelectTrigger({
 	children,
@@ -495,16 +435,9 @@ export const DialogSelectTrigger = function DialogSelectTrigger({
 	);
 };
 
-export const DialogSelectList = withClassName(
-	BaseRadioGroup,
-	'layer-components:(flex flex-col gap-2 p-2 overflow-y-auto)',
-);
+export const DialogSelectList = withClassName(BaseRadioGroup, menuCls.itemList);
 
-export const DialogSelectItemRoot = withClassName(
-	BaseRadio.Root,
-	'layer-components:(w-full flex cursor-pointer items-center gap-3 border-1 rounded-lg border-none border-solid px-4 py-3 text-left font-normal transition-all color-black bg-gray-light border-bg)',
-	'layer-components:[&[data-state=checked]]:(color-main-ink bg-main-wash border-color)',
-);
+export const DialogSelectItemRoot = withClassName(BaseRadio.Root, menuCls.item);
 
 export const DialogSelectItem = function DialogSelectItem({
 	children,
@@ -514,10 +447,8 @@ export const DialogSelectItem = function DialogSelectItem({
 }) {
 	return (
 		<DialogSelectItemRoot {...props}>
-			<span className="min-h-18px flex-1 flex-row items-center gap-md">
-				{children}
-			</span>
-			<BaseRadio.Indicator className="flex-0-0-auto">
+			<span className={menuCls.itemText}>{children}</span>
+			<BaseRadio.Indicator className={menuCls.itemIndicator}>
 				<Icon name="check" />
 			</BaseRadio.Indicator>
 		</DialogSelectItemRoot>

package/src/components/divider/Divider.tsx

@@ -1,36 +1,36 @@
-import { Separator as BaseSeparator } from '@base-ui/react/separator';
-import classNames from 'clsx';
-import { HTMLAttributes } from 'react';
-import { withClassName } from '../../hooks/withClassName.js';
-
-const DividerBase = withClassName(
-	BaseSeparator,
-	'w-full h-1px bg-black relative',
-);
-
-export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
-	compensate?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-	padded?: boolean;
-}
-
-export const Divider = function Divider({
-	ref,
-	compensate,
-	padded,
-	className,
-	...props
-}: DividerProps & {
-	ref?: React.Ref<HTMLDivElement>;
-}) {
-	return (
-		<DividerBase
-			ref={ref}
-			style={{
-				left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
-				width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
-			}}
-			{...props}
-			className={classNames(padded && 'my-4', className)}
-		/>
-	);
-};
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import classNames from 'clsx';
+import { HTMLAttributes } from 'react';
+import { withClassName } from '../../hooks/withClassName.js';
+
+const DividerBase = withClassName(
+	BaseSeparator,
+	'relative h-1px w-full bg-neutral-ink',
+);
+
+export interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+	compensate?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+	padded?: boolean;
+}
+
+export const Divider = function Divider({
+	ref,
+	compensate,
+	padded,
+	className,
+	...props
+}: DividerProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	return (
+		<DividerBase
+			ref={ref}
+			style={{
+				left: compensate ? `calc(${compensate} * 0.25rem)` : undefined,
+				width: compensate ? `calc(100% - ${compensate} * 0.5rem)` : undefined,
+			}}
+			{...props}
+			className={classNames(padded && 'my-4', className)}
+		/>
+	);
+};

package/src/components/dropdownMenu/DropdownMenu.module.css

@@ -0,0 +1,3 @@
+.content {
+	min-width: 220px;
+}

package/src/components/dropdownMenu/DropdownMenu.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 { Icon } from '../icon/index.js';
@@ -23,7 +23,7 @@ export const Default: Story = {
 			<>
 				<DropdownMenu.Trigger render={<Button />}>Open</DropdownMenu.Trigger>
 				<DropdownMenu.Content>
-					<DropdownMenu.Item color="attention">
+					<DropdownMenu.Item className="@mode-attention">
 						<DropdownMenu.Label>Item 1</DropdownMenu.Label>
 						<DropdownMenu.ItemRightSlot>
 							<Icon name="flag" />
@@ -50,7 +50,7 @@ export const Sides: Story = {
 			justify="center"
 			full
 			p="xl"
-			className="mt-200px"
+			style={{ marginTop: 200 }}
 		>
 			<DropdownMenu open={args.open}>
 				<DropdownMenu.Trigger render={<Button />}>Top</DropdownMenu.Trigger>

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -10,64 +10,43 @@ import {
 import { clsx } from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
-import { PaletteName } from '../../uno/index.js';
-import {
-	itemClassName,
-	itemListClassName,
-	popupClassName,
-} from '../primitives/menus.js';
+import menuCls from '../primitives/menus.module.css';
 import { ArrowSvg } from '../utility/ArrowSvg.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
+import cls from './DropdownMenu.module.css';
 import { DropdownTriggerProvider } from './DropdownTriggerContext.js';
 
 const StyledContent = withClassName(
 	function DropdownMenuContent(props: MenuPopupProps) {
-		return (
-			<GroupScaleReset>
-				<BaseMenu.Popup {...props} />
-			</GroupScaleReset>
-		);
+		return <BaseMenu.Popup {...props} />;
 	},
-	popupClassName,
-	'layer-components:(min-w-220px)',
+	menuCls.popup,
+	cls.content,
 );
 
-const StyledItemBase = withClassName(BaseMenu.Item, itemClassName);
+const StyledItemBase = withClassName(BaseMenu.Item, menuCls.item);
 export interface DropdownMenuItemProps extends MenuItemProps {
-	color?: PaletteName;
 	ref?: Ref<HTMLDivElement>;
 }
 const StyledItem = ({
 	ref: forwardedRef,
 	className,
-	color = 'gray',
 	...props
 }: DropdownMenuItemProps) => {
 	return (
-		<StyledItemBase
-			{...props}
-			className={clsx(color && `palette-${color}`, className)}
-			ref={forwardedRef}
-		/>
+		<StyledItemBase {...props} className={clsx(className)} ref={forwardedRef} />
 	);
 };
-const StyledCheckboxItem = withClassName(BaseMenu.CheckboxItem, itemClassName);
-const StyledRadioItem = withClassName(BaseMenu.RadioItem, itemClassName);
+const StyledCheckboxItem = withClassName(BaseMenu.CheckboxItem, menuCls.item);
+const StyledRadioItem = withClassName(BaseMenu.RadioItem, menuCls.item);
 
-const StyledLabel = withClassName(
-	'span',
-	'layer-components:(py-1 pl-3 text-sm font-bold leading-6)',
-);
+const StyledLabel = withClassName('span', menuCls.itemText);
 
-const StyledSeparator = withClassName(
-	BaseMenu.Separator,
-	'layer-components:(m-5px h-1px bg-gray)',
-);
+const StyledSeparator = withClassName(BaseMenu.Separator, menuCls.separator);
 
 const StyledItemIndicator = withClassName(
 	BaseMenu.CheckboxItemIndicator,
-	'layer-components:(absolute left-0 w-25px inline-flex items-center justify-center)',
+	menuCls.itemIndicator,
 );
 
 const StyledArrow = withClassName(
@@ -76,12 +55,10 @@ const StyledArrow = withClassName(
 			<ArrowSvg />
 		</BaseMenu.Arrow>
 	),
-	'layer-components:(arrow)',
-	'layer-components:data-[closed]:(scale-0 opacity-0)',
-	'layer-components:data-[open]:(scale-100 opacity-100)',
+	menuCls.arrow,
 );
 
-const StyledTrigger = withClassName(BaseMenu.Trigger, 'select-none');
+const StyledTrigger = withClassName(BaseMenu.Trigger, menuCls.trigger);
 
 const StyledPortal = BaseMenu.Portal;
 
@@ -105,7 +82,7 @@ export function DropdownMenuTrigger({ ...props }: MenuTriggerProps) {
 }
 export const DropdownMenuTriggerIcon = withClassName(
 	SlotDiv,
-	'layer-components:transition-transform layer-components:[[data-popup-open]>&]:rotate-180',
+	menuCls.triggerIcon,
 );
 
 export const DropdownMenuContent = ({
@@ -146,7 +123,7 @@ export const DropdownMenuContent = ({
 				positionMethod={positionMethod}
 			>
 				<StyledContent {...props}>
-					<div className={itemListClassName}>{children}</div>
+					<div className={menuCls.itemList}>{children}</div>
 					<StyledArrow />
 				</StyledContent>
 			</BaseMenu.Positioner>
@@ -154,7 +131,10 @@ export const DropdownMenuContent = ({
 	);
 };
 
-export const DropdownMenuItemRightSlot = withClassName('div', 'ml-auto pl-md');
+export const DropdownMenuItemRightSlot = withClassName(
+	'div',
+	menuCls.itemRightSlot,
+);
 
 export const DropdownMenu = Object.assign(DropdownMenuRoot, {
 	Content: DropdownMenuContent,

package/src/components/editableText/EditableText.module.css

@@ -0,0 +1,43 @@
+.input {
+	& input {
+		font-size: inherit;
+	}
+}
+
+.button {
+	width: auto;
+	display: inline-flex;
+	align-items: center;
+	text-align: start;
+	font-size: inherit;
+	cursor: pointer;
+
+	@apply --mx-shadow;
+	--mx-shadow-value: none;
+
+	@apply --mx-fg(inherit);
+	@apply --mx-bg(transparent);
+	@apply --mx-borderColor(transparent);
+
+	padding: var(--m-control-padding);
+	gap: var(--m-spacing-sm);
+	border-radius: var(--m-control-radius);
+
+	&:hover,
+	&:focus-visible {
+		@apply --mx-bg(var(--m-color-neutral-light));
+		@apply --mx-bg-faded(80%);
+	}
+
+	&:focus {
+		outline: none;
+	}
+	&:focus-visible {
+		--mx-ring-value: --fn-focus-ring();
+	}
+}
+
+.icon {
+	opacity: 80%;
+	@apply --mx-stroke(var(--m-color-main-heavy));
+}

package/src/components/editableText/EditableText.stories.tsx

@@ -1,5 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
+import { Heading } from '../typography/typography.js';
 import { EditableText } from './EditableText.js';
 
 const meta = {
@@ -11,6 +12,7 @@ const meta = {
 	},
 	parameters: {
 		controls: { expanded: true },
+		layout: 'centered',
 	},
 } satisfies Meta<typeof EditableText>;
 
@@ -29,6 +31,7 @@ export const Default: Story = {
 				onValueChange={setValue}
 				editing={editable}
 				onEditingChange={setEditable}
+				style={{ margin: 'auto' }}
 			/>
 		);
 	},
@@ -39,14 +42,16 @@ export const Title: Story = {
 		const [value, setValue] = useState(args.value);
 		const [editable, setEditable] = useState(false);
 		return (
-			<EditableText
-				{...args}
-				value={value}
-				onValueChange={setValue}
-				editing={editable}
-				onEditingChange={setEditable}
-				className="text-2xl"
-			/>
+			<Heading>
+				<EditableText
+					{...args}
+					value={value}
+					onValueChange={setValue}
+					editing={editable}
+					onEditingChange={setEditable}
+					style={{ margin: 'auto' }}
+				/>
+			</Heading>
 		);
 	},
 };

package/src/components/editableText/EditableText.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import {
 	ChangeEvent,
+	CSSProperties,
 	FocusEvent,
 	KeyboardEvent,
 	useCallback,
@@ -9,7 +10,9 @@ import {
 	useState,
 } from 'react';
 import { Icon } from '../icon/index.js';
-import { Input, inputClassName } from '../input/index.js';
+import { Input } from '../input/index.js';
+import inputCls from '../input/Input.module.css';
+import cls from './EditableText.module.css';
 
 export interface EditableTextProps {
 	value: string;
@@ -17,6 +20,7 @@ export interface EditableTextProps {
 	editing?: boolean;
 	onEditingChange?: (editing: boolean) => void;
 	className?: string;
+	style?: CSSProperties;
 	id?: string;
 	autoSelect?: boolean;
 	autoFocus?: boolean;
@@ -88,10 +92,7 @@ export function EditableText({
 				value={value}
 				onChange={handleChange}
 				onBlur={handleBlur}
-				className={clsx(
-					'layer-variants:[&_input]:font-size-inherit',
-					className,
-				)}
+				className={clsx(cls.input, className)}
 				id={id}
 				autoSelect={autoSelect}
 				onKeyDown={handleKeyDown}
@@ -103,20 +104,12 @@ export function EditableText({
 	return (
 		<button
 			onClick={() => setEditingFinal(true)}
-			className={clsx(
-				inputClassName,
-				'layer-variants:(w-auto inline-flex items-center gap-sm rounded-md px-md text-left font-size-inherit color-inherit bg-transparent border-transparent shadow-none)',
-				'layer-variants:hover:(bg-main-light/80)',
-				'foc-effect',
-				'layer-variants:focus-visible:(bg-main-light/80)',
-				'cursor-pointer',
-				className,
-			)}
+			className={clsx(inputCls.input, cls.button, className)}
 			id={id}
 			{...rest}
 		>
 			{value}
-			<Icon name="pencil" className="stroke-main-dark opacity-80" />
+			<Icon name="pencil" className={cls.icon} />
 		</button>
 	);
 }