@a-type/ui 5.0.21 → 6.0.0

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/forms/ToggleGroupField.tsx

@@ -3,14 +3,15 @@ import { ToggleGroup, ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
 import { FieldLabel } from './FieldLabel.js';
 import { FieldRoot } from './TextField.js';
 
-export type ToggleGroupFieldProps = ToggleGroupProps & {
-	name: string;
-	label?: string;
-	required?: boolean;
-	className?: string;
-	id?: string;
-	type?: 'single' | 'multiple';
-};
+export type ToggleGroupFieldProps<Value extends string> =
+	ToggleGroupProps<Value> & {
+		name: string;
+		label?: string;
+		required?: boolean;
+		className?: string;
+		id?: string;
+		type?: 'single' | 'multiple';
+	};
 
 function ToggleGroupFieldDefault({
 	name,
@@ -18,9 +19,10 @@ function ToggleGroupFieldDefault({
 	required,
 	className,
 	type = 'single',
+	multiple,
 	id,
 	...props
-}: ToggleGroupFieldProps) {
+}: ToggleGroupFieldProps<string>) {
 	const [fieldProps, _, tools] = useField({ name, required, ...props });
 
 	return (
@@ -29,12 +31,13 @@ function ToggleGroupFieldDefault({
 			<ToggleGroup
 				{...fieldProps}
 				onValueChange={(v) => {
-					if (type === 'multiple') {
+					if (multiple || type === 'multiple') {
 						tools.setValue(v);
 					} else {
 						tools.setValue(v[0]);
 					}
 				}}
+				multiple={multiple || type === 'multiple'}
 				{...props}
 				id={id}
 				className={className}

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>