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

package/src/components/Column/withColumn.ts

@@ -0,0 +1,27 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+/**
+ * Column-aware theme utilities.
+ * Components apply these in their theme functions to participate in the Column grid
+ * without importing Column React components.
+ *
+ * CSS custom property cascade:
+ * - Column.Root sets `--dx-col: 2 / span 1` (center column placement).
+ * - ScrollArea.Viewport resets `--dx-col: auto` after consuming `--gutter`.
+ * - Components apply `grid-column: var(--dx-col, auto)` to auto-center in Column
+ *   or do nothing outside Column / inside ScrollArea.
+ */
+export const withColumn = {
+  /** Centers element in the Column grid via --dx-col. No-op outside Column or inside ScrollArea. */
+  center: () => '[grid-column:var(--dx-col,auto)]',
+
+  /** Propagates the Column grid to children via subgrid. No-op outside Column.
+   *  Direct children default to center column unless they are a dx-container (ScrollArea). */
+  propagate: () =>
+    '[.dx-column-root_&]:col-span-full [.dx-column-root_&]:grid [.dx-column-root_&]:grid-cols-subgrid [.dx-column-root_&]:[&>*:not(.dx-container)]:[grid-column:var(--dx-col,auto)]',
+
+  /** Resets --dx-col after consuming --gutter. Applied by ScrollArea.Viewport. */
+  consumed: () => '[--dx-col:auto]',
+};

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,102 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { format } from 'date-fns';
+import React, { useState } from 'react';
+
+import { withTheme } from '../../testing';
+import { translations } from '../../translations';
+import { type DateRange } from '../Calendar';
+import { Input } from '../Input';
+import { DatePicker } from './DatePicker';
+
+const toTime = (date: Date | undefined) => (date ? format(date, 'HH:mm') : '');
+const applyTime = (date: Date | undefined, time: string): Date => {
+  const [hours, minutes] = time.split(':').map((part) => parseInt(part, 10));
+  const out = date ? new Date(date) : new Date();
+  out.setHours(Number.isFinite(hours) ? hours : 0, Number.isFinite(minutes) ? minutes : 0, 0, 0);
+  return out;
+};
+
+const meta: Meta<typeof DatePicker.Root> = {
+  title: 'ui/react-ui-core/components/DatePicker',
+  decorators: [withTheme()],
+  parameters: { layout: 'centered', translations },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Single: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | undefined>();
+    return (
+      <DatePicker.Root mode='single' value={value} onValueChange={setValue}>
+        <DatePicker.Trigger />
+        <DatePicker.Content>
+          <DatePicker.Calendar />
+        </DatePicker.Content>
+      </DatePicker.Root>
+    );
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateRange | undefined>();
+    return (
+      <DatePicker.Root mode='range' value={value} onValueChange={setValue}>
+        <DatePicker.Trigger />
+        <DatePicker.Content>
+          <DatePicker.Calendar />
+        </DatePicker.Content>
+      </DatePicker.Root>
+    );
+  },
+};
+
+export const SingleWithTime: Story = {
+  render: () => {
+    const [value, setValue] = useState<Date | undefined>();
+    return (
+      <DatePicker.Root mode='single' withTime value={value} onValueChange={setValue}>
+        <DatePicker.Trigger format='PPP p' />
+        <DatePicker.Content>
+          <DatePicker.Calendar />
+          <Input.Root>
+            <Input.Time value={toTime(value)} onValueChange={(next) => setValue(applyTime(value, next))} />
+          </Input.Root>
+        </DatePicker.Content>
+      </DatePicker.Root>
+    );
+  },
+};
+
+export const RangeWithTime: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateRange | undefined>();
+    return (
+      <DatePicker.Root mode='range' withTime value={value} onValueChange={setValue}>
+        <DatePicker.Trigger format='PPP p' />
+        <DatePicker.Content>
+          <DatePicker.Calendar />
+          <Input.Root>
+            <Input.Time
+              value={toTime(value?.from)}
+              onValueChange={(next) => setValue(value ? { ...value, from: applyTime(value.from, next) } : undefined)}
+            />
+          </Input.Root>
+          <Input.Root>
+            <Input.Time
+              value={toTime(value?.to)}
+              onValueChange={(next) => setValue(value?.from ? { ...value, to: applyTime(value.to, next) } : undefined)}
+            />
+          </Input.Root>
+        </DatePicker.Content>
+      </DatePicker.Root>
+    );
+  },
+};

package/src/components/DatePicker/DatePicker.theme.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type DatePickerStyleProps = Partial<{
+  hasValue: boolean;
+}>;
+
+const trigger: ComponentFunction<DatePickerStyleProps> = ({ hasValue }, ...etc) =>
+  mx(
+    'inline-flex w-fit items-center gap-2 px-2 rounded-sm border border-separator',
+    'bg-input-surface text-base-fg',
+    'hover:bg-hover-surface focus-visible:outline-2 focus-visible:outline-primary-500',
+    !hasValue && 'text-description',
+    ...etc,
+  );
+
+const content: ComponentFunction<DatePickerStyleProps> = (_p, ...etc) => mx('flex flex-col gap-2 p-2', ...etc);
+
+const timeField: ComponentFunction<DatePickerStyleProps> = (_p, ...etc) =>
+  mx(
+    'flex items-center gap-2 px-2 py-1',
+    '[&_input]:bg-input-surface [&_input]:border [&_input]:border-separator',
+    '[&_input]:rounded-sm [&_input]:px-2 [&_input]:py-1',
+    ...etc,
+  );
+
+export const datePickerTheme: Theme<DatePickerStyleProps> = {
+  trigger,
+  content,
+  timeField,
+};

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,279 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { format as formatDate } from 'date-fns';
+import React, {
+  type ComponentPropsWithoutRef,
+  type PropsWithChildren,
+  type ReactNode,
+  forwardRef,
+  useCallback,
+  useState,
+} from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { useTranslation } from '../../primitives';
+import { translationKey } from '../../translations';
+import { type ThemedClassName } from '../../util';
+import { Calendar, type DateRange } from '../Calendar';
+import { Icon } from '../Icon';
+import { Popover } from '../Popover';
+
+//
+// Public API.
+//
+// Wraps the new react-aria-components-backed `<Calendar>` (single + range) in a Radix Popover,
+// preserving the previous slot-style namespace: `<DatePicker.Root>`, `<DatePicker.Trigger>`,
+// `<DatePicker.Content>`, `<DatePicker.Calendar>`. Multi-select is no longer supported (no
+// in-repo consumers); use `<Calendar.Root>` directly with custom state if needed.
+//
+
+export type DatePickerMode = 'single' | 'range';
+
+type ValueByMode = {
+  single: Date | undefined;
+  range: DateRange | undefined;
+};
+
+type DatePickerContextValue = {
+  mode: DatePickerMode;
+  value: ValueByMode[DatePickerMode];
+  setValue: (next: ValueByMode[DatePickerMode]) => void;
+  withTime: boolean;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+const [DatePickerProvider, useDatePickerContext] = createContext<DatePickerContextValue>('DatePicker');
+
+//
+// Root.
+//
+
+export type DatePickerRootProps<M extends DatePickerMode = 'single'> = {
+  mode?: M;
+  value?: ValueByMode[M];
+  defaultValue?: ValueByMode[M];
+  onValueChange?: (value: ValueByMode[M]) => void;
+  /** Preserve hour/minute on the selected date(s) when picking a new day. */
+  withTime?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: ReactNode;
+};
+
+const DatePickerRoot = <M extends DatePickerMode = 'single'>({
+  mode = 'single' as M,
+  value,
+  defaultValue,
+  onValueChange,
+  withTime = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: DatePickerRootProps<M>) => {
+  const [internalValue, setInternalValue] = useState<ValueByMode[M] | undefined>(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+
+  const controlled = value !== undefined || onValueChange !== undefined;
+  const resolvedValue = (controlled ? value : internalValue) as ValueByMode[DatePickerMode];
+
+  const setValue = useCallback(
+    (next: ValueByMode[DatePickerMode]) => {
+      if (!controlled) {
+        setInternalValue(next as ValueByMode[M] | undefined);
+      }
+      onValueChange?.(next as ValueByMode[M]);
+    },
+    [controlled, onValueChange],
+  );
+
+  const resolvedOpen = open ?? internalOpen;
+  const handleOpenChange = useCallback(
+    (next: boolean) => {
+      if (open === undefined) {
+        setInternalOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange],
+  );
+
+  return (
+    <DatePickerProvider
+      mode={mode as DatePickerMode}
+      value={resolvedValue}
+      setValue={setValue}
+      withTime={withTime}
+      open={resolvedOpen}
+      onOpenChange={handleOpenChange}
+    >
+      <Popover.Root open={resolvedOpen} onOpenChange={handleOpenChange}>
+        {children}
+      </Popover.Root>
+    </DatePickerProvider>
+  );
+};
+
+//
+// Trigger.
+//
+
+const formatValue = (mode: DatePickerMode, value: unknown, fmt: string): string | undefined => {
+  if (value === undefined || value === null) {
+    return undefined;
+  }
+  switch (mode) {
+    case 'single':
+      return formatDate(value as Date, fmt);
+    case 'range': {
+      const r = value as DateRange;
+      if (!r.from) {
+        return undefined;
+      }
+      return r.to ? `${formatDate(r.from, fmt)} – ${formatDate(r.to, fmt)}` : formatDate(r.from, fmt);
+    }
+  }
+};
+
+export type DatePickerTriggerProps = ThemedClassName<Omit<ComponentPropsWithoutRef<'button'>, 'children'>> &
+  PropsWithChildren<{
+    format?: string;
+    placeholder?: string;
+    /** Show the leading calendar icon in the default trigger. Defaults to true. */
+    icon?: boolean;
+  }>;
+
+const DatePickerTrigger = forwardRef<HTMLButtonElement, DatePickerTriggerProps>(
+  ({ classNames, format: fmt = 'PPP', placeholder, icon = true, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const { t } = useTranslation(translationKey);
+    const { mode, value } = useDatePickerContext('DatePickerTrigger');
+
+    const placeholderText = placeholder ?? (t(`date-picker.placeholder.${mode}.label`) as string);
+    const label = formatValue(mode, value, fmt) ?? placeholderText;
+    const hasValue = label !== placeholderText;
+
+    return (
+      <Popover.Trigger asChild>
+        <button
+          ref={forwardedRef}
+          type='button'
+          {...props}
+          className={tx('datePicker.trigger', { hasValue }, classNames) ?? undefined}
+        >
+          {children ?? (
+            <>
+              {icon && <Icon size={4} icon='ph--calendar--regular' />}
+              {label}
+            </>
+          )}
+        </button>
+      </Popover.Trigger>
+    );
+  },
+);
+
+DatePickerTrigger.displayName = 'DatePickerTrigger';
+
+//
+// Content.
+//
+
+export type DatePickerContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof Popover.Content>>;
+
+const DatePickerContent = forwardRef<HTMLDivElement, DatePickerContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <Popover.Portal>
+        <Popover.Content ref={forwardedRef} align='start' sideOffset={4} {...props}>
+          <div className={tx('datePicker.content', {}, classNames)}>{children}</div>
+        </Popover.Content>
+      </Popover.Portal>
+    );
+  },
+);
+
+DatePickerContent.displayName = 'DatePickerContent';
+
+//
+// Calendar — single or range, time-of-day preservation, auto-dismiss on completion.
+//
+
+const carryTime = (oldDate: Date | undefined, newDate: Date | undefined): Date | undefined => {
+  if (!newDate) {
+    return newDate;
+  }
+  if (!oldDate) {
+    return newDate;
+  }
+  const out = new Date(newDate);
+  out.setHours(oldDate.getHours(), oldDate.getMinutes(), 0, 0);
+  return out;
+};
+
+const DatePickerCalendar = ({ classNames }: { classNames?: string } = {}) => {
+  const { mode, value, setValue, withTime, onOpenChange } = useDatePickerContext('DatePickerCalendar');
+
+  if (mode === 'single') {
+    const date = value as Date | undefined;
+    return (
+      <Calendar.Root
+        mode='single'
+        classNames={classNames}
+        selected={date}
+        onSelect={(next) => {
+          const merged = withTime ? carryTime(date, next) : next;
+          setValue(merged);
+          if (next !== undefined) {
+            onOpenChange(false);
+          }
+        }}
+      />
+    );
+  }
+
+  const range = value as DateRange | undefined;
+  return (
+    <Calendar.Root
+      mode='range'
+      classNames={classNames}
+      selected={range}
+      onSelect={(next) => {
+        if (!next) {
+          setValue(undefined);
+          return;
+        }
+        const merged: DateRange = withTime
+          ? { from: carryTime(range?.from, next.from)!, to: carryTime(range?.to, next.to) }
+          : next;
+        setValue(merged);
+        if (merged.from && merged.to) {
+          onOpenChange(false);
+        }
+      }}
+    />
+  );
+};
+
+DatePickerCalendar.displayName = 'DatePickerCalendar';
+
+//
+// Public namespace.
+//
+
+export const DatePicker = {
+  Root: DatePickerRoot,
+  Trigger: DatePickerTrigger,
+  Content: DatePickerContent,
+  Calendar: DatePickerCalendar,
+};
+
+export { useDatePickerContext };
+
+export type { ValueByMode };

package/src/components/DatePicker/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './DatePicker';

package/src/components/Dialog/AlertDialog.tsx

@@ -6,18 +6,17 @@ import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { createContext } from '@radix-ui/react-context';
 import React, { type ForwardRefExoticComponent, type FunctionComponent, forwardRef } from 'react';
 
-import { type DialogSize } from '@dxos/ui-theme';
-
 import { useThemeContext } from '../../hooks';
-import { Column } from '../../primitives';
+import { ElevationProvider } from '../../primitives';
+import { type DialogSize } from '../../theme';
 import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
+import { Column } from '../Column';
 import {
   Dialog,
   type DialogHeaderProps,
   type DialogBodyProps,
   type DialogActionBarProps,
-  type DialogCloseIconButtonProps,
+  type DialogActionIconButtonProps,
 } from './Dialog';
 
 //
@@ -38,7 +37,7 @@ const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
 
 type AlertDialogTriggerProps = AlertDialogPrimitive.AlertDialogTriggerProps;
 
-const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogPrimitive.Trigger;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 //
 // Portal
@@ -46,7 +45,7 @@ const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDial
 
 type AlertDialogPortalProps = AlertDialogPrimitive.AlertDialogPortalProps;
 
-const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPrimitive.Portal;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 //
 // Cancel
@@ -54,7 +53,7 @@ const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialog
 
 type AlertDialogCancelProps = AlertDialogPrimitive.AlertDialogCancelProps;
 
-const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogPrimitive.Cancel;
+const AlertDialogCancel = AlertDialogPrimitive.Cancel;
 
 //
 // Action
@@ -62,7 +61,7 @@ const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialog
 
 type AlertDialogActionProps = AlertDialogPrimitive.AlertDialogActionProps;
 
-const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogPrimitive.Action;
+const AlertDialogAction = AlertDialogPrimitive.Action;
 
 //
 // Context
@@ -70,8 +69,8 @@ const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialog
 
 type OverlayLayoutContextValue = { inOverlayLayout?: boolean };
 
-const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialogOverlay';
-const ALERT_DIALOG_CONTENT_NAME = 'AlertDialogContent';
+const ALERT_DIALOG_OVERLAY_NAME = 'AlertDialog.Overlay';
+const ALERT_DIALOG_CONTENT_NAME = 'AlertDialog.Content';
 
 const [OverlayLayoutProvider, useOverlayLayoutContext] = createContext<OverlayLayoutContextValue>(
   ALERT_DIALOG_OVERLAY_NAME,
@@ -189,7 +188,7 @@ export const AlertDialog = {
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
   ActionBar: Dialog.ActionBar,
-  CloseIconButton: Dialog.CloseIconButton,
+  ActionIconButton: Dialog.ActionIconButton,
   // AlertDialog-specific dismissal.
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction,
@@ -209,5 +208,5 @@ export type {
   DialogHeaderProps as AlertDialogHeaderProps,
   DialogBodyProps as AlertDialogBodyProps,
   DialogActionBarProps as AlertDialogActionBarProps,
-  DialogCloseIconButtonProps as AlertDialogCloseIconButtonProps,
+  DialogActionIconButtonProps as AlertDialogActionIconButtonProps,
 };

package/src/components/Dialog/Dialog.stories.tsx

@@ -38,7 +38,7 @@ const DefaultStory = ({ size, title, description, openTrigger, closeTrigger, blo
             <Dialog.Title>{title}</Dialog.Title>
             {closeTrigger && (
               <Dialog.Close asChild>
-                <Dialog.CloseIconButton />
+                <Dialog.ActionIconButton action='close' />
               </Dialog.Close>
             )}
           </Dialog.Header>
@@ -77,7 +77,7 @@ const ScrollingStory = ({ size, title, description, openTrigger, closeTrigger, b
             <Dialog.Title>{title}</Dialog.Title>
             {closeTrigger && (
               <Dialog.Close asChild>
-                <Dialog.CloseIconButton />
+                <Dialog.ActionIconButton action='close' />
               </Dialog.Close>
             )}
           </Dialog.Header>

package/src/components/Dialog/Dialog.theme.ts

@@ -0,0 +1,61 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Elevation, type Theme } from '@dxos/ui-types';
+
+import { withColumn } from '../Column/withColumn';
+
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl';
+
+const sizeMap: Record<DialogSize, string> = {
+  sm: 'md:max-w-[24rem]',
+  md: 'md:max-w-[32rem]!',
+  lg: 'md:max-w-[40rem]!',
+  xl: 'md:max-w-[60rem]!',
+};
+
+export type DialogStyleProps = {
+  srOnly?: boolean;
+  inOverlayLayout?: boolean;
+  elevation?: Elevation;
+  size?: DialogSize;
+};
+
+const overlay: ComponentFunction<DialogStyleProps> = (_props, ...etc) => mx('dx-dialog__overlay', ...etc);
+
+const content: ComponentFunction<DialogStyleProps> = ({ inOverlayLayout, size = 'md' }, ...etc) => {
+  return mx(
+    '@container',
+    'dx-dialog__content dx-focus-ring dx-modal-surface py-4',
+    !inOverlayLayout && 'fixed z-50 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]',
+    sizeMap[size],
+    ...etc,
+  );
+};
+
+const header: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__header flex pb-4 items-center justify-between', withColumn.center(), ...etc);
+
+const body: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__body dx-expander', withColumn.propagate(), ...etc);
+
+const actionBar: ComponentFunction<DialogStyleProps> = (_props, ...etc) =>
+  mx('dx-dialog__actionbar flex items-center pt-4 gap-2', withColumn.center(), ...etc);
+
+const title: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__title', srOnly && 'sr-only', ...etc);
+
+const description: ComponentFunction<DialogStyleProps> = ({ srOnly }, ...etc) =>
+  mx('dx-dialog__description', 'text-description', srOnly && 'sr-only', ...etc);
+
+export const dialogTheme: Theme<DialogStyleProps> = {
+  overlay,
+  content,
+  header,
+  body,
+  actionbar: actionBar,
+  title,
+  description,
+};