@dxos/react-ui 0.8.4-main.c85a9c8dae → 0.8.4-main.cb12b3f963

package/src/components/Card/Card.tsx

@@ -4,10 +4,19 @@
 
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type HTMLAttributes, type PropsWithChildren, createContext, forwardRef, useContext } from 'react';
-
-import { mx } from '@dxos/ui-theme';
-import { type Density, type SlottableProps } from '@dxos/ui-types';
+import DOMPurify from 'dompurify';
+import React, {
+  CSSProperties,
+  MouseEventHandler,
+  type PropsWithChildren,
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+} from 'react';
+
+import { composable, composableProps, iconSize, mx, slottable } from '@dxos/ui-theme';
+import { type Density } from '@dxos/ui-types';
 
 import { useThemeContext } from '../../hooks';
 import { Column } from '../../primitives';
@@ -15,12 +24,21 @@ import { type ThemedClassName } from '../../util';
 import { Button } from '../Button';
 import { Icon, type IconProps } from '../Icon';
 import { Image } from '../Image';
-import { Toolbar, type ToolbarMenuItem, type ToolbarMenuProps, type ToolbarRootProps } from '../Toolbar';
+import {
+  Toolbar,
+  ToolbarCloseIconButtonProps,
+  ToolbarDragHandleProps,
+  type ToolbarMenuItem,
+  type ToolbarMenuProps,
+  type ToolbarRootProps,
+} from '../Toolbar';
 
 //
 // Context
 //
 
+const CARD_NAME = 'Card';
+
 type CardContextValue = {
   menuItems?: CardMenuItem<any>[];
 };
@@ -32,165 +50,268 @@ const CardContext = createContext<CardContextValue>({});
 // Root
 //
 
-type CardRootProps = SlottableProps<HTMLDivElement> & {
+const CARD_ROOT_NAME = 'Card.Root';
+
+type CardRootOwnProps = {
   id?: string;
   border?: boolean;
   fullWidth?: boolean;
+  density?: Density;
+  style?: CSSProperties;
+  tabIndex?: number;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  'data-selected'?: boolean;
+  'data-testid'?: string;
 };
 
-const CardRoot = forwardRef<HTMLDivElement, CardRootProps>(
-  ({ children, classNames, className, id, asChild, role, border = true, fullWidth, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+type CardRootProps = CardRootOwnProps;
+
+const CardRoot = slottable<HTMLDivElement, CardRootOwnProps>(
+  ({ children, id, asChild, role, border = true, fullWidth, density, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
 
     return (
       <Comp
-        {...props}
+        {...rest}
         {...(id && { 'data-object-id': id })}
         role={role ?? 'group'}
-        className={tx('card.root', { border, fullWidth }, [className, classNames])}
+        className={tx('card.root', { border, fullWidth }, className)}
         ref={forwardedRef}
       >
-        <Column.Root gutter='rail'>{children}</Column.Root>
+        <Column.Root classNames='overflow-hidden' gutter={density === 'coarse' ? 'lg' : 'md'}>
+          {children}
+        </Column.Root>
       </Comp>
     );
   },
 );
 
+CardRoot.displayName = CARD_ROOT_NAME;
+
 //
 // Toolbar
 //
 
-type CardToolbarProps = ToolbarRootProps & {
-  density?: Density;
-};
+const CARD_TOOLBAR_NAME = 'Card.Toolbar';
 
-// TODO(burdon): Roncile name with DialogHeader.
-const CardToolbar = forwardRef<HTMLDivElement, CardToolbarProps>(
-  ({ children, classNames, density = 'fine', ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+type CardToolbarProps = ToolbarRootProps;
 
-    return (
-      <Toolbar.Root
-        {...props}
-        classNames={[tx('card.toolbar', { coarse: density !== 'fine' }), classNames]}
-        ref={forwardedRef}
-      >
-        {children}
-      </Toolbar.Root>
-    );
-  },
-);
+const CardToolbar = composable<HTMLDivElement, CardToolbarProps>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+
+  return (
+    <Toolbar.Root {...props} style={iconSize(5)} classNames={[tx('card.toolbar', {}), classNames]} ref={forwardedRef}>
+      {children}
+    </Toolbar.Root>
+  );
+});
+
+CardToolbar.displayName = CARD_TOOLBAR_NAME;
+
+//
+// DragHandle
+//
+
+const CARD_DRAG_HANDLE_NAME = 'Card.DragHandle';
+
+type CardDragHandleProps = ToolbarDragHandleProps;
+
+const CardDragHandle = forwardRef<HTMLButtonElement, CardDragHandleProps>((props, forwardedRef) => {
+  return (
+    <CardIconBlock padding>
+      <Toolbar.DragHandle {...props} ref={forwardedRef} />
+    </CardIconBlock>
+  );
+});
+
+CardDragHandle.displayName = CARD_DRAG_HANDLE_NAME;
+
+//
+// CloseIconButton
+//
+
+const CARD_CLOSE_ICON_BUTTON_NAME = 'Card.CloseIconButton';
+
+type CloseIconButtonProps = ToolbarCloseIconButtonProps;
+
+const CloseIconButton = forwardRef<HTMLButtonElement, CloseIconButtonProps>((props, forwardedRef) => {
+  return (
+    <CardIconBlock padding>
+      <Toolbar.CloseIconButton {...props} ref={forwardedRef} />
+    </CardIconBlock>
+  );
+});
+
+CloseIconButton.displayName = CARD_CLOSE_ICON_BUTTON_NAME;
 
 //
-// Menu (delegated to Toolbar.Menu)
+// Menu
 //
 
+const CARD_MENU_NAME = 'Card.Menu';
+
 type CardMenuItem<T extends any | void = void> = ToolbarMenuItem<T>;
+
 type CardMenuProps<T extends any | void = void> = ToolbarMenuProps<T>;
 
-const CardMenu = <T extends any | void = void>({ context, items }: CardMenuProps<T>) => {
+const CardMenu = <T extends any | void = void>({ context, items, ...props }: CardMenuProps<T>) => {
   const { menuItems } = useContext(CardContext) ?? {};
   const combinedItems = [...(items ?? []), ...((menuItems as CardMenuItem<T>[]) ?? [])];
 
-  return <Toolbar.Menu context={context} items={combinedItems} />;
+  return (
+    <CardIconBlock padding>
+      <Toolbar.Menu {...props} context={context} items={combinedItems} />
+    </CardIconBlock>
+  );
 };
 
+(CardMenu as any).displayName = CARD_MENU_NAME;
+
 //
-// Title
+// Icon
 //
 
-type CardTitleProps = SlottableProps<HTMLDivElement>;
+const CARD_ICON_NAME = 'Card.Icon';
 
-const CardTitle = forwardRef<HTMLDivElement, CardTitleProps>(
-  ({ children, classNames, className, asChild, role, ...props }, forwardedRef) => {
+const CardIcon = (props: IconProps) => {
+  return (
+    <CardIconBlock>
+      <Icon {...props} />
+    </CardIconBlock>
+  );
+};
+
+(CardIcon as any).displayName = CARD_ICON_NAME;
+
+//
+// IconBlock
+//
+
+const CARD_ICON_BLOCK_NAME = 'Card.IconBlock';
+
+const CardIconBlock = forwardRef<HTMLDivElement, ThemedClassName<PropsWithChildren<{ padding?: boolean }>>>(
+  ({ classNames, children, padding, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Comp = asChild ? Slot : Primitive.div;
 
     return (
-      <Comp
-        {...props}
-        role={role ?? 'heading'}
-        className={tx('card.title', {}, [className, classNames])}
-        ref={forwardedRef}
-      >
+      <div {...props} role='none' className={tx('card.icon-block', { padding }, classNames)} ref={forwardedRef}>
         {children}
-      </Comp>
+      </div>
     );
   },
 );
 
+CardIconBlock.displayName = CARD_ICON_BLOCK_NAME;
+
+//
+// Title
+//
+
+const CARD_TITLE_NAME = 'Card.Title';
+
+const CardTitle = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const { className, ...rest } = composableProps(props, { role: 'heading' });
+  const Comp = asChild ? Slot : Primitive.div;
+
+  return (
+    <Comp {...rest} className={tx('card.title', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+CardTitle.displayName = CARD_TITLE_NAME;
+
 //
 // Content
 //
 
-type CardContentProps = SlottableProps<HTMLDivElement>;
+const CARD_CONTENT_NAME = 'Card.Content';
 
-const CardContent = forwardRef<HTMLDivElement, CardContentProps>(({ children, role, ...props }, forwardedRef) => {
+const CardContent = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
   const { tx } = useThemeContext();
 
   return (
-    <div {...props} role={role ?? 'none'} className={tx('card.content', {})} ref={forwardedRef}>
+    <Comp {...rest} className={tx('card.content', {}, className)} ref={forwardedRef}>
       {children}
-    </div>
+    </Comp>
   );
 });
 
+CardContent.displayName = CARD_CONTENT_NAME;
+
 //
 // Row
 //
 
-type CardRowProps = SlottableProps<HTMLDivElement> & { icon?: string };
+const CARD_ROW_NAME = 'Card.Row';
 
-const CardRow = forwardRef<HTMLDivElement, CardRowProps>(
-  ({ children, classNames, className, role, icon, ...props }, forwardedRef) => {
-    return (
-      <Column.Row {...props} role={role ?? 'none'} classNames={[classNames, className]} ref={forwardedRef}>
-        {(icon && <CardIcon classNames='text-subdued' icon={icon} />) || <div />}
-        {children}
-        <div />
-      </Column.Row>
-    );
-  },
-);
+type CardRowProps = { icon?: string; fullWidth?: boolean };
+
+const CardRow = slottable<HTMLDivElement, CardRowProps>(({ children, asChild, icon, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+
+  return (
+    <Comp {...rest} className={tx('card.row', {}, className)} ref={forwardedRef}>
+      {(icon && <CardIcon classNames='text-subdued' icon={icon} size={4} />) || <div />}
+      {children}
+    </Comp>
+  );
+});
+
+CardRow.displayName = CARD_ROW_NAME;
 
 //
 // Section
 //
 
-type CardSectionProps = SlottableProps<HTMLDivElement>;
+const CARD_SECTION_NAME = 'Card.Section';
 
-const CardSection = forwardRef<HTMLDivElement, CardSectionProps>(
-  ({ children, classNames, className, asChild, role, ...props }, forwardedRef) => {
-    const Comp = asChild ? Slot : Primitive.div;
+/**
+ * @deprecated Merge with Card.Row fullWidth
+ */
+const CardSection = slottable<HTMLDivElement>(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
 
-    return (
-      <Comp {...props} role={role ?? 'none'} className={mx(classNames, className, 'col-span-full')} ref={forwardedRef}>
-        {children}
-      </Comp>
-    );
-  },
-);
+  return (
+    <Comp {...rest} role={role ?? 'none'} className={mx('col-span-full', className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+CardSection.displayName = CARD_SECTION_NAME;
 
 //
 // Heading
 //
 
-type CardHeadingProps = SlottableProps<HTMLDivElement> & { variant?: 'default' | 'subtitle' };
+const CARD_HEADING_NAME = 'Card.Heading';
+
+type CardHeadingProps = { variant?: 'default' | 'subtitle' };
 
 /**
  * @deprecated Use typography.
  */
-const CardHeading = forwardRef<HTMLDivElement, CardHeadingProps>(
-  ({ children, classNames, className, asChild, role, variant = 'default', ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+const CardHeading = slottable<HTMLDivElement, CardHeadingProps>(
+  ({ children, asChild, role, variant = 'default', ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
 
     return (
       <Comp
-        {...props}
+        {...rest}
         role={role ?? 'heading'}
-        className={tx('card.heading', { variant }, [classNames, className])}
+        className={tx('card.heading', { variant }, className)}
         ref={forwardedRef}
       >
         {children}
@@ -199,48 +320,94 @@ const CardHeading = forwardRef<HTMLDivElement, CardHeadingProps>(
   },
 );
 
+CardHeading.displayName = CARD_HEADING_NAME;
+
 //
 // Text
 //
 
-type CardTextProps = SlottableProps<HTMLDivElement> & { truncate?: boolean; variant?: 'default' | 'description' };
+const CARD_TEXT_NAME = 'Card.Text';
 
-const CardText = forwardRef<HTMLDivElement, CardTextProps>(
-  ({ children, classNames, className, asChild, role, truncate, variant = 'default', ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+type CardTextProps = { truncate?: boolean; variant?: 'default' | 'description' };
+
+const CardText = slottable<HTMLDivElement, CardTextProps>(
+  ({ children, asChild, role, truncate, variant = 'default', ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
     const Comp = asChild ? Slot : Primitive.div;
+    const { tx } = useThemeContext();
 
     return (
-      <Comp
-        {...props}
-        role={role ?? 'none'}
-        className={tx('card.text', { variant }, [classNames, className])}
-        ref={forwardedRef}
-      >
+      <Comp {...rest} role={role ?? 'none'} className={tx('card.text', { variant }, className)} ref={forwardedRef}>
         <span className={tx('card.text-span', { variant, truncate })}>{children}</span>
       </Comp>
     );
   },
 );
 
+CardText.displayName = CARD_TEXT_NAME;
+
+//
+// Html
+//
+
+const CARD_HTML_NAME = 'Card.Html';
+
+type CardHtmlProps = { html: string; variant?: 'default' | 'description' };
+
+/**
+ * Renders sanitized HTML content inside a card text slot.
+ * Uses DOMPurify to prevent XSS from untrusted markup (e.g. RSS feed content).
+ */
+const CardHtml = ({ html, variant = 'default', ...props }: CardHtmlProps & ThemedClassName<object>) => {
+  const { tx } = useThemeContext();
+  const sanitized = useMemo(() => DOMPurify.sanitize(html), [html]);
+
+  return (
+    <div
+      {...props}
+      role='none'
+      className={tx('card.text', { variant })}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: sanitized }}
+    />
+  );
+};
+
+(CardHtml as any).displayName = CARD_HTML_NAME;
+
 //
 // Poster
 //
 
+const CARD_POSTER_NAME = 'Card.Poster';
+
 type CardPosterProps = ThemedClassName<
   {
     alt: string;
     aspect?: 'video' | 'auto';
+    /**
+     * How the image fills the poster box. `'contain'` (default) preserves
+     * aspect ratio and may letterbox; `'cover'` fills the box edge-to-edge,
+     * cropping as needed. Forwarded to the underlying `Image`'s
+     * `object-fit`.
+     */
+    fit?: 'contain' | 'cover';
   } & Partial<{ image: string; icon: string }>
 >;
 
 const CardPoster = (props: CardPosterProps) => {
   const { tx } = useThemeContext();
   const aspect = props.aspect === 'auto' ? 'aspect-auto' : 'aspect-video';
+
   if (props.image) {
     return (
-      <div role='none' className='col-span-full mb-1'>
-        <Image classNames={[tx('card.poster', {}), aspect, props.classNames]} src={props.image} alt={props.alt} />
+      <div role='none' className='col-span-full'>
+        <Image
+          classNames={[tx('card.poster', {}), aspect, props.classNames]}
+          src={props.image}
+          alt={props.alt}
+          fit={props.fit}
+        />
       </div>
     );
   }
@@ -254,27 +421,35 @@ const CardPoster = (props: CardPosterProps) => {
   }
 };
 
+(CardPoster as any).displayName = CARD_POSTER_NAME;
+
 //
 // Action
 //
 
+const CARD_ACTION_NAME = 'Card.Action';
+
 type CardActionProps = { icon?: string; label: string; actionIcon?: string; onClick?: () => void };
 
 const CardAction = ({ icon, actionIcon = 'ph--arrow-right--regular', label, onClick }: CardActionProps) => {
   const { tx } = useThemeContext();
   return (
     <Button variant='ghost' classNames={tx('card.action', {})} onClick={onClick}>
-      {icon ? <CardIcon classNames='text-subdued' icon={icon} /> : <div />}
+      {icon ? <CardIcon classNames='text-subdued' icon={icon} size={4} /> : <div />}
       <span className={tx('card.action-label', {}, !actionIcon ? 'col-span-2' : undefined)}>{label}</span>
-      {actionIcon && <CardIcon icon={actionIcon} />}
+      {actionIcon && <CardIcon icon={actionIcon} size={4} />}
     </Button>
   );
 };
 
+(CardAction as any).displayName = CARD_ACTION_NAME;
+
 //
 // Link
 //
 
+const CARD_LINK_NAME = 'Card.Link';
+
 type CardLinkProps = { label: string; href: string };
 
 const CardLink = ({ label, href }: CardLinkProps) => {
@@ -288,35 +463,7 @@ const CardLink = ({ label, href }: CardLinkProps) => {
   );
 };
 
-//
-// Icon
-//
-
-const CardIcon = ({ toolbar, ...props }: IconProps & { toolbar?: boolean }) => {
-  return (
-    <CardIconBlock>
-      <Icon {...props} size={toolbar ? 5 : 4} />
-    </CardIconBlock>
-  );
-};
-
-//
-// IconBlock
-//
-
-const CardIconBlock = ({
-  classNames,
-  children,
-  role,
-  ...props
-}: ThemedClassName<PropsWithChildren<HTMLAttributes<HTMLDivElement>>>) => {
-  const { tx } = useThemeContext();
-  return (
-    <div {...props} role={role ?? 'none'} className={tx('card.icon-block', {}, classNames)}>
-      {children}
-    </div>
-  );
-};
+(CardLink as any).displayName = CARD_LINK_NAME;
 
 //
 // Card
@@ -329,14 +476,14 @@ export const Card = {
   Toolbar: CardToolbar,
   ToolbarIconButton: Toolbar.IconButton,
   ToolbarSeparator: Toolbar.Separator,
-  DragHandle: forwardRef<HTMLButtonElement, Parameters<typeof Toolbar.DragHandle>[0]>((props, ref) => (
-    <Toolbar.DragHandle testId='card-drag-handle' {...props} ref={ref} />
-  )),
-  CloseIconButton: Toolbar.CloseIconButton,
-  Title: CardTitle,
+
+  // Toolbar blocks
+  IconBlock: CardIconBlock,
+  DragHandle: CardDragHandle,
+  CloseIconButton: CloseIconButton,
   Menu: CardMenu,
   Icon: CardIcon,
-  IconBlock: CardIconBlock,
+  Title: CardTitle,
 
   // Content
   Content: CardContent,
@@ -344,9 +491,17 @@ export const Card = {
   Section: CardSection,
   Heading: CardHeading,
   Text: CardText,
+  Html: CardHtml,
   Poster: CardPoster,
   Action: CardAction,
   Link: CardLink,
 };
 
-export type { CardContextValue, CardRootProps, CardToolbarProps, CardMenuProps };
+export type {
+  CardContextValue,
+  CardRootProps,
+  CardToolbarProps,
+  CardDragHandleProps,
+  CloseIconButtonProps,
+  CardMenuProps,
+};

package/src/components/Clipboard/CopyButton.tsx

@@ -10,7 +10,6 @@ import { Button, type ButtonProps, IconButton } from '../Button';
 import { Icon, type IconProps } from '../Icon';
 import { useTranslation } from '../ThemeProvider';
 import { type TooltipScopedProps, useTooltipContext } from '../Tooltip';
-
 import { useClipboard } from './ClipboardProvider';
 
 export type CopyButtonProps = ButtonProps &
@@ -32,11 +31,11 @@ export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButton
       data-testid='copy-invitation'
     >
       <div role='none' className={mx('flex gap-1 items-center', isCopied && inactiveLabelStyles)}>
-        <span className='px-1'>{t('copy label')}</span>
+        <span className='px-1'>{t('copy.label')}</span>
         <Icon icon='ph--copy--regular' size={size} />
       </div>
       <div role='none' className={mx('flex gap-1 items-center', !isCopied && inactiveLabelStyles)}>
-        <span className='px-1'>{t('copy success label')}</span>
+        <span className='px-1'>{t('copy-success.label')}</span>
         <Icon icon='ph--check--regular' size={size} />
       </div>
     </Button>
@@ -58,7 +57,7 @@ export const CopyButtonIconOnly = ({
   const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
-  const label = isCopied ? t('copy success label') : (props.label ?? t('copy label'));
+  const label = isCopied ? t('copy-success.label') : (props.label ?? t('copy.label'));
   const { onOpen } = useTooltipContext('CopyButton', __scopeTooltip);
   return (
     <IconButton

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

@@ -5,14 +5,13 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { AlertDialog } from './AlertDialog';
 
-type StoryProps = Partial<{
+type DefaultStoryProps = Partial<{
   title: string;
   description: string;
   openTrigger: string;
@@ -20,7 +19,7 @@ type StoryProps = Partial<{
   actionTrigger: string;
 }>;
 
-const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: StoryProps) => {
+const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: DefaultStoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -60,8 +59,8 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: faker.lorem.sentence(3),
-    description: faker.lorem.paragraph(1),
+    title: random.lorem.sentence(3),
+    description: random.lorem.paragraph(1),
     openTrigger: 'Open AlertDialog',
     cancelTrigger: 'Cancel',
     actionTrigger: 'Action',