@a-type/ui 5.0.22 → 6.0.1

package/src/components/emojiPicker/EmojiPicker.module.css

@@ -0,0 +1,84 @@
+.root {
+	height: --fn-literal(368px);
+	width: fit-content;
+	display: flex;
+	flex-direction: column;
+	isolation: isolate;
+	gap: var(--m-spacing-sm);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+}
+
+.search {
+	z-index: 10;
+	min-width: --fn-literal(80px);
+	width: 100%;
+}
+
+.viewport {
+	min-height: 0;
+	flex: 1;
+	overflow: clip;
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	border-radius: var(--m-surface-radius);
+}
+.viewportInner {
+	position: relative;
+	outline: hidden;
+}
+
+.loading {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	@apply --mx-bg(inherit);
+}
+
+.empty {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	@apply --mx-bg(inherit);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: var(--m-text-ambient-weight);
+}
+
+.categoryHeader {
+	position: sticky;
+	top: 0;
+	@apply --mx-bg(inherit);
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	padding: var(--m-spacing-sm) var(--m-spacing-md);
+	font-weight: semibold;
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+}
+
+.row {
+	scroll-margin-block: var(--m-spacing-xs);
+	padding-inline: var(--m-spacing-xs);
+}
+
+.emoji {
+	padding: var(--m-spacing-xs);
+	font-size: --fn-literal(20px);
+}
+
+.list {
+	user-select: none;
+	padding-block-end: var(--m-spacing-md);
+}
+
+.skinToneButton {
+	padding: var(--m-spacing-xs);
+	font-size: --fn-literal(20px);
+}
+
+.skinToneSelector {
+	margin-right: auto;
+}

package/src/components/emojiPicker/EmojiPicker.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { EmojiPicker } from './EmojiPicker.js';
 
 const meta = {

package/src/components/emojiPicker/EmojiPicker.tsx

@@ -13,63 +13,49 @@ import { useLocalStorage } from '../../hooks/useStorage.js';
 import { Box, BoxProps } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
-import { inputClassName } from '../input/Input.js';
+import inputCls from '../input/Input.module.css';
 import { Spinner } from '../spinner/Spinner.js';
+import cls from './EmojiPicker.module.css';
 
 export const EmojiPickerRoot = withClassName(
 	Core.Root,
-	'layer-components:(isolate flex flex-col w-fit h-368px gap-sm)',
+	'@mode-dense',
+	cls.root,
 );
 export const EmojiPickerSearch = withClassName(
 	Core.Search,
-	'layer-components:(z-10 min-w-80px)',
-	inputClassName,
+	cls.search,
+	inputCls.input,
 );
 export const EmojiPickerViewport = ({
 	className,
 	...props
 }: EmojiPickerViewportProps) => (
-	<Box
-		className={clsx(
-			'layer-components:(min-h-0 flex-1 overflow-hidden rounded-md bg-white)',
-			className,
-		)}
-	>
-		<Core.Viewport
-			className="layer-components:(relative outline-hidden)"
-			{...props}
-		/>
+	<Box className={clsx(cls.viewport, className)}>
+		<Core.Viewport className={cls.viewportInner} {...props} />
 	</Box>
 );
 export const EmojiPickerLoading = withClassName(
 	withProps(Core.Loading, {
 		children: <Spinner />,
 	}),
-	'layer-components:(absolute inset-0 flex items-center justify-center bg-inherit)',
+	cls.loading,
 );
 export const EmojiPickerEmpty = withClassName(
 	withProps(Core.Empty, {
 		children: <>No emoji found</>,
 	}),
-	'layer-components:(absolute inset-0 flex items-center justify-center bg-inherit color-gray-dark text-xs)',
+	cls.empty,
 );
 
 export const EmojiPickerCategoryHeader = (
 	props: EmojiPickerListCategoryHeaderProps,
 ) => (
-	<div
-		className={clsx(
-			'layer-components:(sticky top-0 px-md py-sm text-xs font-semibold color-gray-dark bg-inherit)',
-			props.className,
-		)}
-	>
+	<div className={clsx(cls.categoryHeader, props.className)}>
 		{props.category.label}
 	</div>
 );
-export const EmojiPickerRow = withClassName(
-	'div',
-	'layer-components:(scroll-my-xs px-xs)',
-);
+export const EmojiPickerRow = withClassName('div', cls.row);
 export const EmojiPickerEmoji = withClassName(
 	(p: Omit<EmojiPickerListEmojiProps, 'color'>) => (
 		<Button
@@ -79,12 +65,12 @@ export const EmojiPickerEmoji = withClassName(
 			toggleMode="color"
 			size="small"
 			aria-label={p.emoji.label}
-			className="p-xs text-lg"
+			forceIconMode
 		>
 			<Button.Icon>{p.emoji.emoji}</Button.Icon>
 		</Button>
 	),
-	'',
+	cls.emoji,
 );
 
 const defaultListComponents = {
@@ -99,7 +85,7 @@ export const EmojiPickerList = ({
 }: EmojiPickerListProps) => {
 	return (
 		<Core.List
-			className={clsx('layer-components:(select-none pb-md)', className)}
+			className={clsx(cls.list, className)}
 			components={
 				components
 					? {
@@ -116,12 +102,15 @@ export const useEmojiSkinTone = () =>
 	useLocalStorage<SkinTone | undefined>('emoji-skin-tone', undefined, false);
 
 export type SkinTone = ReturnType<typeof useSkinTone>[0];
-export const EmojiPickerSkinToneSelector = (props: BoxProps) => {
+export const EmojiPickerSkinToneSelector = ({
+	className,
+	...props
+}: BoxProps) => {
 	const [_, __, options] = useSkinTone();
 	const [skinTone, setSkinTone] = useEmojiSkinTone();
 
 	return (
-		<Box d="row" gap {...props}>
+		<Box d="row" gap className={className} {...props}>
 			{options.map((option) => (
 				<Button
 					key={option.skinTone}
@@ -130,8 +119,9 @@ export const EmojiPickerSkinToneSelector = (props: BoxProps) => {
 					toggleMode="color"
 					size="small"
 					aria-label={`Skin tone ${option}`}
-					className="p-xs text-md"
+					className={cls.skinToneButton}
 					onClick={() => setSkinTone(option.skinTone)}
+					forceIconMode
 				>
 					<Button.Icon>{option.emoji}</Button.Icon>
 				</Button>
@@ -171,7 +161,7 @@ const EmojiPickerPrefab = ({
 				<EmojiPickerLoading />
 				<EmojiPickerEmpty />
 			</EmojiPickerViewport>
-			<EmojiPickerSkinToneSelector className="mr-auto" />
+			<EmojiPickerSkinToneSelector className={cls.skinToneSelector} />
 		</EmojiPickerRoot>
 	);
 };

package/src/components/forms/CheckboxField.tsx

@@ -23,7 +23,7 @@ export function CheckboxField({
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Box gap="sm" className={className}>
+		<Box gap="md" className={className}>
 			<Checkbox
 				{...props}
 				checked={props.checked}

package/src/components/forms/EmojiField.module.css

@@ -0,0 +1,8 @@
+.triggerIcon {
+	height: 20px;
+	width: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 20px;
+}

package/src/components/forms/EmojiField.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import { useField } from 'formik';
 import { useState } from 'react';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
@@ -7,6 +6,7 @@ import { Button, ButtonProps } from '../button/Button.js';
 import { EmojiPicker } from '../emojiPicker/EmojiPicker.js';
 import { Icon } from '../icon/Icon.js';
 import { Popover } from '../popover/Popover.js';
+import cls from './EmojiField.module.css';
 import { HorizontalFieldLabel } from './FieldLabel.js';
 
 export type EmojiFieldProps = Omit<ButtonProps, 'className'> & {
@@ -28,18 +28,12 @@ export function EmojiField({
 	const id = useIdOrGenerated(providedId);
 	const [open, setOpen] = useState(false);
 	return (
-		<Box gap="sm" className={className}>
+		<Box gap="md" className={className}>
 			<Popover open={open} onOpenChange={setOpen}>
 				<Popover.Trigger
 					render={
-						<Button
-							id={id}
-							aria-label="Select emoji"
-							size="small"
-							className={clsx('p-0 transition-color', className)}
-							{...rest}
-						>
-							<Button.Icon className="h-touch w-touch flex items-center justify-center text-[19px]">
+						<Button id={id} aria-label="Select emoji" size="wrapper" {...rest}>
+							<Button.Icon className={cls.triggerIcon}>
 								{props.value || <Icon name="smile" />}
 							</Button.Icon>
 						</Button>

package/src/components/forms/FieldLabel.module.css

@@ -0,0 +1,20 @@
+.fieldLabel {
+	display: inline-flex;
+	flex-direction: column;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	margin-inline-start: var(--m-spacing-md);
+	gap: var(--m-spacing-xs);
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	font-weight: bold;
+}
+
+.horizontalFieldLabel {
+	display: inline-flex;
+	flex-direction: row;
+	@apply --mx-fg(var(--m-color-neutral-ink));
+	gap: var(--m-spacing-sm);
+	font-size: var(--m-text-ambient-size);
+	line-height: var(--m-text-ambient-lineHeight);
+	margin-block-start: var(--m-spacing-sm);
+}

package/src/components/forms/FieldLabel.tsx

@@ -1,11 +1,9 @@
 import { withClassName } from '../../hooks.js';
+import cls from './FieldLabel.module.css';
 
-export const FieldLabel = withClassName(
-	'label',
-	'inline-flex flex-col gap-xs text-sm font-bold color-gray-ink ml-md',
-);
+export const FieldLabel = withClassName('label', cls.fieldLabel);
 
 export const HorizontalFieldLabel = withClassName(
 	'label',
-	'inline-flex flex-row items-center gap-sm text-sm color-gray-ink',
+	cls.horizontalFieldLabel,
 );

package/src/components/forms/Form.module.css

@@ -0,0 +1,6 @@
+.form {
+	display: flex;
+	align-items: start;
+	flex-direction: column;
+	gap: var(--m-spacing-md);
+}

package/src/components/forms/Form.tsx

@@ -1,7 +1,5 @@
 import { Form as FormikForm } from 'formik';
 import { withClassName } from '../../hooks/withClassName.js';
+import cls from './Form.module.css';
 
-export const Form = withClassName(
-	FormikForm,
-	'flex flex-col gap-md items-start',
-);
+export const Form = withClassName(FormikForm, cls.form);

package/src/components/forms/FormikForm.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { CheckboxField } from './CheckboxField.js';
 import { EmojiField } from './EmojiField.js';
 import { FormikForm } from './FormikForm.js';

package/src/components/forms/NumberStepperField.module.css

@@ -0,0 +1,5 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	gap: var(--m-spacing-xs);
+}

package/src/components/forms/NumberStepperField.tsx

@@ -6,6 +6,7 @@ import {
 	NumberStepperProps,
 } from '../numberStepper/NumberStepper.js';
 import { FieldLabel } from './FieldLabel.js';
+import cls from './NumberStepperField.module.css';
 
 export interface NumberStepperFieldProps
 	extends Omit<NumberStepperProps, 'value' | 'onChange'> {
@@ -42,7 +43,4 @@ export function NumberStepperField({
 	);
 }
 
-const FieldRoot = withClassName(
-	'div',
-	'layer-components:(flex flex-col gap-2)',
-);
+const FieldRoot = withClassName('div', cls.root);

package/src/components/forms/SwitchField.tsx

@@ -23,7 +23,7 @@ export function SwitchField({
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Box gap="sm" className={className}>
+		<Box gap="md" className={className}>
 			<Switch
 				{...props}
 				checked={props.checked}

package/src/components/forms/TextField.module.css

@@ -0,0 +1,11 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	align-self: stretch;
+	gap: var(--m-spacing-xs);
+}
+
+.input {
+	width: 100%;
+}

package/src/components/forms/TextField.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import clsx from 'clsx';
 import { useField, useFormikContext } from 'formik';
 import {
@@ -16,6 +14,7 @@ import useMergedRef from '../../hooks/useMergedRef.js';
 import { Input, InputProps } from '../input/Input.js';
 import { TextArea, TextAreaProps } from '../textArea/TextArea.js';
 import { FieldLabel } from './FieldLabel.js';
+import cls from './TextField.module.css';
 
 export type TextFieldProps = {
 	name: string;
@@ -69,7 +68,7 @@ export const TextField = function TextField({
 				{...rest}
 				id={id}
 				autoFocus={autoFocus}
-				className={clsx('layer-composed:w-full', inputClassName)}
+				className={clsx(cls.input, inputClassName)}
 				ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
 			/>
 		</FieldRoot>
@@ -128,7 +127,4 @@ export function TextAreaField({
 	);
 }
 
-export const FieldRoot = withClassName(
-	'div',
-	'layer-components:(flex flex-col items-stretch self-stretch gap-xs)',
-);
+export const FieldRoot = withClassName('div', cls.root);

package/src/components/horizontalList/HorizontalList.module.css

@@ -0,0 +1,50 @@
+.root {
+	width: 100%;
+	max-height: 300px;
+	display: flex;
+	flex-direction: column;
+}
+
+.viewport {
+	display: flex;
+	flex-direction: row;
+}
+
+.content {
+	width: max-content;
+	display: flex;
+	flex-shrink: 0;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-sm);
+	padding: var(--m-spacing-sm) var(--m-spacing-sm) var(--m-spacing-md)
+		var(--m-spacing-sm);
+}
+
+.toggleButton {
+	&[data-open='false'] {
+		height: 100%;
+		border-inline-end: var(--m-lineWidth) solid var(--m-color-neutral);
+		border-top-left-radius: var(--m-radius-sm);
+		border-bottom-left-radius: var(--m-radius-sm);
+		border-top-right-radius: 0;
+		border-bottom-right-radius: 0;
+	}
+}
+
+.toggleButtonWrapper {
+	position: sticky;
+	left: 0;
+	height: 100%;
+	top: var(--m-spacing-sm);
+	z-index: 1;
+	flex-shrink: 0;
+	@apply --mx-bg(inherit);
+}
+
+.chevronIcon {
+	transition: transform var(--m-duration) var(--m-easing);
+	&[data-flip='true'] {
+		transform: rotate(180deg);
+	}
+}

package/src/components/horizontalList/HorizontalList.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 import { Button } from '../button/index.js';
 import { Icon } from '../icon/index.js';
@@ -37,12 +37,20 @@ const meta = {
 				<Button size="small">Twenty four</Button>
 				<Button
 					emphasis="primary"
-					className="sticky bottom-2 right-2 ml-auto flex-shrink-0 shadow-sm"
+					style={{
+						position: 'sticky',
+						bottom: 8,
+						right: 8,
+						marginLeft: 'auto',
+						flexShrink: 0,
+						boxShadow: 'var(--m-shadow-sm)',
+					}}
 				>
 					<Icon name="plus" />
 				</Button>
 			</>
 		),
+		onCanOpenChange: () => {},
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -57,17 +65,43 @@ export const Default: Story = {
 	render: (args) => {
 		const [open, setOpen] = useState(false);
 		return (
-			<div className="h-full min-h-80vh flex flex-col items-center bg-black">
-				<div className="w-400px flex flex-1 flex-col items-stretch bg-white">
+			<div
+				style={{
+					height: '100%',
+					minHeight: '80vh',
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'center',
+					backgroundColor: 'var(--m-color-neutral-ink)',
+				}}
+			>
+				<div
+					style={{
+						width: 400,
+						display: 'flex',
+						flexDirection: 'column',
+						flex: 1,
+						alignItems: 'stretch',
+						backgroundColor: 'var(--m-color-neutral-paper)',
+					}}
+				>
 					<Button
 						toggled={open}
 						onClick={() => setOpen(!open)}
-						className="mb-1 mr-1 mt-auto self-end"
+						style={{
+							marginBottom: '0.25rem',
+							marginRight: '0.25rem',
+							marginTop: 'auto',
+							alignSelf: 'flex-end',
+						}}
 					>
 						{open ? 'Close' : 'Open'}
 					</Button>
 					<HorizontalList
-						className="max-h-200px border-t border-t-solid border-t-black"
+						style={{
+							borderTop: '1px solid var(--m-color-neutral)',
+							maxHeight: 200,
+						}}
 						openDirection="up"
 						{...args}
 						open={open}
@@ -83,9 +117,22 @@ export const CantOpen: Story = {
 	render: (args) => {
 		const [more, setMore] = useState(false);
 		return (
-			<div className="h-full w-full flex flex-col items-stretch justify-end bg-white">
+			<div
+				style={{
+					width: '100%',
+					height: '100%',
+					display: 'flex',
+					flexDirection: 'column',
+					alignItems: 'stretch',
+					justifyContent: 'flex-end',
+					backgroundColor: 'var(--m-color-neutral-paper)',
+				}}
+			>
 				<HorizontalList
-					className="max-h-200px border-t border-t-solid border-t-black"
+					style={{
+						maxHeight: 200,
+						borderTop: '1px solid var(--m-color-neutral)',
+					}}
 					openDirection="up"
 					{...args}
 				>
@@ -113,7 +160,14 @@ export const CantOpen: Story = {
 					)}
 					<Button
 						color="primary"
-						className="sticky bottom-2 right-2 ml-auto flex-shrink-0 shadow-sm"
+						style={{
+							position: 'sticky',
+							bottom: 8,
+							right: 8,
+							marginLeft: 'auto',
+							flexShrink: 0,
+							boxShadow: 'var(--m-shadow-sm)',
+						}}
 					>
 						<Icon name="plus" />
 					</Button>

package/src/components/horizontalList/HorizontalList.tsx

@@ -4,6 +4,7 @@ import { Button } from '../button/index.js';
 import { CollapsibleSimple } from '../collapsible/Collapsible.js';
 import { Icon } from '../icon/index.js';
 import { ScrollArea } from '../scrollArea/ScrollArea.js';
+import cls from './HorizontalList.module.css';
 
 export interface HorizontalListProps {
 	open?: boolean;
@@ -14,6 +15,7 @@ export interface HorizontalListProps {
 	onCanOpenChange?: (canOpen: boolean) => void;
 	openDirection?: 'up' | 'down';
 	disableInternalOpenToggle?: boolean;
+	style?: React.CSSProperties;
 }
 
 export function HorizontalList({
@@ -46,8 +48,8 @@ export function HorizontalList({
 		(canOpen: boolean) => {
 			if (canOpen !== lastCanOpenChangeEmitted.current) {
 				lastCanOpenChangeEmitted.current = canOpen;
-				onCanOpenChange?.(canOpen);
 				setInternalCanOpen(canOpen);
+				onCanOpenChange?.(canOpen);
 			}
 		},
 		[onCanOpenChange],
@@ -84,7 +86,7 @@ export function HorizontalList({
 					emitCanOpenChange(true);
 				});
 		} else {
-			content.style.setProperty('width', `auto`);
+			content.style.setProperty('width', `max-content`);
 			content.style.setProperty('flex-wrap', 'nowrap');
 			// force measure to get new height
 			const contentHeight = content.offsetHeight;
@@ -138,45 +140,30 @@ export function HorizontalList({
 
 	return (
 		<ScrollArea.Root
-			className={clsx(
-				'layer-components:(w-full flex flex-col)',
-				'layer-components:max-h-300px',
-				className,
-			)}
+			className={clsx(cls.root, className)}
 			data-state={open ? 'open' : 'closed'}
 			{...rest}
 		>
 			<ScrollArea.Viewport ref={containerRef}>
-				<div
-					className={clsx(
-						'layer-components:(gap-2 px-3 pb-4 pt-3)',
-						'w-max-content flex flex-shrink-0 flex-row items-center gap-2',
-						contentClassName,
-					)}
-					ref={contentRef}
-				>
+				<div className={clsx(cls.content, contentClassName)} ref={contentRef}>
 					<CollapsibleSimple
 						horizontal
 						open={internalCanOpen && !disableInternalOpenToggle}
 						data-can-open={internalCanOpen}
 						data-disabled={disableInternalOpenToggle ? '' : undefined}
+						className={cls.toggleButtonWrapper}
 					>
 						<Button
 							onClick={toggleOpen}
 							emphasis="ghost"
-							className={clsx(
-								'layer-variants:(sticky left-0 top-2 z-1 flex-shrink-0)',
-								'ring-inset foc',
-								!open &&
-									'layer-variants:(h-full border-r rounded-l-sm rounded-r-none border-r-solid border-r-gray)',
-							)}
+							className={clsx(cls.toggleButton)}
+							data-open={open}
+							aria-label={open ? 'Collapse list' : 'Expand list'}
 						>
 							<Icon
 								name="chevron"
-								className={clsx(
-									'transition-transform',
-									chevronFlip && 'rotate-180',
-								)}
+								className={clsx(cls.chevronIcon)}
+								data-flip={chevronFlip}
 							/>
 						</Button>
 					</CollapsibleSimple>