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

package/src/components/switch/Switch.tsx

@@ -1,10 +1,10 @@
-import { Root, SwitchProps, Thumb } from '@radix-ui/react-switch';
+import { Switch as BaseSwitch, SwitchRootProps } from '@base-ui/react/switch';
 import { withClassName } from '../../hooks/withClassName.js';
 
 const SwitchRoot = withClassName(
-	Root,
-	'layer-components:(unset transition-all cursor-pointer w-42px h-25px bg-white rounded-lg relative border-default flex-shrink-0 shadow-sm)',
-	'layer-components:[&[data-state=checked]]:bg-main',
+	BaseSwitch.Root,
+	'layer-components:(unset appearance-none flex transition-all cursor-pointer w-42px h-25px p-2px bg-gray-light rounded-lg relative border-default flex-shrink-0 shadow-sm)',
+	'layer-components:data-[checked]:bg-main',
 	'layer-components:hover:[&:not(:disabled)]:(bg-lighten-2 ring-2 ring-bg)',
 	'layer-components:active:[&:not(:disabled)]:(bg-darken-1 ring-4)',
 	'layer-components:focus:outline-none',
@@ -12,16 +12,17 @@ const SwitchRoot = withClassName(
 );
 
 const SwitchThumb = withClassName(
-	Thumb,
-	'layer-components:(block w-21px h-21px bg-white rounded-lg border-default transition-transform will-change-transform)',
-	'layer-components:[&[data-state=checked]]:translate-x-18px',
+	BaseSwitch.Thumb,
+	'layer-components:(block aspect-1 h-full bg-white rounded-lg border-default transition-transform will-change-transform)',
+	'layer-components:data-[checked]:(translate-x-1rem)',
+	'layer-components:data-[checked]:before:(content-["✓"] flex items-center justify-center absolute top-0 left-0 w-full h-full text-xs text-main-ink)',
 );
 
 export const Switch = Object.assign(
 	function Switch({
 		ref,
 		...props
-	}: SwitchProps & {
+	}: SwitchRootProps & {
 		ref?: React.Ref<HTMLButtonElement>;
 	}) {
 		return (

package/src/components/tabs/tabs.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
 	argTypes: {
 		color: {
 			control: 'select',
-			options: ['default', 'primary'],
+			options: ['gray', 'primary'],
 		},
 	},
 	parameters: {
@@ -24,16 +24,10 @@ export const Default: Story = {
 		const [value, setValue] = useState('tab1');
 		return (
 			<TabsRoot value={value} onValueChange={setValue}>
-				<TabsList>
-					<TabsTrigger value="tab1" color={args.color}>
-						Tab 1
-					</TabsTrigger>
-					<TabsTrigger value="tab2" color={args.color}>
-						Tab 2 (long)
-					</TabsTrigger>
-					<TabsTrigger value="tab3" color={args.color}>
-						Tab 3
-					</TabsTrigger>
+				<TabsList color={args.color}>
+					<TabsTrigger value="tab1">Tab 1</TabsTrigger>
+					<TabsTrigger value="tab2">Tab 2 (long)</TabsTrigger>
+					<TabsTrigger value="tab3">Tab 3</TabsTrigger>
 				</TabsList>
 				<TabsContent value="tab1">
 					<div>Tab 1 content</div>
@@ -54,9 +48,9 @@ export const WithManyTabs: Story = {
 		const [value, setValue] = useState('tab1');
 		return (
 			<TabsRoot value={value} onValueChange={setValue}>
-				<TabsList>
+				<TabsList color={args.color}>
 					{Array.from({ length: 20 }).map((_, i) => (
-						<TabsTrigger key={i} value={`tab${i + 1}`} color={args.color}>
+						<TabsTrigger key={i} value={`tab${i + 1}`}>
 							Tab {i + 1}
 						</TabsTrigger>
 					))}

package/src/components/tabs/tabs.tsx

@@ -1,57 +1,64 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import {
+	TabsListProps,
+	Tabs as TabsPrimitive,
+	TabsTabProps,
+} from '@base-ui/react/tabs';
 import clsx from 'clsx';
 import { withClassName } from '../../hooks/withClassName.js';
 
 export const TabsRoot = withClassName(TabsPrimitive.Root, '');
 
-export const TabsList = withClassName(
+const StyledTabsList = withClassName(
 	TabsPrimitive.List,
-	'layer-components:(flex flex-row items-start gap-2)',
+	'layer-components:(flex flex-row items-start gap-2 relative)',
 	'layer-components:(border-solid border-thin border-fg rounded-xl)',
 	'layer-components:(shadow-sm bg-white)',
-	'layer-components:(overflow-x-auto overflow-unstable w-max-content max-w-full)',
+	'layer-components:(overflow-x-auto overflow-y-clip overflow-unstable w-max-content max-w-full)',
 );
 
-export const TabsTriggerBase = withClassName(
-	TabsPrimitive.Trigger,
-	'layer-components:(flex flex-row items-center justify-center gap-2 py-xs px-lg)',
+export const TabsTrigger = withClassName(
+	TabsPrimitive.Tab,
+	'layer-components:(flex flex-row items-center justify-center gap-2 py-xs px-lg relative z-1)',
 	'layer-components:(transition-all cursor-pointer select-none)',
 	'layer-components:(text-center text-md font-semibold color-gray-ink font-inherit text-nowrap)',
 	'layer-components:(min-w-100px min-h-touch flex-shrink-0)',
 	'layer-components:(bg-transparent border border-transparent rounded-lg)',
 	'layer-components:hover:[&[data-state=inactive]]:(bg-gray-light bg-darken-1 ring-4 ring-bg)',
 	'layer-components:focus-visible:(bg-darken-1 ring-4 ring-accent outline-off border border-black)',
-	'[&[data-state=active]]:(cursor-default border-gray-dark relative z-1)',
+	'data-[active]:(cursor-default)',
 );
 
-const colorClasses = {
-	default: 'layer-variants:[&[data-state=active]]:(bg-gray)',
-	primary: 'layer-variants:[&[data-state=active]]:(bg-main-light)',
-};
+export const TabsIndicator = withClassName(
+	TabsPrimitive.Indicator,
+	'layer-components:(absolute block [transition-property:transform,width,color] duration-300 ease-out rounded-full b-gray-dark bg-main-light)',
+	'layer-components:(left-0 top-1/2 translate-x-[--active-tab-left] -translate-y-1/2 w-[--active-tab-width] h-full z-0)',
+	'layer-components:(b-1 b-gray-dark)',
+);
+
+export interface TabsTriggerProps extends Omit<TabsTabProps, 'color'> {}
 
-export interface TabsTriggerProps
-	extends Omit<TabsPrimitive.TabsTriggerProps, 'color'> {
-	color?: 'default' | 'primary';
-}
+export const TabsContent = withClassName(
+	TabsPrimitive.Panel,
+	'layer-components:(focus:outline-none focus-visible:(outline-none ring-inset ring-2 ring-gray))',
+);
 
-export const TabsTrigger = ({
+export const TabsList = ({
+	children,
 	className,
 	color = 'primary',
 	...props
-}: TabsTriggerProps) => (
-	<TabsTriggerBase
-		className={clsx(colorClasses[color], `btn-color-${color}`, className)}
-		{...props}
-	/>
-);
-
-export const TabsContent = withClassName(
-	TabsPrimitive.Content,
-	'layer-components:(focus:outline-none focus-visible:(outline-none ring-inset ring-2 ring-gray))',
+}: TabsListProps & {
+	color?: 'gray' | 'primary';
+}) => (
+	<StyledTabsList {...props} className={clsx(`palette-${color}`, className)}>
+		{children}
+		<TabsIndicator />
+	</StyledTabsList>
 );
 
 export const Tabs = Object.assign(TabsRoot, {
 	List: TabsList,
 	Trigger: TabsTrigger,
 	Content: TabsContent,
+	Indicator: TabsIndicator,
 });

package/src/components/textArea/TextArea.tsx

@@ -1,20 +1,13 @@
 'use client';
 
+import { Input, InputProps } from '@base-ui/react/input';
 import classNames from 'clsx';
-import {
-	ChangeEvent,
-	HTMLProps,
-	useCallback,
-	useLayoutEffect,
-	useRef,
-	useState,
-} from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import useMergedRef from '../../hooks/useMergedRef.js';
 import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
 import { inputClassName } from '../input/index.js';
 
-export interface TextAreaProps
-	extends Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> {
+export interface TextAreaProps extends InputProps {
 	className?: string;
 	autoSize?: boolean;
 	autoSelect?: boolean;
@@ -22,9 +15,11 @@ export interface TextAreaProps
 	padBottomPixels?: number;
 	placeholders?: string[];
 	placeholdersIntervalMs?: number;
-	onValueChange?: (value: string) => void;
+	rows?: number;
 }
 
+type HandleChange = Exclude<InputProps['onValueChange'], undefined>;
+
 export const TextArea = function TextArea({
 	ref,
 	autoSize,
@@ -40,9 +35,9 @@ export const TextArea = function TextArea({
 	onValueChange,
 	...rest
 }: TextAreaProps & {
-	ref?: React.Ref<HTMLTextAreaElement>;
+	ref?: React.Ref<any>;
 }) {
-	const innerRef = useRef<HTMLTextAreaElement>(null);
+	const innerRef = useRef<any>(null);
 	const finalRef = useMergedRef(innerRef, ref);
 
 	const [innerValue, setInnerValue] = useState('');
@@ -61,21 +56,18 @@ export const TextArea = function TextArea({
 		}
 	}, [autoSize, padBottomPixels, finalValue]);
 
-	const handleChange = useCallback(
-		(e: ChangeEvent<HTMLTextAreaElement>) => {
-			setInnerValue((e.target as HTMLTextAreaElement).value);
-			if (onChange) {
-				onChange(e);
-			}
+	const handleValueChange = useCallback<HandleChange>(
+		(value, eventDetails) => {
+			setInnerValue(value);
 			if (onValueChange) {
-				onValueChange(e.target.value);
+				onValueChange(value, eventDetails);
 			}
 		},
 		[onChange, onValueChange],
 	);
 
-	const handleFocus = useCallback(
-		(e: React.FocusEvent<HTMLTextAreaElement>) => {
+	const handleFocus = useCallback<Exclude<InputProps['onFocus'], undefined>>(
+		(e) => {
 			if (autoSelect) {
 				e.target.select();
 			}
@@ -92,7 +84,8 @@ export const TextArea = function TextArea({
 	);
 
 	return (
-		<textarea
+		<Input
+			render={<textarea rows={autoSize ? 1 : rows} />}
 			ref={finalRef}
 			className={classNames(
 				inputClassName,
@@ -104,8 +97,7 @@ export const TextArea = function TextArea({
 				},
 				className,
 			)}
-			rows={autoSize ? 1 : rows}
-			onChange={handleChange}
+			onValueChange={handleValueChange}
 			onFocus={handleFocus}
 			placeholder={placeholder ?? randomPlaceholder}
 			{...rest}

package/src/components/toggleGroup/toggleGroup.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleGroup } from './toggleGroup.js';
+
+const meta = {
+	title: 'Components/ToggleGroup',
+	component: ToggleGroup,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof ToggleGroup>;
+
+export const Default: Story = {
+	render(args) {
+		return (
+			<ToggleGroup {...args}>
+				<ToggleGroup.Item>Option 1</ToggleGroup.Item>
+				<ToggleGroup.Item>Option 2</ToggleGroup.Item>
+				<ToggleGroup.Item>Option 3</ToggleGroup.Item>
+			</ToggleGroup>
+		);
+	},
+};

package/src/components/toggleGroup/toggleGroup.tsx

@@ -1,22 +1,24 @@
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { Toggle as TogglePrimitive } from '@base-ui/react/toggle';
+import {
+	ToggleGroup as ToggleGroupPrimitive,
+	ToggleGroupProps,
+} from '@base-ui/react/toggle-group';
 import { withClassName } from '../../hooks/withClassName.js';
 
-export const ToggleGroupRoot = withClassName(
-	ToggleGroupPrimitive.Root,
+const ToggleGroupRoot = withClassName(
+	ToggleGroupPrimitive,
 	'layer-components:(inline-flex bg-main-light/20 rounded-lg gap-sm w-fit)',
 );
 export const ToggleGroupItem = withClassName(
-	ToggleGroupPrimitive.Item,
+	TogglePrimitive,
 	'layer-components:(rounded-full text-nowrap transition-all color-black bg-gray/30 py-sm px-md flex items-center border-transparent border-1 border-solid justify-center cursor-pointer)',
 	'layer-components:hover:(bg-lighten-2 border-main-ink/20 ring-bg ring-2)',
 	'layer-components:active:(bg-darken-1 border-main-ink/30 ring-4)',
 	'layer-components:focus-visible:(ring-4 ring-accent outline-off)',
-	'layer-components:[&[data-state=on]]:(bg-main border-default shadow-sm hover:border-default)',
+	'layer-components:data-[pressed]:(bg-main border-default shadow-sm hover:border-default)',
 );
 
-export type ToggleGroupProps =
-	| ToggleGroupPrimitive.ToggleGroupMultipleProps
-	| ToggleGroupPrimitive.ToggleGroupSingleProps;
+export type { ToggleGroupProps };
 export const ToggleGroup = Object.assign(ToggleGroupRoot, {
 	Item: ToggleGroupItem,
 });

package/src/components/tooltip/Tooltip.stories.tsx

@@ -1,11 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Box } from '../box/Box.js';
+import { Button } from '../button/index.js';
 import { Tooltip } from './Tooltip.js';
 
-const meta = {
+const meta: Meta = {
 	title: 'Components/Tooltip',
 	component: Tooltip,
-	argTypes: {},
+	argTypes: {
+		color: {
+			control: 'select',
+			options: ['contrast', 'white', 'neutral', 'attention'],
+		},
+	},
 	parameters: {
 		controls: { expanded: true },
 	},
@@ -13,7 +19,7 @@ const meta = {
 		content: 'hello world',
 		color: 'contrast',
 	},
-} satisfies Meta<typeof Tooltip>;
+};
 
 export default meta;
 
@@ -21,24 +27,27 @@ type Story = StoryObj<typeof Tooltip>;
 
 export const Default: Story = {
 	render: (args) => (
-		<Tooltip {...args}>
-			<button>Hover me</button>
+		<Tooltip open {...args}>
+			<Button>Hover me</Button>
 		</Tooltip>
 	),
 };
 
 export const Disabled: Story = {
 	render: (args) => (
-		<Tooltip {...args} disabled>
-			<button>Hover me</button>
+		<Tooltip {...args}>
+			<Button>Hover me</Button>
 		</Tooltip>
 	),
+	args: {
+		disabled: true,
+	},
 };
 
 export const Color: Story = {
 	render: (args) => (
-		<Tooltip {...args}>
-			<button>Hover me</button>
+		<Tooltip open {...args}>
+			<Button>Hover me</Button>
 		</Tooltip>
 	),
 	args: {
@@ -50,6 +59,7 @@ export const Customized: Story = {
 	render: (args) => (
 		<Tooltip
 			className="bg-attention"
+			open
 			{...args}
 			content={
 				<Box d="col" p>
@@ -57,7 +67,7 @@ export const Customized: Story = {
 				</Box>
 			}
 		>
-			<button>Hover me</button>
+			<Button>Hover me</Button>
 		</Tooltip>
 	),
 };

package/src/components/tooltip/Tooltip.tsx

@@ -1,9 +1,19 @@
-import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import {
+	TooltipPopupProps,
+	TooltipPositionerProps,
+	Tooltip as TooltipPrimitive,
+	TooltipTriggerProps,
+} from '@base-ui/react/tooltip';
 import classNames from 'clsx';
+import { ReactElement, ReactNode } from 'react';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
+import { ArrowSvg } from '../utility/ArrowSvg.js';
+
+export type * from '@base-ui/react/tooltip';
 
 export interface TooltipContentProps
-	extends TooltipPrimitive.TooltipContentProps {
+	extends TooltipPopupProps,
+		Omit<TooltipPositionerProps, 'className' | 'style' | 'render'> {
 	color?: 'contrast' | 'white' | 'neutral' | 'attention';
 }
 
@@ -11,32 +21,63 @@ function Content({
 	children,
 	className,
 	color = 'contrast',
+	render,
+	side,
+	sideOffset,
+	align,
+	alignOffset,
+	anchor,
+	disableAnchorTracking,
+	sticky,
+	arrowPadding,
+	collisionAvoidance,
+	collisionBoundary,
+	collisionPadding,
+	positionMethod,
 	...props
-}: TooltipPrimitive.TooltipContentProps) {
+}: TooltipContentProps) {
 	return (
 		<TooltipPrimitive.Portal>
 			<GroupScaleReset>
-				<TooltipPrimitive.Content
-					className={classNames(
-						'layer-components:(relative rounded-sm py-2 px-3 text-sm leading-tight shadow-sm select-none hidden z-tooltip)',
-						'[&[data-state=delayed-open]]:flex',
-						'[&[data-state=instant-open]]:flex',
-						'layer-components:transform-origin-[var(--radix-tooltip-content-transform-origin)]',
-						'layer-components:[&[data-state=delayed-open]]:animate-popover-in',
-						{
-							'layer-variants:(bg-black color-white)': color === 'contrast',
-							'layer-variants:(bg-white color-black)':
-								color === 'white' || color === 'neutral',
-							'layer-variants:(bg-attention-ink color-white)':
-								color === 'attention',
-						},
-						className,
-					)}
-					{...props}
+				<TooltipPrimitive.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}
-					<TooltipPrimitive.Arrow className="layer-components:arrow" />
-				</TooltipPrimitive.Content>
+					<TooltipPrimitive.Popup
+						render={render}
+						className={classNames(
+							'layer-components:(relative rounded-sm py-xs px-sm text-sm leading-tight shadow-sm select-none flex transition)',
+							'layer-components:data-[instant]:transition-none',
+							'layer-components:data-[starting-style]:(opacity-0 scale-95)',
+							'layer-components:data-[ending-style]:(opacity-0 scale-95)',
+							'layer-components:transform-origin-[var(--transform-origin)]',
+							{
+								'layer-variants:(bg-black color-white)': color === 'contrast',
+								'layer-variants:(bg-white color-black border border-gray)':
+									color === 'white' || color === 'neutral',
+								'layer-variants:(bg-attention-ink color-white)':
+									color === 'attention',
+							},
+							className,
+						)}
+						{...props}
+					>
+						{children}
+						<TooltipPrimitive.Arrow className="layer-components:arrow">
+							<ArrowSvg />
+						</TooltipPrimitive.Arrow>
+					</TooltipPrimitive.Popup>
+				</TooltipPrimitive.Positioner>
 			</GroupScaleReset>
 		</TooltipPrimitive.Portal>
 	);
@@ -45,8 +86,10 @@ function Content({
 export const TooltipProvider = TooltipPrimitive.Provider;
 
 export interface TooltipProps
-	extends Omit<TooltipPrimitive.TooltipTriggerProps, 'content'> {
-	content: React.ReactNode;
+	extends Omit<TooltipTriggerProps, 'content' | 'children'>,
+		Pick<TooltipContentProps, 'side' | 'sideOffset' | 'color'> {
+	content: ReactNode;
+	children?: ReactElement;
 	open?: boolean;
 	disabled?: boolean;
 }
@@ -65,15 +108,13 @@ export const Tooltip = Object.assign(
 		...rest
 	}: TooltipProps & {
 		ref?: React.Ref<HTMLButtonElement>;
-	} & Pick<TooltipContentProps, 'color' | 'sideOffset' | 'side'>) {
+	}) {
 		return (
 			<TooltipPrimitive.Root open={open}>
 				{disabled ? (
 					children
 				) : (
-					<TooltipPrimitive.TooltipTrigger asChild ref={ref} {...rest}>
-						{children}
-					</TooltipPrimitive.TooltipTrigger>
+					<TooltipPrimitive.Trigger ref={ref} {...rest} render={children} />
 				)}
 				<Content
 					color={color}
@@ -87,7 +128,8 @@ export const Tooltip = Object.assign(
 		);
 	},
 	{
-		Trigger: TooltipPrimitive.TooltipTrigger,
+		Trigger: TooltipPrimitive.Trigger,
 		Content,
+		createHandle: TooltipPrimitive.createHandle,
 	},
 );

package/src/components/utility/ArrowSvg.tsx

@@ -0,0 +1,15 @@
+export function ArrowSvg(props: React.ComponentProps<'svg'>) {
+	return (
+		<svg
+			width="10"
+			height="5"
+			viewBox="0 0 30 10"
+			preserveAspectRatio="none"
+			style={{ display: 'block', width: '100%', height: '100%' }}
+			{...props}
+		>
+			<polygon points="0,0 30,0 15,10" stroke="none"></polygon>
+			<path d="M0,0 L15,10 L30,0" fill="none" stroke="inherit" />
+		</svg>
+	);
+}

package/src/components/utility/HideWhileKeyboardOpen.tsx

@@ -1,16 +1,13 @@
-import { Slot } from '@radix-ui/react-slot';
 import clsx from 'clsx';
 import { HTMLAttributes } from 'react';
 import { useIsKeyboardOpen } from '../../hooks.js';
+import { SlotDiv } from './SlotDiv.js';
 
 export interface HideWhileKeyboardOpenProps
-	extends HTMLAttributes<HTMLDivElement> {
-	asChild?: boolean;
-}
+	extends HTMLAttributes<HTMLDivElement> {}
 
 export const HideWhileKeyboardOpen = function HideWhileKeyboardOpen({
 	ref,
-	asChild,
 	className,
 	...rest
 }: HideWhileKeyboardOpenProps & {
@@ -18,10 +15,8 @@ export const HideWhileKeyboardOpen = function HideWhileKeyboardOpen({
 }) {
 	const isKeyboardOpen = useIsKeyboardOpen();
 
-	const Comp = asChild ? Slot : 'div';
-
 	return (
-		<Comp
+		<SlotDiv
 			ref={ref}
 			className={clsx(isKeyboardOpen && 'layer-responsive:hidden', className)}
 			{...rest}

package/src/components/utility/SlotDiv.tsx

@@ -1,16 +1,16 @@
-import { Slot } from '@radix-ui/react-slot';
-import { HTMLProps } from 'react';
+import { useRender, UseRenderComponentProps } from '@base-ui/react/use-render';
 
-export interface SlotDivProps extends HTMLProps<HTMLDivElement> {
-	asChild?: boolean;
-}
+export interface SlotDivProps extends UseRenderComponentProps<'div'> {}
 export const SlotDiv = function SlotDiv({
 	ref,
-	asChild,
+	render,
 	...rest
 }: SlotDivProps) {
-	if (asChild) {
-		return <Slot ref={ref} {...rest} />;
-	}
-	return <div ref={ref} {...rest} />;
+	const result = useRender({
+		defaultTagName: 'div',
+		props: rest,
+		ref,
+		render,
+	});
+	return result;
 };

package/src/hooks/useTitleBarColor.stories.tsx

@@ -28,9 +28,7 @@ export const Default: Story = {
 						</p>
 					</Box>
 					<Dialog>
-						<Dialog.Trigger asChild>
-							<Button>Override</Button>
-						</Dialog.Trigger>
+						<Dialog.Trigger render={<Button />}>Override</Dialog.Trigger>
 						<Dialog.Content>
 							<Dialog.Title>Overriding color</Dialog.Title>
 							<Dialog.Description>