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

package/src/components/Message/Message.tsx

@@ -8,7 +8,7 @@ import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useId } from '@dxos/react-hooks';
-import { type MessageValence, type Elevation } from '@dxos/react-ui-types';
+import { type Elevation, type MessageValence } from '@dxos/react-ui-types';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/Popover/Popover.stories.tsx

@@ -4,14 +4,16 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type PropsWithChildren, type ReactNode, useRef, useState } from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Popover } from './Popover';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
+import { Popover } from './Popover';
+
 faker.seed(1234);
 
 const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger: ReactNode }>) => {
@@ -28,15 +30,19 @@ const DefaultStory = ({ openTrigger, children }: PropsWithChildren<{ openTrigger
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Popover',
-  component: Popover,
+  component: Popover.Root,
   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: {
     openTrigger: <Button>Open popover</Button>,
     children: faker.lorem.paragraphs(3),

package/src/components/Popover/Popover.tsx

@@ -22,17 +22,17 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { hideOthers } from 'aria-hidden';
 import React, {
   type ComponentPropsWithRef,
-  forwardRef,
+  type ComponentPropsWithoutRef,
   type ElementRef,
-  type RefObject,
+  type FC,
+  type MutableRefObject,
   type ReactNode,
-  useRef,
+  type RefObject,
+  forwardRef,
   useCallback,
-  type ComponentPropsWithoutRef,
-  type FC,
-  useState,
   useEffect,
-  type MutableRefObject,
+  useRef,
+  useState,
 } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
 

package/src/components/ScrollArea/ScrollArea.stories.tsx

@@ -4,14 +4,16 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type PropsWithChildren } from 'react';
 
 import { faker } from '@dxos/random';
 import { activeSurface, surfaceShadow } from '@dxos/react-ui-theme';
 
-import { ScrollArea } from './ScrollArea';
 import { withTheme } from '../../testing';
 
+import { ScrollArea } from './ScrollArea';
+
 faker.seed(1234);
 
 const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
@@ -33,15 +35,19 @@ const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Scroll area',
-  component: ScrollArea,
+  component: ScrollArea 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 = {
+export const Default: Story = {
   args: {
     children: faker.lorem.paragraphs(5),
   },

package/src/components/ScrollArea/ScrollArea.tsx

@@ -3,16 +3,16 @@
 //
 
 import {
+  Corner as ScrollAreaPrimitiveCorner,
+  type ScrollAreaCornerProps as ScrollAreaPrimitiveCornerProps,
   Root as ScrollAreaPrimitiveRoot,
   type ScrollAreaProps as ScrollAreaPrimitiveRootProps,
-  Viewport as ScrollAreaPrimitiveViewport,
-  type ScrollAreaViewportProps as ScrollAreaPrimitiveViewportProps,
   Scrollbar as ScrollAreaPrimitiveScrollbar,
   type ScrollAreaScrollbarProps as ScrollAreaPrimitiveScrollbarProps,
   Thumb as ScrollAreaPrimitiveThumb,
   type ScrollAreaThumbProps as ScrollAreaPrimitiveThumbProps,
-  Corner as ScrollAreaPrimitiveCorner,
-  type ScrollAreaCornerProps as ScrollAreaPrimitiveCornerProps,
+  Viewport as ScrollAreaPrimitiveViewport,
+  type ScrollAreaViewportProps as ScrollAreaPrimitiveViewportProps,
 } from '@radix-ui/react-scroll-area';
 import React, { forwardRef } from 'react';
 

package/src/components/Select/Select.stories.tsx

@@ -4,14 +4,15 @@
 
 import '@dxos-theme';
 
-import { type StoryObj } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Select } from './Select';
 import { withSurfaceVariantsLayout, withTheme } from '../../testing';
 
+import { Select } from './Select';
+
 faker.seed(1234);
 
 type ItemProps = { id: string; text: string };
@@ -41,15 +42,19 @@ const DefaultStory = ({ items = [] }: StoryProps) => {
   );
 };
 
-export const Default: StoryObj<StoryProps> = {
-  args: {
-    items: Array.from({ length: 16 }).map((_, i) => ({ id: `item-${i}`, text: faker.lorem.word() })),
-  },
-};
-
-export default {
+const meta = {
   title: 'ui/react-ui-core/Select',
   render: DefaultStory,
   decorators: [withSurfaceVariantsLayout(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    items: Array.from({ length: 16 }).map((_, i) => ({ id: `item-${i}`, text: faker.lorem.word() })),
+  },
 };

package/src/components/Select/Select.tsx

@@ -35,14 +35,13 @@ type SelectTriggerButtonProps = Omit<ButtonProps, 'children'> & Pick<SelectValue
 
 const SelectTriggerButton = forwardRef<HTMLButtonElement, SelectTriggerButtonProps>(
   ({ children, placeholder, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
     return (
       <SelectPrimitive.Trigger asChild ref={forwardedRef}>
         <Button {...props}>
           <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>
           <span className='w-1 flex-1' />
           <SelectPrimitive.Icon asChild>
-            <Icon icon='ph--caret-down--bold' classNames={tx('select.triggerIcon', 'select__trigger__icon', {})} />
+            <Icon size={3} icon='ph--caret-down--bold' />
           </SelectPrimitive.Icon>
         </Button>
       </SelectPrimitive.Trigger>
@@ -82,7 +81,7 @@ const SelectScrollUpButton = forwardRef<HTMLDivElement, SelectScrollUpButtonProp
         className={tx('select.scrollButton', 'select__scroll-button--up', {}, classNames)}
         ref={forwardedRef}
       >
-        {children ?? <Icon icon='ph--caret-up--bold' />}
+        {children ?? <Icon size={3} icon='ph--caret-up--bold' />}
       </SelectPrimitive.SelectScrollUpButton>
     );
   },
@@ -99,7 +98,7 @@ const SelectScrollDownButton = forwardRef<HTMLDivElement, SelectScrollDownButton
         className={tx('select.scrollButton', 'select__scroll-button--down', {}, classNames)}
         ref={forwardedRef}
       >
-        {children ?? <Icon icon='ph--caret-down--bold' />}
+        {children ?? <Icon size={3} icon='ph--caret-down--bold' />}
       </SelectPrimitive.SelectScrollDownButton>
     );
   },
@@ -152,6 +151,7 @@ const SelectItemIndicator = forwardRef<HTMLDivElement, SelectItemIndicatorProps>
 
 type SelectOptionProps = SelectItemProps;
 
+// TODO(burdon): Option to show icon on left/right.
 const SelectOption = forwardRef<HTMLDivElement, SelectItemProps>(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (

package/src/components/Status/Status.stories.tsx

@@ -4,17 +4,23 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Status } from './Status';
 import { withTheme } from '../../testing';
 
-export default {
+import { Status } from './Status';
+
+const meta = {
   title: 'ui/react-ui-core/Status',
   component: Status,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof Status>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
 export const Normal = (props: any) => {
   return (

package/src/components/Tag/Tag.stories.tsx

@@ -1,25 +1,29 @@
 //
 // Copyright 2022 DXOS.org
 //
+
+import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { hues } from '@dxos/react-ui-theme';
-import '@dxos-theme';
 import { type ChromaticPalette, type MessageValence } from '@dxos/react-ui-types';
 
-import { Tag } from './Tag';
 import { withTheme } from '../../testing';
 
+import { Tag } from './Tag';
+
 const palettes = ['neutral', 'success', 'info', 'warning', 'error', ...hues] as (ChromaticPalette | MessageValence)[];
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Tag',
   component: Tag,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 } as const;
 
-export const Default = {
+export const Default: Story = {
   render: () => (
     <div role='grid' className='grid grid-cols-5 gap-2 max-is-screen-md'>
       {palettes.map((palette) => (
@@ -29,4 +33,8 @@ export const Default = {
       ))}
     </div>
   ),
-};
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -3,16 +3,17 @@
 //
 
 import { createKeyborg } from 'keyborg';
-import React, { createContext, type PropsWithChildren, useEffect, useMemo } from 'react';
+import React, { type PropsWithChildren, createContext, useEffect, useMemo } from 'react';
 
 import { type Density, type Elevation, type ThemeFunction } from '@dxos/react-ui-types';
 
-import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
 import { type SafeAreaPadding, useSafeArea } from '../../hooks';
 import { hasIosKeyboard } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 import { ElevationProvider } from '../ElevationProvider';
 
+import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
+
 export type ThemeMode = 'dark' | 'light';
 
 export type ThemeContextValue = {

package/src/components/ThemeProvider/TranslationsProvider.tsx

@@ -2,9 +2,9 @@
 // Copyright 2022 DXOS.org
 //
 
-import { enUS as dtLocaleEnUs, type Locale } from 'date-fns/locale';
-import i18Next, { type TFunction, type Resource } from 'i18next';
-import React, { type ReactNode, useEffect, createContext, useState, Suspense, useContext } from 'react';
+import { type Locale, enUS as dtLocaleEnUs } from 'date-fns/locale';
+import i18Next, { type Resource, type TFunction } from 'i18next';
+import React, { type ReactNode, Suspense, createContext, useContext, useEffect, useState } from 'react';
 import { initReactI18next, useTranslation as useI18NextTranslation } from 'react-i18next';
 
 const initialLng = 'en-US';

package/src/components/Toast/Toast.stories.tsx

@@ -4,12 +4,14 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type ReactNode, useState } from 'react';
 
-import { Toast } from './Toast';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
+import { Toast } from './Toast';
+
 type ActionTriggerProps = { altText: string; trigger: ReactNode };
 
 type StorybookToastProps = Partial<{
@@ -44,15 +46,19 @@ const DefaultStory = ({ title, description, actionTriggers, openTrigger, closeTr
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Toast',
-  component: Toast,
+  component: Toast 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 = {
+export const Default: Story = {
   args: {
     openTrigger: 'Open toast',
     title: 'This is a toast',

package/src/components/Toast/Toast.tsx

@@ -5,22 +5,22 @@
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import {
+  ToastAction as ToastActionPrimitive,
+  type ToastActionProps as ToastActionPrimitiveProps,
+  ToastClose as ToastClosePrimitive,
+  type ToastCloseProps as ToastClosePrimitiveProps,
+  ToastDescription as ToastDescriptionPrimitive,
+  type ToastDescriptionProps as ToastDescriptionPrimitiveProps,
   ToastProvider as ToastProviderPrimitive,
   type ToastProviderProps as ToastProviderPrimitiveProps,
-  ToastViewport as ToastViewportPrimitive,
-  type ToastViewportProps as ToastViewportPrimitiveProps,
   Root as ToastRootPrimitive,
   type ToastProps as ToastRootPrimitiveProps,
   ToastTitle as ToastTitlePrimitive,
   type ToastTitleProps as ToastTitlePrimitiveProps,
-  ToastDescription as ToastDescriptionPrimitive,
-  type ToastDescriptionProps as ToastDescriptionPrimitiveProps,
-  ToastAction as ToastActionPrimitive,
-  type ToastActionProps as ToastActionPrimitiveProps,
-  ToastClose as ToastClosePrimitive,
-  type ToastCloseProps as ToastClosePrimitiveProps,
+  ToastViewport as ToastViewportPrimitive,
+  type ToastViewportProps as ToastViewportPrimitiveProps,
 } from '@radix-ui/react-toast';
-import React, { type ComponentPropsWithRef, forwardRef, type FunctionComponent } from 'react';
+import React, { type ComponentPropsWithRef, type FunctionComponent, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/Toolbar/Toolbar.stories.tsx

@@ -4,14 +4,16 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { Toolbar } from './Toolbar';
 import { withTheme } from '../../testing';
 import { Toggle } from '../Buttons';
 import { Icon } from '../Icon';
 import { Select } from '../Select';
 
+import { Toolbar } from './Toolbar';
+
 type StorybookToolbarProps = {};
 
 const DefaultStory = (props: StorybookToolbarProps) => {
@@ -29,6 +31,7 @@ const DefaultStory = (props: StorybookToolbarProps) => {
               <Select.Option value={'b'}>B</Select.Option>
               <Select.Option value={'c'}>C</Select.Option>
             </Select.Viewport>
+            <Select.Arrow />
           </Select.Content>
         </Select.Portal>
       </Select.Root>
@@ -69,14 +72,18 @@ const DefaultStory = (props: StorybookToolbarProps) => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Toolbar',
-  component: Toolbar,
+  component: Toolbar 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 = {
+export const Default: Story = {
   args: {},
 };

package/src/components/Toolbar/Toolbar.tsx

@@ -13,11 +13,11 @@ import {
   ButtonGroup,
   type ButtonGroupProps,
   type ButtonProps,
+  IconButton,
+  type IconButtonProps,
   Toggle,
   type ToggleGroupItemProps,
   type ToggleProps,
-  IconButton,
-  type IconButtonProps,
 } from '../Buttons';
 import { Link, type LinkProps } from '../Link';
 import { Separator, type SeparatorProps } from '../Separator';

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -3,14 +3,17 @@
 //
 
 import '@dxos-theme';
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Tooltip } from './Tooltip';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
+import { Tooltip } from './Tooltip';
+
 type StoryProps = {
   tooltips: { label: string; content: string }[];
   defaultOpen?: boolean;
@@ -28,15 +31,19 @@ const DefaultStory = ({ tooltips, defaultOpen }: StoryProps) => (
   </Tooltip.Provider>
 );
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Tooltip',
-  component: Tooltip,
+  component: Tooltip 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 = {
+export const Default: Story = {
   args: {
     tooltips: [
       {
@@ -50,9 +57,9 @@ export const Default = {
   },
 };
 
-export const DefaultOpen = {
+export const DefaultOpen: Story = {
   args: {
-    defaultOption: true,
+    defaultOpen: true,
     tooltips: [
       {
         label: 'Tooltip trigger',
@@ -65,9 +72,9 @@ export const DefaultOpen = {
   },
 };
 
-export const StressTest = {
+export const StressTest: Story = {
   args: {
-    defaultOption: true,
+    defaultOpen: true,
     tooltips: faker.helpers.multiple(
       () => ({
         label: faker.lorem.words(2),

package/src/components/Tooltip/Tooltip.tsx

@@ -11,7 +11,7 @@ import type { Scope } from '@radix-ui/react-context';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { useId } from '@radix-ui/react-id';
 import * as PopperPrimitive from '@radix-ui/react-popper';
-import { createPopperScope, type PopperAnchorProps } from '@radix-ui/react-popper';
+import { type PopperAnchorProps, createPopperScope } from '@radix-ui/react-popper';
 import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
 import { Presence } from '@radix-ui/react-presence';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -23,10 +23,10 @@ import React, {
   type ComponentPropsWithoutRef,
   type ElementRef,
   type FC,
-  type SyntheticEvent,
-  forwardRef,
   type MutableRefObject,
   type ReactNode,
+  type SyntheticEvent,
+  forwardRef,
   useCallback,
   useEffect,
   useMemo,

package/src/playground/Controls.stories.tsx

@@ -4,10 +4,11 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { Icon, Input, Select, Toggle, Toolbar } from '../components';
-import { withTheme, withSurfaceVariantsLayout } from '../testing';
+import { withSurfaceVariantsLayout, withTheme } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -28,6 +29,7 @@ const DefaultStory = () => {
                 <Select.Option value={'b'}>B</Select.Option>
                 <Select.Option value={'c'}>C</Select.Option>
               </Select.Viewport>
+              <Select.Arrow />
             </Select.Content>
           </Select.Portal>
         </Select.Root>
@@ -80,11 +82,15 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Playground/Controls',
   render: DefaultStory,
   decorators: [withSurfaceVariantsLayout(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
-};
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {};
+export const Default: Story = {};

package/src/playground/Custom.stories.tsx

@@ -4,10 +4,10 @@
 
 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, IconButton, type ButtonProps, Tooltip } from '../components';
+import { Button, type ButtonProps, IconButton, Tooltip } from '../components';
 import { withTheme } from '../testing';
 
 // TODO(burdon): Change density to 3 or 4 sizes: (large, medium, small; or 22, 28, 32, 40)
@@ -120,13 +120,13 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   );
 };
 
-const meta: Meta<typeof Button> = {
+const meta = {
   title: 'ui/react-ui-core/Playground/Custom',
   component: Button,
   render: DefaultStory,
   decorators: [withTheme],
   parameters: { layout: 'centered' },
-};
+} satisfies Meta<typeof Button>;
 
 export default meta;
 

package/src/playground/Typography.stories.tsx

@@ -4,6 +4,7 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../testing';
@@ -43,13 +44,17 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-core/Playground/Typography',
   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/testing/decorators/withTheme.ts

@@ -3,7 +3,7 @@
 //
 
 import { type Decorator, type StoryContext, type StoryFn } from '@storybook/react';
-import { useEffect, createElement } from 'react';
+import { createElement, useEffect } from 'react';
 
 import { defaultTx } from '@dxos/react-ui-theme';