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

package/src/components/Menu/DropdownMenu.tsx

@@ -17,9 +17,9 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
-  type ElementRef,
+  type ComponentRef,
   type FC,
-  type MutableRefObject,
+  PropsWithChildren,
   type ReactNode,
   type RefObject,
   forwardRef,
@@ -47,7 +47,7 @@ const useMenuScope: (scope?: Scope) => any = createMenuScope();
 
 type DropdownMenuContextValue = {
   triggerId: string;
-  triggerRef: MutableRefObject<HTMLButtonElement | null>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
   contentId: string;
   open: boolean;
   onOpenChange(open: boolean): void;
@@ -58,17 +58,23 @@ type DropdownMenuContextValue = {
 const [DropdownMenuProvider, useDropdownMenuContext] =
   createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);
 
-interface DropdownMenuRootProps {
-  children?: ReactNode;
+type DropdownMenuRootProps = PropsWithChildren<{
   dir?: Direction;
+  modal?: boolean;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?(open: boolean): void;
-  modal?: boolean;
-}
-
-const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<DropdownMenuRootProps>) => {
-  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+}>;
+
+const DropdownMenuRoot = ({
+  __scopeDropdownMenu,
+  children,
+  dir,
+  modal = true,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+}: ScopedProps<DropdownMenuRootProps>) => {
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const [open = false, setOpen] = useControllableState({
@@ -81,14 +87,14 @@ const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<Dropdown
     <DropdownMenuProvider
       scope={__scopeDropdownMenu}
       triggerId={useId()}
-      triggerRef={triggerRef as MutableRefObject<HTMLButtonElement | null>}
+      triggerRef={triggerRef}
       contentId={useId()}
       open={open}
       onOpenChange={setOpen}
       onOpenToggle={useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
       modal={modal}
     >
-      <MenuPrimitive.Root {...menuScope} open={open} onOpenChange={setOpen} dir={dir} modal={modal}>
+      <MenuPrimitive.Root {...menuScope} dir={dir} modal={modal} open={open} onOpenChange={setOpen}>
         {children}
       </MenuPrimitive.Root>
     </DropdownMenuProvider>
@@ -101,11 +107,11 @@ DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 // DropdownMenuTrigger
 //
 
-const TRIGGER_NAME = 'DropdownMenuTrigger';
+const TRIGGER_NAME = 'DropdownMenu.Trigger';
 
-type DropdownMenuTriggerElement = ElementRef<typeof Primitive.button>;
+type DropdownMenuTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
-interface DropdownMenuTriggerProps extends PrimitiveButtonProps {}
+type DropdownMenuTriggerProps = PrimitiveButtonProps;
 
 const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(
   (props: ScopedProps<DropdownMenuTriggerProps>, forwardedRef) => {
@@ -166,11 +172,11 @@ DropdownMenuTrigger.displayName = TRIGGER_NAME;
 // DropdownMenuVirtualTrigger
 //
 
-const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
+const VIRTUAL_TRIGGER_NAME = 'DropdownMenu.VirtualTrigger';
 
-interface DropdownMenuVirtualTriggerProps {
+type DropdownMenuVirtualTriggerProps = {
   virtualRef: RefObject<DropdownMenuTriggerElement | null>;
-}
+};
 
 const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTriggerProps>) => {
   const { __scopeDropdownMenu, virtualRef } = props;
@@ -190,10 +196,10 @@ DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 // DropdownMenuPortal
 //
 
-const PORTAL_NAME = 'DropdownMenuPortal';
+const PORTAL_NAME = 'DropdownMenu.Portal';
 
 type MenuPortalProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;
-interface DropdownMenuPortalProps extends MenuPortalProps {}
+type DropdownMenuPortalProps = MenuPortalProps;
 
 const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<DropdownMenuPortalProps>) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
@@ -214,11 +220,11 @@ type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Pr
 const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProps>(
   ({ classNames, asChild, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+      <Comp {...props} className={tx('menu.viewport', {}, classNames)} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
@@ -227,11 +233,11 @@ const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProp
 // DropdownMenuContent
 //
 
-const CONTENT_NAME = 'DropdownMenuContent';
+const CONTENT_NAME = 'DropdownMenu.Content';
 
-type DropdownMenuContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type DropdownMenuContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Content>>;
-interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {}
+type DropdownMenuContentProps = Omit<MenuContentProps, 'onEntryFocus'>;
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
@@ -283,7 +289,7 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
           }
         })}
         data-arrow-keys='up down'
-        className={tx('menu.content', 'menu', { elevation }, classNames)}
+        className={tx('menu.content', { elevation }, classNames)}
         style={{
           ...props.style,
           // re-namespace exposed content custom properties
@@ -306,11 +312,11 @@ DropdownMenuContent.displayName = CONTENT_NAME;
 // DropdownMenuGroup
 //
 
-const GROUP_NAME = 'DropdownMenuGroup';
+const GROUP_NAME = 'DropdownMenu.Group';
 
-type DropdownMenuGroupElement = ElementRef<typeof MenuPrimitive.Group>;
+type DropdownMenuGroupElement = ComponentRef<typeof MenuPrimitive.Group>;
 type MenuGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;
-interface DropdownMenuGroupProps extends MenuGroupProps {}
+type DropdownMenuGroupProps = MenuGroupProps;
 
 const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(
   (props: ScopedProps<DropdownMenuGroupProps>, forwardedRef) => {
@@ -326,11 +332,11 @@ DropdownMenuGroup.displayName = GROUP_NAME;
 // DropdownMenuLabel
 //
 
-const LABEL_NAME = 'DropdownMenuLabel';
+const LABEL_NAME = 'DropdownMenu.Label';
 
-type DropdownMenuLabelElement = ElementRef<typeof MenuPrimitive.Label>;
+type DropdownMenuLabelElement = ComponentRef<typeof MenuPrimitive.Label>;
 type MenuLabelProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Label>>;
-interface DropdownMenuLabelProps extends MenuLabelProps {}
+type DropdownMenuLabelProps = MenuLabelProps;
 
 const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
   (props: ScopedProps<DropdownMenuLabelProps>, forwardedRef) => {
@@ -341,7 +347,7 @@ const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenu
       <MenuPrimitive.Label
         {...menuScope}
         {...labelProps}
-        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        className={tx('menu.groupLabel', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -354,11 +360,11 @@ DropdownMenuGroupLabel.displayName = LABEL_NAME;
 // DropdownMenuItem
 //
 
-const ITEM_NAME = 'DropdownMenuItem';
+const ITEM_NAME = 'DropdownMenu.Item';
 
-type DropdownMenuItemElement = ElementRef<typeof MenuPrimitive.Item>;
+type DropdownMenuItemElement = ComponentRef<typeof MenuPrimitive.Item>;
 type MenuItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Item>>;
-interface DropdownMenuItemProps extends MenuItemProps {}
+type DropdownMenuItemProps = MenuItemProps;
 
 const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(
   (props: ScopedProps<DropdownMenuItemProps>, forwardedRef) => {
@@ -369,7 +375,7 @@ const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemPro
       <MenuPrimitive.Item
         {...menuScope}
         {...itemProps}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -382,11 +388,11 @@ DropdownMenuItem.displayName = ITEM_NAME;
 // DropdownMenuCheckboxItem
 //
 
-const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
+const CHECKBOX_ITEM_NAME = 'DropdownMenu.CheckboxItem';
 
-type DropdownMenuCheckboxItemElement = ElementRef<typeof MenuPrimitive.CheckboxItem>;
+type DropdownMenuCheckboxItemElement = ComponentRef<typeof MenuPrimitive.CheckboxItem>;
 type MenuCheckboxItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>>;
-interface DropdownMenuCheckboxItemProps extends MenuCheckboxItemProps {}
+type DropdownMenuCheckboxItemProps = MenuCheckboxItemProps;
 
 const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
   (props: ScopedProps<DropdownMenuCheckboxItemProps>, forwardedRef) => {
@@ -397,7 +403,7 @@ const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, Dro
       <MenuPrimitive.CheckboxItem
         {...menuScope}
         {...checkboxItemProps}
-        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -410,11 +416,11 @@ DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 // DropdownMenuRadioGroup
 //
 
-const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
+const RADIO_GROUP_NAME = 'DropdownMenu.RadioGroup';
 
-type DropdownMenuRadioGroupElement = ElementRef<typeof MenuPrimitive.RadioGroup>;
+type DropdownMenuRadioGroupElement = ComponentRef<typeof MenuPrimitive.RadioGroup>;
 type MenuRadioGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;
-interface DropdownMenuRadioGroupProps extends MenuRadioGroupProps {}
+type DropdownMenuRadioGroupProps = MenuRadioGroupProps;
 
 const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, DropdownMenuRadioGroupProps>(
   (props: ScopedProps<DropdownMenuRadioGroupProps>, forwardedRef) => {
@@ -430,9 +436,9 @@ DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 // DropdownMenuRadioItem
 //
 
-const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
+const RADIO_ITEM_NAME = 'DropdownMenu.RadioItem';
 
-type DropdownMenuRadioItemElement = ElementRef<typeof MenuPrimitive.RadioItem>;
+type DropdownMenuRadioItemElement = ComponentRef<typeof MenuPrimitive.RadioItem>;
 type MenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;
 type DropdownMenuRadioItemProps = ThemedClassName<MenuRadioItemProps>;
 
@@ -445,7 +451,7 @@ const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownM
       <MenuPrimitive.Item
         {...menuScope}
         {...itemProps}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -458,11 +464,11 @@ DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 // DropdownMenuItemIndicator
 //
 
-const INDICATOR_NAME = 'DropdownMenuItemIndicator';
+const INDICATOR_NAME = 'DropdownMenu.ItemIndicator';
 
-type DropdownMenuItemIndicatorElement = ElementRef<typeof MenuPrimitive.ItemIndicator>;
+type DropdownMenuItemIndicatorElement = ComponentRef<typeof MenuPrimitive.ItemIndicator>;
 type MenuItemIndicatorProps = ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;
-interface DropdownMenuItemIndicatorProps extends MenuItemIndicatorProps {}
+type DropdownMenuItemIndicatorProps = MenuItemIndicatorProps;
 
 const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, DropdownMenuItemIndicatorProps>(
   (props: ScopedProps<DropdownMenuItemIndicatorProps>, forwardedRef) => {
@@ -478,11 +484,11 @@ DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 // DropdownMenuSeparator
 //
 
-const SEPARATOR_NAME = 'DropdownMenuSeparator';
+const SEPARATOR_NAME = 'DropdownMenu.Separator';
 
-type DropdownMenuSeparatorElement = ElementRef<typeof MenuPrimitive.Separator>;
+type DropdownMenuSeparatorElement = ComponentRef<typeof MenuPrimitive.Separator>;
 type MenuSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>>;
-interface DropdownMenuSeparatorProps extends MenuSeparatorProps {}
+type DropdownMenuSeparatorProps = MenuSeparatorProps;
 
 const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(
   (props: ScopedProps<DropdownMenuSeparatorProps>, forwardedRef) => {
@@ -493,7 +499,7 @@ const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownM
       <MenuPrimitive.Separator
         {...menuScope}
         {...separatorProps}
-        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        className={tx('menu.separator', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -506,11 +512,11 @@ DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 // DropdownMenuArrow
 //
 
-const ARROW_NAME = 'DropdownMenuArrow';
+const ARROW_NAME = 'DropdownMenu.Arrow';
 
-type DropdownMenuArrowElement = ElementRef<typeof MenuPrimitive.Arrow>;
+type DropdownMenuArrowElement = ComponentRef<typeof MenuPrimitive.Arrow>;
 type MenuArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>>;
-interface DropdownMenuArrowProps extends MenuArrowProps {}
+type DropdownMenuArrowProps = MenuArrowProps;
 
 const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrowProps>(
   (props: ScopedProps<DropdownMenuArrowProps>, forwardedRef) => {
@@ -521,7 +527,7 @@ const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrow
       <MenuPrimitive.Arrow
         {...menuScope}
         {...arrowProps}
-        className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+        className={tx('menu.arrow', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -534,12 +540,12 @@ DropdownMenuArrow.displayName = ARROW_NAME;
 // DropdownMenuSub
 //
 
-interface DropdownMenuSubProps {
+type DropdownMenuSubProps = {
   children?: ReactNode;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?(open: boolean): void;
-}
+};
 
 const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMenuSubProps>) => {
   const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
@@ -561,11 +567,11 @@ const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMe
 // DropdownMenuSubTrigger
 //
 
-const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
+const SUB_TRIGGER_NAME = 'DropdownMenu.SubTrigger';
 
-type DropdownMenuSubTriggerElement = ElementRef<typeof MenuPrimitive.SubTrigger>;
+type DropdownMenuSubTriggerElement = ComponentRef<typeof MenuPrimitive.SubTrigger>;
 type MenuSubTriggerProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;
-interface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {}
+type DropdownMenuSubTriggerProps = MenuSubTriggerProps;
 
 const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
   (props: ScopedProps<DropdownMenuSubTriggerProps>, forwardedRef) => {
@@ -581,11 +587,11 @@ DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 // DropdownMenuSubContent
 //
 
-const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
+const SUB_CONTENT_NAME = 'DropdownMenu.SubContent';
 
-type DropdownMenuSubContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type DropdownMenuSubContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuSubContentProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;
-interface DropdownMenuSubContentProps extends MenuSubContentProps {}
+type DropdownMenuSubContentProps = MenuSubContentProps;
 
 const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, DropdownMenuSubContentProps>(
   (props: ScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {

package/src/components/Menu/Menu.theme.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { dataDisabled } from '@dxos/ui-theme';
+import { mx, surfaceShadow, surfaceZIndex } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+export type MenuStyleProps = Partial<{
+  constrainBlockSize: boolean;
+  elevation: Elevation;
+}>;
+
+const content: ComponentFunction<MenuStyleProps> = ({ elevation }, ...etc) =>
+  mx(
+    'dx-modal-surface w-48 rounded-sm md:w-56 border border-separator',
+    surfaceZIndex({ elevation, level: 'menu' }),
+    surfaceShadow({ elevation: 'positioned' }),
+    ...etc,
+  );
+
+const viewport: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('rounded-sm p-1 max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto', ...etc);
+
+const item: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx(
+    'flex cursor-pointer select-none items-center gap-2 rounded-xs px-2 py-2 text-sm',
+    'hover:bg-hover-surface data-[highlighted]:bg-hover-surface',
+    'dx-focus-subdued',
+    dataDisabled,
+    ...etc,
+  );
+
+const separator: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx('my-1 mx-2 h-px bg-separator', ...etc);
+
+const groupLabel: ComponentFunction<MenuStyleProps> = (_props, ...etc) =>
+  mx('text-description', 'select-none px-2 py-2', ...etc);
+
+const arrow: ComponentFunction<MenuStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
+
+export const menuTheme: Theme<MenuStyleProps> = {
+  content,
+  viewport,
+  item,
+  separator,
+  groupLabel,
+  arrow,
+};

package/src/components/Message/Message.stories.tsx

@@ -5,31 +5,37 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { random } from '@dxos/random';
 import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
+import { Message } from './Message';
 
-import { Callout } from './Message';
+random.seed(123);
 
-type StoryProps = {
+type DefaultStoryProps = {
   valence: MessageValence;
   title: string;
   body: string;
 };
 
-const DefaultStory = ({ valence, title, body }: StoryProps) => (
-  <Callout.Root valence={valence}>
-    {title && <Callout.Title>{title}</Callout.Title>}
-    {body && <Callout.Content>{body}</Callout.Content>}
-  </Callout.Root>
+const DefaultStory = ({ valence, title, body }: DefaultStoryProps) => (
+  <div className='w-[30rem]'>
+    <Message.Root valence={valence}>
+      {title && <Message.Title onClose={() => console.log('close')}>{title}</Message.Title>}
+      {body && <Message.Content>{body}</Message.Content>}
+    </Message.Root>
+  </div>
 );
 
 const meta = {
-  title: 'ui/react-ui-core/components/Callout',
-  component: Callout.Root as any,
+  title: 'ui/react-ui-core/components/Message',
+  component: Message.Root as any,
   render: DefaultStory,
   decorators: [withTheme()],
-  parameters: { chromatic: { disableSnapshot: false } },
+  parameters: {
+    layout: 'centered',
+  },
   argTypes: {
     valence: {
       control: 'select',
@@ -46,6 +52,14 @@ export const Default: Story = {
   args: {
     valence: 'neutral',
     title: 'Alert title',
-    body: 'Alert content',
+    body: random.lorem.paragraphs(1),
+  },
+};
+
+export const Error: Story = {
+  args: {
+    valence: 'error',
+    title: 'Error title',
+    body: random.lorem.paragraphs(1),
   },
 };

package/src/components/Message/Message.theme.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, messageValence } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type MessageValence, type Theme } from '@dxos/ui-types';
+
+export type MessageStyleProps = {
+  valence?: MessageValence;
+  elevation?: Elevation;
+};
+
+const root: ComponentFunction<MessageStyleProps> = ({ valence }, etc) => {
+  return mx('grid grid-cols-[2rem_1fr_2rem] p-1 rounded-sm', messageValence(valence), etc);
+};
+
+const header: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-span-full grid grid-cols-subgrid items-center', etc);
+};
+
+const title: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-2 overflow-hidden truncate', etc);
+};
+
+const icon: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-1 grid place-items-center', etc);
+};
+
+const content: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-2 grid grid-cols-subgrid inline first:font-medium', etc);
+};
+
+export const messageTheme: Theme<MessageStyleProps> = {
+  root,
+  header,
+  icon,
+  title,
+  content,
+};

package/src/components/Message/Message.tsx

@@ -6,12 +6,16 @@ import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useId } from '@dxos/react-hooks';
 import { type Elevation, type MessageValence } from '@dxos/ui-types';
 
+import { translationKey } from '#translations';
+
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { IconButton } from '../Button';
 import { Icon } from '../Icon';
 
 const messageIcons: Record<MessageValence, string> = {
@@ -58,20 +62,20 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     const titleId = useId('message__title', propsTitleId);
     const descriptionId = useId('message__description', propsDescriptionId);
     const elevation = useElevationContext(propsElevation);
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
 
     return (
       <MessageProvider {...{ titleId, descriptionId, valence }}>
-        <Root
+        <Comp
           role={valence === 'neutral' ? 'paragraph' : 'alert'}
           {...props}
-          className={tx('message.root', 'message', { valence, elevation }, classNames)}
+          className={tx('message.root', { valence, elevation }, classNames)}
           aria-labelledby={titleId}
           aria-describedby={descriptionId}
           ref={forwardedRef}
         >
           {children}
-        </Root>
+        </Comp>
       </MessageProvider>
     );
   },
@@ -84,34 +88,36 @@ MessageRoot.displayName = MESSAGE_NAME;
 //
 
 type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
-  asChild?: boolean;
   icon?: string;
+  onClose?: () => void;
 };
 
-const MESSAGE_TITLE_NAME = 'MessageTitle';
+const MESSAGE_TITLE_NAME = 'Message.Title';
 
 const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
-  ({ asChild, classNames, children, icon, ...props }, forwardedRef) => {
+  ({ classNames, children, icon: iconProp, onClose }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
     const { tx } = useThemeContext();
     const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
-    const Root = asChild ? Slot : Primitive.h2;
-
+    const icon = iconProp ?? messageIcons[valence];
     return (
-      <Root
-        {...props}
-        className={tx('message.title', 'message__title', {}, classNames)}
-        id={titleId}
-        ref={forwardedRef}
-      >
-        {!icon && valence === 'neutral' ? null : (
-          <Icon
-            size={5}
-            icon={icon ?? messageIcons[valence]}
-            classNames={tx('message.icon', 'message__icon', { valence })}
+      <div className={tx('message.header', {}, classNames)} id={titleId} ref={forwardedRef}>
+        {icon && (
+          <div className={tx('message.icon', { valence })}>
+            <Icon icon={icon} />
+          </div>
+        )}
+        <h2 className={tx('message.title', {}, classNames)}>{children}</h2>
+        {onClose && (
+          <IconButton
+            variant='ghost'
+            icon='ph--x--regular'
+            iconOnly
+            label={t('toolbar-close.label')}
+            onClick={onClose}
           />
         )}
-        <span>{children}</span>
-      </Root>
+      </div>
     );
   },
 );
@@ -126,22 +132,17 @@ type MessageContentProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Pri
   asChild?: boolean;
 };
 
-const MESSAGE_CONTENT_NAME = 'MessageContent';
+const MESSAGE_CONTENT_NAME = 'Message.Content';
 
 const MessageContent = forwardRef<HTMLParagraphElement, MessageContentProps>(
   ({ asChild, classNames, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
-    const Root = asChild ? Slot : Primitive.p;
+    const Comp = asChild ? Slot : Primitive.p;
     return (
-      <Root
-        {...props}
-        className={tx('message.content', 'message__content', {}, classNames)}
-        id={descriptionId}
-        ref={forwardedRef}
-      >
+      <Comp {...props} className={tx('message.content', {}, classNames)} id={descriptionId} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );