@dxos/react-ui 0.8.4-main.548089c → 0.8.4-main.59c2e9b

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.548089c",
+  "version": "0.8.4-main.59c2e9b",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -35,9 +39,9 @@
     "src"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@effect-atom/atom-react": "^0.4.6",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
     "@radix-ui/react-avatar": "1.1.3",
@@ -56,7 +60,7 @@
     "@radix-ui/react-portal": "1.1.4",
     "@radix-ui/react-presence": "1.1.2",
     "@radix-ui/react-primitive": "2.0.2",
-    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-scroll-area": "1.2.10",
     "@radix-ui/react-select": "2.1.6",
     "@radix-ui/react-separator": "1.1.2",
     "@radix-ui/react-slot": "1.1.2",
@@ -74,33 +78,36 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.548089c",
-    "@dxos/lit-ui": "0.8.4-main.548089c",
-    "@dxos/react-hooks": "0.8.4-main.548089c",
-    "@dxos/log": "0.8.4-main.548089c",
-    "@dxos/react-input": "0.8.4-main.548089c",
-    "@dxos/react-list": "0.8.4-main.548089c",
-    "@dxos/react-ui-types": "0.8.4-main.548089c",
-    "@dxos/util": "0.8.4-main.548089c"
+    "@dxos/async": "0.8.4-main.59c2e9b",
+    "@dxos/debug": "0.8.4-main.59c2e9b",
+    "@dxos/invariant": "0.8.4-main.59c2e9b",
+    "@dxos/lit-ui": "0.8.4-main.59c2e9b",
+    "@dxos/react-hooks": "0.8.4-main.59c2e9b",
+    "@dxos/log": "0.8.4-main.59c2e9b",
+    "@dxos/react-input": "0.8.4-main.59c2e9b",
+    "@dxos/react-list": "0.8.4-main.59c2e9b",
+    "@dxos/ui-types": "0.8.4-main.59c2e9b",
+    "@dxos/util": "0.8.4-main.59c2e9b"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@phosphor-icons/react": "^2.1.10",
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
+    "@phosphor-icons/react": "2.1.10",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "tabster": "^8.5.5",
     "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.548089c",
-    "@dxos/util": "0.8.4-main.548089c",
-    "@dxos/react-ui-theme": "0.8.4-main.548089c"
+    "@dxos/random": "0.8.4-main.59c2e9b",
+    "@dxos/ui-theme": "0.8.4-main.59c2e9b",
+    "@dxos/util": "0.8.4-main.59c2e9b"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui-theme": "0.8.4-main.548089c"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-main.59c2e9b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.stories.tsx

@@ -5,8 +5,8 @@
 import { type Meta } from '@storybook/react-vite';
 import React, { type PropsWithChildren } from 'react';
 
-import { type HuePalette } from '@dxos/react-ui-theme';
-import { type Size } from '@dxos/react-ui-types';
+import { type HuePalette } from '@dxos/ui-theme';
+import { type Size } from '@dxos/ui-types';
 import { hexToFallback } from '@dxos/util';
 
 import { withTheme } from '../../testing';

package/src/components/Avatars/Avatar.tsx

@@ -17,7 +17,7 @@ import {
 } from '@dxos/lit-ui';
 import { DxAvatar } from '@dxos/lit-ui/react';
 import { useId } from '@dxos/react-hooks';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { useIconHref, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 
 import { Breadcrumb, type BreadcrumbRootProps } from './Breadcrumb';
 

package/src/components/{Buttons → Button}/Button.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-import { withSurfaceVariantsLayout } from '../../testing';
+import { withLayoutVariants } from '../../testing';
 import { Icon } from '../Icon';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
@@ -36,7 +36,7 @@ const meta = {
   title: 'ui/react-ui-core/Button',
   component: Button,
   render: DefaultStory,
-  decorators: [withTheme, withSurfaceVariantsLayout()],
+  decorators: [withTheme, withLayoutVariants()],
 } satisfies Meta<typeof Button>;
 
 export default meta;

package/src/components/{Buttons → Button}/Button.tsx

@@ -7,7 +7,7 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
-import { type Density, type Elevation } from '@dxos/react-ui-types';
+import { type Density, type Elevation } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/{Buttons → Button}/IconButton.tsx

@@ -14,9 +14,10 @@ import { Button, type ButtonProps } from './Button';
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Partial<Pick<IconProps, 'icon' | 'size'>> & {
     label: string;
-    iconOnly?: boolean;
     noTooltip?: boolean;
     caretDown?: boolean;
+    iconOnly?: boolean;
+    iconEnd?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipSide?: TooltipSide;
   };
@@ -43,13 +44,18 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
+// TODO(burdon): Inherit size from container/density.
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size = 5, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
+  (
+    { size = 5, icon, iconOnly, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
+    forwardedRef,
+  ) => {
     const { tx } = useThemeContext();
     return (
       <Button {...props} classNames={tx('iconButton.root', 'iconButton', { iconOnly }, classNames)} ref={forwardedRef}>
-        {icon && <Icon icon={icon} size={size} classNames={iconClassNames} />}
+        {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
+        {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}
       </Button>
     );

package/src/components/{Buttons → Button}/Toggle.stories.tsx

@@ -8,11 +8,9 @@ import React from 'react';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
-import { Toggle } from './Toggle';
+import { Toggle, type ToggleProps } from './Toggle';
 
-type StorybookToggleProps = {};
-
-const DefaultStory = (props: StorybookToggleProps) => {
+const DefaultStory = (props: ToggleProps) => {
   return (
     <Toggle {...props}>
       <Icon icon='ph--text-b--regular' />
@@ -25,6 +23,9 @@ const meta = {
   component: Toggle,
   render: DefaultStory,
   decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
 } satisfies Meta<typeof Toggle>;
 
 export default meta;

package/src/components/Clipboard/CopyButton.tsx

@@ -4,9 +4,9 @@
 
 import React from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx, osTranslations } from '@dxos/ui-theme';
 
-import { Button, type ButtonProps, IconButton } from '../Buttons';
+import { Button, type ButtonProps, IconButton } from '../Button';
 import { Icon, type IconProps } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
@@ -21,7 +21,7 @@ export type CopyButtonProps = ButtonProps &
 const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
 
 export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButtonProps) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   return (
@@ -55,7 +55,7 @@ export const CopyButtonIconOnly = ({
   variant,
   ...props
 }: TooltipScopedProps<CopyButtonIconOnlyProps>) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t('copy success label') : (props.label ?? t('copy label'));

package/src/components/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;

package/src/components/{Dialogs → Dialog}/AlertDialog.stories.tsx

@@ -6,7 +6,7 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-import { Button } from '../Buttons';
+import { Button } from '../Button';
 import { Toolbar } from '../Toolbar';
 
 import { AlertDialog } from './AlertDialog';

package/src/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,97 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+
+import { withTheme } from '../../testing';
+import { Button } from '../Button';
+
+import { Dialog, type DialogContentProps } from './Dialog';
+
+type StoryProps = Pick<DialogContentProps, 'size'> &
+  Partial<{
+    title: string;
+    description: string;
+    openTrigger: string;
+    closeTrigger: string;
+    blockAlign: 'center' | 'start';
+  }>;
+
+const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blockAlign }: StoryProps) => {
+  return (
+    <Dialog.Root defaultOpen>
+      <Dialog.Trigger asChild>
+        <Button>{openTrigger}</Button>
+      </Dialog.Trigger>
+      <Dialog.Overlay blockAlign={blockAlign}>
+        <Dialog.Content size={size}>
+          <Dialog.Header>
+            <Dialog.Title>{title}</Dialog.Title>
+            {closeTrigger && (
+              <Dialog.Close asChild>
+                <Dialog.CloseIconButton />
+              </Dialog.Close>
+            )}
+          </Dialog.Header>
+          <Dialog.Description>{description}</Dialog.Description>
+          <Dialog.Close asChild>
+            <Button variant='primary'>{closeTrigger}</Button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Overlay>
+    </Dialog.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/Dialog',
+  component: Dialog as any,
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    chromatic: {
+      disableSnapshot: false,
+    },
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Small: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(2),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'sm',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(2),
+    openTrigger: 'Open',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'md',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    title: 'Dialog title',
+    description: faker.lorem.paragraph(2),
+    openTrigger: 'Open Dialog',
+    closeTrigger: 'Close',
+    blockAlign: 'center',
+    size: 'lg',
+  },
+};

package/src/components/{Dialogs → Dialog}/Dialog.tsx

@@ -7,7 +7,6 @@ import {
   DialogClose as DialogClosePrimitive,
   type DialogCloseProps as DialogClosePrimitiveProps,
   DialogContent as DialogContentPrimitive,
-  type DialogContentProps as DialogContentPrimitiveProps,
   DialogDescription as DialogDescriptionPrimitive,
   type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
   DialogOverlay as DialogOverlayPrimitive,
@@ -21,12 +20,26 @@ import {
   DialogTrigger as DialogTriggerPrimitive,
   type DialogTriggerProps as DialogTriggerPrimitiveProps,
 } from '@radix-ui/react-dialog';
-import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
+import React, {
+  type ComponentPropsWithRef,
+  type ForwardRefExoticComponent,
+  type FunctionComponent,
+  type PropsWithChildren,
+  forwardRef,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { type DialogSize, osTranslations } from '@dxos/ui-theme';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { IconButton, type IconButtonProps } from '../Button';
 import { ElevationProvider } from '../ElevationProvider';
 
+//
+// Root
+//
+
 type DialogRootProps = DialogRootPrimitiveProps;
 
 const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
@@ -35,52 +48,30 @@ const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   </ElevationProvider>
 );
 
+//
+// Trigger
+//
+
 type DialogTriggerProps = DialogTriggerPrimitiveProps;
 
 const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogTriggerPrimitive;
 
+//
+// Portal
+//
+
 type DialogPortalProps = DialogPortalPrimitiveProps;
 
 const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPortalPrimitive;
 
-type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
-
-const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  ({ classNames, srOnly, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DialogTitlePrimitive
-        {...props}
-        className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
-
-const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
-  HTMLParagraphElement,
-  DialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <DialogDescriptionPrimitive
-      {...props}
-      className={tx('dialog.description', 'dialog__description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
-
-type DialogCloseProps = DialogClosePrimitiveProps;
+//
+// Overlay
+//
 
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
+const DIALOG_OVERLAY_NAME = 'DialogOverlay';
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
-const DIALOG_OVERLAY_NAME = 'DialogOverlay';
-const DIALOG_CONTENT_NAME = 'DialogContent';
+
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
   DIALOG_OVERLAY_NAME,
   {},
@@ -107,10 +98,19 @@ const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<
 
 DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 
-type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOverlayLayout?: boolean };
+//
+// Content
+//
+
+const DIALOG_CONTENT_NAME = 'DialogContent';
+
+type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogContentPrimitive>> & {
+  size?: DialogSize;
+  inOverlayLayout?: boolean;
+};
 
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
+  ({ classNames, children, size, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
@@ -123,7 +123,7 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
         className={tx(
           'dialog.content',
           'dialog',
-          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout },
+          { inOverlayLayout: propsInOverlayLayout || inOverlayLayout, size },
           classNames,
         )}
         ref={forwardedRef}
@@ -136,15 +136,113 @@ const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<
 
 DialogContent.displayName = DIALOG_CONTENT_NAME;
 
+//
+// Header
+//
+
+type DialogHeaderProps = ThemedClassName<PropsWithChildren> & { srOnly?: boolean };
+
+const DialogHeader: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <div
+        {...props}
+        role='header'
+        className={tx('dialog.header', 'dialog__header', { srOnly }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+//
+// Title
+//
+
+type DialogTitleProps = ThemedClassName<DialogTitlePrimitiveProps> & { srOnly?: boolean };
+
+const DialogTitle: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<HTMLHeadingElement, DialogTitleProps>(
+  ({ classNames, srOnly, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DialogTitlePrimitive
+        {...props}
+        className={tx('dialog.title', 'dialog__title', { srOnly }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+//
+// Description
+//
+
+type DialogDescriptionProps = ThemedClassName<DialogDescriptionPrimitiveProps> & { srOnly?: boolean };
+
+const DialogDescription: ForwardRefExoticComponent<DialogTitleProps> = forwardRef<
+  HTMLParagraphElement,
+  DialogDescriptionProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <DialogDescriptionPrimitive
+      {...props}
+      className={tx('dialog.description', 'dialog__description', { srOnly }, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+//
+// Close
+//
+
+type DialogCloseProps = DialogClosePrimitiveProps;
+
+const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
+
+//
+// Close Button
+//
+
+type DialogCloseIconButtonProps = ThemedClassName<Partial<IconButtonProps>>;
+
+const DialogCloseIconButton: ForwardRefExoticComponent<DialogCloseIconButtonProps> = forwardRef<
+  HTMLButtonElement,
+  DialogCloseIconButtonProps
+>((props, forwardedRef) => {
+  const { t } = useTranslation(osTranslations);
+  return (
+    <IconButton
+      {...props}
+      label={props.label ?? t('close dialog label')}
+      icon='ph--x--regular'
+      iconOnly
+      size={4}
+      density='fine'
+      variant='ghost'
+      ref={forwardedRef}
+    />
+  );
+});
+
+//
+// Dialog
+//
+
 export const Dialog = {
   Root: DialogRoot,
   Trigger: DialogTrigger,
   Portal: DialogPortal,
   Overlay: DialogOverlay,
   Content: DialogContent,
+  Header: DialogHeader,
   Title: DialogTitle,
   Description: DialogDescription,
   Close: DialogClose,
+  CloseIconButton: DialogCloseIconButton,
 };
 
 export type {
@@ -153,7 +251,9 @@ export type {
   DialogPortalProps,
   DialogOverlayProps,
   DialogContentProps,
+  DialogHeaderProps,
   DialogTitleProps,
   DialogDescriptionProps,
   DialogCloseProps,
+  DialogCloseIconButtonProps,
 };

package/src/components/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/components/Icon/Icon.stories.tsx

@@ -6,7 +6,7 @@ import { IconBase, type IconProps, type IconWeight } from '@phosphor-icons/react
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type FC, type ReactElement, type SVGProps, forwardRef } from 'react';
 
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { getSize, mx } from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
 

package/src/components/Icon/Icon.tsx

@@ -5,7 +5,7 @@
 import { type Primitive } from '@radix-ui/react-primitive';
 import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
-import { type Size } from '@dxos/react-ui-types';
+import { type Size } from '@dxos/ui-types';
 
 import { useIconHref, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/Input/Input.stories.tsx

@@ -5,8 +5,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
-import { type MessageValence } from '@dxos/react-ui-types';
+import { baseSurface, modalSurface, mx, surfaceShadow } from '@dxos/ui-theme';
+import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';