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

package/src/primitives/Column/Column.tsx

@@ -6,6 +6,7 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type CSSProperties, forwardRef } from 'react';
 
+import { composableProps } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
@@ -25,7 +26,7 @@ const gutterSizes: Record<GutterSize, string> = {
   rail: 'var(--dx-rail-item)',
 };
 
-type ColumnRootProps = SlottableProps<HTMLDivElement> & { gutter?: GutterSize };
+type ColumnRootProps = SlottableProps<HTMLDivElement, { gutter?: GutterSize }>;
 
 /**
  * Creates a vertical channel with left/right gutter columns.
@@ -39,13 +40,14 @@ type ColumnRootProps = SlottableProps<HTMLDivElement> & { gutter?: GutterSize };
  * The `--gutter` CSS variable is also consumed by ScrollArea's `margin` option to align scrollbar spacing.
  */
 const Root = forwardRef<HTMLDivElement, ColumnRootProps>(
-  ({ classNames, className, asChild, role, children, gutter = 'md', ...props }, forwardedRef) => {
+  ({ children, asChild, role, gutter = 'md', ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
     const { tx } = useThemeContext();
-    const Component = asChild ? Slot : Primitive.div;
     const gutterSize = gutterSizes[gutter];
     return (
-      <Component
-        {...props}
+      <Comp
+        {...rest}
         role={role ?? 'none'}
         style={
           {
@@ -53,11 +55,11 @@ const Root = forwardRef<HTMLDivElement, ColumnRootProps>(
             gridTemplateColumns: [gutterSize, 'minmax(0,1fr)', gutterSize].join(' '),
           } as CSSProperties
         }
-        className={tx('column.root', { gutter }, [className, classNames])}
+        className={tx('column.root', { gutter }, className)}
         ref={forwardedRef}
       >
         {children}
-      </Component>
+      </Comp>
     );
   },
 );
@@ -77,22 +79,16 @@ type ColumnRowProps = SlottableProps<HTMLDivElement>;
  * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
  * Must be a direct child of Column.Root.
  */
-const Row = forwardRef<HTMLDivElement, ColumnRowProps>(
-  ({ classNames, className, asChild, role, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Component = asChild ? Slot : Primitive.div;
-    return (
-      <Component
-        {...props}
-        className={tx('column.row', {}, [className, classNames])}
-        role={role ?? 'none'}
-        ref={forwardedRef}
-      >
-        {children}
-      </Component>
-    );
-  },
-);
+const Row = forwardRef<HTMLDivElement, ColumnRowProps>(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} role={role ?? 'none'} className={tx('column.row', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 Row.displayName = COLUMN_ROW_NAME;
 
@@ -110,33 +106,15 @@ type ColumnSegmentProps = SlottableProps<HTMLDivElement>;
  * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
  */
 const Segment = forwardRef<HTMLDivElement, ColumnSegmentProps>(
-  ({ classNames, className, asChild, role, children, ...props }, forwardedRef) => {
+  ({ children, asChild, role, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
     const { tx } = useThemeContext();
-    const Component = asChild ? Slot : Primitive.div;
-
-    if (asChild) {
-      // With asChild, merge col-start-2 directly onto the child — no contents wrapper needed.
-      return (
-        <Component
-          {...props}
-          role={role ?? 'none'}
-          className={tx('column.segment', {}, [className, classNames])}
-          ref={forwardedRef}
-        >
-          {children}
-        </Component>
-      );
-    }
-
+    // With asChild, merge col-start-2 directly onto the child — no contents wrapper needed.
     return (
-      <Component
-        {...props}
-        className={tx('column.segment', {}, [className, classNames])}
-        role={role}
-        ref={forwardedRef}
-      >
-        <div className='contents'>{children}</div>
-      </Component>
+      <Comp {...rest} role={role ?? 'none'} className={tx('column.segment', {}, className)} ref={forwardedRef}>
+        {asChild ? children : <div className='contents'>{children}</div>}
+      </Comp>
     );
   },
 );

package/src/primitives/Container/Container.stories.tsx

@@ -0,0 +1,30 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withLayout, withTheme } from '../../testing';
+
+import { Container } from './Container';
+
+const DefaultStory = () => (
+  <Container asChild>
+    <div className='grid place-items-center border border-red-500'>Hello</div>
+  </Container>
+);
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/primitives/Container',
+  component: Container,
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/primitives/Container/Container.tsx

@@ -0,0 +1,22 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { composableProps, mx } from '@dxos/ui-theme';
+import { Slot } from '@radix-ui/react-slot';
+import { SlottableProps } from '@dxos/ui-types';
+import { Primitive } from '@radix-ui/react-primitive';
+
+export type ContainerProps = SlottableProps<HTMLDivElement>;
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps<HTMLDivElement>(props, { role: 'none' });
+  const Comp = asChild ? Slot : Primitive.div;
+  return (
+    <Comp {...rest} className={mx('dx-container', className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});

package/src/primitives/Container/index.ts

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

package/src/primitives/Flex/Flex.tsx

@@ -2,26 +2,28 @@
 // Copyright 2026 DXOS.org
 //
 
-import React, { type HTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
 
-import { mx } from '@dxos/ui-theme';
+import { composableProps, mx } from '@dxos/ui-theme';
 import { type ComposableProps } from '@dxos/ui-types';
 
-export type FlexProps = ComposableProps<
-  HTMLAttributes<HTMLDivElement> & {
-    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 type FlexProps = ComposableProps<HTMLDivElement> & {
+  column?: boolean;
+  grow?: boolean;
 };
+
+export const Flex = forwardRef<HTMLDivElement, FlexProps>(
+  ({ children, role, column, grow, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    return (
+      <div
+        ref={forwardedRef}
+        {...rest}
+        role={role ?? 'none'}
+        className={mx('flex', column && 'flex-col', grow && 'flex-1 overflow-hidden', className)}
+      >
+        {children}
+      </div>
+    );
+  },
+);

package/src/primitives/Grid/Grid.tsx

@@ -2,42 +2,34 @@
 // Copyright 2026 DXOS.org
 //
 
-import React, { type HTMLAttributes } from 'react';
+import React, { forwardRef } from 'react';
 
-import { mx } from '@dxos/ui-theme';
+import { composableProps, mx } from '@dxos/ui-theme';
 import { type ComposableProps } from '@dxos/ui-types';
 
-export type GridProps = ComposableProps<
-  HTMLAttributes<HTMLDivElement> & {
-    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 type GridProps = ComposableProps<HTMLDivElement> & {
+  cols?: number;
+  rows?: number;
+  grow?: boolean;
 };
+
+export const Grid = forwardRef<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.tsx

@@ -6,6 +6,7 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { forwardRef } from 'react';
 
+import { composableProps } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
@@ -17,29 +18,28 @@ import { useThemeContext } from '../../hooks';
 const GRID_TEMPLATE_ROWS = 'auto 1fr auto';
 const GRID_TEMPLATE_AREAS = '"toolbar" "content" "statusbar"';
 
-type PanelRootProps = SlottableProps<HTMLDivElement>;
-
-const Root = forwardRef<HTMLDivElement, PanelRootProps>(
-  ({ classNames, className, asChild, children, role, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
-    return (
-      <Comp
-        ref={forwardedRef}
-        role={role ?? 'none'}
-        {...props}
-        style={{
-          gridTemplateRows: GRID_TEMPLATE_ROWS,
-          gridTemplateAreas: GRID_TEMPLATE_AREAS,
-          ...props.style,
-        }}
-        className={tx('panel.root', {}, [className, classNames])}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
+type RootProps = SlottableProps<HTMLDivElement>;
+
+const Root = forwardRef<HTMLDivElement, RootProps>(({ 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>
+  );
+});
 
 Root.displayName = 'Panel.Root';
 
@@ -49,22 +49,16 @@ Root.displayName = 'Panel.Root';
 
 type ToolbarProps = SlottableProps<HTMLDivElement>;
 
-const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
-  ({ classNames, className, asChild, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
-    return (
-      <Comp
-        ref={forwardedRef}
-        data-slot='toolbar'
-        {...props}
-        className={tx('panel.toolbar', {}, [className, classNames])}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
+const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(({ children, asChild, ...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', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 Toolbar.displayName = 'Panel.Toolbar';
 
@@ -74,22 +68,16 @@ Toolbar.displayName = 'Panel.Toolbar';
 
 type ContentProps = SlottableProps<HTMLDivElement>;
 
-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 Content = forwardRef<HTMLDivElement, ContentProps>(({ 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';
 
@@ -99,22 +87,16 @@ Content.displayName = 'Panel.Content';
 
 type StatusbarProps = SlottableProps<HTMLDivElement>;
 
-const Statusbar = forwardRef<HTMLDivElement, StatusbarProps>(
-  ({ classNames, className, asChild, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
-    return (
-      <Comp
-        ref={forwardedRef}
-        data-slot='statusbar'
-        {...props}
-        className={tx('panel.statusbar', {}, [className, classNames])}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
+const Statusbar = forwardRef<HTMLDivElement, StatusbarProps>(({ children, asChild, ...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', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 Statusbar.displayName = 'Panel.Statusbar';
 
@@ -130,7 +112,7 @@ export const Panel = {
 };
 
 export type {
-  PanelRootProps,
+  RootProps as PanelRootProps,
   ToolbarProps as PanelToolbarProps,
   ContentProps as PanelContentProps,
   StatusbarProps as 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,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { safeStringify } from '@dxos/util';
+import React, { useEffect, useState } from 'react';
+
+export type LoadingProps = { data?: any };
+
+/**
+ * Storybook loading component.
+ */
+export const Loading = ({ data }: LoadingProps) => {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const t = setTimeout(() => setVisible(true), 500);
+    return () => clearTimeout(t);
+  }, []);
+  return (
+    <div className={mx('flex flex-col opacity-0 transition delay-1000 duration-1000', visible && 'opacity-100')}>
+      <h2 className='uppercase'>Loading</h2>
+      <pre>{safeStringify(data, undefined, 2)}</pre>
+    </div>
+  );
+};

package/src/testing/index.ts

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