@dxos/react-ui 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.21d9917",
+  "version": "0.8.4-main.2244d791bb",
   "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",
@@ -14,16 +14,16 @@
   "type": "module",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
-      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/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",
-      "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs"
+      "node": "./dist/lib/node-esm/testing/index.mjs",
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -40,7 +40,7 @@
   ],
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@effect-atom/atom-react": "^0.4.6",
+    "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
@@ -78,36 +78,37 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.21d9917",
-    "@dxos/async": "0.8.4-main.21d9917",
-    "@dxos/invariant": "0.8.4-main.21d9917",
-    "@dxos/react-hooks": "0.8.4-main.21d9917",
-    "@dxos/log": "0.8.4-main.21d9917",
-    "@dxos/lit-ui": "0.8.4-main.21d9917",
-    "@dxos/ui-types": "0.8.4-main.21d9917",
-    "@dxos/react-input": "0.8.4-main.21d9917",
-    "@dxos/react-list": "0.8.4-main.21d9917",
-    "@dxos/util": "0.8.4-main.21d9917"
+    "@dxos/async": "0.8.4-main.2244d791bb",
+    "@dxos/debug": "0.8.4-main.2244d791bb",
+    "@dxos/invariant": "0.8.4-main.2244d791bb",
+    "@dxos/lit-ui": "0.8.4-main.2244d791bb",
+    "@dxos/log": "0.8.4-main.2244d791bb",
+    "@dxos/react-hooks": "0.8.4-main.2244d791bb",
+    "@dxos/react-list": "0.8.4-main.2244d791bb",
+    "@dxos/react-input": "0.8.4-main.2244d791bb",
+    "@dxos/ui-types": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb"
   },
   "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.21d9917",
-    "@dxos/ui-theme": "0.8.4-main.21d9917",
-    "@dxos/util": "0.8.4-main.21d9917"
+    "@dxos/random": "0.8.4-main.2244d791bb",
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb",
+    "@dxos/util": "0.8.4-main.2244d791bb"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.21d9917"
+    "@dxos/ui-theme": "0.8.4-main.2244d791bb"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AnchoredOverflow/AnchoredOverflow.tsx

@@ -18,12 +18,7 @@ const AnchoredOverflowRoot = forwardRef<HTMLDivElement, AnchoredOverflowRootProp
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
     return (
-      <Root
-        role='none'
-        {...props}
-        className={tx('anchoredOverflow.root', 'overflow-anchored', {}, classNames)}
-        ref={forwardedRef}
-      >
+      <Root role='none' {...props} className={tx('anchoredOverflow.root', {}, classNames)} ref={forwardedRef}>
         {children}
       </Root>
     );
@@ -39,18 +34,21 @@ const AnchoredOverflowAnchor = forwardRef<HTMLDivElement, AnchoredOverflowAnchor
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : Primitive.div;
     return (
-      <Root
-        role='none'
-        {...props}
-        className={tx('anchoredOverflow.anchor', 'overflow-anchor', {}, classNames)}
-        ref={forwardedRef}
-      >
+      <Root role='none' {...props} className={tx('anchoredOverflow.anchor', {}, classNames)} ref={forwardedRef}>
         {children}
       </Root>
     );
   },
 );
 
+/**
+ * This component leverages the CSS https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor property to prevent unwanted scroll jumps when content is dynamically
+ * added above the viewport. This is particularly useful for:
+ * - Chat applications where new messages are prepended to the list.
+ * - Notification feeds where new items appear at the top.
+ * - Any scenario where content is inserted at the start of a scrollable container.
+ */
+// TODO(burdon): Move into container?
 export const AnchoredOverflow = {
   Root: AnchoredOverflowRoot,
   Anchor: AnchoredOverflowAnchor,

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

@@ -57,9 +57,9 @@ const DefaultStory = (props: StoryProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Avatar',
+  title: 'ui/react-ui-core/components/Avatar',
   component: Avatar.Root,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof Avatar.Root>;
 
 export default meta;

package/src/components/Avatars/Avatar.tsx

@@ -67,14 +67,7 @@ const AvatarLabel = forwardRef<HTMLSpanElement, AvatarLabelProps>(
     const Root = 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 <Root {...props} id={labelId} ref={forwardedRef} className={tx('avatar.label', { srOnly }, classNames)} />;
   },
 );
 
@@ -93,7 +86,7 @@ const AvatarDescription = forwardRef<HTMLSpanElement, AvatarDescriptionProps>(
         {...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

@@ -38,9 +38,9 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/AvatarGroup',
+  title: 'ui/react-ui-core/components/AvatarGroup',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

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

@@ -39,10 +39,10 @@ const DefaultStory = (props: BreadcrumbRootProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Breadcrumb',
+  title: 'ui/react-ui-core/components/Breadcrumb',
   component: Breadcrumb.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -20,14 +20,7 @@ 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}
-      />
-    );
+    return <Root role='navigation' {...props} className={tx('breadcrumb.root', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -37,14 +30,7 @@ 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}
-      />
-    );
+    return <Root role='list' {...props} className={tx('breadcrumb.list', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -54,14 +40,7 @@ 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}
-      />
-    );
+    return <Root role='listitem' {...props} className={tx('breadcrumb.listItem', {}, classNames)} ref={forwardedRef} />;
   },
 );
 
@@ -79,12 +58,7 @@ const BreadcrumbCurrent = forwardRef<HTMLHeadingElement, BreadcrumbCurrentProps>
     const { tx } = useThemeContext();
     const Root = asChild ? Slot : 'h1';
     return (
-      <Root
-        {...props}
-        aria-current='page'
-        className={tx('breadcrumb.current', 'breadcrumb__item__heading--current', {}, classNames)}
-        ref={forwardedRef}
-      />
+      <Root {...props} aria-current='page' className={tx('breadcrumb.current', {}, classNames)} ref={forwardedRef} />
     );
   },
 );
@@ -98,7 +72,7 @@ const BreadcrumbSeparator = ({ children, classNames, ...props }: BreadcrumbSepar
       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>

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

@@ -13,7 +13,7 @@ import { Button, ButtonGroup, type ButtonProps } from './Button';
 
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
-    <div>
+    <div className='flex items-center gap-2 p-1'>
       <Button {...args}>{children}</Button>
       <Button {...args} disabled>
         {children}
@@ -33,10 +33,10 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Button',
+  title: 'ui/react-ui-core/components/Button',
   component: Button,
   render: DefaultStory,
-  decorators: [withTheme, withLayoutVariants()],
+  decorators: [withTheme(), withLayoutVariants()],
 } satisfies Meta<typeof Button>;
 
 export default meta;

package/src/components/Button/Button.tsx

@@ -56,7 +56,6 @@ const Button = memo(
           data-props={inGroup ? 'grouped' : ''}
           className={tx(
             'button.root',
-            'button',
             {
               variant,
               inGroup,
@@ -88,12 +87,7 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
     const elevation = useElevationContext(propsElevation);
     const Root = asChild ? Slot : Primitive.div;
     return (
-      <Root
-        role='none'
-        {...props}
-        className={tx('button.group', 'button-group', { elevation }, classNames)}
-        ref={forwardedRef}
-      >
+      <Root role='none' {...props} className={tx('button.group', { elevation }, classNames)} ref={forwardedRef}>
         <ButtonGroupProvider inGroup>{children}</ButtonGroupProvider>
       </Root>
     );

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

@@ -24,10 +24,10 @@ const DefaultStory = (props: IconButtonProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/IconButton',
+  title: 'ui/react-ui-core/components/IconButton',
   component: IconButton,
   render: DefaultStory as any,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof IconButton>;
 
 export default meta;

package/src/components/Button/IconButton.tsx

@@ -52,7 +52,7 @@ const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', 'iconButton', { iconOnly }, classNames)} ref={forwardedRef}>
+      <Button {...props} classNames={tx('iconButton.root', { iconOnly }, classNames)} ref={forwardedRef}>
         {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
         {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}

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

@@ -19,10 +19,10 @@ const DefaultStory = (props: ToggleProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Toggle',
+  title: 'ui/react-ui-core/components/Toggle',
   component: Toggle,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

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

@@ -25,10 +25,10 @@ const DefaultStory = (props: ToggleGroupProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/ToggleGroup',
+  title: 'ui/react-ui-core/components/ToggleGroup',
   component: ToggleGroup,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof ToggleGroup>;
 
 export default meta;

package/src/components/Dialog/AlertDialog.stories.tsx

@@ -7,7 +7,6 @@ import React from 'react';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-import { Toolbar } from '../Toolbar';
 
 import { AlertDialog } from './AlertDialog';
 
@@ -31,15 +30,15 @@ const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, ac
           <AlertDialog.Title>{title}</AlertDialog.Title>
           <AlertDialog.Description>{description}</AlertDialog.Description>
           <p className='mbs-2 mbe-8'>{body}</p>
-          <Toolbar.Root>
+          <AlertDialog.ActionBar>
             <div className='grow' />
             <AlertDialog.Cancel asChild>
-              <Toolbar.Button>{cancelTrigger}</Toolbar.Button>
+              <Button>{cancelTrigger}</Button>
             </AlertDialog.Cancel>
             <AlertDialog.Action asChild>
-              <Toolbar.Button variant='primary'>{actionTrigger}</Toolbar.Button>
+              <Button variant='primary'>{actionTrigger}</Button>
             </AlertDialog.Action>
-          </Toolbar.Root>
+          </AlertDialog.ActionBar>
         </AlertDialog.Content>
       </AlertDialog.Overlay>
     </AlertDialog.Root>
@@ -47,10 +46,10 @@ const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, ac
 };
 
 const meta = {
-  title: 'ui/react-ui-core/AlertDialog',
+  title: 'ui/react-ui-core/components/AlertDialog',
   component: AlertDialog.Root as any,
   render: DefaultStory as any,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Dialog/AlertDialog.tsx

@@ -23,12 +23,21 @@ import {
   type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
 } from '@radix-ui/react-alert-dialog';
 import { createContext } from '@radix-ui/react-context';
-import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
+import React, {
+  type ForwardRefExoticComponent,
+  type FunctionComponent,
+  type PropsWithChildren,
+  forwardRef,
+} from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { ElevationProvider } from '../ElevationProvider';
 
+//
+// Root
+//
+
 type AlertDialogRootProps = AlertDialogRootPrimitiveProps;
 
 const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
@@ -37,22 +46,42 @@ const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
   </ElevationProvider>
 );
 
+//
+// Trigger
+//
+
 type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
 
 const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogTriggerPrimitive;
 
+//
+// Portal
+//
+
 type AlertDialogPortalProps = AlertDialogPortalPrimitiveProps;
 
 const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPortalPrimitive;
 
+//
+// Cancel
+//
+
 type AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;
 
 const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogCancelPrimitive;
 
+//
+// Action
+//
+
 type AlertDialogActionProps = AlertDialogActionPrimitiveProps;
 
 const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogActionPrimitive;
 
+//
+// Title
+//
+
 type AlertDialogTitleProps = ThemedClassName<AlertDialogTitlePrimitiveProps> & { srOnly?: boolean };
 
 const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
@@ -61,14 +90,14 @@ const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwa
 >(({ classNames, srOnly, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <AlertDialogTitlePrimitive
-      {...props}
-      className={tx('dialog.title', 'dialog--alert__title', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
+    <AlertDialogTitlePrimitive {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
   );
 });
 
+//
+// Description
+//
+
 type AlertDialogDescriptionProps = ThemedClassName<AlertDialogDescriptionPrimitiveProps> & { srOnly?: boolean };
 
 const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
@@ -79,15 +108,22 @@ const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> =
   return (
     <AlertDialogDescriptionPrimitive
       {...props}
-      className={tx('dialog.description', 'dialog--alert__description', { srOnly }, classNames)}
+      className={tx('dialog.description', { srOnly }, classNames)}
       ref={forwardedRef}
     />
   );
 });
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
+
+//
+// Context
+//
+
 const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialogOverlay';
 const ALERT_DIALOG_CONTENT_NAME = 'AlertDialogContent';
+const ALERT_DIALOG_ACTIONBAR_NAME = 'AlertDialogActionBar';
+
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
   ALERT_DIALOG_OVERLAY_NAME,
   {
@@ -95,6 +131,10 @@ const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLa
   },
 );
 
+//
+// Overlay
+//
+
 type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & {
   blockAlign?: 'center' | 'start' | 'end';
 };
@@ -109,7 +149,6 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
       {...props}
       className={tx(
         'dialog.overlay',
-        'dialog--alert__overlay',
         {},
         classNames,
         'data-[block-align=start]:justify-center',
@@ -126,6 +165,10 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
 
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
 
+//
+// Content
+//
+
 type AlertDialogContentProps = ThemedClassName<AlertDialogContentPrimitiveProps>;
 
 const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = forwardRef<
@@ -137,7 +180,7 @@ const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = f
   return (
     <AlertDialogContentPrimitive
       {...props}
-      className={tx('dialog.content', 'dialog--alert', { inOverlayLayout }, classNames)}
+      className={tx('dialog.content', { inOverlayLayout }, classNames)}
       ref={forwardedRef}
     >
       {children}
@@ -147,6 +190,30 @@ const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = f
 
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
 
+//
+// ActionBar
+//
+
+type AlertDialogActionBarProps = ThemedClassName<PropsWithChildren>;
+
+const AlertDialogActionBar: ForwardRefExoticComponent<AlertDialogActionBarProps> = forwardRef<
+  HTMLDivElement,
+  AlertDialogActionBarProps
+>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <div {...props} className={tx('dialog.actionbar', {}, classNames)} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+AlertDialogActionBar.displayName = ALERT_DIALOG_ACTIONBAR_NAME;
+
+//
+// AlertDialog
+//
+
 export const AlertDialog = {
   Root: AlertDialogRoot,
   Trigger: AlertDialogTrigger,
@@ -155,6 +222,7 @@ export const AlertDialog = {
   Content: AlertDialogContent,
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
+  ActionBar: AlertDialogActionBar,
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction,
 };
@@ -167,6 +235,7 @@ export type {
   AlertDialogContentProps,
   AlertDialogTitleProps,
   AlertDialogDescriptionProps,
+  AlertDialogActionBarProps,
   AlertDialogCancelProps,
   AlertDialogActionProps,
 };

package/src/components/Dialog/Dialog.stories.tsx

@@ -37,10 +37,14 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
               </Dialog.Close>
             )}
           </Dialog.Header>
-          <Dialog.Description>{description}</Dialog.Description>
-          <Dialog.Close asChild>
-            <Button variant='primary'>{closeTrigger}</Button>
-          </Dialog.Close>
+          <Dialog.Body>
+            <Dialog.Description>{description}</Dialog.Description>
+          </Dialog.Body>
+          <Dialog.ActionBar>
+            <Dialog.Close asChild>
+              <Button variant='primary'>{closeTrigger}</Button>
+            </Dialog.Close>
+          </Dialog.ActionBar>
         </Dialog.Content>
       </Dialog.Overlay>
     </Dialog.Root>
@@ -48,15 +52,11 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Dialog',
+  title: 'ui/react-ui-core/components/Dialog',
   component: Dialog as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: {
-    chromatic: {
-      disableSnapshot: false,
-    },
-  },
+  decorators: [withTheme()],
+  parameters: {},
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;