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

package/src/components/input/Input.tsx

@@ -1,4 +1,4 @@
-import { Slot } from '@radix-ui/react-slot';
+import { Input as BaseUIInput } from '@base-ui/react/input';
 import classNames from 'clsx';
 import {
 	ChangeEvent,
@@ -9,7 +9,7 @@ import {
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 
 export const inputClassName = classNames(
-	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-lg bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm-inset transition-shadow)',
+	'layer-components:(px-5 py-1.25 text-md font-inherit rounded-lg bg-white select-auto min-w-60px color-black border-solid border-width-thin border-gray-dark shadow-sm shadow-inset transition-shadow)',
 	'layer-components:focus:(outline-none bg-lighten-3 ring-4	ring-white)',
 	'layer-components:focus-visible:(outline-none ring-accent ring-4)',
 	'layer-components:disabled:(bg-transparent border-gray placeholder-gray-dark shadow-none)',
@@ -19,7 +19,6 @@ export const inputClassName = classNames(
 
 export interface InputProps extends ComponentPropsWithRef<'input'> {
 	autoSelect?: boolean;
-	asChild?: boolean;
 	/** Shuffle between random placeholders */
 	placeholders?: string[];
 	placeholdersIntervalMs?: number;
@@ -33,7 +32,6 @@ export const Input = function Input({
 	onFocus,
 	onChange,
 	onValueChange,
-	asChild,
 	placeholders,
 	placeholder,
 	placeholdersIntervalMs = 5000,
@@ -63,10 +61,8 @@ export const Input = function Input({
 		placeholdersIntervalMs,
 	);
 
-	const Component = asChild ? Slot : 'input';
-
 	return (
-		<Component
+		<BaseUIInput
 			onFocus={handleFocus}
 			onChange={handleChange}
 			className={classNames(inputClassName, className)}

package/src/components/layouts/layouts.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useEffect, useState } from 'react';
+import { Avatar } from '../avatar/Avatar.js';
 import { Button } from '../button/index.js';
 import { Card } from '../card/Card.js';
-import { Icon } from '../icon/index.js';
 import { Input } from '../input/index.js';
 import {
 	NavBarItem,
@@ -64,18 +64,18 @@ export const Default: Story = {
 						</NavBarItem>
 						<NavBarItem active={true}>
 							<NavBarItemIconWrapper>
-								<NavBarItemIcon asChild>
-									<Icon name="book" />
-								</NavBarItemIcon>
+								<NavBarItemIcon name="book" />
 							</NavBarItemIconWrapper>
 							<NavBarItemText>Item 2</NavBarItemText>
 							<NavBarItemPip />
 						</NavBarItem>
 						<NavBarItem color="gray" active={true}>
 							<NavBarItemIconWrapper>
-								<NavBarItemIcon asChild>
-									<Icon name="book" />
-								</NavBarItemIcon>
+								<NavBarItemIcon
+									render={(_, { size }) => (
+										<Avatar name="Grant Forrest" size={size} />
+									)}
+								/>
 							</NavBarItemIconWrapper>
 							<NavBarItemText>Neutral</NavBarItemText>
 							<NavBarItemPip />
@@ -114,18 +114,14 @@ export const ManualWidth: Story = {
 						</NavBarItem>
 						<NavBarItem active={true}>
 							<NavBarItemIconWrapper>
-								<NavBarItemIcon asChild>
-									<Icon name="book" />
-								</NavBarItemIcon>
+								<NavBarItemIcon name="book" />
 							</NavBarItemIconWrapper>
 							<NavBarItemText>Item 2</NavBarItemText>
 							<NavBarItemPip />
 						</NavBarItem>
 						<NavBarItem color="gray" active={true}>
 							<NavBarItemIconWrapper>
-								<NavBarItemIcon asChild>
-									<Icon name="book" />
-								</NavBarItemIcon>
+								<NavBarItemIcon name="book" />
 							</NavBarItemIconWrapper>
 							<NavBarItemText>Neutral</NavBarItemText>
 							<NavBarItemPip />
@@ -197,9 +193,7 @@ export const WithVirtualKeyboard: Story = {
 						</NavBarItem>
 						<NavBarItem active={true}>
 							<NavBarItemIconWrapper>
-								<NavBarItemIcon asChild>
-									<Icon name="book" />
-								</NavBarItemIcon>
+								<NavBarItemIcon render={<Avatar name="Grant Forrest" />} />
 							</NavBarItemIconWrapper>
 							<NavBarItemText>Item 2</NavBarItemText>
 							<NavBarItemPip />

package/src/components/lightbox/Lightbox.tsx

@@ -1,5 +1,9 @@
-import * as Dialog from '@radix-ui/react-dialog';
-import { ReactNode } from 'react';
+import {
+	Dialog,
+	DialogCloseProps,
+	DialogPopupProps,
+} from '@base-ui/react/dialog';
+import { ReactElement, ReactNode } from 'react';
 import { withClassName } from '../../hooks.js';
 import { Button } from '../button/Button.js';
 import { Icon } from '../icon/Icon.js';
@@ -18,23 +22,27 @@ export const LightboxPortal = Dialog.Portal;
 export const LightboxTitle = () => (
 	<Dialog.Title className="sr-only">Lightbox</Dialog.Title>
 );
-export const LightboxClose = (props: Dialog.DialogCloseProps) => (
-	<Dialog.Close {...props} asChild className="absolute top-md right-md">
-		<Button aria-label="Close">
-			<Icon name="x" />
-		</Button>
-	</Dialog.Close>
+export const LightboxClose = (props: DialogCloseProps) => (
+	<Dialog.Close
+		{...props}
+		render={
+			<Button aria-label="Close">
+				<Icon name="x" />
+			</Button>
+		}
+		className="absolute top-md right-md"
+	/>
 );
 
 export const LightboxOverlay = withClassName(
-	Dialog.Overlay,
+	Dialog.Backdrop,
 	'layer-components:(fixed inset-0 bg-black/50 backdrop-blur-sm z-backdrop)',
 	'transform-gpu !motion-reduce:animate-none',
 	'layer-components:[&[data-state=closed]]:animate-fade-out layer-components:(animate-fade-in animate-duration-200)',
 );
 
 export const LightboxContentRoot = withClassName(
-	Dialog.Content,
+	Dialog.Popup,
 	'layer-components:(fixed z-dialog bg-none border-none p-lg w-full h-full max-w-full max-h-full flex items-center justify-center)',
 	'transform-gpu !motion-reduce:animate-none',
 	'layer-components:(left-50% top-50% translate-[-50%] w-90vw max-h-85vh)',
@@ -42,7 +50,7 @@ export const LightboxContentRoot = withClassName(
 	'layer-components:[&[data-state=closed]]:animate-dialog-out',
 	'!pointer-events-none',
 );
-export const LightboxContent = (props: Dialog.DialogContentProps) => {
+export const LightboxContent = (props: DialogPopupProps) => {
 	return (
 		<LightboxContentRoot {...props}>
 			<LightboxTitle />
@@ -58,10 +66,14 @@ const LightboxContentInner = withClassName(
 	'layer-components:pointer-events-none layer-components:[&>*]:pointer-events-auto',
 );
 
-function LightboxDefault({ children }: LightboxProps) {
+function LightboxDefault({
+	children,
+}: Omit<LightboxProps, 'children'> & {
+	children?: ReactElement;
+}) {
 	return (
 		<Dialog.Root>
-			<Dialog.Trigger asChild>{children}</Dialog.Trigger>
+			<Dialog.Trigger render={children}></Dialog.Trigger>
 			<Dialog.Portal>
 				<LightboxOverlay />
 				<LightboxContent>{children}</LightboxContent>

package/src/components/marquee/marquee.stories.tsx

@@ -24,9 +24,11 @@ export const Default: Story = {
 				<Marquee.Item className="flex items-center justify-center bg-primary-wash color-primary-dark text-lg">
 					Hello, world
 				</Marquee.Item>
-				<Marquee.Item asChild>
-					<img src="https://resources.biscuits.club/images/pashka.jpg" />
-				</Marquee.Item>
+				<Marquee.Item
+					render={
+						<img src="https://resources.biscuits.club/images/pashka.jpg" />
+					}
+				/>
 			</Marquee>
 		);
 	},

package/src/components/navBar/NavBar.tsx

@@ -1,6 +1,7 @@
-import { Slot } from '@radix-ui/react-slot';
+import { Button } from '@base-ui/react/button';
+import { UseRenderComponentProps } from '@base-ui/react/use-render';
 import classNames, { clsx } from 'clsx';
-import { ReactNode, Ref } from 'react';
+import { ReactElement, ReactNode, Ref } from 'react';
 import { withClassName } from '../../hooks.js';
 import { Icon, IconProps } from '../icon/index.js';
 
@@ -13,17 +14,16 @@ export const navBarItemClass = classNames(
 	'layer-responsive:md:(flex-row-reverse h-auto justify-start gap-2 overflow-visible active:bg-darken-2)',
 );
 
-export interface NavBarItemProps {
-	asChild?: boolean;
+export interface NavBarItemProps extends UseRenderComponentProps<'button'> {
 	className?: string;
 	children?: ReactNode;
 	active?: boolean;
 	color?: 'primary' | 'gray';
+	render?: ReactElement | (() => ReactElement);
 }
 
 export const NavBarItem = function NavBarItem({
 	ref,
-	asChild,
 	className,
 	active,
 	color = 'primary',
@@ -31,10 +31,8 @@ export const NavBarItem = function NavBarItem({
 }: NavBarItemProps & {
 	ref?: React.Ref<HTMLButtonElement>;
 }) {
-	const Comp = asChild ? Slot : 'button';
-
 	return (
-		<Comp
+		<Button
 			ref={ref}
 			className={classNames(navBarItemClass, `palette-${color}`, className)}
 			data-active={active}
@@ -55,8 +53,7 @@ export const NavBarItemText = withClassName(
 	'layer-components:(overflow-hidden inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:md:(text-md leading-normal)',
 );
 
-interface NavBarItemIconProps {
-	asChild?: boolean;
+interface NavBarItemIconProps extends Omit<IconProps, 'name'> {
 	name?: IconProps['name'];
 	className?: string;
 	children?: ReactNode;
@@ -64,15 +61,12 @@ interface NavBarItemIconProps {
 }
 export const NavBarItemIcon = function NavBarItemIcon({
 	ref,
-	children,
-	asChild,
 	className,
 	name = 'placeholder',
 	...rest
 }: NavBarItemIconProps) {
-	const Comp = asChild ? Slot : Icon;
 	return (
-		<Comp
+		<Icon
 			name={name}
 			className={clsx(
 				'layer-components:(relative z-1 flex color-inherit)',
@@ -81,9 +75,7 @@ export const NavBarItemIcon = function NavBarItemIcon({
 			)}
 			{...rest}
 			ref={ref}
-		>
-			{children}
-		</Comp>
+		/>
 	);
 };
 

package/src/components/popover/Popover.stories.tsx

@@ -2,14 +2,14 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Button } from '../button/Button.js';
 import { Popover } from './Popover.js';
 
-const meta = {
+const meta: Meta = {
 	title: 'Components/Popover',
 	component: Popover,
 	argTypes: {},
 	parameters: {
 		controls: { expanded: true },
 	},
-} satisfies Meta<typeof Popover>;
+};
 
 export default meta;
 
@@ -19,14 +19,13 @@ export const Default: Story = {
 	render(args) {
 		return (
 			<Popover {...args}>
-				<Popover.Trigger asChild>
-					<Button color="primary" size="small">
-						Open Popover
-					</Button>
+				<Popover.Trigger render={<Button color="primary" size="small" />}>
+					Open Popover
 				</Popover.Trigger>
 				<Popover.Content className="p-md">
 					<Popover.Arrow />
-					<p>This is a popover content.</p>
+					<Popover.Title>Hello</Popover.Title>
+					<Popover.Description>This is a popover content.</Popover.Description>
 				</Popover.Content>
 			</Popover>
 		);

package/src/components/popover/Popover.tsx

@@ -1,28 +1,36 @@
-'use client';
-
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import {
+	PopoverPopupProps,
+	PopoverPositionerProps,
+	Popover as PopoverPrimitive,
+} from '@base-ui/react/popover';
 
+import { MenuArrowProps } from '@base-ui/react/menu';
 import classNames from 'clsx';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
 
 const StyledContent = withClassName(
-	PopoverPrimitive.Content,
-	'layer-components:(rounded-xl min-w-120px bg-white z-menu shadow-lg op-0 hidden max-w-90vw border border-gray-dark)',
+	PopoverPrimitive.Popup,
+	'layer-components:(rounded-lg min-w-120px bg-white shadow-lg max-w-90vw border border-black transition)',
 	'will-change-transform',
-	'layer-components:transform-origin-[var(--radix-popover-transform-origin)]',
-	'layer-components:[&[data-state=open]]:animate-popover-in',
-	'layer-components:[&[data-state=closed]]:animate-popover-out',
-	'important:motion-reduce:animate-none',
-	'layer-components:(max-h-[var(--radix-popover-content-available-height)])',
-	'layer-components:[&[data-state=open]]:(opacity-100 flex flex-col)',
-	'layer-components:[&[data-state=closed]]:pointer-events-none',
+	'layer-components:transform-origin-[var(--transform-origin)]',
+	'layer-components:data-[starting-style]:(opacity-0 scale-95 translate-y-4px)',
+	'layer-components:data-[ending-style]:(opacity-0 scale-95 translate-y-4px)',
+	'important:motion-reduce:transition-none',
+	'layer-components:(max-h-[--available-height] max-w-[--available-width])',
 );
 
 const StyledArrow = withClassName(
-	PopoverPrimitive.Arrow,
+	(props: MenuArrowProps) => (
+		<PopoverPrimitive.Arrow {...props}>
+			<ArrowSvg />
+		</PopoverPrimitive.Arrow>
+	),
 	'layer-components:(arrow)',
+	'layer-components:data-[closed]:(opacity-0 scale-0)',
+	'layer-components:data-[open]:(opacity-100 scale-100)',
 );
 
 const StyledClose = withClassName(
@@ -35,7 +43,7 @@ export const PopoverRoot = PopoverPrimitive.Root;
 export const PopoverTrigger = PopoverPrimitive.Trigger;
 export const PopoverArrow = StyledArrow;
 export const PopoverClose = StyledClose;
-export const PopoverAnchor = PopoverPrimitive.Anchor;
+export const PopoverAnchor = PopoverPrimitive.Handle;
 
 export const PopoverContent = function PopoverContent({
 	ref,
@@ -45,43 +53,83 @@ export const PopoverContent = function PopoverContent({
 	className,
 	radius = 'default',
 	padding = 'default',
+	align,
+	alignOffset,
+	side,
+	sideOffset = 8,
+	anchor,
+	disableAnchorTracking,
+	sticky,
+	arrowPadding,
+	collisionAvoidance,
+	collisionBoundary,
+	collisionPadding,
+	positionMethod,
 	...props
-}: PopoverPrimitive.PopoverContentProps & {
-	radius?: 'none' | 'default' | 'md';
-	padding?: 'none' | 'default';
-	forceMount?: boolean;
-	disableBlur?: boolean;
-	ref?: Ref<HTMLDivElement>;
-}) {
+}: PopoverPopupProps &
+	PopoverPositionerProps & {
+		radius?: 'none' | 'default' | 'md';
+		padding?: 'none' | 'default';
+		forceMount?: boolean;
+		disableBlur?: boolean;
+		ref?: Ref<HTMLDivElement>;
+	}) {
 	return (
-		<PopoverPrimitive.Portal forceMount={forceMount}>
+		<PopoverPrimitive.Portal keepMounted={forceMount}>
 			<GroupScaleReset>
-				<StyledContent
-					{...props}
-					forceMount={forceMount}
-					ref={ref}
-					className={classNames(
-						{
-							'layer-variants:important:p-0': padding === 'none',
-							'layer-variants:p-5': padding === 'default',
-							'layer-variants:rounded-none': radius === 'none',
-							'layer-variants:rounded-lg': radius === 'default',
-							'layer-variants:rounded-md': radius === 'md',
-						},
-						className,
-					)}
+				<PopoverPrimitive.Positioner
+					side={side}
+					sideOffset={sideOffset}
+					align={align}
+					alignOffset={alignOffset}
+					anchor={anchor}
+					disableAnchorTracking={disableAnchorTracking}
+					sticky={sticky}
+					arrowPadding={arrowPadding}
+					collisionAvoidance={collisionAvoidance}
+					collisionBoundary={collisionBoundary}
+					collisionPadding={collisionPadding}
+					positionMethod={positionMethod}
 				>
-					{children}
-				</StyledContent>
+					<StyledContent
+						{...props}
+						ref={ref}
+						className={classNames(
+							{
+								'layer-variants:important:p-0': padding === 'none',
+								'layer-variants:p-md': padding === 'default',
+								'layer-variants:rounded-none': radius === 'none',
+								'layer-variants:rounded-lg': radius === 'default',
+								'layer-variants:rounded-md': radius === 'md',
+							},
+							className,
+						)}
+					>
+						{children}
+					</StyledContent>
+				</PopoverPrimitive.Positioner>
 			</GroupScaleReset>
 		</PopoverPrimitive.Portal>
 	);
 };
 
+export const PopoverTitle = withClassName(
+	PopoverPrimitive.Title,
+	'layer-components:(text-md font-semibold m-0 mb-sm)',
+);
+
+export const PopoverDescription = withClassName(
+	PopoverPrimitive.Description,
+	'layer-components:(text-sm text-gray-dark m-0)',
+);
+
 export const Popover = Object.assign(PopoverRoot, {
 	Content: PopoverContent,
 	Arrow: PopoverArrow,
 	Close: PopoverClose,
 	Trigger: PopoverTrigger,
 	Anchor: PopoverAnchor,
+	Title: PopoverTitle,
+	Description: PopoverDescription,
+	createHandle: PopoverPrimitive.createHandle,
 });

package/src/components/progress/Progress.stories.tsx

@@ -18,9 +18,21 @@ export const Default: Story = {
 	render(args) {
 		return (
 			<div className="col">
-				<Progress {...args} value={5} max={10} />
-				<Progress {...args} value={10} max={10} />
-				<Progress {...args} value={0} max={10} />
+				<Progress {...args} value={50} max={100} />
+				<Progress {...args} value={100} max={100} />
+				<Progress {...args} value={0} max={100} />
+			</div>
+		);
+	},
+};
+
+export const Labeled: Story = {
+	render(args) {
+		return (
+			<div className="col gap-10px">
+				<Progress.Labeled {...args} value={33} max={100} label="Loading..." />
+				<Progress.Labeled {...args} value={100} max={100} label="Complete" />
+				<Progress.Labeled {...args} value={0} max={100} label="Starting..." />
 			</div>
 		);
 	},

package/src/components/progress/Progress.tsx

@@ -1,16 +1,24 @@
-import * as ProgressPrimitive from '@radix-ui/react-progress';
+import {
+	Progress as ProgressPrimitive,
+	ProgressRootProps,
+	ProgressValueProps,
+} from '@base-ui/react/progress';
 import clsx from 'clsx';
 import { withClassName } from '../../hooks.js';
 import { PaletteName } from '../../uno/index.js';
 
 export const ProgressRoot = withClassName(
 	ProgressPrimitive.Root,
-	'layer-components:(w-full relative overflow-hidden border border-default rounded-lg)',
+	'layer-components:(grid grid-columns-[1fr_1fr] gap-col-md gap-row-xs items-center w-full)',
 );
 export const ProgressIndicator = withClassName(
 	ProgressPrimitive.Indicator,
-	'layer-components:(bg-main w-full h-6px translate-x-[calc(-100%*(1-var(--value)))] rounded-lg transition-transform)',
-	'layer-components:[&[data-state=complete]]:(bg-success)',
+	'layer-components:(bg-main w-full h-full rounded-lg transition-transform)',
+	'layer-components:data-[complete]:(bg-success)',
+);
+export const ProgressTrack = withClassName(
+	ProgressPrimitive.Track,
+	'layer-components:(w-full relative overflow-hidden ring ring-black ring-1 rounded-lg h-6px)',
 );
 
 const ProgressBase = function ProgressBase({
@@ -21,22 +29,64 @@ const ProgressBase = function ProgressBase({
 	value,
 	className,
 	...props
-}: ProgressPrimitive.ProgressProps & {
+}: ProgressRootProps & {
 	ref?: React.Ref<HTMLDivElement>;
 	color?: PaletteName;
 }) {
 	return (
-		<ProgressRoot
+		<ProgressPrimitive.Root
 			{...props}
-			className={clsx(color && `palette-${color}`, className)}
+			className={clsx(
+				color && `palette-${color}`,
+				'layer-components:w-full',
+				className,
+			)}
 			value={value}
 			max={max}
 			ref={ref}
 		>
-			<ProgressIndicator
-				// @ts-ignore
-				style={{ '--value': (value || 0) / max }}
-			/>
+			<ProgressTrack>
+				<ProgressIndicator />
+			</ProgressTrack>
+		</ProgressPrimitive.Root>
+	);
+};
+
+const ProgressLabel = withClassName(
+	ProgressPrimitive.Label,
+	'layer-components:(font-size-xs color-gray-ink col-start-1 row-start-1)',
+);
+
+const ProgressValue = withClassName(
+	ProgressPrimitive.Value,
+	'layer-components:(font-size-xs font-semibold color-gray-ink col-start-2 row-start-1 justify-self-end)',
+);
+
+export const ProgressLabeled = function ProgressLabeled({
+	ref,
+	children,
+	label,
+	className,
+	color,
+	formatValue,
+	...props
+}: ProgressRootProps & {
+	ref?: React.Ref<HTMLDivElement>;
+	label: React.ReactNode;
+	color?: PaletteName;
+	formatValue?: ProgressValueProps['children'];
+}) {
+	return (
+		<ProgressRoot
+			ref={ref}
+			className={clsx(color && `palette-${color}`, className)}
+			{...props}
+		>
+			<ProgressLabel>{label}</ProgressLabel>
+			<ProgressValue>{formatValue}</ProgressValue>
+			<ProgressTrack className="col-span-2">
+				<ProgressIndicator />
+			</ProgressTrack>
 		</ProgressRoot>
 	);
 };
@@ -44,4 +94,8 @@ const ProgressBase = function ProgressBase({
 export const Progress = Object.assign(ProgressBase, {
 	Root: ProgressRoot,
 	Indicator: ProgressIndicator,
+	Track: ProgressTrack,
+	Labeled: ProgressLabeled,
+	Label: ProgressLabel,
+	Value: ProgressValue,
 });