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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.c85a9c8dae",
+  "version": "0.8.4-main.d05673bc65",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -80,17 +80,17 @@
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/async": "0.8.4-main.c85a9c8dae",
-    "@dxos/invariant": "0.8.4-main.c85a9c8dae",
-    "@dxos/debug": "0.8.4-main.c85a9c8dae",
-    "@dxos/lit-ui": "0.8.4-main.c85a9c8dae",
-    "@dxos/log": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-hooks": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-error-boundary": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-input": "0.8.4-main.c85a9c8dae",
-    "@dxos/react-list": "0.8.4-main.c85a9c8dae",
-    "@dxos/ui-types": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae"
+    "@dxos/debug": "0.8.4-main.d05673bc65",
+    "@dxos/invariant": "0.8.4-main.d05673bc65",
+    "@dxos/lit-ui": "0.8.4-main.d05673bc65",
+    "@dxos/react-error-boundary": "0.8.4-main.d05673bc65",
+    "@dxos/async": "0.8.4-main.d05673bc65",
+    "@dxos/log": "0.8.4-main.d05673bc65",
+    "@dxos/react-hooks": "0.8.4-main.d05673bc65",
+    "@dxos/react-input": "0.8.4-main.d05673bc65",
+    "@dxos/react-list": "0.8.4-main.d05673bc65",
+    "@dxos/ui-types": "0.8.4-main.d05673bc65",
+    "@dxos/util": "0.8.4-main.d05673bc65"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -104,14 +104,14 @@
     "react-dom": "~19.2.3",
     "tabster": "^8.5.5",
     "vite": "^7.1.11",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae",
-    "@dxos/util": "0.8.4-main.c85a9c8dae",
-    "@dxos/random": "0.8.4-main.c85a9c8dae"
+    "@dxos/random": "0.8.4-main.d05673bc65",
+    "@dxos/util": "0.8.4-main.d05673bc65",
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.c85a9c8dae"
+    "@dxos/ui-theme": "0.8.4-main.d05673bc65"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Card/Card.tsx

@@ -6,7 +6,7 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type HTMLAttributes, type PropsWithChildren, createContext, forwardRef, useContext } from 'react';
 
-import { mx } from '@dxos/ui-theme';
+import { composableProps, mx } from '@dxos/ui-theme';
 import { type Density, type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
@@ -32,23 +32,27 @@ const CardContext = createContext<CardContextValue>({});
 // Root
 //
 
-type CardRootProps = SlottableProps<HTMLDivElement> & {
-  id?: string;
-  border?: boolean;
-  fullWidth?: boolean;
-};
+type CardRootProps = SlottableProps<
+  HTMLDivElement,
+  {
+    id?: string;
+    border?: boolean;
+    fullWidth?: boolean;
+  }
+>;
 
 const CardRoot = forwardRef<HTMLDivElement, CardRootProps>(
-  ({ children, classNames, className, id, asChild, role, border = true, fullWidth, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+  ({ children, id, asChild, role, border = true, fullWidth, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
 
     return (
       <Comp
-        {...props}
+        {...rest}
         {...(id && { 'data-object-id': id })}
         role={role ?? 'group'}
-        className={tx('card.root', { border, fullWidth }, [className, classNames])}
+        className={tx('card.root', { border, fullWidth }, className)}
         ref={forwardedRef}
       >
         <Column.Root gutter='rail'>{children}</Column.Root>
@@ -102,23 +106,17 @@ const CardMenu = <T extends any | void = void>({ context, items }: CardMenuProps
 
 type CardTitleProps = SlottableProps<HTMLDivElement>;
 
-const CardTitle = forwardRef<HTMLDivElement, CardTitleProps>(
-  ({ children, classNames, className, asChild, role, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
+const CardTitle = forwardRef<HTMLDivElement, CardTitleProps>(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
 
-    return (
-      <Comp
-        {...props}
-        role={role ?? 'heading'}
-        className={tx('card.title', {}, [className, classNames])}
-        ref={forwardedRef}
-      >
-        {children}
-      </Comp>
-    );
-  },
-);
+  return (
+    <Comp {...rest} role={role ?? 'heading'} className={tx('card.title', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 //
 // Content
@@ -140,19 +138,18 @@ const CardContent = forwardRef<HTMLDivElement, CardContentProps>(({ children, ro
 // Row
 //
 
-type CardRowProps = SlottableProps<HTMLDivElement> & { icon?: string };
+type CardRowProps = SlottableProps<HTMLDivElement, { icon?: string }>;
 
-const CardRow = forwardRef<HTMLDivElement, CardRowProps>(
-  ({ children, classNames, className, role, icon, ...props }, forwardedRef) => {
-    return (
-      <Column.Row {...props} role={role ?? 'none'} classNames={[classNames, className]} ref={forwardedRef}>
-        {(icon && <CardIcon classNames='text-subdued' icon={icon} />) || <div />}
-        {children}
-        <div />
-      </Column.Row>
-    );
-  },
-);
+const CardRow = forwardRef<HTMLDivElement, CardRowProps>(({ children, role, icon, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  return (
+    <Column.Row {...rest} role={role ?? 'none'} classNames={className} ref={forwardedRef}>
+      {(icon && <CardIcon classNames='text-subdued' icon={icon} />) || <div />}
+      {children}
+      <div />
+    </Column.Row>
+  );
+});
 
 //
 // Section
@@ -161,11 +158,12 @@ const CardRow = forwardRef<HTMLDivElement, CardRowProps>(
 type CardSectionProps = SlottableProps<HTMLDivElement>;
 
 const CardSection = forwardRef<HTMLDivElement, CardSectionProps>(
-  ({ children, classNames, className, asChild, role, ...props }, forwardedRef) => {
+  ({ children, asChild, role, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
 
     return (
-      <Comp {...props} role={role ?? 'none'} className={mx(classNames, className, 'col-span-full')} ref={forwardedRef}>
+      <Comp {...rest} role={role ?? 'none'} className={mx('col-span-full', className)} ref={forwardedRef}>
         {children}
       </Comp>
     );
@@ -176,21 +174,22 @@ const CardSection = forwardRef<HTMLDivElement, CardSectionProps>(
 // Heading
 //
 
-type CardHeadingProps = SlottableProps<HTMLDivElement> & { variant?: 'default' | 'subtitle' };
+type CardHeadingProps = SlottableProps<HTMLDivElement, { variant?: 'default' | 'subtitle' }>;
 
 /**
  * @deprecated Use typography.
  */
 const CardHeading = forwardRef<HTMLDivElement, CardHeadingProps>(
-  ({ children, classNames, className, asChild, role, variant = 'default', ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+  ({ children, asChild, role, variant = 'default', ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
 
     return (
       <Comp
-        {...props}
+        {...rest}
         role={role ?? 'heading'}
-        className={tx('card.heading', { variant }, [classNames, className])}
+        className={tx('card.heading', { variant }, className)}
         ref={forwardedRef}
       >
         {children}
@@ -203,20 +202,16 @@ const CardHeading = forwardRef<HTMLDivElement, CardHeadingProps>(
 // Text
 //
 
-type CardTextProps = SlottableProps<HTMLDivElement> & { truncate?: boolean; variant?: 'default' | 'description' };
+type CardTextProps = SlottableProps<HTMLDivElement, { truncate?: boolean; variant?: 'default' | 'description' }>;
 
 const CardText = forwardRef<HTMLDivElement, CardTextProps>(
-  ({ children, classNames, className, asChild, role, truncate, variant = 'default', ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+  ({ children, asChild, role, truncate, variant = 'default', ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
 
     return (
-      <Comp
-        {...props}
-        role={role ?? 'none'}
-        className={tx('card.text', { variant }, [classNames, className])}
-        ref={forwardedRef}
-      >
+      <Comp {...rest} role={role ?? 'none'} className={tx('card.text', { variant }, className)} ref={forwardedRef}>
         <span className={tx('card.text-span', { variant, truncate })}>{children}</span>
       </Comp>
     );

package/src/components/List/List.stories.tsx

@@ -9,7 +9,7 @@ import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type ReactNode, useCallback, useState } from 'react';
 
-import { getSize, ghostHover, ghostSelected, mx, surfaceShadow } from '@dxos/ui-theme';
+import { getSize, ghostHover, mx, surfaceShadow } from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
@@ -222,7 +222,7 @@ export const SelectableListbox: Story = {
             key={id}
             tabIndex={0}
             selected={selectedId === id}
-            classNames={mx(ghostHover, ghostSelected)}
+            classNames={mx(ghostHover, 'dx-selected')}
             onClick={() => setSelectedId(id)}
             onKeyUp={(event) => handleKeyUp(event, id)}
           >

package/src/components/List/TreeDropIndicator.tsx

@@ -22,7 +22,7 @@ const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['classN
   // TODO(wittjosiah): Stop using left/right here.
   sibling:
     'h-(--line-thickness) left-(--horizontal-indent) right-0 bg-accent-surface before:left-(--negative-terminal-size)',
-  child: 'w-full top-0 bottom-0 border-[length:--line-thickness] before:invisible',
+  child: 'inset-0 border-[length:var(--line-thickness)] before:invisible',
 };
 
 const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {

package/src/components/ScrollArea/ScrollArea.tsx

@@ -7,6 +7,7 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type HTMLAttributes, forwardRef } from 'react';
 
+import { composableProps } from '@dxos/ui-theme';
 import { type AllowedAxis, type SlottableProps, type ThemedClassName } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
@@ -40,7 +41,7 @@ const [ScrollAreaProvider, useScrollAreaContext] = createContext<ScrollAreaConte
 
 const SCROLLAREA_ROOT_NAME = 'ScrollArea.Root';
 
-type ScrollAreaRootProps = SlottableProps<HTMLDivElement> & Partial<ScrollAreaContextType>;
+type ScrollAreaRootProps = SlottableProps<HTMLDivElement, Partial<ScrollAreaContextType>>;
 
 /**
  * ScrollArea provides native scrollbars with custom styling.
@@ -48,10 +49,8 @@ type ScrollAreaRootProps = SlottableProps<HTMLDivElement> & Partial<ScrollAreaCo
 const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(
   (
     {
-      classNames,
-      className,
-      asChild,
       children,
+      asChild,
       orientation = 'vertical',
       autoHide = true,
       margin = false,
@@ -62,13 +61,14 @@ const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(
     },
     forwardedRef,
   ) => {
-    const { tx } = useThemeContext();
+    const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
     const options = { orientation, autoHide, margin, padding, thin, snap };
 
     return (
       <ScrollAreaProvider {...options}>
-        <Comp {...props} className={tx('scrollArea.root', options, [className, classNames])} ref={forwardedRef}>
+        <Comp {...rest} className={tx('scrollArea.root', options, className)} ref={forwardedRef}>
           {children}
         </Comp>
       </ScrollAreaProvider>

package/src/components/Splitter/Splitter.tsx

@@ -7,6 +7,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';
@@ -35,33 +36,16 @@ const [SplitterProvider, useSplitterContext] = createSplitterContext<SplitterCon
 
 const ROOT_NAME = 'Splitter.Root';
 
-type RootProps = SlottableProps<HTMLDivElement> & Partial<SplitterContextValue>;
+type RootProps = SlottableProps<HTMLDivElement, Partial<SplitterContextValue>>;
 
 const Root = forwardRef<HTMLDivElement, ScopedProps<RootProps>>(
-  (
-    {
-      __scopeSplitter,
-      classNames,
-      className,
-      asChild,
-      mode = 'upper',
-      ratio = 0.5,
-      transition = 250,
-      children,
-      ...rootProps
-    },
-    forwardedRef,
-  ) => {
-    const { tx } = useThemeContext();
+  ({ __scopeSplitter, asChild, mode = 'upper', ratio = 0.5, transition = 250, children, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
     return (
       <SplitterProvider scope={__scopeSplitter} mode={mode} ratio={ratio} transition={transition}>
-        <Comp
-          role='none'
-          {...rootProps}
-          ref={forwardedRef}
-          className={tx('splitter.root', {}, [className, classNames])}
-        >
+        <Comp role='none' {...rest} ref={forwardedRef} className={tx('splitter.root', {}, className)}>
           {children}
         </Comp>
       </SplitterProvider>
@@ -77,15 +61,19 @@ Root.displayName = ROOT_NAME;
 
 const PANEL_NAME = 'Splitter.Panel';
 
-type PanelProps = SlottableProps<HTMLDivElement> & {
-  position: 'upper' | 'lower';
-};
+type PanelProps = SlottableProps<
+  HTMLDivElement,
+  {
+    position: 'upper' | 'lower';
+  }
+>;
 
 const Panel = forwardRef<HTMLDivElement, ScopedProps<PanelProps>>(
-  ({ __scopeSplitter, classNames, className, asChild, children, position, style, ...props }, forwardedRef) => {
+  ({ __scopeSplitter, asChild, children, position, style, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
     const { mode, ratio, transition } = useSplitterContext(PANEL_NAME, __scopeSplitter);
     const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
 
     // Calculate position and height based on mode and ratio.
     const isUpper = position === 'upper';
@@ -106,9 +94,9 @@ const Panel = forwardRef<HTMLDivElement, ScopedProps<PanelProps>>(
     return (
       <Comp
         role='none'
-        {...props}
+        {...rest}
         ref={forwardedRef}
-        className={tx('splitter.panel', {}, [className, classNames])}
+        className={tx('splitter.panel', {}, className)}
         style={{
           top,
           height,

package/src/components/Toolbar/Toolbar.tsx

@@ -9,7 +9,7 @@ import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import React, { Fragment, forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { type ToolbarStyleProps } from '@dxos/ui-theme';
+import { composableProps, type ToolbarStyleProps } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
@@ -44,23 +44,25 @@ type ToolbarRootProps = ThemedClassName<
 // TODO(burdon): Implement asChild property.
 const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
   (
-    { classNames, children, density, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, ...props },
+    { children, density, disabled, layoutManaged, textBlockWidth: textBlockWidthProp, orientation, ...props },
     forwardedRef,
   ) => {
+    const { className, dir: _, ...rest } = composableProps(props);
     const { tx } = useThemeContext();
     const InnerRoot = textBlockWidthProp ? 'div' : Fragment;
     const innerRootProps = textBlockWidthProp
       ? {
           role: 'none',
-          className: tx('toolbar.inner', { layoutManaged }, classNames),
+          className: tx('toolbar.inner', { layoutManaged }, className),
         }
       : {};
 
     return (
       <ToolbarPrimitive.Root
-        {...props}
-        data-arrow-keys={props.orientation === 'vertical' ? 'up down' : 'left right'}
-        className={tx('toolbar.root', { density, disabled, layoutManaged }, classNames)}
+        {...rest}
+        orientation={orientation}
+        data-arrow-keys={orientation === 'vertical' ? 'up down' : 'left right'}
+        className={tx('toolbar.root', { density, disabled, layoutManaged }, className)}
         ref={forwardedRef}
       >
         <InnerRoot {...innerRootProps}>{children}</InnerRoot>
@@ -75,17 +77,16 @@ const ToolbarRoot = forwardRef<HTMLDivElement, ToolbarRootProps>(
 
 type ToolbarTextProps = SlottableProps<HTMLDivElement>;
 
-const ToolbarText = forwardRef<HTMLDivElement, ToolbarTextProps>(
-  ({ classNames, className, asChild, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
-    return (
-      <Comp {...props} className={tx('toolbar.text', {}, [className, classNames])} ref={forwardedRef}>
-        {children}
-      </Comp>
-    );
-  },
-);
+const ToolbarText = forwardRef<HTMLDivElement, ToolbarTextProps>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+  return (
+    <Comp {...rest} className={tx('toolbar.text', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
 
 //
 // Button

package/src/exemplars/slot.stories.tsx

@@ -3,14 +3,14 @@
 //
 
 import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { type PropsWithChildren, forwardRef } from 'react';
+import React, { HTMLAttributes, type PropsWithChildren, forwardRef } from 'react';
 
-import { useComposableProps } from '@dxos/ui-theme';
+import { composableProps } from '@dxos/ui-theme';
 import { type ComposableProps, type SlottableProps, type ThemedClassName } from '@dxos/ui-types';
 
 import { withTheme } from '../testing';
+import { Slot } from '@radix-ui/react-slot';
 
 /**
  * Composition
@@ -20,59 +20,49 @@ import { withTheme } from '../testing';
  * https://www.radix-ui.com/primitives/docs/guides/composition
  */
 
-// Outer primitive (like Tooltip.Trigger or Focus.Group).
 const Outer = forwardRef<HTMLDivElement, SlottableProps<HTMLDivElement>>(
   ({ children, asChild, ...props }, forwardedRef) => {
-    const { className, ...rest } = useComposableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Comp {...rest} className={className} data-outer='true' ref={forwardedRef}>
+      <Comp {...composableProps<HTMLDivElement>(props, { role: 'none' })} ref={forwardedRef}>
         {children}
       </Comp>
     );
   },
 );
 
-// Middle primitive (like Dialog.Trigger or Mosaic.Cell).
 const Middle = forwardRef<HTMLDivElement, SlottableProps<HTMLDivElement>>(
   ({ children, asChild, ...props }, forwardedRef) => {
-    const { className, ...rest } = useComposableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Comp {...rest} className={className} data-middle='true' ref={forwardedRef}>
+      <Comp {...composableProps<HTMLDivElement>(props, { role: 'none' })} ref={forwardedRef}>
         {children}
       </Comp>
     );
   },
 );
 
-// Leaf component (like Card.Root).
-const Leaf = forwardRef<HTMLButtonElement, ComposableProps<PropsWithChildren>>(
+const Leaf = forwardRef<HTMLButtonElement, ComposableProps<HTMLButtonElement>>(
   ({ children, ...props }, forwardedRef) => {
-    const { className, ...rest } = useComposableProps(props);
     return (
-      <button {...rest} className={className} ref={forwardedRef}>
+      <button {...composableProps<HTMLButtonElement>(props, { role: 'none' })} ref={forwardedRef}>
         {children}
       </button>
     );
   },
 );
 
-// Test 1: Single asChild.
 const TestSingle = (props: ThemedClassName<{ role?: string }>) => {
-  const { className, ...rest } = useComposableProps(props);
   return (
-    <Outer asChild {...rest} className={className}>
-      <Leaf>Single asChild</Leaf>
+    <Outer asChild {...composableProps<HTMLDivElement>(props, { role: 'none' })}>
+      <Leaf>Single asChild (non-compliant — see console)</Leaf>
     </Outer>
   );
 };
 
-// Test 2: Nested asChild.
 const TestNested = (props: ThemedClassName<{ role?: string }>) => {
-  const { className, ...rest } = useComposableProps(props);
   return (
-    <Outer asChild {...rest} className={className}>
+    <Outer asChild {...composableProps<HTMLDivElement>(props, { role: 'none' })}>
       <Middle asChild>
         <Leaf>Nested asChild</Leaf>
       </Middle>
@@ -80,11 +70,9 @@ const TestNested = (props: ThemedClassName<{ role?: string }>) => {
   );
 };
 
-// Test 3: Complex.
 const TestInner = (props: ThemedClassName<{ role?: string }>) => {
-  const { className, ...rest } = useComposableProps(props);
   return (
-    <Outer asChild {...rest} className={className}>
+    <Outer asChild {...composableProps<HTMLDivElement>(props, { role: 'none' })}>
       <Middle asChild>
         <Leaf>
           <div role='none'>Leaf</div>

package/src/primitives/Column/Column.stories.tsx

@@ -32,6 +32,12 @@ const DefaultStory = () => {
         <h1 className='p-1 bg-blue-500 text-black'>Header</h1>
       </Column.Segment>
 
+      <Column.Row>
+        <div className='p-1 bg-blue-500'>A</div>
+        <div className='p-1 bg-red-500'>B</div>
+        <div className='p-1 bg-blue-500'>C</div>
+      </Column.Row>
+
       <Column.Segment asChild>
         <div className='py-2'>
           <Input.Root>