@dxos/react-ui 0.8.3 → 0.8.4-main.28f8d3d

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

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-export { type TFunction } from 'i18next';
+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,11 +4,10 @@
 
 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 { withTheme, withSurfaceVariantsLayout } from '../testing';
+import { Icon, Input, Select, Toggle, Toolbar } from '../components';
+import { withSurfaceVariantsLayout, withTheme } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -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/playground/Custom.stories.tsx

@@ -4,10 +4,10 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+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)

package/src/testing/decorators/withSurfaceVariantsLayout.tsx

@@ -14,7 +14,7 @@ type Config = {
 };
 
 const Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (
-  <div className={mx('rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>{children}</div>
+  <div className={mx('rounded-md border border-separator p-2', surface, surfaceShadow({ elevation }))}>{children}</div>
 );
 
 const Panel = ({

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';
 
@@ -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';

package/README.yml

@@ -1 +0,0 @@
-guideUrl: https://docs.dxos.org/guide/react/aurora/