@a-type/ui 5.0.22 → 6.0.0

package/src/colors.stories.tsx

@@ -1,10 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import clsx from 'clsx';
 import { CSSProperties } from 'react';
+import { $userColorHue, $userColorSaturation } from './arbor/props.js';
+import cls from './colors.module.css';
 import { Box } from './components/index.js';
-import { PROPS } from './uno/index.js';
-import { snapshotColorContext } from './uno/logic/color.js';
-import { defaultPalettes } from './uno/logic/palettes.js';
 
 const meta = {
 	title: 'System/Colors',
@@ -33,36 +32,26 @@ export const Default: Story = {
 	render(args: any) {
 		const style: any = args.customHue
 			? {
-					[PROPS.USER.COLOR.PRIMARY_HUE]: args.customHue,
+					[$userColorHue]: args.customHue,
+					[$userColorSaturation]: '1',
 			  }
 			: {};
 
 		const ranges = (
 			<>
-				<Range className="palette-primary" style={style} />
-				<Range className="palette-lemon" />
-				<Range className="palette-leek" />
-				<Range className="palette-tomato" />
-				<Range className="palette-eggplant" />
-				<Range className="palette-blueberry" />
-				<Range className="palette-attention" />
-				<Range className="palette-success" />
-				<Box className="relative h-100px">
-					<Box grow className="bg-gray-wash" />
-					<Box grow className="bg-gray-light" />
-					<Box grow className="bg-gray" />
-					<Box grow className="bg-gray-dark" />
-					<Box grow className="bg-gray-ink" />
-					<div className="absolute left-0 top-0 text-xs color-white bg-black/50">
-						local gray
-					</div>
-				</Box>
-				<Range className="palette-gray" />
-				<Range className="palette-high-contrast" />
+				<Range className="@mode-user" style={style} />
+				<Range className="@mode-lemon" />
+				<Range className="@mode-leek" />
+				<Range className="@mode-tomato" />
+				<Range className="@mode-eggplant" />
+				<Range className="@mode-blueberry" />
+				<Range className="@mode-attention" />
+				<Range className="@mode-success" />
+				<Range className="@mode-neutral" />
 				<Box className="h-100px">
-					<Box grow className="bg-black" />
-					<Box grow className="bg-wash" />
-					<Box grow className="bg-white" />
+					<Box grow className={cls.bgNeutralInk} />
+					<Box grow className={cls.bgNeutralWash} />
+					<Box grow className={cls.bgNeutralPaper} />
 				</Box>
 			</>
 		);
@@ -71,10 +60,10 @@ export const Default: Story = {
 			<Box col>
 				<input type="color" className="sticky top-0 z-1" />
 				<Box full>
-					<Box d="col" grow p surface>
+					<Box d="col" grow p surface="ambient">
 						{ranges}
 					</Box>
-					<Box d="col" className="override-dark theme" grow p>
+					<Box d="col" className="@mode-dark" surface="ambient" grow p>
 						{ranges}
 					</Box>
 				</Box>
@@ -112,14 +101,12 @@ function Swatch({
 function Range({ className, style }: { className?: string; style?: any }) {
 	return (
 		<Box className={clsx('relative', className)} style={style}>
-			<Swatch className="bg-main-wash" />
-			<Swatch className="bg-main-light" />
-			<Swatch className="bg-main" />
-			<Swatch className="bg-main-dark" />
-			<Swatch className="bg-main-ink" />
-			<div className="absolute left-0 top-0 text-xs color-white bg-black/50">
-				{className}
-			</div>
+			<Swatch className={cls.bgWash} />
+			<Swatch className={cls.bgLight} />
+			<Swatch className={cls.bgMid} />
+			<Swatch className={cls.bgHeavy} />
+			<Swatch className={cls.bgInk} />
+			<div className={cls.rangeLabel}>{className}</div>
 		</Box>
 	);
 }
@@ -128,17 +115,17 @@ export const Modifiers: Story = {
 	render(args: any) {
 		const style: any = args.customHue
 			? {
-					[PROPS.USER.COLOR.PRIMARY_HUE]: args.customHue,
+					[$userColorHue]: args.customHue,
 			  }
 			: {};
 		return (
 			<Box col>
-				<ModifierRange className="theme-salt" />
-				<ModifierRange className="theme-lemon" />
-				<ModifierRange className="theme-leek" />
-				<ModifierRange className="theme-tomato" />
-				<ModifierRange className="theme-eggplant" />
-				<ModifierRange className="theme-blueberry" />
+				<ModifierRange className="@mode-salt" />
+				<ModifierRange className="@mode-lemon" />
+				<ModifierRange className="@mode-leek" />
+				<ModifierRange className="@mode-tomato" />
+				<ModifierRange className="@mode-eggplant" />
+				<ModifierRange className="@mode-blueberry" />
 				<ModifierRange style={style} className="theme" />
 			</Box>
 		);
@@ -154,134 +141,19 @@ function ModifierRange({
 }) {
 	return (
 		<Box className={className} style={style}>
-			<Swatch className="bg-main-wash">W</Swatch>
-			<Swatch className="bg-main-light bg-lighten-2">L+2</Swatch>
-			<Swatch className="bg-main-light">L</Swatch>
-			{/* <Swatch className="bg-main bg-lighten-5">P+5</Swatch> */}
-			<Swatch className="bg-main bg-lighten-2">P+2</Swatch>
-			<Swatch className="bg-main bg-lighten-1">P+1</Swatch>
-			<Swatch className="bg-main">P</Swatch>
-			<Swatch className="bg-main bg-darken-1">P-1</Swatch>
-			<Swatch className="bg-main bg-darken-2">P-2</Swatch>
-			{/* <Swatch className="bg-main bg-darken-5">P-5</Swatch> */}
-			<Swatch className="bg-main-dark">D</Swatch>
-			<Swatch className="bg-main-dark bg-darken-2">D-2</Swatch>
-			<Swatch className="bg-main-ink">I</Swatch>
+			<Swatch className={cls.bgWash}>W</Swatch>
+			<Swatch className={clsx(cls.bgLight, cls.bgLighten2)}>L+2</Swatch>
+			<Swatch className={cls.bgLight}>L</Swatch>
+			<Swatch className={cls.bgBetweenMidLight}>B/W</Swatch>
+			<Swatch className={clsx(cls.bgMid, cls.bgLighten2)}>P+2</Swatch>
+			<Swatch className={clsx(cls.bgMid, cls.bgLighten1)}>P+1</Swatch>
+			<Swatch className={cls.bgMid}>P</Swatch>
+			<Swatch className={clsx(cls.bgMid, cls.bgDarken1)}>P-1</Swatch>
+			<Swatch className={clsx(cls.bgMid, cls.bgDarken2)}>P-2</Swatch>
+			<Swatch className={cls.bgBetweenMidHeavy}>B/H</Swatch>
+			<Swatch className={cls.bgHeavy}>H</Swatch>
+			<Swatch className={clsx(cls.bgHeavy, cls.bgDarken2)}>H-2</Swatch>
+			<Swatch className={cls.bgInk}>I</Swatch>
 		</Box>
 	);
 }
-
-export const Inheritance: Story = {
-	render(args: any) {
-		const style: any = args.customHue
-			? {
-					[PROPS.USER.COLOR.PRIMARY_HUE]: args.customHue,
-			  }
-			: {};
-		return (
-			<Box color="primary" surface p="xl" className="theme" style={style}>
-				<Box
-					className="color-bg color-darken-5 border-bg border-darken-5"
-					border
-					p="xl"
-				>
-					Inherits and darkens
-				</Box>
-			</Box>
-		);
-	},
-};
-
-export const TweakOpacity: Story = {
-	render() {
-		// none of these elements have root opacity; all opacity is done through colors
-		return (
-			<Box color="accent" surface className="h-32" full="width" p gap>
-				<Box
-					className="h-full border ring color-primary-dark/100 bg-primary/100 border-black/100 ring-primary-light/100"
-					grow
-				>
-					100
-				</Box>
-				<Box
-					className="h-full border ring color-primary-dark/90 bg-primary/90 border-black/90 ring-primary-light/90"
-					grow
-				>
-					90
-				</Box>
-				<Box
-					className="h-full border ring color-primary-dark/80 bg-primary/80 border-black/80 ring-primary-light/80"
-					grow
-				>
-					80
-				</Box>
-				<Box
-					className="h-full border ring color-primary-dark/70 bg-primary/70 border-black/70 ring-primary-light/70"
-					grow
-				>
-					70
-				</Box>
-				<Box
-					className="h-full border ring color-primary-dark/60 bg-primary/60 border-black/60 ring-primary-light/60"
-					grow
-				>
-					60
-				</Box>
-				<Box
-					className="h-full border ring color-primary-dark/50 bg-primary/50 border-black/50 ring-primary-light/50"
-					grow
-				>
-					50
-				</Box>
-				<Box
-					className="h-full border ring color-primary-dark/40 bg-primary/40 border-black/40 ring-primary-light/40"
-					grow
-				>
-					40
-				</Box>
-				<Box
-					className="h-full border ring color-primary-dark/30 bg-primary/30 border-black/30 ring-primary-light/30"
-					grow
-				>
-					30
-				</Box>
-				<Box
-					className="h-full border ring color-primary-dark/20 bg-primary/20 border-black/20 ring-primary-light/20"
-					grow
-				>
-					20
-				</Box>
-				<Box
-					className="h-full border ring color-primary-dark/10 bg-primary/10 border-black/10 ring-primary-light/10"
-					grow
-				>
-					10
-				</Box>
-			</Box>
-		);
-	},
-};
-
-export const ComputedColors: Story = {
-	render() {
-		const ctx = snapshotColorContext('primary');
-		const oklchValues = [
-			defaultPalettes.primary.definitions.wash.computeOklch(ctx),
-			defaultPalettes.primary.definitions.light.computeOklch(ctx),
-			defaultPalettes.primary.definitions.default.computeOklch(ctx),
-			defaultPalettes.primary.definitions.dark.computeOklch(ctx),
-			defaultPalettes.primary.definitions.ink.computeOklch(ctx),
-		];
-
-		return (
-			<Box col>
-				<Range className="theme" />
-				<Box className="h-100px">
-					{oklchValues.map((oklch) => (
-						<Swatch style={{ backgroundColor: oklch }}>OK</Swatch>
-					))}
-				</Box>
-			</Box>
-		);
-	},
-};

package/src/components/actions/ActionBar.module.css

@@ -0,0 +1,34 @@
+.root {
+	position: relative;
+	height: max-content;
+	width: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	overflow: clip;
+	transition: height var(--m-duration) var(--m-easing);
+
+	&:empty {
+		height: 0;
+	}
+}
+
+.scrollArea {
+	height: 100%;
+	width: 100%;
+	flex: 1;
+}
+
+.scrollAreaContent {
+	position: relative;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+
+	&[data-wrap='true'] {
+		flex-wrap: wrap;
+	}
+}

package/src/components/actions/ActionBar.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 { Icon } from '../icon/Icon.js';
 import { ActionBar } from './ActionBar.js';
@@ -49,7 +49,7 @@ export const Default: Story = {};
 export const OnBackground: Story = {
 	render: (args) => {
 		return (
-			<Box color="accent" surface overflow="hidden">
+			<Box color="accent" surface="primary" overflow="hidden">
 				<ActionBar {...args} />
 			</Box>
 		);

package/src/components/actions/ActionBar.tsx

@@ -1,6 +1,7 @@
 import classNames from 'clsx';
 import { ReactNode, Suspense } from 'react';
 import { ScrollArea } from '../scrollArea/ScrollArea.js';
+import cls from './ActionBar.module.css';
 
 export interface ActionBarProps {
 	children: ReactNode;
@@ -18,23 +19,11 @@ export function ActionBar({
 }: ActionBarProps) {
 	return (
 		<Suspense fallback={null}>
-			<div
-				className={classNames(
-					'layer-components:springy layer-components:(relative h-[max-content] w-full flex flex-row items-center justify-start overflow-hidden transition-[height])',
-					'layer-components:[&:empty]:height-0',
-					className,
-				)}
-				{...rest}
-			>
-				<ScrollArea
-					disableFades={disableShadow}
-					className="layer-components:(h-full w-full flex-grow)"
-				>
+			<div className={classNames(cls.root, className)} {...rest}>
+				<ScrollArea disableFades={disableShadow} className={cls.scrollArea}>
 					<ScrollArea.Content
-						className={classNames(
-							'layer-composed:(relative h-full flex flex-row items-center justify-start)',
-							wrap && 'layer-variants:flex-wrap',
-						)}
+						className={classNames(cls.scrollAreaContent)}
+						data-wrap={wrap}
 					>
 						{children}
 					</ScrollArea.Content>

package/src/components/actions/ActionButton.module.css

@@ -0,0 +1,6 @@
+.button {
+	font-weight: normal;
+}
+.collapse {
+	padding: var(--m-spacing-sm);
+}

package/src/components/actions/ActionButton.tsx

@@ -1,17 +1,18 @@
-'use client';
-
 import classNames from 'clsx';
 import { useEffect, useState } from 'react';
 import { Button, ButtonProps } from '../button/Button.js';
 import { CollapsibleContent, CollapsibleRoot } from '../collapsible/index.js';
+import cls from './ActionButton.module.css';
 
 export type ActionButtonProps = ButtonProps & {
 	visible?: boolean;
+	rootClassName?: string;
 };
 
 export function ActionButton({
 	children,
 	className,
+	rootClassName,
 	visible = true,
 	...rest
 }: ActionButtonProps) {
@@ -37,15 +38,12 @@ export function ActionButton({
 	}
 
 	return (
-		<CollapsibleRoot open={!visible ? false : render}>
-			<CollapsibleContent data-horizontal>
+		<CollapsibleRoot className={rootClassName} open={!visible ? false : render}>
+			<CollapsibleContent data-horizontal className={cls.collapse}>
 				<Button
 					size="small"
 					disableIconMode
-					className={classNames(
-						'layer-variants:(m-2 mx-1 font-normal)',
-						className,
-					)}
+					className={classNames(cls.button, className)}
 					{...rest}
 				>
 					{children}

package/src/components/autocomplete/Autocomplete.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 { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
@@ -74,7 +74,7 @@ const ExampleAutocomplete = Autocomplete.create<Item>();
 
 export const Default: Story = {
 	render({ arrow, autoHighlight, keepHighlight, highlightItemOnHover }) {
-		const [value, setValue] = useState<string | undefined>(undefined);
+		const [value, setValue] = useState<string>('');
 		return (
 			<ExampleAutocomplete
 				value={value}
@@ -86,7 +86,7 @@ export const Default: Story = {
 			>
 				<ExampleAutocomplete.Input
 					icon={<Icon name="food" />}
-					className="w-[200px]"
+					style={{ width: 200 }}
 				/>
 				<ExampleAutocomplete.Content arrow={arrow}>
 					<ExampleAutocomplete.List>
@@ -164,9 +164,9 @@ export const Grouped: Story = {
 						No results found.
 					</GroupedAutocomplete.Empty>
 					<GroupedAutocomplete.Separator />
-					<div className="p-sm text-xs color-gray-dark">
+					<GroupedAutocomplete.Details>
 						Select your favorite fruit or berry.
-					</div>
+					</GroupedAutocomplete.Details>
 				</GroupedAutocomplete.Content>
 			</GroupedAutocomplete>
 		);
@@ -185,13 +185,17 @@ export const NotPopover: Story = {
 				keepHighlight={keepHighlight}
 				highlightItemOnHover={highlightItemOnHover}
 			>
-				<Box border p surface="white" col>
+				<Box border p surface="ambient" col>
 					<GroupedAutocomplete.Input
 						disableCaret
-						className="w-full"
+						style={{ width: '100%' }}
 						disableClear
 					>
-						<Button size="small" emphasis="primary" className="aspect-1 h-full">
+						<Button
+							size="small"
+							emphasis="primary"
+							style={{ aspectRatio: '1', height: '100%' }}
+						>
 							<Icon name="plus" />
 						</Button>
 					</GroupedAutocomplete.Input>

package/src/components/autocomplete/Autocomplete.tsx

@@ -16,30 +16,16 @@ import {
 import clsx from 'clsx';
 import { ReactNode } 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 {
-	comboboxBackdropClassName,
 	ComboboxComposedInput,
-	comboboxEmptyClassName,
-	comboboxGroupClassName,
-	comboboxGroupItemClassName,
-	comboboxGroupItemListClassName,
-	comboboxGroupLabelClassName,
-	comboboxIconClassName,
 	ComboboxInputProps,
-	comboboxListClassName,
-	comboboxPopupClassName,
-	comboboxRowClassName,
 	ComboboxValueContext,
 } from '../combobox/Combobox.js';
+import cls from '../combobox/Combobox.module.css';
 import { Icon } from '../icon/Icon.js';
-import {
-	arrowClassName,
-	itemClassName,
-	separatorClassName,
-} from '../primitives/menus.js';
+import menuCls from '../primitives/menus.module.css';
 import { ArrowSvg } from '../utility/ArrowSvg.js';
 import { SlotDiv } from '../utility/SlotDiv.js';
 
@@ -85,30 +71,21 @@ const AutocompleteInput = ({
 
 export const AutocompleteIcon = withClassName(
 	({ className, ...props }: BaseAutocompleteIconProps) => (
-		<BaseAutocomplete.Icon
-			{...props}
-			className={clsx(comboboxIconClassName, className)}
-		>
+		<BaseAutocomplete.Icon {...props} className={clsx(cls.icon, className)}>
 			<Icon name="chevron" />
 		</BaseAutocomplete.Icon>
 	),
 );
 
-const AutocompletePopup = withClassName(
-	BaseAutocomplete.Popup,
-	comboboxPopupClassName,
-);
+const AutocompletePopup = withClassName(BaseAutocomplete.Popup, cls.popup);
 
 const AutocompleteBackdrop = withClassName(
 	BaseAutocomplete.Backdrop,
-	comboboxBackdropClassName,
+	cls.backdrop,
 );
 
 const AutocompleteArrow = ({ className, ...props }: AutocompleteArrowProps) => (
-	<BaseAutocomplete.Arrow
-		{...props}
-		className={clsx(arrowClassName, className)}
-	>
+	<BaseAutocomplete.Arrow {...props} className={clsx(menuCls.arrow, className)}>
 		<ArrowSvg />
 	</BaseAutocomplete.Arrow>
 );
@@ -128,7 +105,7 @@ const AutocompleteContent = ({
 		<BaseAutocomplete.Portal>
 			<AutocompleteBackdrop />
 			<BaseAutocomplete.Positioner sideOffset={8} {...positioner}>
-				<AutocompletePopup {...props}>
+				<AutocompletePopup className={menuCls.popup} {...props}>
 					{arrow && <AutocompleteArrow />}
 					{children}
 				</AutocompletePopup>
@@ -137,62 +114,44 @@ const AutocompleteContent = ({
 	);
 };
 
-const AutocompleteList = withClassName(
-	BaseAutocomplete.List,
-	comboboxListClassName,
-);
+const AutocompleteList = withClassName(BaseAutocomplete.List, cls.list);
 
-const AutocompleteEmpty = withClassName(
-	BaseAutocomplete.Empty,
-	comboboxEmptyClassName,
-);
+const AutocompleteEmpty = withClassName(BaseAutocomplete.Empty, cls.empty);
 
 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 AutocompleteItem = ({ className, ...props }: AutocompleteItemProps) => (
+	<BaseAutocomplete.Item className={clsx(menuCls.item, className)} {...props} />
 );
 const AutocompleteGroup = ({
 	className,
 	...props
 }: BaseAutocompleteGroupProps & { ref?: React.Ref<HTMLDivElement> }) => {
 	return (
-		<BaseAutocomplete.Group
-			{...props}
-			className={clsx(comboboxGroupClassName, className)}
-		/>
+		<BaseAutocomplete.Group {...props} className={clsx(cls.group, className)} />
 	);
 };
 
-const AutocompleteGroupItemList = withClassName(
-	SlotDiv,
-	comboboxGroupItemListClassName,
-);
+const AutocompleteGroupItemList = withClassName(SlotDiv, cls.groupItemList);
 
 const AutocompleteGroupLabel = withClassName(
 	BaseAutocomplete.GroupLabel,
-	comboboxGroupLabelClassName,
+	cls.groupLabel,
 );
 
 const AutocompleteRow: React.FC<BaseAutocompleteRowProps> = withClassName(
 	BaseAutocomplete.Row,
-	comboboxRowClassName,
+	cls.row,
 );
 
 const AutocompleteSeparator = withClassName(
 	BaseAutocomplete.Separator,
-	separatorClassName,
+	menuCls.separator,
 );
 
+const AutocompleteDetails = withClassName('div', cls.details);
+
 export interface AutocompleteGroupItemProps
 	extends Omit<BaseAutocompleteItemProps, 'render'> {
 	ref?: React.Ref<HTMLDivElement>;
@@ -209,7 +168,7 @@ function AutocompleteGroupItem({
 		<BaseAutocomplete.Item
 			render={replace ?? <Button render={<Chip render={render} />} />}
 			{...props}
-			className={clsx(comboboxGroupItemClassName, className)}
+			className={clsx(cls.groupItem, className)}
 		/>
 	);
 }
@@ -244,6 +203,7 @@ const baseSubComponents = {
 	Row: AutocompleteRow,
 	Separator: AutocompleteSeparator,
 	Clear: AutocompleteClear,
+	Details: AutocompleteDetails,
 
 	Positioner: BaseAutocomplete.Positioner,
 	Portal: BaseAutocomplete.Portal,

package/src/components/avatar/Avatar.module.css

@@ -0,0 +1,35 @@
+.root {
+	position: relative;
+	aspect-ratio: 1/1;
+	width: --fn-literal(var(--avatar-size, 24px));
+	height: --fn-literal(var(--avatar-size, 24px));
+	display: flex;
+	flex-shrink: 0;
+	user-select: none;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+
+	@apply --mx-bg(var(--m-color-neutral-paper));
+
+	border-width: var(--m-lineWidth-sm);
+	border-style: solid;
+	border-color: var(--m-color-neutral-ink);
+
+	border-radius: var(--m-radius-lg);
+
+	&[data-empty='true'] {
+		border-style: dashed;
+		@apply --mx-bg(var(--m-color-neutral-light));
+	}
+}
+
+.image {
+	object-fit: cover;
+	width: 100%;
+	height: 100%;
+}
+
+.fallback {
+	font-size: --fn-literal(calc(0.5px * var(--avatar-size, 24px)));
+}

package/src/components/avatar/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Avatar } from './Avatar.js';
 
 const meta = {