@dxos/react-ui 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

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

@@ -5,22 +5,21 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { random } from '@dxos/random';
+
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-import { Toolbar } from '../Toolbar';
-
 import { AlertDialog } from './AlertDialog';
 
-type StoryProps = Partial<{
+type DefaultStoryProps = Partial<{
   title: string;
   description: string;
-  body: string;
   openTrigger: string;
   cancelTrigger: string;
   actionTrigger: string;
 }>;
 
-const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, actionTrigger }: StoryProps) => {
+const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: DefaultStoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -28,18 +27,19 @@ const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, ac
       </AlertDialog.Trigger>
       <AlertDialog.Overlay>
         <AlertDialog.Content>
-          <AlertDialog.Title>{title}</AlertDialog.Title>
-          <AlertDialog.Description>{description}</AlertDialog.Description>
-          <p className='mbs-2 mbe-8'>{body}</p>
-          <Toolbar.Root>
+          <AlertDialog.Body>
+            <AlertDialog.Title>{title}</AlertDialog.Title>
+            <AlertDialog.Description>{description}</AlertDialog.Description>
+          </AlertDialog.Body>
+          <AlertDialog.ActionBar>
             <div className='grow' />
             <AlertDialog.Cancel asChild>
-              <Toolbar.Button>{cancelTrigger}</Toolbar.Button>
+              <Button>{cancelTrigger}</Button>
             </AlertDialog.Cancel>
             <AlertDialog.Action asChild>
-              <Toolbar.Button variant='primary'>{actionTrigger}</Toolbar.Button>
+              <Button variant='primary'>{actionTrigger}</Button>
             </AlertDialog.Action>
-          </Toolbar.Root>
+          </AlertDialog.ActionBar>
         </AlertDialog.Content>
       </AlertDialog.Overlay>
     </AlertDialog.Root>
@@ -47,10 +47,10 @@ const DefaultStory = ({ title, description, body, openTrigger, cancelTrigger, ac
 };
 
 const meta = {
-  title: 'ui/react-ui-core/AlertDialog',
+  title: 'ui/react-ui-core/components/AlertDialog',
   component: AlertDialog.Root as any,
   render: DefaultStory as any,
-  decorators: [withTheme],
+  decorators: [withTheme()],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -59,10 +59,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: 'AlertDialog title',
+    title: random.lorem.sentence(3),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open AlertDialog',
-    description: 'AlertDialog description',
-    body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
     cancelTrigger: 'Cancel',
     actionTrigger: 'Action',
   },

package/src/components/Dialog/AlertDialog.tsx

@@ -2,102 +2,88 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  AlertDialogAction as AlertDialogActionPrimitive,
-  type AlertDialogActionProps as AlertDialogActionPrimitiveProps,
-  AlertDialogCancel as AlertDialogCancelPrimitive,
-  type AlertDialogCancelProps as AlertDialogCancelPrimitiveProps,
-  AlertDialogContent as AlertDialogContentPrimitive,
-  type AlertDialogContentProps as AlertDialogContentPrimitiveProps,
-  AlertDialogDescription as AlertDialogDescriptionPrimitive,
-  type AlertDialogDescriptionProps as AlertDialogDescriptionPrimitiveProps,
-  AlertDialogOverlay as AlertDialogOverlayPrimitive,
-  type AlertDialogOverlayProps as AlertDialogOverlayPrimitiveProps,
-  AlertDialogPortal as AlertDialogPortalPrimitive,
-  type AlertDialogPortalProps as AlertDialogPortalPrimitiveProps,
-  Root as AlertDialogRootPrimitive,
-  type AlertDialogProps as AlertDialogRootPrimitiveProps,
-  AlertDialogTitle as AlertDialogTitlePrimitive,
-  type AlertDialogTitleProps as AlertDialogTitlePrimitiveProps,
-  AlertDialogTrigger as AlertDialogTriggerPrimitive,
-  type AlertDialogTriggerProps as AlertDialogTriggerPrimitiveProps,
-} from '@radix-ui/react-alert-dialog';
+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 { useThemeContext } from '../../hooks';
+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 DialogActionIconButtonProps,
+} from './Dialog';
+
+//
+// Root
+//
 
-type AlertDialogRootProps = AlertDialogRootPrimitiveProps;
+type AlertDialogRootProps = AlertDialogPrimitive.AlertDialogProps;
 
 const AlertDialogRoot: FunctionComponent<AlertDialogRootProps> = (props) => (
   <ElevationProvider elevation='dialog'>
-    <AlertDialogRootPrimitive {...props} />
+    <AlertDialogPrimitive.Root {...props} />
   </ElevationProvider>
 );
 
-type AlertDialogTriggerProps = AlertDialogTriggerPrimitiveProps;
+//
+// Trigger
+//
 
-const AlertDialogTrigger: FunctionComponent<AlertDialogTriggerProps> = AlertDialogTriggerPrimitive;
+type AlertDialogTriggerProps = AlertDialogPrimitive.AlertDialogTriggerProps;
 
-type AlertDialogPortalProps = AlertDialogPortalPrimitiveProps;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal: FunctionComponent<AlertDialogPortalProps> = AlertDialogPortalPrimitive;
+//
+// Portal
+//
 
-type AlertDialogCancelProps = AlertDialogCancelPrimitiveProps;
+type AlertDialogPortalProps = AlertDialogPrimitive.AlertDialogPortalProps;
 
-const AlertDialogCancel: FunctionComponent<AlertDialogCancelProps> = AlertDialogCancelPrimitive;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-type AlertDialogActionProps = AlertDialogActionPrimitiveProps;
+//
+// Cancel
+//
 
-const AlertDialogAction: FunctionComponent<AlertDialogActionProps> = AlertDialogActionPrimitive;
+type AlertDialogCancelProps = AlertDialogPrimitive.AlertDialogCancelProps;
 
-type AlertDialogTitleProps = ThemedClassName<AlertDialogTitlePrimitiveProps> & { srOnly?: boolean };
+const AlertDialogCancel = AlertDialogPrimitive.Cancel;
 
-const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
-  HTMLHeadingElement,
-  AlertDialogTitleProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <AlertDialogTitlePrimitive
-      {...props}
-      className={tx('dialog.title', 'dialog--alert__title', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
+//
+// Action
+//
 
-type AlertDialogDescriptionProps = ThemedClassName<AlertDialogDescriptionPrimitiveProps> & { srOnly?: boolean };
+type AlertDialogActionProps = AlertDialogPrimitive.AlertDialogActionProps;
 
-const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
-  HTMLParagraphElement,
-  AlertDialogDescriptionProps
->(({ classNames, srOnly, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <AlertDialogDescriptionPrimitive
-      {...props}
-      className={tx('dialog.description', 'dialog--alert__description', { srOnly }, classNames)}
-      ref={forwardedRef}
-    />
-  );
-});
+const AlertDialogAction = AlertDialogPrimitive.Action;
+
+//
+// Context
+//
 
 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,
-  {
-    inOverlayLayout: false,
-  },
+  { inOverlayLayout: false },
 );
 
-type AlertDialogOverlayProps = ThemedClassName<AlertDialogOverlayPrimitiveProps> & {
-  blockAlign?: 'center' | 'start' | 'end';
-};
+//
+// Overlay
+//
+
+type AlertDialogOverlayProps = ThemedClassName<
+  AlertDialogPrimitive.AlertDialogOverlayProps & { blockAlign?: 'center' | 'start' | 'end' }
+>;
 
 const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = forwardRef<
   HTMLDivElement,
@@ -105,56 +91,102 @@ const AlertDialogOverlay: ForwardRefExoticComponent<AlertDialogOverlayProps> = f
 >(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   return (
-    <AlertDialogOverlayPrimitive
+    <AlertDialogPrimitive.Overlay
       {...props}
-      className={tx(
-        'dialog.overlay',
-        'dialog--alert__overlay',
-        {},
-        classNames,
-        'data-[block-align=start]:justify-center',
-        'data-[block-align=start]:items-start',
-        'data-[block-align=center]:place-content-center',
-      )}
-      ref={forwardedRef}
       data-block-align={blockAlign}
+      className={tx('dialog.overlay', {}, classNames)}
+      ref={forwardedRef}
     >
       <OverlayLayoutProvider inOverlayLayout>{children}</OverlayLayoutProvider>
-    </AlertDialogOverlayPrimitive>
+    </AlertDialogPrimitive.Overlay>
   );
 });
 
 AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
 
-type AlertDialogContentProps = ThemedClassName<AlertDialogContentPrimitiveProps>;
+//
+// Content
+//
+
+type AlertDialogContentProps = ThemedClassName<AlertDialogPrimitive.AlertDialogContentProps> & { size?: DialogSize };
 
 const AlertDialogContent: ForwardRefExoticComponent<AlertDialogContentProps> = forwardRef<
   HTMLDivElement,
   AlertDialogContentProps
->(({ classNames, children, ...props }, forwardedRef) => {
+>(({ classNames, children, size = 'md', ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { inOverlayLayout } = useOverlayLayoutContext(ALERT_DIALOG_CONTENT_NAME);
   return (
-    <AlertDialogContentPrimitive
+    <AlertDialogPrimitive.Content
       {...props}
-      className={tx('dialog.content', 'dialog--alert', { inOverlayLayout }, classNames)}
+      className={tx('dialog.content', { inOverlayLayout, size }, classNames)}
       ref={forwardedRef}
     >
-      {children}
-    </AlertDialogContentPrimitive>
+      <Column.Root classNames='dx-expander' gutter='sm'>
+        {children}
+      </Column.Root>
+    </AlertDialogPrimitive.Content>
   );
 });
 
 AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
 
+//
+// Title
+//
+
+type AlertDialogTitleProps = ThemedClassName<AlertDialogPrimitive.AlertDialogTitleProps> & { srOnly?: boolean };
+
+const AlertDialogTitle: ForwardRefExoticComponent<AlertDialogTitleProps> = forwardRef<
+  HTMLHeadingElement,
+  AlertDialogTitleProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <AlertDialogPrimitive.Title {...props} className={tx('dialog.title', { srOnly }, classNames)} ref={forwardedRef} />
+  );
+});
+
+//
+// Description
+//
+
+type AlertDialogDescriptionProps = ThemedClassName<AlertDialogPrimitive.AlertDialogDescriptionProps> & {
+  srOnly?: boolean;
+};
+
+const AlertDialogDescription: ForwardRefExoticComponent<AlertDialogDescriptionProps> = forwardRef<
+  HTMLParagraphElement,
+  AlertDialogDescriptionProps
+>(({ classNames, srOnly, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <AlertDialogPrimitive.Description
+      {...props}
+      className={tx('dialog.description', { srOnly }, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+//
+// AlertDialog
+//
+
 export const AlertDialog = {
   Root: AlertDialogRoot,
   Trigger: AlertDialogTrigger,
   Portal: AlertDialogPortal,
   Overlay: AlertDialogOverlay,
   Content: AlertDialogContent,
+  // Shared with Dialog.
+  Header: Dialog.Header,
+  Body: Dialog.Body,
   Title: AlertDialogTitle,
   Description: AlertDialogDescription,
+  ActionBar: Dialog.ActionBar,
+  ActionIconButton: Dialog.ActionIconButton,
+  // AlertDialog-specific dismissal.
   Cancel: AlertDialogCancel,
   Action: AlertDialogAction,
 };
@@ -169,4 +201,9 @@ export type {
   AlertDialogDescriptionProps,
   AlertDialogCancelProps,
   AlertDialogActionProps,
+  // Re-export shared types.
+  DialogHeaderProps as AlertDialogHeaderProps,
+  DialogBodyProps as AlertDialogBodyProps,
+  DialogActionBarProps as AlertDialogActionBarProps,
+  DialogActionIconButtonProps as AlertDialogActionIconButtonProps,
 };