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

package/src/components/Button/SystemIconButton.tsx

@@ -0,0 +1,264 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { InputHTMLAttributes, forwardRef, useCallback, useRef } 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';
+
+//
+// Clipboard
+//
+
+type ClipboardIconButtonProps = StaticPresetProps & {
+  onCopy: () => string;
+};
+
+const ClipboardIconButton = forwardRef<HTMLButtonElement, ClipboardIconButtonProps>(
+  ({ label, onCopy, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const handleCopy = useCallback(() => {
+      const text = onCopy();
+      if (text) {
+        void navigator.clipboard.writeText(text);
+      }
+    }, [onCopy]);
+    return (
+      <IconButton
+        {...props}
+        icon='ph--clipboard--regular'
+        label={label ?? t('system-button.clipboard.label')}
+        onClick={handleCopy}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+ClipboardIconButton.displayName = 'SystemIconButton.Clipboard';
+
+//
+// Upload
+//
+
+type UploadIconButtonProps = StaticPresetProps &
+  Pick<InputHTMLAttributes<HTMLInputElement>, 'accept'> & {
+    onFileChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
+  };
+
+const UploadIconButton = forwardRef<HTMLButtonElement, UploadIconButtonProps>(
+  ({ accept, onFileChange, label, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+    return (
+      <>
+        <input className='sr-only' type='file' accept={accept} onChange={onFileChange} ref={fileInputRef} />
+        <IconButton
+          icon='ph--upload-simple--regular'
+          label={label ?? t('system-button.upload.label')}
+          {...props}
+          onClick={() => fileInputRef.current?.click()}
+          ref={forwardedRef}
+        />
+      </>
+    );
+  },
+);
+
+UploadIconButton.displayName = 'SystemIconButton.Upload';
+
+//
+// Download
+//
+
+type DownloadIconButtonProps = StaticPresetProps & {
+  filename: string;
+  onDownload: () => Blob | null;
+};
+
+const DownloadIconButton = forwardRef<HTMLButtonElement, DownloadIconButtonProps>(
+  ({ filename, onDownload, label, ...props }, forwardedRef) => {
+    const { t } = useTranslation(translationKey);
+    const handleDownload = useCallback(() => {
+      const blob = onDownload();
+      if (!blob) {
+        return;
+      }
+
+      const url = URL.createObjectURL(blob);
+
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      a.click();
+
+      URL.revokeObjectURL(url);
+    }, [onDownload]);
+    return (
+      <IconButton
+        icon='ph--download-simple--regular'
+        label={label ?? t('system-button.download.label')}
+        {...props}
+        onClick={handleDownload}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+DownloadIconButton.displayName = 'SystemIconButton.Download';
+
+//
+// Namespace
+//
+
+export const SystemIconButton = {
+  Star: StarIconButton,
+  Bookmark: BookmarkIconButton,
+  Expander: ExpanderIconButton,
+  Add: AddIconButton,
+  Delete: DeleteIconButton,
+  Edit: EditIconButton,
+  Close: CloseIconButton,
+  Clipboard: ClipboardIconButton,
+  Upload: UploadIconButton,
+  Download: DownloadIconButton,
+};
+
+export type {
+  ClipboardIconButtonProps,
+  DownloadIconButtonProps,
+  StaticPresetProps,
+  TogglePresetProps,
+  UploadIconButtonProps,
+};

package/src/components/Button/ToggleGroup.tsx

@@ -46,5 +46,5 @@ const ToggleGroupIconItem = forwardRef<HTMLButtonElement, ToggleGroupIconItemPro
   },
 );
 
-export { ToggleGroup, ToggleGroupItem, ToggleGroupIconItem };
-export type { ToggleGroupProps, ToggleGroupItemProps };
+export { ToggleGroup, ToggleGroupIconItem, ToggleGroupItem };
+export type { ToggleGroupItemProps, ToggleGroupProps };

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,8 @@
 
 export * from './Button';
 export * from './IconButton';
+export * from './MicButton';
+export * from './SystemIconButton';
 export * from './Toggle';
 export * from './ToggleGroup';
+export * from './ToggleIconButton';

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

@@ -51,6 +51,8 @@ const day: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
     'outline-none',
     'data-[hovered]:bg-hover-surface',
     'data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500',
+    // Highlight today (overridden by the selected style below when today is also the selected day).
+    'data-[today]:text-orange-500 data-[today]:font-medium',
     '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',

package/src/components/Calendar/Calendar.tsx

@@ -3,20 +3,20 @@
 //
 
 import { CalendarDate, parseDate } from '@internationalized/date';
-import React, { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import React, { type ComponentPropsWithoutRef, type ReactNode, forwardRef } from 'react';
 import {
+  type DateValue,
   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,
+  type CalendarProps as RACCalendarProps,
   Heading as RACHeading,
   RangeCalendar as RACRangeCalendar,
   type RangeCalendarProps as RACRangeCalendarProps,
-  type DateValue,
 } from 'react-aria-components';
 
 import { type ClassNameValue } from '@dxos/ui-types';

package/src/components/Card/Card.stories.tsx

@@ -6,21 +6,21 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef } from 'react';
 
 import { random } from '@dxos/random';
-import { Icon } from '@dxos/react-ui';
+import { Icon, IconButton } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Card } from './Card';
 
 random.seed(0);
 
-type DefaultStoryProps = {
+type StoryArgs = {
   title: string;
   description?: string;
   image?: string;
   fullWidth?: boolean;
 };
 
-const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProps) => {
+const DefaultStory = ({ title, description, image, fullWidth }: StoryArgs) => {
   const handleRef = useRef<HTMLButtonElement>(null);
   console.log(title);
   return (
@@ -32,10 +32,16 @@ const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProp
       </Card.Header>
       <Card.Body>
         <Card.Poster alt='Card.Poster' image={image} />
-        <Card.Row icon='ph--dot-outline--regular'>
+        <Card.Row>
+          <Card.Block>
+            <Icon icon='ph--dot-outline--regular' />
+          </Card.Block>
           <Card.Text>Card.Text (default)</Card.Text>
         </Card.Row>
-        <Card.Row icon='ph--dot-outline--regular'>
+        <Card.Row>
+          <Card.Block>
+            <Icon icon='ph--dot-outline--regular' />
+          </Card.Block>
           <Card.Text variant='description'>
             Card.Text (description)
             <br />
@@ -52,7 +58,13 @@ const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProp
 const meta = {
   title: 'ui/react-ui-core/components/Card',
   render: DefaultStory,
-  decorators: [withTheme(), withLayout({ layout: 'centered', classNames: 'grid w-[30rem] place-items-center' })],
+  decorators: [
+    withTheme(),
+    withLayout({
+      layout: 'centered',
+      classNames: 'grid w-[30rem] place-items-center bg-transparent',
+    }),
+  ],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;
@@ -147,26 +159,56 @@ export const Description: Story = {
   },
 };
 
-export const Mock = () => (
-  <div className='grid grid-cols-[2rem_1fr_2rem] w-full dx-card-min-width dx-card-max-width border border-separator rounded-xs'>
-    <div className='grid grid-cols-subgrid col-span-full'>
-      <div className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
-        <Icon icon='ph--dots-six-vertical--regular' />
-      </div>
-      <div className='p-1 whitespace-normal break-words text-description items-center'>
-        This line is very very long and it should wrap.
-      </div>
-      <div className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
-        <Icon icon='ph--x--regular' />
-      </div>
-    </div>
-    <div className='grid grid-cols-subgrid col-span-3'>
-      <div className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
-        <Icon icon='ph--dots-six-vertical--regular' />
-      </div>
-      <div className='p-1 text-description items-center col-span-2'>
-        This line is very very long and it should wrap.
-      </div>
-    </div>
-  </div>
-);
+export const Slots: Story = {
+  args: {
+    title: random.commerce.productName(),
+  },
+  render: ({ title }) => {
+    const showLeading = true;
+    return (
+      <Card.Root>
+        <Card.Header>
+          <Card.Title>{title}</Card.Title>
+          <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+        </Card.Header>
+        <Card.Body>
+          {/* Leading passive icon. */}
+          <Card.Row>
+            <Card.Block>
+              <Icon icon='ph--user--regular' />
+            </Card.Block>
+            <Card.Text>Start slot — passive Icon</Card.Text>
+          </Card.Row>
+          {/* Passive icon + trailing IconButton: the two gutters align to the pixel. */}
+          <Card.Row>
+            <Card.Block>
+              <Icon icon='ph--at--regular' />
+            </Card.Block>
+            <Card.Text>Start Icon + end IconButton (aligned)</Card.Text>
+            <Card.Block end>
+              <IconButton iconOnly variant='ghost' icon='ph--x--regular' label='Remove' onClick={() => {}} />
+            </Card.Block>
+          </Card.Row>
+          {/* Conditional leading slot: when falsy, content stays in the center track. */}
+          <Card.Row>
+            {showLeading && (
+              <Card.Block>
+                <Icon icon='ph--calendar--regular' />
+              </Card.Block>
+            )}
+            <Card.Text>Conditional start slot</Card.Text>
+          </Card.Row>
+          {/* asChild: the anchor itself becomes the trailing gutter cell. */}
+          <Card.Row>
+            <Card.Text>Trailing link via asChild</Card.Text>
+            <Card.Block end asChild>
+              <a href='https://dxos.org' target='_blank' rel='noreferrer'>
+                <Icon icon='ph--arrow-square-out--regular' />
+              </a>
+            </Card.Block>
+          </Card.Row>
+        </Card.Body>
+      </Card.Root>
+    );
+  },
+};

package/src/components/Card/Card.theme.ts

@@ -17,8 +17,7 @@ export type CardStyleProps = {
 
 const root: ComponentFunction<CardStyleProps> = ({ border, fullWidth }, ...etc) =>
   mx(
-    'dx-card dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden',
-    'bg-card-surface',
+    'dx-card dx-card-surface dx-card-min-width dx-card-max-width min-h-(--dx-rail-item) group/card relative overflow-hidden',
     border && 'border border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator',
     fullWidth && 'max-w-none!',
     ...etc,
@@ -26,13 +25,16 @@ const root: ComponentFunction<CardStyleProps> = ({ border, fullWidth }, ...etc)
 
 const header: ComponentFunction<CardStyleProps> = (_, ...etc) =>
   mx(
-    'dx-card__header dx-density-md bg-transparent p-0! gap-0! col-span-3 grid! grid-cols-subgrid! shadow-none [contain:none]',
+    'dx-card__header col-span-3 grid grid-cols-subgrid items-center',
+    '[&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2',
     ...etc,
   );
 
 const title: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__title grow truncate', ...etc);
 
-const body: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__body contents pb-1 last:pb-0', ...etc);
+const body: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__body contents', ...etc);
+
+const block: ComponentFunction<CardStyleProps> = (_props, ...etc) => mx('dx-card__block', ...etc);
 
 const text: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate: _truncate }, ...etc) =>
   mx(
@@ -46,25 +48,40 @@ const textSpan: ComponentFunction<CardStyleProps> = ({ variant = 'default', trun
   mx(variant === 'description' && 'text-sm text-description line-clamp-3', truncate && 'truncate', ...etc);
 
 const poster: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__poster col-span-3 max-h-[200px]', ...etc);
+  mx('dx-card__poster col-span-3 max-h-[200px] select-none pointer-events-none', ...etc);
 
 const posterIcon: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
   mx('dx-card__poster-icon col-span-3 grid place-items-center bg-input-surface text-subdued max-h-[200px]', ...etc);
 
 const action: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__acztion col-span-3 !grid grid-cols-subgrid p-0! w-full text-start overflow-hidden', ...etc);
+  mx(
+    'dx-card__action col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 p-0! gap-0! w-full text-start overflow-hidden',
+    ...etc,
+  );
 
 const actionLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
   mx('dx-card__action-label min-w-0 flex-1 truncate', ...etc);
 
 const link: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__link col-span-3 !grid grid-cols-subgrid group p-0! dx-button dx-focus-ring min-h-1!', ...etc);
+  mx(
+    'dx-card__link col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2 group p-0! dx-button dx-focus-ring min-h-1!',
+    ...etc,
+  );
 
 const linkLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
-  mx('dx-card__link-label min-w-0 flex-1 truncate', ...etc);
+  mx('dx-card__link-label min-w-0 flex-1 truncate text-sm!', ...etc);
 
 const row: ComponentFunction<CardStyleProps> = ({ fullWidth }, ...etc) =>
-  mx('dx-card__row', fullWidth ? 'col-span-full' : 'col-span-3 grid grid-cols-subgrid', ...etc);
+  mx(
+    'dx-card__row overflow-hidden',
+    fullWidth
+      ? 'col-span-full'
+      : // The `>*` selector reaches the real grid item when a content child is `display: contents`
+        // (e.g. `dx-avatar`), which the direct-child selector cannot target. It is inert for normal
+        // block children, whose inner nodes are not grid items of this row.
+        'col-span-3 grid grid-cols-subgrid [&>*:not(.dx-gutter)]:col-start-2 [&>*:not(.dx-gutter)>*]:col-start-2',
+    ...etc,
+  );
 
 // NOTE: Direct children that lack an explicit `col-*` utility default to the
 // Column.Root center track (via `--dx-col`); see `ui-theme`'s `css/components/card.css`.
@@ -79,6 +96,7 @@ export const cardTheme: Theme<CardStyleProps> = {
   header,
   title,
   body,
+  block,
   row,
   section,
   'section-title': sectionTitle,