@dxos/react-ui 0.7.4 → 0.7.5-labs.071a3e2

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;
@@ -41,7 +43,6 @@ export const ThemeProvider = ({
   tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName,
   themeMode = 'dark',
   rootDensity = 'fine',
-  rootElevation = 'base',
   ...rest
 }: ThemeProviderProps) => {
   useEffect(() => {
@@ -52,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,
@@ -61,7 +69,7 @@ export const ThemeProvider = ({
           appNs,
         }}
       >
-        <ElevationProvider elevation={rootElevation}>
+        <ElevationProvider elevation='base'>
           <DensityProvider density={rootDensity}>{children}</DensityProvider>
         </ElevationProvider>
       </TranslationsProvider>

package/src/components/Toast/Toast.tsx

@@ -45,7 +45,7 @@ const ToastRoot = forwardRef<HTMLLIElement, ToastRootProps>(({ classNames, child
   const { tx } = useThemeContext();
   return (
     <ToastRootPrimitive {...props} className={tx('toast.root', 'toast', {}, classNames)} ref={forwardedRef}>
-      <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      <ElevationProvider elevation='toast'>{children}</ElevationProvider>
     </ToastRootPrimitive>
   );
 });

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.stories.tsx

@@ -12,11 +12,12 @@ import { Button } from '../Buttons';
 
 type StoryTooltipProps = {
   content: string;
+  defaultOpen?: boolean;
 };
 
-const StoryTooltip = ({ content }: StoryTooltipProps) => (
+const StoryTooltip = ({ content, defaultOpen }: StoryTooltipProps) => (
   <Tooltip.Provider>
-    <Tooltip.Root defaultOpen>
+    <Tooltip.Root defaultOpen={defaultOpen}>
       <Tooltip.Trigger asChild>
         <Button>Trigger tooltip</Button>
       </Tooltip.Trigger>
@@ -44,3 +45,13 @@ export const Default = {
     chromatic: { delay: 500 },
   },
 };
+
+export const Testing = {
+  args: {
+    defaultOption: true,
+    content: 'This is the tooltip content',
+  },
+  parameters: {
+    chromatic: { delay: 500 },
+  },
+};

package/src/components/Tooltip/Tooltip.tsx

@@ -18,7 +18,8 @@ import {
 } from '@radix-ui/react-tooltip';
 import React, { forwardRef, type FunctionComponent } from 'react';
 
-import { useThemeContext } from '../../hooks';
+import { useElevationContext, useThemeContext } from '../../hooks';
+import { useSafeCollisionPadding } from '../../hooks/useSafeCollisionPadding';
 import { type ThemedClassName } from '../../util';
 
 type TooltipProviderProps = TooltipProviderPrimitiveProps;
@@ -52,18 +53,22 @@ const TooltipArrow = forwardRef<SVGSVGElement, TooltipArrowProps>(({ classNames,
 
 type TooltipContentProps = ThemedClassName<TooltipContentPrimitiveProps>;
 
-const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(({ classNames, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <TooltipContentPrimitive
-      sideOffset={4}
-      collisionPadding={8}
-      {...props}
-      className={tx('tooltip.content', 'tooltip', {}, 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 };
 };

package/src/testing/decorators/withVariants.tsx

@@ -7,7 +7,7 @@ import '@dxos-theme';
 import { type Decorator } from '@storybook/react';
 import React from 'react';
 
-import { modalSurface, groupSurface, mx, surfaceElevation } from '@dxos/react-ui-theme';
+import { modalSurface, groupSurface, mx, surfaceShadow } from '@dxos/react-ui-theme';
 import { type Density, type Elevation } from '@dxos/react-ui-types';
 
 import { DensityProvider, ElevationProvider } from '../../components';
@@ -20,8 +20,8 @@ type Config = {
 export const withVariants = ({
   elevations = [
     { elevation: 'base' },
-    { elevation: 'group', surface: groupSurface },
-    { elevation: 'chrome', surface: modalSurface },
+    { elevation: 'positioned', surface: groupSurface },
+    { elevation: 'dialog', surface: modalSurface },
   ],
   densities = ['coarse', 'fine'],
 }: Config = {}): Decorator => {
@@ -32,7 +32,7 @@ export const withVariants = ({
           <div className='flex flex-col gap-8'>
             {densities.map((density) => (
               <DensityProvider key={density} density={density}>
-                <div className={mx('p-4 rounded-lg', surface, surfaceElevation({ elevation }))}>
+                <div className={mx('p-4 rounded-lg', surface, surfaceShadow({ elevation }))}>
                   <Story />
                 </div>
               </DensityProvider>

package/src/util/ThemedClassName.ts

@@ -4,4 +4,4 @@
 
 import { type ClassNameValue } from '@dxos/react-ui-types';
 
-export type ThemedClassName<P> = Omit<P, 'className'> & { classNames?: ClassNameValue };
+export type ThemedClassName<P = {}> = Omit<P, 'className'> & { classNames?: ClassNameValue };

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

@@ -1,21 +0,0 @@
-import '@dxos-theme';
-import React, { type PropsWithChildren } from 'react';
-type SurfaceLevel = 'base' | 'group' | 'chrome' | 'fixed' | 'input' | 'accent';
-declare const _default: {
-    title: string;
-    component: ({ children, level }: PropsWithChildren & {
-        level: SurfaceLevel;
-    }) => React.JSX.Element;
-    render: () => React.JSX.Element;
-    decorators: import("@storybook/react/*").Decorator[];
-    parameters: {
-        chromatic: {
-            disableSnapshot: boolean;
-        };
-    };
-};
-export default _default;
-export declare const Default: {
-    args: {};
-};
-//# sourceMappingURL=Surfaces.stories.d.ts.map

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

@@ -1 +0,0 @@
-{"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/src/playground/Surfaces.stories.tsx

@@ -1,73 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import React, { type PropsWithChildren } from 'react';
-
-import {
-  baseSurface,
-  modalSurface,
-  groupSurface,
-  mx,
-  surfaceElevation,
-  fixedSurface,
-  fixedBorder,
-  attentionSurface,
-  accentSurface,
-} from '@dxos/react-ui-theme';
-
-import { withTheme } from '../testing';
-
-type SurfaceLevel = 'base' | 'group' | 'chrome' | 'fixed' | 'input' | 'accent';
-
-const Surface = ({ children, level }: PropsWithChildren & { level: SurfaceLevel }) => {
-  const surface =
-    level === 'chrome'
-      ? [modalSurface, surfaceElevation({ elevation: 'chrome' })]
-      : level === 'group'
-        ? [groupSurface, surfaceElevation({ elevation: 'group' })]
-        : level === 'input'
-          ? [attentionSurface, surfaceElevation({ elevation: 'group' })]
-          : level === 'fixed'
-            ? [fixedSurface, fixedBorder, 'border', surfaceElevation({ elevation: 'chrome' })]
-            : level === 'accent'
-              ? [accentSurface, surfaceElevation({ elevation: 'chrome' })]
-              : [baseSurface];
-
-  return (
-    <div
-      role='region'
-      className={mx('flex justify-center items-center m-8 p-2 w-[320px] h-[160px] rounded-lg', ...surface)}
-    >
-      <div>{level}</div>
-      {children}
-    </div>
-  );
-};
-
-const SurfaceStory = () => {
-  return (
-    <div className='bg-cubes p-10 m-0'>
-      <Surface level='fixed' />
-      <Surface level='base' />
-      <Surface level='group' />
-      <Surface level='chrome' />
-      <Surface level='input' />
-      <Surface level='accent' />
-    </div>
-  );
-};
-
-export default {
-  title: 'ui/react-ui-core/Playground/Surfaces',
-  component: Surface,
-  render: SurfaceStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
-};
-
-export const Default = {
-  args: {},
-};