@dxos/react-ui 0.8.4-main.3f58842 → 0.8.4-main.52d7546f51

package/src/exemplars/tabster.stories.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import {
+  useArrowNavigationGroup,
+  useFocusFinders,
+  useFocusableGroup,
+  useMergedTabsterAttributes_unstable,
+} from '@fluentui/react-tabster';
+import { type Decorator, type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
+import { createTabster, disposeTabster } from 'tabster';
+
+import { Input, ScrollArea } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { mx } from '@dxos/ui-theme';
+
+// TODO(burdon): Factor out styles (incl. tabster debugging).
+// TODO(burdon): Implement horizontal movement between columns when column is selected.
+// TODO(burdon): Prevent tab out of app.
+
+const border =
+  'rounded-sm outline-none border border-subduedSeparator focus:border-primary-500 focus-within:border-rose-500';
+
+const Board = forwardRef<HTMLDivElement, { columns: string[][] }>(({ columns }, ref) => {
+  const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'horizontal', memorizeCurrent: true, tabbable: true });
+
+  return (
+    <div ref={ref} tabIndex={0} {...arrowNavigationAttrs} className='flex bs-full is-full overflow-hidden'>
+      <div className={mx('flex bs-full overflow-x-auto p-4 gap-4')}>
+        {columns.map((column) => (
+          <Column key={column[0]} items={column} />
+        ))}
+      </div>
+    </div>
+  );
+});
+
+const Column = forwardRef<HTMLDivElement, { items: string[] }>(({ items }, ref) => {
+  const focusableGroupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
+  const arrowNavigationAttrs = useArrowNavigationGroup({ axis: 'vertical', memorizeCurrent: true });
+  const tabsterAttrs = useMergedTabsterAttributes_unstable(focusableGroupAttrs, arrowNavigationAttrs);
+
+  return (
+    <ScrollArea.Root tabIndex={0} orientation='vertical' classNames={mx('shrink-0 bs-full is-[25rem]', border)}>
+      <ScrollArea.Viewport {...tabsterAttrs} classNames='p-4 gap-4' ref={ref}>
+        {items.map((item) => (
+          <Item key={item} value={item} />
+        ))}
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+});
+
+const Item = forwardRef<HTMLDivElement, { value: string }>(({ value }, ref) => {
+  const focusableGroupAttrs = useFocusableGroup();
+
+  return (
+    <div
+      ref={ref}
+      tabIndex={0}
+      {...focusableGroupAttrs}
+      className={mx('flex shrink-0 is-full gap-4 p-4 items-center', border)}
+    >
+      <Input.Root>
+        <Input.Checkbox />
+      </Input.Root>
+      <Input.Root>
+        <Input.TextInput defaultValue={value} />
+      </Input.Root>
+    </div>
+  );
+});
+
+const DefaultStory = () => {
+  const columns = useMemo(() => {
+    return [['A1', 'A2', 'A3'], ['B1'], ['C1', 'C2', 'C3', 'C4', 'C5', 'C6'], ['D1', 'D2']];
+  }, []);
+
+  const ref = useRef<HTMLDivElement>(null);
+  const { findFirstFocusable } = useFocusFinders();
+  useEffect(() => {
+    if (ref.current) {
+      findFirstFocusable(ref.current)?.focus();
+    }
+  }, []);
+
+  return <Board columns={columns} ref={ref} />;
+};
+
+// TODO(burdon): This doesn't seem to be necessary or recongized; memoization doesn't work.
+const withTabster: Decorator = (Story) => {
+  useEffect(() => {
+    const tabster = createTabster(window, {
+      autoRoot: {},
+      // TODO(burdon): Not called.
+      // checkUncontrolledCompletely: (el) => {
+      //   console.log(el);
+      //   return true;
+      // },
+    });
+
+    return () => {
+      disposeTabster(tabster);
+    };
+  }, []);
+
+  return <Story />;
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-core/exemplars/tabster',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withTabster],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/hooks/useDensityContext.ts

@@ -4,7 +4,7 @@
 
 import { useContext } from 'react';
 
-import { type Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
 import { DensityContext } from '../components';
 

package/src/hooks/useElevationContext.ts

@@ -4,7 +4,7 @@
 
 import { useContext } from 'react';
 
-import { type Elevation } from '@dxos/react-ui-types';
+import { type Elevation } from '@dxos/ui-types';
 
 import { ElevationContext } from '../components';
 

package/src/hooks/useSafeArea.ts

@@ -4,7 +4,7 @@
 
 import { useCallback, useState } from 'react';
 
-import { useResize } from '@dxos/react-hooks';
+import { useViewportResize } from '@dxos/react-hooks';
 
 export type SafeAreaPadding = Record<'top' | 'right' | 'bottom' | 'left', number>;
 
@@ -20,6 +20,7 @@ export const useSafeArea = (): SafeAreaPadding => {
       left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-left')),
     });
   }, []);
-  useResize(handleResize);
+
+  useViewportResize(handleResize);
   return padding;
 };

package/src/hooks/useVisualViewport.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useCallback, type useEffect, useState } from 'react';
+import { useCallback, useState } from 'react';
 
-import { useResize } from '@dxos/react-hooks';
+import { useViewportResize } from '@dxos/react-hooks';
 
-export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
+export const useVisualViewport = (deps?: Parameters<typeof useViewportResize>[1]) => {
   const [width, setWidth] = useState<number | null>(null);
   const [height, setHeight] = useState<number | null>(null);
 
@@ -17,7 +17,7 @@ export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
     }
   }, []);
 
-  useResize(handleResize);
+  useViewportResize(handleResize, deps);
 
   return { width, height };
 };

package/src/index.ts

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

package/src/playground/Controls.stories.tsx

@@ -2,12 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Icon, Input, Select, Toggle, Toolbar } from '../components';
-import { withTheme, withSurfaceVariantsLayout } from '../testing';
+import { withLayoutVariants, withTheme } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -28,6 +27,7 @@ const DefaultStory = () => {
                 <Select.Option value={'b'}>B</Select.Option>
                 <Select.Option value={'c'}>C</Select.Option>
               </Select.Viewport>
+              <Select.Arrow />
             </Select.Content>
           </Select.Portal>
         </Select.Root>
@@ -80,11 +80,14 @@ const DefaultStory = () => {
   );
 };
 
-export default {
-  title: 'ui/react-ui-core/Playground/Controls',
+const meta = {
+  title: 'ui/react-ui-core/playground/Controls',
   render: DefaultStory,
-  decorators: [withSurfaceVariantsLayout(), withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme(), withLayoutVariants()],
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {};
+export const Default: Story = {};

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>
@@ -41,7 +30,7 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
               iconOnly
               size={7}
               density='coarse'
-              classNames='px-1.5'
+              classNames='pli-1.5'
             />
           </div>
         </div>
@@ -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='pli-2' />
           </div>
           <div className='flex justify-center'>
             <IconButton
@@ -62,9 +51,8 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
               label='Test'
               icon='ph--atom--regular'
               iconOnly
-              size={5}
               density='fine'
-              classNames='py-1 px-1.5'
+              classNames='plb-1 pli-1.5'
             />
           </div>
         </div>
@@ -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 pli-1.5 min-bs-0'}>
               {children}
             </Button>
           </div>
@@ -101,18 +89,17 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
 
         {/* TODO(burdon): Full variant with max width. */}
         <div className='flex justify-center'>
-          <Button classNames='w-full max-w-[15rem] rounded' variant='default'>
+          <Button classNames='is-full max-is-[15rem] rounded' 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='is-full max-is-[15rem] rounded'
             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,8 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../testing';
@@ -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/Container/Container.stories.tsx

@@ -0,0 +1,67 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Input } from '../../components';
+import { withTheme } from '../../testing';
+
+import { Container, type ContainerRootProps } from './Container';
+
+const DefaultStory = (props: ContainerRootProps) => {
+  return (
+    <div className='plb-2 is-[20rem] border border-separator rounded-sm'>
+      <Container.Root {...props}>
+        <Container.Column>
+          <Input.Root>
+            <Input.Label>Label</Input.Label>
+            <Input.TextInput />
+          </Input.Root>
+        </Container.Column>
+      </Container.Root>
+    </div>
+  );
+};
+
+const meta: Meta<typeof Container.Root> = {
+  title: 'ui/react-ui-core/primitives/Container',
+  component: Container.Root,
+  render: DefaultStory,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// TODO(burdon): Requires container.
+export const Default = () => {
+  return (
+    <Container.Root>
+      <Container.Column>Column</Container.Column>
+    </Container.Root>
+  );
+};
+
+export const SM: Story = {
+  args: {
+    variant: 'sm',
+  },
+};
+
+export const MD: Story = {
+  args: {
+    variant: 'md',
+  },
+};
+
+export const LG: Story = {
+  args: {
+    variant: 'lg',
+  },
+};

package/src/primitives/Container/Container.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type PropsWithChildren, type Ref, forwardRef } from 'react';
+
+import { type ColumnPadding } from '@dxos/ui-theme';
+import { type SlottableProps } from '@dxos/ui-types';
+
+import { useThemeContext } from '../../hooks';
+
+// TODO(burdon): Replace Form, Container, Card spacing.
+// TODO(burdon): Scrolling (reconcile with Mosaic Viewport).
+// TODO(burdon): Reconcile AnchoredOverflow.
+
+//
+// Context
+//
+
+type ContainerContext = {
+  variant?: ColumnPadding;
+};
+
+const [ContainerProvider, useContext] = createContext<ContainerContext>('Container');
+
+//
+// Root
+//
+
+type RootProps = PropsWithChildren<Partial<ContainerContext>>;
+
+const Root = ({ variant, children }: RootProps) => {
+  return <ContainerProvider {...{ variant }}>{children}</ContainerProvider>;
+};
+
+//
+// Column
+//
+
+const CONTAINER_COLUMN_NAME = 'Container.Column';
+
+type ColumnProps = SlottableProps<HTMLDivElement> & { variant?: ColumnPadding };
+
+const Column = forwardRef(
+  (
+    { classNames, className, asChild, role = 'none', children, variant, ...props }: ColumnProps,
+    ref: Ref<HTMLDivElement>,
+  ) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    const context = useContext(CONTAINER_COLUMN_NAME);
+    return (
+      <Root
+        {...props}
+        className={tx('container.column', { variant: variant ?? context.variant }, [className, classNames])}
+        role={role}
+        ref={ref}
+      >
+        {children}
+      </Root>
+    );
+  },
+);
+
+Column.displayName = CONTAINER_COLUMN_NAME;
+
+//
+// Container
+//
+
+export const Container = {
+  Root,
+  Column,
+};
+
+export type { RootProps as ContainerRootProps, ColumnProps as ContainerColumnProps };

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

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { Input, ScrollArea, Toolbar } from '../../components';
+import { withLayout, withTheme } from '../../testing';
+
+import { Layout } from './Layout';
+
+const DefaultStory = ({ count }: { count: number }) => {
+  return (
+    <Layout.Main toolbar statusbar>
+      <Toolbar.Root classNames='gap-2'>
+        <Toolbar.IconButton icon='ph--plus--regular' variant='primary' label='Add' />
+        <Input.Root>
+          <Input.TextInput placeholder='Search' />
+        </Input.Root>
+        <Toolbar.IconButton icon='ph--dots-three-vertical--regular' iconOnly label='Menu' />
+      </Toolbar.Root>
+      <ScrollArea.Root thin orientation='vertical'>
+        <ScrollArea.Viewport classNames='pli-2 plb-1 gap-1'>
+          {Array.from({ length: count }).map((_, index) => (
+            <div key={index} role='listitem' className='pli-2 plb-1 border border-separator'>
+              {index}
+            </div>
+          ))}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+      <Toolbar.Root classNames='justify-between'>
+        <Toolbar.IconButton variant='ghost' icon='ph--house--regular' iconOnly label='Add' size={4} />
+        <Toolbar.IconButton variant='ghost' icon='ph--alarm--regular' iconOnly label='Status' size={4} />
+      </Toolbar.Root>
+    </Layout.Main>
+  );
+};
+
+const meta: Meta<typeof DefaultStory> = {
+  title: 'ui/react-ui-core/primitives/Layout',
+  component: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    count: 100,
+  },
+};

package/src/primitives/Container/Layout.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type PropsWithChildren, forwardRef, useMemo } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+import { type ThemedClassName } from '@dxos/ui-types';
+
+//
+// Main
+//
+
+type MainProps = ThemedClassName<
+  PropsWithChildren<{
+    role?: string;
+    toolbar?: boolean;
+    statusbar?: boolean;
+  }>
+>;
+
+const Main = forwardRef<HTMLDivElement, MainProps>(
+  ({ classNames, children, role, toolbar, statusbar }, forwardedRef) => {
+    const style = useMemo(
+      () => ({
+        gridTemplateRows: [toolbar && 'var(--toolbar-size)', '1fr', statusbar && 'var(--statusbar-size)']
+          .filter(Boolean)
+          .join(' '),
+      }),
+      [toolbar, statusbar],
+    );
+
+    return (
+      <div
+        ref={forwardedRef}
+        role={role ?? 'none'}
+        style={style}
+        className={mx(
+          'bs-full is-full grid grid-cols-[100%] overflow-hidden',
+          toolbar && [
+            '[.dx-main-mobile-layout_&>.dx-toolbar]:pli-3 [&>.dx-toolbar]:relative',
+            '[&>.dx-toolbar]:border-be [&>.dx-toolbar]:border-subduedSeparator',
+          ],
+          classNames,
+        )}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+//
+// Layout
+//
+
+export const Layout = {
+  Main,
+};
+
+export type { MainProps as LayoutMainProps };

package/src/primitives/Container/index.ts

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

package/src/primitives/Flex/Flex.tsx

@@ -0,0 +1,26 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type HTMLAttributes } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+import { type ThemedClassName } from '@dxos/ui-types';
+
+export type FlexProps = ThemedClassName<
+  HTMLAttributes<HTMLDivElement> & {
+    column?: boolean;
+    grow?: boolean;
+  }
+>;
+
+export const Flex = ({ children, classNames, role, column, grow }: FlexProps) => {
+  return (
+    <div
+      role={role ?? 'none'}
+      className={mx('flex', column && 'flex-col', grow && 'flex-1 overflow-hidden', classNames)}
+    >
+      {children}
+    </div>
+  );
+};