@dxos/react-ui 0.8.2-main.5ca3450 → 0.8.2-main.600d381

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

@@ -1,23 +1,97 @@
-import { type TooltipProviderProps as TooltipProviderPrimitiveProps, type TooltipProps as TooltipRootPrimitiveProps, type TooltipContentProps as TooltipContentPrimitiveProps, type TooltipTriggerProps as TooltipTriggerPrimitiveProps, type TooltipPortalProps as TooltipPortalPrimitiveProps, type TooltipArrowProps as TooltipArrowPrimitiveProps } from '@radix-ui/react-tooltip';
-import React from 'react';
-import { type ThemedClassName } from '../../util';
-type TooltipProviderProps = TooltipProviderPrimitiveProps;
-type TooltipRootProps = TooltipRootPrimitiveProps;
-type TooltipPortalProps = TooltipPortalPrimitiveProps;
-type TooltipTriggerProps = TooltipTriggerPrimitiveProps;
-type TooltipArrowProps = ThemedClassName<TooltipArrowPrimitiveProps>;
-type TooltipContentProps = ThemedClassName<TooltipContentPrimitiveProps>;
+import type { Scope } from '@radix-ui/react-context';
+import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
+import * as PopperPrimitive from '@radix-ui/react-popper';
+import { Primitive } from '@radix-ui/react-primitive';
+import { type TooltipProps } from '@radix-ui/react-tooltip';
+import React, { type ComponentPropsWithoutRef, type ElementRef, type SyntheticEvent, type MutableRefObject, type ReactNode } from 'react';
+type TooltipScopedProps<P = {}> = P & {
+    __scopeTooltip?: Scope;
+};
+declare const createTooltipScope: import("@radix-ui/react-context").CreateScope;
+type TooltipContextValue = {
+    contentId: string;
+    open: boolean;
+    stateAttribute: 'closed' | 'delayed-open' | 'instant-open';
+    trigger: TooltipTriggerElement | null;
+    onTriggerChange(trigger: TooltipTriggerElement | null): void;
+    onTriggerEnter(): void;
+    onTriggerLeave(): void;
+    onOpen(): void;
+    onClose(): void;
+    onPointerInTransitChange(inTransit: boolean): void;
+    isPointerInTransitRef: MutableRefObject<boolean>;
+    disableHoverableContent: boolean;
+};
+declare const useTooltipContext: (consumerName: string, scope: Scope<TooltipContextValue | undefined>) => TooltipContextValue;
+interface TooltipProviderProps {
+    children?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The duration from when the pointer enters the trigger until the tooltip gets opened. This will
+     * override the prop with the same name passed to Provider.
+     * @defaultValue 700
+     */
+    delayDuration?: number;
+    /**
+     * When `true`, trying to hover the content will result in the tooltip closing as the pointer leaves the trigger.
+     * @defaultValue false
+     */
+    disableHoverableContent?: boolean;
+    /**
+     * How much time a user has to enter another trigger without incurring a delay again.
+     * @defaultValue 300
+     */
+    skipDelayDuration?: number;
+}
+type TooltipTriggerElement = ElementRef<typeof Primitive.button>;
+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 {
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+}
+type DismissableLayerProps = ComponentPropsWithoutRef<typeof DismissableLayer>;
+type PopperContentProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;
+interface TooltipContentImplProps extends Omit<PopperContentProps, 'onPlaced'> {
+    /**
+     * A more descriptive label for accessibility purpose
+     */
+    'aria-label'?: string;
+    /**
+     * Event handler called when the escape key is down.
+     * Can be prevented.
+     */
+    onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];
+    /**
+     * Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.
+     * Can be prevented.
+     */
+    onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];
+}
+type TooltipSide = NonNullable<TooltipContentProps['side']>;
 export declare const Tooltip: {
-    Provider: React.FunctionComponent<TooltipProviderPrimitiveProps>;
-    Root: React.FunctionComponent<TooltipRootPrimitiveProps>;
-    Portal: React.FC<TooltipPortalPrimitiveProps>;
-    Trigger: React.ForwardRefExoticComponent<TooltipTriggerPrimitiveProps & React.RefAttributes<HTMLButtonElement>>;
-    Arrow: React.ForwardRefExoticComponent<Omit<TooltipArrowPrimitiveProps, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & React.RefAttributes<SVGSVGElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<TooltipContentPrimitiveProps, "className"> & {
-        classNames?: import("@dxos/react-ui-types").ClassNameValue;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Provider: React.FC<TooltipProviderProps>;
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+        ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+    } & {
+        asChild?: boolean;
+    }, "ref"> & Pick<TooltipProps, "delayDuration"> & {
+        content?: string;
+        side?: TooltipSide;
+        suppressNextTooltip?: MutableRefObject<boolean>;
+        onInteract?: (event: SyntheticEvent) => void;
+    } & React.RefAttributes<HTMLButtonElement>>;
 };
-export type { TooltipProviderProps, TooltipRootProps, TooltipPortalProps, TooltipTriggerProps, TooltipArrowProps, TooltipContentProps, };
+export { createTooltipScope, useTooltipContext };
+export type { TooltipProviderProps, TooltipTriggerProps, TooltipScopedProps, TooltipSide };
 //# sourceMappingURL=Tooltip.d.ts.map

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":"AAIA,OAAO,EAEL,KAAK,oBAAoB,IAAI,6BAA6B,EAE1D,KAAK,YAAY,IAAI,yBAAyB,EAC9C,KAAK,mBAAmB,IAAI,4BAA4B,EAExD,KAAK,mBAAmB,IAAI,4BAA4B,EAExD,KAAK,kBAAkB,IAAI,2BAA2B,EAEtD,KAAK,iBAAiB,IAAI,0BAA0B,EAErD,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAA6C,MAAM,OAAO,CAAC;AAIlE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD,KAAK,oBAAoB,GAAG,6BAA6B,CAAC;AAI1D,KAAK,gBAAgB,GAAG,yBAAyB,CAAC;AAIlD,KAAK,kBAAkB,GAAG,2BAA2B,CAAC;AAItD,KAAK,mBAAmB,GAAG,4BAA4B,CAAC;AAIxD,KAAK,iBAAiB,GAAG,eAAe,CAAC,0BAA0B,CAAC,CAAC;AAarE,KAAK,mBAAmB,GAAG,eAAe,CAAC,4BAA4B,CAAC,CAAC;AAmBzE,eAAO,MAAM,OAAO;;;;;;;;;;;CAOnB,CAAC;AAEF,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,iBAAiB,EACjB,mBAAmB,GACpB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAI1D,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAG5D,OAAO,KAAK,EAAE,EACZ,KAAK,wBAAwB,EAC7B,KAAK,UAAU,EAEf,KAAK,cAAc,EAEnB,KAAK,gBAAgB,EACrB,KAAK,SAAS,EAMf,MAAM,OAAO,CAAC;AAIf,KAAK,kBAAkB,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG;IAAE,cAAc,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC;AACjE,QAAA,MAA6B,kBAAkB,+CAAsD,CAAC;AAWtG,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,QAAQ,GAAG,cAAc,GAAG,cAAc,CAAC;IAC3D,OAAO,EAAE,qBAAqB,GAAG,IAAI,CAAC;IACtC,eAAe,CAAC,OAAO,EAAE,qBAAqB,GAAG,IAAI,GAAG,IAAI,CAAC;IAC7D,cAAc,IAAI,IAAI,CAAC;IACvB,cAAc,IAAI,IAAI,CAAC;IACvB,MAAM,IAAI,IAAI,CAAC;IACf,OAAO,IAAI,IAAI,CAAC;IAChB,wBAAwB,CAAC,SAAS,EAAE,OAAO,GAAG,IAAI,CAAC;IACnD,qBAAqB,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACjD,uBAAuB,EAAE,OAAO,CAAC;CAClC,CAAC;AAEF,QAAA,MAA+B,iBAAiB,8FAA2D,CAAC;AAE5G,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AA+JD,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;AACjE,KAAK,oBAAoB,GAAG,wBAAwB,CAAC,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC;AAC9E,KAAK,mBAAmB,GAAG,oBAAoB,GAC7C,IAAI,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAChD,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC9C,CAAC;AAmIJ,UAAU,mBAAoB,SAAQ,uBAAuB;IAC3D;;;OAGG;IACH,UAAU,CAAC,EAAE,IAAI,CAAC;CACnB;AAwGD,KAAK,qBAAqB,GAAG,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC/E,KAAK,kBAAkB,GAAG,wBAAwB,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;AACnF,UAAU,uBAAwB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,UAAU,CAAC;IAC5E;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC3D;;;OAGG;IACH,oBAAoB,CAAC,EAAE,qBAAqB,CAAC,sBAAsB,CAAC,CAAC;CACtE;AAuGD,KAAK,WAAW,GAAG,WAAW,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC;AA0J5D,eAAO,MAAM,OAAO;;;;;;;kBAxgBN,MAAM;eACT,WAAW;8BACI,gBAAgB,CAAC,OAAO,CAAC;qBAClC,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI;;CAwgB/C,CAAC;AAEF,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,CAAC;AAEjD,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,WAAW,EAAE,CAAC"}

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

@@ -1,24 +1,28 @@
 import '@dxos-theme';
 import React from 'react';
 type StoryTooltipProps = {
-    content: string;
+    tooltips: {
+        label: string;
+        content: string;
+    }[];
     defaultOpen?: boolean;
 };
 declare const _default: {
     title: string;
     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("@dxos/react-ui-types").ClassNameValue;
-        } & React.RefAttributes<SVGSVGElement>>;
-        Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tooltip").TooltipContentProps, "className"> & {
-            classNames?: import("@dxos/react-ui-types").ClassNameValue;
-        } & React.RefAttributes<HTMLDivElement>>;
-    };
-    render: ({ content, defaultOpen }: StoryTooltipProps) => React.JSX.Element;
+        Provider: React.FC<import("./Tooltip").TooltipProviderProps>;
+        Trigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+            ref?: ((instance: HTMLButtonElement | 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<HTMLButtonElement> | null | undefined;
+        } & {
+            asChild?: boolean;
+        }, "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>>;
+    };
+    render: ({ tooltips, defaultOpen }: StoryTooltipProps) => React.JSX.Element;
     decorators: import("@storybook/react").Decorator[];
     parameters: {
         chromatic: {
@@ -29,7 +33,10 @@ declare const _default: {
 export default _default;
 export declare const Default: {
     args: {
-        content: string;
+        tooltips: {
+            label: string;
+            content: string;
+        }[];
     };
     parameters: {
         chromatic: {
@@ -37,10 +44,13 @@ export declare const Default: {
         };
     };
 };
-export declare const Testing: {
+export declare const DefaultOpen: {
     args: {
         defaultOption: boolean;
-        content: string;
+        tooltips: {
+            label: string;
+            content: string;
+        }[];
     };
     parameters: {
         chromatic: {
@@ -48,4 +58,18 @@ export declare const Testing: {
         };
     };
 };
+export declare const StressTest: {
+    args: {
+        defaultOption: boolean;
+        tooltips: {
+            label: string;
+            content: string;
+        }[];
+    };
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
 //# sourceMappingURL=Tooltip.stories.d.ts.map

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;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;;;;;;;;;;;;;;;uCAE8C,iBAAiB;;;;;;;;AAcjE,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;CAQnB,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,iBAAiB,GAAG;IACvB,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,iBAAiB;;;;;;;;AAYlE,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;CAavB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;;;CActB,CAAC"}

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

@@ -1,6 +1,5 @@
 import '@dxos-theme';
 import React from 'react';
-export declare const Default: {};
 declare const _default: {
     title: string;
     render: () => React.JSX.Element;
@@ -12,4 +11,5 @@ declare const _default: {
     };
 };
 export default _default;
+export declare const Default: {};
 //# sourceMappingURL=Controls.stories.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Controls.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Controls.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAmB,MAAM,OAAO,CAAC;AA4ExC,eAAO,MAAM,OAAO,IAAK,CAAC;;;;;;;;;;;AAE1B,wBAKE"}
+{"version":3,"file":"Controls.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Controls.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAmB,MAAM,OAAO,CAAC;;;;;;;;;;;AA4ExC,wBAKE;AAEF,eAAO,MAAM,OAAO,IAAK,CAAC"}

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

@@ -0,0 +1,8 @@
+import '@dxos-theme';
+import { type StoryObj, type Meta } from '@storybook/react';
+import { Button } from '../components';
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+//# sourceMappingURL=Custom.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Custom.stories.d.ts","sourceRoot":"","sources":["../../../../src/playground/Custom.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAG5D,OAAO,EAAE,MAAM,EAAyC,MAAM,eAAe,CAAC;AAiH9E,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAM7B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.2-main.5ca3450",
+  "version": "0.8.2-main.600d381",
   "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",
@@ -56,20 +56,21 @@
     "@radix-ui/react-toolbar": "1.1.2",
     "@radix-ui/react-tooltip": "1.1.8",
     "@radix-ui/react-use-controllable-state": "1.1.0",
+    "@radix-ui/react-visually-hidden": "1.1.2",
     "aria-hidden": "^1.2.4",
     "date-fns": "^3.3.1",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.2-main.5ca3450",
-    "@dxos/lit-ui": "0.8.2-main.5ca3450",
-    "@dxos/log": "0.8.2-main.5ca3450",
-    "@dxos/react-input": "0.8.2-main.5ca3450",
-    "@dxos/react-hooks": "0.8.2-main.5ca3450",
-    "@dxos/react-list": "0.8.2-main.5ca3450",
-    "@dxos/util": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-types": "0.8.2-main.5ca3450"
+    "@dxos/debug": "0.8.2-main.600d381",
+    "@dxos/lit-ui": "0.8.2-main.600d381",
+    "@dxos/react-input": "0.8.2-main.600d381",
+    "@dxos/react-list": "0.8.2-main.600d381",
+    "@dxos/log": "0.8.2-main.600d381",
+    "@dxos/react-ui-types": "0.8.2-main.600d381",
+    "@dxos/react-hooks": "0.8.2-main.600d381",
+    "@dxos/util": "0.8.2-main.600d381"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -81,15 +82,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.2-main.5ca3450",
-    "@dxos/react-ui-theme": "0.8.2-main.5ca3450",
-    "@dxos/util": "0.8.2-main.5ca3450"
+    "@dxos/random": "0.8.2-main.600d381",
+    "@dxos/util": "0.8.2-main.600d381",
+    "@dxos/react-ui-theme": "0.8.2-main.600d381"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.2-main.5ca3450"
+    "@dxos/react-ui-theme": "0.8.2-main.600d381"
   },
   "publishConfig": {
     "access": "public"

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

@@ -5,6 +5,7 @@
 import '@dxos-theme';
 
 import { CaretLeft, CaretRight } from '@phosphor-icons/react';
+import { type StoryObj, type Meta } from '@storybook/react';
 import React from 'react';
 
 import { Button, ButtonGroup, type ButtonProps } from './Button';
@@ -31,32 +32,36 @@ const DefaultStory = ({ children, ...args }: Omit<ButtonProps, 'ref'>) => {
   );
 };
 
-const defaults = { children: 'Test' };
+const meta: Meta<typeof Button> = {
+  title: 'ui/react-ui-core/Button',
+  component: Button,
+  render: DefaultStory,
+  decorators: [withVariants(), withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+const defaults: Story['args'] = { children: 'Test' };
+
+export const Default: Story = {
   args: { ...defaults, variant: 'default' },
 };
 
-export const Primary = {
+export const Primary: Story = {
   args: { ...defaults, variant: 'primary' },
 };
 
-export const Destructive = {
+export const Destructive: Story = {
   args: { ...defaults, variant: 'destructive' },
 };
 
-export const Outline = {
+export const Outline: Story = {
   args: { ...defaults, variant: 'outline' },
 };
 
-export const Ghost = {
+export const Ghost: Story = {
   args: { ...defaults, variant: 'ghost' },
 };
-
-export default {
-  title: 'ui/react-ui-core/Button',
-  component: Button,
-  decorators: [withVariants(), withTheme],
-  render: DefaultStory,
-  parameters: { chromatic: { disableSnapshot: false } },
-};

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

@@ -18,10 +18,10 @@ const StorybookIconButton = (props: StorybookIconButtonProps) => {
   return (
     <Tooltip.Provider>
       <div className='mbe-4'>
-        <IconButton label='Bold' icon='ph--text-b--bold' {...props} />
+        <IconButton label='Bold' icon='ph--text-b--regular' {...props} />
       </div>
       <div className='mbe-4'>
-        <IconButton iconOnly label='Bold' icon='ph--text-b--bold' {...props} />
+        <IconButton iconOnly label='Bold' icon='ph--text-b--regular' {...props} />
       </div>
     </Tooltip.Provider>
   );

package/src/components/Buttons/IconButton.tsx

@@ -2,60 +2,35 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef, type ReactNode, type MutableRefObject, useState } from 'react';
+import React, { forwardRef, type MutableRefObject } from 'react';
 
 import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { Icon, type IconProps } from '../Icon';
-import { Tooltip, type TooltipContentProps } from '../Tooltip';
+import { Tooltip, type TooltipSide } from '../Tooltip';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Pick<IconProps, 'icon' | 'size'> & {
-    label: NonNullable<ReactNode>;
+    label: string;
     iconOnly?: boolean;
     noTooltip?: boolean;
     caretDown?: boolean;
-    // TODO(burdon): Create slots abstraction?
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
-    tooltipZIndex?: string;
-    tooltipSide?: TooltipContentProps['side'];
+    tooltipSide?: TooltipSide;
     suppressNextTooltip?: MutableRefObject<boolean>;
   };
 
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    { noTooltip, tooltipPortal = true, tooltipZIndex: zIndex, tooltipSide, suppressNextTooltip, ...props },
-    forwardedRef,
-  ) => {
-    const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
+  ({ noTooltip, tooltipPortal = true, tooltipSide, suppressNextTooltip, ...props }, forwardedRef) => {
     if (noTooltip) {
       return <LabelledIconButton {...props} ref={forwardedRef} />;
     }
-    const content = (
-      <Tooltip.Content {...(zIndex && { style: { zIndex } })} side={tooltipSide}>
-        {props.label}
-        <Tooltip.Arrow />
-      </Tooltip.Content>
-    );
     return (
-      <Tooltip.Root
-        open={triggerTooltipOpen}
-        onOpenChange={(nextOpen) => {
-          if (suppressNextTooltip?.current) {
-            setTriggerTooltipOpen(false);
-            suppressNextTooltip.current = false;
-          } else {
-            setTriggerTooltipOpen(nextOpen);
-          }
-        }}
-      >
-        <Tooltip.Trigger asChild>
-          <LabelledIconButton {...props} ref={forwardedRef} />
-        </Tooltip.Trigger>
-        {tooltipPortal ? <Tooltip.Portal>{content}</Tooltip.Portal> : content}
-      </Tooltip.Root>
+      <Tooltip.Trigger asChild content={props.label} side={tooltipSide} suppressNextTooltip={suppressNextTooltip}>
+        <LabelledIconButton {...props} ref={forwardedRef} />
+      </Tooltip.Trigger>
     );
   },
 );

package/src/components/Clipboard/CopyButton.tsx

@@ -3,15 +3,15 @@
 //
 
 import { type IconProps } from '@phosphor-icons/react';
-import React, { useState } from 'react';
+import React from 'react';
 
 import { mx } from '@dxos/react-ui-theme';
 
 import { useClipboard } from './ClipboardProvider';
-import { Button, type ButtonProps } from '../Buttons';
+import { Button, type ButtonProps, IconButton } from '../Buttons';
 import { Icon } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
-import { Tooltip } from '../Tooltip';
+import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
 
 export type CopyButtonProps = ButtonProps & {
   value: string;
@@ -48,31 +48,29 @@ type CopyButtonIconOnlyProps = CopyButtonProps & {
   label?: string;
 };
 
-export const CopyButtonIconOnly = ({ value, classNames, iconProps, variant, ...props }: CopyButtonIconOnlyProps) => {
+export const CopyButtonIconOnly = ({
+  __scopeTooltip,
+  value,
+  classNames,
+  iconProps,
+  variant,
+  ...props
+}: TooltipScopedProps<CopyButtonIconOnlyProps>) => {
   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 [open, setOpen] = useState(false);
+  const { onOpen } = useTooltipContext('CopyButton', __scopeTooltip);
   return (
-    <Tooltip.Root delayDuration={1500} open={open} onOpenChange={setOpen}>
-      <Tooltip.Portal>
-        <Tooltip.Content side='bottom' sideOffset={12}>
-          <span>{label}</span>
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-      <Tooltip.Trigger
-        aria-label={label}
-        {...props}
-        onClick={() => setTextValue(value).then(() => setOpen(true))}
-        data-testid='copy-invitation'
-        asChild
-      >
-        <Button variant={variant} classNames={['inline-flex flex-col justify-center', classNames]}>
-          <Icon icon='ph--copy--regular' size={5 as any} {...iconProps} />
-        </Button>
-      </Tooltip.Trigger>
-    </Tooltip.Root>
+    <IconButton
+      iconOnly
+      label={label!}
+      icon='ph--copy--regular'
+      size={5}
+      variant={variant}
+      classNames={['inline-flex flex-col justify-center', classNames]}
+      onClick={() => setTextValue(value).then(onOpen)}
+      data-testid='copy-invitation'
+    />
   );
 };

package/src/components/Dialogs/Dialog.tsx

@@ -78,14 +78,18 @@ type DialogCloseProps = DialogClosePrimitiveProps;
 
 const DialogClose: FunctionComponent<DialogCloseProps> = DialogClosePrimitive;
 
-type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
+type OverlayLayoutContextValue = { descriptionId?: string; inOverlayLayout?: boolean };
 const DIALOG_OVERLAY_NAME = 'DialogOverlay';
 const DIALOG_CONTENT_NAME = 'DialogContent';
-const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(DIALOG_OVERLAY_NAME, {
-  inOverlayLayout: false,
-});
+const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
+  DIALOG_OVERLAY_NAME,
+  {},
+);
 
-type DialogOverlayProps = ThemedClassName<DialogOverlayPrimitiveProps> & { blockAlign?: 'center' | 'start' | 'end' };
+type DialogOverlayProps = ThemedClassName<
+  DialogOverlayPrimitiveProps &
+    Pick<OverlayLayoutContextValue, 'descriptionId'> & { blockAlign?: 'center' | 'start' | 'end' }
+>;
 
 const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<HTMLDivElement, DialogOverlayProps>(
   ({ classNames, children, blockAlign, ...props }, forwardedRef) => {
@@ -111,11 +115,12 @@ type DialogContentProps = ThemedClassName<DialogContentPrimitiveProps> & { inOve
 const DialogContent: ForwardRefExoticComponent<DialogContentProps> = forwardRef<HTMLDivElement, DialogContentProps>(
   ({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
+    const { inOverlayLayout, descriptionId } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
 
     return (
       <DialogContentPrimitive
-        aria-describedby={undefined}
+        // NOTE: Radix warning unless set.
+        aria-describedby={descriptionId ?? 'unknown'}
         {...props}
         className={tx(
           'dialog.content',

package/src/components/ScrollArea/ScrollArea.tsx

@@ -23,6 +23,9 @@ type ScrollAreaVariant = 'coarse' | 'fine';
 
 type ScrollAreaRootProps = ThemedClassName<ScrollAreaPrimitiveRootProps>;
 
+/**
+ * @deprecated
+ */
 const ScrollAreaRoot = forwardRef<HTMLDivElement, ScrollAreaRootProps>(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (