@dxos/react-ui 0.8.4-main.5acf9ea → 0.8.4-main.5ea62a8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.5acf9ea",
+  "version": "0.8.4-main.5ea62a8",
   "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",
@@ -10,16 +10,16 @@
   "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",
-      "source": "./src/index.ts"
+      "node": "./dist/lib/node-esm/index.mjs"
     },
     "./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",
-      "source": "./src/testing/index.ts"
+      "node": "./dist/lib/node-esm/testing/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -75,14 +75,14 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.5acf9ea",
-    "@dxos/lit-ui": "0.8.4-main.5acf9ea",
-    "@dxos/log": "0.8.4-main.5acf9ea",
-    "@dxos/react-hooks": "0.8.4-main.5acf9ea",
-    "@dxos/react-input": "0.8.4-main.5acf9ea",
-    "@dxos/react-ui-types": "0.8.4-main.5acf9ea",
-    "@dxos/util": "0.8.4-main.5acf9ea",
-    "@dxos/react-list": "0.8.4-main.5acf9ea"
+    "@dxos/debug": "0.8.4-main.5ea62a8",
+    "@dxos/lit-ui": "0.8.4-main.5ea62a8",
+    "@dxos/react-hooks": "0.8.4-main.5ea62a8",
+    "@dxos/log": "0.8.4-main.5ea62a8",
+    "@dxos/react-input": "0.8.4-main.5ea62a8",
+    "@dxos/react-list": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-types": "0.8.4-main.5ea62a8",
+    "@dxos/util": "0.8.4-main.5ea62a8"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -92,16 +92,16 @@
     "@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.5acf9ea",
-    "@dxos/react-ui-theme": "0.8.4-main.5acf9ea",
-    "@dxos/util": "0.8.4-main.5acf9ea"
+    "vite": "7.1.1",
+    "@dxos/random": "0.8.4-main.5ea62a8",
+    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8",
+    "@dxos/util": "0.8.4-main.5ea62a8"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.5acf9ea"
+    "@dxos/react-ui-theme": "0.8.4-main.5ea62a8"
   },
   "publishConfig": {
     "access": "public"

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

@@ -3,16 +3,18 @@
 //
 
 import '@dxos-theme';
+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 { hexToFallback } from '@dxos/util';
 
-import { Avatar, type AvatarVariant, type AvatarStatus, type AvatarAnimation } from './Avatar';
 import { withTheme } from '../../testing';
 
-type StoryProps = {
+import { Avatar, type AvatarAnimation, type AvatarStatus, type AvatarVariant } from './Avatar';
+
+type StoryProps = PropsWithChildren<{
   id?: string;
   imgSrc?: string;
   fallbackText?: string;
@@ -23,9 +25,9 @@ type StoryProps = {
   animation?: AvatarAnimation;
   size?: Size;
   hue?: HuePalette;
-};
+}>;
 
-const DefaultStory = (props: PropsWithChildren<StoryProps>) => {
+const DefaultStory = (props: StoryProps) => {
   const {
     id = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     status,
@@ -55,17 +57,20 @@ 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' />
@@ -97,6 +102,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/Avatar.tsx

@@ -7,12 +7,12 @@ import '@dxos/lit-ui/dx-avatar.pcss';
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, type PropsWithChildren } from 'react';
+import React, { type ComponentProps, type ComponentPropsWithRef, type PropsWithChildren, forwardRef } from 'react';
 
 import {
-  type AvatarVariant,
-  type AvatarStatus,
   type AvatarAnimation,
+  type AvatarStatus,
+  type AvatarVariant,
   type DxAvatar as NaturalDxAvatar,
 } from '@dxos/lit-ui';
 import { DxAvatar } from '@dxos/lit-ui/react';

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

@@ -3,14 +3,17 @@
 //
 
 import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { useId } from '@dxos/react-hooks';
 import { toEmoji } from '@dxos/util';
 
-import { Avatar } from './Avatar';
 import { withTheme } from '../../testing';
 
+import { Avatar } from './Avatar';
+
 const hues = ['lime', 'teal', 'purple', 'pink'];
 
 const AvatarItem = ({ n }: { n: number }) => {
@@ -36,13 +39,17 @@ 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

@@ -4,15 +4,17 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Breadcrumb } from './Breadcrumb';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-const DefaultStory = () => {
+import { Breadcrumb, type BreadcrumbRootProps } from './Breadcrumb';
+
+const DefaultStory = (props: BreadcrumbRootProps) => {
   return (
-    <Breadcrumb.Root aria-label='Breadcrumb'>
+    <Breadcrumb.Root {...props}>
       <Breadcrumb.List>
         <Breadcrumb.ListItem>
           <Breadcrumb.Link asChild>
@@ -38,14 +40,20 @@ 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/Breadcrumb/Breadcrumb.tsx

@@ -4,7 +4,7 @@
 
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, type ComponentPropsWithoutRef, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

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

@@ -4,13 +4,14 @@
 
 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, ButtonGroup, type ButtonProps } from './Button';
 import { withSurfaceVariantsLayout, withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
+import { Button, ButtonGroup, type ButtonProps } from './Button';
+
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
     <div>
@@ -32,13 +33,13 @@ 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 } },
-};
+} satisfies Meta<typeof Button>;
 
 export default meta;
 

package/src/components/Buttons/IconButton.stories.tsx

@@ -4,12 +4,14 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { IconButton, type IconButtonProps } from './IconButton';
 import { withTheme } from '../../testing';
 import { Tooltip } from '../Tooltip';
 
+import { IconButton, type IconButtonProps } from './IconButton';
+
 const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>
@@ -23,15 +25,19 @@ 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/IconButton.tsx

@@ -4,12 +4,13 @@
 
 import React, { forwardRef } from 'react';
 
-import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
 import { Tooltip, type TooltipSide } from '../Tooltip';
 
+import { Button, type ButtonProps } from './Button';
+
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Pick<IconProps, 'icon' | 'size'> & {
     label: string;

package/src/components/Buttons/Toggle.stories.tsx

@@ -4,12 +4,14 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Toggle } from './Toggle';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
+import { Toggle } from './Toggle';
+
 type StorybookToggleProps = {};
 
 const DefaultStory = (props: StorybookToggleProps) => {
@@ -20,14 +22,18 @@ const DefaultStory = (props: StorybookToggleProps) => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Toggle',
   component: Toggle,
   render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

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

@@ -4,12 +4,14 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
+import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
+
 // TODO(burdon): Create Radix-style Root, Item, etc?
 const DefaultStory = (props: ToggleGroupProps) => {
   return (
@@ -24,15 +26,19 @@ 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/ToggleGroup.tsx

@@ -3,11 +3,11 @@
 //
 
 import {
+  ToggleGroupItem as ToggleGroupItemPrimitive,
+  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
+  type ToggleGroupMultipleProps,
   ToggleGroup as ToggleGroupPrimitive,
   type ToggleGroupSingleProps,
-  type ToggleGroupMultipleProps,
-  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
-  ToggleGroupItem as ToggleGroupItemPrimitive,
 } from '@radix-ui/react-toggle-group';
 import React, { forwardRef } from 'react';
 

package/src/components/Clipboard/ClipboardProvider.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren, useCallback, useContext, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
 export type ClipboardContextValue = {
   textValue: string;

package/src/components/Clipboard/CopyButton.tsx

@@ -6,12 +6,13 @@ import React from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
 
-import { useClipboard } from './ClipboardProvider';
 import { Button, type ButtonProps, IconButton } from '../Buttons';
 import { Icon, type IconProps } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
 
+import { useClipboard } from './ClipboardProvider';
+
 export type CopyButtonProps = ButtonProps &
   Pick<IconProps, 'size'> & {
     value: string;

package/src/components/DensityProvider/DensityProvider.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren } from 'react';
+import React, { type PropsWithChildren, createContext } from 'react';
 
 import { type Density } from '@dxos/react-ui-types';
 

package/src/components/Dialogs/AlertDialog.stories.tsx

@@ -4,23 +4,25 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { AlertDialog } from './AlertDialog';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 import { Toolbar } from '../Toolbar';
 
+import { AlertDialog } from './AlertDialog';
+
 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>
@@ -46,15 +48,19 @@ 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/AlertDialog.tsx

@@ -3,27 +3,27 @@
 //
 
 import {
-  type AlertDialogProps as AlertDialogRootPrimitiveProps,
-  Root as AlertDialogRootPrimitive,
-  AlertDialogTrigger as AlertDialogTriggerPrimitive,
-  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
-  AlertDialogPortal as AlertDialogPortalPrimitive,
-  type AlertDialogPortalProps as AlertDialogPortalPrimitiveProps,
-  AlertDialogOverlay as AlertDialogOverlayPrimitive,
-  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
-  AlertDialogTitle as AlertDialogTitlePrimitive,
-  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
-  AlertDialogDescription as AlertDialogDescriptionPrimitive,
-  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
   AlertDialogAction as AlertDialogActionPrimitive,
   type AlertDialogActionProps as AlertDialogActionPrimitiveProps,
   AlertDialogCancel as AlertDialogCancelPrimitive,
   type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,
   AlertDialogContent as AlertDialogContentPrimitive,
   type AlertDialogContentProps as AlertDialogContentPrimitiveProps,
+  AlertDialogDescription as AlertDialogDescriptionPrimitive,
+  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
+  AlertDialogOverlay as AlertDialogOverlayPrimitive,
+  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
+  AlertDialogPortal as AlertDialogPortalPrimitive,
+  type AlertDialogPortalProps as AlertDialogPortalPrimitiveProps,
+  Root as AlertDialogRootPrimitive,
+  type AlertDialogProps as AlertDialogRootPrimitiveProps,
+  AlertDialogTitle as AlertDialogTitlePrimitive,
+  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
+  AlertDialogTrigger as AlertDialogTriggerPrimitive,
+  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
 } from '@radix-ui/react-alert-dialog';
 import { createContext } from '@radix-ui/react-context';
-import React, { forwardRef, type ForwardRefExoticComponent, type FunctionComponent } from 'react';
+import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

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

@@ -4,12 +4,14 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Dialog } from './Dialog';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
+import { Dialog } from './Dialog';
+
 type StoryProps = Partial<{
   title: string;
   description: string;
@@ -39,15 +41,19 @@ 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 } },
-};
+} 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',
@@ -56,10 +62,4 @@ export const Default = {
     closeTrigger: 'Close trigger',
     blockAlign: 'center',
   },
-  argTypes: {
-    blockAlign: {
-      type: 'select',
-      options: ['center', 'start', 'end'],
-    },
-  },
 };

package/src/components/Dialogs/Dialog.tsx

@@ -4,24 +4,24 @@
 
 import { createContext } from '@radix-ui/react-context';
 import {
-  type DialogProps as DialogRootPrimitiveProps,
-  Root as DialogRootPrimitive,
-  DialogTrigger as DialogTriggerPrimitive,
-  type DialogTriggerProps as DialogTriggerPrimitiveProps,
-  DialogPortal as DialogPortalPrimitive,
-  type DialogPortalProps as DialogPortalPrimitiveProps,
-  DialogOverlay as DialogOverlayPrimitive,
-  type DialogOverlayProps as DialogOverlayPrimitiveProps,
-  DialogTitle as DialogTitlePrimitive,
-  type DialogTitleProps as DialogTitlePrimitiveProps,
-  DialogDescription as DialogDescriptionPrimitive,
-  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
   DialogClose as DialogClosePrimitive,
   type DialogCloseProps as DialogClosePrimitiveProps,
   DialogContent as DialogContentPrimitive,
   type DialogContentProps as DialogContentPrimitiveProps,
+  DialogDescription as DialogDescriptionPrimitive,
+  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
+  DialogOverlay as DialogOverlayPrimitive,
+  type DialogOverlayProps as DialogOverlayPrimitiveProps,
+  DialogPortal as DialogPortalPrimitive,
+  type DialogPortalProps as DialogPortalPrimitiveProps,
+  Root as DialogRootPrimitive,
+  type DialogProps as DialogRootPrimitiveProps,
+  DialogTitle as DialogTitlePrimitive,
+  type DialogTitleProps as DialogTitlePrimitiveProps,
+  DialogTrigger as DialogTriggerPrimitive,
+  type DialogTriggerProps as DialogTriggerPrimitiveProps,
 } from '@radix-ui/react-dialog';
-import React, { forwardRef, type ForwardRefExoticComponent, type FunctionComponent } from 'react';
+import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';