@dxos/react-ui 0.8.4-staging.ac66bdf99f → 0.9.1-main.c7dcc2e112

package/src/components/Button/SystemIconButton.tsx

@@ -0,0 +1,153 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { translationKey } from '#translations';
+
+import { IconButton, type IconButtonProps } from './IconButton';
+import { ToggleIconButton, type ToggleIconButtonProps } from './ToggleIconButton';
+
+// Static presets fix the icon and default the label; callers can still override `label`.
+type StaticPresetProps = Omit<IconButtonProps, 'icon' | 'label'> & { label?: string };
+
+// Stateful presets fix both icons so a call site cannot supply a conflicting glyph.
+type TogglePresetProps = Omit<ToggleIconButtonProps, 'icon' | 'activeIcon' | 'label'> & { label?: string };
+
+//
+// Star
+//
+
+const StarIconButton = forwardRef<HTMLButtonElement, TogglePresetProps>(({ label, active, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <ToggleIconButton
+      {...props}
+      active={active}
+      icon='ph--star--regular'
+      activeIcon='ph--star--fill'
+      label={label ?? t(active ? 'system-button.unstar.label' : 'system-button.star.label')}
+      ref={forwardedRef}
+    />
+  );
+});
+
+StarIconButton.displayName = 'SystemIconButton.Star';
+
+//
+// Bookmark
+//
+
+const BookmarkIconButton = forwardRef<HTMLButtonElement, TogglePresetProps>(
+  ({ label, active, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    return (
+      <ToggleIconButton
+        {...props}
+        active={active}
+        icon='ph--bookmark-simple--regular'
+        activeIcon='ph--bookmark-simple--fill'
+        label={label ?? t(active ? 'system-button.unbookmark.label' : 'system-button.bookmark.label')}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+BookmarkIconButton.displayName = 'SystemIconButton.Bookmark';
+
+//
+// Expander
+//
+
+const ExpanderIconButton = forwardRef<HTMLButtonElement, TogglePresetProps>(
+  ({ label, active, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    return (
+      <ToggleIconButton
+        {...props}
+        active={active}
+        icon='ph--caret-right--regular'
+        label={label ?? t(active ? 'system-button.collapse.label' : 'system-button.expand.label')}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+ExpanderIconButton.displayName = 'SystemIconButton.Expander';
+
+//
+// Add
+//
+
+const AddIconButton = forwardRef<HTMLButtonElement, StaticPresetProps>(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <IconButton {...props} icon='ph--plus--regular' label={label ?? t('system-button.add.label')} ref={forwardedRef} />
+  );
+});
+
+AddIconButton.displayName = 'SystemIconButton.Add';
+
+//
+// Delete
+//
+
+const DeleteIconButton = forwardRef<HTMLButtonElement, StaticPresetProps>(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <IconButton
+      {...props}
+      icon='ph--trash--regular'
+      label={label ?? t('system-button.delete.label')}
+      ref={forwardedRef}
+    />
+  );
+});
+
+DeleteIconButton.displayName = 'SystemIconButton.Delete';
+
+//
+// Edit
+//
+
+const EditIconButton = forwardRef<HTMLButtonElement, StaticPresetProps>(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <IconButton {...props} icon='ph--pen--regular' label={label ?? t('system-button.edit.label')} ref={forwardedRef} />
+  );
+});
+
+EditIconButton.displayName = 'SystemIconButton.Edit';
+
+//
+// Close
+//
+
+const CloseIconButton = forwardRef<HTMLButtonElement, StaticPresetProps>(({ label, ...props }, forwardedRef) => {
+  const { t } = useTranslation(translationKey);
+  return (
+    <IconButton {...props} icon='ph--x--regular' label={label ?? t('system-button.close.label')} ref={forwardedRef} />
+  );
+});
+
+CloseIconButton.displayName = 'SystemIconButton.Close';
+
+//
+// Namespace
+//
+
+export const SystemIconButton = {
+  Star: StarIconButton,
+  Bookmark: BookmarkIconButton,
+  Expander: ExpanderIconButton,
+  Add: AddIconButton,
+  Delete: DeleteIconButton,
+  Edit: EditIconButton,
+  Close: CloseIconButton,
+};
+
+export type { StaticPresetProps, TogglePresetProps };

package/src/components/Button/ToggleIconButton.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { forwardRef } from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { IconButton, type IconButtonProps } from './IconButton';
+
+export type ToggleIconButtonProps = Omit<IconButtonProps, 'icon'> & {
+  active?: boolean;
+  /** Icon for the inactive state; rotated 90° in the active state when `activeIcon` is omitted. */
+  icon: NonNullable<IconButtonProps['icon']>;
+  /** Icon for the active state. When omitted, `icon` rotates 90° (disclosure-style). */
+  activeIcon?: NonNullable<IconButtonProps['icon']>;
+};
+
+/**
+ * Icon button bound to a boolean toggle. With `activeIcon` it swaps icons between states;
+ * otherwise it rotates `icon` 90° to signal the active (e.g. expanded) state.
+ */
+export const ToggleIconButton = forwardRef<HTMLButtonElement, ToggleIconButtonProps>(
+  ({ active, icon, activeIcon, iconClassNames, ...props }, forwardedRef) => (
+    <IconButton
+      {...props}
+      ref={forwardedRef}
+      icon={active && activeIcon ? activeIcon : icon}
+      iconClassNames={activeIcon ? iconClassNames : mx('transition-transform', active && 'rotate-90', iconClassNames)}
+    />
+  ),
+);

package/src/components/Button/index.ts

@@ -4,5 +4,7 @@
 
 export * from './Button';
 export * from './IconButton';
+export * from './SystemIconButton';
 export * from './Toggle';
 export * from './ToggleGroup';
+export * from './ToggleIconButton';

package/src/components/Calendar/Calendar.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withLayout, withTheme } from '../../testing';
+import { Calendar, type DateRange } from './Calendar';
+
+const meta: Meta<typeof Calendar.Root> = {
+  title: 'ui/react-ui-core/components/Calendar',
+  component: Calendar.Root,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'flex flex-row p-4 justify-center' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar.Root>;
+
+export const Single: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+    return <Calendar.Root mode='single' selected={date} onSelect={setDate} />;
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange | undefined>();
+    return <Calendar.Root mode='range' selected={range} onSelect={setRange} />;
+  },
+};
+
+export const WithMinDate: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>();
+    return <Calendar.Root mode='single' selected={date} onSelect={setDate} minValue={new Date()} />;
+  },
+};

package/src/components/Calendar/Calendar.theme.ts

@@ -0,0 +1,74 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type CalendarStyleProps = Partial<{}>;
+
+//
+// Theme slots target react-aria-components elements. RAC attaches `data-*` attributes to its
+// rendered nodes (`data-selected`, `data-focused`, `data-disabled`, `data-outside-month`,
+// `data-selection-start`, `data-selection-end`, `data-hovered`, etc.) which we hook into via
+// Tailwind's `data-[…]:` modifiers.
+//
+
+const root: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx('relative w-fit h-fit self-start p-2 select-none bg-group-surface text-base-fg', ...etc);
+
+const nav: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('flex items-center justify-between pb-1', ...etc);
+
+const caption_label: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx('flex-1 text-center text-sm font-medium', ...etc);
+
+const button_previous: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx(
+    'h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0',
+    'text-description hover:bg-hover-surface',
+    'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+    ...etc,
+  );
+
+const button_next: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx(
+    'h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0',
+    'text-description hover:bg-hover-surface',
+    'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+    ...etc,
+  );
+
+const month_grid: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('w-full border-collapse', ...etc);
+
+const weekdays: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('', ...etc);
+
+const weekday: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx('w-9 h-7 text-xs font-thin text-description', ...etc);
+
+const day: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx(
+    'relative w-9 h-9 p-0 text-center text-sm rounded-sm inline-flex items-center justify-center cursor-pointer',
+    'outline-none',
+    'data-[hovered]:bg-hover-surface',
+    'data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500',
+    'data-[selected]:bg-primary-500 data-[selected]:text-primary-fg data-[selected]:hover:bg-primary-500',
+    'data-[outside-month]:text-description/40',
+    'data-[disabled]:text-description/40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent',
+    'data-[unavailable]:line-through data-[unavailable]:text-description/50 data-[unavailable]:cursor-not-allowed',
+    // Range selection visual layer.
+    'data-[selection-start]:rounded-l-sm data-[selection-end]:rounded-r-sm',
+    'data-[selection-start]:bg-primary-500 data-[selection-end]:bg-primary-500',
+    ...etc,
+  );
+
+export const calendarTheme: Theme<CalendarStyleProps> = {
+  root,
+  nav,
+  caption_label,
+  button_previous,
+  button_next,
+  month_grid,
+  weekdays,
+  weekday,
+  day,
+};

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,196 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { CalendarDate, parseDate } from '@internationalized/date';
+import React, { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import {
+  Button as RACButton,
+  Calendar as RACCalendar,
+  CalendarCell as RACCalendarCell,
+  type CalendarProps as RACCalendarProps,
+  CalendarGrid as RACCalendarGrid,
+  CalendarGridBody as RACCalendarGridBody,
+  CalendarGridHeader as RACCalendarGridHeader,
+  CalendarHeaderCell as RACCalendarHeaderCell,
+  Heading as RACHeading,
+  RangeCalendar as RACRangeCalendar,
+  type RangeCalendarProps as RACRangeCalendarProps,
+  type DateValue,
+} from 'react-aria-components';
+
+import { type ClassNameValue } from '@dxos/ui-types';
+
+import { useThemeContext } from '../../hooks';
+import { Icon } from '../Icon';
+
+//
+// Date <-> CalendarDate conversion.
+// External API stays `Date` (and `{from,to}`-style range objects) so existing call sites keep working.
+//
+
+const toCalendarDate = (date: Date | undefined): CalendarDate | null => {
+  if (!date) {
+    return null;
+  }
+  return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+};
+
+const fromCalendarDate = (value: DateValue | null | undefined): Date | undefined => {
+  if (!value) {
+    return undefined;
+  }
+  return new Date(value.year, value.month - 1, value.day);
+};
+
+export type DateRange = { from: Date; to?: Date };
+
+//
+// Public API.
+//
+
+type BaseCalendarProps = {
+  classNames?: ClassNameValue;
+  className?: string;
+  isDisabled?: boolean;
+  minValue?: Date;
+  maxValue?: Date;
+  /** Month to render when there's no selection — driven by the consuming picker. */
+  defaultMonth?: Date;
+};
+
+type SingleProps = BaseCalendarProps & {
+  mode?: 'single';
+  selected?: Date;
+  onSelect?: (date: Date | undefined) => void;
+};
+
+type RangeProps = BaseCalendarProps & {
+  mode: 'range';
+  selected?: DateRange;
+  onSelect?: (range: DateRange | undefined) => void;
+};
+
+export type CalendarRootProps = SingleProps | RangeProps;
+
+const CalendarShell = ({
+  classNames,
+  className,
+  isDisabled,
+  forwardedRef,
+  children,
+}: {
+  classNames?: ClassNameValue;
+  className?: string;
+  isDisabled?: boolean;
+  forwardedRef?: React.Ref<HTMLDivElement>;
+  children: ReactNode;
+}) => {
+  const { tx } = useThemeContext();
+  return (
+    <div
+      ref={forwardedRef}
+      className={tx('calendar.root', {}, classNames, className) ?? undefined}
+      aria-disabled={isDisabled || undefined}
+    >
+      {children}
+    </div>
+  );
+};
+
+const CalendarChrome = () => {
+  const { tx } = useThemeContext();
+  return (
+    <header className={tx('calendar.nav', {}) ?? undefined}>
+      <RACButton slot='previous' className={tx('calendar.button_previous', {}) ?? undefined}>
+        <Icon size={4} icon='ph--caret-left--regular' />
+      </RACButton>
+      <RACHeading className={tx('calendar.caption_label', {}) ?? undefined} />
+      <RACButton slot='next' className={tx('calendar.button_next', {}) ?? undefined}>
+        <Icon size={4} icon='ph--caret-right--regular' />
+      </RACButton>
+    </header>
+  );
+};
+
+const CalendarGridContent = () => {
+  const { tx } = useThemeContext();
+  return (
+    <RACCalendarGrid className={tx('calendar.month_grid', {}) ?? undefined}>
+      <RACCalendarGridHeader className={tx('calendar.weekdays', {}) ?? undefined}>
+        {(day) => (
+          <RACCalendarHeaderCell className={tx('calendar.weekday', {}) ?? undefined}>{day}</RACCalendarHeaderCell>
+        )}
+      </RACCalendarGridHeader>
+      <RACCalendarGridBody>
+        {(date) => <RACCalendarCell date={date} className={tx('calendar.day', {}) ?? undefined} />}
+      </RACCalendarGridBody>
+    </RACCalendarGrid>
+  );
+};
+
+const CalendarRoot = forwardRef<HTMLDivElement, CalendarRootProps>((props, forwardedRef) => {
+  const { classNames, className, isDisabled, minValue, maxValue, defaultMonth } = props;
+  const defaultFocused = toCalendarDate(defaultMonth) ?? undefined;
+
+  if (props.mode === 'range') {
+    const racProps: RACRangeCalendarProps<CalendarDate> = {
+      isDisabled,
+      minValue: toCalendarDate(minValue) ?? undefined,
+      maxValue: toCalendarDate(maxValue) ?? undefined,
+      defaultFocusedValue: defaultFocused,
+      value: props.selected?.from
+        ? {
+            start: toCalendarDate(props.selected.from)!,
+            end: toCalendarDate(props.selected.to ?? props.selected.from)!,
+          }
+        : undefined,
+      onChange: (next) => {
+        if (!next) {
+          props.onSelect?.(undefined);
+          return;
+        }
+        const from = fromCalendarDate(next.start);
+        const to = fromCalendarDate(next.end);
+        if (from) {
+          props.onSelect?.({ from, to });
+        }
+      },
+    };
+    return (
+      <CalendarShell classNames={classNames} className={className} isDisabled={isDisabled} forwardedRef={forwardedRef}>
+        <RACRangeCalendar {...racProps}>
+          <CalendarChrome />
+          <CalendarGridContent />
+        </RACRangeCalendar>
+      </CalendarShell>
+    );
+  }
+
+  const racProps: RACCalendarProps<CalendarDate> = {
+    isDisabled,
+    minValue: toCalendarDate(minValue) ?? undefined,
+    maxValue: toCalendarDate(maxValue) ?? undefined,
+    defaultFocusedValue: defaultFocused,
+    value: toCalendarDate(props.selected),
+    onChange: (next) => props.onSelect?.(fromCalendarDate(next)),
+  };
+  return (
+    <CalendarShell classNames={classNames} className={className} isDisabled={isDisabled} forwardedRef={forwardedRef}>
+      <RACCalendar {...racProps}>
+        <CalendarChrome />
+        <CalendarGridContent />
+      </RACCalendar>
+    </CalendarShell>
+  );
+});
+
+CalendarRoot.displayName = 'Calendar.Root';
+
+export const Calendar = {
+  Root: CalendarRoot,
+};
+
+// Re-export the iso parser for convenience.
+export { parseDate as parseCalendarDate };
+export type { ComponentPropsWithoutRef };

package/src/components/Calendar/index.ts

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