@dxos/react-ui 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

package/src/playground/Custom.stories.tsx

@@ -2,23 +2,12 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Button, IconButton, type ButtonProps, Tooltip } from '../components';
+import { Button, type ButtonProps, IconButton, Tooltip } from '../components';
 import { withTheme } from '../testing';
 
-// TODO(burdon): Change density to 3 or 4 sizes: (large, medium, small; or 22, 28, 32, 40)
-// TODO(burdon): IconButton should be square if no text.
-// TODO(burdon): IconButton icon should be auto-sized based on density.
-
-// TODO(burdon): Remove custom padding from all Buttons.
-
-// TODO(burdon): Forms w/ labels.
-// TODO(burdon): Card preview with sections.
-
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
     <Tooltip.Provider>
@@ -39,7 +28,7 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
               label='Test'
               icon='ph--atom--regular'
               iconOnly
-              size={7}
+              size={6}
               density='coarse'
               classNames='px-1.5'
             />
@@ -54,7 +43,7 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton {...args} label='Test' icon='ph--atom--regular' size={5} density='fine' classNames='px-2' />
+            <IconButton {...args} label='Test' icon='ph--atom--regular' density='fine' classNames='px-2' />
           </div>
           <div className='flex justify-center'>
             <IconButton
@@ -62,7 +51,6 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
               label='Test'
               icon='ph--atom--regular'
               iconOnly
-              size={5}
               density='fine'
               classNames='py-1 px-1.5'
             />
@@ -72,7 +60,7 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
         {/* Small */}
         <div className='grid grid-cols-3 gap-4'>
           <div className='flex justify-center'>
-            <Button {...args} density='fine' classNames={'!h-[24px] !text-[14px] p-0 px-1.5 min-bs-0'}>
+            <Button {...args} density='fine' classNames={'!h-[24px] !text-[14px] p-0 px-1.5 min-h-0'}>
               {children}
             </Button>
           </div>
@@ -83,7 +71,7 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
               icon='ph--atom--regular'
               density='fine'
               size={4}
-              classNames={'!h-[24px] !text-[14px] p-1 min-bs-0 gap-0.5'}
+              classNames={'!h-[24px] !text-[14px] p-1 min-h-0 gap-0.5'}
             />
           </div>
           <div className='flex justify-center'>
@@ -94,25 +82,24 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
               iconOnly
               density='fine'
               size={4}
-              classNames={'!h-[24px] !text-[14px] p-1 min-bs-0'}
+              classNames={'!h-[24px] !text-[14px] p-1 min-h-0'}
             />
           </div>
         </div>
 
         {/* TODO(burdon): Full variant with max width. */}
         <div className='flex justify-center'>
-          <Button classNames='w-full max-w-[15rem] rounded' variant='default'>
+          <Button classNames='w-full max-w-[15rem] rounded-sm' variant='default'>
             Test
           </Button>
         </div>
         <div className='flex justify-center'>
           {/* TODO(burdon): Option to have button on RHS. Default size for icon should be 5 for this (medium) density. */}
           <IconButton
-            classNames='w-full max-w-[15rem] rounded'
+            classNames='w-full max-w-[15rem] rounded-sm'
             variant='primary'
             icon='ph--arrows-clockwise--regular'
             label='Test'
-            size={5}
           />
         </div>
       </div>
@@ -120,13 +107,15 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   );
 };
 
-const meta: Meta<typeof Button> = {
-  title: 'ui/react-ui-core/Playground/Custom',
+const meta = {
+  title: 'ui/react-ui-core/playground/Custom',
   component: Button,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { layout: 'centered' },
-};
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Button>;
 
 export default meta;
 

package/src/playground/Typography.stories.tsx

@@ -2,15 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../testing';
 
 const DefaultStory = () => {
   return (
-    <div className='mli-auto p-8 max-is-[60rem] space-b-4'>
+    <div className='mx-auto p-8 max-w-[60rem] space-b-4'>
       <h1 className='text-4xl font-medium'>
         Việc <span className='italic'>thừa</span> nhận{' '}
         <span className='font-mono bg-neutral-500/10'>
@@ -43,13 +42,16 @@ const DefaultStory = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Playground/Typography',
+const meta = {
+  title: 'ui/react-ui-core/playground/Typography',
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

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

@@ -0,0 +1,78 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Input, ScrollArea } from '../../components';
+import { withLayout, withTheme } from '../../testing';
+import { Flex } from '../Flex';
+
+import { Column } from './Column';
+
+const List = () => {
+  return (
+    <ScrollArea.Root margin role='list'>
+      <ScrollArea.Viewport>
+        {Array.from({ length: 100 }).map((_, i) => (
+          <div key={i} role='listitem' className='p-1 hover:bg-hover-surface'>
+            Item {i}
+          </div>
+        ))}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+const DefaultStory = () => {
+  return (
+    <Column.Root className='h-full overflow-hidden' gutter='md'>
+      <Column.Segment asChild>
+        <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>
+            <Input.TextInput placeholder='Search' />
+          </Input.Root>
+        </div>
+      </Column.Segment>
+
+      <List />
+
+      <Column.Segment asChild>
+        <Flex column>
+          <h1 className='p-1 bg-red-500 text-black'>Section with overflow</h1>
+          <pre className='p-1 text-xs text-subdued overflow-auto'>{new Error().stack}</pre>
+        </Flex>
+      </Column.Segment>
+
+      <Column.Segment asChild>
+        <div className='p-1 bg-green-500 text-black'>Footer</div>
+      </Column.Segment>
+    </Column.Root>
+  );
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/primitives/Column',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-[25rem]' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/primitives/Column/Column.tsx

@@ -0,0 +1,133 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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';
+
+//
+// Root
+//
+
+const COLUMN_ROOT_NAME = 'Column.Root';
+
+type GutterSize = 'sm' | 'md' | 'lg';
+
+const gutterSizes: Record<GutterSize, string> = {
+  sm: 'var(--dx-gutter-sm)',
+  md: 'var(--dx-gutter-md)',
+  lg: 'var(--dx-gutter-lg)',
+};
+
+type ColumnRootProps = SlottableProps<HTMLDivElement, { gutter?: GutterSize }>;
+
+/**
+ * Creates a vertical channel with left/right gutter columns.
+ * The `--gutter` CSS variable is set for nested components (Dialog, ScrollArea, Form.Viewport, etc.).
+ * Use `gutter='sm'` for compact layouts; `gutter='md'` (default) for whitespace layouts (Dialog); `gutter='lg'` for wider spacing.
+ * Direct children must use Column.Row (spans all 3 cols) or Column.Segment (center col only).
+ *
+ * NOTE: The theme applies a `dx-column` marker class to this element.
+ * ScrollArea.Root detects this via `[.dx-column_&]:col-span-full` to span all 3 grid columns,
+ * ensuring scroll content extends under the gutters rather than being confined to the center column.
+ * The `--gutter` CSS variable is also consumed by ScrollArea's `margin` option to align scrollbar spacing.
+ */
+const Root = forwardRef<HTMLDivElement, ColumnRootProps>(
+  ({ children, asChild, role, gutter = 'md', ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    const gutterSize = gutterSizes[gutter];
+    return (
+      <Comp
+        {...rest}
+        role={role ?? 'none'}
+        style={
+          {
+            '--gutter': gutterSize,
+            gridTemplateColumns: [gutterSize, 'minmax(0,1fr)', gutterSize].join(' '),
+          } as CSSProperties
+        }
+        className={tx('column.root', { gutter }, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+Root.displayName = COLUMN_ROOT_NAME;
+
+//
+// Row
+//
+
+const COLUMN_ROW_NAME = 'Column.Row';
+
+type ColumnRowProps = SlottableProps<HTMLDivElement>;
+
+/**
+ * Spans all 3 columns of the parent Column.Root and uses CSS subgrid to inherit their sizing.
+ * 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>(({ 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;
+
+//
+// Segment
+//
+
+const COLUMN_SEGMENT_NAME = 'Column.Segment';
+
+type ColumnSegmentProps = SlottableProps<HTMLDivElement>;
+
+/**
+ * Occupies only the center column (col-2) of the parent Column.Root grid.
+ * Use `asChild` to merge grid positioning onto the child element, eliminating the wrapper div.
+ * NOTE: Must not use overflow-hidden here since it will clip input focus rings.
+ */
+const Segment = forwardRef<HTMLDivElement, ColumnSegmentProps>(
+  ({ children, asChild, role, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
+    // With asChild, merge col-start-2 directly onto the child — no contents wrapper needed.
+    return (
+      <Comp {...rest} role={role ?? 'none'} className={tx('column.segment', {}, className)} ref={forwardedRef}>
+        {asChild ? children : <div className='contents'>{children}</div>}
+      </Comp>
+    );
+  },
+);
+
+Segment.displayName = COLUMN_SEGMENT_NAME;
+
+//
+// Column
+//
+
+export const Column = {
+  Root,
+  Row,
+  Segment,
+};
+
+export type { ColumnRootProps, ColumnRowProps, ColumnSegmentProps };

package/src/primitives/Column/index.ts

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

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.stories.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { type ChromaticPalette } from '@dxos/ui-types';
+
+import { withLayout, withTheme } from '../../testing';
+
+import { Flex } from './Flex';
+
+const Cell = ({ label, hue }: { label: string; hue: ChromaticPalette }) => (
+  <div data-hue={hue} className='flex w-full dx-panel p-2 text-sm font-mono border rounded-sm'>
+    {label}
+  </div>
+);
+
+const RowStory = () => (
+  <Flex classNames='gap-2 p-2'>
+    <Cell label='A' hue='red' />
+    <Cell label='B' hue='green' />
+    <Cell label='C' hue='blue' />
+  </Flex>
+);
+
+const ColumnStory = () => (
+  <Flex column classNames='gap-2 p-2'>
+    <Cell label='A' hue='red' />
+    <Cell label='B' hue='green' />
+    <Cell label='C' hue='blue' />
+  </Flex>
+);
+
+const GrowStory = () => (
+  <Flex column grow classNames='gap-2 p-2'>
+    <Cell label='Header' hue='yellow' />
+    <Flex grow>
+      <Cell label='Content (grows)' hue='blue' />
+    </Flex>
+    <Cell label='Footer' hue='orange' />
+  </Flex>
+);
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/primitives/Flex',
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Row: Story = { render: RowStory };
+export const Column: Story = { render: ColumnStory };
+export const Grow: Story = { render: GrowStory };

package/src/primitives/Flex/Flex.tsx

@@ -0,0 +1,29 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { composableProps, mx } from '@dxos/ui-theme';
+import { type ComposableProps } from '@dxos/ui-types';
+
+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/Flex/index.ts

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

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

@@ -0,0 +1,57 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+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 }) => (
+  <div data-hue={hue} className='dx-panel p-2 text-sm font-mono border rounded-sm'>
+    {label}
+  </div>
+);
+
+const ColsStory = () => (
+  <Grid cols={3} classNames='gap-2 p-2'>
+    <Cell label='Row 1' hue='red' />
+    <Cell label='Row 2' hue='green' />
+    <Cell label='Row 3' hue='blue' />
+  </Grid>
+);
+
+const RowsStory = () => (
+  <Grid rows={3} classNames='gap-2 p-2'>
+    <Cell label='Row 1' hue='red' />
+    <Cell label='Row 2' hue='green' />
+    <Cell label='Row 3' hue='blue' />
+  </Grid>
+);
+
+const MixedStory = () => (
+  <Grid cols={2} rows={2} classNames='gap-2 p-2'>
+    <Cell label='A' hue='red' />
+    <Cell label='B' hue='green' />
+    <Cell label='C' hue='blue' />
+    <Cell label='D' hue='yellow' />
+  </Grid>
+);
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/primitives/Grid',
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: { layout: 'fullscreen' },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Cols: Story = { render: ColsStory };
+export const Rows: Story = { render: RowsStory };
+export const Mixed: Story = { render: MixedStory };

package/src/primitives/Grid/Grid.tsx

@@ -0,0 +1,35 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { composableProps, mx } from '@dxos/ui-theme';
+import { type ComposableProps } from '@dxos/ui-types';
+
+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/Grid/index.ts

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