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

package/src/components/Card/Card.tsx

@@ -5,47 +5,26 @@
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import DOMPurify from 'dompurify';
-import React, {
-  CSSProperties,
-  MouseEventHandler,
-  type PropsWithChildren,
-  createContext,
-  forwardRef,
-  useContext,
-  useMemo,
-} from 'react';
-
-import { composable, composableProps, iconSize, mx, slottable } from '@dxos/ui-theme';
+import React, { CSSProperties, JSX, MouseEventHandler, type ReactNode, forwardRef, useId, useMemo } from 'react';
+
+import { iconSize } from '@dxos/ui-theme';
 import { type Density } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
-import { Column } from '../../primitives';
+import { composable, composableProps, slottable } from '../../util';
 import { type ThemedClassName } from '../../util';
 import { Button } from '../Button';
-import { Icon, type IconProps } from '../Icon';
+import { Column } from '../Column';
+import { Icon, IconBlock, type IconBlockProps, type IconProps } from '../Icon';
 import { Image } from '../Image';
 import {
   Toolbar,
-  ToolbarCloseIconButtonProps,
+  type ToolbarActionIconButtonProps,
   ToolbarDragHandleProps,
-  type ToolbarMenuItem,
   type ToolbarMenuProps,
   type ToolbarRootProps,
 } from '../Toolbar';
 
-//
-// Context
-//
-
-const CARD_NAME = 'Card';
-
-type CardContextValue = {
-  menuItems?: CardMenuItem<any>[];
-};
-
-/** @deprecated Use context for menus. */
-const CardContext = createContext<CardContextValue>({});
-
 //
 // Root
 //
@@ -83,7 +62,7 @@ const CardRoot = composable<HTMLDivElement, CardRootProps>(
     return (
       <Column.Root
         asChild
-        gutter={density === 'coarse' ? 'lg' : 'md'}
+        gutter={density === 'lg' ? 'lg' : density === 'sm' || density === 'xs' ? 'sm' : 'md'}
         classNames={tx('card.root', { border, fullWidth }, className)}
         role={role ?? 'group'}
       >
@@ -98,24 +77,29 @@ const CardRoot = composable<HTMLDivElement, CardRootProps>(
 CardRoot.displayName = CARD_ROOT_NAME;
 
 //
-// Toolbar
+// Header
 //
 
-const CARD_TOOLBAR_NAME = 'Card.Toolbar';
+const CARD_HEADER_NAME = 'Card.Header';
 
-type CardToolbarProps = ToolbarRootProps;
+type CardHeaderProps = ToolbarRootProps;
 
-const CardToolbar = composable<HTMLDivElement, CardToolbarProps>(({ children, classNames, ...props }, forwardedRef) => {
+/**
+ * Top "header" slot of a Card. Despite the name, this renders as an ARIA
+ * toolbar (`role="toolbar"`) so its action children get keyboard navigation
+ * for free — `<header>` is allowed to contain a toolbar.
+ */
+const CardHeader = composable<HTMLDivElement, CardHeaderProps>(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
 
   return (
-    <Toolbar.Root {...props} style={iconSize(5)} classNames={[tx('card.toolbar', {}), classNames]} ref={forwardedRef}>
+    <Toolbar.Root {...props} style={iconSize(5)} classNames={[tx('card.header', {}), classNames]} ref={forwardedRef}>
       {children}
     </Toolbar.Root>
   );
 });
 
-CardToolbar.displayName = CARD_TOOLBAR_NAME;
+CardHeader.displayName = CARD_HEADER_NAME;
 
 //
 // DragHandle
@@ -127,7 +111,7 @@ type CardDragHandleProps = ToolbarDragHandleProps;
 
 const CardDragHandle = forwardRef<HTMLButtonElement, CardDragHandleProps>((props, forwardedRef) => {
   return (
-    <CardIconBlock padding>
+    <CardIconBlock>
       <Toolbar.DragHandle {...props} ref={forwardedRef} />
     </CardIconBlock>
   );
@@ -136,22 +120,22 @@ const CardDragHandle = forwardRef<HTMLButtonElement, CardDragHandleProps>((props
 CardDragHandle.displayName = CARD_DRAG_HANDLE_NAME;
 
 //
-// CloseIconButton
+// ActionIconButton
 //
 
-const CARD_CLOSE_ICON_BUTTON_NAME = 'Card.CloseIconButton';
+const CARD_ACTION_ICON_BUTTON_NAME = 'Card.ActionIconButton';
 
-type CloseIconButtonProps = ToolbarCloseIconButtonProps;
+type CardActionIconButtonProps = ToolbarActionIconButtonProps;
 
-const CloseIconButton = forwardRef<HTMLButtonElement, CloseIconButtonProps>((props, forwardedRef) => {
+const CardActionIconButton = forwardRef<HTMLButtonElement, CardActionIconButtonProps>((props, forwardedRef) => {
   return (
-    <CardIconBlock padding>
-      <Toolbar.CloseIconButton {...props} ref={forwardedRef} />
+    <CardIconBlock>
+      <Toolbar.ActionIconButton {...props} ref={forwardedRef} />
     </CardIconBlock>
   );
 });
 
-CloseIconButton.displayName = CARD_CLOSE_ICON_BUTTON_NAME;
+CardActionIconButton.displayName = CARD_ACTION_ICON_BUTTON_NAME;
 
 //
 // Menu
@@ -159,22 +143,17 @@ CloseIconButton.displayName = CARD_CLOSE_ICON_BUTTON_NAME;
 
 const CARD_MENU_NAME = 'Card.Menu';
 
-type CardMenuItem<T extends any | void = void> = ToolbarMenuItem<T>;
-
 type CardMenuProps<T extends any | void = void> = ToolbarMenuProps<T>;
 
-const CardMenu = <T extends any | void = void>({ context, items, ...props }: CardMenuProps<T>) => {
-  const { menuItems } = useContext(CardContext) ?? {};
-  const combinedItems = [...(items ?? []), ...((menuItems as CardMenuItem<T>[]) ?? [])];
-
+function CardMenu<T extends any | void = void>({ context, items, ...props }: CardMenuProps<T>) {
   return (
-    <CardIconBlock padding>
-      <Toolbar.Menu {...props} context={context} items={combinedItems} />
+    <CardIconBlock>
+      <Toolbar.Menu {...props} context={context} items={items ?? []} />
     </CardIconBlock>
   );
-};
+}
 
-(CardMenu as any).displayName = CARD_MENU_NAME;
+CardMenu.displayName = CARD_MENU_NAME;
 
 //
 // Icon
@@ -182,15 +161,15 @@ const CardMenu = <T extends any | void = void>({ context, items, ...props }: Car
 
 const CARD_ICON_NAME = 'Card.Icon';
 
-const CardIcon = (props: IconProps) => {
+function CardIcon(props: IconProps) {
   return (
     <CardIconBlock>
       <Icon {...props} />
     </CardIconBlock>
   );
-};
+}
 
-(CardIcon as any).displayName = CARD_ICON_NAME;
+CardIcon.displayName = CARD_ICON_NAME;
 
 //
 // IconBlock
@@ -198,17 +177,9 @@ const CardIcon = (props: IconProps) => {
 
 const CARD_ICON_BLOCK_NAME = 'Card.IconBlock';
 
-const CardIconBlock = forwardRef<HTMLDivElement, ThemedClassName<PropsWithChildren<{ padding?: boolean }>>>(
-  ({ classNames, children, padding, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-
-    return (
-      <div {...props} className={tx('card.icon-block', { padding }, classNames)} ref={forwardedRef}>
-        {children}
-      </div>
-    );
-  },
-);
+const CardIconBlock = forwardRef<HTMLDivElement, IconBlockProps>((props, forwardedRef) => {
+  return <IconBlock {...props} ref={forwardedRef} />;
+});
 
 CardIconBlock.displayName = CARD_ICON_BLOCK_NAME;
 
@@ -233,48 +204,24 @@ const CardTitle = slottable<HTMLDivElement>(({ children, asChild, ...props }, fo
 CardTitle.displayName = CARD_TITLE_NAME;
 
 //
-// Content
-//
-
-const CARD_CONTENT_NAME = 'Card.Content';
-
-const CardContent = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot : Primitive.div;
-  const { tx } = useThemeContext();
-
-  return (
-    <Comp {...rest} className={tx('card.content', {}, className)} ref={forwardedRef}>
-      {children}
-    </Comp>
-  );
-});
-
-CardContent.displayName = CARD_CONTENT_NAME;
-
-//
-// Row
+// Body
 //
 
-const CARD_ROW_NAME = 'Card.Row';
-
-type CardRowProps = { icon?: string; fullWidth?: boolean };
+const CARD_BODY_NAME = 'Card.Body';
 
-// TODO(burdon): fullWidth should mean no columns.
-const CardRow = slottable<HTMLDivElement, CardRowProps>(({ children, asChild, icon, ...props }, forwardedRef) => {
+const CardBody = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
   const { className, ...rest } = composableProps(props);
   const Comp = asChild ? Slot : Primitive.div;
   const { tx } = useThemeContext();
 
   return (
-    <Comp {...rest} className={tx('card.row', {}, className)} ref={forwardedRef}>
-      {(icon && <CardIcon classNames='text-subdued' icon={icon} size={4} />) || <div />}
+    <Comp {...rest} className={tx('card.body', {}, className)} ref={forwardedRef}>
       {children}
     </Comp>
   );
 });
 
-CardRow.displayName = CARD_ROW_NAME;
+CardBody.displayName = CARD_BODY_NAME;
 
 //
 // Section
@@ -282,53 +229,81 @@ CardRow.displayName = CARD_ROW_NAME;
 
 const CARD_SECTION_NAME = 'Card.Section';
 
+type CardSectionProps = { title?: ReactNode };
+
 /**
- * @deprecated Merge with Card.Row fullWidth
+ * A labeled grouping of card content. `display: contents` keeps children aligned
+ * to the Card's column grid (like `Card.Body`); when `title` is provided,
+ * renders a subheading row at the top and exposes the group with
+ * `role='group' aria-labelledby=…` for screen readers.
  */
-const CardSection = slottable<HTMLDivElement>(({ children, asChild, role, ...props }, forwardedRef) => {
-  const { className, ...rest } = composableProps(props);
-  const Comp = asChild ? Slot : Primitive.div;
+const CardSection = slottable<HTMLDivElement, CardSectionProps>(
+  ({ children, asChild, title, role, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    const titleId = useId();
 
-  return (
-    <Comp {...rest} role={role ?? 'none'} className={mx('col-span-full', className)} ref={forwardedRef}>
-      {children}
-    </Comp>
-  );
-});
+    return (
+      <Comp
+        {...rest}
+        role={role ?? (title ? 'group' : 'none')}
+        aria-labelledby={title ? titleId : undefined}
+        className={tx('card.section', {}, className)}
+        ref={forwardedRef}
+      >
+        {title && (
+          <div id={titleId} className={tx('card.section-title', {})}>
+            {title}
+          </div>
+        )}
+        {children}
+      </Comp>
+    );
+  },
+);
 
 CardSection.displayName = CARD_SECTION_NAME;
 
 //
-// Heading
+// Row
 //
 
-const CARD_HEADING_NAME = 'Card.Heading';
+const CARD_ROW_NAME = 'Card.Row';
 
-type CardHeadingProps = { variant?: 'default' | 'subtitle' };
+type CardRowProps = { icon?: string | JSX.Element; fullWidth?: boolean };
 
 /**
- * @deprecated Use typography.
+ * A row inside a Card.
+ * - Default: spans all 3 columns and establishes a subgrid so children align to the Card's columns.
+ *   An optional `icon` lands in the first column; when omitted, the first column is left empty.
+ * - `fullWidth`: spans all columns without a subgrid — children do their own internal layout.
+ *   The `icon` prop is ignored in this mode.
  */
-const CardHeading = slottable<HTMLDivElement, CardHeadingProps>(
-  ({ children, asChild, role, variant = 'default', ...props }, forwardedRef) => {
+const CardRow = slottable<HTMLDivElement, CardRowProps>(
+  ({ children, asChild, icon: iconProp, fullWidth, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
     const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
-    const { tx } = useThemeContext();
+    const icon =
+      typeof iconProp === 'string' ? (
+        <CardIcon classNames='text-subdued' icon={iconProp as string} size={4} />
+      ) : iconProp ? (
+        iconProp
+      ) : (
+        <div />
+      );
 
     return (
-      <Comp
-        {...rest}
-        role={role ?? 'heading'}
-        className={tx('card.heading', { variant }, className)}
-        ref={forwardedRef}
-      >
+      <Comp {...rest} className={tx('card.row', { fullWidth }, className)} ref={forwardedRef}>
+        {!fullWidth && icon}
         {children}
       </Comp>
     );
   },
 );
 
-CardHeading.displayName = CARD_HEADING_NAME;
+CardRow.displayName = CARD_ROW_NAME;
 
 //
 // Text
@@ -340,9 +315,9 @@ type CardTextProps = { truncate?: boolean; variant?: 'default' | 'description' }
 
 const CardText = slottable<HTMLDivElement, CardTextProps>(
   ({ children, asChild, role, truncate, variant = 'default', ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
     const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
-    const { tx } = useThemeContext();
 
     return (
       <Comp {...rest} role={role ?? 'none'} className={tx('card.text', { variant }, className)} ref={forwardedRef}>
@@ -360,13 +335,13 @@ CardText.displayName = CARD_TEXT_NAME;
 
 const CARD_HTML_NAME = 'Card.Html';
 
-type CardHtmlProps = { html: string; variant?: 'default' | 'description' };
+type CardHtmlProps = { html?: string; variant?: 'default' | 'description' };
 
 /**
  * Renders sanitized HTML content inside a card text slot.
  * Uses DOMPurify to prevent XSS from untrusted markup (e.g. RSS feed content).
  */
-const CardHtml = ({ html, variant = 'default', ...props }: CardHtmlProps & ThemedClassName<object>) => {
+function CardHtml({ html = '', variant = 'default', ...props }: CardHtmlProps & ThemedClassName<object>) {
   const { tx } = useThemeContext();
   const sanitized = useMemo(() => DOMPurify.sanitize(html), [html]);
 
@@ -378,9 +353,9 @@ const CardHtml = ({ html, variant = 'default', ...props }: CardHtmlProps & Theme
       dangerouslySetInnerHTML={{ __html: sanitized }}
     />
   );
-};
+}
 
-(CardHtml as any).displayName = CARD_HTML_NAME;
+CardHtml.displayName = CARD_HTML_NAME;
 
 //
 // Poster
@@ -402,7 +377,7 @@ type CardPosterProps = ThemedClassName<
   } & Partial<{ image: string; icon: string }>
 >;
 
-const CardPoster = (props: CardPosterProps) => {
+function CardPoster(props: CardPosterProps) {
   const { tx } = useThemeContext();
   const aspect = props.aspect === 'auto' ? 'aspect-auto' : 'aspect-video';
 
@@ -426,9 +401,9 @@ const CardPoster = (props: CardPosterProps) => {
       </div>
     );
   }
-};
+}
 
-(CardPoster as any).displayName = CARD_POSTER_NAME;
+CardPoster.displayName = CARD_POSTER_NAME;
 
 //
 // Action
@@ -438,7 +413,7 @@ const CARD_ACTION_NAME = 'Card.Action';
 
 type CardActionProps = { icon?: string; label: string; actionIcon?: string; onClick?: () => void };
 
-const CardAction = ({ icon, actionIcon = 'ph--arrow-right--regular', label, onClick }: CardActionProps) => {
+function CardAction({ icon, actionIcon = 'ph--arrow-right--regular', label, onClick }: CardActionProps) {
   const { tx } = useThemeContext();
   return (
     <Button variant='ghost' classNames={tx('card.action', {})} onClick={onClick}>
@@ -447,9 +422,9 @@ const CardAction = ({ icon, actionIcon = 'ph--arrow-right--regular', label, onCl
       {actionIcon && <CardIcon icon={actionIcon} size={4} />}
     </Button>
   );
-};
+}
 
-(CardAction as any).displayName = CARD_ACTION_NAME;
+CardAction.displayName = CARD_ACTION_NAME;
 
 //
 // Link
@@ -459,7 +434,7 @@ const CARD_LINK_NAME = 'Card.Link';
 
 type CardLinkProps = { label: string; href: string };
 
-const CardLink = ({ label, href }: CardLinkProps) => {
+function CardLink({ label, href }: CardLinkProps) {
   const { tx } = useThemeContext();
   return (
     <a className={tx('card.link', {})} data-variant='ghost' href={href} target='_blank' rel='noreferrer'>
@@ -468,9 +443,9 @@ const CardLink = ({ label, href }: CardLinkProps) => {
       <CardIcon classNames='invisible group-hover:visible' icon='ph--arrow-square-out--regular' />
     </a>
   );
-};
+}
 
-(CardLink as any).displayName = CARD_LINK_NAME;
+CardLink.displayName = CARD_LINK_NAME;
 
 //
 // Card
@@ -479,24 +454,23 @@ const CardLink = ({ label, href }: CardLinkProps) => {
 export const Card = {
   Root: CardRoot,
 
-  // Toolbar
-  Toolbar: CardToolbar,
-  ToolbarIconButton: Toolbar.IconButton,
-  ToolbarSeparator: Toolbar.Separator,
+  // Header
+  Header: CardHeader,
 
-  // Toolbar blocks
+  // Header parts
   IconBlock: CardIconBlock,
   DragHandle: CardDragHandle,
-  CloseIconButton: CloseIconButton,
+  ActionIconButton: CardActionIconButton,
   Menu: CardMenu,
   Icon: CardIcon,
   Title: CardTitle,
 
-  // Content
-  Content: CardContent,
-  Row: CardRow,
+  // Body
+  Body: CardBody,
   Section: CardSection,
-  Heading: CardHeading,
+  Row: CardRow,
+
+  // Body parts
   Text: CardText,
   Html: CardHtml,
   Poster: CardPoster,
@@ -505,10 +479,10 @@ export const Card = {
 };
 
 export type {
-  CardContextValue,
   CardRootProps,
-  CardToolbarProps,
+  CardHeaderProps,
   CardDragHandleProps,
-  CloseIconButtonProps,
+  CardActionIconButtonProps,
   CardMenuProps,
+  CardSectionProps,
 };

package/src/components/Carousel/Carousel.tsx

@@ -17,11 +17,11 @@ import React, {
 
 import { mx } from '@dxos/ui-theme';
 
+import { useTranslation } from '../../primitives';
 import { translationKey } from '../../translations';
 import { type ThemedClassName } from '../../util';
 import { IconButton } from '../Button';
 import { MediaPlayer, type MediaKind } from '../MediaPlayer';
-import { useTranslation } from '../ThemeProvider';
 
 // TODO(burdon): Move per-element class strings to `@dxos/ui-theme` (theme tokens)
 // so callers can re-theme via the same mechanism the rest of `react-ui` uses.
@@ -119,7 +119,7 @@ const CarouselRoot = ({
        * its content height. With no parent height constraint, the `1fr` row simply tracks
        * row-1 content — preserving the existing aspect-video behaviour for unbounded use.
        */}
-      {/* TODO(burdon): Move to ui-theme. */}
+      {/* TODO(burdon): Move to Carousel.theme.ts */}
       <div
         className={mx(
           'w-full grid grid-cols-[min-content_1fr_min-content] grid-rows-[minmax(0,1fr)_auto] gap-4 items-center',
@@ -192,10 +192,6 @@ export type CarouselSlideProps = ThemedClassName<{
   kind?: MediaKind;
   /** Accessible label / `<img alt>` fallback. */
   alt?: string;
-  /** Class names forwarded to the inner `<img>` when MediaPlayer resolves to an image. */
-  imgClassNames?: string;
-  /** Class names forwarded to the inner `<video>` / `<audio>` / `<iframe>`. */
-  mediaClassNames?: string;
   controls?: boolean;
   autoPlay?: boolean;
   loop?: boolean;
@@ -209,8 +205,6 @@ const CarouselSlide = ({
   src,
   kind,
   alt,
-  imgClassNames,
-  mediaClassNames,
   controls,
   autoPlay,
   loop,
@@ -229,8 +223,6 @@ const CarouselSlide = ({
         kind={kind}
         alt={alt}
         classNames='w-full h-full'
-        imgClassNames={mx('object-cover', imgClassNames)}
-        mediaClassNames={mediaClassNames}
         controls={controls}
         autoPlay={autoPlay}
         loop={loop}

package/src/components/Clipboard/CopyButton.tsx

@@ -6,9 +6,9 @@ import React from 'react';
 
 import { mx, osTranslations } from '@dxos/ui-theme';
 
+import { useTranslation } from '../../primitives';
 import { Button, type ButtonProps, IconButton } from '../Button';
 import { Icon, type IconProps } from '../Icon';
-import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
 import { useClipboard } from './ClipboardProvider';
 

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

@@ -71,7 +71,7 @@ const DefaultStory = () => {
 };
 
 const meta: Meta = {
-  title: 'ui/react-ui-core/primitives/Column',
+  title: 'ui/react-ui-core/components/Column',
   render: DefaultStory,
   decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
   parameters: {

package/src/components/Column/Column.theme.ts

@@ -0,0 +1,48 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction } from '@dxos/ui-types';
+
+import { withColumn } from './withColumn';
+
+export type ColumnStyleProps = {};
+
+const root: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('dx-column-root grid', ...etc);
+};
+
+/**
+ * Three-column icon-slot row: spans all 3 columns of the parent Column.Root grid.
+ * Uses CSS subgrid to inherit column sizing from the parent Column.
+ * Children map to: [col-1: icon/slot] [col-2: content] [col-3: icon/action].
+ * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
+ */
+const row: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-3 grid grid-cols-subgrid', ...etc);
+};
+
+/**
+ * Bleed placement: spans all 3 columns of the parent Column.Root grid (gutter-to-gutter).
+ * Use for `ScrollArea`, full-width dividers, tables, or any content that should ignore gutters.
+ */
+const bleed: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx('col-span-full grid grid-cols-subgrid min-h-0', ...etc);
+};
+
+/**
+ * Center placement: places the element in column 2 (the central track between gutters) of the
+ * parent Column.Root grid. Does NOT use subgrid — placement is explicit on this element only.
+ * Safe to nest arbitrary compound components (including those that render `display: contents`).
+ */
+const center: ComponentFunction<ColumnStyleProps> = (_, ...etc) => {
+  return mx(withColumn.center(), 'min-h-0', ...etc);
+};
+
+export const columnTheme = {
+  root,
+  row,
+  bleed,
+  center,
+};

package/src/{primitives → components}/Column/Column.tsx

@@ -6,10 +6,10 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type CSSProperties } from 'react';
 
-import { composableProps, slottable } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
 
 //
 // Root
@@ -57,6 +57,7 @@ const ColumnRoot = slottable<HTMLDivElement, ColumnRootProps>(
         role={role ?? 'none'}
         style={
           {
+            ...rest.style,
             '--gutter': gutterSize,
             '--dx-col': '2 / span 1',
             gridTemplateColumns: [gutterSize, 'minmax(0,1fr)', gutterSize].join(' '),

package/src/{primitives → components}/Column/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Column';
+export * from './withColumn';