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

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>
+    );
+  },
+);

package/src/primitives/Grid/index.ts

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

package/src/primitives/ThemeProvider/ThemeProvider.stories.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { withLayout, withTheme } from '../../testing';
+import { ThemeProvider } from './ThemeProvider';
+
+const meta = {
+  title: 'ui/react-ui-core/primitives/ThemeProvider',
+  component: ThemeProvider,
+  render: () => {
+    const { themeMode, platform } = useThemeContext();
+    return (
+      <div className='p-4 flex flex-col gap-4'>
+        <h1>ThemeProvider</h1>
+        <pre className='text-sm text-description'>{JSON.stringify({ themeMode, platform }, null, 2)}</pre>
+      </div>
+    );
+  },
+  decorators: [withTheme(), withLayout()],
+} satisfies Meta<typeof ThemeProvider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -5,23 +5,21 @@
 import { createKeyborg } from 'keyborg';
 import React, { type PropsWithChildren, createContext, useEffect, useMemo } from 'react';
 
-import { type Density, type Elevation, type ThemeFunction } from '@dxos/react-ui-types';
+import { type Density, type Elevation, type ThemeFunction, type ThemeMode } from '@dxos/ui-types';
 
 import { type SafeAreaPadding, useSafeArea } from '../../hooks';
 import { hasIosKeyboard } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 import { ElevationProvider } from '../ElevationProvider';
-
 import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
 
-export type ThemeMode = 'dark' | 'light';
-
 export type ThemeContextValue = {
   tx: ThemeFunction<any>;
   themeMode: ThemeMode;
   hasIosKeyboard: boolean;
   safeAreaPadding?: SafeAreaPadding;
   noCache?: boolean;
+  platform?: 'mobile' | 'desktop';
 };
 
 /**
@@ -41,10 +39,11 @@ export const ThemeProvider = ({
   fallback = null,
   resourceExtensions,
   appNs,
-  tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
+  tx = (_path, _styleProps, ..._options) => undefined,
   themeMode = 'dark',
-  rootDensity = 'fine',
-  ...rest
+  rootDensity = 'md',
+  noCache,
+  platform,
 }: ThemeProviderProps) => {
   useEffect(() => {
     if (document.defaultView) {
@@ -55,9 +54,10 @@ export const ThemeProvider = ({
   }, []);
 
   const safeAreaPadding = useSafeArea();
+  // Destructure all props explicitly so useMemo deps are stable primitives, not a new `rest` object every render.
   const contextValue = useMemo(
-    () => ({ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), safeAreaPadding, ...rest }),
-    [tx, themeMode, safeAreaPadding, rest],
+    () => ({ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), safeAreaPadding, noCache, platform }),
+    [tx, themeMode, safeAreaPadding, noCache, platform],
   );
 
   return (
@@ -79,8 +79,8 @@ export const ThemeProvider = ({
 
 const handleInputModalityChange = (isUsingKeyboard: boolean) => {
   if (isUsingKeyboard) {
-    document.body.setAttribute('data-is-keyboard', 'true');
+    document.body.setAttribute('data-w-keyboard', 'true');
   } else {
-    document.body.removeAttribute('data-is-keyboard');
+    document.body.removeAttribute('data-w-keyboard');
   }
 };

package/src/{components → primitives}/ThemeProvider/TranslationsProvider.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Locale, enUS as dtLocaleEnUs } from 'date-fns/locale';
-import i18Next, { type Resource, type TFunction } from 'i18next';
+import i18Next, { type Resource } from 'i18next';
 import React, { type ReactNode, Suspense, createContext, useContext, useEffect, useState } from 'react';
 import { initReactI18next, useTranslation as useI18NextTranslation } from 'react-i18next';
 
@@ -11,21 +11,6 @@ const initialLng = 'en-US';
 const initialNs = 'dxos-common';
 const initialDtLocale = dtLocaleEnUs;
 
-// TODO(thure): `Parameters<TFunction>` causes typechecking issues because `TFunction` has so many signatures.
-export type Label = string | [string, { ns: string; count?: number; defaultValue?: string }];
-
-export const isLabel = (o: any): o is Label =>
-  typeof o === 'string' ||
-  (Array.isArray(o) &&
-    o.length === 2 &&
-    typeof o[0] === 'string' &&
-    !!o[1] &&
-    typeof o[1] === 'object' &&
-    'ns' in o[1] &&
-    typeof o[1].ns === 'string');
-
-export const toLocalizedString = (label: Label, t: TFunction) => (Array.isArray(label) ? t(...label) : label);
-
 export const resources = {
   [initialLng]: {
     [initialNs]: {

package/src/primitives/ThemeProvider/index.ts

@@ -0,0 +1,8 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export { type Label, isLabel, toLocalizedString } from '@dxos/ui-types/translations';
+
+export * from './ThemeProvider';
+export { TranslationsContext, useTranslation } from './TranslationsProvider';

package/src/primitives/index.ts

@@ -0,0 +1,11 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './DensityProvider';
+export * from './ElevationProvider';
+export * from './ThemeProvider';
+
+export * from './Container';
+export * from './Flex';
+export * from './Grid';

package/src/testing/Loading.tsx

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { captureOwnerStack, useEffect, useState } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+import { safeStringify } from '@dxos/util';
+
+import { ErrorStack, parseCaptureOwnerStack } from '../components';
+
+export type LoadingProps = { data?: any };
+
+/**
+ * Storybook loading component.
+ */
+export const Loading = ({ data }: LoadingProps) => {
+  const [visible, setVisible] = useState(false);
+  const ownerFrames = parseCaptureOwnerStack(captureOwnerStack());
+
+  useEffect(() => {
+    const t = setTimeout(() => setVisible(true), 500);
+    return () => clearTimeout(t);
+  }, []);
+
+  return (
+    <div className='w-full p-2'>
+      <div
+        className={mx(
+          'flex flex-col w-full p-2 border-2 border-teal-500 rounded-md',
+          'opacity-0 transition delay-1000 duration-1000',
+          visible && 'opacity-100',
+        )}
+      >
+        <h2 className='uppercase capitalize text-xs'>Loading State</h2>
+        <pre className='text-sm text-description'>{safeStringify(data, undefined, 2)}</pre>
+
+        <h3 className='uppercase capitalize text-xs mt-2'>Owner stack</h3>
+        {ownerFrames && ownerFrames.length > 0 ? (
+          <ErrorStack frames={ownerFrames} />
+        ) : (
+          <p className='text-xs text-subdued'>No owner stack (production build or unsupported context).</p>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/testing/decorators/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './withLayout';
+export * from './withLayoutVariants';
 export * from './withTheme';
-export * from './withSurfaceVariantsLayout';

package/src/testing/decorators/withLayout.tsx

@@ -0,0 +1,67 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { type FC, type PropsWithChildren, memo } from 'react';
+
+import { type ClassNameValue, type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+export type ContainerProps = ThemedClassName<PropsWithChildren>;
+
+export type ContainerType = 'default' | 'fullscreen' | 'centered' | 'column';
+
+export type WithLayoutProps =
+  | FC<ContainerProps>
+  | {
+      classNames?: ClassNameValue;
+      layout?: ContainerType;
+      scroll?: boolean;
+    };
+
+/**
+ * Adds layout container.
+ */
+export const withLayout =
+  (props: WithLayoutProps = {}): Decorator =>
+  (Story) => {
+    // Prevent re-rendering of the story.
+    const MemoizedStory = memo(Story);
+    if (typeof props === 'function') {
+      const Container = props;
+      return (
+        <Container>
+          <MemoizedStory />
+        </Container>
+      );
+    } else {
+      const { layout = 'default', classNames, scroll } = props;
+      const Container = layouts[layout] ?? layouts.fullscreen;
+      return (
+        <Container classNames={mx(scroll ? 'overflow-y-auto' : 'overflow-hidden', classNames)}>
+          <MemoizedStory />
+        </Container>
+      );
+    }
+  };
+
+const layouts: Record<ContainerType, FC<ContainerProps>> = {
+  default: ({ classNames, children }: ContainerProps) => <div className={mx('p-4', classNames)}>{children}</div>,
+
+  fullscreen: ({ classNames, children }: ContainerProps) => (
+    <div className={mx('fixed inset-0 flex overflow-hidden bg-black', classNames)}>{children}</div>
+  ),
+
+  centered: ({ classNames, children }: ContainerProps) => (
+    <div className={mx('fixed inset-0 grid overflow-hidden place-items-center bg-black')}>
+      <div className={mx('flex flex-col bg-base-surface', classNames)}>{children}</div>
+    </div>
+  ),
+
+  column: ({ classNames, children }: ContainerProps) => (
+    <div className='fixed inset-0 flex overflow-hidden justify-center bg-black'>
+      <div className={mx('flex flex-col w-[40rem] bg-base-surface', classNames)}>{children}</div>
+    </div>
+  ),
+};

package/src/testing/decorators/withLayoutVariants.tsx

@@ -0,0 +1,48 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { type ComponentType, type PropsWithChildren } from 'react';
+
+import { mx, surfaceShadow } from '@dxos/ui-theme';
+import { type Density, type Elevation } from '@dxos/ui-types';
+
+type Config = {
+  elevations?: { elevation: Elevation; surface?: string }[];
+  densities?: Density[];
+};
+
+const Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (
+  <div className={mx('p-4 rounded-sm', surface, surfaceShadow({ elevation }))}>{children}</div>
+);
+
+const Panel = ({
+  Story,
+  elevations,
+  densities,
+  className,
+}: { Story: ComponentType } & Config & { className?: string }) => {
+  return (
+    <div className={mx('flex flex-col h-full p-8 gap-8', className)}>
+      {elevations?.map(({ elevation, surface }) =>
+        densities?.map((density) => (
+          <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>
+            <Story />
+          </Container>
+        )),
+      )}
+    </div>
+  );
+};
+
+export const withLayoutVariants = ({
+  elevations = [
+    { elevation: 'dialog', surface: 'bg-modal-surface' },
+    { elevation: 'positioned', surface: 'bg-card-surface' },
+    { elevation: 'base', surface: 'bg-base-surface' },
+  ],
+  densities = ['md'],
+}: Config = {}): Decorator => {
+  return (Story) => <Panel Story={Story} elevations={elevations} densities={densities} />;
+};

package/src/testing/decorators/withTheme.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React from 'react';
+import { I18nProvider } from 'react-aria-components';
+
+import { type ThemeMode } from '@dxos/ui-types';
+
+import { Tooltip } from '../../components';
+import { type ThemeContextValue, ThemeProvider } from '../../primitives';
+import { defaultTx } from '../../theme';
+
+/**
+ * Adds theme decorator.
+ *
+ * `I18nProvider` is included so react-aria-components-backed widgets (DateField, Calendar, …)
+ * have a guaranteed locale in headless test environments where `navigator.language` may be
+ * empty.
+ */
+export const withTheme =
+  ({ tx = defaultTx, noCache, platform }: Partial<ThemeContextValue> = {}): Decorator =>
+  (Story, context) => {
+    const {
+      globals: { theme },
+      parameters: { translations },
+    } = context;
+
+    return (
+      <I18nProvider locale='en-US'>
+        <ThemeProvider
+          tx={tx}
+          themeMode={(theme as ThemeMode) || 'dark'}
+          resourceExtensions={translations}
+          noCache={noCache}
+          platform={platform}
+        >
+          <Tooltip.Provider>
+            <Story />
+          </Tooltip.Provider>
+        </ThemeProvider>
+      </I18nProvider>
+    );
+  };

package/src/testing/index.ts

@@ -3,3 +3,5 @@
 //
 
 export * from './decorators';
+
+export * from './Loading';

package/src/theme/bindTheme.ts

@@ -0,0 +1,13 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ClassNameArray, type ComponentFunction, type Theme, type ThemeFunction } from '@dxos/ui-types';
+import { getDeep } from '@dxos/util';
+
+export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>): ThemeFunction<P> => {
+  return (path: string, styleProps?: P, ...etc: ClassNameArray) => {
+    const result = getDeep<Theme<P> | ComponentFunction<P>>(theme, path.split('.'));
+    return typeof result === 'function' ? result(styleProps ?? ({} as P), ...etc) : undefined;
+  };
+};

package/src/theme/defaultTheme.ts

@@ -0,0 +1,83 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Theme } from '@dxos/ui-types';
+
+import { avatarTheme } from '../components/Avatars/Avatar.theme';
+import { breadcrumbTheme } from '../components/Breadcrumb/Breadcrumb.theme';
+import { buttonTheme } from '../components/Button/Button.theme';
+import { iconButtonTheme } from '../components/Button/IconButton.theme';
+import { calendarTheme } from '../components/Calendar/Calendar.theme';
+import { cardTheme } from '../components/Card/Card.theme';
+import { columnTheme } from '../components/Column/Column.theme';
+import { datePickerTheme } from '../components/DatePicker/DatePicker.theme';
+import { dialogTheme } from '../components/Dialog/Dialog.theme';
+import { focusTheme } from '../components/Focus/Focus.theme';
+import { iconTheme } from '../components/Icon/Icon.theme';
+import { inputTheme } from '../components/Input/Input.theme';
+import { linkTheme } from '../components/Link/Link.theme';
+import { listTheme } from '../components/List/List.theme';
+import { treegridTheme } from '../components/List/Treegrid.theme';
+import { mainTheme } from '../components/Main/Main.theme';
+import { menuTheme } from '../components/Menu/Menu.theme';
+import { messageTheme } from '../components/Message/Message.theme';
+import { panelTheme } from '../components/Panel/Panel.theme';
+import { popoverTheme } from '../components/Popover/Popover.theme';
+import { scrollAreaTheme } from '../components/ScrollArea/ScrollArea.theme';
+import { selectTheme } from '../components/Select/Select.theme';
+import { separatorTheme } from '../components/Separator/Separator.theme';
+import { skeletonTheme } from '../components/Skeleton/Skeleton.theme';
+import { splitterTheme } from '../components/Splitter/Splitter.theme';
+import { statusTheme } from '../components/Status/Status.theme';
+import { tagTheme } from '../components/Tag/Tag.theme';
+import { toastTheme } from '../components/Toast/Toast.theme';
+import { toolbarTheme } from '../components/Toolbar/Toolbar.theme';
+import { tooltipTheme } from '../components/Tooltip/Tooltip.theme';
+import { bindTheme } from './bindTheme';
+
+export const defaultTheme: Theme<Record<string, any>> = {
+  themeName: () => 'default',
+
+  //
+  // Primitives
+  //
+
+  column: columnTheme,
+  panel: panelTheme,
+
+  //
+  // Components
+  //
+
+  avatar: avatarTheme,
+  breadcrumb: breadcrumbTheme,
+  button: buttonTheme,
+  calendar: calendarTheme,
+  card: cardTheme,
+  datePicker: datePickerTheme,
+  dialog: dialogTheme,
+  focus: focusTheme,
+  icon: iconTheme,
+  iconButton: iconButtonTheme,
+  input: inputTheme,
+  link: linkTheme,
+  list: listTheme,
+  main: mainTheme,
+  message: messageTheme,
+  menu: menuTheme,
+  popover: popoverTheme,
+  scrollArea: scrollAreaTheme,
+  select: selectTheme,
+  separator: separatorTheme,
+  skeleton: skeletonTheme,
+  splitter: splitterTheme,
+  status: statusTheme,
+  tag: tagTheme,
+  toast: toastTheme,
+  toolbar: toolbarTheme,
+  tooltip: tooltipTheme,
+  treegrid: treegridTheme,
+};
+
+export const defaultTx = bindTheme(defaultTheme);

package/src/theme/index.ts

@@ -0,0 +1,37 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './bindTheme';
+export * from './defaultTheme';
+
+// Re-export every co-located theme file so consumers can pull style-prop types,
+// theme tables, and constants from a single peer (@dxos/react-ui).
+export * from '../components/Avatars/Avatar.theme';
+export * from '../components/Breadcrumb/Breadcrumb.theme';
+export * from '../components/Button/Button.theme';
+export * from '../components/Button/IconButton.theme';
+export * from '../components/Card/Card.theme';
+export * from '../components/Dialog/Dialog.theme';
+export * from '../components/Focus/Focus.theme';
+export * from '../components/Icon/Icon.theme';
+export * from '../components/Input/Input.theme';
+export * from '../components/Link/Link.theme';
+export * from '../components/List/List.theme';
+export * from '../components/List/Treegrid.theme';
+export * from '../components/Main/Main.theme';
+export * from '../components/Menu/Menu.theme';
+export * from '../components/Message/Message.theme';
+export * from '../components/Popover/Popover.theme';
+export * from '../components/ScrollArea/ScrollArea.theme';
+export * from '../components/Select/Select.theme';
+export * from '../components/Separator/Separator.theme';
+export * from '../components/Skeleton/Skeleton.theme';
+export * from '../components/Splitter/Splitter.theme';
+export * from '../components/Status/Status.theme';
+export * from '../components/Tag/Tag.theme';
+export * from '../components/Toast/Toast.theme';
+export * from '../components/Toolbar/Toolbar.theme';
+export * from '../components/Tooltip/Tooltip.theme';
+export * from '../components/Column/Column.theme';
+export * from '../components/Panel/Panel.theme';