@dxos/react-ui 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-main.fffef41",
   "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",
@@ -37,7 +37,6 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@fluentui/react-tabster": "^9.24.2",
-    "@phosphor-icons/react": "^2.1.5",
     "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
@@ -57,7 +56,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",
@@ -75,33 +74,35 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.fd6878d",
-    "@dxos/lit-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-hooks": "0.8.4-main.fd6878d",
-    "@dxos/react-input": "0.8.4-main.fd6878d",
-    "@dxos/log": "0.8.4-main.fd6878d",
-    "@dxos/react-list": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-types": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d"
+    "@dxos/async": "0.8.4-main.fffef41",
+    "@dxos/lit-ui": "0.8.4-main.fffef41",
+    "@dxos/log": "0.8.4-main.fffef41",
+    "@dxos/invariant": "0.8.4-main.fffef41",
+    "@dxos/react-hooks": "0.8.4-main.fffef41",
+    "@dxos/react-input": "0.8.4-main.fffef41",
+    "@dxos/react-list": "0.8.4-main.fffef41",
+    "@dxos/react-ui-types": "0.8.4-main.fffef41",
+    "@dxos/util": "0.8.4-main.fffef41",
+    "@dxos/debug": "0.8.4-main.fffef41"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/util": "0.8.4-main.fd6878d"
+    "@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",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
+    "@dxos/util": "0.8.4-main.fffef41"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,7 +2,7 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta } from '@storybook/react-vite';
 import React, { type PropsWithChildren } from 'react';
 
 import { type HuePalette } from '@dxos/react-ui-theme';
@@ -13,7 +13,7 @@ import { withTheme } from '../../testing';
 
 import { Avatar, type AvatarAnimation, type AvatarStatus, type AvatarVariant } from './Avatar';
 
-type StoryProps = {
+type StoryProps = PropsWithChildren<{
   id?: string;
   imgSrc?: string;
   fallbackText?: string;
@@ -24,9 +24,9 @@ type StoryProps = {
   animation?: AvatarAnimation;
   size?: Size;
   hue?: HuePalette;
-};
+}>;
 
-const DefaultStory = (props: PropsWithChildren<StoryProps>) => {
+const DefaultStory = (props: StoryProps) => {
   const {
     id = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     status,
@@ -56,17 +56,19 @@ const DefaultStory = (props: PropsWithChildren<StoryProps>) => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Avatar',
-  component: Avatar,
-  render: DefaultStory,
+  component: Avatar.Root,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof Avatar.Root>;
+
+export default meta;
 
 const sampleImage =
   'https://png.pngtree.com/thumb_back/fh260/background/20230614/pngtree-the-photo-of-a-woman-with-red-sunglasses-is-surrounded-by-image_2931163.jpg';
 
+const brokenImage = 'https://png.pngtree.com/potato_squirrel.png';
+
 const row = (size: Size) => (
   <>
     <DefaultStory size={size} status='inactive' description='Offline' />
@@ -98,6 +100,12 @@ export const Image = () => (
   </div>
 );
 
+export const BrokenImage = () => (
+  <div>
+    <DefaultStory variant='circle' imgSrc={brokenImage} />
+  </div>
+);
+
 export const Square = () => (
   <div className='flex flex-row gap-4'>
     <DefaultStory variant='square' status='inactive' description='Offline' />

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

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { useId } from '@dxos/react-hooks';
@@ -37,13 +37,16 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/AvatarGroup',
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

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

@@ -2,18 +2,17 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+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 } from './Breadcrumb';
+import { Breadcrumb, type BreadcrumbRootProps } from './Breadcrumb';
 
-const DefaultStory = () => {
+const DefaultStory = (props: BreadcrumbRootProps) => {
   return (
-    <Breadcrumb.Root aria-label='Breadcrumb'>
+    <Breadcrumb.Root {...props}>
       <Breadcrumb.List>
         <Breadcrumb.ListItem>
           <Breadcrumb.Link asChild>
@@ -39,14 +38,19 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Breadcrumb',
-  component: Breadcrumb,
+  component: Breadcrumb.Root as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
-  args: {},
+export const Default: Story = {
+  args: {
+    'aria-label': 'Breadcrumb',
+  },
 };

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

@@ -2,12 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { withSurfaceVariantsLayout, withTheme } from '../../testing';
+import { withTheme } from '../../testing';
+import { withLayoutVariants } from '../../testing';
 import { Icon } from '../Icon';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
@@ -33,13 +32,12 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   );
 };
 
-const meta: Meta<typeof Button> = {
+const meta = {
   title: 'ui/react-ui-core/Button',
   component: Button,
   render: DefaultStory,
-  decorators: [withSurfaceVariantsLayout(), withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  decorators: [withTheme, withLayoutVariants()],
+} satisfies Meta<typeof Button>;
 
 export default meta;
 

package/src/components/{Buttons → Button}/IconButton.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';
@@ -24,15 +23,18 @@ const DefaultStory = (props: IconButtonProps) => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/IconButton',
   component: IconButton,
-  render: DefaultStory,
+  render: DefaultStory as any,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     label: 'Bold',
     icon: 'ph--text-b--regular',

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

@@ -12,21 +12,29 @@ import { Tooltip, type TooltipSide } from '../Tooltip';
 import { Button, type ButtonProps } from './Button';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
-  Pick<IconProps, 'icon' | 'size'> & {
+  Partial<Pick<IconProps, 'icon' | 'size'>> & {
     label: string;
     iconOnly?: boolean;
     noTooltip?: boolean;
     caretDown?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
-    tooltipPortal?: boolean;
     tooltipSide?: TooltipSide;
   };
 
+const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
+  props.iconOnly ? (
+    <IconOnlyButton {...props} ref={forwardedRef} />
+  ) : (
+    <LabelledIconButton {...props} ref={forwardedRef} />
+  ),
+);
+
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
+  ({ noTooltip, tooltipSide, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
+
     return (
       <Tooltip.Trigger asChild content={props.label} side={tooltipSide}>
         <LabelledIconButton {...props} ref={forwardedRef} />
@@ -35,12 +43,13 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
+// TODO(burdon): Inherit size from container/density.
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
+  ({ icon, size = 5, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <Button {...props} classNames={tx('iconButton.root', 'iconButton', { iconOnly }, classNames)} ref={forwardedRef}>
-        <Icon icon={icon} size={size} classNames={iconClassNames} />
+        {icon && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
         {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}
       </Button>
@@ -48,14 +57,6 @@ const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef) =>
-  props.iconOnly ? (
-    <IconOnlyButton {...props} ref={forwardedRef} />
-  ) : (
-    <LabelledIconButton {...props} ref={forwardedRef} />
-  ),
-);
-
 export { IconButton };
 
 export type { IconButtonProps };

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

@@ -2,18 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
-import { Toggle } from './Toggle';
-
-type StorybookToggleProps = {};
+import { Toggle, type ToggleProps } from './Toggle';
 
-const DefaultStory = (props: StorybookToggleProps) => {
+const DefaultStory = (props: ToggleProps) => {
   return (
     <Toggle {...props}>
       <Icon icon='ph--text-b--regular' />
@@ -21,14 +18,20 @@ const DefaultStory = (props: StorybookToggleProps) => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Toggle',
   component: Toggle,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

package/src/components/{Buttons → Button}/ToggleGroup.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';
@@ -25,15 +24,18 @@ const DefaultStory = (props: ToggleGroupProps) => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/ToggleGroup',
   component: ToggleGroup,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof ToggleGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     type: 'single',
   },

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

@@ -12,6 +12,7 @@ import {
 import React, { forwardRef } from 'react';
 
 import { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps } from './Button';
+import { IconButton, type IconButtonProps } from './IconButton';
 
 type ToggleGroupProps = Omit<ToggleGroupSingleProps, 'className'> | Omit<ToggleGroupMultipleProps, 'className'>;
 
@@ -37,5 +38,17 @@ const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
   },
 );
 
-export { ToggleGroup, ToggleGroupItem };
+type ToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
+
+const ToggleGroupIconItem = forwardRef<HTMLButtonElement, ToggleGroupIconItemProps>(
+  ({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
+    return (
+      <ToggleGroupItemPrimitive {...props} asChild>
+        <IconButton {...{ variant, elevation, density, classNames, label, icon, size }} ref={forwardedRef} />
+      </ToggleGroupItemPrimitive>
+    );
+  },
+);
+
+export { ToggleGroup, ToggleGroupItem, ToggleGroupIconItem };
 export type { ToggleGroupProps, ToggleGroupItemProps };

package/src/components/Clipboard/CopyButton.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import { mx } from '@dxos/react-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';

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

@@ -2,12 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+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';
@@ -16,12 +15,12 @@ type StoryProps = Partial<{
   title: string;
   description: string;
   body: string;
+  openTrigger: string;
   cancelTrigger: string;
   actionTrigger: string;
-  openTrigger: string;
 }>;
 
-const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: StoryProps) => {
+const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, actionTrigger }: StoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -47,15 +46,18 @@ const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, ac
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/AlertDialog',
-  component: AlertDialog,
-  render: DefaultStory,
+  component: AlertDialog.Root as any,
+  render: DefaultStory as any,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {
     title: 'AlertDialog title',
     openTrigger: 'Open AlertDialog',

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

@@ -2,12 +2,11 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
+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 { Dialog } from './Dialog';
 
@@ -40,15 +39,23 @@ const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blo
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Dialog',
-  component: Dialog,
+  component: Dialog as any,
   render: DefaultStory,
   decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
+  parameters: {
+    chromatic: {
+      disableSnapshot: false,
+    },
+  },
+} satisfies Meta<typeof DefaultStory>;
 
-export const Default = {
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
   args: {
     title: 'Dialog title',
     openTrigger: 'Open Dialog',
@@ -57,10 +64,4 @@ export const Default = {
     closeTrigger: 'Close trigger',
     blockAlign: 'center',
   },
-  argTypes: {
-    blockAlign: {
-      type: 'select',
-      options: ['center', 'start', 'end'],
-    },
-  },
 };