@dxos/react-ui 0.8.4-main.ef1bc66f44 → 0.8.4-main.effb148878

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.ef1bc66f44",
+  "version": "0.8.4-main.effb148878",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,32 +8,34 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts"
     },
     "./testing": {
+      "source": "./src/testing/index.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs",
-      "source": "./src/testing/index.ts",
       "types": "./dist/types/src/testing/index.d.ts"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "testing": [
-        "./dist/types/src/testing/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -42,6 +44,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
+    "@internationalized/date": "^3.12.1",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
     "@radix-ui/react-avatar": "1.1.3",
@@ -73,41 +76,47 @@
     "@radix-ui/react-use-controllable-state": "1.1.0",
     "@radix-ui/react-visually-hidden": "1.1.2",
     "aria-hidden": "^1.2.4",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
+    "dompurify": "^3.3.1",
+    "error-stack-parser": "^2.1.4",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
+    "react-aria-components": "^1.17.0",
+    "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.ef1bc66f44",
-    "@dxos/invariant": "0.8.4-main.ef1bc66f44",
-    "@dxos/async": "0.8.4-main.ef1bc66f44",
-    "@dxos/lit-ui": "0.8.4-main.ef1bc66f44",
-    "@dxos/react-hooks": "0.8.4-main.ef1bc66f44",
-    "@dxos/log": "0.8.4-main.ef1bc66f44",
-    "@dxos/react-input": "0.8.4-main.ef1bc66f44",
-    "@dxos/ui-types": "0.8.4-main.ef1bc66f44",
-    "@dxos/react-list": "0.8.4-main.ef1bc66f44",
-    "@dxos/util": "0.8.4-main.ef1bc66f44"
+    "@dxos/debug": "0.8.4-main.effb148878",
+    "@dxos/invariant": "0.8.4-main.effb148878",
+    "@dxos/async": "0.8.4-main.effb148878",
+    "@dxos/log": "0.8.4-main.effb148878",
+    "@dxos/lit-ui": "0.8.4-main.effb148878",
+    "@dxos/react-error-boundary": "0.8.4-main.effb148878",
+    "@dxos/react-hooks": "0.8.4-main.effb148878",
+    "@dxos/react-list": "0.8.4-main.effb148878",
+    "@dxos/react-input": "0.8.4-main.effb148878",
+    "@dxos/util": "0.8.4-main.effb148878",
+    "@dxos/ui-types": "0.8.4-main.effb148878"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
     "@phosphor-icons/react": "2.1.10",
+    "@tanstack/react-virtual": "^3.13.18",
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "tabster": "^8.5.5",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.ef1bc66f44",
-    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44",
-    "@dxos/util": "0.8.4-main.ef1bc66f44"
+    "vite": "^8.0.14",
+    "@dxos/ui-theme": "0.8.4-main.effb148878",
+    "@dxos/util": "0.8.4-main.effb148878",
+    "@dxos/random": "0.8.4-main.effb148878"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44"
+    "@dxos/ui-theme": "0.8.4-main.effb148878"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,15 +5,13 @@
 import { type Meta } from '@storybook/react-vite';
 import React, { type PropsWithChildren } from 'react';
 
-import { type HuePalette } from '@dxos/ui-theme';
-import { type Size } from '@dxos/ui-types';
+import { type ChromaticPalette, type Size } from '@dxos/ui-types';
 import { hexToFallback } from '@dxos/util';
 
 import { withTheme } from '../../testing';
-
 import { Avatar, type AvatarAnimation, type AvatarStatus, type AvatarVariant } from './Avatar';
 
-type StoryProps = PropsWithChildren<{
+type DefaultStoryProps = PropsWithChildren<{
   id?: string;
   imgSrc?: string;
   fallbackText?: string;
@@ -23,10 +21,10 @@ type StoryProps = PropsWithChildren<{
   variant?: AvatarVariant;
   animation?: AvatarAnimation;
   size?: Size;
-  hue?: HuePalette;
+  hue?: ChromaticPalette;
 }>;
 
-const DefaultStory = (props: StoryProps) => {
+const DefaultStory = (props: DefaultStoryProps) => {
   const {
     id = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     status,
@@ -65,7 +63,7 @@ const meta = {
 export default meta;
 
 const sampleImage =
-  'https://png.pngtree.com/thumb_back/fh260/background/20230614/pngtree-the-photo-of-a-woman-with-red-sunglasses-is-surrounded-by-image_2931163.jpg';
+  'https://png.pngtree.com/thumb_back/fh260/background/20230614/pngtree-the-photo-of-a-woman-with-red-sunglasses-w-surrounded-by-image_2931163.jpg';
 
 const brokenImage = 'https://png.pngtree.com/potato_squirrel.png';
 

package/src/components/Avatars/Avatar.theme.ts

@@ -0,0 +1,93 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, getSize, getHeight } from '@dxos/ui-theme';
+import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
+
+export type AvatarStyleProps = Partial<{
+  size: Size;
+  srOnly: boolean;
+  status: 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
+  animation: 'pulse' | 'none';
+  variant: 'circle' | 'square';
+  inGroup: boolean;
+}>;
+
+const root: ComponentFunction<AvatarStyleProps> = ({ size = 10, inGroup }, ...etc) =>
+  mx(
+    'relative inline-flex shrink-0',
+    getSize(size),
+    inGroup && (size === 'px' || size <= 3 ? '-mr-1' : '-mr-2'),
+    ...etc,
+  );
+
+const label: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) => mx(srOnly && 'sr-only', ...etc);
+
+const description: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
+  mx('text-description', srOnly && 'sr-only', ...etc);
+
+const frame: ComponentFunction<AvatarStyleProps> = ({ variant }, ...etc) =>
+  mx('h-full w-full bg-(--surface-bg)', variant === 'circle' ? 'rounded-full' : 'rounded-sm', ...etc);
+
+const statusIcon: ComponentFunction<AvatarStyleProps> = ({ status, size = 3 }, ...etc) =>
+  mx(
+    'absolute bottom-0 end-0',
+    getSize(size),
+    status === 'inactive'
+      ? 'text-amber-400 dark:text-amber-300'
+      : status === 'active'
+        ? 'text-emerald-400 dark:text-emerald-300'
+        : 'text-neutral-400 dark:text-neutral-300',
+    ...etc,
+  );
+
+const ring: ComponentFunction<AvatarStyleProps> = ({ status, variant, animation }, ...etc) =>
+  mx(
+    'absolute inset-0 border-2',
+    variant === 'circle' ? 'rounded-full' : 'rounded-sm',
+    status === 'current'
+      ? 'border-primary-400 dark:border-primary-500'
+      : status === 'active'
+        ? 'border-emerald-400 dark:border-emerald-400'
+        : status === 'error'
+          ? 'border-rose-400 dark:border-rose-500'
+          : status === 'warning'
+            ? 'border-amber-400 dark:border-amber-500'
+            : status === 'inactive'
+              ? 'border-separator'
+              : status === 'internal'
+                ? 'border-fuchsia-600'
+                : 'border-[color:var(--surface-bg)]',
+    animation === 'pulse' ? 'animate-halo-pulse' : '',
+    ...etc,
+  );
+
+const fallbackText: ComponentFunction<AvatarStyleProps> = (_props, ...etc) => mx('fill-white', ...etc);
+
+const group: ComponentFunction<AvatarStyleProps> = (_props, ...etc) => mx('inline-flex items-center', ...etc);
+
+const groupLabel: ComponentFunction<AvatarStyleProps> = ({ size, srOnly }, ...etc) =>
+  mx(
+    srOnly
+      ? 'sr-only'
+      : 'rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center',
+    size && getHeight(size),
+    ...etc,
+  );
+
+const groupDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
+  mx(srOnly ? 'sr-only' : 'text-description', ...etc);
+
+export const avatarTheme: Theme<AvatarStyleProps> = {
+  root,
+  label,
+  description,
+  statusIcon,
+  frame,
+  ring,
+  fallbackText,
+  group,
+  groupLabel,
+  groupDescription,
+};

package/src/components/Avatars/Avatar.tsx

@@ -2,13 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos/lit-ui/dx-avatar.pcss';
-
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentProps, type ComponentPropsWithRef, type PropsWithChildren, forwardRef } from 'react';
 
+import '@dxos/lit-ui/dx-avatar.pcss';
 import {
   type AvatarAnimation,
   type AvatarStatus,
@@ -64,17 +63,10 @@ type AvatarLabelProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primit
 
 const AvatarLabel = forwardRef<HTMLSpanElement, AvatarLabelProps>(
   ({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : Primitive.span;
+    const Comp = asChild ? Slot : Primitive.span;
     const { tx } = useThemeContext();
     const { labelId } = useAvatarContext('AvatarLabel');
-    return (
-      <Root
-        {...props}
-        id={labelId}
-        ref={forwardedRef}
-        className={tx('avatar.label', 'avatar__label', { srOnly }, classNames)}
-      />
-    );
+    return <Comp {...props} id={labelId} ref={forwardedRef} className={tx('avatar.label', { srOnly }, classNames)} />;
   },
 );
 
@@ -85,15 +77,15 @@ type AvatarDescriptionProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof
 
 const AvatarDescription = forwardRef<HTMLSpanElement, AvatarDescriptionProps>(
   ({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
-    const Root = asChild ? Slot : Primitive.span;
+    const Comp = asChild ? Slot : Primitive.span;
     const { tx } = useThemeContext();
     const { descriptionId } = useAvatarContext('AvatarDescription');
     return (
-      <Root
+      <Comp
         {...props}
         id={descriptionId}
         ref={forwardedRef}
-        className={tx('avatar.description', 'avatar__description', { srOnly }, classNames)}
+        className={tx('avatar.description', { srOnly }, classNames)}
       />
     );
   },

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -9,7 +9,6 @@ import { useId } from '@dxos/react-hooks';
 import { toEmoji } from '@dxos/util';
 
 import { withTheme } from '../../testing';
-
 import { Avatar } from './Avatar';
 
 const hues = ['lime', 'teal', 'purple', 'pink'];

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -7,7 +7,6 @@ import React from 'react';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { Breadcrumb, type BreadcrumbRootProps } from './Breadcrumb';
 
 const DefaultStory = (props: BreadcrumbRootProps) => {
@@ -16,7 +15,7 @@ const DefaultStory = (props: BreadcrumbRootProps) => {
       <Breadcrumb.List>
         <Breadcrumb.ListItem>
           <Breadcrumb.Link asChild>
-            <Button variant='ghost' density='fine' classNames='pli-0 text-baseText font-normal'>
+            <Button variant='ghost' classNames='px-0 text-base-foreground font-normal'>
               Grocery
             </Button>
           </Breadcrumb.Link>

package/src/components/Breadcrumb/Breadcrumb.theme.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type breadcrumbStyleProps = {};
+
+const root: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('shrink-0 flex items-center', ...etc);
+
+const list: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+
+const listItem: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+
+const current: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx(...etc);
+
+const separator: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('opacity-50', ...etc);
+
+export const breadcrumbTheme: Theme<breadcrumbStyleProps> = {
+  root,
+  list,
+  listItem,
+  current,
+  separator,
+};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -19,91 +19,77 @@ type BreadcrumbRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitiv
 const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    return (
-      <Root
-        role='navigation'
-        {...props}
-        className={tx('breadcrumb.root', 'breadcrumb', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    const Comp = asChild ? Slot : Primitive.div;
+    return <Comp role='navigation' {...props} className={tx('breadcrumb.root', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
+BreadcrumbRoot.displayName = 'Breadcrumb.Root';
+
 type BreadcrumbListProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.ol>> & { asChild?: boolean };
 
 const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.ol;
-    return (
-      <Root
-        role='list'
-        {...props}
-        className={tx('breadcrumb.list', 'breadcrumb__list', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    const Comp = asChild ? Slot : Primitive.ol;
+    return <Comp role='list' {...props} className={tx('breadcrumb.list', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
+BreadcrumbList.displayName = 'Breadcrumb.List';
+
 type BreadcrumbListItemProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.li>> & { asChild?: boolean };
 
 const BreadcrumbListItem = forwardRef<HTMLLIElement, BreadcrumbListItemProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.li;
-    return (
-      <Root
-        role='listitem'
-        {...props}
-        className={tx('breadcrumb.listItem', 'breadcrumb__list__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
+    const Comp = asChild ? Slot : Primitive.li;
+    return <Comp role='listitem' {...props} className={tx('breadcrumb.listItem', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
+BreadcrumbListItem.displayName = 'Breadcrumb.ListItem';
+
 type BreadcrumbLinkProps = LinkProps;
 
 const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(({ asChild, ...props }, forwardedRef) => {
-  const Root = asChild ? Slot : Link;
-  return <Root {...props} ref={forwardedRef} />;
+  const Comp = asChild ? Slot : Link;
+  return <Comp {...props} ref={forwardedRef} />;
 });
 
+BreadcrumbLink.displayName = 'Breadcrumb.Link';
+
 type BreadcrumbCurrentProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & { asChild?: boolean };
 
 const BreadcrumbCurrent = forwardRef<HTMLHeadingElement, BreadcrumbCurrentProps>(
   ({ asChild, classNames, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : 'h1';
+    const Comp = asChild ? Slot : 'h1';
     return (
-      <Root
-        {...props}
-        aria-current='page'
-        className={tx('breadcrumb.current', 'breadcrumb__item__heading--current', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <Comp {...props} aria-current='page' className={tx('breadcrumb.current', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
 
+BreadcrumbCurrent.displayName = 'Breadcrumb.Current';
+
 type BreadcrumbSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.span>>;
 
-const BreadcrumbSeparator = ({ children, classNames, ...props }: BreadcrumbSeparatorProps) => {
+function BreadcrumbSeparator({ children, classNames, ...props }: BreadcrumbSeparatorProps) {
   const { tx } = useThemeContext();
   return (
     <Primitive.span
       role='separator'
       aria-hidden='true'
       {...props}
-      className={tx('breadcrumb.separator', 'breadcrumb__separator', {}, classNames)}
+      className={tx('breadcrumb.separator', {}, classNames)}
     >
       {children ?? <Icon icon='ph--dot--bold' />}
     </Primitive.span>
   );
-};
+}
+
+BreadcrumbSeparator.displayName = 'Breadcrumb.Separator';
 
 export const Breadcrumb = {
   Root: BreadcrumbRoot,

package/src/components/Button/Button.stories.tsx

@@ -8,12 +8,11 @@ import React from 'react';
 import { withTheme } from '../../testing';
 import { withLayoutVariants } from '../../testing';
 import { Icon } from '../Icon';
-
 import { Button, ButtonGroup, type ButtonProps } from './Button';
 
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
-    <div>
+    <div className='flex items-center gap-2'>
       <Button {...args}>{children}</Button>
       <Button {...args} disabled>
         {children}

package/src/components/Button/Button.theme.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import type { ComponentFunction, Density, Elevation, Theme } from '@dxos/ui-types';
+
+export type ButtonStyleProps = Partial<{
+  inGroup?: boolean;
+  textWrap?: boolean;
+  density: Density;
+  elevation: Elevation;
+  disabled: boolean;
+  variant: 'default' | 'primary' | 'ghost' | 'outline';
+}>;
+
+const root: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
+  return mx('dx-button dx-focus-ring group gap-1 [&_span]:truncate', ...etc);
+};
+
+const group: ComponentFunction<{ elevation?: Elevation }> = (_props, ...etc) => {
+  return mx(
+    'inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative',
+    ...etc,
+  );
+};
+
+export const buttonTheme: Theme<ButtonStyleProps> = {
+  root,
+  group,
+};

package/src/components/Button/Button.tsx

@@ -12,12 +12,12 @@ import { type Density, type Elevation } from '@dxos/ui-types';
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
-interface ButtonProps extends ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> {
+type ButtonProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> & {
   variant?: 'default' | 'primary' | 'outline' | 'ghost' | 'destructive';
   density?: Density;
   elevation?: Elevation;
   asChild?: boolean;
-}
+};
 
 type ButtonGroupContextValue = { inGroup?: boolean };
 
@@ -31,24 +31,16 @@ const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupCo
 const Button = memo(
   forwardRef<HTMLButtonElement, ButtonProps>(
     (
-      {
-        classNames,
-        children,
-        density: propsDensity,
-        elevation: propsElevation,
-        variant = 'default',
-        asChild,
-        ...props
-      },
+      { classNames, children, density: densityProp, elevation: elevationProp, variant = 'default', asChild, ...props },
       ref,
     ) => {
       const { inGroup } = useButtonGroupContext(BUTTON_NAME);
       const { tx } = useThemeContext();
-      const elevation = useElevationContext(propsElevation);
-      const density = useDensityContext(propsDensity);
-      const Root = asChild ? Slot : Primitive.button;
+      const elevation = useElevationContext(elevationProp);
+      const density = useDensityContext(densityProp);
+      const Comp = asChild ? Slot : Primitive.button;
       return (
-        <Root
+        <Comp
           ref={ref}
           {...props}
           data-variant={variant}
@@ -56,7 +48,6 @@ const Button = memo(
           data-props={inGroup ? 'grouped' : ''}
           className={tx(
             'button.root',
-            'button',
             {
               variant,
               inGroup,
@@ -69,7 +60,7 @@ const Button = memo(
           {...(props.disabled && { disabled: true })}
         >
           {children}
-        </Root>
+        </Comp>
       );
     },
   ),
@@ -86,16 +77,11 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
   ({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const elevation = useElevationContext(propsElevation);
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root
-        role='none'
-        {...props}
-        className={tx('button.group', 'button-group', { elevation }, classNames)}
-        ref={forwardedRef}
-      >
+      <Comp role='none' {...props} className={tx('button.group', { elevation }, classNames)} ref={forwardedRef}>
         <ButtonGroupProvider inGroup>{children}</ButtonGroupProvider>
-      </Root>
+      </Comp>
     );
   },
 );