@a-type/ui 6.0.22 → 6.0.24

package/dist/components/forms/index.js

@@ -1,5 +1,5 @@
 export * from './CheckboxField.js';
-export * from './FieldLabel.js';
+export * from './Field.js';
 export * from './Form.js';
 export * from './FormikForm.js';
 export * from './hooks.js';

package/dist/components/forms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/forms/index.tsx"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}

package/dist/components/switch/Switch.module.css

@@ -15,7 +15,7 @@
 	--mx-shadow-value: inset var(--m-shadow-sm);
 
 	@apply --mx-bg(var(--m-control-bg));
-	@apply --mx-borderColor(var(--m-control-border));
+	@apply --mx-borderColor(var(--m-control-borderColor));
 	border-radius: var(--m-radius-lg);
 
 	&[data-checked] {

package/package.json

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

package/src/components/forms/CheckboxField.tsx

@@ -1,8 +1,8 @@
 import { useField } from 'formik';
+import { ReactNode } from 'react';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
-import { Box } from '../box/Box.js';
 import { Checkbox } from '../checkbox/index.js';
-import { HorizontalFieldLabel } from './FieldLabel.js';
+import { Field } from './Field.js';
 
 export interface CheckboxFieldProps {
 	name: string;
@@ -10,6 +10,7 @@ export interface CheckboxFieldProps {
 	required?: boolean;
 	className?: string;
 	id?: string;
+	description?: ReactNode;
 }
 
 export function CheckboxField({
@@ -18,24 +19,27 @@ export function CheckboxField({
 	className,
 	required,
 	id: providedId,
+	description,
 	...rest
 }: CheckboxFieldProps) {
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Box gap="md" className={className}>
-			<Checkbox
-				{...props}
-				checked={props.checked}
-				onCheckedChange={(v) => {
-					tools.setValue(!!v);
-				}}
-				id={id}
-				{...rest}
+		<Field horizontal className={className} id={id}>
+			<Field.Control
+				render={
+					<Checkbox
+						{...props}
+						checked={props.checked}
+						onCheckedChange={(v) => {
+							tools.setValue(!!v);
+						}}
+						{...rest}
+					/>
+				}
 			/>
-			{label && (
-				<HorizontalFieldLabel htmlFor={id}>{label}</HorizontalFieldLabel>
-			)}
-		</Box>
+			{label && <Field.Label>{label}</Field.Label>}
+			{description && <Field.Description>{description}</Field.Description>}
+		</Field>
 	);
 }

package/src/components/forms/EmojiField.tsx

@@ -1,19 +1,19 @@
 import { useField } from 'formik';
-import { useState } from 'react';
+import { ReactNode, useState } from 'react';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
-import { Box } from '../box/Box.js';
 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';
+import { Field } from './Field.js';
 
 export type EmojiFieldProps = Omit<ButtonProps, 'className'> & {
 	name: string;
 	label?: string;
 	required?: string;
 	className?: string;
+	description?: ReactNode;
 };
 
 export function EmojiField({
@@ -22,17 +22,24 @@ export function EmojiField({
 	className,
 	required,
 	id: providedId,
+	description,
 	...rest
 }: EmojiFieldProps) {
 	const [props, _, tools] = useField({ name });
 	const id = useIdOrGenerated(providedId);
 	const [open, setOpen] = useState(false);
 	return (
-		<Box gap="md" className={className}>
+		<Field horizontal className={className} id={id}>
 			<Popover open={open} onOpenChange={setOpen}>
+				<Field.Control render={<input type="hidden" {...props} />} />
 				<Popover.Trigger
 					render={
-						<Button id={id} aria-label="Select emoji" size="wrapper" {...rest}>
+						<Button
+							id={`${id}-trigger`}
+							aria-label="Select emoji"
+							size="wrapper"
+							{...rest}
+						>
 							<Button.Icon className={cls.triggerIcon}>
 								{props.value || <Icon name="smile" />}
 							</Button.Icon>
@@ -57,9 +64,8 @@ export function EmojiField({
 					/>
 				</Popover.Content>
 			</Popover>
-			{label && (
-				<HorizontalFieldLabel htmlFor={id}>{label}</HorizontalFieldLabel>
-			)}
-		</Box>
+			{label && <Field.Label>{label}</Field.Label>}
+			{description && <Field.Description>{description}</Field.Description>}
+		</Field>
 	);
 }

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

@@ -0,0 +1,62 @@
+.root {
+	display: grid;
+	grid-template-areas: 'label' 'control' 'description';
+	justify-content: start;
+
+	&[data-horizontal] {
+		flex-direction: row;
+		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] {
+		align-self: stretch;
+		justify-content: stretch;
+	}
+}
+
+.control {
+	grid-area: control;
+
+	[data-stretch] & {
+		align-self: stretch;
+		justify-content: stretch;
+		width: 100%;
+	}
+}
+
+.label {
+	grid-area: label;
+	@apply --mx-prose-ambient;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-weight: var(--m-text-weight-bold);
+	margin-bottom: var(--m-space-xs);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
+
+	[data-horizontal] & {
+		@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)
+			);
+		}
+	}
+}
+
+.description {
+	grid-area: description;
+	@apply --mx-prose-ambient;
+	@apply --mx-fg(var(--m-color-neutral-heavy));
+	font-style: italic;
+	margin-top: var(--m-space-sm);
+	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
+}

package/src/components/forms/Field.tsx

@@ -0,0 +1,125 @@
+import clsx from 'clsx';
+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;
+}
+
+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.control, className)}
+			id={id}
+			ref={finalRef}
+			{...props}
+		/>
+	);
+}
+
+function FieldLabel({ className, ...props }: ComponentProps<'label'>) {
+	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}
+		/>
+	);
+}
+
+export const Field = Object.assign(FieldRoot, {
+	Label: FieldLabel,
+	Description: FieldDescription,
+	Control: FieldControl,
+});

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

@@ -2,5 +2,5 @@
 	display: flex;
 	align-items: start;
 	flex-direction: column;
-	gap: var(--m-space-md);
+	gap: var(--m-space-lg);
 }

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

@@ -47,19 +47,39 @@ export const Default: Story = {
 					label="Email"
 					placeholder="you@example.com"
 				/>
-				<TextField name="password" type="password" label="Password" />
-				<NumberStepperField name="age" label="Age" min={13} max={100} />
-				<CheckboxField name="tos" label="I agree" />
-				<SwitchField name="newsletter" label="Subscribe to newsletter" />
+				<TextField
+					name="password"
+					type="password"
+					label="Password"
+					description="Make it a good one"
+				/>
+				<NumberStepperField
+					name="age"
+					label="Age"
+					min={13}
+					max={100}
+					description="You can mail your government ID to us, don't worry, we're the good guys"
+				/>
+				<CheckboxField
+					name="tos"
+					label="I agree"
+					description="To what? Not telling."
+				/>
+				<SwitchField
+					name="newsletter"
+					label="Subscribe to newsletter"
+					description="Don't worry, we don't bother you much"
+				/>
 				<ToggleGroupField
 					type="single"
 					name="plan"
 					label="Select your plan"
 					required
+					description="Please do the expensive one!!!"
 				>
 					<ToggleGroupField.Item value="basic">Basic</ToggleGroupField.Item>
 					<ToggleGroupField.Item value="pro">Pro</ToggleGroupField.Item>
-					<ToggleGroupField.Item value="enterprise">
+					<ToggleGroupField.Item value="enterprise" className="@mode-accent">
 						Enterprise
 					</ToggleGroupField.Item>
 				</ToggleGroupField>

package/src/components/forms/NumberStepperField.tsx

@@ -1,12 +1,11 @@
 import { useField } from 'formik';
-import { withClassName } from '../../hooks.js';
+import { ReactNode } from 'react';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 import {
 	NumberStepper,
 	NumberStepperProps,
 } from '../numberStepper/NumberStepper.js';
-import { FieldLabel } from './FieldLabel.js';
-import cls from './NumberStepperField.module.css';
+import { Field } from './Field.js';
 
 export interface NumberStepperFieldProps
 	extends Omit<NumberStepperProps, 'value' | 'onChange'> {
@@ -15,6 +14,7 @@ export interface NumberStepperFieldProps
 	className?: string;
 	id?: string;
 	onChange?: (value: number) => void;
+	description?: ReactNode;
 }
 
 export function NumberStepperField({
@@ -23,24 +23,27 @@ export function NumberStepperField({
 	className,
 	id: providedId,
 	onChange,
+	description,
 	...rest
 }: NumberStepperFieldProps) {
 	const [_, field, tools] = useField({ name });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<FieldRoot className={className}>
-			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-			<NumberStepper
-				value={field.value}
-				onChange={(v) => {
-					tools.setValue(v);
-					onChange?.(v);
-				}}
-				id={id}
-				{...rest}
+		<Field className={className} id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
+			<Field.Control
+				render={
+					<NumberStepper
+						value={field.value}
+						onChange={(v) => {
+							tools.setValue(v);
+							onChange?.(v);
+						}}
+						{...rest}
+					/>
+				}
 			/>
-		</FieldRoot>
+			{description && <Field.Description>{description}</Field.Description>}
+		</Field>
 	);
 }
-
-const FieldRoot = withClassName('div', cls.root);

package/src/components/forms/SwitchField.tsx

@@ -1,8 +1,8 @@
 import { useField } from 'formik';
+import { ReactNode } from 'react';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
-import { Box } from '../box/Box.js';
 import { Switch } from '../switch/Switch.js';
-import { HorizontalFieldLabel } from './FieldLabel.js';
+import { Field } from './Field.js';
 
 export interface SwitchFieldProps {
 	name: string;
@@ -10,6 +10,7 @@ export interface SwitchFieldProps {
 	required?: boolean;
 	className?: string;
 	id?: string;
+	description?: ReactNode;
 }
 
 export function SwitchField({
@@ -18,24 +19,27 @@ export function SwitchField({
 	className,
 	required,
 	id: providedId,
+	description,
 	...rest
 }: SwitchFieldProps) {
 	const [props, _, tools] = useField({ name, required, type: 'checkbox' });
 	const id = useIdOrGenerated(providedId);
 	return (
-		<Box gap="md" className={className}>
-			<Switch
-				{...props}
-				checked={props.checked}
-				onCheckedChange={(v) => {
-					tools.setValue(!!v);
-				}}
-				id={id}
-				{...rest}
+		<Field horizontal className={className} id={id}>
+			<Field.Control
+				render={
+					<Switch
+						{...props}
+						checked={props.checked}
+						onCheckedChange={(v) => {
+							tools.setValue(!!v);
+						}}
+						{...rest}
+					/>
+				}
 			/>
-			{label && (
-				<HorizontalFieldLabel htmlFor={id}>{label}</HorizontalFieldLabel>
-			)}
-		</Box>
+			{label && <Field.Label>{label}</Field.Label>}
+			{description && <Field.Description>{description}</Field.Description>}
+		</Field>
 	);
 }

package/src/components/forms/TextField.tsx

@@ -3,17 +3,17 @@ import { useField, useFormikContext } from 'formik';
 import {
 	InputHTMLAttributes,
 	KeyboardEvent,
+	ReactNode,
 	Ref,
 	useCallback,
 	useEffect,
 	useRef,
 } from 'react';
-import { withClassName } from '../../hooks.js';
 import { useIdOrGenerated } from '../../hooks/useIdOrGenerated.js';
 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 { Field } from './Field.js';
 import cls from './TextField.module.css';
 
 export type TextFieldProps = {
@@ -24,6 +24,7 @@ export type TextFieldProps = {
 	inputRef?: Ref<HTMLInputElement>;
 	inputClassName?: string;
 	ref?: Ref<HTMLDivElement>;
+	description?: ReactNode;
 } & Omit<InputProps, 'ref'>;
 
 const emptyRef = (() => {}) as any;
@@ -41,6 +42,7 @@ export const TextField = function TextField({
 	onBlur,
 	id: providedId,
 	inputClassName,
+	description,
 	...rest
 }: TextFieldProps) {
 	const [props] = useField({
@@ -61,17 +63,21 @@ export const TextField = function TextField({
 	}, [autoFocusDelay]);
 
 	return (
-		<FieldRoot className={className} ref={ref}>
-			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-			<Input
-				{...props}
-				{...rest}
-				id={id}
-				autoFocus={autoFocus}
-				className={clsx(cls.input, inputClassName)}
-				ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
+		<Field className={className} stretch ref={ref} id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
+			<Field.Control
+				render={
+					<Input
+						{...props}
+						{...rest}
+						autoFocus={autoFocus}
+						className={clsx(cls.input, inputClassName)}
+						ref={useMergedRef(innerInputRef, inputRef || emptyRef)}
+					/>
+				}
 			/>
-		</FieldRoot>
+			{description && <Field.Description>{description}</Field.Description>}
+		</Field>
 	);
 };
 
@@ -85,7 +91,9 @@ export type TextAreaFieldProps = {
 	inputRef?: Ref<HTMLTextAreaElement>;
 	submitOnEnter?: boolean;
 	textAreaClassName?: string;
-} & TextAreaProps;
+	description?: ReactNode;
+	ref?: Ref<HTMLDivElement>;
+} & Omit<TextAreaProps, 'ref'>;
 
 export function TextAreaField({
 	name,
@@ -96,6 +104,8 @@ export function TextAreaField({
 	submitOnEnter,
 	id: providedId,
 	textAreaClassName,
+	description,
+	ref,
 	...rest
 }: TextAreaFieldProps) {
 	const [props] = useField(name);
@@ -113,18 +123,20 @@ export function TextAreaField({
 	const id = useIdOrGenerated(providedId);
 
 	return (
-		<FieldRoot className={className}>
-			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
-			<TextArea
-				ref={inputRef as any}
-				{...props}
-				{...rest}
-				className={clsx('layer-composed:w-full', textAreaClassName)}
-				id={id}
-				onKeyDown={onKeyDownInner}
+		<Field stretch className={className} ref={ref} id={id}>
+			{label && <Field.Label>{label}</Field.Label>}
+			<Field.Control
+				render={
+					<TextArea
+						ref={inputRef as any}
+						{...props}
+						{...rest}
+						className={clsx(cls.input, textAreaClassName)}
+						onKeyDown={onKeyDownInner}
+					/>
+				}
 			/>
-		</FieldRoot>
+			{description && <Field.Description>{description}</Field.Description>}
+		</Field>
 	);
 }
-
-export const FieldRoot = withClassName('div', cls.root);