@a-type/ui 5.0.21 → 6.0.0

package/src/components/button/Button.tsx

@@ -4,48 +4,32 @@ import {
 } from '@base-ui/react/button';
 import { clsx } from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
+import { ButtonHTMLAttributes, memo, Ref } from 'react';
 import {
-	ButtonHTMLAttributes,
-	Children,
-	Fragment,
-	memo,
-	ReactNode,
-	Ref,
-	useCallback,
-	useDebugValue,
-	useState,
-} from 'react';
+	IconWrapper,
+	useIconOnlyDataAttributes,
+} from '../../behaviors/iconOnly.js';
 import { withClassName } from '../../hooks.js';
 import useMergedRef from '../../hooks/useMergedRef.js';
-import { PaletteName } from '../../uno/index.js';
 import { DropdownMenuTriggerIcon } from '../dropdownMenu/DropdownMenu.js';
 import { useIsDropdownTrigger } from '../dropdownMenu/DropdownTriggerContext.js';
 import { IconLoadingProvider } from '../icon/IconLoadingContext.js';
 import { Icon } from '../icon/index.js';
 import { Spinner } from '../spinner/index.js';
-import { SlotDiv } from '../utility/SlotDiv.js';
-import { getButtonClassName } from './classes.js';
+import cls from './Button.module.css';
 
 export interface ButtonProps
 	extends ButtonHTMLAttributes<HTMLButtonElement>,
 		Pick<BaseButtonProps, 'render' | 'focusableWhenDisabled'> {
-	color?: PaletteName;
-	emphasis?:
-		| 'primary'
-		| 'main'
-		| 'default'
-		| 'ghost'
-		| 'contrast'
-		| 'light'
-		| 'unstyled';
+	emphasis?: 'primary' | 'default' | 'ghost' | 'light' | 'unstyled';
 	size?: 'default' | 'small' | 'wrapper';
 	toggled?: boolean;
 	toggleMode?: 'color-and-indicator' | 'color' | 'indicator' | 'state-only';
-	align?: 'start' | 'stretch' | 'end';
 	visuallyDisabled?: boolean;
 	loading?: boolean;
 	visuallyFocused?: boolean;
 	disableIconMode?: boolean;
+	forceIconMode?: boolean;
 	ref?: Ref<HTMLButtonElement>;
 	disableDropdownTriggerIcon?: boolean;
 	disableDefaultLoadingIndicator?: boolean;
@@ -53,18 +37,17 @@ export interface ButtonProps
 
 export function ButtonRoot({
 	className,
-	color,
 	emphasis = 'default',
 	size,
 	toggled,
 	toggleMode = 'color-and-indicator',
-	align,
 	visuallyDisabled,
 	visuallyFocused,
 	loading,
 	children,
 	disabled,
 	disableIconMode,
+	forceIconMode,
 	disableDropdownTriggerIcon,
 	disableDefaultLoadingIndicator,
 	ref,
@@ -75,46 +58,35 @@ export function ButtonRoot({
 		'type' in props && props.type === 'submit' && isFormSubmitting;
 	const isLoading = loading || isSubmitLoading;
 
-	const childArray = childArrayWithoutFragments(children);
-	const iconChildCount = childArray.filter(isIconChild).length;
-	const hasLabelChild = childArray.length > iconChildCount;
-
-	useDebugValue(
-		`Children introspection: Icons: ${iconChildCount}, Label: ${hasLabelChild}, Total: ${childArray.length}`,
-	);
+	const iconOnlyTools = useIconOnlyDataAttributes(children);
 
 	const isDropdownTriggerFromContext = useIsDropdownTrigger();
 	const isDropdownTrigger =
 		!disableDropdownTriggerIcon &&
-		hasLabelChild &&
+		!iconOnlyTools.info.hasIconOnly &&
 		isDropdownTriggerFromContext;
 
-	const finalRef = useMergedRef(useAnnotateWithChildParts(), ref);
+	const finalRef = useMergedRef(ref, iconOnlyTools.ref);
 
 	const buttonProps = {
 		ref: finalRef,
+		...iconOnlyTools.props,
 		...props,
 		disabled: disabled || isLoading,
+		'data-input-border-flush': true,
 		'data-disabled': visuallyDisabled,
 		'data-focus-visible': visuallyFocused ? true : undefined,
 		'data-size': size,
 		'data-loading': isLoading,
-		'data-has-label': hasLabelChild,
-		'data-has-icon': iconChildCount > 0,
-		'data-icon-count': iconChildCount > 0 ? iconChildCount : undefined,
 		'data-dropdown-trigger': isDropdownTrigger ? true : undefined,
 		tabIndex: visuallyDisabled ? -1 : undefined,
+		'data-toggleable': toggled !== undefined,
+		'data-disable-icon-mode': disableIconMode,
+		'data-force-icon-mode': forceIconMode,
+		'data-emphasis': emphasis,
 		className: clsx(
-			getButtonClassName({
-				color,
-				emphasis,
-				size,
-				toggleable:
-					toggled !== undefined &&
-					(toggleMode === 'color' || toggleMode === 'color-and-indicator'),
-				align,
-				disableIconMode,
-			}),
+			emphasis === 'unstyled' ? cls.unstyled : cls.root,
+			size === 'small' ? '@mode-dense' : '',
 			className,
 		),
 	};
@@ -169,110 +141,18 @@ export const ButtonToggleIndicator = memo(function ToggleIndicator({
 		<Icon
 			aria-hidden
 			name="check"
-			className="w-0 transition-width"
-			style={{
-				width: value ? '15px' : 0,
-				marginRight: !value ? '-0.25rem' : 0,
-				marginLeft: !value ? '-0.25rem' : 0,
-			}}
+			className={cls.toggleIndicator}
+			data-open={!!value}
 			loading={false}
 		/>
 	);
 });
 
 // allows custom icons to trigger icon button behavior
-export const ButtonIcon = withClassName(SlotDiv, 'icon flex flex-shrink-0');
+export const ButtonIcon = withClassName(IconWrapper, 'icon', cls.icon);
 ButtonIcon.displayName = 'ButtonIcon';
 
 export const Button = Object.assign(ButtonRoot, {
 	ToggleIndicator: ButtonToggleIndicator,
 	Icon: ButtonIcon,
 });
-
-function useAnnotateWithChildParts() {
-	const mutationObserver = useState(() => {
-		if (typeof window === 'undefined') return null!;
-		return new MutationObserver((entries) => {
-			applyPartAttributes(entries[0].target as HTMLButtonElement);
-		});
-	})[0];
-
-	const ref = useCallback(
-		(node: HTMLButtonElement | null) => {
-			if (node && mutationObserver) {
-				mutationObserver.disconnect();
-				mutationObserver.observe(node, { childList: true, subtree: true });
-				applyPartAttributes(node);
-			} else if (mutationObserver) {
-				mutationObserver.disconnect();
-			}
-		},
-		[mutationObserver],
-	);
-
-	return ref;
-}
-
-function applyPartAttributes(button: HTMLButtonElement) {
-	// each child node that's not an icon counts as a label
-	const registry = {
-		icon: 0,
-		label: 0,
-	};
-	const iconNodes: (HTMLElement | SVGElement)[] = [];
-	button.childNodes.forEach((child) => {
-		if (!(child instanceof HTMLElement || child instanceof SVGElement)) return;
-		if (child.style.display === 'none' || child.style.width === '0') return; // skip hidden elements
-		if (
-			(child instanceof HTMLElement || child instanceof SVGElement) &&
-			child.classList.contains('icon')
-		) {
-			registry.icon++;
-			iconNodes.push(child);
-		} else if (child.hasAttribute('data-default-loader')) {
-			// skip default loader
-		} else {
-			registry.label++;
-		}
-	});
-	if (button.textContent) {
-		const iconText = iconNodes.map((n) => n.textContent).join('');
-		const labelText = button.textContent.replace(iconText, '').trim();
-		if (labelText.length > 0) registry.label++;
-	}
-	button.setAttribute('data-has-icon', String(registry.icon > 0));
-	button.setAttribute('data-has-label', String(registry.label > 0));
-	button.setAttribute('data-icon-count', String(registry.icon));
-}
-
-function isIconChild(child: ReactNode): boolean {
-	if (typeof child !== 'object' || child === null) return false;
-	if ('type' in child) {
-		const type = child.type;
-		if (
-			type === ButtonIcon ||
-			type === 'ButtonIcon' ||
-			(type as any).displayName === 'ButtonIcon'
-		)
-			return true;
-		if (
-			type === Icon ||
-			type === 'Icon' ||
-			(type as any).displayName === 'Icon'
-		)
-			return true;
-	}
-	return false;
-}
-
-function childArrayWithoutFragments(children: ReactNode): ReactNode[] {
-	const topArray = Children.toArray(children);
-	return topArray.flatMap((child) => {
-		if (typeof child === 'object' && child !== null && 'type' in child) {
-			if ((child as any).type === Fragment) {
-				return childArrayWithoutFragments((child as any).props.children);
-			}
-		}
-		return [child];
-	});
-}

package/src/components/button/classes.tsx

@@ -1,78 +1,70 @@
 import clsx from 'clsx';
-import { PaletteName } from '../../uno/index.js';
 import { type ButtonProps } from './Button.jsx';
 
 export function getButtonClassName({
-	color,
 	emphasis = 'default',
 	size = 'default',
 	toggleable,
-	align,
 	disableIconMode,
 }: {
-	color?: PaletteName;
 	emphasis?: ButtonProps['emphasis'];
 	size?: ButtonProps['size'];
 	toggleable?: boolean;
-	align?: ButtonProps['align'];
 	disableIconMode?: boolean;
 }) {
 	if (emphasis === 'unstyled') {
 		return clsx(
-			'layer-components:(m-0 appearance-none border-none p-0 bg-transparent)',
+			'layer-components:(m-0 appearance-none p-0 bg-transparent border-none)',
 			'layer-components:(cursor-pointer)',
-			'layer-components:focus:outline-off',
+			'layer-components:focus:outline-none',
 		);
 	}
 
 	return clsx(
-		color && `palette-${color}`,
-		'layer-components:(select-none font-bold leading-1 leading-none font-inherit)',
-		'layer-components:(border-solid border-color)',
+		'layer-components:(select-none fw-[bold] leading-[1] font-inherit)',
+		'layer-components:(b-fg b border-solid)',
 		'layer-components:(cursor-pointer)',
 		'layer-components:(flex flex-row items-center gap-sm)',
 		'layer-components:(relative overflow-visible whitespace-nowrap)',
 		'layer-components:(transition-all duration-200)',
 		'layer-components:(shadow-sm ring-bg)',
 		'layer-components:color-contrast',
+		'layer-components:text-secondary',
+		'layer-components:(px-action py-action rd-[9999px])',
 
-		emphasis === 'ghost' && 'layer-variants:(border-transparent shadow-none)',
-		emphasis === 'contrast' &&
-			'layer-variants:border-bg layer-variants:hover:bg-gray-ink',
+		{
+			'@mode-dense': size === 'small',
+			'@mode-density-reset': size === 'default',
+			'layer-variants:(border-0 p-0 shadow-none)': size === 'wrapper',
+		},
+
+		emphasis === 'ghost' && 'layer-variants:(shadow-none border-transparent)',
 
 		{
 			'layer-components:bg-main': emphasis === 'primary',
-			'layer-components:color-main-ink layer-components:bg-main-light':
+			'layer-components:(color-main-ink bg-main-light bg-desaturate-2)':
 				emphasis === 'light',
-			'layer-components:bg-white layer-variants:focus-visible:bg-white':
+			'layer-components:bg-neutral-paper layer-variants:focus-visible:bg-neutral-paper':
 				emphasis === 'default',
-			'layer-components:(color-main-ink bg-transparent aria-pressed:bg-main-wash)':
+			'layer-components:(color-main-ink bg-transparent aria-[pressed]:bg-main-wash)':
 				emphasis === 'ghost',
-			'layer-components:bg-black layer-variants:focus-visible:ring-gray-dark':
-				emphasis === 'contrast',
 		},
 
 		{
-			'layer-components:(border-thin rounded-lg px-4 py-2 text-md)':
-				size === 'default',
-			'layer-components:(min-h-touch border-thin rounded-md px-4 py-0.25 text-sm)':
-				size === 'small',
-			'layer-components:(border-0 rounded-lg p-0)': size === 'wrapper',
-			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(rounded-lg p-2.35 text-sm)':
+			'layer-components:(min-h-[30px])': size === 'small',
+			'layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-2.35 rd-lg text-ambient)':
 				size === 'default' && !disableIconMode,
-			'layer-components:[&[data-has-icon=true][data-has-label=false]]:min-h-touch-small layer-components:[&[data-has-icon=true][data-has-label=false]]:(rounded-lg p-sm text-xs -m-y-2xs)':
+			'layer-components:[&[data-has-icon=true][data-has-label=false]]:min-h-touch-small layer-components:[&[data-has-icon=true][data-has-label=false]]:-m-y-2xs layer-components:[&[data-has-icon=true][data-has-label=false]]:(p-sm rd-lg text-ambient)':
 				size === 'small' && !disableIconMode,
 		},
 		!disableIconMode &&
 			'layer-components:[&[data-has-icon=true][data-has-label=false]:not([aria-pressed])]:(aspect-1 items-center justify-center)',
 
-		'layer-components:hover:(ring-4 bg-main bg-lighten-2)',
-
-		'layer-components:foc-effect-lg',
+		'layer-components:hover:(bg-main bg-lighten-2 ring-bg ring-[4px])',
+		'layer-components:active:(bg-darken-1 ring-bg ring-[8px])',
+		'focus-visible:(ring-neutral-ink ring-[4px] ring-offset)',
 
-		'layer-components:active:(ring-8 bg-darken-1)',
-
-		'layer-components:disabled:(cursor-default opacity-50 ring-none shadow-none)',
+		'layer-components:disabled:(cursor-default opacity-50 shadow-none ring-none)',
 		'layer-components:[&[data-disabled=true]]:(cursor-default opacity-50 shadow-none)',
 
 		{
@@ -80,11 +72,7 @@ export function getButtonClassName({
 				toggleable,
 		},
 
-		{
-			'layer-components:self-start': align === 'start',
-			'layer-components:self-stretch': align === 'stretch',
-			'layer-components:self-end': align === 'end',
-		},
+		'self-center',
 
 		`size-${size ?? 'default'}`,
 	);

package/src/components/camera/Camera.module.css

@@ -0,0 +1,65 @@
+.fullscreen {
+	position: fixed;
+	inset: 0;
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	border-radius: 0;
+}
+
+.root {
+	min-width: --fn-literal(48px);
+	min-height: --fn-literal(48px);
+}
+
+.video {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+
+.shutterButton {
+	position: absolute;
+	bottom: var(--m-spacing-md);
+	left: 50%;
+	width: calc(48px / var(--m-global-spacing-density));
+	height: calc(48px / var(--m-global-spacing-density));
+	cursor: pointer;
+	transform: translateX(-50%);
+	opacity: 80%;
+	transition: all var(--m-duration) var(--m-easing);
+
+	@apply --mx-shadow;
+	--mx-ring-value: --fn-ring(var(--m-action-secondary-bg), 2px);
+	@apply --mx-bg(var(--m-action-secondary-bg));
+	@apply --mx-fg(color-contrast(var(--mx-bg-ref)));
+	@apply --mx-borderColor(var(--mx-fg-ref));
+	border-width: var(--m-lineWidth);
+	border-radius: var(--m-action-radius);
+
+	&:hover {
+		opacity: 100%;
+		@apply --mx-bg-heavier(2);
+	}
+
+	&:focus {
+		outline: none;
+		opacity: 100%;
+	}
+	&:focus-visible {
+		@apply --mx-bg-lighter(1);
+		--mx-ring-value: --fn-ring(var(--m-color-main-ink), 4px);
+	}
+}
+
+.swapButton {
+	position: absolute;
+	bottom: var(--m-spacing-xs);
+	left: var(--m-spacing-xs);
+}
+
+.fullscreenButton {
+	position: absolute;
+	top: var(--m-spacing-xs);
+	right: var(--m-spacing-xs);
+}

package/src/components/camera/Camera.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useMemo, useState } from 'react';
 import { Camera } from './Camera.js';
 
@@ -40,9 +40,9 @@ function CameraDemo({ facingMode }: { facingMode?: 'user' | 'environment' }) {
 			<Camera
 				facingMode={facingMode}
 				onCapture={setLatest}
-				className="h-64 w-64"
+				style={{ width: 256, height: 256 }}
 			/>
-			{latest && <img src={dataUri} className="w-full" />}
+			{latest && <img src={dataUri} style={{ width: '100%' }} />}
 		</div>
 	);
 }

package/src/components/camera/Camera.tsx

@@ -2,7 +2,7 @@ import {
 	Button as BaseButton,
 	ButtonProps as BaseButtonProps,
 } from '@base-ui/react/button';
-import classNames, { clsx } from 'clsx';
+import { clsx } from 'clsx';
 import {
 	MouseEvent,
 	ReactNode,
@@ -14,9 +14,11 @@ import {
 	useState,
 } from 'react';
 import { withClassName } from '../../hooks.js';
+import { Box } from '../box/Box.js';
 import { Button, ButtonProps } from '../button/index.js';
 import { Icon } from '../icon/index.js';
 import { Select, SelectContent, SelectItem } from '../select/index.js';
+import cls from './Camera.module.css';
 
 const CameraContext = createContext<{
 	triggerCapture: () => void;
@@ -36,6 +38,7 @@ const CameraContext = createContext<{
 
 export interface CameraRootProps {
 	className?: string;
+	style?: React.CSSProperties;
 	onCapture?: (data: File) => void;
 	children?: ReactNode;
 	format?: 'image/png' | 'image/jpeg';
@@ -163,25 +166,28 @@ export function CameraRoot({
 				fullscreen,
 			}}
 		>
-			<div
-				ref={ref}
-				className={classNames(
-					'override-light',
-					'layer-components:([font-family:inherit] relative min-h-4 min-w-4 overflow-hidden rounded-lg color-white bg-black)',
-					fullscreen && 'fixed inset-0 z-1000 h-full w-full rounded-none',
+			<Box
+				surface="ambient"
+				rounded="md"
+				overflow="hidden"
+				className={clsx(
+					'@mode-dark',
+					cls.root,
+					fullscreen && cls.fullscreen,
 					className,
 				)}
 				{...rest}
+				ref={ref}
 			>
 				<video
 					ref={videoRef}
-					className="h-full w-full object-cover"
+					className={cls.video}
 					autoPlay
 					muted
 					playsInline
 				></video>
 				{children}
-			</div>
+			</Box>
 		</CameraContext.Provider>
 	);
 }
@@ -214,11 +220,8 @@ export function CameraShutterButton({
 
 const StyledShutterButton = withClassName(
 	BaseButton,
-	'layer-components:(absolute bottom-3 left-1/2 h-16 w-16 cursor-pointer border-2 rounded-full border-solid opacity-80 ring-2 bg-white border-black ring-white -translate-x-1/2)',
-	'layer-components:(hover:opacity-100 hover:bg-gray-wash)',
-	'layer-components:focus-visible:bg-lighten-1',
-	'layer-components:(foc-effect focus:opacity-100)',
-	'layer-components:(sm:h-8 sm:w-8)',
+	'@mode-light',
+	cls.shutterButton,
 );
 
 export interface CameraDeviceSelectorProps {
@@ -250,10 +253,7 @@ export const CameraDeviceSelector = ({
 		return (
 			<Button
 				emphasis="ghost"
-				className={clsx(
-					'layer-components:(absolute bottom-2 left-2 color-white)',
-					className,
-				)}
+				className={clsx(cls.swapButton, className)}
 				onClick={swapCamera}
 				{...props}
 			>
@@ -270,13 +270,7 @@ export const CameraDeviceSelector = ({
 		>
 			<Select.Trigger
 				render={
-					<Button
-						emphasis="ghost"
-						className={clsx(
-							'layer-components:(absolute bottom-2 left-2 color-white)',
-							className,
-						)}
-					>
+					<Button emphasis="ghost" className={clsx(cls.swapButton, className)}>
 						<Icon name="refresh" />
 					</Button>
 				}
@@ -298,7 +292,7 @@ export const CameraFullscreenButton = (props: ButtonProps) => {
 		<Button
 			{...props}
 			emphasis="ghost"
-			className="absolute right-2 top-2 color-white"
+			className={clsx(cls.fullscreenButton, props.className)}
 			onClick={() => setFullscreen(!fullscreen)}
 		>
 			<Icon name={fullscreen ? 'x' : 'maximize'} />