@dxos/react-ui 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/src/exemplars/virtualizer.stories.tsx

@@ -0,0 +1,136 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta } from '@storybook/react-vite';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import { random } from '@dxos/random';
+import { Panel, ScrollArea, Toolbar } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+random.seed(999);
+
+type TestItem = {
+  name: string;
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-core/exemplars/virtualizer',
+  decorators: [withLayout({ layout: 'column' }), withTheme()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+const NUM_ITEMS = 500;
+
+/**
+ * https://tanstack.com/virtual/latest/docs/introduction
+ */
+export const Default = {
+  render: () => {
+    const [index, setIndex] = useState(0);
+    const items = useMemo<TestItem[]>(
+      () =>
+        Array.from({ length: NUM_ITEMS }, () => ({
+          name: random.lorem.paragraph(),
+        })),
+      [],
+    );
+
+    const parentRef = useRef(null);
+    const [viewport, setViewport] = useState<HTMLElement | null>(null);
+    const virtualizer = useVirtualizer({
+      getScrollElement: () => viewport,
+      estimateSize: () => 40,
+      count: items.length,
+      gap: 8,
+    });
+
+    useEffect(() => {
+      virtualizer.scrollToIndex(index, { align: 'start' });
+    }, [virtualizer, index]);
+
+    const virtualItems = virtualizer.getVirtualItems();
+
+    return (
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <ScrollToolbar items={items} index={index} setIndex={setIndex} />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root orientation='vertical' centered>
+            <ScrollArea.Viewport classNames='p-2' ref={setViewport}>
+              <div
+                style={{
+                  position: 'relative',
+                  height: virtualizer.getTotalSize(),
+                  width: '100%',
+                }}
+                ref={parentRef}
+              >
+                {virtualItems.map((virtualItem) => (
+                  <div
+                    key={virtualItem.key}
+                    role='list'
+                    className='grid grid-cols-[3rem_1fr] overflow-hidden border border-separator rounded-xs'
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      transform: `translateY(${virtualItem.start}px)`,
+                    }}
+                    data-index={virtualItem.index}
+                    ref={virtualizer.measureElement}
+                  >
+                    <div className='p-1'>{virtualItem.index + 1}</div>
+                    <div className='p-1'>{items[virtualItem.index].name}</div>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+};
+
+const ScrollToolbar = ({
+  items,
+  index,
+  setIndex,
+}: {
+  items: any[];
+  index: number;
+  setIndex: (index: number) => void;
+}) => {
+  return (
+    <Toolbar.Root classNames='grid grid-cols-3'>
+      <div />
+      <div className='flex justify-center gap-1'>
+        <Toolbar.IconButton icon='ph--arrow-line-left--regular' iconOnly label='start' onClick={() => setIndex(0)} />
+        <Toolbar.IconButton
+          icon='ph--arrows-out-line-horizontal--regular'
+          iconOnly
+          label='random'
+          onClick={() => setIndex(Math.floor(Math.random() * items.length))}
+        />
+        <Toolbar.IconButton
+          icon='ph--arrow-line-right--regular'
+          iconOnly
+          label='end'
+          onClick={() => setIndex(items.length - 1)}
+        />
+      </div>
+      <div className='p-1 text-right'>
+        {index + 1}/{items.length}
+      </div>
+    </Toolbar.Root>
+  );
+};

package/src/hooks/index.ts

@@ -6,6 +6,7 @@ export * from './useDensityContext';
 export * from './useElevationContext';
 export * from './useIconHref';
 export * from './useSafeArea';
+export * from './useSafeCollisionPadding';
 export * from './useTranslationsContext';
 export * from './useThemeContext';
 export * from './useVisualViewport';

package/src/hooks/useDensityContext.ts

@@ -4,11 +4,11 @@
 
 import { useContext } from 'react';
 
-import { type Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
-import { DensityContext } from '../components';
+import { DensityContext } from '../primitives';
 
-export const useDensityContext = (propsDensity?: Density) => {
+export const useDensityContext = (densityProp?: Density): Density | undefined => {
   const { density } = useContext(DensityContext);
-  return propsDensity ?? density;
+  return densityProp ?? density;
 };

package/src/hooks/useElevationContext.ts

@@ -4,9 +4,9 @@
 
 import { useContext } from 'react';
 
-import { type Elevation } from '@dxos/react-ui-types';
+import { type Elevation } from '@dxos/ui-types';
 
-import { ElevationContext } from '../components';
+import { ElevationContext } from '../primitives';
 
 export const useElevationContext = (propsElevation?: Elevation) => {
   const { elevation } = useContext(ElevationContext);

package/src/hooks/useThemeContext.ts

@@ -6,6 +6,6 @@ import { useContext } from 'react';
 
 import { raise } from '@dxos/debug';
 
-import { ThemeContext } from '../components';
+import { ThemeContext } from '../primitives';
 
 export const useThemeContext = () => useContext(ThemeContext) ?? raise(new Error('Missing ThemeContext'));

package/src/hooks/useTranslationsContext.ts

@@ -4,6 +4,6 @@
 
 import { useContext } from 'react';
 
-import { TranslationsContext } from '../components/ThemeProvider/TranslationsProvider';
+import { TranslationsContext } from '../primitives';
 
 export const useTranslationsContext = () => useContext(TranslationsContext);

package/src/index.ts

@@ -6,8 +6,10 @@ export { type Resource, type TFunction } from 'i18next';
 export { Trans } from 'react-i18next';
 
 export * from '@dxos/react-hooks';
-export * from '@dxos/react-ui-types';
+export * from '@dxos/ui-types';
 
 export * from './components';
 export * from './hooks';
+export * from './primitives';
+export * from './theme';
 export * from './util';

package/src/playground/Controls.stories.tsx

@@ -6,8 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Icon, Input, Select, Toggle, Toolbar } from '../components';
-import { withTheme } from '../testing';
-import { withLayoutVariants } from '../testing';
+import { withLayoutVariants, withTheme } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -32,9 +31,6 @@ const DefaultStory = () => {
             </Select.Content>
           </Select.Portal>
         </Select.Root>
-        {/* TODO(burdon): Highlight is cyan. */}
-        {/* TODO(burdon): Show vertical divider by default. */}
-        {/* TODO(burdon): Icon sizes should adapt to density. */}
         <Toolbar.ToggleGroup type='multiple'>
           <Toolbar.ToggleGroupItem value='a'>
             <Icon icon='ph--text-b--regular' />
@@ -46,7 +42,6 @@ const DefaultStory = () => {
             <Icon icon='ph--text-underline--regular' />
           </Toolbar.ToggleGroupItem>
         </Toolbar.ToggleGroup>
-        {/* TODO(burdon): Highlight isn't shown. */}
         <Toolbar.ToggleGroup type='single' defaultValue='a'>
           <Toolbar.ToggleGroupItem value='a'>
             <Icon icon='ph--file-ts--regular' />
@@ -60,11 +55,9 @@ const DefaultStory = () => {
             <Icon icon='ph--bug--regular' />
           </Toggle>
         </Toolbar.Button>
-        {/* TODO(burdon): Should not be 'is-full' by default. */}
         <Input.Root>
           <Input.TextInput placeholder='Enter text...' />
         </Input.Root>
-        {/* TODO(burdon): Checkbox collapsed. */}
         <Input.Root>
           <Input.Checkbox checked={checked} onCheckedChange={(value) => setChecked(!!value)} />
           <Input.Label>Checkbox</Input.Label>
@@ -82,9 +75,9 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Playground/Controls',
+  title: 'ui/react-ui-core/playground/Controls',
   render: DefaultStory,
-  decorators: [withTheme, withLayoutVariants()],
+  decorators: [withTheme(), withLayoutVariants()],
 } satisfies Meta<typeof Icon>;
 
 export default meta;

package/src/playground/Custom.stories.tsx

@@ -12,91 +12,68 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
     <Tooltip.Provider>
       <div className='flex flex-col gap-6'>
-        {/* Large */}
+        {/* Large (40px) */}
         <div className='grid grid-cols-3 gap-4'>
           <div className='flex justify-center'>
-            <Button {...args} density='coarse'>
+            <Button {...args} density='lg'>
               {children}
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton {...args} label='Test' icon='ph--atom--regular' size={7} density='coarse' />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' density='lg' />
           </div>
           <div className='flex justify-center'>
-            <IconButton
-              {...args}
-              label='Test'
-              icon='ph--atom--regular'
-              iconOnly
-              size={7}
-              density='coarse'
-              classNames='pli-1.5'
-            />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' iconOnly density='lg' classNames='px-1.5' />
           </div>
         </div>
 
-        {/* Medium */}
+        {/* Medium (32px, default) */}
         <div className='grid grid-cols-3 gap-4'>
           <div className='flex justify-center'>
-            <Button {...args} density='fine'>
+            <Button {...args} density='md'>
               {children}
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton {...args} label='Test' icon='ph--atom--regular' density='fine' classNames='pli-2' />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' density='md' classNames='px-2' />
           </div>
           <div className='flex justify-center'>
             <IconButton
               {...args}
               label='Test'
-              icon='ph--atom--regular'
+              icon='ph--circle--regular'
               iconOnly
-              density='fine'
-              classNames='plb-1 pli-1.5'
+              density='md'
+              classNames='py-1 px-1.5'
             />
           </div>
         </div>
 
-        {/* Small */}
+        {/* Small (28px) */}
         <div className='grid grid-cols-3 gap-4'>
           <div className='flex justify-center'>
-            <Button {...args} density='fine' classNames={'!h-[24px] !text-[14px] p-0 pli-1.5 min-bs-0'}>
+            <Button {...args} density='sm'>
               {children}
             </Button>
           </div>
           <div className='flex justify-center'>
-            <IconButton
-              {...args}
-              label='Test'
-              icon='ph--atom--regular'
-              density='fine'
-              size={4}
-              classNames={'!h-[24px] !text-[14px] p-1 min-bs-0 gap-0.5'}
-            />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' density='sm' />
           </div>
           <div className='flex justify-center'>
-            <IconButton
-              {...args}
-              label='Test'
-              icon='ph--atom--regular'
-              iconOnly
-              density='fine'
-              size={4}
-              classNames={'!h-[24px] !text-[14px] p-1 min-bs-0'}
-            />
+            <IconButton {...args} label='Test' icon='ph--circle--regular' iconOnly density='sm' />
           </div>
         </div>
 
         {/* TODO(burdon): Full variant with max width. */}
         <div className='flex justify-center'>
-          <Button classNames='is-full max-is-[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='is-full max-is-[15rem] rounded'
+            classNames='w-full max-w-[15rem] rounded-sm'
             variant='primary'
             icon='ph--arrows-clockwise--regular'
             label='Test'
@@ -108,10 +85,10 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Playground/Custom',
+  title: 'ui/react-ui-core/playground/Custom',
   component: Button,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

package/src/playground/Typography.stories.tsx

@@ -9,7 +9,7 @@ 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,9 +43,9 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Playground/Typography',
+  title: 'ui/react-ui-core/playground/Typography',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

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

@@ -0,0 +1,29 @@
+//
+// 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,21 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+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 { composableProps, slottable } from '../../util';
+
+export const Container = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps<HTMLDivElement>(props);
+  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/{components → primitives}/DensityProvider/DensityProvider.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, createContext } from 'react';
 
-import { type Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
 export interface DensityContextValue {
   density?: Density;
@@ -14,7 +14,7 @@ export type DensityProviderProps = PropsWithChildren<{
   density?: Density;
 }>;
 
-export const DensityContext = createContext<DensityContextValue>({ density: 'fine' });
+export const DensityContext = createContext<DensityContextValue>({ density: 'md' });
 
 export const DensityProvider = ({ density, children }: DensityProviderProps) => (
   <DensityContext.Provider value={{ density }}>{children}</DensityContext.Provider>

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

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, createContext } from 'react';
 
-import { type Elevation } from '@dxos/react-ui-types';
+import { type Elevation } from '@dxos/ui-types';
 
 export interface ElevationContextValue {
   elevation?: Elevation;

package/src/primitives/Flex/Flex.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 { 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 { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { composableProps, slottable } from '../../util';
+
+export type FlexProps = { column?: boolean; grow?: boolean };
+
+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/Flex/index.ts

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

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

@@ -0,0 +1,56 @@
+//
+// 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,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { composable, composableProps } from '../../util';
+
+export type GridProps = { cols?: number; rows?: number; grow?: boolean };
+
+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>
+    );
+  },
+);