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

package/src/components/Tag/Tag.stories.tsx

@@ -1,46 +1,35 @@
 //
 // Copyright 2022 DXOS.org
 //
+import React from 'react';
 
+import { hueTokenThemes } from '@dxos/react-ui-theme';
 import '@dxos-theme';
+import { type ChromaticPalette, type MessageValence } from '@dxos/react-ui-types';
 
 import { Tag } from './Tag';
 import { withTheme } from '../../testing';
 
+const palettes = ['neutral', 'success', 'info', 'warning', 'error', ...Object.keys(hueTokenThemes)] as (
+  | ChromaticPalette
+  | MessageValence
+)[];
+
 export default {
   title: 'ui/react-ui-core/Tag',
   component: Tag,
   decorators: [withTheme],
   parameters: { chromatic: { disableSnapshot: false } },
-  argTypes: {
-    palette: {
-      control: 'select',
-      options: [
-        'neutral',
-        'success',
-        'info',
-        'warning',
-        'error',
-        'red',
-        'orange',
-        'amber',
-        'yellow',
-        'lime',
-        'green',
-        'emerald',
-        'teal',
-        'cyan',
-        'sky',
-        'blue',
-        'indigo',
-        'violet',
-        'purple',
-        'fuchsia',
-        'pink',
-        'rose',
-      ],
-    },
-  },
-} as any;
+} as const;
 
-export const Default = { args: { children: 'Hello', palette: 'success' } };
+export const Default = {
+  render: () => (
+    <div role='grid' className='grid grid-cols-5 gap-2 max-is-screen-md'>
+      {palettes.map((palette) => (
+        <Tag key={palette} palette={palette}>
+          {palette}
+        </Tag>
+      ))}
+    </div>
+  ),
+};

package/src/components/Tag/Tag.tsx

@@ -1,5 +1,5 @@
 //
-// Copyright 2022 DXOS.org
+// Copyright 2025 DXOS.org
 //
 
 import { Primitive } from '@radix-ui/react-primitive';
@@ -16,8 +16,17 @@ export type TagProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.sp
   asChild?: boolean;
 };
 
-export const Tag = forwardRef<HTMLSpanElement, TagProps>(({ asChild, palette, classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const Root = asChild ? Slot : Primitive.span;
-  return <Root {...props} className={tx('tag.root', 'tag', { palette }, classNames)} ref={forwardedRef} />;
-});
+export const Tag = forwardRef<HTMLSpanElement, TagProps>(
+  ({ asChild, palette = 'neutral', classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.span;
+    return (
+      <Root
+        {...props}
+        className={tx('tag.root', 'dx-tag', { palette }, classNames)}
+        data-hue={palette}
+        ref={forwardedRef}
+      />
+    );
+  },
+);

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,
 };

package/src/components/Tooltip/Tooltip.tsx

@@ -19,6 +19,7 @@ import {
 import React, { forwardRef, type FunctionComponent } from 'react';
 
 import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 type TooltipProviderProps = TooltipProviderPrimitiveProps;
@@ -52,19 +53,22 @@ const TooltipArrow = forwardRef<SVGSVGElement, TooltipArrowProps>(({ classNames,
 
 type TooltipContentProps = ThemedClassName<TooltipContentPrimitiveProps>;
 
-const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  const elevation = useElevationContext();
-  return (
-    <TooltipContentPrimitive
-      sideOffset={4}
-      collisionPadding={8}
-      {...props}
-      className={tx('tooltip.content', 'tooltip', { elevation }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
+const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
+  ({ classNames, collisionPadding = 8, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const elevation = useElevationContext();
+    const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+    return (
+      <TooltipContentPrimitive
+        sideOffset={4}
+        {...props}
+        collisionPadding={safeCollisionPadding}
+        className={tx('tooltip.content', 'tooltip', { elevation }, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
 
 export const Tooltip = {
   Provider: TooltipProvider,

package/src/hooks/index.ts

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

package/src/hooks/useSafeArea.ts

@@ -0,0 +1,25 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useCallback, useState } from 'react';
+
+import { useResize } from '@dxos/react-hooks';
+
+export type SafeAreaPadding = Record<'top' | 'right' | 'bottom' | 'left', number>;
+
+export const initialSafeArea = { top: NaN, right: NaN, bottom: NaN, left: NaN };
+
+export const useSafeArea = (): SafeAreaPadding => {
+  const [padding, setPadding] = useState<SafeAreaPadding>(initialSafeArea);
+  const handleResize = useCallback(() => {
+    setPadding({
+      top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top')),
+      right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-right')),
+      bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-bottom')),
+      left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-left')),
+    });
+  }, []);
+  useResize(handleResize);
+  return padding;
+};

package/src/hooks/useSafeCollisionPadding.ts

@@ -0,0 +1,39 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type TooltipContentProps } from '@radix-ui/react-tooltip';
+import { useMemo } from 'react';
+
+import { type SafeAreaPadding } from './useSafeArea';
+import { useThemeContext } from './useThemeContext';
+
+type PaddingProp = TooltipContentProps['collisionPadding'];
+type PaddingRecord = Exclude<PaddingProp, number | undefined>;
+
+const propIsNumber = (prop: PaddingProp): prop is number => Number.isFinite(prop);
+const propsIsRecord = (prop: PaddingProp): prop is PaddingRecord => !!(prop && typeof prop === 'object');
+
+const safePadding = (
+  propsPadding: TooltipContentProps['collisionPadding'],
+  safePadding: SafeAreaPadding,
+  side: keyof SafeAreaPadding,
+) => {
+  return (
+    (propIsNumber(safePadding[side]) ? safePadding[side] : 0) +
+    (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0)
+  );
+};
+
+export const useSafeCollisionPadding = (collisionPadding?: PaddingProp) => {
+  const { safeAreaPadding } = useThemeContext();
+  return useMemo(
+    () => ({
+      top: safePadding(collisionPadding, safeAreaPadding!, 'top'),
+      right: safePadding(collisionPadding, safeAreaPadding!, 'right'),
+      bottom: safePadding(collisionPadding, safeAreaPadding!, 'bottom'),
+      left: safePadding(collisionPadding, safeAreaPadding!, 'left'),
+    }),
+    [collisionPadding, safeAreaPadding],
+  );
+};

package/src/hooks/useVisualViewport.ts

@@ -2,23 +2,22 @@
 // Copyright 2023 DXOS.org
 //
 
-import { useEffect, useState } from 'react';
+import { useCallback, type useEffect, useState } from 'react';
+
+import { useResize } from '@dxos/react-hooks';
 
 export const useVisualViewport = (deps?: Parameters<typeof useEffect>[1]) => {
   const [width, setWidth] = useState<number | null>(null);
   const [height, setHeight] = useState<number | null>(null);
 
-  useEffect(() => {
-    const handleResize = () => {
-      if (window.visualViewport) {
-        setWidth(window.visualViewport.width);
-        setHeight(window.visualViewport.height);
-      }
-    };
-    window.visualViewport?.addEventListener('resize', handleResize);
-    handleResize();
-    return () => window.visualViewport?.removeEventListener('resize', handleResize);
-  }, deps ?? []);
+  const handleResize = useCallback(() => {
+    if (window.visualViewport) {
+      setWidth(window.visualViewport.width);
+      setHeight(window.visualViewport.height);
+    }
+  }, []);
+
+  useResize(handleResize);
 
   return { width, height };
 };