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

package/dist/esm/uno/theme/animations.js

@@ -8,12 +8,6 @@ export const animation = {
     keyframes: {
         'progress-bar': `{0% { width: 0% } 100% { width: 100% }}`,
         'pop-up': `{from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); }}`,
-        // TODO: move this out to app
-        'item-disappear': `{
-					0% {opacity:1;transform:translateY(0);height:var(--height);}
-					25% {opacity:1;transform:translateY(0);height:var(--height);}
-					100% {opacity:0;transform:translateY(30px);height:0;margin-top:0;}
-				}`,
         'expand-scale-x': `{
 					from { transform: scaleX(0) }
 					to { transform: scaleX(1) }
@@ -32,40 +26,10 @@ export const animation = {
 						opacity: 0;
 					}
 				}`,
-        'scan-line': `{
-					0% { top: 0% }
-					30% { top: 100% }
-					70% { top: 100% }
-					100% { top: 0% }
-				}`,
         'pop-in-from-half': `{
 					0% { opacity: 0; transform: scale(0.5) }
 					100% { opacity: 1; transform: scale(1) }
 				}`,
-        'radix-collapsible-open-vertical': `{
-            from { height: 0 }
-            to { height: var(--radix-collapsible-content-height) }
-          }`,
-        'radix-collapsible-close-vertical': `{
-            from { height: var(--radix-collapsible-content-height) }
-            to { height: 0 }
-          }`,
-        'radix-collapsible-open-horizontal': `{
-            from { width: 0 }
-            to { width: var(--radix-collapsible-content-width) }
-          }`,
-        'radix-collapsible-close-horizontal': `{
-            from { width: var(--radix-collapsible-content-width) }
-            to { width: 0 }
-          }`,
-        'radix-collapsible-open-both': `{
-						from { width: 0; height: 0 }
-						to { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height) }
-					}`,
-        'radix-collapsible-close-both': `{
-						from { width: var(--radix-collapsible-content-width); height: var(--radix-collapsible-content-height) }
-						to { width: 0; height: 0 }
-					}`,
         'peek-close': `{
 						from { height: calc(var(--collapsible-height) + 80px); max-height: none; }
 						to { height: min(var(--peek-height, 120px), var(--collapsible-height)); max-height: var(--peek-height, 120px); }
@@ -123,22 +87,6 @@ export const animation = {
 						0% { opacity: 1; transform: translate3d(0, 0, 0); }
 						100% { opacity: 0; transform: translate3d(100px, 0, 0); }
 					}`,
-        'popover-in': `{
-						0% { opacity: 0; transform: scale(0.95); }
-						100% { opacity: 1; transform: scale(1); }
-					}`,
-        'popover-out': `{
-						0% { opacity: 1; transform: scale(1); }
-						100% { opacity: 0; transform: scale(0.95); }
-					}`,
-        'dialog-in': `{
-						0% { opacity: 0; transform: translateY(20px) translate(-50%, -50%); }
-						100% { opacity: 1; transform: translateY(0) translate(-50%, -50%); }
-					}`,
-        'dialog-out': `{
-						0% { opacity: 1; transform: translateY(0) translate(-50%, -50%); }
-						100% { opacity: 0; transform: translateY(20px) translate(-50%, -50%); }
-					}`,
         'checkbox-fade': `{
 						from { background-color: var(--v-bg-altered,var(--v-bg)); opacity: 1; }
 						to { background-color: transparent; opacity: 0.9; border-color: transparent; box-shadow: none; }
@@ -163,16 +111,6 @@ export const animation = {
         'fade-in-right-big': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
         'fade-in': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
         'fade-out': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-        'scan-line': 'linear',
-        'radix-collapsible-open-vertical': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-        'radix-collapsible-close-vertical': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-        'radix-collapsible-open-horizontal': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-        'radix-collapsible-close-horizontal': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-        'radix-collapsible-open-both': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-        'radix-collapsible-close-both': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-        'item-disappear': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-        'dialog-in': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
-        'dialog-out': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
         'checkbox-fade': 'cubic-bezier(0.64, -0.25, 0.1, 1.4)',
     },
     durations: {
@@ -191,18 +129,6 @@ export const animation = {
         'fade-in-right-big': '300ms',
         'fade-in': '200ms',
         'fade-out': '200ms',
-        'scan-line': '1.5s',
-        'radix-collapsible-open-vertical': '200ms',
-        'radix-collapsible-close-vertical': '200ms',
-        'radix-collapsible-open-horizontal': '200ms',
-        'radix-collapsible-close-horizontal': '200ms',
-        'radix-collapsible-open-both': '200ms',
-        'radix-collapsible-close-both': '200ms',
-        'item-disappear': '300ms',
-        'popover-in': '100ms',
-        'popover-out': '100ms',
-        'dialog-in': '200ms',
-        'dialog-out': '200ms',
         'checkbox-fade': '5000ms',
         'pop-up': '200ms',
     },

package/dist/esm/uno/theme/animations.js.map

@@ -1 +1 @@
-{"version":3,"file":"animations.js","sourceRoot":"","sources":["../../../../src/uno/theme/animations.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"animations.js","sourceRoot":"","sources":["../../../../src/uno/theme/animations.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAoB;IACtC,OAAO,EAAE,qCAAqC;IAC9C,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,QAAQ;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAuB;IAC5C,SAAS,EAAE;QACV,cAAc,EAAE,yCAAyC;QACzD,QAAQ,EAAE,uHAAuH;QACjI,gBAAgB,EAAE;;;MAGd;QACJ,GAAG,EAAE;;;;;;;;;;;;;MAaD;QACJ,kBAAkB,EAAE;;;MAGhB;QACJ,YAAY,EAAE;;;OAGT;QACL,WAAW,EAAE;;;OAGR;QACL,QAAQ,EAAE;;;OAGL;QACL,gBAAgB,EAAE;;;;OAIb;QACL,cAAc,EAAE;;;;;;;OAOX;QACL,cAAc,EAAE;;;OAGX;QACL,cAAc,EAAE;;;OAGX;QACL,gBAAgB,EAAE;;;OAGb;QACL,eAAe,EAAE;;;OAGZ;QACL,eAAe,EAAE;;;OAGZ;QACL,eAAe,EAAE;;;OAGZ;QACL,iBAAiB,EAAE;;;OAGd;QACL,gBAAgB,EAAE;;;OAGb;QACL,eAAe,EAAE;;;OAGZ;KACL;IACD,SAAS,EAAE;QACV,MAAM,EAAE,QAAQ;QAChB,OAAO,EAAE,qCAAqC;QAC9C,QAAQ,EAAE,qCAAqC;QAC/C,UAAU,EAAE,UAAU;QACtB,YAAY,EAAE,qCAAqC;QACnD,cAAc,EAAE,qCAAqC;QACrD,cAAc,EAAE,qCAAqC;QACrD,eAAe,EAAE,qCAAqC;QACtD,aAAa,EAAE,qCAAqC;QACpD,eAAe,EAAE,qCAAqC;QACtD,eAAe,EAAE,qCAAqC;QACtD,gBAAgB,EAAE,qCAAqC;QACvD,gBAAgB,EAAE,qCAAqC;QACvD,kBAAkB,EAAE,qCAAqC;QACzD,kBAAkB,EAAE,qCAAqC;QACzD,mBAAmB,EAAE,qCAAqC;QAC1D,SAAS,EAAE,qCAAqC;QAChD,UAAU,EAAE,qCAAqC;QACjD,eAAe,EAAE,qCAAqC;KACtD;IACD,SAAS,EAAE;QACV,YAAY,EAAE,OAAO;QACrB,cAAc,EAAE,OAAO;QACvB,cAAc,EAAE,OAAO;QACvB,eAAe,EAAE,OAAO;QACxB,aAAa,EAAE,OAAO;QACtB,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,OAAO;QACxB,gBAAgB,EAAE,OAAO;QACzB,gBAAgB,EAAE,OAAO;QACzB,kBAAkB,EAAE,OAAO;QAC3B,mBAAmB,EAAE,OAAO;QAC5B,kBAAkB,EAAE,OAAO;QAC3B,mBAAmB,EAAE,OAAO;QAC5B,SAAS,EAAE,OAAO;QAClB,UAAU,EAAE,OAAO;QACnB,eAAe,EAAE,QAAQ;QACzB,QAAQ,EAAE,OAAO;KACjB;CACD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "3.1.1",
+  "version": "4.0.0-beta.10",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"
@@ -42,26 +42,6 @@
   "dependencies": {
     "@a-type/utils": "^1.1.4",
     "@base-ui/react": "^1.0.0",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-context-menu": "^2.2.3",
-    "@radix-ui/react-dialog": "^1.1.3",
-    "@radix-ui/react-dropdown-menu": "^2.1.3",
-    "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-menu": "^2.1.3",
-    "@radix-ui/react-popover": "^1.1.3",
-    "@radix-ui/react-progress": "^1.1.1",
-    "@radix-ui/react-radio-group": "^1.2.2",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.3",
-    "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@radix-ui/react-toast": "^1.2.3",
-    "@radix-ui/react-toggle-group": "^1.1.1",
-    "@radix-ui/react-tooltip": "^1.1.5",
     "@unocss/preset-mini": "66.5.4",
     "@unocss/preset-wind3": "66.5.4",
     "@use-gesture/react": "^10.3.1",

package/src/components/actions/ActionBar.tsx

@@ -1,5 +1,6 @@
 import classNames from 'clsx';
 import { ReactNode, Suspense } from 'react';
+import { ScrollArea } from '../scrollArea/ScrollArea.js';
 
 export interface ActionBarProps {
 	children: ReactNode;
@@ -21,20 +22,23 @@ export function ActionBar({
 				className={classNames(
 					'layer-components:(flex flex-row items-center justify-start w-full overflow-hidden relative h-[max-content] transition-[height] springy)',
 					'layer-components:[&:empty]:height-0',
-					!disableShadow &&
-						'after:(content-[""] absolute right-0 top-0 bottom-0 w-50px z-1 bg-gradient-to-l from-[color:var(--v-bg,var(--mode-white))] from-20% to-transparent pointer-events-none)',
 					className,
 				)}
 				{...rest}
 			>
-				<div
-					className={classNames(
-						'layer-components:(flex flex-row items-center justify-start w-full overflow-y-hidden overflow-x-overlay pr-80px relative h-full) layer-components:[&::-webkit-scrollbar]:hidden',
-						wrap && 'layer-variants:flex-wrap',
-					)}
+				<ScrollArea
+					disableFades={disableShadow}
+					className="layer-components:(flex-grow w-full h-full)"
 				>
-					{children}
-				</div>
+					<ScrollArea.Content
+						className={classNames(
+							'layer-composed:(flex flex-row items-center justify-start relative h-full)',
+							wrap && 'layer-variants:flex-wrap',
+						)}
+					>
+						{children}
+					</ScrollArea.Content>
+				</ScrollArea>
 			</div>
 		</Suspense>
 	);

package/src/components/actions/ActionButton.tsx

@@ -5,15 +5,14 @@ import { useEffect, useState } from 'react';
 import { Button, ButtonProps } from '../button/Button.js';
 import { CollapsibleContent, CollapsibleRoot } from '../collapsible/index.js';
 
-export interface ActionButtonProps extends ButtonProps {
+export type ActionButtonProps = ButtonProps & {
 	visible?: boolean;
-}
+};
 
 export function ActionButton({
 	children,
 	className,
 	visible = true,
-	asChild,
 	...rest
 }: ActionButtonProps) {
 	// this rather convoluted logic is meant to do:
@@ -47,7 +46,6 @@ export function ActionButton({
 						'layer-variants:(font-normal m-2 mx-1)',
 						className,
 					)}
-					asChild={asChild}
 					{...rest}
 				>
 					{children}

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Avatar } from './Avatar.js';
+
+const meta = {
+	title: 'Components/Avatar',
+	component: Avatar,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+	render(args) {
+		return <Avatar {...args} />;
+	},
+};
+
+export const WithImage: Story = {
+	args: {
+		imageSrc: 'https://i.pravatar.cc/300',
+		name: 'John Doe',
+	},
+};
+
+export const WithName: Story = {
+	args: {
+		name: 'Jane Smith',
+	},
+};
+
+export const FailedImage: Story = {
+	args: {
+		imageSrc: 'http://localhost:3333/nonexistent.jpg',
+		name: 'Fallback User',
+	},
+};

package/src/components/avatar/Avatar.tsx

@@ -1,14 +1,19 @@
+import {
+	Avatar as BaseAvatar,
+	AvatarRootProps as BaseAvatarProps,
+} from '@base-ui/react/avatar';
 import classNames from 'clsx';
-import { CSSProperties, HTMLProps, useState } from 'react';
+import { CSSProperties, HTMLProps } from 'react';
 import { Icon } from '../icon/index.js';
 
-export interface AvatarProps {
+export interface AvatarProps extends BaseAvatarProps {
 	className?: string;
 	popIn?: boolean;
 	style?: CSSProperties;
 	imageSrc?: string | null;
 	name?: string;
 	crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
+	size?: string | number;
 }
 
 export function Avatar({
@@ -17,11 +22,13 @@ export function Avatar({
 	imageSrc,
 	name,
 	crossOrigin,
+	style,
+	size,
 	...rest
 }: AvatarProps) {
 	const empty = !name && !imageSrc;
 	return (
-		<div
+		<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)',
@@ -30,48 +37,27 @@ export function Avatar({
 				empty && 'layer-components:(border-dashed bg-gray-light)',
 				className,
 			)}
+			style={size ? { width: size, height: size, ...style } : style}
 			{...rest}
 		>
-			{!empty && (
-				<AvatarContent
-					name={name}
-					imageSrc={imageSrc}
+			{imageSrc && (
+				<BaseAvatar.Image
+					className="w-full h-full object-cover"
+					referrerPolicy="no-referrer"
+					src={imageSrc}
+					alt={`${name ?? 'user'}'s profile picture`}
 					crossOrigin={crossOrigin}
 				/>
 			)}
+			{!empty && (
+				<BaseAvatar.Fallback
+					className="text-size-[calc(0.5px*var(--avatar-size,24px))]"
+					style={{ '--avatar-size': size } as any}
+				>
+					{name?.charAt(0) || '?'}
+				</BaseAvatar.Fallback>
+			)}
 			{empty && <Icon name="profile" />}
-		</div>
-	);
-}
-
-function AvatarContent({
-	name,
-	imageSrc,
-	crossOrigin = 'anonymous',
-}: {
-	name?: string;
-	imageSrc?: string | null;
-	crossOrigin?: HTMLProps<HTMLImageElement>['crossOrigin'];
-}) {
-	const [fallback, setFallback] = useState(false);
-	const triggerFallback = () => {
-		setFallback(true);
-	};
-	if (imageSrc && !fallback) {
-		return (
-			<img
-				className="w-full h-full object-cover"
-				referrerPolicy="no-referrer"
-				src={imageSrc}
-				alt={`${name ?? 'user'}'s profile picture`}
-				crossOrigin={crossOrigin}
-				onError={triggerFallback}
-			/>
-		);
-	}
-	return (
-		<div className="color-black items-center justify-center flex text-sm font-bold">
-			{name?.charAt(0) || '?'}
-		</div>
+		</BaseAvatar.Root>
 	);
 }

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

@@ -123,7 +123,7 @@ function SurfaceContent({ name }: { name: string }) {
 				<Switch checked />
 			</Box>
 			<Progress value={50} className="w-full" />
-			<ToggleGroup type="single" defaultValue="one">
+			<ToggleGroup defaultValue={['one']}>
 				<ToggleGroup.Item value="one">One</ToggleGroup.Item>
 				<ToggleGroup.Item value="two">Two</ToggleGroup.Item>
 			</ToggleGroup>

package/src/components/button/Button.tsx

@@ -1,4 +1,7 @@
-import { Slot } from '@radix-ui/react-slot';
+import {
+	Button as BaseButton,
+	ButtonProps as BaseButtonProps,
+} from '@base-ui/react/button';
 import { clsx } from 'clsx';
 import { AnimatePresence, motion } from 'motion/react';
 import {
@@ -20,9 +23,12 @@ import { useIsDropdownTrigger } from '../dropdownMenu/DropdownTriggerContext.js'
 import { IconLoadingProvider } from '../icon/IconLoadingContext.js';
 import { Icon } from '../icon/index.js';
 import { Spinner } from '../spinner/index.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
 import { getButtonClassName } from './classes.js';
 
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonProps
+	extends ButtonHTMLAttributes<HTMLButtonElement>,
+		Pick<BaseButtonProps, 'render' | 'focusableWhenDisabled'> {
 	color?: PaletteName;
 	emphasis?:
 		| 'primary'
@@ -37,7 +43,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 	align?: 'start' | 'stretch' | 'end';
 	visuallyDisabled?: boolean;
 	loading?: boolean;
-	asChild?: boolean;
 	visuallyFocused?: boolean;
 	disableIconMode?: boolean;
 	ref?: Ref<HTMLButtonElement>;
@@ -57,16 +62,14 @@ export function ButtonRoot({
 	loading,
 	children,
 	disabled,
-	asChild,
 	disableIconMode,
 	disableDropdownTriggerIcon,
 	ref,
 	...props
 }: ButtonProps) {
-	const Comp = asChild ? Slot : 'button';
-
 	const isFormSubmitting = false;
-	const isSubmitLoading = props.type === 'submit' && isFormSubmitting;
+	const isSubmitLoading =
+		'type' in props && props.type === 'submit' && isFormSubmitting;
 	const isLoading = loading || isSubmitLoading;
 
 	const childArray = childArrayWithoutFragments(children);
@@ -117,15 +120,9 @@ export function ButtonRoot({
 		buttonProps['aria-pressed'] = !!toggled;
 	}
 
-	// for asChild, no need to do the rest of this stuff.
-	if (asChild) {
-		// avoid rendering loading spinner with asChild
-		return <Comp {...buttonProps}>{children}</Comp>;
-	}
-
 	return (
 		<IconLoadingProvider value={isLoading}>
-			<Comp {...buttonProps}>
+			<BaseButton {...buttonProps}>
 				<AnimatePresence>
 					{isLoading && (
 						<motion.div
@@ -151,12 +148,10 @@ export function ButtonRoot({
 				{children}
 				{isDropdownTrigger && (
 					<IconLoadingProvider value={false}>
-						<DropdownMenuTriggerIcon asChild>
-							<Icon name="chevron" />
-						</DropdownMenuTriggerIcon>
+						<DropdownMenuTriggerIcon render={<Icon name="chevron" />} />
 					</IconLoadingProvider>
 				)}
-			</Comp>
+			</BaseButton>
 		</IconLoadingProvider>
 	);
 }
@@ -181,7 +176,7 @@ export const ButtonToggleIndicator = memo(function ToggleIndicator({
 });
 
 // allows custom icons to trigger icon button behavior
-export const ButtonIcon = withClassName('div', 'icon flex-shrink-0 flex');
+export const ButtonIcon = withClassName(SlotDiv, 'icon flex-shrink-0 flex');
 ButtonIcon.displayName = 'ButtonIcon';
 
 export const Button = Object.assign(ButtonRoot, {

package/src/components/button/ConfirmedButton.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useCallback, useState } from 'react';
 import {
 	Dialog,
@@ -57,15 +55,13 @@ export function ConfirmedButton({
 
 	return (
 		<Dialog open={open} onOpenChange={setOpen}>
-			<DialogTrigger asChild>
-				<Button {...rest} />
-			</DialogTrigger>
+			<DialogTrigger render={<Button />} {...rest} />
 			<DialogContent>
 				<DialogTitle>{confirmTitle}</DialogTitle>
 				<P>{confirmText}</P>
 				<DialogActions>
-					<DialogClose asChild>
-						<Button emphasis="default">{cancelAction}</Button>
+					<DialogClose render={<Button emphasis="default" />}>
+						{cancelAction}
 					</DialogClose>
 					<Button
 						loading={loading}

package/src/components/camera/Camera.tsx

@@ -1,4 +1,7 @@
-import { Slot } from '@radix-ui/react-slot';
+import {
+	Button as BaseButton,
+	ButtonProps as BaseButtonProps,
+} from '@base-ui/react/button';
 import classNames from 'clsx';
 import {
 	MouseEvent,
@@ -17,8 +20,8 @@ import { Select, SelectContent, SelectItem } from '../select/index.js';
 
 const CameraContext = createContext<{
 	triggerCapture: () => void;
-	selectedDeviceId: string | undefined;
-	selectDeviceId: (id: string) => void;
+	selectedDeviceId: string | undefined | null;
+	selectDeviceId: (id: string | null) => void;
 	devices: MediaDeviceInfo[];
 	fullscreen: boolean;
 	setFullscreen: (fullscreen: boolean) => void;
@@ -61,7 +64,7 @@ export function CameraRoot({
 	}, [!!stream]);
 
 	const [selectedDeviceId, setSelectedDeviceId] = useState<
-		string | undefined
+		string | undefined | null
 	>();
 
 	const cleanupRef = useRef<() => void>(undefined);
@@ -71,7 +74,7 @@ export function CameraRoot({
 			navigator.mediaDevices
 				?.getUserMedia({
 					video: {
-						deviceId: selectedDeviceId,
+						deviceId: selectedDeviceId || undefined,
 						facingMode,
 					},
 				})
@@ -183,26 +186,23 @@ export function CameraRoot({
 	);
 }
 
-export interface CameraShutterButtonProps {
+export type CameraShutterButtonProps = BaseButtonProps & {
 	className?: string;
-	asChild?: boolean;
 	onClick?: (ev: MouseEvent<HTMLButtonElement>) => void;
 	ref?: Ref<HTMLButtonElement>;
-}
+};
 
 export function CameraShutterButton({
-	asChild,
 	onClick,
 	ref,
 	...rest
 }: CameraShutterButtonProps) {
-	const Comp = asChild ? Slot : StyledShutterButton;
 	const { triggerCapture } = useContext(CameraContext);
 
 	return (
-		<Comp
+		<StyledShutterButton
 			ref={ref}
-			aria-label={asChild ? undefined : 'Capture photo'}
+			aria-label={'Capture photo'}
 			onClick={(ev) => {
 				triggerCapture();
 				onClick?.(ev);
@@ -213,7 +213,7 @@ export function CameraShutterButton({
 }
 
 const StyledShutterButton = withClassName(
-	'button',
+	BaseButton,
 	'absolute bottom-3 left-1/2 -translate-x-1/2 w-16 h-16 bg-white rounded-full cursor-pointer border-2 border-black border-solid ring-2 ring-white opacity-80',
 	'hover:bg-gray-wash hover:opacity-100',
 	'focus-visible:bg-lighten-1',
@@ -258,14 +258,16 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
 			value={selectedDeviceId || 'default'}
 			onValueChange={selectDeviceId}
 		>
-			<Select.Trigger asChild>
-				<Button
-					emphasis="ghost"
-					className="absolute bottom-2 left-2 color-white"
-				>
-					<Icon name="refresh" />
-				</Button>
-			</Select.Trigger>
+			<Select.Trigger
+				render={
+					<Button
+						emphasis="ghost"
+						className="absolute bottom-2 left-2 color-white"
+					>
+						<Icon name="refresh" />
+					</Button>
+				}
+			/>
 			<SelectContent>
 				{devices.map((device) => (
 					<SelectItem key={device.deviceId} value={device.deviceId}>

package/src/components/card/Card.stories.tsx

@@ -33,9 +33,11 @@ export const Default: Story = {
 	render: (args) => (
 		<div className="row items-stretch">
 			<CardRoot {...args} className="min-h-20vh">
-				<CardImage asChild>
-					<img src="https://resources.biscuits.club/images/pashka.jpg" />
-				</CardImage>
+				<CardImage
+					render={
+						<img src="https://resources.biscuits.club/images/pashka.jpg" />
+					}
+				/>
 				<CardMain onClick={() => alert('clicked')}>
 					<CardTitle>Card Title</CardTitle>
 					<CardContent>
@@ -120,12 +122,14 @@ export const NonInteractive: Story = {
 export const AsChild: Story = {
 	render: () => (
 		<CardRoot>
-			<CardMain asChild>
-				<a href="#here">
-					<CardTitle>Card Title</CardTitle>
-					<CardContent>Other stuff</CardContent>
-				</a>
-			</CardMain>
+			<CardMain
+				render={
+					<a href="#here">
+						<CardTitle>Card Title</CardTitle>
+						<CardContent>Other stuff</CardContent>
+					</a>
+				}
+			/>
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>
@@ -141,12 +145,15 @@ export const AsChild: Story = {
 export const AsChildNonInteractive: Story = {
 	render: () => (
 		<CardRoot>
-			<CardMain asChild nonInteractive>
-				<button>
-					<CardTitle>Card Title</CardTitle>
-					<CardContent>Other stuff</CardContent>
-				</button>
-			</CardMain>
+			<CardMain
+				nonInteractive
+				render={
+					<button>
+						<CardTitle>Card Title</CardTitle>
+						<CardContent>Other stuff</CardContent>
+					</button>
+				}
+			/>
 			<CardFooter>
 				<CardActions>
 					<Button size="small">Button</Button>