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

package/src/components/Button/ToggleGroup.tsx

@@ -2,50 +2,46 @@
 // Copyright 2023 DXOS.org
 //
 
-import {
-  ToggleGroupItem as ToggleGroupItemPrimitive,
-  type ToggleGroupItemProps as ToggleGroupItemPrimitiveProps,
-  type ToggleGroupMultipleProps,
-  ToggleGroup as ToggleGroupPrimitive,
-  type ToggleGroupSingleProps,
-} from '@radix-ui/react-toggle-group';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import React, { forwardRef } from 'react';
 
 import { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps } from './Button';
 import { IconButton, type IconButtonProps } from './IconButton';
 
-type ToggleGroupProps = Omit<ToggleGroupSingleProps, 'className'> | Omit<ToggleGroupMultipleProps, 'className'>;
+type ToggleGroupProps =
+  | Omit<ToggleGroupPrimitive.ToggleGroupSingleProps, 'className'>
+  | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps, 'className'>;
 
 const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps & ButtonGroupProps>(
   ({ classNames, children, ...props }, forwardedRef) => {
     return (
-      <ToggleGroupPrimitive {...props} asChild>
+      <ToggleGroupPrimitive.Root {...props} asChild>
         <ButtonGroup {...{ classNames, children }} ref={forwardedRef} />
-      </ToggleGroupPrimitive>
+      </ToggleGroupPrimitive.Root>
     );
   },
 );
 
-type ToggleGroupItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & ButtonProps;
+type ToggleGroupItemProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'className'> & ButtonProps;
 
 const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
   ({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
     return (
-      <ToggleGroupItemPrimitive {...props} asChild>
+      <ToggleGroupPrimitive.Item {...props} asChild>
         <Button {...{ variant, elevation, density, classNames, children }} ref={forwardedRef} />
-      </ToggleGroupItemPrimitive>
+      </ToggleGroupPrimitive.Item>
     );
   },
 );
 
-type ToggleGroupIconItemProps = Omit<ToggleGroupItemPrimitiveProps, 'className'> & IconButtonProps;
+type ToggleGroupIconItemProps = Omit<ToggleGroupPrimitive.ToggleGroupItemProps, 'className'> & IconButtonProps;
 
 const ToggleGroupIconItem = forwardRef<HTMLButtonElement, ToggleGroupIconItemProps>(
   ({ variant, label, icon, size, elevation, density, classNames, ...props }, forwardedRef) => {
     return (
-      <ToggleGroupItemPrimitive {...props} asChild>
+      <ToggleGroupPrimitive.Item {...props} asChild>
         <IconButton {...{ variant, elevation, density, classNames, label, icon, size }} ref={forwardedRef} />
-      </ToggleGroupItemPrimitive>
+      </ToggleGroupPrimitive.Item>
     );
   },
 );

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';

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

@@ -5,36 +5,33 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useRef } from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { Icon } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Card } from './Card';
 
-faker.seed(0);
+random.seed(0);
 
-type StoryProps = {
+type DefaultStoryProps = {
   title: string;
   description?: string;
   image?: string;
   fullWidth?: boolean;
 };
 
-const DefaultStory = ({ title, description, image, fullWidth }: StoryProps) => {
+const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProps) => {
   const handleRef = useRef<HTMLButtonElement>(null);
   console.log(title);
   return (
     <Card.Root fullWidth={fullWidth}>
-      <Card.Toolbar>
+      <Card.Header>
         <Card.DragHandle ref={handleRef} />
         <Card.Title>{title}</Card.Title>
-        <Card.CloseIconButton onClick={() => console.log('close')} />
-      </Card.Toolbar>
-      <Card.Content>
+        <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+      </Card.Header>
+      <Card.Body>
         <Card.Poster alt='Card.Poster' image={image} />
-        <Card.Row icon='ph--dot-outline--regular'>
-          <Card.Heading>Card.Heading</Card.Heading>
-        </Card.Row>
         <Card.Row icon='ph--dot-outline--regular'>
           <Card.Text>Card.Text (default)</Card.Text>
         </Card.Row>
@@ -45,12 +42,9 @@ const DefaultStory = ({ title, description, image, fullWidth }: StoryProps) => {
             {description}
           </Card.Text>
         </Card.Row>
-        <Card.Row icon='ph--dot-outline--regular'>
-          <Card.Heading variant='subtitle'>Card.Heading (subtitle)</Card.Heading>
-        </Card.Row>
         <Card.Action label='Card.Action' onClick={() => console.log('action')} />
         <Card.Link label='Card.Link' href='https://dxos.org' />
-      </Card.Content>
+      </Card.Body>
     </Card.Root>
   );
 };
@@ -65,20 +59,20 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const image = faker.image.url();
+const image = random.image.url();
 
 export const Default: Story = {
   args: {
-    title: faker.commerce.productName(),
-    description: faker.lorem.paragraph(3),
+    title: random.commerce.productName(),
+    description: random.lorem.paragraph(3),
     image,
   },
 };
 
 export const FullWidth: Story = {
   args: {
-    title: faker.commerce.productName(),
-    description: faker.lorem.paragraph(3),
+    title: random.commerce.productName(),
+    description: random.lorem.paragraph(3),
     image,
     fullWidth: true,
   },
@@ -86,17 +80,44 @@ export const FullWidth: Story = {
 
 export const Simple: Story = {
   args: {
-    title: faker.commerce.productName(),
+    title: random.commerce.productName(),
+  },
+  render: ({ title }) => {
+    const handleRef = useRef<HTMLButtonElement>(null);
+    return (
+      <Card.Root>
+        <Card.Header>
+          <Card.DragHandle ref={handleRef} />
+          <Card.Title>{title}</Card.Title>
+          <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+        </Card.Header>
+      </Card.Root>
+    );
+  },
+};
+
+export const Section: Story = {
+  args: {
+    title: random.commerce.productName(),
   },
   render: ({ title }) => {
     const handleRef = useRef<HTMLButtonElement>(null);
     return (
       <Card.Root>
-        <Card.Toolbar>
+        <Card.Header>
           <Card.DragHandle ref={handleRef} />
           <Card.Title>{title}</Card.Title>
-          <Card.CloseIconButton onClick={() => console.log('close')} />
-        </Card.Toolbar>
+          <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+        </Card.Header>
+        <Card.Body>
+          <Card.Section title='Recent'>
+            <Card.Action label='First action' icon='ph--calendar-dot--regular' onClick={() => console.log('1')} />
+            <Card.Action label='Second action' icon='ph--calendar-dot--regular' onClick={() => console.log('2')} />
+          </Card.Section>
+          <Card.Section title='Upcoming'>
+            <Card.Action label='Third action' icon='ph--calendar-dot--regular' onClick={() => console.log('3')} />
+          </Card.Section>
+        </Card.Body>
       </Card.Root>
     );
   },
@@ -104,23 +125,23 @@ export const Simple: Story = {
 
 export const Description: Story = {
   args: {
-    title: faker.commerce.productName(),
-    description: faker.lorem.paragraph(3),
+    title: random.commerce.productName(),
+    description: random.lorem.paragraph(3),
   },
   render: ({ title, description }) => {
     const handleRef = useRef<HTMLButtonElement>(null);
     return (
       <Card.Root>
-        <Card.Toolbar>
+        <Card.Header>
           <Card.DragHandle ref={handleRef} />
           <Card.Title>{title}</Card.Title>
-          <Card.CloseIconButton onClick={() => console.log('close')} />
-        </Card.Toolbar>
-        <Card.Content>
+          <Card.ActionIconButton action='close' onClick={() => console.log('close')} />
+        </Card.Header>
+        <Card.Body>
           <Card.Row>
             <Card.Text variant='description'>{description}</Card.Text>
           </Card.Row>
-        </Card.Content>
+        </Card.Body>
       </Card.Root>
     );
   },
@@ -129,18 +150,18 @@ 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 role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+      <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 role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+      <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 role='none' className='grid h-[var(--dx-rail-item)] w-[var(--dx-rail-item)] place-items-center'>
+      <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'>

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

@@ -0,0 +1,93 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Density, type Theme } from '@dxos/ui-types';
+
+export type CardStyleProps = {
+  border?: boolean;
+  fullWidth?: boolean;
+  srOnly?: boolean;
+  variant?: 'default' | 'subtitle' | 'description';
+  density?: Density;
+  truncate?: boolean;
+  padding?: boolean;
+};
+
+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',
+    border && 'border border-subdued-separator rounded-sm dx-focus-ring-group-y-indicator',
+    fullWidth && 'max-w-none!',
+    ...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]',
+    ...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 text: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate: _truncate }, ...etc) =>
+  mx(
+    'dx-card__text items-center overflow-hidden',
+    variant === 'default' && 'py-1',
+    variant === 'description' && 'py-1.5 text-description',
+    ...etc,
+  );
+
+const textSpan: ComponentFunction<CardStyleProps> = ({ variant = 'default', truncate }, ...etc) =>
+  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);
+
+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);
+
+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);
+
+const linkLabel: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx('dx-card__link-label min-w-0 flex-1 truncate', ...etc);
+
+const row: ComponentFunction<CardStyleProps> = ({ fullWidth }, ...etc) =>
+  mx('dx-card__row', fullWidth ? 'col-span-full' : 'col-span-3 grid grid-cols-subgrid', ...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`.
+const section: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx('dx-card__section col-span-full grid grid-cols-subgrid', ...etc);
+
+const sectionTitle: ComponentFunction<CardStyleProps> = (_props, ...etc) =>
+  mx('dx-card__section-title col-start-2 col-span-full py-2 text-xs text-description font-medium uppercase', ...etc);
+
+export const cardTheme: Theme<CardStyleProps> = {
+  root,
+  header,
+  title,
+  body,
+  row,
+  section,
+  'section-title': sectionTitle,
+  text,
+  'text-span': textSpan,
+  poster,
+  'poster-icon': posterIcon,
+  action,
+  'action-label': actionLabel,
+  link,
+  'link-label': linkLabel,
+};