@dxos/react-ui 0.8.4-main.e8ec1fe → 0.8.4-main.ef1bc66f44

package/package.json

@@ -1,25 +1,29 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.e8ec1fe",
+  "version": "0.8.4-main.ef1bc66f44",
   "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": {
     ".": {
-      "source": "./src/index.ts",
-      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": "./dist/lib/node-esm/index.mjs"
+      "node": "./dist/lib/node-esm/index.mjs",
+      "source": "./src/index.ts",
+      "types": "./dist/types/src/index.d.ts"
     },
     "./testing": {
-      "source": "./src/testing/index.ts",
-      "types": "./dist/types/src/testing/index.d.ts",
       "browser": "./dist/lib/browser/testing/index.mjs",
-      "node": "./dist/lib/node-esm/testing/index.mjs"
+      "node": "./dist/lib/node-esm/testing/index.mjs",
+      "source": "./src/testing/index.ts",
+      "types": "./dist/types/src/testing/index.d.ts"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -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.5.0",
+    "@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",
@@ -74,35 +78,36 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/async": "0.8.4-main.e8ec1fe",
-    "@dxos/debug": "0.8.4-main.e8ec1fe",
-    "@dxos/lit-ui": "0.8.4-main.e8ec1fe",
-    "@dxos/log": "0.8.4-main.e8ec1fe",
-    "@dxos/invariant": "0.8.4-main.e8ec1fe",
-    "@dxos/react-hooks": "0.8.4-main.e8ec1fe",
-    "@dxos/react-list": "0.8.4-main.e8ec1fe",
-    "@dxos/react-input": "0.8.4-main.e8ec1fe",
-    "@dxos/react-ui-types": "0.8.4-main.e8ec1fe",
-    "@dxos/util": "0.8.4-main.e8ec1fe"
+    "@dxos/debug": "0.8.4-main.ef1bc66f44",
+    "@dxos/invariant": "0.8.4-main.ef1bc66f44",
+    "@dxos/async": "0.8.4-main.ef1bc66f44",
+    "@dxos/lit-ui": "0.8.4-main.ef1bc66f44",
+    "@dxos/react-hooks": "0.8.4-main.ef1bc66f44",
+    "@dxos/log": "0.8.4-main.ef1bc66f44",
+    "@dxos/react-input": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-types": "0.8.4-main.ef1bc66f44",
+    "@dxos/react-list": "0.8.4-main.ef1bc66f44",
+    "@dxos/util": "0.8.4-main.ef1bc66f44"
   },
   "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.e8ec1fe",
-    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe",
-    "@dxos/util": "0.8.4-main.e8ec1fe"
+    "@dxos/random": "0.8.4-main.ef1bc66f44",
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44",
+    "@dxos/util": "0.8.4-main.ef1bc66f44"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui-theme": "0.8.4-main.e8ec1fe"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-main.ef1bc66f44"
   },
   "publishConfig": {
     "access": "public"

package/src/components/AnchoredOverflow/AnchoredOverflow.tsx

@@ -51,6 +51,14 @@ const AnchoredOverflowAnchor = forwardRef<HTMLDivElement, AnchoredOverflowAnchor
   },
 );
 
+/**
+ * This component leverages the CSS https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor property to prevent unwanted scroll jumps when content is dynamically
+ * added above the viewport. This is particularly useful for:
+ * - Chat applications where new messages are prepended to the list.
+ * - Notification feeds where new items appear at the top.
+ * - Any scenario where content is inserted at the start of a scrollable container.
+ */
+// TODO(burdon): Move into container?
 export const AnchoredOverflow = {
   Root: AnchoredOverflowRoot,
   Anchor: AnchoredOverflowAnchor,

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';
@@ -57,9 +57,9 @@ const DefaultStory = (props: StoryProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Avatar',
+  title: 'ui/react-ui-core/components/Avatar',
   component: Avatar.Root,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof Avatar.Root>;
 
 export default meta;

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/Avatars/AvatarGroup.stories.tsx

@@ -38,9 +38,9 @@ const DefaultStory = () => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/AvatarGroup',
+  title: 'ui/react-ui-core/components/AvatarGroup',
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

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

@@ -39,10 +39,10 @@ const DefaultStory = (props: BreadcrumbRootProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Breadcrumb',
+  title: 'ui/react-ui-core/components/Breadcrumb',
   component: Breadcrumb.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/Button/Button.stories.tsx

@@ -33,10 +33,10 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Button',
+  title: 'ui/react-ui-core/components/Button',
   component: Button,
   render: DefaultStory,
-  decorators: [withTheme, withLayoutVariants()],
+  decorators: [withTheme(), withLayoutVariants()],
 } satisfies Meta<typeof Button>;
 
 export default meta;

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

@@ -24,10 +24,10 @@ const DefaultStory = (props: IconButtonProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/IconButton',
+  title: 'ui/react-ui-core/components/IconButton',
   component: IconButton,
   render: DefaultStory as any,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof IconButton>;
 
 export default meta;

package/src/components/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;
   };
@@ -45,12 +46,16 @@ 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/Button/Toggle.stories.tsx

@@ -19,10 +19,10 @@ const DefaultStory = (props: ToggleProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Toggle',
+  title: 'ui/react-ui-core/components/Toggle',
   component: Toggle,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     layout: 'centered',
   },

package/src/components/Button/ToggleGroup.stories.tsx

@@ -25,10 +25,10 @@ const DefaultStory = (props: ToggleGroupProps) => {
 };
 
 const meta = {
-  title: 'ui/react-ui-core/ToggleGroup',
+  title: 'ui/react-ui-core/components/ToggleGroup',
   component: ToggleGroup,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof ToggleGroup>;
 
 export default meta;

package/src/components/Clipboard/CopyButton.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx, osTranslations } from '@dxos/ui-theme';
 
 import { Button, type ButtonProps, IconButton } from '../Button';
 import { Icon, type IconProps } from '../Icon';
@@ -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/Dialog/AlertDialog.stories.tsx

@@ -47,10 +47,10 @@ const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, ac
 };
 
 const meta = {
-  title: 'ui/react-ui-core/AlertDialog',
+  title: 'ui/react-ui-core/components/AlertDialog',
   component: AlertDialog.Root as any,
   render: DefaultStory as any,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

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

@@ -5,34 +5,46 @@
 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 } from './Dialog';
+import { Dialog, type DialogContentProps } from './Dialog';
 
-type StoryProps = Partial<{
-  title: string;
-  description: string;
-  body: string;
-  closeTrigger: string;
-  openTrigger: string;
-  blockAlign: 'center' | 'start';
-}>;
+type StoryProps = Pick<DialogContentProps, 'size'> &
+  Partial<{
+    title: string;
+    description: string;
+    openTrigger: string;
+    closeTrigger: string;
+    blockAlign: 'center' | 'start';
+  }>;
 
-const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StoryProps) => {
+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>
-          <Dialog.Title>{title}</Dialog.Title>
-          <Dialog.Description>{description}</Dialog.Description>
-          <p className='mbs-2 mbe-4'>{body}</p>
-          <Dialog.Close asChild>
-            <Button variant='primary'>{closeTrigger}</Button>
-          </Dialog.Close>
+        <Dialog.Content size={size}>
+          <Dialog.Header>
+            <Dialog.Title>{title}</Dialog.Title>
+            {closeTrigger && (
+              <Dialog.Close asChild>
+                <Dialog.CloseIconButton />
+              </Dialog.Close>
+            )}
+          </Dialog.Header>
+          <Dialog.Body>
+            <Dialog.Description>{description}</Dialog.Description>
+          </Dialog.Body>
+          <Dialog.ActionBar>
+            <Dialog.Close asChild>
+              <Button variant='primary'>{closeTrigger}</Button>
+            </Dialog.Close>
+          </Dialog.ActionBar>
         </Dialog.Content>
       </Dialog.Overlay>
     </Dialog.Root>
@@ -40,10 +52,10 @@ const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blo
 };
 
 const meta = {
-  title: 'ui/react-ui-core/Dialog',
+  title: 'ui/react-ui-core/components/Dialog',
   component: Dialog as any,
   render: DefaultStory,
-  decorators: [withTheme],
+  decorators: [withTheme()],
   parameters: {
     chromatic: {
       disableSnapshot: false,
@@ -55,13 +67,35 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+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',
-    description: 'Dialog description',
-    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-    closeTrigger: 'Close trigger',
+    closeTrigger: 'Close',
     blockAlign: 'center',
+    size: 'lg',
   },
 };