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

package/src/primitives/Flex/Flex.tsx

@@ -2,26 +2,26 @@
 // Copyright 2026 DXOS.org
 //
 
-import React, { type HTMLAttributes } from 'react';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React from 'react';
 
-import { mx } from '@dxos/ui-theme';
-import { type ComposableProps } from '@dxos/ui-types';
+import { composableProps, mx, slottable } from '@dxos/ui-theme';
 
-export type FlexProps = ComposableProps<
-  HTMLAttributes<HTMLDivElement> & {
-    column?: boolean;
-    grow?: boolean;
-  }
->;
+export type FlexProps = { column?: boolean; grow?: boolean };
 
-export const Flex = ({ children, classNames, className, role, column, grow, ...props }: FlexProps) => {
-  return (
-    <div
-      {...props}
-      role={role ?? 'none'}
-      className={mx('flex', column && 'flex-col', grow && 'flex-1 overflow-hidden', className, classNames)}
-    >
-      {children}
-    </div>
-  );
-};
+export const Flex = slottable<HTMLDivElement, FlexProps>(
+  ({ children, asChild, column, grow, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    return (
+      <Comp
+        ref={forwardedRef}
+        {...rest}
+        className={mx('flex', column && 'flex-col', grow && 'flex-1 overflow-hidden', className)}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);

package/src/primitives/Grid/Grid.stories.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { type ChromaticPalette } from '@dxos/ui-types';
 
 import { withLayout, withTheme } from '../../testing';
-
 import { Grid } from './Grid';
 
 const Cell = ({ label, hue }: { label: string; hue: ChromaticPalette }) => (

package/src/primitives/Grid/Grid.tsx

@@ -2,42 +2,29 @@
 // Copyright 2026 DXOS.org
 //
 
-import React, { type HTMLAttributes } from 'react';
+import React from 'react';
 
-import { mx } from '@dxos/ui-theme';
-import { type ComposableProps } from '@dxos/ui-types';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
 
-export type GridProps = ComposableProps<
-  HTMLAttributes<HTMLDivElement> & {
-    cols?: number;
-    rows?: number;
-    grow?: boolean;
-  }
->;
+export type GridProps = { cols?: number; rows?: number; grow?: boolean };
 
-export const Grid = ({
-  children,
-  classNames,
-  className,
-  style,
-  role,
-  cols,
-  rows,
-  grow = true,
-  ...props
-}: GridProps) => {
-  return (
-    <div
-      {...props}
-      role={role ?? 'none'}
-      style={{
-        gridTemplateColumns: cols ? `repeat(${cols}, 1fr)` : undefined,
-        gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : undefined,
-        ...style,
-      }}
-      className={mx('grid overflow-hidden', grow && 'dx-container', className, classNames)}
-    >
-      {children}
-    </div>
-  );
-};
+export const Grid = composable<HTMLDivElement, GridProps>(
+  ({ children, style, role, cols, rows, grow = true, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    return (
+      <div
+        ref={forwardedRef}
+        {...rest}
+        role={role ?? 'none'}
+        className={mx('grid overflow-hidden', grow && 'dx-container', className)}
+        style={{
+          gridTemplateColumns: cols ? `repeat(${cols}, 1fr)` : undefined,
+          gridTemplateRows: rows ? `repeat(${rows}, 1fr)` : undefined,
+          ...style,
+        }}
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/src/primitives/Panel/Panel.stories.tsx

@@ -5,14 +5,15 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Input, ScrollArea, Toolbar } from '../../components';
-import { withLayout, withTheme } from '../../testing';
+import { composable, composableProps } from '@dxos/ui-theme';
 
+import { Input, ScrollArea, ScrollAreaRootProps, Toolbar } from '../../components';
+import { withLayout, withTheme } from '../../testing';
 import { Panel } from './Panel';
 
-const List = () => {
+const List = composable<HTMLDivElement, ScrollAreaRootProps>((props, forwardedRef) => {
   return (
-    <ScrollArea.Root margin role='list'>
+    <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'>
@@ -22,11 +23,11 @@ const List = () => {
       </ScrollArea.Viewport>
     </ScrollArea.Root>
   );
-};
+});
 
 const DefaultStory = () => {
   return (
-    <Panel.Root className='dx-article'>
+    <Panel.Root className='dx-document'>
       <Panel.Toolbar asChild>
         <Toolbar.Root classNames='gap-2'>
           <Toolbar.IconButton icon='ph--plus--regular' variant='primary' label='Add' />
@@ -43,8 +44,8 @@ const DefaultStory = () => {
 
       <Panel.Statusbar asChild>
         <Toolbar.Root classNames='justify-between'>
-          <Toolbar.IconButton variant='ghost' icon='ph--house--regular' iconOnly label='Add' size={4} />
-          <Toolbar.IconButton variant='ghost' icon='ph--alarm--regular' iconOnly label='Status' size={4} />
+          <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>

package/src/primitives/Panel/Panel.tsx

@@ -4,8 +4,9 @@
 
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { forwardRef } from 'react';
+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';
@@ -17,23 +18,24 @@ import { useThemeContext } from '../../hooks';
 const GRID_TEMPLATE_ROWS = 'auto 1fr auto';
 const GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
 
-type PanelRootProps = SlottableProps<HTMLDivElement>;
+type PanelRootProps = SlottableProps<{ style?: CSSProperties }>;
 
-const Root = forwardRef<HTMLDivElement, PanelRootProps>(
-  ({ classNames, className, asChild, children, role, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+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
-        ref={forwardedRef}
+        {...rest}
         role={role ?? 'none'}
-        {...props}
         style={{
           gridTemplateRows: GRID_TEMPLATE_ROWS,
           gridTemplateAreas: GRID_TEMPLATE_AREAS,
-          ...props.style,
+          ...style,
         }}
-        className={tx('panel.root', {}, [className, classNames])}
+        className={tx('panel.root', {}, className)}
+        ref={forwardedRef}
       >
         {children}
       </Comp>
@@ -41,97 +43,78 @@ const Root = forwardRef<HTMLDivElement, PanelRootProps>(
   },
 );
 
-Root.displayName = 'Panel.Root';
+PanelRoot.displayName = 'Panel.Root';
 
 //
 // Toolbar
 //
 
-type ToolbarProps = SlottableProps<HTMLDivElement>;
+type PanelToolbarProps = SlottableProps & Pick<PanelStyleProps, 'size'>;
 
-const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
-  ({ classNames, className, asChild, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+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
-        ref={forwardedRef}
-        data-slot='toolbar'
-        {...props}
-        className={tx('panel.toolbar', {}, [className, classNames])}
-      >
+      <Comp {...rest} data-slot='toolbar' className={tx('panel.toolbar', { size }, className)} ref={forwardedRef}>
         {children}
       </Comp>
     );
   },
 );
 
-Toolbar.displayName = 'Panel.Toolbar';
+PanelToolbar.displayName = 'Panel.Toolbar';
 
 //
 // Content
 //
 
-type ContentProps = SlottableProps<HTMLDivElement>;
+type PanelContentProps = SlottableProps;
 
-const Content = forwardRef<HTMLDivElement, ContentProps>(
-  ({ classNames, className, asChild, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
-    return (
-      <Comp
-        ref={forwardedRef}
-        data-slot='content'
-        {...props}
-        className={tx('panel.content', {}, [className, classNames])}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
+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>
+  );
+});
 
-Content.displayName = 'Panel.Content';
+PanelContent.displayName = 'Panel.Content';
 
 //
 // Statusbar
 //
 
-type StatusbarProps = SlottableProps<HTMLDivElement>;
+type PanelStatusbarProps = SlottableProps & Pick<PanelStyleProps, 'size'>;
 
-const Statusbar = forwardRef<HTMLDivElement, StatusbarProps>(
-  ({ classNames, className, asChild, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+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
-        ref={forwardedRef}
-        data-slot='statusbar'
-        {...props}
-        className={tx('panel.statusbar', {}, [className, classNames])}
-      >
+      <Comp {...rest} data-slot='statusbar' className={tx('panel.statusbar', { size }, className)} ref={forwardedRef}>
         {children}
       </Comp>
     );
   },
 );
 
-Statusbar.displayName = 'Panel.Statusbar';
+PanelStatusbar.displayName = 'Panel.Statusbar';
 
 //
 // Panel
 //
 
 export const Panel = {
-  Root,
-  Toolbar,
-  Content,
-  Statusbar,
+  Root: PanelRoot,
+  Toolbar: PanelToolbar,
+  Content: PanelContent,
+  Statusbar: PanelStatusbar,
 };
 
-export type {
-  PanelRootProps,
-  ToolbarProps as PanelToolbarProps,
-  ContentProps as PanelContentProps,
-  StatusbarProps as PanelStatusbarProps,
-};
+export type { PanelRootProps, PanelToolbarProps, PanelContentProps, PanelStatusbarProps };

package/src/primitives/index.ts

@@ -3,6 +3,7 @@
 //
 
 export * from './Column';
+export * from './Container';
 export * from './Flex';
 export * from './Grid';
 export * from './Panel';

package/src/testing/Loading.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { captureOwnerStack, useEffect, useState } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+import { safeStringify } from '@dxos/util';
+
+import { ErrorStack, parseCaptureOwnerStack } from '../components';
+
+export type LoadingProps = { data?: any };
+
+/**
+ * Storybook loading component.
+ */
+export const Loading = ({ data }: LoadingProps) => {
+  const [visible, setVisible] = useState(false);
+  const ownerFrames = parseCaptureOwnerStack(captureOwnerStack());
+
+  useEffect(() => {
+    const t = setTimeout(() => setVisible(true), 500);
+    return () => clearTimeout(t);
+  }, []);
+
+  return (
+    <div className='w-full p-2'>
+      <div
+        className={mx(
+          'flex flex-col w-full p-2 border-2 border-teal-500 rounded-md',
+          'opacity-0 transition delay-1000 duration-1000',
+          visible && 'opacity-100',
+        )}
+      >
+        <h2 className='uppercase capitalize text-xs'>Loading State</h2>
+        <pre className='text-sm text-description'>{safeStringify(data, undefined, 2)}</pre>
+
+        <h3 className='uppercase capitalize text-xs mt-2'>Owner stack</h3>
+        {ownerFrames && ownerFrames.length > 0 ? (
+          <ErrorStack frames={ownerFrames} />
+        ) : (
+          <p className='text-xs text-subdued'>No owner stack (production build or unsupported context).</p>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/testing/decorators/withLayout.tsx

@@ -39,7 +39,7 @@ export const withLayout =
       const { layout = 'default', classNames, scroll } = props;
       const Container = layouts[layout] ?? layouts.fullscreen;
       return (
-        <Container classNames={mx(classNames, scroll ? 'overflow-y-auto' : 'overflow-hidden')}>
+        <Container classNames={mx(scroll ? 'overflow-y-auto' : 'overflow-hidden', classNames)}>
           <MemoizedStory />
         </Container>
       );
@@ -47,31 +47,21 @@ export const withLayout =
   };
 
 const layouts: Record<ContainerType, FC<ContainerProps>> = {
-  default: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('p-4', classNames)}>
-      {children}
-    </div>
-  ),
+  default: ({ classNames, children }: ContainerProps) => <div className={mx('p-4', classNames)}>{children}</div>,
 
   fullscreen: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-base-surface', classNames)}>
-      {children}
-    </div>
+    <div className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>{children}</div>
   ),
 
   centered: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-base-surface')}>
-      <div role='none' className={mx('flex flex-col w-[40rem] bg-group-surface', classNames)}>
-        {children}
-      </div>
+    <div className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
+      <div className={mx('flex flex-col bg-base-surface', classNames)}>{children}</div>
     </div>
   ),
 
   column: ({ classNames, children }: ContainerProps) => (
-    <div role='none' className='fixed inset-0 flex overflow-hidden justify-center bg-base-surface'>
-      <div role='none' className={mx('flex flex-col w-[40rem] bg-group-surface', classNames)}>
-        {children}
-      </div>
+    <div className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
+      <div className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>{children}</div>
     </div>
   ),
 };

package/src/testing/decorators/withTheme.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Decorator } from '@storybook/react';
-import React, { memo } from 'react';
+import React from 'react';
 
 import { defaultTx } from '@dxos/ui-theme';
 import { type ThemeMode } from '@dxos/ui-types';
@@ -14,20 +14,23 @@ import { type ThemeContextValue, ThemeProvider, Tooltip } from '../../components
  * Adds theme decorator.
  */
 export const withTheme =
-  ({ tx = defaultTx, ...props }: Partial<ThemeContextValue> = {}): Decorator =>
+  ({ tx = defaultTx, noCache, platform }: Partial<ThemeContextValue> = {}): Decorator =>
   (Story, context) => {
     const {
       globals: { theme },
       parameters: { translations },
     } = context;
 
-    // Prevent re-rendering of the story.
-    const MemoizedStory = memo(Story);
-
     return (
-      <ThemeProvider {...props} tx={tx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>
+      <ThemeProvider
+        tx={tx}
+        themeMode={theme as ThemeMode}
+        resourceExtensions={translations}
+        noCache={noCache}
+        platform={platform}
+      >
         <Tooltip.Provider>
-          <MemoizedStory />
+          <Story />
         </Tooltip.Provider>
       </ThemeProvider>
     );

package/src/testing/index.ts

@@ -3,3 +3,5 @@
 //
 
 export * from './decorators';
+
+export * from './Loading';

package/src/translations.ts

@@ -10,9 +10,14 @@ export const translations = [
   {
     'en-US': {
       [translationKey]: {
-        'toolbar menu label': 'Action menu',
-        'toolbar drag handle label': 'Drag to rearrange',
-        'toolbar close label': 'Close',
+        'toolbar-menu.label': 'Action menu',
+        'toolbar-drag-handle.label': 'Drag to rearrange',
+        'toolbar-close.label': 'Close',
+        'carousel-viewport.label': 'Carousel',
+        'carousel-prev.label': 'Previous slide',
+        'carousel-next.label': 'Next slide',
+        'carousel-indicators.label': 'Carousel slides',
+        'carousel-go-to.label': 'Go to slide {{index}}',
       },
     },
   },

package/src/util/usePx.ts

@@ -17,6 +17,7 @@ export const usePx = (rem: number): number => {
     if (typeof document !== 'undefined') {
       return getDocumentElementFontSize();
     }
+
     return 16; // Default fallback for SSR
   });