@dxos/react-ui 0.8.4-main.84f28bd → 0.8.4-main.b97322e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.b97322e",
   "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",
@@ -35,6 +35,7 @@
   "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",
@@ -72,34 +73,33 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-main.84f28bd",
-    "@dxos/lit-ui": "0.8.4-main.84f28bd",
-    "@dxos/log": "0.8.4-main.84f28bd",
-    "@dxos/react-hooks": "0.8.4-main.84f28bd",
-    "@dxos/react-input": "0.8.4-main.84f28bd",
-    "@dxos/react-list": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-types": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/lit-ui": "0.8.4-main.b97322e",
+    "@dxos/debug": "0.8.4-main.b97322e",
+    "@dxos/log": "0.8.4-main.b97322e",
+    "@dxos/react-hooks": "0.8.4-main.b97322e",
+    "@dxos/react-list": "0.8.4-main.b97322e",
+    "@dxos/react-ui-types": "0.8.4-main.b97322e",
+    "@dxos/react-input": "0.8.4-main.b97322e",
+    "@dxos/util": "0.8.4-main.b97322e"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
     "@dnd-kit/sortable": "^7.0.1",
     "@dnd-kit/utilities": "^3.2.0",
-    "@phosphor-icons/react": "^2.1.5",
     "@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.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/random": "0.8.4-main.b97322e",
+    "@dxos/util": "0.8.4-main.b97322e",
+    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
+    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -2,13 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Dot } from '@phosphor-icons/react';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { Icon } from '../Icon';
 import { Link, type LinkProps } from '../Link';
 
 type BreadcrumbRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
@@ -100,7 +100,7 @@ const BreadcrumbSeparator = ({ children, classNames, ...props }: BreadcrumbSepar
       {...props}
       className={tx('breadcrumb.separator', 'breadcrumb__separator', {}, classNames)}
     >
-      {children ?? <Dot weight='bold' />}
+      {children ?? <Icon icon='ph--dot--bold' />}
     </Primitive.span>
   );
 };

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

@@ -4,12 +4,12 @@
 
 import '@dxos-theme';
 
-import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import { type StoryObj, type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
 import { withSurfaceVariantsLayout, withTheme } from '../../testing';
+import { Icon } from '../Icon';
 
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
@@ -21,10 +21,10 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
       {(args.variant === 'default' || args.variant === 'primary') && (
         <ButtonGroup>
           <Button {...args}>
-            <CaretLeft />
+            <Icon icon='ph--caret-left--regular' />
           </Button>
           <Button {...args}>
-            <CaretRight />
+            <Icon icon='ph--caret-right--regular' />
           </Button>
         </ButtonGroup>
       )}

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

@@ -4,18 +4,18 @@
 
 import '@dxos-theme';
 
-import { TextB } from '@phosphor-icons/react';
 import React from 'react';
 
 import { Toggle } from './Toggle';
 import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
 
 type StorybookToggleProps = {};
 
 const DefaultStory = (props: StorybookToggleProps) => {
   return (
     <Toggle {...props}>
-      <TextB />
+      <Icon icon='ph--text-b--regular' />
     </Toggle>
   );
 };

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

@@ -4,21 +4,21 @@
 
 import '@dxos-theme';
 
-import { TextB, TextItalic } from '@phosphor-icons/react';
 import React from 'react';
 
 import { ToggleGroup, ToggleGroupItem, type ToggleGroupProps } from './ToggleGroup';
 import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
 
 // TODO(burdon): Create Radix-style Root, Item, etc?
 const DefaultStory = (props: ToggleGroupProps) => {
   return (
     <ToggleGroup {...props}>
       <ToggleGroupItem value='textb'>
-        <TextB />
+        <Icon icon='ph--text-b--regular' />
       </ToggleGroupItem>
       <ToggleGroupItem value='texti'>
-        <TextItalic />
+        <Icon icon='ph--text-italic--regular' />
       </ToggleGroupItem>
     </ToggleGroup>
   );

package/src/components/Clipboard/CopyButton.tsx

@@ -57,7 +57,7 @@ export const CopyButtonIconOnly = ({
   const { t } = useTranslation('os');
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  const label = isCopied ? t('copy success label') : props.label ?? t('copy label');
+  const label = isCopied ? t('copy success label') : (props.label ?? t('copy label'));
   const { onOpen } = useTooltipContext('CopyButton', __scopeTooltip);
   return (
     <IconButton

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

@@ -8,7 +8,6 @@ import { DndContext, type DragEndEvent, type DragStartEvent } from '@dnd-kit/cor
 import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
-import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
 import React, { type ReactNode, useState } from 'react';
 
 import {
@@ -22,6 +21,7 @@ import {
 
 import { List, ListItem, type ListScopedProps } from './List';
 import { withTheme } from '../../testing';
+import { Icon } from '../Icon';
 
 export default {
   title: 'ui/react-ui-core/List',
@@ -41,11 +41,11 @@ const UniformListItem = ({ id, text }: { id: string; text: string }) => {
       style={{ transform: CSS.Transform.toString(transform) }}
     >
       <ListItem.Endcap>
-        <DotsSixVertical className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
       <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
       <ListItem.Endcap>
-        <PushPin className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
@@ -103,13 +103,13 @@ const ManySizesDraggableListItem = ({
       style={{ transform: CSS.Translate.toString(transform) }}
     >
       <ListItem.Endcap>
-        <DotsSixVertical className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--dots-six-vertical--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
       <ListItem.Heading classNames='grow pbs-2' asChild>
         {text}
       </ListItem.Heading>
       <ListItem.Endcap>
-        <PushPin className={mx(getSize(5), 'mbs-2.5')} />
+        <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
       </ListItem.Endcap>
     </ListItem.Root>
   );
@@ -181,7 +181,7 @@ export const Collapsible = {
               {index !== 2 ? <ListItem.OpenTrigger /> : <ListItem.MockOpenTrigger />}
               <ListItem.Heading classNames='grow pbs-2'>{text}</ListItem.Heading>
               <ListItem.Endcap>
-                <PushPin className={mx(getSize(5), 'mbs-2.5')} />
+                <Icon icon='ph--push-pin--regular' classNames={mx(getSize(5), 'mbs-2.5')} />
               </ListItem.Endcap>
             </div>
             {index !== 2 && <ListItem.CollapsibleContent>{body}</ListItem.CollapsibleContent>}

package/src/components/Lists/List.tsx

@@ -2,7 +2,6 @@
 // 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';
 
@@ -30,6 +29,7 @@ import { ListDropIndicator } from './ListDropIndicator';
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { DensityProvider } from '../DensityProvider';
+import { Icon } from '../Icon';
 
 type ListProps = ThemedClassName<ListPrimitiveProps> & { density?: Density };
 
@@ -106,7 +106,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 +114,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/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/Toolbar/Toolbar.stories.tsx

@@ -4,12 +4,12 @@
 
 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';
 
 type StorybookToolbarProps = {};
@@ -37,33 +37,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/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';

package/src/playground/Controls.stories.tsx

@@ -4,10 +4,9 @@
 
 import '@dxos-theme';
 
-import { FileTs, FileJs, ArrowClockwise, Bug, TextUnderline, TextB, TextItalic } from '@phosphor-icons/react';
 import React, { useState } from 'react';
 
-import { Input, Select, Toggle, Toolbar } from '../components';
+import { Icon, Input, Select, Toggle, Toolbar } from '../components';
 import { withTheme, withSurfaceVariantsLayout } from '../testing';
 
 const DefaultStory = () => {
@@ -37,27 +36,27 @@ const DefaultStory = () => {
         {/* 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>
         {/* TODO(burdon): Should not be 'is-full' by default. */}
@@ -71,7 +70,7 @@ const DefaultStory = () => {
         </Input.Root>
         <Toolbar.Button>Test</Toolbar.Button>
         <Toolbar.Button>
-          <ArrowClockwise />
+          <Icon icon='ph--arrow-clockwise--regular' />
         </Toolbar.Button>
       </Toolbar.Root>
       <Input.Root>

package/src/testing/decorators/withTheme.ts

@@ -15,8 +15,11 @@ export const withTheme: Decorator = (Story: StoryFn, context: StoryContext) => {
     document.documentElement.classList[theme === 'dark' ? 'add' : 'remove']('dark');
   }, [theme]);
 
-  return createElement(ThemeProvider, {
-    children: createElement(Story),
-    tx: defaultTx,
-  });
+  return createElement(
+    ThemeProvider,
+    {
+      tx: defaultTx,
+    },
+    createElement(Story),
+  );
 };

package/src/util/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './hasIosKeyboard';
-export * from './ThemedClassName';
+export type * from './ThemedClassName';