@a-type/ui 5.0.21 → 6.0.0

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>

package/src/components/icon/Icon.module.css

@@ -0,0 +1,9 @@
+.root {
+	fill: none;
+	flex-shrink: 0;
+}
+
+.spinner {
+	display: inline-block;
+	flex-shrink: 0;
+}

package/src/components/icon/Icon.stories.tsx

@@ -1,4 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Box } from '../box/Box.js';
 import { Icon } from './Icon.js';
 import { iconNames } from './generated/iconNames.js';
 
@@ -31,15 +32,32 @@ export const Default: Story = {
 export const All: Story = {
 	render() {
 		return (
-			<div className="grid grid-cols-6 gap-xs">
+			<div
+				style={{
+					display: 'grid',
+					gridTemplateColumns: 'repeat(6, 1fr)',
+					gap: 'var(--m-spacing-xs)',
+				}}
+			>
 				{iconNames.map((name) => (
-					<div
+					<Box
+						surface="ambient"
+						col
+						p="sm"
+						layout="center center"
+						border
 						key={name}
-						className="flex flex-col items-center justify-center gap-2 border p-4 border-gray-light"
 					>
 						<Icon name={name} size={25} />
-						<span className="text-center text-sm">{name}</span>
-					</div>
+						<span
+							style={{
+								textAlign: 'center',
+								fontSize: 'var(--m-text-ambient-size)',
+							}}
+						>
+							{name}
+						</span>
+					</Box>
 				))}
 			</div>
 		);

package/src/components/icon/Icon.tsx

@@ -1,63 +1,62 @@
-import { useRender, UseRenderComponentProps } from '@base-ui/react/use-render';
-import classNames from 'clsx';
-import { Spinner } from '../spinner/Spinner.js';
-import { IconName } from './generated/iconNames.js';
-import { useIconLoading } from './IconLoadingContext.js';
-
-export interface IconProps
-	extends UseRenderComponentProps<
-		'svg',
-		{ size: number; name: IconName; loading: boolean }
-	> {
-	name: IconName;
-	size?: number;
-	loading?: boolean;
-}
-
-export const Icon = function Icon({
-	ref,
-	name,
-	size = 15,
-	className,
-	loading: loadingProp,
-	render,
-	...rest
-}: IconProps & {
-	ref?: React.Ref<SVGSVGElement>;
-}) {
-	const loadingContext = useIconLoading();
-	const loading = loadingProp !== false && (loadingProp || loadingContext);
-
-	const slotted = useRender({
-		defaultTagName: 'svg',
-		ref,
-		props: {
-			className: classNames(
-				'icon',
-				'flex-shrink-0 layer-components:fill-none',
-				className,
-			),
-			width: size,
-			height: size,
-			children: <use xlinkHref={`#icon-${name}`} />,
-			...rest,
-		},
-		state: {
-			size,
-			name,
-			loading,
-		},
-		render,
-	});
-
-	if (loading) {
-		return (
-			<Spinner
-				size={size}
-				className={classNames('icon inline-block flex-shrink-0', className)}
-			/>
-		);
-	}
-
-	return slotted;
-};
+import { useRender, UseRenderComponentProps } from '@base-ui/react/use-render';
+import classNames from 'clsx';
+import { Spinner } from '../spinner/Spinner.js';
+import { IconName } from './generated/iconNames.js';
+import cls from './Icon.module.css';
+import { useIconLoading } from './IconLoadingContext.js';
+
+export interface IconProps
+	extends UseRenderComponentProps<
+		'svg',
+		{ size: number; name: IconName; loading: boolean }
+	> {
+	name: IconName;
+	size?: number;
+	loading?: boolean;
+}
+
+export const Icon = function Icon({
+	ref,
+	name,
+	size = 15,
+	className,
+	loading: loadingProp,
+	render,
+	...rest
+}: IconProps & {
+	ref?: React.Ref<SVGSVGElement>;
+}) {
+	const loadingContext = useIconLoading();
+	const loading = loadingProp !== false && (loadingProp || loadingContext);
+
+	const slotted = useRender({
+		defaultTagName: 'svg',
+		ref,
+		props: {
+			className: classNames('icon', cls.root, className),
+			width: size,
+			height: size,
+			children: <use xlinkHref={`#icon-${name}`} />,
+			...rest,
+		},
+		state: {
+			size,
+			name,
+			loading,
+			icon: true,
+		},
+		render,
+	});
+
+	if (loading) {
+		return (
+			<Spinner
+				size={size}
+				data-icon
+				className={classNames('icon', cls.spinner, className)}
+			/>
+		);
+	}
+
+	return slotted;
+};

package/src/components/imageUploader/ImageUploader.module.css

@@ -0,0 +1,67 @@
+.root {
+	position: relative;
+	border-radius: var(--m-surface-radius);
+}
+
+.input {
+	pointer-events: none;
+	position: absolute;
+	inset: 0;
+	opacity: 0;
+}
+
+.cameraRoot {
+	position: absolute;
+	z-index: 1;
+	height: 100%;
+	width: 100%;
+}
+
+.cameraCancelButton {
+	position: absolute;
+	top: var(--m-spacing-sm);
+	left: var(--m-spacing-sm);
+	@apply --mx-fg(var(--m-color-neutral-paper));
+}
+
+.removeButton {
+	position: absolute;
+	top: var(--m-spacing-sm);
+	right: var(--m-spacing-sm);
+	z-index: 10;
+	height: 32px;
+	width: 32px;
+	cursor: pointer;
+	padding: var(--m-spacing-sm);
+	@apply --mx-bg(var(--m-surface-ambient-bg));
+	@apply --mx-fg(var(--m-surface-ambient-fg));
+	@apply --mx-shadow;
+	border-radius: var(--m-radius-lg);
+	border: none;
+}
+
+.imagePreview {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center;
+	border-radius: inherit;
+}
+
+.emptyControls {
+	position: absolute;
+	inset: 0;
+	min-height: 120px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--m-spacing-sm);
+	@apply --mx-bg(var(--m-surface-primary-bg));
+	@apply --mx-fg(var(--m-surface-primary-fg));
+	border-radius: inherit;
+
+	&[dragging-over='true'] {
+		@apply --mx-bg-heavier(2);
+	}
+}

package/src/components/imageUploader/ImageUploader.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 { ImageUploader } from './ImageUploader.js';
 
@@ -13,7 +13,7 @@ const meta = {
 		controls: { expanded: true },
 	},
 	args: {
-		className: 'w-64 h-64',
+		style: { width: 256, height: 256 },
 	},
 } satisfies Meta<typeof ImageUploader>;
 
@@ -34,7 +34,7 @@ function ImageUploaderDemo() {
 				file ? setValue(URL.createObjectURL(file)) : setValue(null)
 			}
 			value={value}
-			className="h-64 w-64"
+			style={{ width: 256, height: 256 }}
 		/>
 	);
 }

package/src/components/imageUploader/ImageUploader.tsx

@@ -1,6 +1,7 @@
 import classNames, { clsx } from 'clsx';
 import {
 	createContext,
+	CSSProperties,
 	ImgHTMLAttributes,
 	ReactNode,
 	useCallback,
@@ -17,11 +18,13 @@ import {
 	CameraShutterButton,
 } from '../camera/index.js';
 import { Icon } from '../icon/index.js';
+import cls from './ImageUploader.module.css';
 
 export interface ImageUploaderProps {
 	value: string | null;
 	onChange: (value: File | null) => void;
 	className?: string;
+	style?: CSSProperties;
 	maxDimension?: number;
 	children?: ReactNode;
 }
@@ -133,20 +136,21 @@ export function ImageUploaderRoot({
 			value={{ inputId, dragging, draggingOver, value, onChange }}
 		>
 			<div
-				className={classNames('relative rounded-lg', rest.className)}
+				className={classNames('@mode-neutral', cls.root, rest.className)}
 				onDragEnter={onDragEnter}
 				onDragLeave={onDragLeave}
 				onDragOver={onDragOver}
 				onDrop={onDrop}
 				onDragStart={onDragStart}
 				onDragEnd={onDragEnd}
+				{...rest}
 			>
 				<input
 					type="file"
 					accept="image/*"
 					onChange={onFileChange}
 					onClick={onFileClick}
-					className="pointer-events-none absolute inset-0 op-0"
+					className={cls.input}
 					id={inputId}
 				/>
 				{children}
@@ -193,7 +197,7 @@ function ImageUploaderPrebuilt({
 			</ImageUploaderEmptyControls>
 			{!props.value && cameraOpen && (
 				<CameraRoot
-					className="absolute z-1 h-full w-full"
+					className={cls.cameraRoot}
 					format="image/png"
 					onCapture={(file) => {
 						props.onChange(file);
@@ -208,7 +212,7 @@ function ImageUploaderPrebuilt({
 						onClick={() => setCameraOpen(false)}
 						emphasis="ghost"
 						size="small"
-						className="absolute left-2 top-2 color-white"
+						className={cls.cameraCancelButton}
 					>
 						Cancel
 					</Button>
@@ -267,10 +271,7 @@ export function ImageUploaderRemoveButton({ className, ...rest }: ButtonProps) {
 	return (
 		<Button
 			emphasis="ghost"
-			className={clsx(
-				'layer-variants:(absolute right-2 top-2 z-10 h-32px w-32px cursor-pointer rounded-lg border-none p-2 shadow-sm transition-colors color-black bg-white)',
-				className,
-			)}
+			className={clsx(cls.removeButton, className)}
 			onClick={() => onChange(null)}
 			{...rest}
 		>
@@ -285,14 +286,7 @@ export function ImageUploaderDisplay({
 }: ImgHTMLAttributes<HTMLImageElement>) {
 	const { value } = useUploaderContext();
 	return value ? (
-		<img
-			src={value}
-			className={clsx(
-				'layer-components:(h-full w-full rounded-lg object-cover object-center)',
-				className,
-			)}
-			{...rest}
-		/>
+		<img src={value} className={clsx(cls.imagePreview, className)} {...rest} />
 	) : null;
 }
 
@@ -309,13 +303,8 @@ export function ImageUploaderEmptyControls({
 
 	return (
 		<div
-			className={classNames(
-				'layer-components:(absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-gray-light)',
-				{
-					'layer-components:bg-darken-2': draggingOver,
-				},
-				className,
-			)}
+			className={classNames(cls.emptyControls, className)}
+			data-dragging-over={draggingOver}
 		>
 			{children}
 		</div>

package/src/components/index.ts

@@ -10,7 +10,6 @@ export * from './checkbox/index.js';
 export * from './chip/index.js';
 export * from './collapsible/index.js';
 export * from './colorMode/ColorModeToggle.js';
-export * from './colorPicker/index.js';
 export * from './combobox/Combobox.js';
 export * from './contextMenu/contextMenu.js';
 export * from './datePicker/index.js';
@@ -37,7 +36,6 @@ export * from './numberStepper/index.js';
 export * from './particles/index.js';
 export * from './peek/index.js';
 export * from './popover/index.js';
-export * from './primitives/menus.js';
 export * from './progress/Progress.js';
 export * from './provider/Provider.js';
 export * from './pwaInstall/index.js';

package/src/components/input/Input.module.css

@@ -0,0 +1,100 @@
+.input {
+	display: flex;
+	flex-grow: 1;
+	user-select: auto;
+	padding: var(--m-control-padding-block) 0px;
+	min-width: 60px;
+
+	@apply --mx-fg(inherit);
+	@apply --mx-bg(transparent);
+	border: none;
+
+	font-family: inherit;
+	font-size: inherit;
+	line-height: inherit;
+
+	&::placeholder {
+		@apply --mx-fg(var(--m-color-neutral-heavy));
+	}
+
+	/* Focus visuals handled by wrapper */
+	&:focus,
+	&:focus-visible {
+		outline: none;
+	}
+
+	/* &:first-child {
+		padding-left: var(--m-control-padding-inline);
+		border-top-left-radius: inherit;
+		border-bottom-left-radius: inherit;
+	}
+	&:last-child {
+		padding-right: var(--m-control-padding-inline);
+		border-top-right-radius: inherit;
+		border-bottom-right-radius: inherit;
+	} */
+}
+
+.inputBorder {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: var(--m-spacing-xs);
+	width: max-content;
+	overflow: clip;
+
+	transition: box-shadow var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-shadow-value: inset var(--m-shadow-sm);
+
+	@apply --mx-fg(var(--m-control-fg));
+	@apply --mx-bg(var(--m-control-bg));
+	@apply --mx-borderColor(var(--m-control-borderColor));
+	border-radius: var(--m-control-radius);
+
+	font-size: var(--m-text-secondary-size);
+	line-height: var(--m-text-secondary-lineHeight);
+	font-weight: var(--m-text-secondary-weight);
+
+	&:has(input:disabled),
+	&:has(textarea:disabled) {
+		--mx-shadow-value: 0 0 0 0 transparent;
+		@apply --mx-bg(transparent);
+		@apply --mx-borderColor-lighter(2);
+
+		& input:placeholder,
+		& textarea::placeholder {
+			@apply --mx-fg-lighter(2);
+		}
+	}
+
+	&:has(input:focus-visible[data-focus-clicked='false']),
+	&:has(textarea:focus-visible[data-focus-clicked='false']) {
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-focus-ring();
+	}
+	&:has(input:focus),
+	&:has(textarea:focus) {
+		@apply --mx-bg-lighter(3);
+		--mx-ring-value: --fn-ring(var(--m-color-main-light), 4px);
+	}
+
+	&:has(input:hover:not(:disabled):not(:focus)),
+	&:has(textarea:hover:not(:disabled):not(:focus)) {
+		@apply --mx-bg-lighter(2);
+		@apply --mx-borderColor-heavier(2);
+	}
+
+	& > [data-icon] {
+		margin-inline: var(--m-spacing-sm);
+	}
+
+	padding-inline: var(--m-control-padding-inline);
+	& > [data-input-border-flush]:first-child {
+		margin-left: calc(-1 * var(--m-control-padding-inline));
+	}
+	& > [data-input-border-flush]:last-child {
+		margin-right: calc(-1 * var(--m-control-padding-inline));
+	}
+}

package/src/components/input/Input.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/Icon.js';

package/src/components/input/Input.tsx

@@ -6,50 +6,10 @@ import clsx from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks.js';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
-import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { inputInfo } from '../../systems/inputs.js';
-import { PROPS } from '../../uno/index.js';
+import cls from './Input.module.css';
 
-export const inputClassName = clsx(
-	'layer-components:(min-w-60px flex-1 select-auto border-none px-0 py-1.25 text-md font-inherit color-inherit bg-transparent)',
-	'layer-components:placeholder:color-gray-dark',
-	'layer-components:focus:(outline-none)',
-	'layer-components:focus-visible:(outline-none)',
-	'layer-components:first:(rounded-l-inherit pl-md)',
-	'layer-components:last:(rounded-r-inherit pr-md)',
-);
-
-const inputBorderClassName = clsx(
-	'layer-components:(min-w-60px flex flex-row items-center gap-xs border-1 border-thin rounded-lg border-solid text-md shadow-sm shadow-inset transition-shadow color-black bg-white border-black)',
-	'layer-components:(w-max-content overflow-clip)',
-	'layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:(bg-transparent border-gray shadow-none placeholder-gray-dark)',
-	'layer-components:foc-contained',
-	'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:(outline-none ring ring-4 bg-lighten-3 ring-main-light)',
-	'layer-components:[&:has(input:hover),&:has(textarea:hover)]:border-black',
-	'layer-components:[&>.icon]:mx-sm',
-);
-
-function InputBorderImpl({
-	style,
-	...props
-}: React.HTMLAttributes<HTMLDivElement> & {
-	ref?: Ref<HTMLDivElement>;
-}) {
-	return (
-		<GroupScaleReset>
-			<div
-				{...props}
-				style={{
-					[PROPS.LOCALS.CORNER_SCALE]: '1',
-					[PROPS.LOCALS.SPACING_SCALE]: '1',
-					[PROPS.USER.SHADOW_SPREAD]: '0',
-					...style,
-				}}
-			/>
-		</GroupScaleReset>
-	);
-}
-const InputBorder = withClassName(InputBorderImpl, inputBorderClassName);
+const InputBorder = withClassName('div', cls.inputBorder);
 
 const InnerInput = function InnerInput({
 	autoSelect,
@@ -72,6 +32,8 @@ const InnerInput = function InnerInput({
 			Date.now() - inputInfo.lastPointerDown < 200
 		) {
 			ev.currentTarget.setAttribute('data-focus-clicked', 'true');
+		} else {
+			ev.currentTarget.setAttribute('data-focus-clicked', 'false');
 		}
 		onFocus?.(ev);
 	};
@@ -90,7 +52,7 @@ const InnerInput = function InnerInput({
 			onFocus={handleFocus}
 			onValueChange={onValueChange}
 			onBlur={handleBlur}
-			className={clsx(inputClassName, className)}
+			className={clsx(cls.input, className)}
 			{...props}
 		/>
 	);

package/src/components/layouts/PageContent.module.css

@@ -0,0 +1,25 @@
+.root {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	justify-content: start;
+	width: 100%;
+	anchor-name: --page-content;
+	flex: 1;
+
+	gap: var(--m-spacing-md);
+
+	padding: var(--m-spacing-md);
+	@media (min-width: 768px) {
+		padding: var(--m-spacing-lg);
+	}
+
+	margin-inline: auto;
+	max-width: 100%;
+	min-width: 0;
+
+	container-type: inline-size;
+	container-name: --page-content;
+
+	grid-area: content;
+}