@dxos/react-ui 0.9.0 → 0.9.1-staging.ee54ba693a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.9.0",
+  "version": "0.9.1-staging.ee54ba693a",
   "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",
@@ -85,17 +85,18 @@
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/async": "0.9.0",
-    "@dxos/invariant": "0.9.0",
-    "@dxos/lit-ui": "0.9.0",
-    "@dxos/react-error-boundary": "0.9.0",
-    "@dxos/log": "0.9.0",
-    "@dxos/react-hooks": "0.9.0",
-    "@dxos/debug": "0.9.0",
-    "@dxos/react-input": "0.9.0",
-    "@dxos/ui-types": "0.9.0",
-    "@dxos/react-list": "0.9.0",
-    "@dxos/util": "0.9.0"
+    "@dxos/debug": "0.9.1-staging.ee54ba693a",
+    "@dxos/i18n": "0.9.1-staging.ee54ba693a",
+    "@dxos/invariant": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-error-boundary": "0.9.1-staging.ee54ba693a",
+    "@dxos/async": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/lit-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-hooks": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-input": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-types": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-list": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -103,20 +104,20 @@
     "@dnd-kit/utilities": "^3.2.0",
     "@phosphor-icons/react": "2.1.10",
     "@tanstack/react-virtual": "^3.13.18",
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "tabster": "^8.5.5",
     "vite": "^8.0.16",
-    "@dxos/random": "0.9.0",
-    "@dxos/ui-theme": "0.9.0",
-    "@dxos/util": "0.9.0"
+    "@dxos/random": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.9.0"
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

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

@@ -11,7 +11,7 @@ import { hexToFallback } from '@dxos/util';
 import { withTheme } from '../../testing';
 import { Avatar, type AvatarAnimation, type AvatarStatus, type AvatarVariant } from './Avatar';
 
-type DefaultStoryProps = PropsWithChildren<{
+type StoryArgs = PropsWithChildren<{
   id?: string;
   imgSrc?: string;
   fallbackText?: string;
@@ -24,7 +24,7 @@ type DefaultStoryProps = PropsWithChildren<{
   hue?: ChromaticPalette;
 }>;
 
-const DefaultStory = (props: DefaultStoryProps) => {
+const DefaultStory = (props: StoryArgs) => {
   const {
     id = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
     status,

package/src/components/Avatars/Avatar.theme.ts

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import { mx, getSize, getHeight } from '@dxos/ui-theme';
+import { getHeight, getSize, mx } from '@dxos/ui-theme';
 import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
 
 export type AvatarStyleProps = Partial<{

package/src/components/Avatars/Avatar.tsx

@@ -101,11 +101,11 @@ export const Avatar = {
 export { useAvatarContext };
 
 export type {
-  AvatarStatus,
-  AvatarVariant,
   AvatarAnimation,
   AvatarContentProps,
-  AvatarLabelProps,
   AvatarDescriptionProps,
+  AvatarLabelProps,
+  AvatarStatus,
+  AvatarVariant,
   NaturalDxAvatar as DxAvatar,
 };

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -4,7 +4,7 @@
 
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, type ComponentPropsWithoutRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, forwardRef } from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
@@ -13,7 +13,7 @@ import { Link, type LinkProps } from '../Link';
 
 type BreadcrumbRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   'aria-label': string;
-  asChild?: boolean;
+  'asChild'?: boolean;
 };
 
 const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
@@ -101,10 +101,10 @@ export const Breadcrumb = {
 };
 
 export type {
-  BreadcrumbRootProps,
-  BreadcrumbListProps,
-  BreadcrumbListItemProps,
-  BreadcrumbLinkProps,
   BreadcrumbCurrentProps,
+  BreadcrumbLinkProps,
+  BreadcrumbListItemProps,
+  BreadcrumbListProps,
+  BreadcrumbRootProps,
   BreadcrumbSeparatorProps,
 };

package/src/components/Button/Button.tsx

@@ -11,12 +11,15 @@ import { type Density, type Elevation } from '@dxos/ui-types';
 
 import { useDensityContext, useElevationContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
+import { Icon } from '../Icon';
 
 type ButtonProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> & {
   variant?: 'default' | 'primary' | 'outline' | 'ghost' | 'destructive' | 'valence';
   density?: Density;
   elevation?: Elevation;
   asChild?: boolean;
+  /** Render a trailing caret indicating the button opens a menu. */
+  caretDown?: boolean;
 };
 
 type ButtonGroupContextValue = { inGroup?: boolean };
@@ -31,7 +34,16 @@ const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupCo
 const Button = memo(
   forwardRef<HTMLButtonElement, ButtonProps>(
     (
-      { classNames, children, density: densityProp, elevation: elevationProp, variant = 'default', asChild, ...props },
+      {
+        classNames,
+        children,
+        density: densityProp,
+        elevation: elevationProp,
+        variant = 'default',
+        asChild,
+        caretDown,
+        ...props
+      },
       ref,
     ) => {
       const { inGroup } = useButtonGroupContext(BUTTON_NAME);
@@ -59,7 +71,16 @@ const Button = memo(
           )}
           {...(props.disabled && { disabled: true })}
         >
-          {children}
+          {/* `asChild` forwards a single child via Slot (React.Children.only); only add the caret in
+              the non-`asChild` case so Slot still receives exactly one child. */}
+          {caretDown && !asChild ? (
+            <>
+              {children}
+              <Icon size={3} icon='ph--caret-down--bold' />
+            </>
+          ) : (
+            children
+          )}
         </Comp>
       );
     },
@@ -88,6 +109,6 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
 
 ButtonGroup.displayName = BUTTON_GROUP_NAME;
 
-export { Button, ButtonGroup, BUTTON_GROUP_NAME, useButtonGroupContext };
+export { Button, BUTTON_GROUP_NAME, ButtonGroup, useButtonGroupContext };
 
-export type { ButtonProps, ButtonGroupProps };
+export type { ButtonGroupProps, ButtonProps };

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

@@ -3,14 +3,16 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
+import React, { type ReactNode, useState } from 'react';
 
 import { type Density } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
+import { translations } from '../../translations';
 import { Tooltip } from '../Tooltip';
 import { Button } from './Button';
 import { IconButton, type IconButtonProps } from './IconButton';
+import { SystemIconButton } from './SystemIconButton';
 
 const DefaultStory = (props: IconButtonProps) => {
   return (
@@ -60,6 +62,76 @@ const DensitiesStory = (props: Omit<IconButtonProps, 'density' | 'size'>) => {
   );
 };
 
+type SystemPresetVariantProps = Partial<Pick<IconButtonProps, 'variant' | 'iconOnly'>>;
+
+const SystemPresetRow = ({
+  name,
+  button,
+}: {
+  name: string;
+  button: (props: SystemPresetVariantProps) => ReactNode;
+}) => (
+  <div className='grid grid-cols-subgrid col-span-full gap-x-8 items-center'>
+    <div className='text-xs font-mono'>{name}</div>
+    <div>{button({})}</div>
+    <div>{button({ variant: 'ghost' })}</div>
+    <div>{button({ variant: 'ghost', iconOnly: true })}</div>
+  </div>
+);
+
+const SystemStory = () => {
+  const [state, setState] = useState<Record<string, boolean>>({});
+
+  return (
+    <Tooltip.Provider>
+      <div className='grid grid-cols-[auto_1fr_1fr_auto] gap-y-3 items-center'>
+        <div className='grid grid-cols-subgrid col-span-full gap-x-8'>
+          <div />
+          <div className='text-xs text-subdued uppercase'>default</div>
+          <div className='text-xs text-subdued uppercase'>ghost</div>
+          <div className='text-xs text-subdued uppercase'>iconOnly</div>
+        </div>
+
+        <SystemPresetRow
+          name='Star'
+          button={(props) => (
+            <SystemIconButton.Star
+              active={state.star}
+              onClick={() => setState((prev) => ({ ...prev, star: !prev.star }))}
+              {...props}
+            />
+          )}
+        />
+        <SystemPresetRow
+          name='Bookmark'
+          button={(props) => (
+            <SystemIconButton.Bookmark
+              active={state.bookmark}
+              onClick={() => setState((prev) => ({ ...prev, bookmark: !prev.bookmark }))}
+              {...props}
+            />
+          )}
+        />
+        <SystemPresetRow
+          name='Expander'
+          button={(props) => (
+            <SystemIconButton.Expander
+              active={state.expander}
+              onClick={() => setState((prev) => ({ ...prev, expander: !prev.expander }))}
+              {...props}
+            />
+          )}
+        />
+        <br />
+        <SystemPresetRow name='Add' button={(props) => <SystemIconButton.Add {...props} />} />
+        <SystemPresetRow name='Delete' button={(props) => <SystemIconButton.Delete {...props} />} />
+        <SystemPresetRow name='Edit' button={(props) => <SystemIconButton.Edit {...props} />} />
+        <SystemPresetRow name='Close' button={(props) => <SystemIconButton.Close {...props} />} />
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
 const meta = {
   title: 'ui/react-ui-core/components/IconButton',
   component: IconButton,
@@ -67,6 +139,7 @@ const meta = {
   decorators: [withTheme()],
   parameters: {
     layout: 'centered',
+    translations,
   },
 } satisfies Meta<typeof IconButton>;
 
@@ -90,3 +163,10 @@ export const Ghost: Story = {
     variant: 'ghost',
   },
 };
+
+export const System: Story = {
+  render: SystemStory,
+  args: {
+    label: 'System',
+  },
+};

package/src/components/Button/IconButton.tsx

@@ -14,9 +14,8 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
   Partial<Pick<IconProps, 'icon' | 'size'>> & {
     label: string;
     noTooltip?: boolean;
-    caretDown?: boolean;
     iconOnly?: boolean;
-    square?: boolean; // TODO(burdon): Handle more uniformly.
+    square?: boolean; // TODO(burdon): Should be automatic in style?
     iconEnd?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipSide?: TooltipSide;
@@ -46,7 +45,7 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (
-    { size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
+    { size, icon, iconOnly, square, iconEnd, iconClassNames, label, noTooltip: _, classNames, ...props },
     forwardedRef,
   ) => {
     const { tx } = useThemeContext();
@@ -55,7 +54,6 @@ const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
         {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
         {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
-        {caretDown && <Icon size={3} icon='ph--caret-down--bold' />}
       </Button>
     );
   },

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

@@ -0,0 +1,60 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withTheme } from '../../testing';
+import { translations } from '../../translations';
+import { Tooltip } from '../Tooltip';
+import { MicButton, type MicButtonProps } from './MicButton';
+
+const DefaultStory = ({ mode = 'toggle', ...props }: MicButtonProps) => {
+  const [recording, setRecording] = useState(false);
+
+  return (
+    <Tooltip.Provider>
+      <MicButton
+        iconOnly
+        variant='ghost'
+        {...props}
+        mode={mode}
+        // `label`/`recording`/handlers are driven by story state so the demo reacts to interaction.
+        label={recording ? 'Stop recording' : mode === 'hold' ? 'Hold to record' : 'Start recording'}
+        recording={recording}
+        onToggle={() => setRecording((value) => !value)}
+        onPressStart={() => setRecording(true)}
+        onPressEnd={() => setRecording(false)}
+      />
+    </Tooltip.Provider>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/MicButton',
+  decorators: [withTheme()],
+  component: MicButton,
+  render: DefaultStory,
+  args: { label: 'Record', mode: 'toggle' },
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof MicButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Toggle: Story = {
+  args: {
+    mode: 'toggle',
+  },
+};
+
+export const Hold: Story = {
+  args: {
+    mode: 'hold',
+  },
+};

package/src/components/Button/MicButton.tsx

@@ -0,0 +1,117 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type KeyboardEvent, type PointerEvent, forwardRef, useCallback, useRef } from 'react';
+
+import { IconButton, type IconButtonProps } from './IconButton';
+
+export type MicButtonMode = 'toggle' | 'hold';
+
+export type MicButtonProps = Omit<IconButtonProps, 'icon' | 'onClick'> & {
+  /** Defaults to a microphone glyph. */
+  icon?: IconButtonProps['icon'];
+  /** `toggle`: click flips recording. `hold`: records only while held (push-to-talk). */
+  mode?: MicButtonMode;
+  /** Whether recording is active; drives the active (recording) styling. */
+  recording?: boolean;
+  /** Fired in `toggle` mode on click. */
+  onToggle?: () => void;
+  /** Fired in `hold` mode when the press begins. */
+  onPressStart?: () => void;
+  /** Fired in `hold` mode when the press ends (release, cancel, or lost capture). */
+  onPressEnd?: () => void;
+};
+
+/**
+ * Microphone record button. In `toggle` mode a click flips recording; in `hold` mode recording is
+ * active only while the button is held (push-to-talk), using pointer capture so the release still
+ * fires if the pointer leaves the button. Presentational — the caller owns recording state.
+ */
+export const MicButton = forwardRef<HTMLButtonElement, MicButtonProps>(
+  (
+    {
+      classNames,
+      icon = 'ph--microphone--regular',
+      mode = 'toggle',
+      recording,
+      onToggle,
+      onPressStart,
+      onPressEnd,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    // A press spans pointer down→up (or key down→up). The guard makes start/end fire exactly once
+    // even though release surfaces as both `pointerup` and `lostpointercapture`.
+    const pressedRef = useRef(false);
+    const beginPress = useCallback(() => {
+      if (!pressedRef.current) {
+        pressedRef.current = true;
+        onPressStart?.();
+      }
+    }, [onPressStart]);
+
+    const endPress = useCallback(() => {
+      if (pressedRef.current) {
+        pressedRef.current = false;
+        onPressEnd?.();
+      }
+    }, [onPressEnd]);
+    const handlePointerDown = useCallback(
+      (event: PointerEvent<HTMLButtonElement>) => {
+        // Capture so the matching release fires on this button even if the pointer leaves it.
+        event.currentTarget.setPointerCapture(event.pointerId);
+        beginPress();
+      },
+      [beginPress],
+    );
+    const handleKeyDown = useCallback(
+      (event: KeyboardEvent<HTMLButtonElement>) => {
+        // Keyboard push-to-talk: hold Space/Enter to record. Ignore auto-repeat.
+        if ((event.key === ' ' || event.key === 'Enter') && !event.repeat) {
+          event.preventDefault();
+          beginPress();
+        }
+      },
+      [beginPress],
+    );
+    const handleKeyUp = useCallback(
+      (event: KeyboardEvent<HTMLButtonElement>) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+          event.preventDefault();
+          endPress();
+        }
+      },
+      [endPress],
+    );
+
+    // Highlight with the error (rose) tone while recording.
+    const recordingClassNames = recording ? 'bg-error-surface' : undefined;
+    const holdHandlers =
+      mode === 'hold'
+        ? {
+            onPointerDown: handlePointerDown,
+            onPointerUp: endPress,
+            onPointerCancel: endPress,
+            onLostPointerCapture: endPress,
+            onKeyDown: handleKeyDown,
+            onKeyUp: handleKeyUp,
+            // Releasing focus mid-hold (e.g. tabbing away) must still end the press.
+            onBlur: endPress,
+          }
+        : {
+            onClick: onToggle,
+          };
+
+    return (
+      <IconButton
+        {...props}
+        {...holdHandlers}
+        classNames={[recordingClassNames, classNames]}
+        icon={icon}
+        ref={forwardedRef}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,91 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withTheme } from '../../testing';
+import { translations } from '../../translations';
+import { Toolbar } from '../Toolbar';
+import { Tooltip } from '../Tooltip';
+import { SystemIconButton } from './SystemIconButton';
+
+const iconOnly = { iconOnly: true, variant: 'ghost' as const };
+
+const ToolbarStory = () => {
+  const [state, setState] = useState({ star: false, bookmark: false, expander: false });
+
+  return (
+    <Tooltip.Provider>
+      <Toolbar.Root>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Star
+            {...iconOnly}
+            active={state.star}
+            onClick={() => setState((prev) => ({ ...prev, star: !prev.star }))}
+          />
+        </Toolbar.Button>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Bookmark
+            {...iconOnly}
+            active={state.bookmark}
+            onClick={() => setState((prev) => ({ ...prev, bookmark: !prev.bookmark }))}
+          />
+        </Toolbar.Button>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Expander
+            {...iconOnly}
+            active={state.expander}
+            onClick={() => setState((prev) => ({ ...prev, expander: !prev.expander }))}
+          />
+        </Toolbar.Button>
+        <Toolbar.Separator variant='line' />
+        <Toolbar.Button asChild>
+          <SystemIconButton.Add {...iconOnly} />
+        </Toolbar.Button>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Edit {...iconOnly} />
+        </Toolbar.Button>
+        <Toolbar.Button asChild>
+          <SystemIconButton.Delete {...iconOnly} />
+        </Toolbar.Button>
+        <Toolbar.Separator variant='line' />
+        <Toolbar.Button asChild>
+          <SystemIconButton.Clipboard {...iconOnly} onCopy={() => 'Copied from toolbar'} />
+        </Toolbar.Button>
+        <SystemIconButton.Upload {...iconOnly} accept='*/*' />
+        <Toolbar.Button asChild>
+          <SystemIconButton.Download
+            {...iconOnly}
+            filename='example.txt'
+            onDownload={() => new Blob(['Hello from SystemIconButton'])}
+          />
+        </Toolbar.Button>
+        <Toolbar.Separator variant='line' />
+        <Toolbar.Button asChild>
+          <SystemIconButton.Close {...iconOnly} />
+        </Toolbar.Button>
+      </Toolbar.Root>
+    </Tooltip.Provider>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/SystemIconButton',
+  component: SystemIconButton.Add,
+  render: ToolbarStory,
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+    translations,
+  },
+} satisfies Meta<typeof SystemIconButton.Add>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};