@a-type/ui 3.1.1 → 4.0.0-beta.1

package/src/components/dropdownMenu/DropdownMenu.stories.tsx

@@ -1,16 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { Icon } from '../icon/index.js';
 import { DropdownMenu } from './DropdownMenu.js';
 
-const meta = {
+const meta: Meta<typeof DropdownMenu> = {
 	title: 'Components/DropdownMenu',
 	component: DropdownMenu,
 	argTypes: {},
 	parameters: {
 		controls: { expanded: true },
 	},
-} satisfies Meta<typeof DropdownMenu>;
+};
 
 export default meta;
 
@@ -20,9 +21,7 @@ export const Default: Story = {
 	args: {
 		children: (
 			<>
-				<DropdownMenu.Trigger asChild>
-					<Button>Open</Button>
-				</DropdownMenu.Trigger>
+				<DropdownMenu.Trigger render={<Button />}>Open</DropdownMenu.Trigger>
 				<DropdownMenu.Content>
 					<DropdownMenu.Item color="attention">
 						<DropdownMenu.Label>Item 1</DropdownMenu.Label>
@@ -41,3 +40,62 @@ export const Default: Story = {
 		),
 	},
 };
+
+export const Sides: Story = {
+	render: (args) => (
+		<Box
+			col
+			gap="xl"
+			items="center"
+			justify="center"
+			full
+			p="xl"
+			className="mt-200px"
+		>
+			<DropdownMenu open={args.open}>
+				<DropdownMenu.Trigger render={<Button />}>Top</DropdownMenu.Trigger>
+				<DropdownMenu.Content side="top">
+					<DropdownMenu.Item>
+						<DropdownMenu.Label>Item 1</DropdownMenu.Label>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item>
+						<DropdownMenu.Label>Item 2</DropdownMenu.Label>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu>
+			<DropdownMenu open={args.open}>
+				<DropdownMenu.Trigger render={<Button />}>Right</DropdownMenu.Trigger>
+				<DropdownMenu.Content side="right">
+					<DropdownMenu.Item>
+						<DropdownMenu.Label>Item 1</DropdownMenu.Label>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item>
+						<DropdownMenu.Label>Item 2</DropdownMenu.Label>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu>
+			<DropdownMenu open={args.open}>
+				<DropdownMenu.Trigger render={<Button />}>Left</DropdownMenu.Trigger>
+				<DropdownMenu.Content side="left" sideOffset={8}>
+					<DropdownMenu.Item>
+						<DropdownMenu.Label>Item 1</DropdownMenu.Label>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item>
+						<DropdownMenu.Label>Item 2</DropdownMenu.Label>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu>
+			<DropdownMenu open={args.open}>
+				<DropdownMenu.Trigger render={<Button />}>Bottom</DropdownMenu.Trigger>
+				<DropdownMenu.Content side="bottom" sideOffset={8}>
+					<DropdownMenu.Item>
+						<DropdownMenu.Label>Item 1</DropdownMenu.Label>
+					</DropdownMenu.Item>
+					<DropdownMenu.Item>
+						<DropdownMenu.Label>Item 2</DropdownMenu.Label>
+					</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu>
+		</Box>
+	),
+};

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -1,28 +1,43 @@
 'use client';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import {
+	Menu as BaseMenu,
+	MenuArrowProps,
+	MenuItemProps,
+	MenuPopupProps,
+	MenuPositionerProps,
+	MenuTriggerProps,
+} from '@base-ui/react/menu';
 import classNames, { clsx } from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
 import { PaletteName } from '../../uno/index.js';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 import { DropdownTriggerProvider } from './DropdownTriggerContext.js';
 
 const StyledContent = withClassName(
-	function DropdownMenuContent(
-		props: DropdownMenuPrimitive.DropdownMenuContentProps,
-	) {
+	function DropdownMenuContent(props: MenuPopupProps) {
 		return (
 			<GroupScaleReset>
-				<DropdownMenuPrimitive.Content {...props} />
+				<BaseMenu.Popup {...props} />
 			</GroupScaleReset>
 		);
 	},
-	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-gray-dark flex flex-col)',
-	'layer-components:transform-origin-[var(--radix-dropdown-menu-transform-origin)]',
-	'layer-components:[&[data-state=open]]:animate-popover-in',
-	'layer-components:[&[data-state=closed]]:animate-popover-out',
-	'layer-components:(max-h-[var(--radix-dropdown-menu-content-available-height)])',
+	'layer-components:(min-w-220px bg-white z-menu shadow-lg rounded-md border border-black flex flex-col transition)',
+	'layer-components:transform-origin-[var(--transform-origin)]',
+
+	'layer-components:data-[starting-style]:data-[side=bottom]:(opacity-0 translate-y-4px)',
+	'layer-components:data-[ending-style]:data-[side=bottom]:(opacity-0 translate-y-4px)',
+	'layer-components:data-[starting-style]:data-[side=top]:(opacity-0 translate-y--4px)',
+	'layer-components:data-[ending-style]:data-[side=top]:(opacity-0 translate-y-0)',
+	'layer-components:data-[starting-style]:data-[side=right]:(opacity-0 translate-x-4px)',
+	'layer-components:data-[ending-style]:data-[side=right]:(opacity-0 translate-x-0)',
+	'layer-components:data-[starting-style]:data-[side=left]:(opacity-0 translate-x--4px)',
+	'layer-components:data-[ending-style]:data-[side=left]:(opacity-0 translate-x-0)',
+
+	'layer-components:(max-h-[--available-height] max-w-[--available-width])',
+
 	'important:motion-reduce:animate-none',
 	'will-change-transform',
 );
@@ -33,9 +48,8 @@ const itemClassName = classNames(
 	'layer-components:hover:(bg-main-light color-black)',
 	'layer-components:focus:outline-none',
 );
-const StyledItemBase = withClassName(DropdownMenuPrimitive.Item, itemClassName);
-export interface DropdownMenuItemProps
-	extends DropdownMenuPrimitive.DropdownMenuItemProps {
+const StyledItemBase = withClassName(BaseMenu.Item, itemClassName);
+export interface DropdownMenuItemProps extends MenuItemProps {
 	color?: PaletteName;
 	ref?: Ref<HTMLDivElement>;
 }
@@ -53,56 +67,51 @@ const StyledItem = ({
 		/>
 	);
 };
-const StyledCheckboxItem = withClassName(
-	DropdownMenuPrimitive.CheckboxItem,
-	itemClassName,
-);
-const StyledRadioItem = withClassName(
-	DropdownMenuPrimitive.RadioItem,
-	itemClassName,
-);
+const StyledCheckboxItem = withClassName(BaseMenu.CheckboxItem, itemClassName);
+const StyledRadioItem = withClassName(BaseMenu.RadioItem, itemClassName);
 
 const StyledLabel = withClassName(
-	DropdownMenuPrimitive.Label,
+	'span',
 	'layer-components:(pl-3 py-1 font-bold text-sm leading-6)',
 );
 
 const StyledSeparator = withClassName(
-	DropdownMenuPrimitive.Separator,
+	BaseMenu.Separator,
 	'layer-components:(h-1px bg-gray m-5px)',
 );
 
 const StyledItemIndicator = withClassName(
-	DropdownMenuPrimitive.ItemIndicator,
+	BaseMenu.CheckboxItemIndicator,
 	'layer-components:(absolute left-0 w-25px inline-flex items-center justify-center)',
 );
 
 const StyledArrow = withClassName(
-	DropdownMenuPrimitive.Arrow,
+	(props: MenuArrowProps) => (
+		<BaseMenu.Arrow {...props}>
+			<ArrowSvg />
+		</BaseMenu.Arrow>
+	),
 	'layer-components:(arrow)',
+	'layer-components:data-[closed]:(opacity-0 scale-0)',
+	'layer-components:data-[open]:(opacity-100 scale-100)',
 );
 
-const StyledTrigger = withClassName(
-	DropdownMenuPrimitive.Trigger,
-	'select-none',
-);
+const StyledTrigger = withClassName(BaseMenu.Trigger, 'select-none');
 
-const StyledPortal = DropdownMenuPrimitive.Portal;
+const StyledPortal = BaseMenu.Portal;
 
 // Exports
-export const DropdownMenuRoot = DropdownMenuPrimitive.Root;
+export const DropdownMenuRoot = BaseMenu.Root;
 export const DropdownMenuItem = StyledItem;
 export const DropdownMenuCheckboxItem = StyledCheckboxItem;
-export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+export const DropdownMenuRadioGroup = BaseMenu.RadioGroup;
 export const DropdownMenuRadioItem = StyledRadioItem;
 export const DropdownMenuItemIndicator = StyledItemIndicator;
 export const DropdownMenuLabel = StyledLabel;
 export const DropdownMenuSeparator = StyledSeparator;
 export const DropdownMenuArrow = StyledArrow;
 
-export function DropdownMenuTrigger(
-	props: DropdownMenuPrimitive.DropdownMenuTriggerProps,
-) {
+export function DropdownMenuTrigger({ ...props }: MenuTriggerProps) {
 	return (
 		<DropdownTriggerProvider>
 			<StyledTrigger {...props} />
@@ -111,24 +120,53 @@ export function DropdownMenuTrigger(
 }
 export const DropdownMenuTriggerIcon = withClassName(
 	SlotDiv,
-	'layer-components:[[data-state=open]>&]:rotate-180 layer-components:transition-transform',
+	'layer-components:[[data-popup-open]>&]:rotate-180 layer-components:transition-transform',
 );
 
 export const DropdownMenuContent = ({
 	children,
 	forceMount,
+	keepMounted,
+	side,
+	sideOffset = 8,
+	align,
+	alignOffset,
+	anchor,
+	arrowPadding = 2,
+	collisionAvoidance,
+	collisionBoundary,
+	collisionPadding,
+	sticky,
+	positionMethod,
 	...props
-}: DropdownMenuPrimitive.DropdownMenuContentProps & {
-	forceMount?: boolean;
-}) => {
+}: MenuPopupProps &
+	MenuPositionerProps & {
+		/** @deprecated - use keepMounted */
+		forceMount?: boolean;
+		keepMounted?: boolean;
+	}) => {
 	return (
-		<StyledPortal forceMount={forceMount}>
-			<StyledContent {...props}>
-				<div className="layer-components:(overflow-y-auto overflow-x-hidden overflow-unstable max-h-full rounded-md min-h-0)">
-					{children}
-				</div>
-				<StyledArrow />
-			</StyledContent>
+		<StyledPortal keepMounted={keepMounted ?? forceMount}>
+			<BaseMenu.Positioner
+				sideOffset={sideOffset}
+				side={side}
+				align={align}
+				alignOffset={alignOffset}
+				anchor={anchor}
+				arrowPadding={arrowPadding}
+				collisionAvoidance={collisionAvoidance}
+				collisionBoundary={collisionBoundary}
+				collisionPadding={collisionPadding}
+				sticky={sticky}
+				positionMethod={positionMethod}
+			>
+				<StyledContent {...props}>
+					<div className="layer-components:(overflow-y-auto overflow-x-hidden overflow-unstable max-h-full rounded-md min-h-0)">
+						{children}
+					</div>
+					<StyledArrow />
+				</StyledContent>
+			</BaseMenu.Positioner>
 		</StyledPortal>
 	);
 };
@@ -140,7 +178,7 @@ export const DropdownMenu = Object.assign(DropdownMenuRoot, {
 	Trigger: DropdownMenuTrigger,
 	Item: StyledItem,
 	CheckboxItem: StyledCheckboxItem,
-	RadioGroup: DropdownMenuPrimitive.RadioGroup,
+	RadioGroup: BaseMenu.RadioGroup,
 	RadioItem: StyledRadioItem,
 	ItemIndicator: StyledItemIndicator,
 	Label: StyledLabel,
@@ -148,4 +186,5 @@ export const DropdownMenu = Object.assign(DropdownMenuRoot, {
 	Arrow: StyledArrow,
 	ItemRightSlot: DropdownMenuItemRightSlot,
 	TriggerIcon: DropdownMenuTriggerIcon,
+	createHandle: BaseMenu.createHandle,
 });

package/src/components/forms/EmojiField.tsx

@@ -9,11 +9,12 @@ import { Icon } from '../icon/Icon.js';
 import { Popover } from '../popover/Popover.js';
 import { HorizontalFieldLabel } from './FieldLabel.js';
 
-export interface EmojiFieldProps extends ButtonProps {
+export type EmojiFieldProps = Omit<ButtonProps, 'className'> & {
 	name: string;
 	label?: string;
 	required?: string;
-}
+	className?: string;
+};
 
 export function EmojiField({
 	name,
@@ -29,19 +30,21 @@ export function EmojiField({
 	return (
 		<Box gap="sm" className={className}>
 			<Popover open={open} onOpenChange={setOpen}>
-				<Popover.Trigger asChild>
-					<Button
-						id={id}
-						aria-label="Select emoji"
-						size="small"
-						className={clsx('p-0 transition-color', className)}
-						{...rest}
-					>
-						<Button.Icon className="text-[19px] w-touch h-touch flex items-center justify-center">
-							{props.value || <Icon name="smile" />}
-						</Button.Icon>
-					</Button>
-				</Popover.Trigger>
+				<Popover.Trigger
+					render={
+						<Button
+							id={id}
+							aria-label="Select emoji"
+							size="small"
+							className={clsx('p-0 transition-color', className)}
+							{...rest}
+						>
+							<Button.Icon className="text-[19px] w-touch h-touch flex items-center justify-center">
+								{props.value || <Icon name="smile" />}
+							</Button.Icon>
+						</Button>
+					}
+				/>
 				<Popover.Content>
 					<EmojiPicker
 						onValueChange={(v) => {

package/src/components/forms/SubmitButton.tsx

@@ -1,7 +1,7 @@
 import { useFormikContext } from 'formik';
 import { Button, ButtonProps } from '../button/Button.js';
 
-export function SubmitButton(props: ButtonProps) {
+export function SubmitButton({ nativeButton: _, ...props }: ButtonProps) {
 	const { isSubmitting, isValid } = useFormikContext();
 	return (
 		<Button
@@ -9,8 +9,8 @@ export function SubmitButton(props: ButtonProps) {
 			disabled={!isValid}
 			color="primary"
 			emphasis="primary"
-			type="submit"
 			{...props}
+			type="submit"
 		/>
 	);
 }

package/src/components/forms/TextField.tsx

@@ -108,12 +108,12 @@ export function TextAreaField({
 	const [props] = useField(name);
 	const { submitForm } = useFormikContext();
 	const onKeyDownInner = useCallback(
-		(e: KeyboardEvent<HTMLTextAreaElement>) => {
+		(e: KeyboardEvent<HTMLInputElement>) => {
 			if (submitOnEnter && e.key === 'Enter' && !e.shiftKey) {
 				e.preventDefault();
 				submitForm();
 			}
-			onKeyDown?.(e);
+			onKeyDown?.(e as any);
 		},
 		[submitOnEnter, onKeyDown, submitForm],
 	);

package/src/components/forms/ToggleGroupField.tsx

@@ -9,6 +9,7 @@ export type ToggleGroupFieldProps = ToggleGroupProps & {
 	required?: boolean;
 	className?: string;
 	id?: string;
+	type?: 'single' | 'multiple';
 };
 
 function ToggleGroupFieldDefault({
@@ -16,6 +17,7 @@ function ToggleGroupFieldDefault({
 	label,
 	required,
 	className,
+	type = 'single',
 	id,
 	...props
 }: ToggleGroupFieldProps) {
@@ -26,7 +28,13 @@ function ToggleGroupFieldDefault({
 			{label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}
 			<ToggleGroup
 				{...fieldProps}
-				onValueChange={(v: any) => tools.setValue(v)}
+				onValueChange={(v) => {
+					if (type === 'multiple') {
+						tools.setValue(v);
+					} else {
+						tools.setValue(v[0]);
+					}
+				}}
 				{...props}
 				id={id}
 				className={className}

package/src/components/horizontalList/HorizontalList.stories.tsx

@@ -57,8 +57,8 @@ export const Default: Story = {
 	render: (args) => {
 		const [open, setOpen] = useState(false);
 		return (
-			<div className="bg-black flex flex-col items-center h-full">
-				<div className="bg-white w-400px flex flex-col items-stretch h-full">
+			<div className="bg-black flex flex-col items-center h-full min-h-80vh">
+				<div className="bg-white w-400px flex flex-col items-stretch flex-1">
 					<Button
 						toggled={open}
 						onClick={() => setOpen(!open)}

package/src/components/horizontalList/HorizontalList.tsx

@@ -3,12 +3,7 @@ import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { Button } from '../button/index.js';
 import { CollapsibleSimple } from '../collapsible/Collapsible.js';
 import { Icon } from '../icon/index.js';
-import {
-	ScrollAreaProps,
-	ScrollAreaRoot,
-	ScrollAreaScrollbar,
-	ScrollAreaViewport,
-} from '../scrollArea/ScrollArea.js';
+import { ScrollArea } from '../scrollArea/ScrollArea.js';
 
 export interface HorizontalListProps {
 	open?: boolean;
@@ -16,7 +11,6 @@ export interface HorizontalListProps {
 	children: ReactNode;
 	className?: string;
 	contentClassName?: string;
-	background?: ScrollAreaProps['background'];
 	onCanOpenChange?: (canOpen: boolean) => void;
 	openDirection?: 'up' | 'down';
 	disableInternalOpenToggle?: boolean;
@@ -28,7 +22,6 @@ export function HorizontalList({
 	children,
 	className,
 	contentClassName,
-	background,
 	onCanOpenChange,
 	openDirection = 'down',
 	disableInternalOpenToggle,
@@ -144,18 +137,17 @@ export function HorizontalList({
 	const chevronFlip = openDirection === 'down' ? open : !open;
 
 	return (
-		<ScrollAreaRoot
+		<ScrollArea.Root
 			className={clsx(
-				'flex flex-col',
+				'layer-components:(flex flex-col w-full)',
 				'layer-components:max-h-300px',
 				className,
 			)}
-			background={background}
 			data-state={open ? 'open' : 'closed'}
 			{...rest}
 		>
-			<ScrollAreaViewport ref={containerRef}>
-				<div
+			<ScrollArea.Viewport ref={containerRef}>
+				<ScrollArea.Content
 					className={clsx(
 						'layer-components:(px-3 pt-3 pb-4 gap-2)',
 						'flex flex-row items-center gap-2 flex-shrink-0 w-max-content w-auto)',
@@ -186,10 +178,10 @@ export function HorizontalList({
 						</Button>
 					</CollapsibleSimple>
 					{children}
-				</div>
-			</ScrollAreaViewport>
-			<ScrollAreaScrollbar />
-			<ScrollAreaScrollbar orientation="horizontal" />
-		</ScrollAreaRoot>
+				</ScrollArea.Content>
+			</ScrollArea.Viewport>
+			<ScrollArea.Scrollbar />
+			<ScrollArea.Scrollbar orientation="horizontal" />
+		</ScrollArea.Root>
 	);
 }

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Icon } from './Icon.js';
+import { iconNames } from './generated/iconNames.js';
+
+const meta = {
+	title: 'Components/Icon',
+	component: Icon,
+	argTypes: {
+		name: {
+			control: { type: 'select', options: iconNames },
+		},
+	},
+	args: {
+		name: 'placeholder',
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {
+	render(args) {
+		return <Icon {...args} />;
+	},
+};
+
+export const All: Story = {
+	render() {
+		return (
+			<div className="grid grid-cols-6 gap-xs">
+				{iconNames.map((name) => (
+					<div
+						key={name}
+						className="flex flex-col items-center justify-center p-4 border border-gray-light gap-2"
+					>
+						<Icon name={name} size={25} />
+						<span className="text-sm text-center">{name}</span>
+					</div>
+				))}
+			</div>
+		);
+	},
+};

package/src/components/icon/Icon.tsx

@@ -1,10 +1,14 @@
+import { useRender, UseRenderComponentProps } from '@base-ui/react/use-render';
 import classNames from 'clsx';
-import { HTMLAttributes } from 'react';
 import { Spinner } from '../spinner/Spinner.js';
 import { IconName } from './generated/iconNames.js';
 import { useIconLoading } from './IconLoadingContext.js';
 
-export interface IconProps extends HTMLAttributes<SVGSVGElement> {
+export interface IconProps
+	extends UseRenderComponentProps<
+		'svg',
+		{ size: number; name: IconName; loading: boolean }
+	> {
 	name: IconName;
 	size?: number;
 	loading?: boolean;
@@ -16,6 +20,7 @@ export const Icon = function Icon({
 	size = 15,
 	className,
 	loading: loadingProp,
+	render,
 	...rest
 }: IconProps & {
 	ref?: React.Ref<SVGSVGElement>;
@@ -23,6 +28,28 @@ export const Icon = function Icon({
 	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
@@ -32,19 +59,5 @@ export const Icon = function Icon({
 		);
 	}
 
-	return (
-		<svg
-			ref={ref}
-			className={classNames(
-				'icon',
-				'flex-shrink-0 layer-components:fill-none',
-				className,
-			)}
-			width={size}
-			height={size}
-			{...rest}
-		>
-			<use xlinkHref={`#icon-${name}`} />
-		</svg>
-	);
+	return slotted;
 };

package/src/components/imageUploader/ImageUploader.tsx

@@ -247,18 +247,17 @@ export function ImageUploaderFileButton({ children, ...props }: ButtonProps) {
 		<Button
 			emphasis="ghost"
 			size="small"
-			asChild
+			render={<label htmlFor={inputId} />}
+			nativeButton={false}
 			visuallyFocused={focused}
 			{...props}
 		>
-			<label htmlFor={inputId}>
-				{children ?? (
-					<>
-						<Icon name="upload" />
-						<span>{dragging ? 'Drop' : 'Upload'}</span>
-					</>
-				)}
-			</label>
+			{children ?? (
+				<>
+					<Icon name="upload" />
+					<span>{dragging ? 'Drop' : 'Upload'}</span>
+				</>
+			)}
 		</Button>
 	);
 }

package/src/components/index.ts

@@ -1,4 +1,4 @@
-export { Slot, Slottable, type SlotProps } from '@radix-ui/react-slot';
+export * from '@base-ui/react/use-render';
 export * from './actions/index.js';
 export * from './avatar/index.js';
 export * from './box/Box.js';