@dxos/react-ui 0.8.2-main.fbd8ed0 → 0.8.2-staging.42af850

package/dist/types/src/components/Buttons/IconButton.d.ts

@@ -1,4 +1,4 @@
-import React, { type MutableRefObject } from 'react';
+import React from 'react';
 import { type ButtonProps } from './Button';
 import { type ThemedClassName } from '../../util';
 import { type IconProps } from '../Icon';
@@ -11,7 +11,6 @@ type IconButtonProps = Omit<ButtonProps, 'children'> & Pick<IconProps, 'icon' |
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
     tooltipSide?: TooltipSide;
-    suppressNextTooltip?: MutableRefObject<boolean>;
 };
 declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { IconButton };

package/dist/types/src/components/Buttons/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Buttons/IconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAc,KAAK,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAEjE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAEvD,KAAK,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAClD,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACjD,CAAC;AA+BJ,QAAA,MAAM,UAAU,wGAMf,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/Buttons/IconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAW,KAAK,WAAW,EAAE,MAAM,YAAY,CAAC;AAEvD,KAAK,eAAe,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAClD,IAAI,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,CAAC;IACpD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC;AA4BJ,QAAA,MAAM,UAAU,wGAMf,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/types/src/components/Dialogs/AlertDialog.stories.d.ts

@@ -1,6 +1,6 @@
 import '@dxos-theme';
 import React from 'react';
-type DefaultStoryProps = Partial<{
+type StoryProps = Partial<{
     title: string;
     description: string;
     body: string;
@@ -21,7 +21,7 @@ declare const _default: {
         Cancel: React.FunctionComponent<import("@radix-ui/react-alert-dialog").AlertDialogCancelProps>;
         Action: React.FunctionComponent<import("@radix-ui/react-alert-dialog").AlertDialogActionProps>;
     };
-    render: ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: DefaultStoryProps) => React.JSX.Element;
+    render: ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: StoryProps) => React.JSX.Element;
     decorators: import("@storybook/react").Decorator[];
     parameters: {
         chromatic: {

package/dist/types/src/components/Dialogs/AlertDialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AlertDialog.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialogs/AlertDialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,iBAAiB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;;;;;;;;;;;;;;sFAE4F,iBAAiB;;;;;;;;AA0BhH,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CASnB,CAAC"}
+{"version":3,"file":"AlertDialog.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialogs/AlertDialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,UAAU,GAAG,OAAO,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;;;;;;;;;;;;;;sFAE4F,UAAU;;;;;;;;AA0BzG,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CASnB,CAAC"}

package/dist/types/src/components/Dialogs/Dialog.stories.d.ts

@@ -1,6 +1,6 @@
 import '@dxos-theme';
 import React from 'react';
-type DefaultStoryProps = Partial<{
+type StoryProps = Partial<{
     title: string;
     description: string;
     body: string;
@@ -20,7 +20,7 @@ declare const _default: {
         Description: React.ForwardRefExoticComponent<import("./Dialog").DialogTitleProps>;
         Close: React.FunctionComponent<import("@radix-ui/react-dialog").DialogCloseProps>;
     };
-    render: ({ title, openTrigger, description, body, closeTrigger, blockAlign }: DefaultStoryProps) => React.JSX.Element;
+    render: ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StoryProps) => React.JSX.Element;
     decorators: import("@storybook/react").Decorator[];
     parameters: {
         chromatic: {

package/dist/types/src/components/Dialogs/Dialog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialogs/Dialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,iBAAiB,GAAG,OAAO,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC;CAChC,CAAC,CAAC;;;;;;;;;;;;;kFAEwF,iBAAiB;;;;;;;;AAoB5G,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAenB,CAAC"}
+{"version":3,"file":"Dialog.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialogs/Dialog.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,UAAU,GAAG,OAAO,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,QAAQ,GAAG,OAAO,CAAC;CAChC,CAAC,CAAC;;;;;;;;;;;;;kFAEwF,UAAU;;;;;;;;AAoBrG,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;CAenB,CAAC"}

package/dist/types/src/components/Main/Main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../../src/components/Main/Main.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Main.d.ts","sourceRoot":"","sources":["../../../../../src/components/Main/Main.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/components/Message/Message.stories.d.ts

@@ -20,6 +20,12 @@ declare const _default: {
             disableSnapshot: boolean;
         };
     };
+    argTypes: {
+        valence: {
+            control: string;
+            options: string[];
+        };
+    };
 };
 export default _default;
 export declare const Default: {

package/dist/types/src/components/Message/Message.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/Message.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAK3D,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;;;;;;;;uCAE8C,UAAU;;;;;;;;AAS1D,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}
+{"version":3,"file":"Message.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Message/Message.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAK3D,KAAK,UAAU,GAAG;IAChB,OAAO,EAAE,cAAc,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;;;;;;;;uCAE8C,UAAU;;;;;;;;;;;;;;AAS1D,wBAYE;AAEF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}

package/dist/types/src/components/Tooltip/Tooltip.d.ts

@@ -50,7 +50,6 @@ type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
 type TooltipTriggerProps = PrimitiveButtonProps & Pick<TooltipProps, 'delayDuration'> & {
     content?: string;
     side?: TooltipSide;
-    suppressNextTooltip?: MutableRefObject<boolean>;
     onInteract?: (event: SyntheticEvent) => void;
 };
 interface TooltipContentProps extends TooltipContentImplProps {
@@ -88,7 +87,6 @@ export declare const Tooltip: {
     }, "ref"> & Pick<TooltipProps, "delayDuration"> & {
         content?: string;
         side?: TooltipSide;
-        suppressNextTooltip?: MutableRefObject<boolean>;
         onInteract?: (event: SyntheticEvent) => void;
     } & React.RefAttributes<HTMLButtonElement>>;
 };

package/dist/types/src/components/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts

@@ -18,7 +18,6 @@ declare const _default: {
         }, "ref"> & Pick<import("@radix-ui/react-tooltip").TooltipProps, "delayDuration"> & {
             content?: string;
             side?: import("./Tooltip").TooltipSide;
-            suppressNextTooltip?: React.MutableRefObject<boolean>;
             onInteract?: (event: React.SyntheticEvent) => void;
         } & React.RefAttributes<HTMLButtonElement>>;
     };

package/dist/types/src/components/Tooltip/Tooltip.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;;;;;;;;;;;;;;;wCAE+C,UAAU;;;;;;;;AAY3D,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CActB,CAAC"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AACrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,UAAU,GAAG;IAChB,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;;;;;;;;;;;;;;wCAE+C,UAAU;;;;;;;;AAY3D,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CActB,CAAC"}

package/dist/types/src/testing/decorators/index.d.ts

@@ -1,3 +1,3 @@
 export * from './withTheme';
-export * from './withVariants';
+export * from './withSurfaceVariantsLayout';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/testing/decorators/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,6BAA6B,CAAC"}

package/dist/types/src/testing/decorators/{withVariants.d.ts → withSurfaceVariantsLayout.d.ts}

@@ -1,4 +1,3 @@
-import '@dxos-theme';
 import { type Decorator } from '@storybook/react';
 import { type Density, type Elevation } from '@dxos/react-ui-types';
 type Config = {
@@ -8,6 +7,6 @@ type Config = {
     }[];
     densities?: Density[];
 };
-export declare const withVariants: ({ elevations, densities, }?: Config) => Decorator;
+export declare const withSurfaceVariantsLayout: ({ elevations, densities, }?: Config) => Decorator;
 export {};
-//# sourceMappingURL=withVariants.d.ts.map
+//# sourceMappingURL=withSurfaceVariantsLayout.d.ts.map

package/dist/types/src/testing/decorators/withSurfaceVariantsLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"withSurfaceVariantsLayout.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/withSurfaceVariantsLayout.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEpE,KAAK,MAAM,GAAG;IACZ,UAAU,CAAC,EAAE;QAAE,SAAS,EAAE,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1D,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;CACvB,CAAC;AAyBF,eAAO,MAAM,yBAAyB,GAAI,6BAOvC,MAAW,KAAG,SAOhB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.2-main.fbd8ed0",
+  "version": "0.8.2-staging.42af850",
   "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",
@@ -13,11 +13,20 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./testing": {
+      "types": "./dist/types/src/testing/index.d.ts",
+      "browser": "./dist/lib/browser/testing/index.mjs",
+      "node": "./dist/lib/node-esm/testing/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
-    "*": {}
+    "*": {
+      "testing": [
+        "./dist/types/src/testing/index.d.ts"
+      ]
+    }
   },
   "files": [
     "dist",
@@ -26,7 +35,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@fluentui/react-tabster": "^9.24.2",
-    "@lit/react": "^1.0.5",
+    "@preact-signals/safe-react": "^0.9.0",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
     "@radix-ui/react-avatar": "1.1.3",
@@ -63,14 +72,14 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.2-main.fbd8ed0",
-    "@dxos/lit-ui": "0.8.2-main.fbd8ed0",
-    "@dxos/react-hooks": "0.8.2-main.fbd8ed0",
-    "@dxos/log": "0.8.2-main.fbd8ed0",
-    "@dxos/react-list": "0.8.2-main.fbd8ed0",
-    "@dxos/react-input": "0.8.2-main.fbd8ed0",
-    "@dxos/react-ui-types": "0.8.2-main.fbd8ed0",
-    "@dxos/util": "0.8.2-main.fbd8ed0"
+    "@dxos/debug": "0.8.2-staging.42af850",
+    "@dxos/lit-ui": "0.8.2-staging.42af850",
+    "@dxos/react-input": "0.8.2-staging.42af850",
+    "@dxos/react-hooks": "0.8.2-staging.42af850",
+    "@dxos/react-list": "0.8.2-staging.42af850",
+    "@dxos/log": "0.8.2-staging.42af850",
+    "@dxos/react-ui-types": "0.8.2-staging.42af850",
+    "@dxos/util": "0.8.2-staging.42af850"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -82,15 +91,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0",
-    "@dxos/random": "0.8.2-main.fbd8ed0",
-    "@dxos/util": "0.8.2-main.fbd8ed0"
+    "@dxos/random": "0.8.2-staging.42af850",
+    "@dxos/react-ui-theme": "0.8.2-staging.42af850",
+    "@dxos/util": "0.8.2-staging.42af850"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.2-main.fbd8ed0"
+    "@dxos/react-ui-theme": "0.8.2-staging.42af850"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.tsx

@@ -4,13 +4,18 @@
 
 import '@dxos/lit-ui/dx-avatar.pcss';
 
-import { createComponent } from '@lit/react';
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, type PropsWithChildren } from 'react';
 
-import { type AvatarVariant, type AvatarStatus, type AvatarAnimation, DxAvatar as NaturalDxAvatar } from '@dxos/lit-ui';
+import {
+  type AvatarVariant,
+  type AvatarStatus,
+  type AvatarAnimation,
+  type DxAvatar as NaturalDxAvatar,
+} from '@dxos/lit-ui';
+import { DxAvatar } from '@dxos/lit-ui/react';
 import { useId } from '@dxos/react-hooks';
 import { mx } from '@dxos/react-ui-theme';
 
@@ -33,12 +38,6 @@ const AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescr
   return <AvatarProvider {...{ labelId, descriptionId }}>{children}</AvatarProvider>;
 };
 
-const DxAvatar = createComponent({
-  tagName: 'dx-avatar',
-  elementClass: NaturalDxAvatar,
-  react: React,
-});
-
 type AvatarContentProps = ThemedClassName<Omit<ComponentProps<typeof DxAvatar>, 'children'>>;
 
 const AvatarContent = forwardRef<NaturalDxAvatar, AvatarContentProps>(

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

@@ -9,7 +9,7 @@ import { type StoryObj, type Meta } from '@storybook/react';
 import React from 'react';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
-import { withVariants, withTheme } from '../../testing';
+import { withSurfaceVariantsLayout, withTheme } from '../../testing';
 
 const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   return (
@@ -36,7 +36,7 @@ const meta: Meta<typeof Button> = {
   title: 'ui/react-ui-core/Button',
   component: Button,
   render: DefaultStory,
-  decorators: [withVariants(), withTheme],
+  decorators: [withSurfaceVariantsLayout(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 

package/src/components/Buttons/IconButton.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef, type MutableRefObject } from 'react';
+import React, { forwardRef } from 'react';
 
 import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
@@ -19,16 +19,15 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
     tooltipSide?: TooltipSide;
-    suppressNextTooltip?: MutableRefObject<boolean>;
   };
 
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ noTooltip, tooltipPortal = true, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
+  ({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
     return (
-      <Tooltip.Trigger asChild content={props.label} side={tooltipSide} suppressNextTooltip={suppressNextTooltip}>
+      <Tooltip.Trigger asChild content={props.label} side={tooltipSide}>
         <LabelledIconButton {...props} ref={forwardedRef} />
       </Tooltip.Trigger>
     );
@@ -36,10 +35,7 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 );
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    { icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props },
-    forwardedRef,
-  ) => {
+  ({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     return (
       <Button {...props} classNames={tx('iconButton.root', 'iconButton', {}, classNames)} ref={forwardedRef}>

package/src/components/Dialogs/AlertDialog.stories.tsx

@@ -11,7 +11,7 @@ import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 import { Toolbar } from '../Toolbar';
 
-type DefaultStoryProps = Partial<{
+type StoryProps = Partial<{
   title: string;
   description: string;
   body: string;
@@ -20,7 +20,7 @@ type DefaultStoryProps = Partial<{
   openTrigger: string;
 }>;
 
-const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: DefaultStoryProps) => {
+const DefaultStory = ({ title, openTrigger, description, body, cancelTrigger, actionTrigger }: StoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>

package/src/components/Dialogs/Dialog.stories.tsx

@@ -10,7 +10,7 @@ import { Dialog } from './Dialog';
 import { withTheme } from '../../testing';
 import { Button } from '../Buttons';
 
-type DefaultStoryProps = Partial<{
+type StoryProps = Partial<{
   title: string;
   description: string;
   body: string;
@@ -19,7 +19,7 @@ type DefaultStoryProps = Partial<{
   blockAlign: 'center' | 'start';
 }>;
 
-const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: DefaultStoryProps) => {
+const DefaultStory = ({ title, openTrigger, description, body, closeTrigger, blockAlign }: StoryProps) => {
   return (
     <Dialog.Root defaultOpen>
       <Dialog.Trigger asChild>

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type StoryObj, type Meta } from '@storybook/react';
 import React from 'react';
 
-import { baseSurface, modalSurface, groupSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
+import { baseSurface, modalSurface, activeSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type MessageValence } from '@dxos/react-ui-types';
 
 import {
@@ -78,7 +78,7 @@ const DefaultStory = (props: BaseProps) => {
       <div className={mx(baseSurface, 'p-4')}>
         <Wrapper {...props} />
       </div>
-      <div className={mx(groupSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'positioned' }))}>
+      <div className={mx(activeSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'positioned' }))}>
         <Wrapper {...props} />
       </div>
       <div className={mx(modalSurface, 'p-4 rounded-lg', surfaceShadow({ elevation: 'dialog' }))}>

package/src/components/Main/Main.tsx

@@ -308,6 +308,7 @@ const MainContent = forwardRef<HTMLDivElement, MainProps>(
         {...props}
         data-sidebar-inline-start-state={navigationSidebarState}
         data-sidebar-inline-end-state={complementarySidebarState}
+        data-handles-focus={handlesFocus}
         className={tx('main.content', 'main', { bounce, handlesFocus }, classNames)}
         ref={forwardedRef}
       >

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

@@ -33,11 +33,17 @@ export default {
   render: DefaultStory,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
+  argTypes: {
+    valence: {
+      control: 'select',
+      options: ['success', 'info', 'warning', 'error', 'neutral'],
+    },
+  },
 };
 
 export const Default = {
   args: {
-    valence: 'error',
+    valence: 'neutral',
     title: 'Alert title',
     body: 'Alert content',
   },

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

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import React, { type PropsWithChildren } from 'react';
 
 import { faker } from '@dxos/random';
-import { groupSurface, surfaceShadow } from '@dxos/react-ui-theme';
+import { activeSurface, surfaceShadow } from '@dxos/react-ui-theme';
 
 import { ScrollArea } from './ScrollArea';
 import { withTheme } from '../../testing';
@@ -17,7 +17,7 @@ faker.seed(1234);
 const DefaultStory = ({ children }: PropsWithChildren<{}>) => {
   return (
     <ScrollArea.Root
-      classNames={['is-[300px] bs-[400px] rounded', groupSurface, surfaceShadow({ elevation: 'positioned' })]}
+      classNames={['is-[300px] bs-[400px] rounded', activeSurface, surfaceShadow({ elevation: 'positioned' })]}
     >
       <ScrollArea.Viewport classNames='rounded p-4'>
         <p>{children}</p>

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

@@ -10,7 +10,7 @@ import React, { useState } from 'react';
 import { faker } from '@dxos/random';
 
 import { Select } from './Select';
-import { withVariants, withTheme } from '../../testing';
+import { withSurfaceVariantsLayout, withTheme } from '../../testing';
 
 faker.seed(1234);
 
@@ -50,6 +50,6 @@ export const Default: StoryObj<StoryProps> = {
 export default {
   title: 'ui/react-ui-core/Select',
   render: DefaultStory,
-  decorators: [withVariants(), withTheme],
+  decorators: [withSurfaceVariantsLayout(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Tooltip/Tooltip.tsx

@@ -251,7 +251,6 @@ type TooltipTriggerProps = PrimitiveButtonProps &
   Pick<TooltipProps, 'delayDuration'> & {
     content?: string;
     side?: TooltipSide;
-    suppressNextTooltip?: MutableRefObject<boolean>;
     onInteract?: (event: SyntheticEvent) => void;
   };
 
@@ -262,7 +261,6 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
       onInteract,
       // TODO(thure): Pass `delayDuration` into the context.
       delayDuration: _delayDuration,
-      suppressNextTooltip,
       side,
       content,
       ...triggerProps
@@ -313,20 +311,7 @@ const TooltipTrigger = forwardRef<TooltipTriggerElement, TooltipTriggerProps>(
           isPointerDownRef.current = true;
           document.addEventListener('pointerup', handlePointerUp, { once: true });
         })}
-        onFocus={composeEventHandlers(props.onFocus, (event) => {
-          if (!isPointerDownRef.current) {
-            onInteract?.(event);
-            if (event.defaultPrevented) {
-              return;
-            }
-            if (suppressNextTooltip?.current) {
-              suppressNextTooltip.current = false;
-            } else {
-              context.onTriggerChange(ref.current);
-              context.onOpen();
-            }
-          }
-        })}
+        onFocus={props.onFocus}
         onBlur={composeEventHandlers(props.onBlur, context.onClose)}
         onClick={composeEventHandlers(props.onClick, context.onClose)}
       />

package/src/playground/Controls.stories.tsx

@@ -8,7 +8,7 @@ import { FileTs, FileJs, ArrowClockwise, Bug, TextUnderline, TextB, TextItalic }
 import React, { useState } from 'react';
 
 import { Input, Select, Toggle, Toolbar } from '../components';
-import { withTheme, withVariants } from '../testing';
+import { withTheme, withSurfaceVariantsLayout } from '../testing';
 
 const DefaultStory = () => {
   const [checked, setChecked] = useState<boolean>(false);
@@ -84,7 +84,7 @@ const DefaultStory = () => {
 export default {
   title: 'ui/react-ui-core/Playground/Controls',
   render: DefaultStory,
-  decorators: [withVariants(), withTheme],
+  decorators: [withSurfaceVariantsLayout(), withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
 

package/src/testing/decorators/index.ts

@@ -3,4 +3,4 @@
 //
 
 export * from './withTheme';
-export * from './withVariants';
+export * from './withSurfaceVariantsLayout';

package/src/testing/decorators/withSurfaceVariantsLayout.tsx

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Decorator } from '@storybook/react';
+import React, { type ComponentType, type PropsWithChildren } from 'react';
+
+import { mx, surfaceShadow } from '@dxos/react-ui-theme';
+import { type Density, type Elevation } from '@dxos/react-ui-types';
+
+type Config = {
+  elevations?: { elevation: Elevation; surface?: string }[];
+  densities?: Density[];
+};
+
+const Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (
+  <div className={mx('p-4 mlb-4 rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>
+    {children}
+  </div>
+);
+
+const Panel = ({
+  Story,
+  elevations,
+  densities,
+  className,
+}: { Story: ComponentType } & Config & { className?: string }) => (
+  <div className={mx('flex flex-col h-full p-4', className)}>
+    {elevations?.map(({ elevation, surface }) =>
+      densities?.map((density) => (
+        <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>
+          <Story />
+        </Container>
+      )),
+    )}
+  </div>
+);
+
+export const withSurfaceVariantsLayout = ({
+  elevations = [
+    { elevation: 'base', surface: 'bg-baseSurface' },
+    { elevation: 'positioned', surface: 'bg-cardSurface' },
+    { elevation: 'dialog', surface: 'bg-modalSurface' },
+  ],
+  densities = ['coarse'],
+}: Config = {}): Decorator => {
+  return (Story) => (
+    <div className='fixed inset-0 grid grid-cols-2 overflow-y-auto'>
+      <Panel Story={Story} className='light' elevations={elevations} densities={densities} />
+      <Panel Story={Story} className='dark' elevations={elevations} densities={densities} />
+    </div>
+  );
+};

package/dist/types/src/testing/decorators/withVariants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"withVariants.d.ts","sourceRoot":"","sources":["../../../../../src/testing/decorators/withVariants.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD,OAAO,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAIpE,KAAK,MAAM,GAAG;IACZ,UAAU,CAAC,EAAE;QAAE,SAAS,EAAE,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1D,SAAS,CAAC,EAAE,OAAO,EAAE,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,6BAO1B,MAAW,KAAG,SAkBhB,CAAC"}