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

package/src/components/Lists/List.tsx

@@ -2,34 +2,35 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretDown, CaretRight } from '@phosphor-icons/react';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithoutRef, type FC, forwardRef, type ForwardRefExoticComponent } from 'react';
+import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
 
 import {
+  LIST_ITEM_NAME,
+  LIST_NAME,
+  ListItemCollapsibleContent,
+  type ListItemCollapsibleContentProps,
+  type ListItemScopedProps,
   List as ListPrimitive,
-  type ListProps as ListPrimitiveProps,
-  type ListScopedProps,
+  ListItem as ListPrimitiveItem,
   ListItemHeading as ListPrimitiveItemHeading,
   type ListItemHeadingProps as ListPrimitiveItemHeadingProps,
   ListItemOpenTrigger as ListPrimitiveItemOpenTrigger,
   type ListItemOpenTriggerProps as ListPrimitiveItemOpenTriggerProps,
-  ListItemCollapsibleContent,
-  type ListItemCollapsibleContentProps,
-  ListItem as ListPrimitiveItem,
   type ListItemProps as ListPrimitiveItemProps,
-  type ListItemScopedProps,
-  LIST_NAME,
-  LIST_ITEM_NAME,
+  type ListProps as ListPrimitiveProps,
+  type ListScopedProps,
   useListContext,
   useListItemContext,
 } from '@dxos/react-list';
 import { type Density } from '@dxos/react-ui-types';
 
-import { ListDropIndicator } from './ListDropIndicator';
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { DensityProvider } from '../DensityProvider';
+import { Icon } from '../Icon';
+
+import { ListDropIndicator } from './ListDropIndicator';
 
 type ListProps = ThemedClassName<ListPrimitiveProps> & { density?: Density };
 
@@ -106,7 +107,7 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
     const { tx } = useThemeContext();
     const density = useDensityContext();
     const { open } = useListItemContext(LIST_ITEM_NAME, __listItemScope);
-    const Icon = open ? CaretDown : CaretRight;
+    const iconName = open ? 'ph--caret-down--bold' : 'ph--caret-right--bold';
     return (
       <ListPrimitiveItemOpenTrigger
         {...props}
@@ -114,12 +115,7 @@ const ListItemOpenTrigger = forwardRef<HTMLButtonElement, ListItemOpenTriggerPro
         ref={forwardedRef}
       >
         {children || (
-          <Icon
-            {...{
-              weight: 'bold',
-              className: tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {}),
-            }}
-          />
+          <Icon icon={iconName} classNames={tx('list.item.openTriggerIcon', 'list__listItem__openTrigger__icon', {})} />
         )}
       </ListPrimitiveItemOpenTrigger>
     );

package/src/components/Lists/Tree.stories.tsx

@@ -6,9 +6,10 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { Tree, TreeItem } from './Tree';
 import { withTheme } from '../../testing';
 
+import { Tree, TreeItem } from './Tree';
+
 type StorybookTreeProps = {
   data: any;
 };

package/src/components/Lists/Tree.tsx

@@ -2,9 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type ComponentPropsWithoutRef, type FC, forwardRef, type ForwardRefExoticComponent } from 'react';
+import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
+
+import { type ThemedClassName } from '../../util';
 
 import {
+  LIST_ITEM_NAME,
   List,
   ListItem,
   type ListItemCollapsibleContentProps,
@@ -13,11 +16,9 @@ import {
   type ListItemRootProps,
   type ListProps,
   type ListScopedProps,
-  LIST_ITEM_NAME,
   useListItemContext,
 } from './List';
 import { TreeDropIndicator } from './TreeDropIndicator';
-import { type ThemedClassName } from '../../util';
 
 type TreeRootProps = ListProps;
 

package/src/components/Lists/TreeDropIndicator.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
-import React, { type HTMLAttributes, type CSSProperties } from 'react';
+import React, { type CSSProperties, type HTMLAttributes } from 'react';
 
 // Tree item hitbox
 // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item

package/src/components/Lists/Treegrid.stories.tsx

@@ -6,10 +6,11 @@ import React from 'react';
 
 import { faker } from '@dxos/random';
 
-import { Treegrid } from './Treegrid';
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
 
+import { Treegrid } from './Treegrid';
+
 faker.seed(1234);
 
 type StorybookNode = {

package/src/components/Lists/Treegrid.tsx

@@ -3,11 +3,11 @@
 //
 
 import { useArrowNavigationGroup, useFocusableGroup } from '@fluentui/react-tabster';
-import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { type Scope, createContextScope } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
-import React, { type ComponentPropsWithRef, type CSSProperties, forwardRef } from 'react';
+import React, { type CSSProperties, type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';

package/src/components/Main/Main.stories.tsx

@@ -6,10 +6,11 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { Main, useSidebars } from './Main';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
+import { Main, useSidebars } from './Main';
+
 type StoryMainArgs = {};
 
 const NavigationSidebarToggle = () => {

package/src/components/Main/Main.tsx

@@ -3,32 +3,33 @@
 //
 
 import { createContext } from '@radix-ui/react-context';
-import { Root as DialogRoot, DialogContent, DialogTitle } from '@radix-ui/react-dialog';
+import { DialogContent, Root as DialogRoot, DialogTitle } from '@radix-ui/react-dialog';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentPropsWithRef,
+  type ComponentPropsWithoutRef,
   type Dispatch,
-  forwardRef,
+  type KeyboardEvent,
   type PropsWithChildren,
   type SetStateAction,
+  forwardRef,
   useCallback,
   useEffect,
   useRef,
   useState,
-  type KeyboardEvent,
-  type ComponentPropsWithoutRef,
 } from 'react';
 
 import { log } from '@dxos/log';
-import { useMediaQuery, useForwardedRef } from '@dxos/react-hooks';
+import { useForwardedRef, useMediaQuery } from '@dxos/react-hooks';
 
-import { useSwipeToDismiss } from './useSwipeToDismiss';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { type Label, toLocalizedString, useTranslation } from '../ThemeProvider';
 
+import { useSwipeToDismiss } from './useSwipeToDismiss';
+
 const MAIN_ROOT_NAME = 'MainRoot';
 const NAVIGATION_SIDEBAR_NAME = 'NavigationSidebar';
 const COMPLEMENTARY_SIDEBAR_NAME = 'ComplementarySidebar';

package/src/components/Menus/ContextMenu.stories.tsx

@@ -6,9 +6,10 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { ContextMenu } from './ContextMenu';
 import { withTheme } from '../../testing';
 
+import { ContextMenu } from './ContextMenu';
+
 const DefaultStory = () => {
   // NOTE(thure): Since long-tap will select text in some OSs, apply `select-none` to `ContextMenu.Trigger` where possible.
   return (

package/src/components/Menus/DropdownMenu.stories.tsx

@@ -6,10 +6,11 @@ import '@dxos-theme';
 
 import React, { useRef, useState } from 'react';
 
-import { DropdownMenu } from './DropdownMenu';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
+import { DropdownMenu } from './DropdownMenu';
+
 const DefaultStory = () => {
   return (
     <DropdownMenu.Root defaultOpen>

package/src/components/Menus/DropdownMenu.tsx

@@ -15,17 +15,17 @@ import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
-  type ReactNode,
-  type FC,
-  useRef,
-  type ElementRef,
-  useCallback,
-  type ComponentPropsWithoutRef,
-  forwardRef,
   type ComponentPropsWithRef,
-  useEffect,
+  type ComponentPropsWithoutRef,
+  type ElementRef,
+  type FC,
   type MutableRefObject,
+  type ReactNode,
   type RefObject,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useRef,
 } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';

package/src/components/Message/Message.stories.tsx

@@ -8,9 +8,10 @@ import React from 'react';
 
 import { type MessageValence } from '@dxos/react-ui-types';
 
-import { Callout } from './Message';
 import { withTheme } from '../../testing';
 
+import { Callout } from './Message';
+
 type StoryProps = {
   valence: MessageValence;
   title: string;

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

@@ -8,10 +8,11 @@ import React, { type PropsWithChildren, type ReactNode, useRef, useState } from
 
 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 }>) => {

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

@@ -9,9 +9,10 @@ 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<{}>) => {

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

@@ -9,9 +9,10 @@ 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 };

package/src/components/Select/Select.tsx

@@ -2,7 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { CaretDown, CaretUp } from '@phosphor-icons/react';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 
@@ -43,7 +42,7 @@ const SelectTriggerButton = forwardRef<HTMLButtonElement, SelectTriggerButtonPro
           <SelectPrimitive.Value placeholder={placeholder}>{children}</SelectPrimitive.Value>
           <span className='w-1 flex-1' />
           <SelectPrimitive.Icon asChild>
-            <CaretDown className={tx('select.triggerIcon', 'select__trigger__icon', {})} weight='bold' />
+            <Icon icon='ph--caret-down--bold' classNames={tx('select.triggerIcon', 'select__trigger__icon', {})} />
           </SelectPrimitive.Icon>
         </Button>
       </SelectPrimitive.Trigger>
@@ -83,7 +82,7 @@ const SelectScrollUpButton = forwardRef<HTMLDivElement, SelectScrollUpButtonProp
         className={tx('select.scrollButton', 'select__scroll-button--up', {}, classNames)}
         ref={forwardedRef}
       >
-        {children ?? <CaretUp weight='bold' />}
+        {children ?? <Icon icon='ph--caret-up--bold' />}
       </SelectPrimitive.SelectScrollUpButton>
     );
   },
@@ -100,7 +99,7 @@ const SelectScrollDownButton = forwardRef<HTMLDivElement, SelectScrollDownButton
         className={tx('select.scrollButton', 'select__scroll-button--down', {}, classNames)}
         ref={forwardedRef}
       >
-        {children ?? <CaretDown weight='bold' />}
+        {children ?? <Icon icon='ph--caret-down--bold' />}
       </SelectPrimitive.SelectScrollDownButton>
     );
   },

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

@@ -6,9 +6,10 @@ import '@dxos-theme';
 
 import React from 'react';
 
-import { Status } from './Status';
 import { withTheme } from '../../testing';
 
+import { Status } from './Status';
+
 export default {
   title: 'ui/react-ui-core/Status',
   component: Status,

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

@@ -7,9 +7,10 @@ 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 {

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

@@ -6,10 +6,11 @@ import '@dxos-theme';
 
 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<{

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,15 @@
 
 import '@dxos-theme';
 
-import { ArrowClockwise, Bug, FileJs, FileTs, TextB, TextItalic, TextUnderline } from '@phosphor-icons/react';
 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) => {
@@ -37,33 +38,33 @@ const DefaultStory = (props: StorybookToolbarProps) => {
       {/* TODO(burdon): Icon sizes should adapt to density. */}
       <Toolbar.ToggleGroup type='multiple'>
         <Toolbar.ToggleGroupItem value='a'>
-          <TextB />
+          <Icon icon='ph--text-b--regular' />
         </Toolbar.ToggleGroupItem>
         <Toolbar.ToggleGroupItem value='b'>
-          <TextItalic />
+          <Icon icon='ph--text-italic--regular' />
         </Toolbar.ToggleGroupItem>
         <Toolbar.ToggleGroupItem value='c'>
-          <TextUnderline />
+          <Icon icon='ph--text-underline--regular' />
         </Toolbar.ToggleGroupItem>
       </Toolbar.ToggleGroup>
       {/* TODO(burdon): Highlight isn't shown. */}
       <Toolbar.ToggleGroup type='single' defaultValue='a'>
         <Toolbar.ToggleGroupItem value='a'>
-          <FileTs />
+          <Icon icon='ph--file-ts--regular' />
         </Toolbar.ToggleGroupItem>
         <Toolbar.ToggleGroupItem value='b'>
-          <FileJs />
+          <Icon icon='ph--file-js--regular' />
         </Toolbar.ToggleGroupItem>
       </Toolbar.ToggleGroup>
       <Toolbar.Button asChild>
         <Toggle>
-          <Bug />
+          <Icon icon='ph--bug--regular' />
         </Toggle>
       </Toolbar.Button>
       <Toolbar.Separator />
       <Toolbar.Button>Test</Toolbar.Button>
       <Toolbar.Button>
-        <ArrowClockwise />
+        <Icon icon='ph--arrow-clockwise--regular' />
       </Toolbar.Button>
     </Toolbar.Root>
   );

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

@@ -7,10 +7,11 @@ 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;

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/hooks/useSafeCollisionPadding.ts

@@ -21,7 +21,7 @@ const safePadding = (
 ) => {
   return (
     (propIsNumber(safePadding[side]) ? safePadding[side] : 0) +
-    (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0)
+    (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? (propsPadding[side] ?? 0) : 0)
   );
 };
 

package/src/index.ts

@@ -6,7 +6,7 @@ export { type Resource, type TFunction } from 'i18next';
 export { Trans } from 'react-i18next';
 
 export * from '@dxos/react-hooks';
-export * from '@dxos/react-ui-types';
+export type * from '@dxos/react-ui-types';
 
 export * from './components';
 export * from './hooks';