@dxos/react-ui 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/src/components/Message/Message.tsx

@@ -5,7 +5,7 @@
 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';
@@ -16,6 +16,7 @@ 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> = {
@@ -38,6 +39,42 @@ type MessageContextValue = { titleId?: string; descriptionId: string; valence: M
 
 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);
 
 //
@@ -62,20 +99,21 @@ const MessageRoot = forwardRef<HTMLDivElement, MessageRootProps>(
     const titleId = useId('message__title', propsTitleId);
     const descriptionId = useId('message__description', propsDescriptionId);
     const elevation = useElevationContext(propsElevation);
-    const Comp = asChild ? Slot : Primitive.div;
 
     return (
       <MessageProvider {...{ titleId, descriptionId, valence }}>
-        <Comp
+        <Column.Root
+          asChild={asChild}
           role={valence === 'neutral' ? 'paragraph' : 'alert'}
-          {...props}
-          className={tx('message.root', { 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}
-        </Comp>
+        </Column.Root>
       </MessageProvider>
     );
   },
@@ -92,32 +130,37 @@ type MessageTitleProps = Omit<ThemedClassName<ComponentPropsWithRef<typeof Primi
   onClose?: () => void;
 };
 
-const MESSAGE_TITLE_NAME = 'MessageTitle';
+const MESSAGE_TITLE_NAME = 'Message.Title';
 
-const MessageTitle = forwardRef<HTMLHeadingElement, MessageTitleProps>(
+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 icon = iconProp ?? messageIcons[valence];
     return (
-      <div className={tx('message.header', {}, classNames)} id={titleId} ref={forwardedRef}>
+      <Column.Row classNames={tx('message.header', {}, classNames)} ref={forwardedRef}>
         {icon && (
           <div className={tx('message.icon', { valence })}>
-            <Icon icon={icon} />
+            <Icon icon={icon} size={5} />
           </div>
         )}
-        <h2 className={tx('message.title', {}, classNames)}>{children}</h2>
+        <h2 className={tx('message.title', {}, classNames)} id={titleId}>
+          {children}
+        </h2>
         {onClose && (
-          <IconButton
-            variant='ghost'
-            icon='ph--x--regular'
-            iconOnly
-            label={t('toolbar-close.label')}
-            onClick={onClose}
-          />
+          <div className={tx('message.close', {})}>
+            <IconButton
+              variant='ghost'
+              icon='ph--x--regular'
+              iconOnly
+              density='sm'
+              label={t('toolbar-close.label')}
+              onClick={onClose}
+            />
+          </div>
         )}
-      </div>
+      </Column.Row>
     );
   },
 );
@@ -132,7 +175,7 @@ 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) => {

package/src/{primitives → components}/Panel/Panel.stories.tsx

@@ -5,10 +5,9 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { composable, composableProps } from '@dxos/ui-theme';
-
 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) => {
@@ -53,7 +52,7 @@ const DefaultStory = () => {
 };
 
 const meta: Meta = {
-  title: 'ui/react-ui-core/primitives/Panel',
+  title: 'ui/react-ui-core/components/Panel',
   render: DefaultStory,
   decorators: [withTheme(), withLayout({ layout: 'fullscreen' })],
   parameters: {

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

@@ -0,0 +1,42 @@
+//
+// 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(
+    // prettier-ignore
+    '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/{primitives → components}/Panel/Panel.tsx

@@ -6,10 +6,11 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type CSSProperties } from 'react';
 
-import { composableProps, PanelStyleProps, slottable } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
+import { PanelStyleProps } from '../../theme';
+import { composableProps, slottable } from '../../util';
 
 //
 // Root

package/src/components/Popover/Popover.theme.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, surfaceShadow, surfaceZIndex } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+export type PopoverStyleProps = Partial<{
+  constrainBlock: boolean;
+  constrainInline: boolean;
+  elevation: Elevation;
+}>;
+
+const content: ComponentFunction<PopoverStyleProps> = ({ elevation }, ...etc) =>
+  mx(
+    'dx-popover-surface border border-separator rounded-sm',
+    surfaceShadow({ elevation: 'positioned' }),
+    surfaceZIndex({ elevation, level: 'menu' }),
+    'dx-focus-ring',
+    ...etc,
+  );
+
+const viewport: ComponentFunction<PopoverStyleProps> = ({ constrainBlock, constrainInline }, ...etc) =>
+  mx(
+    'grid grid-rows-[1fr] min-h-0 min-w-popover-min-width',
+    (constrainBlock || constrainInline) && 'overflow-hidden',
+    constrainBlock && 'max-h-(--radix-popover-content-available-height)',
+    constrainBlock &&
+      'max-h-[min(var(--radix-popover-content-available-height),calc(100dvh-var(--spacing-screen-border)*2))]',
+    constrainInline && 'max-w-(--radix-popover-content-available-width)',
+    ...etc,
+  );
+
+const arrow: ComponentFunction<PopoverStyleProps> = (_props, ...etc) => mx('fill-separator', ...etc);
+
+export const popoverTheme: Theme<PopoverStyleProps> = {
+  content,
+  viewport,
+  arrow,
+};

package/src/components/Popover/Popover.tsx

@@ -114,7 +114,7 @@ PopoverRoot.displayName = POPOVER_NAME;
 // PopoverAnchor
 //
 
-const ANCHOR_NAME = 'PopoverAnchor';
+const ANCHOR_NAME = 'Popover.Anchor';
 
 type PopoverAnchorElement = ComponentRef<typeof PopperPrimitive.Anchor>;
 type PopperAnchorProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;
@@ -142,7 +142,7 @@ PopoverAnchor.displayName = ANCHOR_NAME;
 // PopoverTrigger
 //
 
-const TRIGGER_NAME = 'PopoverTrigger';
+const TRIGGER_NAME = 'Popover.Trigger';
 
 type PopoverTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
@@ -187,7 +187,7 @@ PopoverTrigger.displayName = TRIGGER_NAME;
 // PopoverVirtualTrigger
 //
 
-const VIRTUAL_TRIGGER_NAME = 'PopoverVirtualTrigger';
+const VIRTUAL_TRIGGER_NAME = 'Popover.VirtualTrigger';
 
 type PopoverVirtualTriggerProps = {
   virtualRef: RefObject<PopoverTriggerElement | null>;
@@ -211,7 +211,7 @@ PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 // PopoverPortal
 //
 
-const PORTAL_NAME = 'PopoverPortal';
+const PORTAL_NAME = 'Popover.Portal';
 
 type PortalContextValue = { forceMount?: true };
 const [PortalProvider, usePortalContext] = createPopoverContext<PortalContextValue>(PORTAL_NAME, {
@@ -252,7 +252,7 @@ PopoverPortal.displayName = PORTAL_NAME;
 // PopoverContent
 //
 
-const CONTENT_NAME = 'PopoverContent';
+const CONTENT_NAME = 'Popover.Content';
 
 type PopoverContentProps = ThemedClassName<PopoverContentTypeProps> & {
   /**
@@ -512,7 +512,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
 // PopoverClose
 //
 
-const CLOSE_NAME = 'PopoverClose';
+const CLOSE_NAME = 'Popover.Close';
 
 type PopoverCloseElement = ComponentRef<typeof Primitive.button>;
 type PopoverCloseProps = PrimitiveButtonProps;
@@ -538,7 +538,7 @@ PopoverClose.displayName = CLOSE_NAME;
 // PopoverArrow
 //
 
-const ARROW_NAME = 'PopoverArrow';
+const ARROW_NAME = 'Popover.Arrow';
 
 type PopoverArrowElement = ComponentRef<typeof PopperPrimitive.Arrow>;
 type PopperArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>>;

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -8,8 +8,8 @@ import { random } from '@dxos/random';
 import { mx } from '@dxos/ui-theme';
 import { ThemedClassName } from '@dxos/ui-types';
 
-import { Column } from '../../primitives';
 import { withLayout, withTheme } from '../../testing';
+import { Column } from '../Column';
 import { Input } from '../Input';
 import { ScrollArea } from './ScrollArea';
 

package/src/components/ScrollArea/ScrollArea.theme.ts

@@ -0,0 +1,107 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type AllowedAxis, type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+import { withColumn } from '../Column/withColumn';
+
+export type ScrollAreaStyleProps = {
+  orientation?: AllowedAxis;
+  autoHide?: boolean;
+  /** Balance left/right, top/bottom offset with scrollbar. */
+  centered?: boolean;
+  /** Add default padding. */
+  /** TODO(burdon): Integrate with Column.Root padding. */
+  padding?: boolean;
+  /** Use thin scrollbars. */
+  /** TODO(burdon): Density fine/course. */
+  thin?: boolean;
+  /** Enable snap scrolling. */
+  snap?: boolean;
+};
+
+const root: ComponentFunction<ScrollAreaStyleProps> = ({ orientation }, ...etc) =>
+  mx(
+    // Expand
+    'dx-container',
+
+    orientation === 'vertical' && 'group/scroll-v flex flex-col',
+    orientation === 'horizontal' && 'group/scroll-h flex',
+    // `flex flex-col` is required (as in `vertical`) so the viewport's `flex-1 min-h-0` can
+    // bound its height; without it the viewport grows to content height and only scrolls
+    // horizontally (the root clips the vertical overflow instead of scrolling it).
+    orientation === 'all' && 'group/scroll-all flex flex-col',
+
+    // Apply col-span-full only when inside a Column.Root grid (detected via dx-column-root marker).
+    '[.dx-column-root_&]:col-span-full',
+
+    ...etc,
+  );
+
+/**
+ * NOTE: The browser reserves space for scrollbars.
+ */
+const viewport: ComponentFunction<ScrollAreaStyleProps> = (
+  { orientation, centered, padding, snap, autoHide },
+  ...etc
+) => {
+  return mx(
+    'flex-1 min-h-0 w-full',
+
+    // Reset --dx-col so nested components don't try to grid-position themselves.
+    // ScrollArea has already consumed --gutter for padding.
+    withColumn.consumed(),
+
+    orientation === 'vertical' && 'overflow-y-scroll',
+    orientation === 'horizontal' && 'flex overflow-x-scroll overscroll-x-contain',
+    orientation === 'all' && 'overflow-scroll',
+
+    '[&::-webkit-scrollbar-corner]:bg-transparent',
+    '[&::-webkit-scrollbar-track]:bg-transparent',
+    '[&::-webkit-scrollbar-thumb]:rounded-none',
+
+    '[&::-webkit-scrollbar]:w-[var(--scroll-width)] [&::-webkit-scrollbar]:h-[var(--scroll-width)]',
+
+    // If contained within Column.Root grid the gutter is set by that component (--gutter CSS variable).
+    // If centered, left padding compensates for scrollbar width so content is visually centered.
+    (orientation === 'vertical' || orientation === 'all') &&
+      (padding
+        ? [
+            centered ? 'pl-[var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))]' : 'pl-[var(--gutter,0)]',
+            'pr-[calc(var(--gutter,calc(var(--scroll-width)+var(--scroll-padding)))-var(--scroll-width))]',
+          ]
+        : centered && 'pl-[var(--scroll-width)]'),
+
+    (orientation === 'horizontal' || orientation === 'all') &&
+      (padding
+        ? [centered && 'pt-[calc(var(--scroll-width)+var(--scroll-padding))]', 'pb-[var(--scroll-padding)]']
+        : centered && 'pt-[var(--scroll-width)]'),
+
+    snap && [
+      orientation === 'vertical' && 'snap-y snap-mandatory',
+      orientation === 'horizontal' && 'snap-x snap-mandatory',
+      orientation === 'all' && 'snap-both snap-mandatory',
+    ],
+
+    autoHide
+      ? [
+          orientation === 'vertical' && 'group-hover/scroll-v:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'horizontal' && 'group-hover/scroll-h:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'all' && 'group-hover/scroll-all:[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+        ]
+      : [
+          orientation === 'vertical' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'horizontal' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+          orientation === 'all' && '[&::-webkit-scrollbar-thumb]:bg-scrollbar-thumb',
+        ],
+
+    ...etc,
+  );
+};
+
+export const scrollAreaTheme: Theme<ScrollAreaStyleProps> = {
+  root,
+  viewport,
+};

package/src/components/ScrollArea/ScrollArea.tsx

@@ -7,10 +7,11 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { CSSProperties, useMemo } from 'react';
 
-import { composableProps, scrollbar, slottable } from '@dxos/ui-theme';
 import { type AllowedAxis, type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
+import { scrollbar } from './scrollbar';
 
 //
 // Context
@@ -92,7 +93,7 @@ type ScrollAreaViewportProps = SlottableProps;
 const ScrollAreaViewport = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const options = useScrollAreaContext(SCROLLAREA_VIEWPORT_NAME);
-  const density = options.thin ? scrollbar.thin : scrollbar.coarse;
+  const density = options.thin ? scrollbar.md : scrollbar.lg;
   const { className, ...rest } = composableProps(props);
   const { style, ...restWithoutStyle } = rest as { style?: CSSProperties; [key: string]: any };
   const Comp = asChild ? Slot : Primitive.div;

package/src/components/ScrollArea/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './ScrollArea';
+export * from './scrollbar';

package/src/components/ScrollArea/scrollbar.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+/**
+ * Scrollbar sizing presets keyed by density tier.
+ */
+export const scrollbar = {
+  sm: {
+    size: 2,
+    padding: 2,
+  },
+  md: {
+    size: 4,
+    padding: 4,
+  },
+  lg: {
+    size: 8,
+    padding: 8,
+  },
+};

package/src/components/ScrollContainer/ScrollContainer.stories.tsx

@@ -7,9 +7,9 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { random } from '@dxos/random';
 
-import { Panel } from '../../primitives';
 import { withLayout, withTheme } from '../../testing';
 import { Button } from '../Button';
+import { Panel } from '../Panel';
 import { Toolbar } from '../Toolbar';
 import { ScrollContainer, type ScrollContainerRootProps, type ScrollController } from './ScrollContainer';