@dxos/react-ui 0.7.5-main.9d26e3a → 0.7.5-main.9d2a38b

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

@@ -1,21 +1,27 @@
+import type { ToggleGroupItemProps as ToggleGroupItemPrimitiveProps } from '@radix-ui/react-toggle-group';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import React from 'react';
 import { type ThemedClassName } from '../../util';
-import { type ButtonGroupProps, type ButtonProps, type ToggleGroupItemProps, type ToggleProps } from '../Buttons';
+import { type ButtonGroupProps, type ButtonProps, type ToggleGroupItemProps, type ToggleProps, type IconButtonProps } from '../Buttons';
 import { type LinkProps } from '../Link';
 import { type SeparatorProps } from '../Separator';
 type ToolbarRootProps = ThemedClassName<ToolbarPrimitive.ToolbarProps>;
 type ToolbarButtonProps = ButtonProps;
+type ToolbarIconButtonProps = IconButtonProps;
 type ToolbarToggleProps = ToggleProps;
 type ToolbarLinkProps = LinkProps;
 type ToolbarToggleGroupProps = (Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps, 'className'> | Omit<ToolbarPrimitive.ToolbarToggleGroupMultipleProps, 'className'>) & ButtonGroupProps;
 type ToolbarToggleGroupItemProps = ToggleGroupItemProps;
-type ToolbarSeparatorProps = SeparatorProps;
+type ToolbarToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
+type ToolbarSeparatorProps = SeparatorProps & {
+    variant?: 'gap' | 'line';
+};
 export declare const Toolbar: {
     Root: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.ToolbarProps, "className"> & {
         classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
     } & React.RefAttributes<HTMLDivElement>>;
     Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     Link: React.ForwardRefExoticComponent<Omit<LinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
     Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     ToggleGroup: React.ForwardRefExoticComponent<(Omit<Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps, "className"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -38,8 +44,12 @@ export declare const Toolbar: {
         asChild?: boolean;
     }, "ref">) & React.RefAttributes<HTMLDivElement>>;
     ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-    Separator: (props: SeparatorProps) => React.JSX.Element;
-    Expander: () => React.JSX.Element;
+    ToggleGroupIconItem: React.ForwardRefExoticComponent<Omit<ToolbarToggleGroupIconItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Separator: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-separator").SeparatorProps, "className"> & {
+        classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+    } & {
+        variant?: "gap" | "line";
+    } & React.RefAttributes<HTMLDivElement>>;
 };
-export type { ToolbarRootProps, ToolbarButtonProps, ToolbarLinkProps, ToolbarToggleProps, ToolbarToggleGroupProps, ToolbarToggleGroupItemProps, ToolbarSeparatorProps, };
+export type { ToolbarRootProps, ToolbarButtonProps, ToolbarIconButtonProps, ToolbarLinkProps, ToolbarToggleProps, ToolbarToggleGroupProps, ToolbarToggleGroupItemProps, ToolbarToggleGroupIconItemProps, ToolbarSeparatorProps, };
 //# sourceMappingURL=Toolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAEhB,KAAK,oBAAoB,EACzB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAWvE,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,gBAAgB,GAAG,SAAS,CAAC;AAUlC,KAAK,uBAAuB,GAAG,CAC3B,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,WAAW,CAAC,GACjE,IAAI,CAAC,gBAAgB,CAAC,+BAA+B,EAAE,WAAW,CAAC,CACtE,GACC,gBAAgB,CAAC;AAYnB,KAAK,2BAA2B,GAAG,oBAAoB,CAAC;AAYxD,KAAK,qBAAqB,GAAG,cAAc,CAAC;AAY5C,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAVa,cAAc;;CAmB9C,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,gBAAgB,EAChB,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,EAC3B,qBAAqB,GACtB,CAAC"}
+{"version":3,"file":"Toolbar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Toolbar/Toolbar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,IAAI,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAC1G,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAGL,KAAK,gBAAgB,EACrB,KAAK,WAAW,EAEhB,KAAK,oBAAoB,EACzB,KAAK,WAAW,EAEhB,KAAK,eAAe,EACrB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9D,KAAK,gBAAgB,GAAG,eAAe,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAWvE,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,sBAAsB,GAAG,eAAe,CAAC;AAU9C,KAAK,kBAAkB,GAAG,WAAW,CAAC;AAUtC,KAAK,gBAAgB,GAAG,SAAS,CAAC;AAUlC,KAAK,uBAAuB,GAAG,CAC3B,IAAI,CAAC,gBAAgB,CAAC,6BAA6B,EAAE,WAAW,CAAC,GACjE,IAAI,CAAC,gBAAgB,CAAC,+BAA+B,EAAE,WAAW,CAAC,CACtE,GACC,gBAAgB,CAAC;AAYnB,KAAK,2BAA2B,GAAG,oBAAoB,CAAC;AAYxD,KAAK,+BAA+B,GAAG,IAAI,CAAC,6BAA6B,EAAE,WAAW,CAAC,GAAG,eAAe,CAAC;AAY1G,KAAK,qBAAqB,GAAG,cAAc,GAAG;IAAE,OAAO,CAAC,EAAE,KAAK,GAAG,MAAM,CAAA;CAAE,CAAC;AAc3E,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAdsC,KAAK,GAAG,MAAM;;CAwBvE,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,kBAAkB,EAClB,uBAAuB,EACvB,2BAA2B,EAC3B,+BAA+B,EAC/B,qBAAqB,GACtB,CAAC"}

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

@@ -8,6 +8,7 @@ declare const _default: {
             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>>;
+        IconButton: React.ForwardRefExoticComponent<Omit<import("../Buttons").IconButtonProps, "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"> & {
@@ -30,8 +31,12 @@ declare const _default: {
             asChild?: boolean;
         }, "ref">) & React.RefAttributes<HTMLDivElement>>;
         ToggleGroupItem: React.ForwardRefExoticComponent<Omit<import("../Buttons").ToggleGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-        Separator: (props: import("..").SeparatorProps) => React.JSX.Element;
-        Expander: () => React.JSX.Element;
+        ToggleGroupIconItem: React.ForwardRefExoticComponent<Omit<import("./Toolbar").ToolbarToggleGroupIconItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+        Separator: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-separator").SeparatorProps, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & {
+            variant?: "gap" | "line";
+        } & React.RefAttributes<HTMLDivElement>>;
     };
     render: (props: StorybookToolbarProps) => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oBAEC,qBAAqB;;;;;;;;AAuDtD,wBAME;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.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;AAGlE,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;AAgBzE,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":"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"}

package/dist/types/src/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './useDensityContext';
 export * from './useElevationContext';
+export * from './useSafeArea';
 export * from './useTranslationsContext';
 export * from './useThemeContext';
 export * from './useVisualViewport';

package/dist/types/src/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC"}

package/dist/types/src/hooks/useSafeArea.d.ts

@@ -0,0 +1,9 @@
+export type SafeAreaPadding = Record<'top' | 'right' | 'bottom' | 'left', number>;
+export declare const initialSafeArea: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export declare const useSafeArea: () => SafeAreaPadding;
+//# sourceMappingURL=useSafeArea.d.ts.map

package/dist/types/src/hooks/useSafeArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeArea.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSafeArea.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,EAAE,MAAM,CAAC,CAAC;AAElF,eAAO,MAAM,eAAe;;;;;CAAmD,CAAC;AAEhF,eAAO,MAAM,WAAW,QAAO,eAY9B,CAAC"}

package/dist/types/src/hooks/useSafeCollisionPadding.d.ts

@@ -0,0 +1,10 @@
+import { type TooltipContentProps } from '@radix-ui/react-tooltip';
+type PaddingProp = TooltipContentProps['collisionPadding'];
+export declare const useSafeCollisionPadding: (collisionPadding?: PaddingProp) => {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export {};
+//# sourceMappingURL=useSafeCollisionPadding.d.ts.map

package/dist/types/src/hooks/useSafeCollisionPadding.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSafeCollisionPadding.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSafeCollisionPadding.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAMnE,KAAK,WAAW,GAAG,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;AAiB3D,eAAO,MAAM,uBAAuB,sBAAuB,WAAW;;;;;CAWrE,CAAC"}

package/dist/types/src/hooks/useVisualViewport.d.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { type useEffect } from 'react';
 export declare const useVisualViewport: (deps?: Parameters<typeof useEffect>[1]) => {
     width: number | null;
     height: number | null;

package/dist/types/src/hooks/useVisualViewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useVisualViewport.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useVisualViewport.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAE5C,eAAO,MAAM,iBAAiB,UAAW,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC;;;CAiBvE,CAAC"}
+{"version":3,"file":"useVisualViewport.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useVisualViewport.ts"],"names":[],"mappings":"AAIA,OAAO,EAAe,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAI9D,eAAO,MAAM,iBAAiB,UAAW,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC,CAAC;;;CAcvE,CAAC"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.2"}
+{"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.7.5-main.9d26e3a",
+  "version": "0.7.5-main.9d2a38b",
   "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",
@@ -60,13 +60,13 @@
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.7.5-main.9d26e3a",
-    "@dxos/log": "0.7.5-main.9d26e3a",
-    "@dxos/react-hooks": "0.7.5-main.9d26e3a",
-    "@dxos/react-input": "0.7.5-main.9d26e3a",
-    "@dxos/react-list": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-types": "0.7.5-main.9d26e3a",
-    "@dxos/util": "0.7.5-main.9d26e3a"
+    "@dxos/debug": "0.7.5-main.9d2a38b",
+    "@dxos/log": "0.7.5-main.9d2a38b",
+    "@dxos/react-input": "0.7.5-main.9d2a38b",
+    "@dxos/react-hooks": "0.7.5-main.9d2a38b",
+    "@dxos/react-ui-types": "0.7.5-main.9d2a38b",
+    "@dxos/react-list": "0.7.5-main.9d2a38b",
+    "@dxos/util": "0.7.5-main.9d2a38b"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -78,15 +78,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.7.5-main.9d26e3a",
-    "@dxos/react-ui-theme": "0.7.5-main.9d26e3a",
-    "@dxos/util": "0.7.5-main.9d26e3a"
+    "@dxos/random": "0.7.5-main.9d2a38b",
+    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b",
+    "@dxos/util": "0.7.5-main.9d2a38b"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.5-main.9d26e3a"
+    "@dxos/react-ui-theme": "0.7.5-main.9d2a38b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Buttons/IconButton.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { forwardRef } from 'react';
+import React, { forwardRef, type ReactNode, type MutableRefObject, useState } from 'react';
 
 import { Button, type ButtonProps } from './Button';
 import { useThemeContext } from '../../hooks';
@@ -12,16 +12,19 @@ import { Tooltip } from '../Tooltip';
 
 type IconButtonProps = Omit<ButtonProps, 'children'> &
   Pick<IconProps, 'icon' | 'size'> & {
-    label: string;
+    label: NonNullable<ReactNode>;
     iconOnly?: boolean;
+    caretDown?: boolean;
     // TODO(burdon): Create slots abstraction?
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipPortal?: boolean;
     tooltipZIndex?: string;
+    suppressNextTooltip?: MutableRefObject<boolean>;
   };
 
 const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ tooltipPortal = true, tooltipZIndex: zIndex, ...props }, forwardedRef) => {
+  ({ tooltipPortal = true, tooltipZIndex: zIndex, suppressNextTooltip, ...props }, forwardedRef) => {
+    const [triggerTooltipOpen, setTriggerTooltipOpen] = useState(false);
     const content = (
       <Tooltip.Content {...(zIndex && { style: { zIndex } })}>
         {props.label}
@@ -29,7 +32,17 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
       </Tooltip.Content>
     );
     return (
-      <Tooltip.Root>
+      <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>
@@ -40,12 +53,16 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 );
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size, iconOnly, label, classNames, iconClassNames, ...props }, forwardedRef) => {
+  (
+    { icon, size, iconOnly, label, classNames, iconClassNames, caretDown, suppressNextTooltip, ...props },
+    forwardedRef,
+  ) => {
     const { tx } = useThemeContext();
     return (
       <Button {...props} classNames={tx('iconButton.root', 'iconButton', {}, 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' />}
       </Button>
     );
   },

package/src/components/Dialogs/Dialog.tsx

@@ -94,15 +94,7 @@ const DialogOverlay: ForwardRefExoticComponent<DialogOverlayProps> = forwardRef<
     return (
       <DialogOverlayPrimitive
         {...props}
-        className={tx(
-          'dialog.overlay',
-          'dialog__overlay',
-          {},
-          classNames,
-          'data-[block-align=start]:justify-center',
-          'data-[block-align=start]:items-start',
-          'data-[block-align=center]:place-content-center',
-        )}
+        className={tx('dialog.overlay', 'dialog__overlay', {}, classNames)}
         ref={forwardedRef}
         data-block-align={blockAlign}
       >

package/src/components/Main/Main.tsx

@@ -3,7 +3,6 @@
 //
 
 import { useFocusableGroup } from '@fluentui/react-tabster';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
 import { createContext } from '@radix-ui/react-context';
 import { Root as DialogRoot, DialogContent } from '@radix-ui/react-dialog';
 import { Primitive } from '@radix-ui/react-primitive';
@@ -333,47 +332,12 @@ const MainOverlay = forwardRef<HTMLDivElement, MainOverlayProps>(({ classNames,
   );
 });
 
-type MainNotchProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>>;
-
-const MainNotch = forwardRef<HTMLDivElement, MainNotchProps>(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  // Notch is concerned with the nav sidebar, whichever side it might be on.
-  const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
-  const notchElement = useRef<HTMLDivElement | null>(null);
-  const ref = useComposedRefs(forwardedRef, notchElement);
-
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLDivElement>) => {
-      switch (event.key) {
-        case 'Escape':
-          props?.onKeyDown?.(event);
-          notchElement.current?.focus();
-      }
-    },
-    [props?.onKeyDown],
-  );
-
-  const mover = useLandmarkMover(handleKeyDown, '3');
-
-  return (
-    <div
-      role='toolbar'
-      {...mover}
-      {...props}
-      data-nav-sidebar-state={navigationSidebarOpen ? 'open' : 'closed'}
-      className={tx('main.notch', 'main__notch', {}, classNames)}
-      ref={ref}
-    />
-  );
-});
-
 export const Main = {
   Root: MainRoot,
   Content: MainContent,
   Overlay: MainOverlay,
   NavigationSidebar: MainNavigationSidebar,
   ComplementarySidebar: MainComplementarySidebar,
-  Notch: MainNotch,
 };
 
 export { useMainContext, useSidebars };

package/src/components/Menus/ContextMenu.tsx

@@ -7,6 +7,7 @@ import { Slot } from '@radix-ui/react-slot';
 import React, { type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuProps;
@@ -26,13 +27,14 @@ type ContextMenuContentProps = ThemedClassName<ContextMenuPrimitive.ContextMenuC
 };
 
 const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return (
       <ContextMenuPrimitive.Content
-        collisionPadding={8}
         {...props}
+        collisionPadding={safeCollisionPadding}
         className={tx('menu.content', 'menu', { elevation }, classNames)}
         ref={forwardedRef}
       >

package/src/components/Menus/DropdownMenu.tsx

@@ -29,6 +29,7 @@ import React, {
 } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
@@ -232,19 +233,20 @@ interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
-    const { __scopeDropdownMenu, classNames, ...contentProps } = props;
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
     const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef(false);
-
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return (
       <MenuPrimitive.Content
         id={context.contentId}
         aria-labelledby={context.triggerId}
         {...menuScope}
         {...contentProps}
+        collisionPadding={safeCollisionPadding}
         ref={forwardedRef}
         onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
           if (!hasInteractedOutsideRef.current) {

package/src/components/Popover/Popover.tsx

@@ -37,6 +37,7 @@ import React, {
 import { RemoveScroll } from 'react-remove-scroll';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 /* -------------------------------------------------------------------------------------------------
@@ -428,6 +429,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
       onPointerDownOutside,
       onFocusOutside,
       onInteractOutside,
+      collisionPadding = 8,
       classNames,
       ...contentProps
     } = props;
@@ -435,6 +437,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
     const popperScope = usePopperScope(__scopePopover);
     const { tx } = useThemeContext();
     const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
 
     // Make sure the whole tree has focus guards as our `Popover` may be
     // the last element in the DOM (because of the `Portal`)
@@ -463,6 +466,7 @@ const PopoverContentImpl = forwardRef<PopoverContentImplElement, PopoverContentI
             id={context.contentId}
             {...popperScope}
             {...contentProps}
+            collisionPadding={safeCollisionPadding}
             className={tx('popover.content', 'popover', { elevation }, classNames)}
             ref={forwardedRef}
             style={{

package/src/components/Select/Select.tsx

@@ -7,6 +7,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import React, { forwardRef } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 import { Button, type ButtonProps } from '../Buttons';
 import { Icon } from '../Icon';
@@ -53,12 +54,14 @@ const SelectTriggerButton = forwardRef<HTMLButtonElement, SelectTriggerButtonPro
 type SelectContentProps = ThemedClassName<SelectPrimitive.SelectContentProps>;
 
 const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
+  ({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
     return (
       <SelectPrimitive.Content
         {...props}
+        collisionPadding={safeCollisionPadding}
         className={tx('select.content', 'select__content', { elevation }, classNames)}
         position='popper'
         ref={forwardedRef}

package/src/components/Separator/Separator.tsx

@@ -5,23 +5,26 @@ import {
   Separator as SeparatorPrimitive,
   type SeparatorProps as SeparatorPrimitiveProps,
 } from '@radix-ui/react-separator';
-import React from 'react';
+import React, { forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
 type SeparatorProps = ThemedClassName<SeparatorPrimitiveProps>;
 
-const Separator = ({ classNames, orientation = 'horizontal', ...props }: SeparatorProps) => {
-  const { tx } = useThemeContext();
-  return (
-    <SeparatorPrimitive
-      orientation={orientation}
-      {...props}
-      className={tx('separator.root', 'separator', { orientation }, classNames)}
-    />
-  );
-};
+const Separator = forwardRef<HTMLDivElement, SeparatorProps>(
+  ({ classNames, orientation = 'horizontal', ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <SeparatorPrimitive
+        orientation={orientation}
+        {...props}
+        className={tx('separator.root', 'separator', { orientation }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
 
 export type { SeparatorProps };
 

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -3,11 +3,12 @@
 //
 
 import { createKeyborg } from 'keyborg';
-import React, { createContext, type PropsWithChildren, useEffect } from 'react';
+import React, { createContext, type PropsWithChildren, useEffect, useMemo } from 'react';
 
 import { type Density, type Elevation, type ThemeFunction } from '@dxos/react-ui-types';
 
 import { TranslationsProvider, type TranslationsProviderProps } from './TranslationsProvider';
+import { type SafeAreaPadding, useSafeArea } from '../../hooks';
 import { hasIosKeyboard } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 import { ElevationProvider } from '../ElevationProvider';
@@ -18,6 +19,7 @@ export type ThemeContextValue = {
   tx: ThemeFunction<any>;
   themeMode: ThemeMode;
   hasIosKeyboard: boolean;
+  safeAreaPadding?: SafeAreaPadding;
   noCache?: boolean;
 };
 
@@ -27,7 +29,7 @@ export type ThemeContextValue = {
 export const ThemeContext = createContext<ThemeContextValue | undefined>(undefined);
 
 export type ThemeProviderProps = Omit<TranslationsProviderProps, 'children'> &
-  Partial<ThemeContextValue> &
+  Partial<Omit<ThemeContextValue, 'safeAreaPadding'>> &
   PropsWithChildren<{
     rootDensity?: Density;
     rootElevation?: Elevation;
@@ -51,8 +53,15 @@ export const ThemeProvider = ({
     }
   }, []);
 
+  const safeAreaPadding = useSafeArea();
+
+  const contextValue = useMemo(
+    () => ({ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), safeAreaPadding, ...rest }),
+    [tx, themeMode, safeAreaPadding, rest],
+  );
+
   return (
-    <ThemeContext.Provider value={{ tx, themeMode, hasIosKeyboard: hasIosKeyboard(), ...rest }}>
+    <ThemeContext.Provider value={contextValue}>
       <TranslationsProvider
         {...{
           fallback,

package/src/components/Toolbar/Toolbar.tsx

@@ -2,6 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
+import type { ToggleGroupItemProps as ToggleGroupItemPrimitiveProps } from '@radix-ui/react-toggle-group';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import React, { forwardRef } from 'react';
 
@@ -15,6 +16,8 @@ import {
   Toggle,
   type ToggleGroupItemProps,
   type ToggleProps,
+  IconButton,
+  type IconButtonProps,
 } from '../Buttons';
 import { Link, type LinkProps } from '../Link';
 import { Separator, type SeparatorProps } from '../Separator';
@@ -40,6 +43,16 @@ const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>((props,
   );
 });
 
+type ToolbarIconButtonProps = IconButtonProps;
+
+const ToolbarIconButton = forwardRef<HTMLButtonElement, ToolbarIconButtonProps>((props, forwardedRef) => {
+  return (
+    <ToolbarPrimitive.Button asChild>
+      <IconButton {...props} ref={forwardedRef} />
+    </ToolbarPrimitive.Button>
+  );
+});
+
 type ToolbarToggleProps = ToggleProps;
 
 const ToolbarToggle = forwardRef<HTMLButtonElement, ToolbarToggleProps>((props, forwardedRef) => {
@@ -88,35 +101,52 @@ const ToolbarToggleGroupItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupI
   },
 );
 
-type ToolbarSeparatorProps = SeparatorProps;
+type ToolbarToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
 
-const ToolbarSeparator = (props: SeparatorProps) => {
-  return (
-    <ToolbarPrimitive.Separator asChild>
-      <Separator orientation='vertical' {...props} />
-    </ToolbarPrimitive.Separator>
-  );
-};
+const ToolbarToggleGroupIconItem = forwardRef<HTMLButtonElement, ToolbarToggleGroupIconItemProps>(
+  ({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
+    return (
+      <ToolbarPrimitive.ToolbarToggleItem {...props} asChild>
+        <IconButton {...{ variant, density, elevation, classNames, icon, label, iconOnly }} ref={forwardedRef} />
+      </ToolbarPrimitive.ToolbarToggleItem>
+    );
+  },
+);
+
+type ToolbarSeparatorProps = SeparatorProps & { variant?: 'gap' | 'line' };
 
-const ToolbarExpander = () => <div className={'grow'} />;
+const ToolbarSeparator = forwardRef<HTMLDivElement, ToolbarSeparatorProps>(
+  ({ variant = 'line', ...props }, forwardedRef) => {
+    return variant === 'line' ? (
+      <ToolbarPrimitive.Separator asChild>
+        <Separator {...props} ref={forwardedRef} />
+      </ToolbarPrimitive.Separator>
+    ) : (
+      <ToolbarPrimitive.Separator className='grow' ref={forwardedRef} />
+    );
+  },
+);
 
 export const Toolbar = {
   Root: ToolbarRoot,
   Button: ToolbarButton,
+  IconButton: ToolbarIconButton,
   Link: ToolbarLink,
   Toggle: ToolbarToggle,
   ToggleGroup: ToolbarToggleGroup,
   ToggleGroupItem: ToolbarToggleGroupItem,
+  ToggleGroupIconItem: ToolbarToggleGroupIconItem,
   Separator: ToolbarSeparator,
-  Expander: ToolbarExpander,
 };
 
 export type {
   ToolbarRootProps,
   ToolbarButtonProps,
+  ToolbarIconButtonProps,
   ToolbarLinkProps,
   ToolbarToggleProps,
   ToolbarToggleGroupProps,
   ToolbarToggleGroupItemProps,
+  ToolbarToggleGroupIconItemProps,
   ToolbarSeparatorProps,
 };