@dxos/react-ui 0.8.4-main.67995b8 → 0.8.4-main.69d29f4

package/src/components/DensityProvider/DensityProvider.tsx

@@ -2,9 +2,9 @@
 // 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';
+import { type Density } from '@dxos/ui-types';
 
 export interface DensityContextValue {
   density?: Density;

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

@@ -2,25 +2,25 @@
 // Copyright 2022 DXOS.org
 //
 
-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 { Button } from '../Button';
 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 +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}/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/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

@@ -4,29 +4,42 @@
 
 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,
+  DialogClose as DialogClosePrimitive,
+  type DialogCloseProps as DialogClosePrimitiveProps,
+  DialogContent as DialogContentPrimitive,
+  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,
-  DialogDescription as DialogDescriptionPrimitive,
-  type DialogDescriptionProps as DialogDescriptionPrimitiveProps,
-  DialogClose as DialogClosePrimitive,
-  type DialogCloseProps as DialogClosePrimitiveProps,
-  DialogContent as DialogContentPrimitive,
-  type DialogContentProps as DialogContentPrimitiveProps,
+  DialogTrigger as DialogTriggerPrimitive,
+  type DialogTriggerProps as DialogTriggerPrimitiveProps,
 } from '@radix-ui/react-dialog';
-import React, { forwardRef, type ForwardRefExoticComponent, type FunctionComponent } 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

@@ -2,9 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren } from 'react';
+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

@@ -0,0 +1,113 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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/ui-theme';
+
+import { withTheme } from '../../testing';
+
+import { Icon } from './Icon';
+
+/**
+ * Create icon from serializable data.
+ * https://github.com/phosphor-icons/react#custom-icons
+ * https://github.com/phosphor-icons/core/tree/main/assets
+ */
+const createIcon = ({
+  name,
+  weights,
+}: {
+  name: string;
+  weights: Record<string, SVGProps<SVGPathElement>[]>;
+}): FC<IconProps> => {
+  const CustomIcon = forwardRef<SVGSVGElement, IconProps>((props, ref) => (
+    <IconBase
+      ref={ref}
+      {...props}
+      weights={
+        new Map<IconWeight, ReactElement>(
+          Object.entries(weights).map(
+            ([key, paths]) =>
+              [
+                key,
+                <>
+                  {paths.map((props, i) => (
+                    <path key={`${key}-${i}`} {...props} />
+                  ))}
+                </>,
+              ] as [IconWeight, ReactElement],
+          ),
+        )
+      }
+    />
+  ));
+
+  CustomIcon.displayName = name;
+  return CustomIcon;
+};
+
+const DefaultStory = ({ CustomIcon }: { CustomIcon: FC<IconProps> }) => {
+  return (
+    <div className='grid grid-cols-2 gap-8'>
+      <CustomIcon weight={'regular'} className={mx(getSize(16))} />
+      <Icon icon='ph--github-logo--regular' classNames={mx(getSize(16))} />
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/Icon',
+  render: DefaultStory,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    CustomIcon: createIcon({
+      name: 'GithubLogo',
+      weights: {
+        // https://github.com/phosphor-icons/core/tree/main/assets
+        // <path d="M119.83,56A52,52,0,0,0,76,32a51.92,51.92,0,0,0-3.49,44.7A49.28,49.28,0,0,0,64,104v8a48,48,0,0,0,48,48h48a48,48,0,0,0,48-48v-8a49.28,49.28,0,0,0-8.51-27.3A51.92,51.92,0,0,0,196,32a52,52,0,0,0-43.83,24Z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        // <path d="M104,232V192a32,32,0,0,1,32-32h0a32,32,0,0,1,32,32v40" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        // <path d="M104,208H72a32,32,0,0,1-32-32A32,32,0,0,0,8,144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/>
+        regular: [
+          {
+            d: 'M119.83,56A52,52,0,0,0,76,32a51.92,51.92,0,0,0-3.49,44.7A49.28,49.28,0,0,0,64,104v8a48,48,0,0,0,48,48h48a48,48,0,0,0,48-48v-8a49.28,49.28,0,0,0-8.51-27.3A51.92,51.92,0,0,0,196,32a52,52,0,0,0-43.83,24Z',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '16',
+          },
+          {
+            d: 'M104,232V192a32,32,0,0,1,32-32h0a32,32,0,0,1,32,32v40',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '16',
+          },
+          {
+            d: 'M104,208H72a32,32,0,0,1-32-32A32,32,0,0,0,8,144',
+            fill: 'none',
+            stroke: 'currentColor',
+            strokeLinecap: 'round',
+            strokeLinejoin: 'round',
+            strokeWidth: '16',
+          },
+        ],
+      },
+    }),
+  },
+};

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';
@@ -16,7 +16,7 @@ export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.s
 };
 
 export const Icon = memo(
-  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size = 4, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const href = useIconHref(icon);
     return (