@a-type/ui 4.0.8 → 4.1.0-beta.2

package/src/components/autocomplete/Autocomplete.stories.tsx

@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { Box } from '../box/Box.js';
+import { Icon } from '../icon/Icon.js';
+import { Autocomplete } from './Autocomplete.js';
+
+interface Args {
+	arrow?: boolean;
+	autoHighlight?: boolean;
+	keepHighlight?: boolean;
+	highlightItemOnHover?: boolean;
+}
+
+const meta = {
+	title: 'Components/Autocomplete',
+	argTypes: {
+		arrow: {
+			control: 'boolean',
+			description: 'Whether to show the arrow on the autocomplete popup.',
+			defaultValue: false,
+		},
+		autoHighlight: {
+			control: 'boolean',
+			description:
+				'If true, the first item will be automatically highlighted when the list opens.',
+			defaultValue: false,
+		},
+		keepHighlight: {
+			control: 'boolean',
+			description:
+				'If true, the highlighted item will be kept when the list is reopened.',
+			defaultValue: false,
+		},
+		highlightItemOnHover: {
+			control: 'boolean',
+			description:
+				'If true, items will be highlighted when hovered with the mouse.',
+			defaultValue: false,
+		},
+	},
+	args: {
+		arrow: false,
+		autoHighlight: false,
+		keepHighlight: false,
+		highlightItemOnHover: true,
+	},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<Args>;
+
+export default meta;
+
+type Story = StoryObj<Args>;
+
+export interface Item {
+	id: string;
+	label: string;
+}
+
+const items: Item[] = [
+	{ id: 'apple', label: 'Apple' },
+	{ id: 'banana', label: 'Banana' },
+	{ id: 'cherry', label: 'Cherry' },
+	{ id: 'date', label: 'Date' },
+	{ id: 'elderberry', label: 'Elderberry' },
+	{ id: 'fig', label: 'Fig' },
+	{ id: 'grape', label: 'Grape' },
+	{ id: 'honeydew', label: 'Honeydew' },
+];
+
+const ExampleAutocomplete = Autocomplete.create<Item>();
+
+export const Default: Story = {
+	render({ arrow, autoHighlight, keepHighlight, highlightItemOnHover }) {
+		const [value, setValue] = useState<string | undefined>(undefined);
+		return (
+			<ExampleAutocomplete
+				value={value}
+				onValueChange={setValue}
+				items={items}
+				autoHighlight={autoHighlight}
+				keepHighlight={keepHighlight}
+				highlightItemOnHover={highlightItemOnHover}
+			>
+				<ExampleAutocomplete.Input
+					icon={<Icon name="food" />}
+					className="w-[200px]"
+				/>
+				<ExampleAutocomplete.Content arrow={arrow}>
+					<ExampleAutocomplete.List>
+						{(item) => (
+							<ExampleAutocomplete.Item key={item.id} value={item.id}>
+								{item.label}
+							</ExampleAutocomplete.Item>
+						)}
+					</ExampleAutocomplete.List>
+					<ExampleAutocomplete.Empty>
+						No results found.
+					</ExampleAutocomplete.Empty>
+				</ExampleAutocomplete.Content>
+			</ExampleAutocomplete>
+		);
+	},
+};
+
+interface ItemGroup {
+	category: string;
+	items: Item[];
+}
+const groupedItems: ItemGroup[] = [
+	{
+		category: 'Fruits',
+		items: [
+			{ id: 'apple', label: 'Apple' },
+			{ id: 'banana', label: 'Banana' },
+			{ id: 'cherry', label: 'Cherry' },
+		],
+	},
+	{
+		category: 'Berries',
+		items: [
+			{ id: 'strawberry', label: 'Strawberry' },
+			{ id: 'blueberry', label: 'Blueberry' },
+			{ id: 'raspberry', label: 'Raspberry' },
+		],
+	},
+];
+
+const GroupedAutocomplete = Autocomplete.createGrouped<ItemGroup>();
+
+export const Grouped: Story = {
+	render({ arrow, autoHighlight, keepHighlight, highlightItemOnHover }) {
+		const [value, setValue] = useState<string | undefined>(undefined);
+		return (
+			<GroupedAutocomplete
+				value={value}
+				onValueChange={setValue}
+				items={groupedItems}
+				autoHighlight={autoHighlight}
+				keepHighlight={keepHighlight}
+				highlightItemOnHover={highlightItemOnHover}
+			>
+				<GroupedAutocomplete.Input />
+				<GroupedAutocomplete.Content arrow={arrow}>
+					<GroupedAutocomplete.List>
+						{(group) => (
+							<GroupedAutocomplete.Group key={group.category}>
+								<GroupedAutocomplete.GroupLabel>
+									{group.category}
+								</GroupedAutocomplete.GroupLabel>
+								<GroupedAutocomplete.GroupList>
+									{group.items.map((item) => (
+										<GroupedAutocomplete.Item key={item.id} value={item.id}>
+											{item.label}
+										</GroupedAutocomplete.Item>
+									))}
+								</GroupedAutocomplete.GroupList>
+							</GroupedAutocomplete.Group>
+						)}
+					</GroupedAutocomplete.List>
+					<GroupedAutocomplete.Empty>
+						No results found.
+					</GroupedAutocomplete.Empty>
+					<GroupedAutocomplete.Separator />
+					<div className="p-sm text-xs color-gray-dark">
+						Select your favorite fruit or berry.
+					</div>
+				</GroupedAutocomplete.Content>
+			</GroupedAutocomplete>
+		);
+	},
+};
+
+export const NotPopover: Story = {
+	render({ autoHighlight, keepHighlight, highlightItemOnHover }) {
+		const [value, setValue] = useState<string | undefined>(undefined);
+		return (
+			<GroupedAutocomplete
+				value={value}
+				onValueChange={setValue}
+				items={groupedItems}
+				autoHighlight={autoHighlight}
+				keepHighlight={keepHighlight}
+				highlightItemOnHover={highlightItemOnHover}
+			>
+				<Box border p surface="white" col>
+					<GroupedAutocomplete.Input disableCaret className="w-full" />
+					<GroupedAutocomplete.List>
+						{(group) => (
+							<GroupedAutocomplete.Group key={group.category}>
+								<GroupedAutocomplete.GroupLabel>
+									{group.category}
+								</GroupedAutocomplete.GroupLabel>
+								<GroupedAutocomplete.GroupList>
+									{group.items.map((item) => (
+										<GroupedAutocomplete.Item key={item.id} value={item.id}>
+											{item.label}
+										</GroupedAutocomplete.Item>
+									))}
+								</GroupedAutocomplete.GroupList>
+							</GroupedAutocomplete.Group>
+						)}
+					</GroupedAutocomplete.List>
+					<GroupedAutocomplete.Empty>
+						No results found.
+					</GroupedAutocomplete.Empty>
+				</Box>
+			</GroupedAutocomplete>
+		);
+	},
+};

package/src/components/autocomplete/Autocomplete.tsx

@@ -0,0 +1,336 @@
+import {
+	AutocompleteArrowProps,
+	Autocomplete as BaseAutocomplete,
+	AutocompleteGroupProps as BaseAutocompleteGroupProps,
+	AutocompleteInputProps as BaseAutocompleteInputProps,
+	AutocompleteItemProps as BaseAutocompleteItemProps,
+	AutocompleteListProps as BaseAutocompleteListProps,
+	AutocompletePopupProps as BaseAutocompletePopupProps,
+	AutocompletePositionerProps as BaseAutocompletePositionerProps,
+	AutocompleteRootProps as BaseAutocompleteRootProps,
+} from '@base-ui/react/autocomplete';
+import { ButtonProps } from '@base-ui/react/button';
+import {
+	ComboboxIconProps as BaseAutocompleteIconProps,
+	ComboboxRowProps as BaseAutocompleteRowProps,
+} from '@base-ui/react/combobox';
+import clsx from 'clsx';
+import { createContext, ReactNode, useContext } from 'react';
+import { withClassName } from '../../hooks.js';
+import { PaletteName } from '../../uno/index.js';
+import { Button } from '../button/Button.js';
+import { Chip, ChipProps } from '../chip/Chip.js';
+import { Icon } from '../icon/Icon.js';
+import { Input } from '../input/Input.js';
+import {
+	arrowClassName,
+	itemClassName,
+	itemListClassName,
+	popupClassName,
+	separatorClassName,
+} from '../primitives/menus.js';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
+
+const ValueContext = createContext<string | number | readonly string[] | null>(
+	null,
+);
+
+const AutocompleteRoot = (props: BaseAutocompleteRootProps<any>) => {
+	return (
+		<ValueContext.Provider value={props.value || null}>
+			<BaseAutocomplete.Root {...props} />
+		</ValueContext.Provider>
+	);
+};
+
+export interface AutocompleteInputProps extends BaseAutocompleteInputProps {
+	ref?: React.Ref<HTMLInputElement>;
+	icon?: ReactNode;
+	disableCaret?: boolean;
+}
+const AutocompleteInput = ({
+	disableCaret,
+	icon,
+	...props
+}: AutocompleteInputProps) => {
+	const valueFromContext = useContext(ValueContext);
+	return (
+		<BaseAutocomplete.Input
+			render={({ ref, className, ...props }, state) => (
+				<Input.Border ref={ref} className={className}>
+					{icon}
+					<Input.Input autoComplete="off" {...props} />
+					{(valueFromContext !== null || !disableCaret) && (
+						<div className="flex items-center">
+							{valueFromContext !== null && <AutocompleteClear />}
+							{!disableCaret && (
+								<BaseAutocomplete.Trigger
+									render={<Button emphasis="ghost" size="small" />}
+								>
+									<AutocompleteIcon data-open={state.open ? true : undefined} />
+								</BaseAutocomplete.Trigger>
+							)}
+						</div>
+					)}
+				</Input.Border>
+			)}
+			{...props}
+		/>
+	);
+};
+
+const AutocompleteIcon = withClassName(
+	({ className, ...props }: BaseAutocompleteIconProps) => (
+		<BaseAutocomplete.Icon
+			{...props}
+			className={clsx(
+				'icon',
+				'layer-components:(flex shrink-0 items-center justify-center transition-transform)',
+				'layer-components:data-[open]:(rotate-180)',
+				className,
+			)}
+		>
+			<Icon name="chevron" />
+		</BaseAutocomplete.Icon>
+	),
+);
+
+const AutocompletePopup = withClassName(
+	BaseAutocomplete.Popup,
+	popupClassName,
+	'layer-components:(w-[--anchor-width])',
+);
+
+const AutocompleteBackdrop = withClassName(
+	BaseAutocomplete.Backdrop,
+	'layer-components:(fixed inset-0)',
+);
+
+const AutocompleteArrow = ({ className, ...props }: AutocompleteArrowProps) => (
+	<BaseAutocomplete.Arrow
+		{...props}
+		className={clsx(arrowClassName, className)}
+	>
+		<ArrowSvg />
+	</BaseAutocomplete.Arrow>
+);
+
+export interface AutocompletePopoupProps extends BaseAutocompletePopupProps {
+	positioner?: BaseAutocompletePositionerProps;
+	ref?: React.Ref<HTMLDivElement>;
+	arrow?: boolean;
+}
+const AutocompleteContent = ({
+	positioner,
+	arrow,
+	children,
+	...props
+}: AutocompletePopoupProps) => {
+	return (
+		<BaseAutocomplete.Portal>
+			<AutocompleteBackdrop />
+			<BaseAutocomplete.Positioner sideOffset={8} {...positioner}>
+				<AutocompletePopup {...props}>
+					{arrow && <AutocompleteArrow />}
+					{children}
+				</AutocompletePopup>
+			</BaseAutocomplete.Positioner>
+		</BaseAutocomplete.Portal>
+	);
+};
+
+const AutocompleteList = withClassName(
+	BaseAutocomplete.List,
+	itemListClassName,
+	'layer-components:(flex flex-col overscroll-contain outline-none overflow-y-auto overflow-unstable)',
+	'layer-components:empty:(p-0)',
+);
+
+const AutocompleteEmpty = withClassName(
+	BaseAutocomplete.Empty,
+	'layer-components:[&:not(:empty)]:(p-sm text-sm color-gray-dark)',
+);
+
+export interface AutocompleteItemProps extends BaseAutocompleteItemProps {
+	ref?: React.Ref<HTMLDivElement>;
+	color?: PaletteName;
+}
+const AutocompleteItem = ({
+	className,
+	color = 'gray',
+	...props
+}: AutocompleteItemProps) => (
+	<BaseAutocomplete.Item
+		className={clsx(color && `palette-${color}`, itemClassName, className)}
+		{...props}
+	/>
+);
+const AutocompleteGroup = ({
+	className,
+	...props
+}: BaseAutocompleteGroupProps & { ref?: React.Ref<HTMLDivElement> }) => {
+	return (
+		<BaseAutocomplete.Group
+			{...props}
+			className={clsx(
+				'layer-components:(flex flex-col gap-xs overflow-hidden p-sm)',
+				className,
+			)}
+		/>
+	);
+};
+
+const AutocompleteGroupItemList = withClassName(
+	SlotDiv,
+	'layer-components:(flex flex-row flex-wrap gap-xs)',
+);
+
+const AutocompleteGroupLabel = withClassName(
+	BaseAutocomplete.GroupLabel,
+	'layer-components:(w-full px-xs text-xs font-medium uppercase color-gray-dark)',
+);
+
+const AutocompleteRow: React.FC<BaseAutocompleteRowProps> = withClassName(
+	BaseAutocomplete.Row,
+	'layer-components:(flex items-center gap-xs)',
+);
+
+const AutocompleteSeparator = withClassName(
+	BaseAutocomplete.Separator,
+	separatorClassName,
+);
+
+export interface AutocompleteGroupItemProps
+	extends Omit<BaseAutocompleteItemProps, 'render'> {
+	ref?: React.Ref<HTMLDivElement>;
+	replace?: BaseAutocompleteItemProps['render'];
+	render?: ChipProps['render'];
+}
+function AutocompleteGroupItem({
+	className,
+	replace,
+	render,
+	...props
+}: AutocompleteGroupItemProps) {
+	return (
+		<BaseAutocomplete.Item
+			render={replace ?? <Button render={<Chip render={render} />} />}
+			{...props}
+			className={clsx(
+				'palette-primary',
+				'layer-composed-2:(bg-white)',
+				'layer-composed-2:data-[highlighted]:(ring-2 bg-main-wash ring-primary)',
+				className,
+			)}
+		/>
+	);
+}
+
+export type AutocompleteClearProps = ButtonProps & {
+	ref?: React.Ref<HTMLButtonElement>;
+	children?: ReactNode;
+};
+const AutocompleteClear = ({ children, ...props }: AutocompleteClearProps) => (
+	<BaseAutocomplete.Clear
+		render={<Button emphasis="ghost" size="small" />}
+		{...props}
+	>
+		{children ?? <Icon name="x" />}
+	</BaseAutocomplete.Clear>
+);
+
+const baseSubComponents = {
+	useFilter: BaseAutocomplete.useFilter,
+
+	Input: AutocompleteInput,
+	Content: AutocompleteContent,
+	Empty: AutocompleteEmpty,
+	List: AutocompleteList,
+	Item: AutocompleteItem,
+	Group: AutocompleteGroup,
+	GroupLabel: AutocompleteGroupLabel,
+	GroupList: AutocompleteGroupItemList,
+	Row: AutocompleteRow,
+	Separator: AutocompleteSeparator,
+	Clear: AutocompleteClear,
+
+	Positioner: BaseAutocomplete.Positioner,
+	Portal: BaseAutocomplete.Portal,
+	Popup: AutocompletePopup,
+	Backdrop: AutocompleteBackdrop,
+
+	ListItem: AutocompleteItem,
+	GroupItem: AutocompleteGroupItem,
+
+	Unstyled: BaseAutocomplete,
+};
+
+function createAutocomplete<TItem>() {
+	function TypedRoot(
+		props: Omit<BaseAutocompleteRootProps<TItem>, 'items'> & {
+			items: readonly TItem[];
+		},
+	) {
+		return <AutocompleteRoot {...(props as any)} />;
+	}
+	function TypedList(
+		props: Omit<BaseAutocompleteListProps, 'children'> & {
+			children?: ReactNode | ((item: TItem, index: number) => ReactNode);
+		},
+	) {
+		return <AutocompleteList {...props} />;
+	}
+	return Object.assign(TypedRoot, {
+		...baseSubComponents,
+		Input: AutocompleteInput,
+		Content: AutocompleteContent,
+		List: TypedList,
+		Empty: AutocompleteEmpty,
+		Item: AutocompleteItem,
+	});
+}
+
+function createAutocompleteGrouped<
+	TItemGroup extends { items: readonly any[] },
+>() {
+	function TypedRoot(
+		props: Omit<
+			BaseAutocompleteRootProps<TItemGroup['items'][number]>,
+			'items'
+		> & {
+			items: TItemGroup[];
+		},
+	) {
+		return <AutocompleteRoot {...(props as any)} />;
+	}
+	function TypedList(
+		props: Omit<BaseAutocompleteListProps, 'children'> & {
+			children?:
+				| ReactNode
+				| ((group: TItemGroup, groupIndex: number) => ReactNode);
+		},
+	) {
+		return <AutocompleteList {...props} />;
+	}
+
+	return Object.assign(TypedRoot, {
+		...baseSubComponents,
+		Content: AutocompleteContent,
+		Item: AutocompleteGroupItem,
+		Input: AutocompleteInput,
+		List: TypedList,
+		Group: AutocompleteGroup,
+		GroupLabel: AutocompleteGroupLabel,
+		GroupList: AutocompleteGroupItemList,
+		Empty: AutocompleteEmpty,
+		Row: AutocompleteRow,
+	});
+}
+
+export const Autocomplete = Object.assign(AutocompleteRoot, {
+	create: createAutocomplete,
+	createGrouped: createAutocompleteGrouped,
+
+	...baseSubComponents,
+});

package/src/components/avatar/Avatar.tsx

@@ -31,9 +31,9 @@ export function Avatar({
 		<BaseAvatar.Root
 			data-pop={popIn}
 			className={classNames(
-				'layer-components:(flex items-center justify-center rounded-lg border-default overflow-hidden w-24px aspect-1 select-none relative bg-white flex-shrink-0)',
+				'layer-components:(relative aspect-1 w-24px flex flex-shrink-0 select-none items-center justify-center overflow-hidden border-default rounded-lg bg-white)',
 				popIn &&
-					'layer-variants:(animate-pop-in-from-half animate-ease-springy animate-duration-200)',
+					'layer-variants:(animate-pop-in-from-half animate-duration-200 animate-ease-springy)',
 				empty && 'layer-components:(border-dashed bg-gray-light)',
 				className,
 			)}
@@ -42,7 +42,7 @@ export function Avatar({
 		>
 			{imageSrc && (
 				<BaseAvatar.Image
-					className="w-full h-full object-cover"
+					className="h-full w-full object-cover"
 					referrerPolicy="no-referrer"
 					src={imageSrc}
 					alt={`${name ?? 'user'}'s profile picture`}

package/src/components/box/Box.stories.tsx

@@ -134,7 +134,7 @@ function SurfaceContent({ name }: { name: string }) {
 export const Surfaces: Story = {
 	render(args) {
 		return (
-			<div className="grid gap-lg grid-cols-2 md:grid-cols-3 bg-wash" {...args}>
+			<div className="grid grid-cols-2 gap-lg bg-wash md:grid-cols-3" {...args}>
 				<Box {...args} surface="white" p="lg" col gap>
 					<SurfaceContent name="White" />
 				</Box>

package/src/components/box/Box.tsx

@@ -100,7 +100,7 @@ export function Box({
 			{...rest}
 			style={style}
 			className={clsx(
-				'layer-components:flex layer-components:relative',
+				'layer-components:relative layer-components:flex',
 				color && `palette-${color}`,
 				{
 					'layer-components:flex-row': hasDefault(direction, 'row') && !col,
@@ -187,9 +187,9 @@ export function Box({
 						(rounded === undefined && (surface || border)),
 					'layer-components:rounded-xl': rounded === 'xl',
 
-					'layer-components:(bg-white border-gray-dark color-black)':
+					'layer-components:(color-black bg-white border-gray-dark)':
 						surface === 'white',
-					'layer-components:(bg-main-wash border-main-dark color-main-ink)':
+					'layer-components:(color-main-ink bg-main-wash border-main-dark)':
 						surface === true,
 
 					'layer-components:(border border-solid)': border,
@@ -197,9 +197,9 @@ export function Box({
 					'layer-components:h-full': full === true || full === 'height',
 					'layer-components:overflow-hidden': overflow === 'hidden',
 					'layer-components:overflow-auto': overflow === 'auto',
-					'layer-components:(overflow-x-auto overflow-y-hidden)':
+					'layer-components:(overflow-y-hidden overflow-x-auto)':
 						overflow === 'auto-x',
-					'layer-components:(overflow-y-auto overflow-x-hidden)':
+					'layer-components:(overflow-x-hidden overflow-y-auto)':
 						overflow === 'auto-y',
 					'layer-components:flex-grow': grow,
 					'layer-components:@container': container === true,

package/src/components/button/Button.tsx

@@ -131,12 +131,12 @@ export function ButtonRoot({
 							animate={{ width: 'auto', marginLeft: 0 }}
 							exit={{ width: 0, marginLeft: '-0.5rem' }}
 							className={clsx(
-								'flex-shrink-0 inline-block overflow-hidden my-auto flex',
+								'my-auto inline-block flex flex-shrink-0 overflow-hidden',
 								'[[data-has-icon=true]_&]:hidden',
 							)}
 							data-default-loader
 						>
-							<Spinner size={15} className="inline-block w-1em h-1em" />
+							<Spinner size={15} className="inline-block h-1em w-1em" />
 						</motion.div>
 					)}
 				</AnimatePresence>
@@ -166,7 +166,7 @@ export const ButtonToggleIndicator = memo(function ToggleIndicator({
 		<Icon
 			aria-hidden
 			name="check"
-			className="transition-width w-0 ml--1"
+			className="ml--1 w-0 transition-width"
 			style={{
 				width: value ? '15px' : 0,
 			}}

package/src/components/button/ConfirmedButton.tsx

@@ -46,7 +46,7 @@ export function ConfirmedButton({
 		return (
 			<Button
 				{...rest}
-				onClick={(ev) => {
+				onClick={() => {
 					onConfirm();
 				}}
 			/>