@dxos/react-ui 0.8.4-main.d05539e30a → 0.8.4-main.d9fc60f731

package/src/components/Dialog/Dialog.tsx

@@ -14,14 +14,15 @@ import React, {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { composableProps, type DialogSize, osTranslations, slottable } from '@dxos/ui-theme';
+import { osTranslations } from '@dxos/ui-theme';
 import { type SlottableProps } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
-import { Column } from '../../primitives';
-import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../../primitives';
+import { type DialogSize } from '../../theme';
+import { type ThemedClassName, composableProps, slottable } from '../../util';
 import { IconButton } from '../Button';
-import { ElevationProvider } from '../ElevationProvider';
+import { Column } from '../Column';
 
 //
 // Root
@@ -40,13 +41,15 @@ const DialogRoot: FunctionComponent<DialogRootProps> = (props) => (
   </ElevationProvider>
 );
 
+DialogRoot.displayName = 'Dialog.Root';
+
 //
 // Trigger
 //
 
 type DialogTriggerProps = DialogPrimitive.DialogTriggerProps;
 
-const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogPrimitive.Trigger;
+const DialogTrigger = DialogPrimitive.Trigger;
 
 //
 // Portal
@@ -54,13 +57,13 @@ const DialogTrigger: FunctionComponent<DialogTriggerProps> = DialogPrimitive.Tri
 
 type DialogPortalProps = DialogPrimitive.DialogPortalProps;
 
-const DialogPortal: FunctionComponent<DialogPortalProps> = DialogPrimitive.Portal;
+const DialogPortal = DialogPrimitive.Portal;
 
 //
 // Overlay
 //
 
-const DIALOG_OVERLAY_NAME = 'DialogOverlay';
+const DIALOG_OVERLAY_NAME = 'Dialog.Overlay';
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 
@@ -96,7 +99,7 @@ DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
 // Content
 //
 
-const DIALOG_CONTENT_NAME = 'DialogContent';
+const DIALOG_CONTENT_NAME = 'Dialog.Content';
 
 type DialogContentProps = ThemedClassName<ComponentPropsWithRef<typeof DialogPrimitive.Content>> & {
   size?: DialogSize;
@@ -151,20 +154,35 @@ const DialogHeader = slottable<HTMLDivElement>(({ children, asChild, ...props },
   );
 });
 
+DialogHeader.displayName = 'Dialog.Header';
+
 //
-// CloseIconButton
+// ActionIconButton
 //
 
-type DialogCloseIconButtonProps = { label?: string };
+type DialogActionIconButtonAction = 'close' | 'delete';
+
+type DialogActionIconButtonProps = { action: DialogActionIconButtonAction; label?: string };
+
+const DIALOG_ACTION_ICONS: Record<DialogActionIconButtonAction, string> = {
+  close: 'ph--x--regular',
+  delete: 'ph--trash--regular',
+};
+
+const DIALOG_ACTION_LABEL_KEYS: Record<DialogActionIconButtonAction, string> = {
+  // Preserves the legacy `close-dialog.label` translation key for backward compat.
+  close: 'close-dialog.label',
+  delete: 'toolbar-delete.label',
+};
 
-const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButtonProps>(
-  ({ label, ...props }, forwardedRef) => {
+const DialogActionIconButton = forwardRef<HTMLButtonElement, DialogActionIconButtonProps>(
+  ({ action, label, ...props }, forwardedRef) => {
     const { t } = useTranslation(osTranslations);
     return (
       <IconButton
         {...props}
-        label={label ?? t('close-dialog.label')}
-        icon='ph--x--regular'
+        label={label ?? t(DIALOG_ACTION_LABEL_KEYS[action])}
+        icon={DIALOG_ACTION_ICONS[action]}
         iconOnly
         size={4}
         variant='ghost'
@@ -174,6 +192,8 @@ const DialogCloseIconButton = forwardRef<HTMLButtonElement, DialogCloseIconButto
   },
 );
 
+DialogActionIconButton.displayName = 'Dialog.ActionIconButton';
+
 //
 // Body
 //
@@ -191,6 +211,8 @@ const DialogBody = slottable<HTMLDivElement>(({ children, asChild, ...props }, f
   );
 });
 
+DialogBody.displayName = 'Dialog.Body';
+
 //
 // Title
 //
@@ -206,6 +228,8 @@ const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
   },
 );
 
+DialogTitle.displayName = 'Dialog.Title';
+
 //
 // Description
 //
@@ -225,6 +249,8 @@ const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProp
   },
 );
 
+DialogDescription.displayName = 'Dialog.Description';
+
 //
 // ActionBar
 //
@@ -242,13 +268,15 @@ const DialogActionBar = slottable<HTMLDivElement>(({ children, asChild, ...props
   );
 });
 
+DialogActionBar.displayName = 'Dialog.ActionBar';
+
 //
 // Close
 //
 
 type DialogCloseProps = DialogPrimitive.DialogCloseProps;
 
-const DialogClose: FunctionComponent<DialogCloseProps> = DialogPrimitive.Close;
+const DialogClose = DialogPrimitive.Close;
 
 //
 // Dialog
@@ -266,7 +294,7 @@ export const Dialog = {
   Description: DialogDescription,
   ActionBar: DialogActionBar,
   Close: DialogClose,
-  CloseIconButton: DialogCloseIconButton,
+  ActionIconButton: DialogActionIconButton,
 };
 
 export type {
@@ -281,5 +309,6 @@ export type {
   DialogDescriptionProps,
   DialogActionBarProps,
   DialogCloseProps,
-  DialogCloseIconButtonProps,
+  DialogActionIconButtonAction,
+  DialogActionIconButtonProps,
 };

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -7,6 +7,10 @@ import { type FallbackProps } from 'react-error-boundary';
 
 import { safeStringify } from '@dxos/util';
 
+import { translationKey } from '#translations';
+
+import { useTranslation } from '../../primitives';
+import { IconButton } from '../Button';
 import { ErrorStack } from './ErrorStack';
 
 export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'> & { title?: string; data?: any }>;
@@ -15,6 +19,7 @@ export type ErrorFallbackProps = PropsWithChildren<Pick<FallbackProps, 'error'>
  * Themed fallback component for `ErrorBoundary`.
  */
 export const ErrorFallback = ({ children, error, title, data }: ErrorFallbackProps) => {
+  const { t } = useTranslation(translationKey);
   const isDev = process.env.NODE_ENV === 'development';
   const message = error instanceof Error ? error.message : String(error);
 
@@ -55,14 +60,15 @@ const Section = ({ children, title, onClick }: PropsWithChildren<{ title?: strin
   return (
     <div className='flex flex-col gap-1'>
       {onClick && (
-        <button
-          type='button'
-          onClick={onClick}
-          className='flex items-center gap-1 text-xs text-subdued hover:text-primary-500 transition-colors'
-          title={`Copy ${title}`}
-        >
-          <h2 className='text-xs uppercase text-subdued'>{title}</h2>
-        </button>
+        <div>
+          <IconButton
+            classNames='text-xs uppercase'
+            label={title ?? 'Copy'}
+            icon='ph--clipboard-text--regular'
+            size={5}
+            onClick={onClick}
+          />
+        </div>
       )}
       {children}
     </div>

package/src/components/ErrorFallback/ErrorStack.tsx

@@ -56,7 +56,7 @@ export const ErrorStack = ({ error, frames: framesProp }: ErrorStackProps) => {
         const local = frame.fileName
           ? parseLocalFrame(frame.fileName, frame.lineNumber, frame.columnNumber)
           : undefined;
-        const name = frame.functionName ?? '<anonymous>';
+        const functionName = frame.functionName ?? '<anonymous>';
         return (
           <div
             key={i}
@@ -75,14 +75,15 @@ export const ErrorStack = ({ error, frames: framesProp }: ErrorStackProps) => {
               />
               <div className='absolute top-1/2 -translate-y-1/2 left-1/2 right-0 h-px bg-neutral-500' />
             </div>
+
             {local ? (
               <a href={local.href} className='truncate self-center'>
-                {name}
+                {functionName}
               </a>
             ) : (
-              <span className='text-subdued truncate self-center'>{name}</span>
+              <span className='text-subdued truncate self-center'>{functionName}</span>
             )}
-            <span className='text-xs text-subdued truncate self-center'>{local?.fileName ?? ''}</span>
+            <span className='text-xs text-subdued truncate self-center truncate'>{local?.fileName ?? ''}</span>
             <span className='text-xs text-subdued text-right self-center'>
               {local ? `${frame.lineNumber}:${frame.columnNumber}` : ''}
             </span>
@@ -103,10 +104,15 @@ const parseLocalFrame = (fileUrl: string, line?: number, col?: number): LocalFra
     if (!pathname.startsWith('/@fs/')) {
       return undefined;
     }
-    const localPath = pathname.slice(4); // /@fs/Users/... → /Users/...
+
+    const FILE_PREFIX = '/@fs';
+    const localPath = pathname.slice(FILE_PREFIX.length); // /@fs/Users/... → /Users/...
+    const PKG_PREFIX = '/packages/';
+    const i = localPath.indexOf(PKG_PREFIX);
+    const path = i === -1 ? localPath : localPath.substring(i + PKG_PREFIX.length);
     return {
       href: `vscode://file/${localPath}:${line ?? 1}:${col ?? 1}`,
-      fileName: pathname.split('/').pop() ?? localPath,
+      fileName: path,
     };
   } catch {
     return undefined;

package/src/components/Focus/Focus.theme.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type FocusStyleProps = {
+  border?: boolean;
+};
+
+/**
+ * Focus ring styles shared by Focus.Group and Focus.Item.
+ * Uses a `::after` pseudo-element overlay so the ring paints above child content
+ * (inset box-shadow alone is obscured by children with backgrounds).
+ * The pseudo-element is `pointer-events-none` and absolutely positioned over the element.
+ * When `border` is true, a subdued CSS border is always visible (e.g., for grid cell edges).
+ */
+const ring: ComponentFunction<FocusStyleProps> = ({ border }, ...etc) =>
+  mx(
+    'dx-ring-pseudo outline-hidden',
+    'focus:after:ring-focus-ring-subtle',
+    'data-[focus-state=active]:after:ring-focus-ring-subtle',
+    'data-[focus-state=error]:after:ring-rose-500',
+    border && 'border border-separator',
+    ...etc,
+  );
+
+export const focusTheme: Theme<FocusStyleProps> = {
+  group: ring,
+  item: ring,
+};

package/src/components/Focus/Focus.tsx

@@ -21,10 +21,10 @@ import React, {
   useState,
 } from 'react';
 
-import { composableProps, slottable } from '@dxos/ui-theme';
 import { type Axis } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
+import { composableProps, slottable } from '../../util';
 
 //
 // Context

package/src/components/Icon/Icon.theme.ts

@@ -0,0 +1,45 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { getSize, mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
+
+export type IconStyleProps = {
+  size?: Size;
+};
+
+export type IconBlockStyleProps = {
+  compact?: boolean;
+  /** Constrain to a square (1:1) slot rather than the default rail-item width. */
+  square?: boolean;
+};
+
+/**
+ * Size can be specified directly, or inherited from a container (e.g., toolbar).
+ */
+const root: ComponentFunction<IconStyleProps> = ({ size }, etc) => {
+  return mx(
+    'shrink-0 text-[var(--icons-color,currentColor)]',
+    size
+      ? getSize(size)
+      : '[width:var(--icon-size,var(--dx-default-icons-size))] [height:var(--icon-size,var(--dx-default-icons-size))]',
+    etc,
+  );
+};
+
+/**
+ * Static slot sized to `--dx-rail-item` so a wrapped `Icon` lines up with an `IconButton iconOnly`.
+ */
+const block: ComponentFunction<IconBlockStyleProps> = ({ compact, square }, ...etc) =>
+  mx(
+    'grid place-items-center',
+    square ? 'aspect-square' : 'w-[var(--dx-rail-item)]',
+    compact ? '' : 'h-[var(--dx-rail-item)]',
+    ...etc,
+  );
+
+export const iconTheme: Theme<IconStyleProps & IconBlockStyleProps> = {
+  root,
+  block,
+};

package/src/components/Icon/IconBlock.tsx

@@ -0,0 +1,38 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { type ComponentPropsWithRef, type PropsWithChildren, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { IconBlockStyleProps } from './Icon.theme';
+
+export type IconBlockProps = ThemedClassName<ComponentPropsWithRef<'div'> & PropsWithChildren<IconBlockStyleProps>>;
+
+/**
+ * Static layout slot sized to `--dx-rail-item` (the same square that an `IconButton iconOnly`
+ * occupies). Use whenever a decorative `<Icon>` needs to share a row, column, or grid track with
+ * interactive `IconButton`s without drifting by a pixel.
+ *
+ * Defaults `aria-hidden='true'` — the slot wraps decorative chrome by default. Pass
+ * `aria-hidden={false}` when the slot's contents convey meaning that isn't already labelled
+ * elsewhere in the row.
+ */
+export const IconBlock = forwardRef<HTMLDivElement, IconBlockProps>(
+  ({ classNames, children, compact, square, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <div
+        aria-hidden='true'
+        {...props}
+        className={tx('icon.block', { compact, square }, classNames)}
+        ref={forwardedRef}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+IconBlock.displayName = 'IconBlock';

package/src/components/Icon/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './Icon';
+export * from './IconBlock';

package/src/components/Image/Image.stories.tsx

@@ -15,7 +15,7 @@ const seed = Math.random();
 random.seed(seed);
 
 const meta = {
-  title: 'ui/react-ui-mosaic/Image',
+  title: 'ui/react-ui-core/components/Image',
   component: Image,
   render: (args) => (
     <div className='absolute inset-0 flex justify-center items-center'>

package/src/components/Input/Input.stories.tsx

@@ -10,17 +10,23 @@ import { type MessageValence } from '@dxos/ui-types';
 import { withLayoutVariants, withTheme } from '../../testing';
 import {
   type CheckboxProps,
+  type DateInputProps,
+  type DateTimeInputProps,
   Input,
   type PinInputProps,
   type SwitchProps,
   type TextAreaProps,
   type TextInputProps,
+  type TimeProps,
 } from './Input';
 
 type VariantMap = {
   text: TextInputProps;
   pin: PinInputProps;
   textarea: TextAreaProps;
+  time: TimeProps;
+  date: DateInputProps;
+  datetime: DateTimeInputProps;
   checkbox: CheckboxProps;
   switch: SwitchProps;
 };
@@ -54,6 +60,9 @@ const DefaultStory = ({
       {kind === 'text' && <Input.TextInput {...props} />}
       {kind === 'pin' && <Input.PinInput {...props} />}
       {kind === 'textarea' && <Input.TextArea {...props} />}
+      {kind === 'time' && <Input.Time {...props} />}
+      {kind === 'date' && <Input.Date {...props} />}
+      {kind === 'datetime' && <Input.DateTime {...props} />}
       {kind === 'checkbox' && <Input.Checkbox {...props} />}
       {kind === 'switch' && <Input.Switch {...props} />}
 
@@ -76,34 +85,17 @@ export default meta;
 
 type Story = StoryObj<DefaultStoryProps & Variant>;
 
-export const DensityCoarse: Story = {
-  args: {
-    kind: 'text',
-    label: 'Input value',
-    placeholder: 'This is an input',
-    disabled: false,
-    description: undefined,
-    labelVisuallyHidden: false,
-    descriptionVisuallyHidden: false,
-    validationMessage: '',
-    validationValence: undefined,
-    density: 'coarse',
-  },
-};
-
-export const DensityFine: Story = {
-  args: {
-    kind: 'text',
-    label: 'Input value',
-    placeholder: 'This is a density:fine input',
-    disabled: false,
-    description: undefined,
-    labelVisuallyHidden: false,
-    descriptionVisuallyHidden: false,
-    validationMessage: '',
-    validationValence: undefined,
-    density: 'fine',
-  },
+export const Density: Story = {
+  render: () => (
+    <div className='flex flex-col gap-4'>
+      {(['lg', 'md', 'sm', 'xs'] as const).map((density) => (
+        <Input.Root key={density}>
+          <Input.Label>{`density="${density}"`}</Input.Label>
+          <Input.TextInput density={density} placeholder={`This is a density:${density} input`} />
+        </Input.Root>
+      ))}
+    </div>
+  ),
 };
 
 export const Subdued: Story = {
@@ -186,10 +178,86 @@ export const PinInput: Story = {
     length: 6,
     description: 'Type in secret you received',
     pattern: '\\d*',
-    density: 'coarse',
+    density: 'lg',
   },
 };
 
+export const Time: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time',
+    defaultValue: '09:30',
+  },
+};
+
+export const TimeUncontrolled: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time (uncontrolled)',
+    defaultValue: '14:00',
+  },
+};
+
+export const TimeAmPm: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time (12-hour, AM/PM)',
+    defaultValue: '14:00',
+    hourCycle: 12,
+  } as any,
+};
+
+export const TimeDisabled: Story = {
+  args: {
+    kind: 'time',
+    label: 'Time (disabled)',
+    defaultValue: '12:00',
+    disabled: true,
+  },
+};
+
+export const Date: Story = {
+  args: {
+    kind: 'date',
+    label: 'Date',
+    defaultValue: '1990-05-12',
+  },
+};
+
+export const DateTime: Story = {
+  args: {
+    kind: 'datetime',
+    label: 'Date & time',
+    defaultValue: '2026-06-01T15:30',
+  },
+};
+
+export const DateWithPicker: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Label>Date (with picker)</Input.Label>
+      <div className='flex items-center gap-1'>
+        <Input.Date defaultValue='2026-06-01' />
+        <Input.TriggerIcon />
+      </div>
+      <Input.Description>Click the calendar icon to open the date picker.</Input.Description>
+    </Input.Root>
+  ),
+};
+
+export const DateTimeWithPicker: Story = {
+  render: () => (
+    <Input.Root>
+      <Input.Label>Date & time (with picker)</Input.Label>
+      <div className='flex items-center gap-1'>
+        <Input.DateTime defaultValue='2026-06-01T15:30' />
+        <Input.TriggerIcon />
+      </div>
+      <Input.Description>Click the calendar icon to open the date picker.</Input.Description>
+    </Input.Root>
+  ),
+};
+
 export const Checkbox: Story = {
   args: {
     kind: 'checkbox',
@@ -206,3 +274,38 @@ export const Switch: Story = {
     description: 'On or off',
   },
 };
+
+/**
+ * Native HTML input types. `Input.TextInput` accepts every standard
+ * `<input type="…">` value via its `type` prop; this story exercises the most
+ * commonly used ones so the rendering across themes/browsers can be
+ * inspected at a glance.
+ */
+const TEXT_INPUT_TYPES: { type: string; placeholder: string }[] = [
+  { type: 'text', placeholder: 'Plain text' },
+  { type: 'email', placeholder: 'name@example.com' },
+  { type: 'password', placeholder: '••••••••' },
+  { type: 'search', placeholder: 'Search…' },
+  { type: 'tel', placeholder: '+1 (555) 555-5555' },
+  { type: 'url', placeholder: 'https://example.com' },
+  { type: 'number', placeholder: '42' },
+  { type: 'date', placeholder: '' },
+  { type: 'time', placeholder: '' },
+  { type: 'datetime-local', placeholder: '' },
+  { type: 'month', placeholder: '' },
+  { type: 'week', placeholder: '' },
+  { type: 'color', placeholder: '' },
+];
+
+export const TextInputTypes: Story = {
+  render: () => (
+    <div className='flex flex-col gap-3 min-w-[24rem]'>
+      {TEXT_INPUT_TYPES.map(({ type, placeholder }) => (
+        <Input.Root key={type}>
+          <Input.Label>{`type="${type}"`}</Input.Label>
+          <Input.TextInput type={type} placeholder={placeholder} />
+        </Input.Root>
+      ))}
+    </div>
+  ),
+};