@dxos/react-ui 0.6.14-main.7bd9c89 → 0.6.14-main.f49f251

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

@@ -13,7 +13,26 @@ type StorybookToastProps = Partial<{
 }>;
 declare const _default: {
     title: string;
-    component: (props: StorybookToastProps) => React.JSX.Element;
+    component: {
+        Provider: React.FunctionComponent<import("@radix-ui/react-toast").ToastProviderProps>;
+        Viewport: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastViewportProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLOListElement>>;
+        Root: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLLIElement>>;
+        Body: React.ForwardRefExoticComponent<Omit<import("./Toast").ToastBodyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+        Title: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastTitleProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLHeadingElement>>;
+        Description: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toast").ToastDescriptionProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLParagraphElement>>;
+        Actions: React.ForwardRefExoticComponent<Omit<import("./Toast").ToastActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+        Action: React.FunctionComponent<import("@radix-ui/react-toast").ToastActionProps>;
+        Close: React.FunctionComponent<import("@radix-ui/react-toast").ToastCloseProps>;
+    };
+    render: (props: StorybookToastProps) => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

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

@@ -1 +1 @@
-{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMxD,KAAK,kBAAkB,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,CAAA;CAAE,CAAC;AAElE,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,EAAE,CAAC;IACrC,YAAY,EAAE,SAAS,CAAC;CACzB,CAAC,CAAC;;;uBAE4B,mBAAmB;;;;;;;;AAwBlD,wBAKE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAWnB,CAAC"}
+{"version":3,"file":"Toast.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toast/Toast.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAMxD,KAAK,kBAAkB,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,SAAS,CAAA;CAAE,CAAC;AAElE,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,kBAAkB,EAAE,CAAC;IACrC,YAAY,EAAE,SAAS,CAAC;CACzB,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;oBAE4B,mBAAmB;;;;;;;;AAwBlD,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;CAWnB,CAAC"}

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

@@ -3,7 +3,36 @@ import React from 'react';
 type StorybookToolbarProps = {};
 declare const _default: {
     title: string;
-    component: (props: StorybookToolbarProps) => React.JSX.Element;
+    component: {
+        Root: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-toolbar").ToolbarProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLDivElement>>;
+        Button: React.ForwardRefExoticComponent<Omit<import("../Buttons").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        Link: React.ForwardRefExoticComponent<Omit<import("..").LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+        Toggle: React.ForwardRefExoticComponent<Omit<import("../Buttons").ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        ToggleGroup: React.ForwardRefExoticComponent<(Omit<Omit<import("@radix-ui/react-toolbar").ToolbarToggleGroupSingleProps, "className"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+        } & {
+            asChild?: boolean;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & {
+            elevation?: import("packages/ui/react-ui-types/dist/types/src").Elevation;
+            asChild?: boolean;
+        }, "ref"> | Omit<Omit<import("@radix-ui/react-toolbar").ToolbarToggleGroupMultipleProps, "className"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+            ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+        } & {
+            asChild?: boolean;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & {
+            elevation?: import("packages/ui/react-ui-types/dist/types/src").Elevation;
+            asChild?: boolean;
+        }, "ref">) & React.RefAttributes<HTMLDivElement>>;
+        ToggleGroupItem: React.ForwardRefExoticComponent<Omit<import("../Buttons").ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        Separator: (props: import("..").SeparatorProps) => React.JSX.Element;
+    };
+    render: (props: StorybookToolbarProps) => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,qBAAqB,GAAG,EAAE,CAAC;;;uBAEC,qBAAqB;;;;;;;;AAuDtD,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
+{"version":3,"file":"Toolbar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,KAAK,qBAAqB,GAAG,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAEC,qBAAqB;;;;;;;;AAuDtD,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

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

@@ -5,7 +5,19 @@ type StoryTooltipProps = {
 };
 declare const _default: {
     title: string;
-    component: ({ content }: StoryTooltipProps) => React.JSX.Element;
+    component: {
+        Provider: React.FunctionComponent<import("@radix-ui/react-tooltip").TooltipProviderProps>;
+        Root: React.FunctionComponent<import("@radix-ui/react-tooltip").TooltipProps>;
+        Portal: React.FC<import("@radix-ui/react-tooltip").TooltipPortalProps>;
+        Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+        Arrow: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tooltip").TooltipArrowProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<SVGSVGElement>>;
+        Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tooltip").TooltipContentProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLDivElement>>;
+    };
+    render: ({ content }: StoryTooltipProps) => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

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;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;;;6BAEiC,iBAAiB;;;;;;;;AAcpD,wBAKE;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CAOnB,CAAC"}
+{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,KAAK,iBAAiB,GAAG;IACvB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;;;;;;;;;;;;;;;0BAEiC,iBAAiB;;;;;;;;AAcpD,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CAOnB,CAAC"}

package/dist/types/src/playground/Surfaces.stories.d.ts

@@ -1,8 +1,12 @@
 import '@dxos-theme';
-import React from 'react';
+import React, { type PropsWithChildren } from 'react';
+type SurfaceLevel = 'base' | 'group' | 'chrome' | 'fixed' | 'input' | 'accent';
 declare const _default: {
     title: string;
-    component: () => React.JSX.Element;
+    component: ({ children, level }: PropsWithChildren & {
+        level: SurfaceLevel;
+    }) => React.JSX.Element;
+    render: () => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

package/dist/types/src/playground/Surfaces.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Surfaces.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Surfaces.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAiC,MAAM,OAAO,CAAC;;;;;;;;;;;AAwDtD,wBAKE;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}
+{"version":3,"file":"Surfaces.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Surfaces.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAgBtD,KAAK,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;;;qCAEzC,iBAAiB,GAAG;QAAE,KAAK,EAAE,YAAY,CAAA;KAAE;;;;;;;;;AAsCjF,wBAME;AAEF,eAAO,MAAM,OAAO;;CAEnB,CAAC"}

package/dist/types/src/playground/Typography.stories.d.ts

@@ -2,7 +2,7 @@ import '@dxos-theme';
 import React from 'react';
 declare const _default: {
     title: string;
-    component: () => React.JSX.Element;
+    render: () => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
     parameters: {
         chromatic: {

package/package.json

@@ -1,19 +1,17 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.6.14-main.7bd9c89",
+  "version": "0.6.14-main.f49f251",
   "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",
   "license": "MIT",
   "author": "DXOS.org",
+  "sideEffects": true,
   "exports": {
     ".": {
+      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": {
-        "require": "./dist/lib/node/index.cjs",
-        "default": "./dist/lib/node-esm/index.mjs"
-      },
-      "types": "./dist/types/src/index.d.ts"
+      "node": "./dist/lib/node-esm/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -26,6 +24,7 @@
   ],
   "dependencies": {
     "@fluentui/react-tabster": "^9.19.0",
+    "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.3",
@@ -34,9 +33,14 @@
     "@radix-ui/react-context": "^1.0.0",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-dropdown-menu": "2.0.7-rc.10",
-    "@radix-ui/react-popover": "1.0.8-rc.8",
+    "@radix-ui/react-dismissable-layer": "^1.1.1",
+    "@radix-ui/react-focus-guards": "^1.1.1",
+    "@radix-ui/react-focus-scope": "^1.1.0",
+    "@radix-ui/react-id": "^1.1.0",
+    "@radix-ui/react-menu": "^2.0.6",
     "@radix-ui/react-popper": "^1.1.2",
+    "@radix-ui/react-portal": "^1.1.2",
+    "@radix-ui/react-presence": "^1.1.1",
     "@radix-ui/react-primitive": "^1.0.2",
     "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-select": "^1.2.1",
@@ -49,17 +53,19 @@
     "@radix-ui/react-toolbar": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "aria-hidden": "^1.2.4",
     "date-fns": "^3.3.1",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
-    "@dxos/debug": "0.6.14-main.7bd9c89",
-    "@dxos/log": "0.6.14-main.7bd9c89",
-    "@dxos/react-hooks": "0.6.14-main.7bd9c89",
-    "@dxos/react-input": "0.6.14-main.7bd9c89",
-    "@dxos/util": "0.6.14-main.7bd9c89",
-    "@dxos/react-list": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-types": "0.6.14-main.7bd9c89"
+    "react-remove-scroll": "^2.6.0",
+    "@dxos/log": "0.6.14-main.f49f251",
+    "@dxos/debug": "0.6.14-main.f49f251",
+    "@dxos/react-hooks": "0.6.14-main.f49f251",
+    "@dxos/react-input": "0.6.14-main.f49f251",
+    "@dxos/react-list": "0.6.14-main.f49f251",
+    "@dxos/util": "0.6.14-main.f49f251",
+    "@dxos/react-ui-types": "0.6.14-main.f49f251"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -71,15 +77,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.6.14-main.7bd9c89",
-    "@dxos/react-ui-theme": "0.6.14-main.7bd9c89",
-    "@dxos/util": "0.6.14-main.7bd9c89"
+    "@dxos/random": "0.6.14-main.f49f251",
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251",
+    "@dxos/util": "0.6.14-main.f49f251"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.6.14-main.7bd9c89"
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.stories.tsx

@@ -57,8 +57,9 @@ const StorybookAvatar = (props: PropsWithChildren<StorybookAvatarProps>) => {
 };
 
 export default {
-  title: 'ui/react-ui/Avatar',
-  component: StorybookAvatar,
+  title: 'ui/react-ui-core/Avatar',
+  component: Avatar,
+  render: StorybookAvatar,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -44,8 +44,9 @@ const StorybookAvatarGroup = () => {
 };
 
 export default {
-  title: 'ui/react-ui/Avatar Group',
-  component: StorybookAvatarGroup,
+  title: 'ui/react-ui-core/AvatarGroup',
+  component: AvatarGroup,
+  render: StorybookAvatarGroup,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -39,8 +39,9 @@ const StorybookBreadcrumb = () => {
 };
 
 export default {
-  title: 'ui/react-ui/Breadcrumb',
-  component: StorybookBreadcrumb,
+  title: 'ui/react-ui-core/Breadcrumb',
+  component: Breadcrumb,
+  render: StorybookBreadcrumb,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -54,7 +54,7 @@ export const Ghost = {
 };
 
 export default {
-  title: 'ui/react-ui/Button',
+  title: 'ui/react-ui-core/Button',
   component: Button,
   decorators: [withVariants(), withTheme],
   render: DefaultStory,

package/src/components/Buttons/Button.tsx

@@ -5,7 +5,7 @@
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
 import { type Density, type Elevation } from '@dxos/react-ui-types';
 
@@ -27,41 +27,51 @@ const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupCo
   inGroup: false,
 });
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { classNames, children, density: propsDensity, elevation: propsElevation, variant = 'default', asChild, ...props },
-    ref,
-  ) => {
-    const { inGroup } = useButtonGroupContext(BUTTON_NAME);
-    const { tx } = useThemeContext();
-    const elevation = useElevationContext(propsElevation);
-    const density = useDensityContext(propsDensity);
-    const Root = asChild ? Slot : Primitive.button;
-    return (
-      <Root
-        ref={ref}
-        {...props}
-        data-variant={variant}
-        data-density={density}
-        data-props={inGroup ? 'grouped' : ''}
-        className={tx(
-          'button.root',
-          'button',
-          {
-            variant,
-            inGroup,
-            disabled: props.disabled,
-            density,
-            elevation,
-          },
-          classNames,
-        )}
-        {...(props.disabled && { disabled: true })}
-      >
-        {children}
-      </Root>
-    );
-  },
+const Button = memo(
+  forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+      {
+        classNames,
+        children,
+        density: propsDensity,
+        elevation: propsElevation,
+        variant = 'default',
+        asChild,
+        ...props
+      },
+      ref,
+    ) => {
+      const { inGroup } = useButtonGroupContext(BUTTON_NAME);
+      const { tx } = useThemeContext();
+      const elevation = useElevationContext(propsElevation);
+      const density = useDensityContext(propsDensity);
+      const Root = asChild ? Slot : Primitive.button;
+      return (
+        <Root
+          ref={ref}
+          {...props}
+          data-variant={variant}
+          data-density={density}
+          data-props={inGroup ? 'grouped' : ''}
+          className={tx(
+            'button.root',
+            'button',
+            {
+              variant,
+              inGroup,
+              disabled: props.disabled,
+              density,
+              elevation,
+            },
+            classNames,
+          )}
+          {...(props.disabled && { disabled: true })}
+        >
+          {children}
+        </Root>
+      );
+    },
+  ),
 );
 
 Button.displayName = BUTTON_NAME;

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

@@ -21,8 +21,9 @@ const StorybookToggle = (props: StorybookToggleProps) => {
 };
 
 export default {
-  title: 'ui/react-ui/Toggle button',
-  component: StorybookToggle,
+  title: 'ui/react-ui-core/Toggle',
+  component: Toggle,
+  render: StorybookToggle,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -29,8 +29,9 @@ const StorybookToggleGroup = (props: StorybookToggleGroupProps) => {
 };
 
 export default {
-  title: 'ui/react-ui/Toggle button group',
-  component: StorybookToggleGroup,
+  title: 'ui/react-ui-core/ToggleGroup',
+  component: ToggleGroup,
+  render: StorybookToggleGroup,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -54,8 +54,9 @@ const StorybookAlertDialog = ({
 };
 
 export default {
-  title: 'ui/react-ui/Dialog (alert)',
-  component: StorybookAlertDialog,
+  title: 'ui/react-ui-core/AlertDialog',
+  component: AlertDialog,
+  render: StorybookAlertDialog,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -40,8 +40,9 @@ const StorybookDialog = ({ title, openTrigger, description, body, closeTrigger,
 };
 
 export default {
-  title: 'ui/react-ui/Dialog',
-  component: StorybookDialog,
+  title: 'ui/react-ui-core/Dialog',
+  component: Dialog,
+  render: StorybookDialog,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

package/src/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
 import { type Size } from '@dxos/react-ui-types';
 
@@ -12,11 +12,13 @@ import { type ThemedClassName } from '../../util';
 
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & { icon: string; size?: Size };
 
-export const Icon = forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
-      <use href={`/icons.svg#${icon}`} />
-    </svg>
-  );
-});
+export const Icon = memo(
+  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
+        <use href={`/icons.svg#${icon}`} />
+      </svg>
+    );
+  }),
+);

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

@@ -72,9 +72,10 @@ const StoryInput = (props: StoryInputProps) => {
 };
 
 export default {
-  title: 'ui/react-ui/Input',
-  component: StoryInput,
-  // TODO(thure): Refactor
+  title: 'ui/react-ui-core/Input',
+  component: Input,
+  render: StoryInput,
+  // TODO(thure): Refactor.
   argTypes: {
     label: { control: 'text' },
     description: { control: 'text' },

package/src/components/Link/Link.stories.tsx

@@ -8,7 +8,7 @@ import { Link } from './Link';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'ui/react-ui/Link',
+  title: 'ui/react-ui-core/Link',
   component: Link,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },

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

@@ -9,7 +9,7 @@ import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy }
 import { CSS } from '@dnd-kit/utilities';
 import { useArrowNavigationGroup } from '@fluentui/react-tabster';
 import { DotsSixVertical, PushPin } from '@phosphor-icons/react';
-import React, { type FC, type ReactNode, useState } from 'react';
+import React, { type ReactNode, useState } from 'react';
 
 import {
   getSize,
@@ -20,12 +20,12 @@ import {
   surfaceElevation,
 } from '@dxos/react-ui-theme';
 
-import { List, ListItem, type ListProps, type ListScopedProps } from './List';
+import { List, ListItem, type ListScopedProps } from './List';
 import { withTheme } from '../../testing';
 
 export default {
-  title: 'ui/react-ui/List',
-  component: List as FC<ListProps>,
+  title: 'ui/react-ui-core/List',
+  component: List,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -56,8 +56,9 @@ const StorybookTree = ({ data }: StorybookTreeProps) => {
 };
 
 export default {
-  title: 'ui/react-ui/Tree',
-  component: StorybookTree,
+  title: 'ui/react-ui-core/Tree',
+  component: Tree,
+  render: StorybookTree,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -144,7 +144,7 @@ const DefaultStory = () => {
 export const Default = {};
 
 export default {
-  title: 'ui/react-ui/Treegrid',
+  title: 'ui/react-ui-core/Treegrid',
   component: Tg.Root,
   render: DefaultStory,
   decorators: [withTheme],

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

@@ -46,8 +46,9 @@ const StoryMain = (_args: StoryMainArgs) => {
 };
 
 export default {
-  title: 'ui/react-ui/Main',
-  component: StoryMain,
+  title: 'ui/react-ui-core/Main',
+  component: Main.Root,
+  render: StoryMain,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -92,8 +92,9 @@ const StorybookContextMenu = () => {
 };
 
 export default {
-  title: 'ui/react-ui/Context menu',
-  component: StorybookContextMenu,
+  title: 'ui/react-ui-core/ContextMenu',
+  component: ContextMenu,
+  render: StorybookContextMenu,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };

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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import React from 'react';
+import React, { useRef, useState } from 'react';
 
 import { DropdownMenu } from './DropdownMenu';
 import { withTheme } from '../../testing';
@@ -92,8 +92,9 @@ const StorybookDropdownMenu = () => {
 };
 
 export default {
-  title: 'ui/react-ui/Dropdown menu',
-  component: StorybookDropdownMenu,
+  title: 'ui/react-ui-core/DropdownMenu',
+  component: DropdownMenu,
+  render: StorybookDropdownMenu,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
 };
@@ -104,3 +105,42 @@ export const Default = {
     chromatic: { delay: 1600 },
   },
 };
+
+export const VirtualTrigger = {
+  render: () => {
+    const [menuOpen, setMenuOpen] = useState(true);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+    return (
+      <>
+        <Button onClick={() => setMenuOpen(true)} ref={buttonRef}>
+          Customise options
+        </Button>
+        <DropdownMenu.Root open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenu.VirtualTrigger virtualRef={buttonRef} />
+          <DropdownMenu.Content sideOffset={4} collisionPadding={8}>
+            <DropdownMenu.Viewport>
+              <DropdownMenu.Item>
+                <span className='grow'>New Tab</span>
+                <span className='opacity-50'>⌘+T</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item>
+                <span className='grow'>New Window</span>
+                <span className='opacity-50'>⌘+N</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item disabled>
+                <span className='grow'>New Private Window</span>
+                <span className='opacity-50'>⇧+⌘+N</span>
+              </DropdownMenu.Item>
+
+              <DropdownMenu.Separator />
+
+              <DropdownMenu.GroupLabel>People</DropdownMenu.GroupLabel>
+            </DropdownMenu.Viewport>
+
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </>
+    );
+  },
+};