@dxos/react-ui 0.8.3-staging.0fa589b → 0.8.4-main.84f28bd

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.3-staging.0fa589b",
+  "version": "0.8.4-main.84f28bd",
   "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",
@@ -72,14 +72,14 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.3-staging.0fa589b",
-    "@dxos/lit-ui": "0.8.3-staging.0fa589b",
-    "@dxos/log": "0.8.3-staging.0fa589b",
-    "@dxos/react-hooks": "0.8.3-staging.0fa589b",
-    "@dxos/react-list": "0.8.3-staging.0fa589b",
-    "@dxos/react-input": "0.8.3-staging.0fa589b",
-    "@dxos/react-ui-types": "0.8.3-staging.0fa589b",
-    "@dxos/util": "0.8.3-staging.0fa589b"
+    "@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"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -91,15 +91,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b",
-    "@dxos/random": "0.8.3-staging.0fa589b",
-    "@dxos/util": "0.8.3-staging.0fa589b"
+    "@dxos/random": "0.8.4-main.84f28bd",
+    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
+    "@dxos/util": "0.8.4-main.84f28bd"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.3-staging.0fa589b"
+    "@dxos/react-ui-theme": "0.8.4-main.84f28bd"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,7 +5,7 @@
 import '@dxos-theme';
 
 import { CaretLeft, CaretRight } from '@phosphor-icons/react';
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';

package/src/components/Buttons/Button.tsx

@@ -23,6 +23,7 @@ type ButtonGroupContextValue = { inGroup?: boolean };
 
 const BUTTON_GROUP_NAME = 'ButtonGroup';
 const BUTTON_NAME = 'Button';
+
 const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupContextValue>(BUTTON_GROUP_NAME, {
   inGroup: false,
 });

package/src/components/Buttons/IconButton.tsx

@@ -38,7 +38,7 @@ const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   ({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', 'iconButton', {}, classNames)} ref={forwardedRef}>
+      <Button {...props} classNames={tx('iconButton.root', 'iconButton', { iconOnly }, classNames)} ref={forwardedRef}>
         <Icon icon={icon} size={size} classNames={iconClassNames} />
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
         {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}

package/src/components/Clipboard/CopyButton.tsx

@@ -2,25 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type IconProps } from '@phosphor-icons/react';
 import React from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
 
 import { useClipboard } from './ClipboardProvider';
 import { Button, type ButtonProps, IconButton } from '../Buttons';
-import { Icon } from '../Icon';
+import { Icon, type IconProps } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
 
-export type CopyButtonProps = ButtonProps & {
-  value: string;
-  iconProps?: IconProps;
-};
+export type CopyButtonProps = ButtonProps &
+  Pick<IconProps, 'size'> & {
+    value: string;
+  };
 
 const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
 
-export const CopyButton = ({ value, classNames, iconProps, ...props }: CopyButtonProps) => {
+export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButtonProps) => {
   const { t } = useTranslation('os');
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
@@ -33,12 +32,11 @@ export const CopyButton = ({ value, classNames, iconProps, ...props }: CopyButto
     >
       <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
         <span className='pli-1'>{t('copy label')}</span>
-        {/* TODO(wittjosiah): Why do these need as any? */}
-        <Icon icon='ph--copy--regular' size={5 as any} {...iconProps} />
+        <Icon icon='ph--copy--regular' size={size} />
       </div>
       <div role='none' className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
         <span className='pli-1'>{t('copy success label')}</span>
-        <Icon icon='ph--check--regular' size={5 as any} {...iconProps} />
+        <Icon icon='ph--check--regular' size={size} />
       </div>
     </Button>
   );
@@ -52,7 +50,7 @@ export const CopyButtonIconOnly = ({
   __scopeTooltip,
   value,
   classNames,
-  iconProps,
+  size,
   variant,
   ...props
 }: TooltipScopedProps<CopyButtonIconOnlyProps>) => {
@@ -66,7 +64,7 @@ export const CopyButtonIconOnly = ({
       iconOnly
       label={label!}
       icon='ph--copy--regular'
-      size={5}
+      size={size}
       variant={variant}
       classNames={['inline-flex flex-col justify-center', classNames]}
       onClick={() => setTextValue(value).then(onOpen)}

package/src/components/Input/Input.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { baseSurface, modalSurface, activeSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';

package/src/components/Popover/Popover.tsx

@@ -7,7 +7,7 @@
 import { composeEventHandlers } from '@radix-ui/primitive';
 import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { createContextScope } from '@radix-ui/react-context';
-import type { Scope } from '@radix-ui/react-context';
+import { type Scope } from '@radix-ui/react-context';
 import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
 import { useFocusGuards } from '@radix-ui/react-focus-guards';
 import { FocusScope } from '@radix-ui/react-focus-scope';

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj } from '@storybook/react';
+import { type StoryObj } from '@storybook/react-vite';
 import React, { useState } from 'react';
 
 import { faker } from '@dxos/random';

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -13,7 +13,7 @@ import { hasIosKeyboard } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 import { ElevationProvider } from '../ElevationProvider';
 
-export type ThemeMode = 'light' | 'dark';
+export type ThemeMode = 'dark' | 'light';
 
 export type ThemeContextValue = {
   tx: ThemeFunction<any>;
@@ -54,7 +54,6 @@ export const ThemeProvider = ({
   }, []);
 
   const safeAreaPadding = useSafeArea();
-
   const contextValue = useMemo(
     () => ({ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), safeAreaPadding, ...rest }),
     [tx, themeMode, safeAreaPadding, rest],

package/src/components/ThemeProvider/TranslationsProvider.tsx

@@ -32,7 +32,7 @@ export const resources = {
       'loading translations': 'Loading translations…',
     },
   },
-} as const;
+} as const satisfies Resource;
 
 void i18Next.use(initReactI18next).init({
   resources,

package/src/components/ThemeProvider/index.ts

@@ -3,4 +3,6 @@
 //
 
 export * from './ThemeProvider';
-export { type Label, toLocalizedString, useTranslation, isLabel } from './TranslationsProvider';
+export { type Label, isLabel, toLocalizedString, useTranslation } from './TranslationsProvider';
+
+// TODO(burdon): Use `@internal` with barrel exports (rather than picking individual exports?)

package/src/index.ts

@@ -2,7 +2,7 @@
 // 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';

package/src/playground/Custom.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type StoryObj, type Meta } from '@storybook/react-vite';
 import React from 'react';
 
 import { Button, IconButton, type ButtonProps, Tooltip } from '../components';

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/README.yml

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