@dxos/react-ui 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

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

@@ -5,31 +5,46 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { type MessageValence } from '@dxos/react-ui-types';
+import { random } from '@dxos/random';
+import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
+import { Button } from '../Button';
+import { Message } from './Message';
 
-import { Callout } from './Message';
+random.seed(123);
 
-type StoryProps = {
+type DefaultStoryProps = {
   valence: MessageValence;
   title: string;
   body: string;
+  button?: boolean;
 };
 
-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, button }: DefaultStoryProps) => (
+  <div className='w-[30rem]'>
+    <Message.Root valence={valence}>
+      {title && <Message.Title onClose={() => console.log('close')}>{title}</Message.Title>}
+      {body && (
+        <Message.Content asChild classNames='gap-2'>
+          <div>
+            <p>{body}</p>
+            {button && <Button>Test</Button>}
+          </div>
+        </Message.Content>
+      )}
+    </Message.Root>
+  </div>
 );
 
 const meta = {
-  title: 'ui/react-ui-core/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 } },
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
   argTypes: {
     valence: {
       control: 'select',
@@ -45,7 +60,44 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     valence: 'neutral',
-    title: 'Alert title',
-    body: 'Alert content',
+    title: 'Default',
+    body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Success: Story = {
+  args: {
+    valence: 'success',
+    title: 'Success',
+    body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Info: Story = {
+  args: {
+    valence: 'info',
+    title: 'Info',
+    body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    valence: 'warning',
+    title: 'Warning',
+    body: random.lorem.paragraphs(1),
+    button: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    valence: 'error',
+    title: 'Error',
+    body: random.lorem.paragraphs(1),
+    button: true,
   },
 };

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

@@ -0,0 +1,44 @@
+//
+// 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('p-1 rounded-sm', messageValence(valence), etc);
+};
+
+const header: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('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 close: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-3', etc);
+};
+
+const content: ComponentFunction<MessageStyleProps> = (_, etc) => {
+  return mx('col-start-2 flex flex-col first:font-medium pb-1.5', etc);
+};
+
+export const messageTheme: Theme<MessageStyleProps> = {
+  root,
+  header,
+  icon,
+  title,
+  close,
+  content,
+};

package/src/components/Message/Message.tsx

@@ -5,13 +5,18 @@
 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 React, { type CSSProperties, type ComponentPropsWithRef, forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { useId } from '@dxos/react-hooks';
-import { type Elevation, type MessageValence } from '@dxos/react-ui-types';
+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 { Column } from '../Column';
 import { Icon } from '../Icon';
 
 const messageIcons: Record<MessageValence, string> = {
@@ -31,9 +36,51 @@ type MessageRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.d
 };
 
 type MessageContextValue = { titleId?: string; descriptionId: string; valence: MessageValence };
+
 const MESSAGE_NAME = 'Message';
+
+// CSS custom properties for valence color inheritance — consumed by Button variant='valence'.
+// Extending CSSProperties so entries satisfy the style prop type without a cast at the use site.
+type ValenceCSSVars = CSSProperties & {
+  '--dx-valence-bg': string;
+  '--dx-valence-bg-hover': string;
+  '--dx-valence-text': string;
+};
+
+const valenceVars: Record<MessageValence, ValenceCSSVars> = {
+  success: {
+    '--dx-valence-bg': 'var(--color-success-bg)',
+    '--dx-valence-bg-hover': 'var(--color-success-bg-hover)',
+    '--dx-valence-text': 'var(--color-success-text)',
+  },
+  info: {
+    '--dx-valence-bg': 'var(--color-info-bg)',
+    '--dx-valence-bg-hover': 'var(--color-info-bg-hover)',
+    '--dx-valence-text': 'var(--color-info-text)',
+  },
+  warning: {
+    '--dx-valence-bg': 'var(--color-warning-bg)',
+    '--dx-valence-bg-hover': 'var(--color-warning-bg-hover)',
+    '--dx-valence-text': 'var(--color-warning-text)',
+  },
+  error: {
+    '--dx-valence-bg': 'var(--color-error-bg)',
+    '--dx-valence-bg-hover': 'var(--color-error-bg-hover)',
+    '--dx-valence-text': 'var(--color-error-text)',
+  },
+  neutral: {
+    '--dx-valence-bg': 'var(--color-neutral-bg)',
+    '--dx-valence-bg-hover': 'var(--color-neutral-bg-hover)',
+    '--dx-valence-text': 'var(--color-neutral-text)',
+  },
+};
+
 const [MessageProvider, useMessageContext] = createContext<MessageContextValue>(MESSAGE_NAME);
 
+//
+// Root
+//
+
 const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
   (
     {
@@ -52,19 +99,21 @@ 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;
+
     return (
       <MessageProvider {...{ titleId, descriptionId, valence }}>
-        <Root
+        <Column.Root
+          asChild={asChild}
           role={valence === 'neutral' ? 'paragraph' : 'alert'}
-          {...props}
-          className={tx('message.root', 'message', { valence, elevation }, classNames)}
           aria-labelledby={titleId}
           aria-describedby={descriptionId}
+          {...props}
+          style={{ ...valenceVars[valence], ...(props.style || {}) }}
+          classNames={tx('message.root', { valence, elevation }, classNames)}
           ref={forwardedRef}
         >
           {children}
-        </Root>
+        </Column.Root>
       </MessageProvider>
     );
   },
@@ -72,67 +121,87 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
 
 MessageRoot.displayName = MESSAGE_NAME;
 
+//
+// Title
+//
+
 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) => {
+const MessageTitle = forwardRef<HTMLDivElement, MessageTitleProps>(
+  ({ 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 })}
-          />
+      <Column.Row classNames={tx('message.header', {}, classNames)} ref={forwardedRef}>
+        {icon && (
+          <div className={tx('message.icon', { valence })}>
+            <Icon icon={icon} />
+          </div>
+        )}
+        <h2 className={tx('message.title', {}, classNames)} id={titleId}>
+          {children}
+        </h2>
+        {onClose && (
+          <div className={tx('message.close', {})}>
+            <IconButton
+              variant='ghost'
+              icon='ph--x--regular'
+              iconOnly
+              density='sm'
+              label={t('toolbar-close.label')}
+              onClick={onClose}
+            />
+          </div>
         )}
-        <span>{children}</span>
-      </Root>
+      </Column.Row>
     );
   },
 );
 
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 
+//
+// Content
+//
+
 type MessageContentProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primitive.h2>>, 'id'> & {
   asChild?: boolean;
 };
 
-const MESSAGE_BODY_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_BODY_NAME);
-    const Root = asChild ? Slot : Primitive.p;
+    const { descriptionId } = useMessageContext(MESSAGE_CONTENT_NAME);
+    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>
     );
   },
 );
 
-MessageContent.displayName = MESSAGE_BODY_NAME;
+MessageContent.displayName = MESSAGE_CONTENT_NAME;
+
+//
+// Message
+//
+
+export const Message = {
+  Root: MessageRoot,
+  Title: MessageTitle,
+  Content: MessageContent,
+};
 
-export const Message = { Root: MessageRoot, Title: MessageTitle, Content: MessageContent };
 export const Callout = Message;
 
 export type { MessageRootProps, MessageTitleProps, MessageContentProps };

package/src/components/Panel/Panel.stories.tsx

@@ -0,0 +1,67 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Input, ScrollArea, ScrollAreaRootProps, Toolbar } from '../../components';
+import { withLayout, withTheme } from '../../testing';
+import { composable, composableProps } from '../../util';
+import { Panel } from './Panel';
+
+const List = composable<HTMLDivElement, ScrollAreaRootProps>((props, forwardedRef) => {
+  return (
+    <ScrollArea.Root centered {...composableProps(props, { role: 'list' })} ref={forwardedRef}>
+      <ScrollArea.Viewport>
+        {Array.from({ length: 100 }).map((_, i) => (
+          <div key={i} role='listitem' className='p-1 hover:bg-hover-surface'>
+            Item {i}
+          </div>
+        ))}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+});
+
+const DefaultStory = () => {
+  return (
+    <Panel.Root className='dx-document'>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root classNames='gap-2'>
+          <Toolbar.IconButton icon='ph--plus--regular' variant='primary' label='Add' />
+          <Input.Root>
+            <Input.TextInput placeholder='Search' />
+          </Input.Root>
+          <Toolbar.IconButton icon='ph--dots-three-vertical--regular' iconOnly label='Menu' />
+        </Toolbar.Root>
+      </Panel.Toolbar>
+
+      <Panel.Content asChild>
+        <List />
+      </Panel.Content>
+
+      <Panel.Statusbar asChild>
+        <Toolbar.Root classNames='justify-between'>
+          <Toolbar.IconButton variant='ghost' icon='ph--house--regular' iconOnly label='Add' />
+          <Toolbar.IconButton variant='ghost' icon='ph--alarm--regular' iconOnly label='Status' />
+        </Toolbar.Root>
+      </Panel.Statusbar>
+    </Panel.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/components/Panel',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Panel/Panel.theme.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction } from '@dxos/ui-types';
+
+type Size = 'lg' | 'md' | 'sm';
+
+export type PanelStyleProps = {
+  size?: Size;
+};
+
+const sizes: Record<Size, string> = {
+  lg: 'h-(--dx-topbar-size)',
+  md: 'h-(--dx-toolbar-size)',
+  sm: 'h-(--dx-statusbar-size)',
+};
+
+const root: ComponentFunction<PanelStyleProps> = (_, ...etc) =>
+  mx(
+    'dx-container grid grid-cols-[100%] overflow-hidden',
+    // Add uncategorized children to content slot.
+    '[&>*:not([data-slot])]:[grid-area:content]',
+    ...etc,
+  );
+
+const toolbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:toolbar]', 'shrink-0', sizes[size], ...etc);
+
+const content: ComponentFunction<PanelStyleProps> = (_, ...etc) => mx('[grid-area:content] min-h-0', ...etc);
+
+const statusbar: ComponentFunction<PanelStyleProps> = ({ size = 'md' }, ...etc) =>
+  mx('[grid-area:statusbar]', 'shrink-0', sizes[size], ...etc);
+
+export const panelTheme = {
+  root,
+  toolbar,
+  content,
+  statusbar,
+};

package/src/components/Panel/Panel.tsx

@@ -0,0 +1,121 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type CSSProperties } from 'react';
+
+import { type SlottableProps } from '@dxos/ui-types';
+
+import { useThemeContext } from '../../hooks';
+import { PanelStyleProps } from '../../theme';
+import { composableProps, slottable } from '../../util';
+
+//
+// Root
+//
+
+const GRID_TEMPLATE_ROWS = 'auto 1fr auto';
+const GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
+
+type PanelRootProps = SlottableProps<{ style?: CSSProperties }>;
+
+const PanelRoot = slottable<HTMLDivElement, { style?: CSSProperties }>(
+  ({ children, asChild, role, style, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp
+        {...rest}
+        role={role ?? 'none'}
+        style={{
+          gridTemplateRows: GRID_TEMPLATE_ROWS,
+          gridTemplateAreas: GRID_TEMPLATE_AREAS,
+          ...style,
+        }}
+        className={tx('panel.root', {}, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelRoot.displayName = 'Panel.Root';
+
+//
+// Toolbar
+//
+
+type PanelToolbarProps = SlottableProps & Pick<PanelStyleProps, 'size'>;
+
+const PanelToolbar = slottable<HTMLDivElement, Pick<PanelStyleProps, 'size'>>(
+  ({ children, asChild, size, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp {...rest} data-slot='toolbar' className={tx('panel.toolbar', { size }, className)} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelToolbar.displayName = 'Panel.Toolbar';
+
+//
+// Content
+//
+
+type PanelContentProps = SlottableProps;
+
+const PanelContent = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} data-slot='content' className={tx('panel.content', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+PanelContent.displayName = 'Panel.Content';
+
+//
+// Statusbar
+//
+
+type PanelStatusbarProps = SlottableProps & Pick<PanelStyleProps, 'size'>;
+
+const PanelStatusbar = slottable<HTMLDivElement, Pick<PanelStyleProps, 'size'>>(
+  ({ children, asChild, size, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    return (
+      <Comp {...rest} data-slot='statusbar' className={tx('panel.statusbar', { size }, className)} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+PanelStatusbar.displayName = 'Panel.Statusbar';
+
+//
+// Panel
+//
+
+export const Panel = {
+  Root: PanelRoot,
+  Toolbar: PanelToolbar,
+  Content: PanelContent,
+  Statusbar: PanelStatusbar,
+};
+
+export type { PanelRootProps, PanelToolbarProps, PanelContentProps, PanelStatusbarProps };

package/src/components/Panel/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './Panel';

package/src/components/Popover/Popover.stories.tsx

@@ -5,14 +5,13 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type PropsWithChildren, type ReactNode, useRef, useState } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { Popover } from './Popover';
 
-faker.seed(1234);
+random.seed(1234);
 
 const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
   return (
@@ -20,7 +19,7 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
       <Popover.Trigger asChild>{openTrigger}</Popover.Trigger>
       <Popover.Content>
         <Popover.Viewport>
-          <p className='pli-2 plb-1 min-is-[18rem] max-is-[38rem]'>{children}</p>
+          <p className='px-2 py-1 min-w-[18rem] max-w-[38rem]'>{children}</p>
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>
@@ -29,10 +28,10 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Popover',
+  title: 'ui/react-ui-core/components/Popover',
   component: Popover.Root,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -42,7 +41,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     openTrigger: <Button>Open popover</Button>,
-    children: faker.lorem.paragraphs(3),
+    children: random.lorem.paragraphs(3),
   },
 };
 
@@ -59,7 +58,7 @@ export const VirtualTrigger = {
           <Popover.VirtualTrigger virtualRef={buttonRef} />
           <Popover.Content>
             <Popover.Viewport>
-              <p className='pli-2 plb-1 min-is-[18rem] max-is-[38rem]'>{faker.lorem.paragraphs(3)}</p>
+              <p className='px-2 py-1 min-w-[18rem] max-w-[38rem]'>{random.lorem.paragraphs(3)}</p>
             </Popover.Viewport>
             <Popover.Arrow />
           </Popover.Content>