@a-type/ui 6.0.23 → 6.0.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "6.0.23",
+  "version": "6.0.25",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/arbor/arbor.ts

@@ -68,7 +68,6 @@ export function presetAtype<
 			minFontSize: '12px',
 			minWeight: 200,
 			maxWeight: 600,
-			weightStep: 100,
 			baseWeight: 400,
 			lineHeightStep: 0.125,
 			minLineHeight: 1,
@@ -461,9 +460,12 @@ export function presetAtype<
 	preset.bundleMode('bold', {
 		global: {
 			typography: {
-				minWeight: 300,
+				minWeight: 200,
 				maxWeight: 800,
-				baseWeight: 500,
+				baseWeight: 450,
+			},
+			shape: {
+				lineWidth: 2,
 			},
 		},
 	});

package/src/components/card/Card.module.css

@@ -41,9 +41,6 @@
 	padding: var(--m-space-md);
 	padding-bottom: var(--m-space-xs);
 	gap: var(--m-space-sm);
-	&[data-compact='true'] {
-		padding-bottom: 0;
-	}
 
 	transition: all var(--m-duration) var(--m-easing);
 
@@ -83,13 +80,7 @@
 	z-index: 1;
 	padding: var(--m-space-xs) var(--m-space-md);
 
-	font-size: var(--m-prose-primary-size);
-	line-height: var(--m-prose-primary-lineHeight);
-	font-weight: var(--m-prose-primary-weight);
-
-	[data-compact] & {
-		font-size: var(--m-prose-ambient-size);
-	}
+	@apply --mx-prose-primary;
 
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -107,11 +98,6 @@
 	line-height: 1;
 	font-weight: var(--m-prose-ambient-weight);
 
-	[data-compact] & {
-		padding: 0 var(--m-space-xs);
-		margin: 0 var(--m-space-sm);
-	}
-
 	&[data-unstyled] {
 		background-color: unset;
 		padding: 0;

package/src/components/card/Card.tsx

@@ -15,9 +15,12 @@ import cls from './Card.module.css';
 
 export const CardRoot = withClassName(withProps(Box, { col: true }), cls.root);
 
+export type CardSize = 'sm' | 'md' | 'lg';
+
 export function CardMain({
 	className,
 	compact,
+	size = compact ? 'sm' : 'md',
 	nonInteractive,
 	ref,
 	style,
@@ -36,7 +39,9 @@ export function CardMain({
 	className?: string;
 	onClick?: (ev: MouseEvent) => void;
 	children?: ReactNode;
+	/** @deprecated use size=sm */
 	compact?: boolean;
+	size?: CardSize;
 	/** forces non-interactive version */
 	nonInteractive?: boolean;
 	visuallyFocused?: boolean;
@@ -48,7 +53,15 @@ export function CardMain({
 
 	const rootProps = {
 		...rest,
-		className: classNames(cls.main, className),
+		className: classNames(
+			cls.main,
+			{
+				'@mode-normal': size === 'lg',
+				'@mode-dense': size === 'md',
+				'@mode-denser': size === 'sm',
+			},
+			className,
+		),
 		style,
 		children,
 	};
@@ -60,9 +73,9 @@ export function CardMain({
 		render,
 		state: {
 			interactive: !!isInteractive,
-			compact: !!compact,
 			'focus-visible': !!visuallyFocused,
 			disabled: !!visuallyDisabled,
+			size,
 		},
 	});
 
@@ -74,9 +87,10 @@ export const CardTitle = withClassName(
 		surface: 'ambient',
 		gap: 'sm',
 		col: true,
-		rounded: 'sm',
+		rounded: 'md',
 	}),
 	cls.title,
+	'@mode-bold',
 );
 
 const CardContentRoot = withClassName(

package/src/components/forms/CheckboxField.tsx

@@ -25,25 +25,21 @@ export function CheckboxField({
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Field horizontal className={className}>
-			<Field.Control>
-				<Checkbox
-					{...props}
-					checked={props.checked}
-					onCheckedChange={(v) => {
-						tools.setValue(!!v);
-					}}
-					id={id}
-					aria-describedby={description ? `${id}-description` : undefined}
-					{...rest}
-				/>
-			</Field.Control>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+		<Field horizontal className={className} id={id}>
+			<Field.Control
+				render={
+					<Checkbox
+						{...props}
+						checked={props.checked}
+						onCheckedChange={(v) => {
+							tools.setValue(!!v);
+						}}
+						{...rest}
+					/>
+				}
+			/>
+			{label && <Field.Label>{label}</Field.Label>}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

package/src/components/forms/EmojiField.tsx

@@ -29,54 +29,43 @@ export function EmojiField({
 	const id = useIdOrGenerated(providedId);
 	const [open, setOpen] = useState(false);
 	return (
-		<Field horizontal className={className}>
-			<Field.Control>
-				<Popover open={open} onOpenChange={setOpen}>
-					<input
-						type="hidden"
-						{...props}
-						id={id}
-						aria-describedby={description ? `${id}-description` : undefined}
-					/>
-					<Popover.Trigger
-						render={
-							<Button
-								id={`${id}-trigger`}
-								aria-label="Select emoji"
-								size="wrapper"
-								{...rest}
-							>
-								<Button.Icon className={cls.triggerIcon}>
-									{props.value || <Icon name="smile" />}
-								</Button.Icon>
-							</Button>
+		<Field horizontal className={className} id={id}>
+			<Popover open={open} onOpenChange={setOpen}>
+				<Field.Control render={<input type="hidden" {...props} />} />
+				<Popover.Trigger
+					render={
+						<Button
+							id={`${id}-trigger`}
+							aria-label="Select emoji"
+							size="wrapper"
+							{...rest}
+						>
+							<Button.Icon className={cls.triggerIcon}>
+								{props.value || <Icon name="smile" />}
+							</Button.Icon>
+						</Button>
+					}
+				/>
+				<Popover.Content>
+					<EmojiPicker
+						onValueChange={(v) => {
+							tools.setValue(v);
+							setOpen(false);
+						}}
+						onClear={
+							required
+								? undefined
+								: () => {
+										tools.setValue('');
+										setOpen(false);
+								  }
 						}
+						id={id}
 					/>
-					<Popover.Content>
-						<EmojiPicker
-							onValueChange={(v) => {
-								tools.setValue(v);
-								setOpen(false);
-							}}
-							onClear={
-								required
-									? undefined
-									: () => {
-											tools.setValue('');
-											setOpen(false);
-									  }
-							}
-							id={id}
-						/>
-					</Popover.Content>
-				</Popover>
-			</Field.Control>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+				</Popover.Content>
+			</Popover>
+			{label && <Field.Label>{label}</Field.Label>}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

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

@@ -8,6 +8,10 @@
 		align-items: center;
 		grid-template-areas: 'control label' 'description description';
 		grid-template-columns: auto 1fr;
+		&[data-reverse] {
+			grid-template-areas: 'label control' 'description description';
+			grid-template-columns: auto 1fr;
+		}
 	}
 
 	&[data-stretch] {
@@ -18,12 +22,12 @@
 
 .control {
 	grid-area: control;
-}
-:where(.control) {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	gap: var(--m-space-sm);
+
+	[data-stretch] & {
+		align-self: stretch;
+		justify-content: stretch;
+		width: 100%;
+	}
 }
 
 .label {
@@ -38,6 +42,13 @@
 		@apply --mx-fg(var(--m-color-neutral-ink));
 		font-weight: var(--m-text-weight-normal);
 		margin-block-start: --fn-literal(5px);
+
+		[data-reverse] & {
+			margin-inline-start: 0;
+			margin-inline-end: calc(
+				var(--m-global-shape-roundness) * var(--m-space-md)
+			);
+		}
 	}
 }
 

package/src/components/forms/Field.tsx

@@ -1,36 +1,118 @@
 import clsx from 'clsx';
-import { ComponentProps } from 'react';
+import {
+	ComponentProps,
+	createContext,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from 'react';
+import useMergedRef from '../../hooks/useMergedRef.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 import cls from './Field.module.css';
 
 export interface FieldRootProps extends ComponentProps<'div'> {
 	horizontal?: boolean;
 	stretch?: boolean;
+	reverse?: boolean;
+	/**
+	 * This ID will be passed to Control, and Label will be associated.
+	 */
+	id?: string;
 }
 
-function FieldRoot({ className, horizontal, ...props }: FieldRootProps) {
+const FieldContext = createContext<{ id?: string; events: EventTarget }>({
+	events: new EventTarget(),
+});
+
+function FieldRoot({
+	className,
+	horizontal,
+	stretch,
+	reverse,
+	id,
+	...props
+}: FieldRootProps) {
+	const [events] = useState(() => new EventTarget());
+	return (
+		<FieldContext.Provider value={{ id, events }}>
+			<SlotDiv
+				className={clsx(cls.root, className)}
+				data-horizontal={horizontal ? '' : undefined}
+				data-stretch={stretch ? '' : undefined}
+				data-reverse={reverse ? '' : undefined}
+				{...props}
+			/>
+		</FieldContext.Provider>
+	);
+}
+
+function FieldControl({
+	className,
+	ref,
+	...props
+}: ComponentProps<typeof SlotDiv>) {
+	const innerRef = useRef<HTMLElement>(null);
+	const finalRef = useMergedRef(ref, innerRef);
+	const { id, events } = useContext(FieldContext);
+
+	useEffect(() => {
+		if (!id) return;
+
+		function onDescriptionVisible(event: CustomEvent) {
+			if (event.detail === true) {
+				innerRef.current?.setAttribute('aria-describedby', `${id}-description`);
+			} else {
+				innerRef.current?.removeAttribute('aria-describedby');
+			}
+		}
+
+		events.addEventListener(
+			'description-visible',
+			onDescriptionVisible as EventListener,
+		);
+		return () => {
+			events.removeEventListener(
+				'description-visible',
+				onDescriptionVisible as EventListener,
+			);
+		};
+	}, [events, id]);
+
 	return (
 		<SlotDiv
-			className={clsx(cls.root, className)}
-			data-horizontal={horizontal ? '' : undefined}
-			data-stretch={props.stretch ? '' : undefined}
+			className={clsx(cls.control, className)}
+			id={id}
+			ref={finalRef}
 			{...props}
 		/>
 	);
 }
 
-function FieldControl({ className, ...props }: ComponentProps<typeof SlotDiv>) {
-	return <SlotDiv className={clsx(cls.control, className)} {...props} />;
-}
-
 function FieldLabel({ className, ...props }: ComponentProps<'label'>) {
-	return <label className={clsx(cls.label, className)} {...props} />;
+	const { id } = useContext(FieldContext);
+	return (
+		<label className={clsx(cls.label, className)} htmlFor={id} {...props} />
+	);
 }
 
 function FieldDescription({ className, ...props }: ComponentProps<'div'>) {
+	const { id, events } = useContext(FieldContext);
+
+	useEffect(() => {
+		events.dispatchEvent(
+			new CustomEvent('description-visible', { detail: true }),
+		);
+		return () => {
+			events.dispatchEvent(
+				new CustomEvent('description-visible', { detail: false }),
+			);
+		};
+	}, [events]);
 	return (
 		<div
 			className={clsx('@mode-dense', cls.description, className)}
+			id={id ? `${id}-description` : undefined}
 			{...props}
 		/>
 	);

package/src/components/forms/NumberStepperField.tsx

@@ -26,28 +26,27 @@ export function NumberStepperField({
 	description,
 	...rest
 }: NumberStepperFieldProps) {
-	const [_, field, tools] = useField({ name });
+	const [props, field, tools] = useField({ name });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Field className={className} horizontal>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			<Field.Control>
-				<NumberStepper
-					value={field.value}
-					onChange={(v) => {
-						tools.setValue(v);
-						onChange?.(v);
-					}}
-					id={id}
-					aria-describedby={description ? `${id}-description` : undefined}
-					{...rest}
-				/>
-			</Field.Control>
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+		<Field className={className} id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
+			<Field.Control
+				render={(composed) => (
+					<>
+						<input type="hidden" {...props} {...composed} />
+						<NumberStepper
+							value={field.value}
+							onChange={(v) => {
+								tools.setValue(v);
+								onChange?.(v);
+							}}
+							{...rest}
+						/>
+					</>
+				)}
+			/>
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

package/src/components/forms/SwitchField.tsx

@@ -25,25 +25,21 @@ export function SwitchField({
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Field horizontal className={className}>
-			<Field.Control>
-				<Switch
-					{...props}
-					checked={props.checked}
-					onCheckedChange={(v) => {
-						tools.setValue(!!v);
-					}}
-					id={id}
-					aria-describedby={description ? `${id}-description` : undefined}
-					{...rest}
-				/>
-			</Field.Control>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+		<Field horizontal className={className} id={id}>
+			<Field.Control
+				render={
+					<Switch
+						{...props}
+						checked={props.checked}
+						onCheckedChange={(v) => {
+							tools.setValue(!!v);
+						}}
+						{...rest}
+					/>
+				}
+			/>
+			{label && <Field.Label>{label}</Field.Label>}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

package/src/components/forms/TextField.tsx

@@ -63,26 +63,20 @@ export const TextField = function TextField({
 	}, [autoFocusDelay]);
 
 	return (
-		<Field className={className} stretch ref={ref}>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
+		<Field className={className} stretch ref={ref} id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={
 					<Input
 						{...props}
 						{...rest}
-						id={id}
 						autoFocus={autoFocus}
 						className={clsx(cls.input, inputClassName)}
 						ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
-						aria-describedby={description ? `${id}-description` : undefined}
 					/>
 				}
 			/>
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 };
@@ -129,8 +123,8 @@ export function TextAreaField({
 	const id = useIdOrGenerated(providedId);
 
 	return (
-		<Field stretch className={className} ref={ref}>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
+		<Field stretch className={className} ref={ref} id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
 			<Field.Control
 				render={
 					<TextArea
@@ -138,17 +132,11 @@ export function TextAreaField({
 						{...props}
 						{...rest}
 						className={clsx(cls.input, textAreaClassName)}
-						id={id}
 						onKeyDown={onKeyDownInner}
-						aria-describedby={description ? `${id}-description` : undefined}
 					/>
 				}
 			/>
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }

package/src/components/forms/ToggleGroupField.tsx

@@ -1,5 +1,6 @@
 import { useField } from 'formik';
 import { ReactNode } from 'react';
+import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import { ToggleGroup, ToggleGroupProps } from '../toggleGroup/toggleGroup.js';
 import { Field } from './Field.js';
 
@@ -22,36 +23,33 @@ function ToggleGroupFieldDefault({
 	type = 'single',
 	multiple,
 	description,
-	id,
+	id: providedId,
 	...props
 }: ToggleGroupFieldProps<string>) {
+	const id = useIdOrGenerated(providedId);
 	const [fieldProps, _, tools] = useField({ name, required, ...props });
 
 	return (
-		<Field>
-			{label && <Field.Label htmlFor={id}>{label}</Field.Label>}
-			<Field.Control>
-				<ToggleGroup
-					{...fieldProps}
-					onValueChange={(v) => {
-						if (multiple || type === 'multiple') {
-							tools.setValue(v);
-						} else {
-							tools.setValue(v[0]);
-						}
-					}}
-					multiple={multiple || type === 'multiple'}
-					{...props}
-					id={id}
-					className={className}
-					aria-describedby={description ? `${id}-description` : undefined}
-				/>
-			</Field.Control>
-			{description && (
-				<Field.Description id={`${id}-description`}>
-					{description}
-				</Field.Description>
-			)}
+		<Field id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
+			<Field.Control
+				render={
+					<ToggleGroup
+						{...fieldProps}
+						onValueChange={(v) => {
+							if (multiple || type === 'multiple') {
+								tools.setValue(v);
+							} else {
+								tools.setValue(v[0]);
+							}
+						}}
+						multiple={multiple || type === 'multiple'}
+						{...props}
+						className={className}
+					/>
+				}
+			/>
+			{description && <Field.Description>{description}</Field.Description>}
 		</Field>
 	);
 }