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

package/src/components/card/Card.tsx

@@ -1,4 +1,4 @@
-import { Slot } from '@radix-ui/react-slot';
+import { useRender, UseRenderRenderProp } from '@base-ui/react/use-render';
 import classNames from 'clsx';
 import {
 	CSSProperties,
@@ -23,16 +23,23 @@ export const CardRoot = withClassName(
 );
 
 export function CardMain({
-	asChild,
 	className,
 	compact,
 	nonInteractive,
 	ref,
 	style,
 	children,
+	visuallyDisabled,
+	visuallyFocused,
+	render,
 	...rest
 }: {
-	asChild?: boolean;
+	render?: UseRenderRenderProp<{
+		visuallyFocused?: boolean;
+		visuallyDisabled?: boolean;
+		interactive?: boolean;
+		compact?: boolean;
+	}>;
 	className?: string;
 	onClick?: (ev: MouseEvent) => void;
 	children?: ReactNode;
@@ -44,42 +51,46 @@ export function CardMain({
 	style?: CSSProperties;
 	ref?: Ref<any>;
 }) {
-	const isInteractive = !nonInteractive && (!!asChild || !!rest.onClick);
-	const Comp = asChild ? Slot : isInteractive ? 'button' : 'div';
+	const isInteractive = !nonInteractive && (!!render || !!rest.onClick);
 
 	const scaleStyles = useGroupScaleStyles(style);
 
-	return (
-		<GroupScaleLayer>
-			<Comp
-				ref={ref}
-				className={classNames(
-					'layer-components:(flex flex-col items-start gap-1 transition pb-xs flex-1 min-h-40px bg-transparent)',
-					'layer-components:(border-none text-start text-inherit text-sm relative z-1 p-0 font-inherit outline-none rounded-t-md)',
-					!!compact && 'layer-variants:(pb-0)',
-					isInteractive &&
-						classNames(
-							'layer-components:cursor-pointer',
-							'layer-components:hover:(bg-black/10 color-black)',
-							'layer-components:focus:outline-none',
-							'layer-components:focus-visible:(outline-none bg-black/10 ring-inset ring-4 ring-accent)',
-							'layer-components:[&[data-visually-focused=true]]:(bg-black/10 ring-inset ring-4 ring-accent)',
-							'layer-components:disabled:(cursor-default)',
-							'layer-components:[&[data-visually-disabled=true]]:(cursor-default)',
-						),
-					className,
-				)}
-				data-compact={compact}
-				data-visually-focused={rest.visuallyFocused}
-				data-visually-disabled={rest.visuallyDisabled}
-				data-interactive={isInteractive}
-				style={scaleStyles}
-				{...rest}
-			>
-				{children}
-			</Comp>
-		</GroupScaleLayer>
-	);
+	const rootProps = {
+		...rest,
+		className: classNames(
+			'layer-components:(flex flex-col items-start gap-1 transition pb-xs flex-1 min-h-40px bg-transparent)',
+			'layer-components:(border-none text-start text-inherit text-sm relative z-1 p-0 font-inherit outline-none rounded-t-md)',
+			!!compact && 'layer-variants:(pb-0)',
+			isInteractive &&
+				classNames(
+					'layer-components:cursor-pointer',
+					'layer-components:hover:(bg-black/10 color-black)',
+					'layer-components:focus:outline-none',
+					'layer-components:focus-visible:(outline-none bg-black/10 ring-inset ring-4 ring-accent)',
+					'layer-components:data-[visually-focused]:(bg-black/10 ring-inset ring-4 ring-accent)',
+					'layer-components:disabled:(cursor-default)',
+					'layer-components:data-[visually-disabled]:(cursor-default)',
+				),
+			className,
+		),
+		style: scaleStyles,
+		children,
+	};
+
+	const root = useRender({
+		defaultTagName: isInteractive ? 'button' : 'div',
+		props: rootProps,
+		ref,
+		render,
+		state: {
+			interactive: !!isInteractive,
+			compact: !!compact,
+			visuallyFocused: !!visuallyFocused,
+			visuallyDisabled: !!visuallyDisabled,
+		},
+	});
+
+	return <GroupScaleLayer>{root}</GroupScaleLayer>;
 }
 
 export const CardTitle = withClassName(
@@ -87,21 +98,27 @@ export const CardTitle = withClassName(
 	'layer-components:(flex flex-col gap-1 my-xs mx-xs py-xs px-sm w-auto max-h-80px max-w-full relative z-1)',
 	'layer-components:(bg-white rounded-md border border-solid border-gray-dark transition-colors)',
 	'layer-components:(text-md overflow-hidden text-ellipsis text-inherit font-semibold)',
-	'layer-components:[[data-compact=true]_&]:(text-sm)',
+	'layer-components:[[data-compact]_&]:(text-sm)',
 );
 
 const CardContentRoot = withClassName(
 	'div',
 	'layer-components:(flex flex-col gap-1 px-2 py-1 bg-white/80 color-black rounded-sm mx-2 my-0.5 border border-solid border-gray-dark/50 text-xs relative z-1)',
-	'layer-variants:[[data-compact=true]_&]:(py-0 px-sm my-0 text-xs)',
-	'layer-variants:[&[data-unstyled=true]]:(p-0 [background:unset] border-none)',
+	'layer-variants:[[data-compact]_&]:(py-0 px-sm my-0 text-xs)',
+	'layer-variants:[&[data-unstyled]]:(p-0 [background:unset] border-none)',
 );
 export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
 	unstyled?: boolean;
 	ref?: Ref<HTMLDivElement>;
 }
 export function CardContent({ unstyled, ref, ...rest }: CardContentProps) {
-	return <CardContentRoot ref={ref} data-unstyled={unstyled} {...rest} />;
+	return (
+		<CardContentRoot
+			ref={ref}
+			data-unstyled={unstyled || undefined}
+			{...rest}
+		/>
+	);
 }
 
 export const CardImage = withClassName(

package/src/components/checkbox/Checkbox.tsx

@@ -1,11 +1,15 @@
 'use client';
 
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import {
+	Checkbox as BaseCheckbox,
+	CheckboxIndicatorProps,
+	CheckboxRootProps,
+} from '@base-ui/react/checkbox';
 import classNames from 'clsx';
 import { Ref } from 'react';
 import { Icon } from '../icon/Icon.js';
 
-export interface CheckboxProps extends CheckboxPrimitive.CheckboxProps {
+export interface CheckboxProps extends CheckboxRootProps {
 	/**
 	 * The checked visual state. Prominent mode means the checked version is visually
 	 * emphasized to the user. Faded means the checked version is visually de-emphasized.
@@ -22,14 +26,14 @@ export function CheckboxRoot({
 	...props
 }: CheckboxProps) {
 	return (
-		<CheckboxPrimitive.Root
+		<BaseCheckbox.Root
 			{...props}
 			className={classNames(
-				'layer-components:(w-28px h-28px flex-shrink-0 relative bg-white border border-default transition-all rounded-lg shadow-sm cursor-pointer)',
+				'layer-components:(block w-28px h-28px flex-shrink-0 relative bg-white border border-default transition-all rounded-lg shadow-sm cursor-pointer)',
 				'layer-components:focus-visible:(outline-off ring-4 ring-accent)',
 				checkedMode === 'faded'
-					? 'layer-components:[&[data-state=checked]]:(bg-main animate-checkbox-fade animate-forwards)'
-					: 'layer-components:[&[data-state=checked]]:(bg-main border-main-ink)',
+					? 'layer-components:data-[checked]:(bg-main animate-checkbox-fade animate-forwards)'
+					: 'layer-components:data-[checked]:(bg-main border-main-ink)',
 				'layer-components:[&:hover:not(:disabled)]:(bg-lighten-2 ring-bg ring-2)',
 				'layer-components:[&:active:not(:disabled)]:(bg-darken-1 ring-4)',
 				'layer-components:[&:disabled]:(bg-transparent border-gray-light shadow-none)',
@@ -43,14 +47,14 @@ export function CheckboxIndicator({
 	children,
 	className,
 	...props
-}: CheckboxPrimitive.CheckboxIndicatorProps) {
+}: CheckboxIndicatorProps) {
 	return (
-		<CheckboxPrimitive.Indicator
+		<BaseCheckbox.Indicator
 			className={classNames('absolute center color-black', className)}
 			{...props}
 		>
 			{children ?? <Icon name="check" size={16} />}
-		</CheckboxPrimitive.Indicator>
+		</BaseCheckbox.Indicator>
 	);
 }
 

package/src/components/chip/Chip.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import { paletteNames } from '../../uno/index.js';
 import { Box } from '../box/Box.js';
 import { Button } from '../button/Button.js';
 import { Chip } from './Chip.js';
@@ -6,7 +7,12 @@ import { Chip } from './Chip.js';
 const meta = {
 	title: 'Components/Chip',
 	component: Chip,
-	argTypes: {},
+	argTypes: {
+		color: {
+			control: 'select',
+			options: paletteNames,
+		},
+	},
 	args: {
 		children: 'Chip',
 	},
@@ -45,13 +51,14 @@ export const Colors: Story = {
 };
 
 export const AsButton: Story = {
-	render() {
+	render(args) {
 		return (
 			<Box gap items="center">
-				<Button asChild>
-					<Chip color="primary">Clickable Chip</Chip>
-				</Button>
-				<Chip>Non-clickable Chip</Chip>
+				<Button
+					{...args}
+					render={<Chip color="primary">Clickable Chip</Chip>}
+				/>
+				<Chip {...args}>Non-clickable Chip</Chip>
 			</Box>
 		);
 	},

package/src/components/chip/Chip.tsx

@@ -1,22 +1,21 @@
-import { Slot } from '@radix-ui/react-slot';
+import { UseRenderRenderProp } from '@base-ui/react/use-render';
 import classNames from 'clsx';
 import { HTMLAttributes, Ref } from 'react';
 import { PaletteName } from '../../uno/index.js';
+import { SlotDiv } from '../utility/SlotDiv.js';
 
 export interface ChipProps extends HTMLAttributes<HTMLElement> {
 	color?: PaletteName;
-	asChild?: boolean;
+	render?: UseRenderRenderProp;
 	ref?: Ref<any>;
 }
 
-export function Chip({ className, color, asChild, ref, ...rest }: ChipProps) {
-	const Component = asChild ? Slot : 'div';
+export function Chip({ className, color, ...rest }: ChipProps) {
 	return (
-		<Component
-			ref={ref}
+		<SlotDiv
 			className={classNames(
 				color && `palette-${color}`,
-				'layer-composed:(inline-flex flex-row gap-1 items-center whitespace-nowrap)',
+				'layer-composed:(inline-flex flex-row gap-1 items-center whitespace-nowrap font-normal)',
 				'layer-composed:(bg-main-wash color-contrast border-light border-solid border rounded-lg)',
 				'layer-composed:(px-sm py-xs text-xs)',
 				className,

package/src/components/collapsible/Collapsible.tsx

@@ -1,15 +1,25 @@
 'use client';
-import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import {
+	Collapsible as BaseCollapsible,
+	CollapsiblePanelProps,
+	CollapsibleRootProps,
+} from '@base-ui/react/collapsible';
 import { Ref } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 
-export const CollapsibleRoot = CollapsiblePrimitive.Root;
+export const CollapsibleRoot = BaseCollapsible.Root;
 const CollapsibleContentBase = withClassName(
-	CollapsiblePrimitive.Content,
-	'overflow-hidden',
-	'layer-components:[&[data-state=open]]:(animate-radix-collapsible-open-vertical animate-duration-300 animate-ease-springy) layer-components:[&[data-state=closed]]:(animate-radix-collapsible-close-vertical animate-duration-300 animate-ease-springy)',
-	'layer-variants:[&[data-horizontal][data-state=open]]:(animate-radix-collapsible-open-horizontal animate-duration-300 animate-ease-springy) layer-variants:[&[data-horizontal][data-state=closed]]:(animate-radix-collapsible-close-horizontal animate-duration-300 animate-ease-springy)',
-	'layer-variants:[&[data-both][data-state=open]]:(animate-radix-collapsible-open-both animate-duration-300 animate-ease-springy) layer-variants:[&[data-both][data-state=closed]]:(animate-radix-collapsible-close-both animate-duration-300 animate-ease-springy)',
+	BaseCollapsible.Panel,
+	'overflow-hidden transition-all',
+	'data-[vertical]:h-[--collapsible-panel-height] data-[horizontal]:w-[--collapsible-panel-width]',
+	'data-[both]:(h-[--collapsible-panel-height] w-[--collapsible-panel-width])',
+	'data-[starting-style]:data-[vertical]:(h-0)',
+	'data-[starting-style]:data-[both]:(h-0 w-0)',
+	'data-[ending-style]:data-[vertical]:(h-0)',
+	'data-[ending-style]:data-[both]:(h-0 w-0)',
+	'data-[starting-style]:data-[horizontal]:(w-0)',
+	'data-[ending-style]:data-[horizontal]:(w-0)',
+	'data-[hidden]:[&:not([hidden="until-found"])]:(hidden)',
 );
 // specifically removing className... it's causing problems?
 export const CollapsibleContent = function CollapsibleContent({
@@ -17,28 +27,29 @@ export const CollapsibleContent = function CollapsibleContent({
 	horizontal,
 	both,
 	...props
-}: CollapsiblePrimitive.CollapsibleContentProps & {
+}: CollapsiblePanelProps & {
 	horizontal?: boolean;
 	both?: boolean;
 	ref?: Ref<HTMLDivElement>;
 }) {
-	return (
-		<CollapsibleContentBase
-			data-horizontal={horizontal}
-			data-both={both}
-			{...props}
-			ref={ref}
-		/>
-	);
+	const extraProps: any = {};
+	if (horizontal) {
+		extraProps['data-horizontal'] = true;
+	} else if (both) {
+		extraProps['data-both'] = true;
+	} else {
+		extraProps['data-vertical'] = true;
+	}
+	return <CollapsibleContentBase {...extraProps} {...props} ref={ref} />;
 };
-export const CollapsibleTrigger = CollapsiblePrimitive.Trigger;
+export const CollapsibleTrigger = BaseCollapsible.Trigger;
 
 export const CollapsibleSimple = ({
 	horizontal,
 	both,
 	children,
 	...props
-}: CollapsiblePrimitive.CollapsibleProps & {
+}: CollapsibleRootProps & {
 	horizontal?: boolean;
 	both?: boolean;
 }) => (
@@ -49,8 +60,15 @@ export const CollapsibleSimple = ({
 	</CollapsibleRoot>
 );
 
+export const CollapsibleIcon = withClassName(
+	'span',
+	'layer-components:transition-transform',
+	'layer-components:[[data-panel-open]_&]:rotate-180',
+);
+
 export const Collapsible = Object.assign(CollapsibleRoot, {
 	Content: CollapsibleContent,
 	Trigger: CollapsibleTrigger,
 	Simple: CollapsibleSimple,
+	Icon: CollapsibleIcon,
 });

package/src/components/colorMode/ColorModeToggle.tsx

@@ -1,10 +1,13 @@
-import { ToggleGroupSingleProps } from '@radix-ui/react-toggle-group';
+import { ToggleGroupProps } from '@base-ui/react/toggle-group';
 import { setColorMode, useColorMode } from '../../colorMode.js';
 import { Icon } from '../icon/Icon.js';
 import { ToggleGroup } from '../toggleGroup/toggleGroup.js';
 
 export interface ColorModeToggleProps
-	extends Omit<ToggleGroupSingleProps, 'type'> {}
+	extends Omit<ToggleGroupProps, 'type' | 'onValueChange' | 'value'> {
+	value?: 'light' | 'dark' | 'system';
+	onValueChange?: (value: 'light' | 'dark' | 'system', event: any) => void;
+}
 
 export function ColorModeToggle({
 	value: userValue,
@@ -14,19 +17,17 @@ export function ColorModeToggle({
 }: ColorModeToggleProps) {
 	const colorMode = useColorMode();
 	const value = userValue ?? colorMode;
-	const onValueChange = (value: string) => {
-		if (userOnValueChange) {
-			userOnValueChange(value);
-		} else {
-			setColorMode(value as 'light' | 'dark' | 'system');
-		}
-	};
 
 	return (
 		<ToggleGroup
-			value={value}
-			onValueChange={onValueChange}
-			type="single"
+			value={[value]}
+			onValueChange={([value], ev) => {
+				if (userOnValueChange) {
+					userOnValueChange(value, ev);
+				} else {
+					setColorMode(value as 'light' | 'dark' | 'system');
+				}
+			}}
 			className={className}
 			{...rest}
 		>

package/src/components/colorPicker/ColorPicker.tsx

@@ -1,15 +1,10 @@
-import { SelectTriggerProps } from '@radix-ui/react-select';
+import { SelectTriggerProps } from '@base-ui/react/select';
 import classNames, { clsx } from 'clsx';
 import { ReactNode } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 import { PaletteName, paletteNames } from '../../uno/index.js';
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from '../select/Select.js';
+import { Button } from '../button/index.js';
+import { Select } from '../select/Select.js';
 
 export interface ColorPickerProps
 	extends Omit<SelectTriggerProps, 'value' | 'onChange' | 'color'> {
@@ -23,47 +18,53 @@ export function ColorPicker({
 	onChange,
 	showGray,
 	className,
+	nativeButton: _,
 	...rest
 }: ColorPickerProps) {
 	const resolvedValue =
 		value && paletteNames.includes(value) ? (value as PaletteName) : 'lemon';
 
 	return (
-		<Select value={resolvedValue} onValueChange={onChange}>
-			<SelectTrigger
+		<Select
+			value={resolvedValue}
+			onValueChange={(v) => {
+				onChange(v as PaletteName);
+			}}
+		>
+			<Select.Trigger
 				className={clsx('layer-composed:p-sm', className)}
-				{...rest}
+				{...(rest as any)}
 			>
-				<SelectValue />
-			</SelectTrigger>
-			<SelectContent className="z-[calc(var(--z-dialog)+1)]">
-				<SelectItem value="lemon">
+				<Button.Icon render={<ColorSwatch value={resolvedValue} />} />
+			</Select.Trigger>
+			<Select.Content className="z-[calc(var(--z-dialog)+1)]">
+				<Select.Item value="lemon">
 					<ColorSwatch value="lemon" />
 					<ItemLabel>Lemon</ItemLabel>
-				</SelectItem>
-				<SelectItem value="tomato">
+				</Select.Item>
+				<Select.Item value="tomato">
 					<ColorSwatch value="tomato" />
 					<ItemLabel>Tomato</ItemLabel>
-				</SelectItem>
-				<SelectItem value="leek">
+				</Select.Item>
+				<Select.Item value="leek">
 					<ColorSwatch value="leek" />
 					<ItemLabel>Leek</ItemLabel>
-				</SelectItem>
-				<SelectItem value="blueberry">
+				</Select.Item>
+				<Select.Item value="blueberry">
 					<ColorSwatch value="blueberry" />
 					<ItemLabel>Blueberry</ItemLabel>
-				</SelectItem>
-				<SelectItem value="eggplant">
+				</Select.Item>
+				<Select.Item value="eggplant">
 					<ColorSwatch value="eggplant" />
 					<ItemLabel>Eggplant</ItemLabel>
-				</SelectItem>
+				</Select.Item>
 				{showGray && (
-					<SelectItem value="gray">
+					<Select.Item value="gray">
 						<ColorSwatch value="gray" />
 						<ItemLabel>Salt</ItemLabel>
-					</SelectItem>
+					</Select.Item>
 				)}
-			</SelectContent>
+			</Select.Content>
 		</Select>
 	);
 }
@@ -73,16 +74,21 @@ const ItemLabel = withClassName('span', 'sr-only');
 export function ColorSwatch({
 	value,
 	children,
+	className,
+	...rest
 }: {
 	value: PaletteName;
 	children?: ReactNode;
+	className?: string;
 }) {
 	return (
 		<div
 			className={classNames(
 				'bg-main w-16px h-16px rounded-sm',
 				`palette-${value ?? 'lemon'}`,
+				className,
 			)}
+			{...rest}
 		>
 			{children}
 		</div>

package/src/components/contextMenu/contextMenu.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../button/index.js';
+import { ContextMenu } from './contextMenu.js';
+
+const meta = {
+	title: 'Components/ContextMenu',
+	component: ContextMenu,
+	argTypes: {},
+	parameters: {
+		controls: { expanded: true },
+	},
+} satisfies Meta<typeof ContextMenu>;
+
+export default meta;
+
+type Story = StoryObj<typeof ContextMenu>;
+
+export const Default: Story = {
+	render(args) {
+		return (
+			<ContextMenu {...args}>
+				<ContextMenu.Trigger>
+					<Button>Right Click Me</Button>
+				</ContextMenu.Trigger>
+				<ContextMenu.Content>
+					<ContextMenu.Item onSelect={() => alert('Item 1 selected')}>
+						Item 1
+					</ContextMenu.Item>
+					<ContextMenu.Item onSelect={() => alert('Item 2 selected')}>
+						Item 2
+					</ContextMenu.Item>
+					<ContextMenu.Item onSelect={() => alert('Item 3 selected')}>
+						Item 3
+					</ContextMenu.Item>
+				</ContextMenu.Content>
+			</ContextMenu>
+		);
+	},
+};

package/src/components/contextMenu/contextMenu.tsx

@@ -1,62 +1,63 @@
-import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import {
+	ContextMenu as BaseContextMenu,
+	ContextMenuPopupProps,
+} from '@base-ui/react/context-menu';
 import classNames from 'clsx';
-import { ComponentPropsWithoutRef } from 'react';
 import { withClassName } from '../../hooks/withClassName.js';
 import { GroupScaleReset } from '../../systems/GroupScale.js';
 
-export const ContextMenuRoot = ContextMenuPrimitive.Root;
+export const ContextMenuRoot = BaseContextMenu.Root;
 
 export const ContextMenuContent = function Content({
 	ref,
 	className,
 	onClick,
 	...props
-}: ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> & {
+}: ContextMenuPopupProps & {
 	ref?: React.Ref<HTMLDivElement>;
 }) {
 	return (
-		<ContextMenuPrimitive.Portal>
-			<GroupScaleReset>
-				<ContextMenuPrimitive.Content
-					className={classNames(
-						'layer-components:(min-w-120px bg-white rounded-md overflow-hidden border-gray-dark border shadow-md z-menu)',
-						'layer-components:transform-origin-[var(--radix-context-menu-transform-origin)]',
-						'layer-components:[&[data-state=open]]:animate-popover-in',
-						'layer-components:[&[data-state=closed]]:animate-popover-out',
-						'layer-components:(max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto overflow-unstable)',
-						'important:motion-reduce:animate-none',
-						className,
-					)}
-					onClick={(ev) => {
-						ev.stopPropagation();
-						onClick?.(ev);
-					}}
-					ref={ref}
-					alignOffset={-10}
-					{...props}
-				/>
-			</GroupScaleReset>
-		</ContextMenuPrimitive.Portal>
+		<BaseContextMenu.Portal>
+			<BaseContextMenu.Positioner alignOffset={-10}>
+				<GroupScaleReset>
+					<BaseContextMenu.Popup
+						className={classNames(
+							'layer-components:(min-w-120px bg-white rounded-md overflow-hidden border-gray-dark border shadow-md z-menu)',
+							'layer-components:transform-origin-[var(--transform-origin)]',
+							'layer-components:data-[starting-style]:(opacity-0 scale-95)',
+							'layer-components:data-[ending-style]:(opacity-0 scale-95)',
+							'layer-components:(overflow-y-auto overflow-unstable)',
+							'important:motion-reduce:animate-none',
+							'layer-components:(max-h-[--available-height] max-w-[--available-width])',
+							className,
+						)}
+						onClick={(ev) => {
+							ev.stopPropagation();
+							onClick?.(ev);
+						}}
+						ref={ref}
+						{...props}
+					/>
+				</GroupScaleReset>
+			</BaseContextMenu.Positioner>
+		</BaseContextMenu.Portal>
 	);
 };
 
 export const ContextMenuArrow = withClassName(
-	ContextMenuPrimitive.Arrow,
+	BaseContextMenu.Arrow,
 	'layer-components:arrow',
 );
 
 export const ContextMenuItem = withClassName(
-	ContextMenuPrimitive.Item,
+	BaseContextMenu.Item,
 	'palette-gray',
 	'layer-components:(flex items-center overflow-hidden min-h-touch-large py-sm px-2 relative pl-25px select-none outline-none cursor-pointer)',
 	'layer-components:hover:bg-main-light layer-components:[&[data-highlighted=true]]:bg-main-light',
 	'layer-components:[&[data-disabled=true]]:(opacity-50 cursor-default) layer-components:disabled:(opacity-50 cursor-default))',
 );
 
-export const ContextMenuTrigger = withClassName(
-	ContextMenuPrimitive.Trigger,
-	'',
-);
+export const ContextMenuTrigger = withClassName(BaseContextMenu.Trigger, '');
 
 export const ContextMenu = Object.assign(ContextMenuRoot, {
 	Content: ContextMenuContent,