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

package/src/components/pwaInstall/PwaInstall.tsx

@@ -1,4 +1,4 @@
-import { DialogTriggerProps } from '@radix-ui/react-dialog';
+import { DialogRootProps } from '@base-ui/react/dialog';
 import { useState } from 'react';
 import { useSnapshot } from 'valtio';
 import {
@@ -28,16 +28,11 @@ import {
 } from './useIsInstallReady.js';
 import { useWebManifest } from './useWebManifest.js';
 
-export interface PwaInstall extends DialogTriggerProps {
+export interface PwaInstall extends DialogRootProps {
 	manifestPath?: string;
 }
 
-export function PwaInstall({
-	children,
-	manifestPath,
-	asChild: _,
-	...rest
-}: PwaInstall) {
+export function PwaInstall({ children, manifestPath, ...rest }: PwaInstall) {
 	const installed = useIsInstalled();
 	const manifest = useWebManifest(manifestPath);
 	const { open } = useSnapshot(pwaInstallerState);
@@ -52,9 +47,11 @@ export function PwaInstall({
 
 	return (
 		<Dialog
+			{...rest}
 			open={open}
-			onOpenChange={(isOpen) => {
+			onOpenChange={(isOpen, ev) => {
 				pwaInstallerState.open = isOpen;
+				rest.onOpenChange?.(isOpen, ev);
 			}}
 		>
 			<Dialog.Content className="flex flex-col gap-xs" id="pwa-install-dialog">
@@ -80,8 +77,8 @@ export function PwaInstall({
 						</Dialog.Description>
 						<InstallInstructions />
 						<Dialog.Actions>
-							<Dialog.Close asChild>
-								<Button emphasis="ghost">Close</Button>
+							<Dialog.Close render={<Button emphasis="ghost" />}>
+								Close
 							</Dialog.Close>
 							<Button onClick={() => setShowInstructions(false)}>
 								<Icon name="arrowLeft" /> Back
@@ -99,8 +96,8 @@ export function PwaInstall({
 						)}
 						<ManifestImageGallery manifestPath={manifestPath} />
 						<Dialog.Actions>
-							<Dialog.Close asChild>
-								<Button emphasis="ghost">Close</Button>
+							<Dialog.Close render={<Button emphasis="ghost" />}>
+								Close
 							</Dialog.Close>
 							<InstallDeviceActions
 								showInstructions={() => setShowInstructions(true)}
@@ -182,15 +179,17 @@ function ManifestImageGallery({ manifestPath }: { manifestPath?: string }) {
 		<Box overflow="auto-x" p="sm" gap className="h-240px">
 			{manifest.screenshots?.map((screenshot, index) => (
 				<Lightbox.Root key={screenshot.src}>
-					<Lightbox.Trigger asChild>
-						<Lightbox.Image
-							tabIndex={0}
-							key={index}
-							src={screenshot.src}
-							alt={screenshot.label || `Screenshot ${index + 1}`}
-							className="border border-default rounded-xs"
-						/>
-					</Lightbox.Trigger>
+					<Lightbox.Trigger
+						render={
+							<Lightbox.Image
+								tabIndex={0}
+								key={index}
+								src={screenshot.src}
+								alt={screenshot.label || `Screenshot ${index + 1}`}
+								className="border border-default rounded-xs"
+							/>
+						}
+					/>
 					<Lightbox.Portal>
 						<Lightbox.Overlay className="z-10000" />
 						<Lightbox.Content className="z-10001">

package/src/components/pwaInstall/PwaInstallTrigger.stories.tsx

@@ -19,10 +19,11 @@ type Story = StoryObj<typeof PwaInstallTrigger>;
 export const Default: Story = {
 	render(args) {
 		return (
-			<PwaInstallTrigger {...args} asChild>
-				<Button color="primary" emphasis="light">
-					<Icon name="star" /> Install
-				</Button>
+			<PwaInstallTrigger
+				{...args}
+				render={<Button color="primary" emphasis="light" />}
+			>
+				<Icon name="star" /> Install
 			</PwaInstallTrigger>
 		);
 	},

package/src/components/pwaInstall/PwaInstallTrigger.tsx

@@ -3,7 +3,7 @@ import { Icon } from '../icon/Icon.js';
 import { pwaInstallerState } from './state.js';
 import { useIsInstalled } from './useIsInstallReady.js';
 
-export interface PwaInstallTriggerProps extends ButtonProps {}
+export type PwaInstallTriggerProps = ButtonProps & {};
 
 export function PwaInstallTrigger({
 	children,

package/src/components/scrollArea/ScrollArea.stories.tsx

@@ -1,63 +1,104 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { useState } from 'react';
+import clsx from 'clsx';
 import { ScrollArea } from './ScrollArea.js';
 
 const meta = {
 	title: 'Components/ScrollArea',
-	component: ScrollArea,
-	argTypes: {},
+	argTypes: {
+		direction: {
+			control: { type: 'select' },
+			options: ['vertical', 'horizontal', 'both'],
+		},
+	},
+	args: {
+		direction: 'vertical',
+	},
 	parameters: {
 		controls: { expanded: true },
 	},
-} satisfies Meta<typeof ScrollArea>;
+} satisfies Meta<{ direction: 'vertical' | 'horizontal' | 'both' }>;
 
 export default meta;
 
-type Story = StoryObj<typeof ScrollArea>;
+type Story = StoryObj<{ direction: 'vertical' | 'horizontal' | 'both' }>;
 
 export const Default: Story = {
-	render(args) {
+	render({ direction }) {
 		return (
-			<ScrollArea {...args}>
-				<div className="flex flex-col gap-2">
-					{Array.from({ length: 100 }, (_, i) => (
-						<div
-							key={i}
-							className="h-10 w-full bg-primary-wash color-primary flex items-center justify-center"
-						>
-							Item {i + 1}
-						</div>
-					))}
-				</div>
-			</ScrollArea>
-		);
-	},
-};
-
-export const StickToBottom: Story = {
-	render(args) {
-		const [itemCount, setItemCount] = useState(50);
-		return (
-			<div className="flex flex-col gap-2 w-full h-full overflow-hidden">
-				<button onClick={() => setItemCount((prev) => prev + 1)}>
-					Add Item
-				</button>
-				<button onClick={() => setItemCount((prev) => prev - 1)}>
-					Remove Item
-				</button>
-				<ScrollArea {...args} className="flex-1" stickToBottom>
-					<div className="flex flex-col gap-2">
-						{Array.from({ length: itemCount }, (_, i) => (
-							<div
-								key={i}
-								className="h-10 w-full bg-primary-wash color-primary flex items-center justify-center"
-							>
-								Item {i + 1}
-							</div>
-						))}
+			<ScrollArea style={{ height: '200px', width: '400px' }}>
+				<ScrollArea.Content>
+					<div
+						className={clsx(
+							direction === 'horizontal' && 'w-10000px',
+							direction === 'both' && 'w-800px',
+						)}
+					>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
+							risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
+							nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
+							ligula massa, varius a, semper congue, euismod non, mi. Proin
+							porttitor, orci nec nonummy molestie, enim est eleifend mi, non
+							fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa,
+							scelerisque vitae, consequat in, pretium a, enim. Pellentesque
+							congue. Ut in risus volutpat libero pharetra tempor. Cras
+							vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
+							blandit odio eu enim. Pellentesque sed dui ut augue blandit
+							sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
+							ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
+							pede pellentesque fermentum. Maecenas adipiscing ante non diam
+							sollicitudin ornare. Morbi in sem quis dui placerat ornare.
+							Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
+							diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue.
+							Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien
+							vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget
+							metus. Vestibulum commodo. Ut rhoncus gravida arcu.
+						</p>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
+							risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
+							nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
+							ligula massa, varius a, semper congue, euismod non, mi. Proin
+							porttitor, orci nec nonummy molestie, enim est eleifend mi, non
+							fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa,
+							scelerisque vitae, consequat in, pretium a, enim. Pellentesque
+							congue. Ut in risus volutpat libero pharetra tempor. Cras
+							vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
+							blandit odio eu enim. Pellentesque sed dui ut augue blandit
+							sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
+							ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
+							pede pellentesque fermentum. Maecenas adipiscing ante non diam
+							sollicitudin ornare. Morbi in sem quis dui placerat ornare.
+							Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
+							diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue.
+							Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien
+							vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget
+							metus. Vestibulum commodo. Ut rhoncus gravida arcu.
+						</p>
+						<p>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
+							risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
+							nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas
+							ligula massa, varius a, semper congue, euismod non, mi. Proin
+							porttitor, orci nec nonummy molestie, enim est eleifend mi, non
+							fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa,
+							scelerisque vitae, consequat in, pretium a, enim. Pellentesque
+							congue. Ut in risus volutpat libero pharetra tempor. Cras
+							vestibulum bibendum augue. Praesent egestas leo in pede. Praesent
+							blandit odio eu enim. Pellentesque sed dui ut augue blandit
+							sodales. Vestibulum ante ipsum primis in faucibus orci luctus et
+							ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed
+							pede pellentesque fermentum. Maecenas adipiscing ante non diam
+							sollicitudin ornare. Morbi in sem quis dui placerat ornare.
+							Pellentesque odio nisi, euismod in, pharetra a, ultricies in,
+							diam. Sed arcu. Cras consectetur. Vivamus fermentum nibh in augue.
+							Praesent a lacus at urna consequat rhoncus. Morbi dapibus sapien
+							vel ante. Aliquam erat volutpat. Pellentesque sagittis ligula eget
+							metus. Vestibulum commodo. Ut rhoncus gravida arcu.
+						</p>
 					</div>
-				</ScrollArea>
-			</div>
+				</ScrollArea.Content>
+			</ScrollArea>
 		);
 	},
 };

package/src/components/scrollArea/ScrollArea.tsx

@@ -1,96 +1,108 @@
-import * as Primitive from '@radix-ui/react-scroll-area';
-import { Ref } from 'react';
-import { withClassName } from '../../hooks.js';
-import { useStayScrolledToBottom } from '../../hooks/useStayScrolledToBottom.js';
-
-const ScrollAreaRootImpl = withClassName(Primitive.Root, 'overflow-hidden');
-
-export interface ScrollAreaRootProps extends Primitive.ScrollAreaProps {
-	background?: 'white' | 'wash' | 'primary-wash' | 'primary' | 'black';
-	ref?: Ref<HTMLDivElement>;
-}
-
-export const ScrollAreaRoot = function ScrollAreaRoot({
-	ref,
-	background,
-	...props
-}: ScrollAreaRootProps) {
-	return <ScrollAreaRootImpl ref={ref} {...props} />;
-};
-
-export const ScrollAreaViewport = withClassName(
-	Primitive.Viewport,
-	'h-full w-full rounded-inherit',
-	'[background:linear-gradient(var(--v-bg)_30%,rgba(255,255,255,0))_center_top,linear-gradient(rgba(255,255,255,0),var(--v-bg)_70%)_center_bottom,radial-gradient(farthest-side_at_50%_0,oklch(from_var(--v-bg)_calc(l*0.9)_c_h),rgba(0,0,0,0))_center_top,radial-gradient(farthest-side_at_50%_100%,oklch(from_var(--v-bg)_calc(l*0.9)_c_h),rgba(0,0,0,0))_center_bottom]',
-	'![background-repeat:no-repeat] ![background-size:100%_40px,100%_40px,100%_14px,100%_14px]',
-	'![background-attachment:local,local,scroll,scroll]',
-);
-
-export const ScrollAreaScrollbarRoot = withClassName(
-	Primitive.Scrollbar,
-	'layer-components:(flex select-none touch-none p-0.5 bg-inherit bg-lighten-2 transition-colors duration-160ms ease-out)',
-	'layer-components:[&[data-orientation=vertical]]:w-2.5',
-	'layer-components:[&[data-orientation=horizontal]]:(flex-col h-2.5)',
-);
-
-export const ScrollAreaThumb = withClassName(
-	Primitive.Thumb,
-	'layer-components:(flex-1 rounded-lg relative bg-inherit bg-darken-2)',
-	'before:(content-[""] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full min-w-44px min-h-44px)',
-);
-
-export const ScrollAreaScrollbar = function ScrollAreaScrollbar({
-	ref,
-	...props
-}: Primitive.ScrollAreaScrollbarProps & {
-	ref?: Ref<HTMLDivElement>;
-}) {
-	return (
-		<ScrollAreaScrollbarRoot {...props} ref={ref}>
-			<ScrollAreaThumb />
-		</ScrollAreaScrollbarRoot>
-	);
-};
-
-export interface ScrollAreaProps extends Primitive.ScrollAreaProps {
-	background?: ScrollAreaRootProps['background'];
-	orientation?: 'vertical' | 'both';
-	ref?: Ref<HTMLDivElement>;
-	stickToBottom?: boolean;
-}
-
-/**
- * @deprecated - just use Box with overflow prop
- */
-export const ScrollArea = Object.assign(
-	function ScrollArea({
-		ref,
-		children,
-		orientation,
-		stickToBottom,
-		...props
-	}: ScrollAreaProps) {
-		const { ref: stickRef, onScroll } = useStayScrolledToBottom(stickToBottom);
-
-		return (
-			<ScrollAreaRoot data-scroll-root ref={ref} {...props}>
-				<ScrollAreaViewport
-					data-scroll-viewport
-					ref={stickRef}
-					onScroll={onScroll}
-				>
-					{children}
-				</ScrollAreaViewport>
-				<ScrollAreaScrollbar />
-				{orientation === 'both' && (
-					<ScrollAreaScrollbar orientation="horizontal" />
-				)}
-			</ScrollAreaRoot>
-		);
-	},
-	{
-		Root: ScrollAreaRoot,
-		Viewport: ScrollAreaViewport,
-		Scrollbar: ScrollAreaScrollbar,
-	},
-);
+import {
+	ScrollArea as BaseScrollArea,
+	ScrollAreaRootProps,
+	ScrollAreaScrollbarProps,
+} from '@base-ui/react/scroll-area';
+import { withClassName } from '../../hooks.js';
+
+export type * from '@base-ui/react/scroll-area';
+
+export const ScrollAreaRoot = withClassName(
+	BaseScrollArea.Root,
+	'layer-components:(min-w-0 min-h-0 flex flex-col)',
+);
+
+export const ScrollAreaViewport = withClassName(
+	BaseScrollArea.Viewport,
+	'layer-components:(h-full outline-none overscroll-contain min-h-0)',
+	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
+);
+
+export const ScrollAreaVerticalFades = withClassName(
+	'div',
+	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-y-start:inherit] [--scroll-area-overflow-y-end:inherit])',
+	'layer-components:before:(content-empty [--scroll-area-overflow-y-start:inherit] top-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-start,,40px))] bg-gradient-to-b bg-gradient-from-bg bg-gradient-via-bg bg-gradient-to-transparent)',
+	'layer-components:after:(content-empty [--scroll-area-overflow-y-end:inherit] bottom-0 block left-0 w-full absolute transition-height h-[min(40px,var(--scroll-area-overflow-y-end,,40px))] bg-gradient-to-t bg-gradient-from-bg bg-gradient-via-bg bg-gradient-to-transparent)',
+);
+
+export const ScrollAreaHorizontalFades = withClassName(
+	'div',
+	'layer-components:(pointer-events-none absolute inset-0 [--scroll-area-overflow-x-start:inherit] [--scroll-area-overflow-x-end:inherit])',
+	'layer-components:before:(content-empty [--scroll-area-overflow-x-start:inherit] left-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-start,,40px))] bg-gradient-to-r bg-gradient-from-bg bg-gradient-to-transparent)',
+	'layer-components:after:(content-empty [--scroll-area-overflow-x-end:inherit] right-0 block top-0 h-full absolute transition-width w-[min(40px,var(--scroll-area-overflow-x-end,,40px))] bg-gradient-to-l bg-gradient-from-bg bg-gradient-to-transparent)',
+);
+
+export const ScrollAreaViewportFades = () => (
+	<>
+		<ScrollAreaVerticalFades />
+		<ScrollAreaHorizontalFades />
+	</>
+);
+
+export const ScrollAreaContent = withClassName(
+	BaseScrollArea.Content,
+	'layer-components:(flex flex-col)',
+);
+
+export const ScrollAreaThumb = withClassName(
+	BaseScrollArea.Thumb,
+	'layer-components:(rounded-inherit bg-fg/25)',
+	'layer-components:data-[orientation=horizontal]:(h-full)',
+	'layer-components:data-[orientation=vertical]:(w-full)',
+);
+
+const ComposedScrollbar = ({
+	children,
+	...props
+}: ScrollAreaScrollbarProps) => (
+	<BaseScrollArea.Scrollbar {...props}>
+		{children ?? <ScrollAreaThumb />}
+	</BaseScrollArea.Scrollbar>
+);
+ComposedScrollbar.displayName = 'ScrollAreaScrollbar';
+
+export const ScrollAreaScrollbar = withClassName(
+	ComposedScrollbar,
+	'layer-components:(flex rounded-full relative select-none touch-none pointer-events-none m-xxs opacity-0)',
+	'layer-components:(bg-fg/5 transition-[opacity,height,width])',
+	'layer-components:data-[hovering]:(opacity-100 pointer-events-auto)',
+	'layer-components:data-[scrolling]:(duration-0)',
+	'layer-components:before:(content-empty absolute)',
+
+	'layer-components:data-[orientation=vertical]:(w-0.25rem justify-center before:(w-1.25rem h-full) hover:w-0.5rem)',
+	'layer-components:data-[orientation=horizontal]:(h-0.25rem items-center before:(h-1.25rem w-full) hover:h-0.5rem)',
+);
+
+export const ScrollAreaCorner = withClassName(
+	BaseScrollArea.Corner,
+	'layer-components:(bg-transparent)',
+);
+
+const ScrollAreaDefault = ({
+	disableFades,
+	...props
+}: ScrollAreaRootProps & {
+	disableFades?: boolean;
+}) => (
+	<ScrollAreaRoot {...props}>
+		<ScrollAreaViewport>
+			{props.children}
+			{!disableFades && <ScrollAreaViewportFades />}
+		</ScrollAreaViewport>
+		<ScrollAreaScrollbar />
+		<ScrollAreaScrollbar orientation="horizontal" />
+		<ScrollAreaCorner />
+	</ScrollAreaRoot>
+);
+
+export const ScrollArea = Object.assign(ScrollAreaDefault, {
+	Root: ScrollAreaRoot,
+	Content: ScrollAreaContent,
+	Viewport: ScrollAreaViewport,
+	Scrollbar: ScrollAreaScrollbar,
+	Thumb: ScrollAreaThumb,
+	Corner: ScrollAreaCorner,
+	ViewportFades: ScrollAreaViewportFades,
+	VerticalFades: ScrollAreaVerticalFades,
+	HorizontalFades: ScrollAreaHorizontalFades,
+});

package/src/components/select/Select.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from '../box/Box.js';
 import { Button } from '../button/index.js';
 import { Select, SelectContent, SelectItem, SelectTrigger } from './Select.js';
 
@@ -21,16 +22,44 @@ type Story = StoryObj<typeof Select>;
 export const Default: Story = {
 	render(args) {
 		return (
-			<Select {...args}>
-				<SelectTrigger />
-				<SelectContent>
-					{['One', 'Two', 'Three'].map((item) => (
-						<SelectItem key={item} value={item}>
-							{item}
-						</SelectItem>
-					))}
-				</SelectContent>
-			</Select>
+			<Box full layout="center center" className="min-h-200px">
+				<Select {...args}>
+					<SelectTrigger />
+					<SelectContent>
+						{['One', 'Two', 'Three'].map((item) => (
+							<SelectItem key={item} value={item}>
+								{item}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</Box>
+		);
+	},
+};
+
+export const LongListWithItemLabels: Story = {
+	render({ defaultValue, value, ...args }) {
+		return (
+			<Box full layout="center center" className="min-h-200px">
+				<Select
+					{...args}
+					defaultValue={0}
+					itemToStringLabel={(i: number) => `Item number ${i + 1}`}
+				>
+					<SelectTrigger />
+					<SelectContent>
+						{new Array(50).fill(null).map((_, i) => {
+							const item = `Item number ${i + 1}`;
+							return (
+								<SelectItem key={item} value={i}>
+									{item}
+								</SelectItem>
+							);
+						})}
+					</SelectContent>
+				</Select>
+			</Box>
 		);
 	},
 };