@dxos/react-ui 0.8.4-main.7ace549 → 0.8.4-main.8360d9e660

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

@@ -0,0 +1,151 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useRef } from 'react';
+
+import { faker } from '@dxos/random';
+import { Icon } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Card } from './Card';
+
+faker.seed(0);
+
+type StoryProps = {
+  title: string;
+  description?: string;
+  image?: string;
+  fullWidth?: boolean;
+};
+
+const DefaultStory = ({ title, description, image, fullWidth }: StoryProps) => {
+  const handleRef = useRef<HTMLButtonElement>(null);
+  console.log(title);
+  return (
+    <Card.Root fullWidth={fullWidth}>
+      <Card.Toolbar>
+        <Card.DragHandle ref={handleRef} />
+        <Card.Title>{title}</Card.Title>
+        <Card.CloseIconButton onClick={() => console.log('close')} />
+      </Card.Toolbar>
+      <Card.Content>
+        <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>
+        <Card.Row icon='ph--dot-outline--regular'>
+          <Card.Text variant='description'>
+            Card.Text (description)
+            <br />
+            {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.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/Card',
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'centered', classNames: 'grid w-[30rem] place-items-center' })],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const image = faker.image.url();
+
+export const Default: Story = {
+  args: {
+    title: faker.commerce.productName(),
+    description: faker.lorem.paragraph(3),
+    image,
+  },
+};
+
+export const FullWidth: Story = {
+  args: {
+    title: faker.commerce.productName(),
+    description: faker.lorem.paragraph(3),
+    image,
+    fullWidth: true,
+  },
+};
+
+export const Simple: Story = {
+  args: {
+    title: faker.commerce.productName(),
+  },
+  render: ({ title }) => {
+    const handleRef = useRef<HTMLButtonElement>(null);
+    return (
+      <Card.Root>
+        <Card.Toolbar>
+          <Card.DragHandle ref={handleRef} />
+          <Card.Title>{title}</Card.Title>
+          <Card.CloseIconButton onClick={() => console.log('close')} />
+        </Card.Toolbar>
+      </Card.Root>
+    );
+  },
+};
+
+export const Description: Story = {
+  args: {
+    title: faker.commerce.productName(),
+    description: faker.lorem.paragraph(3),
+  },
+  render: ({ title, description }) => {
+    const handleRef = useRef<HTMLButtonElement>(null);
+    return (
+      <Card.Root>
+        <Card.Toolbar>
+          <Card.DragHandle ref={handleRef} />
+          <Card.Title>{title}</Card.Title>
+          <Card.CloseIconButton onClick={() => console.log('close')} />
+        </Card.Toolbar>
+        <Card.Content>
+          <Card.Row>
+            <Card.Text variant='description'>{description}</Card.Text>
+          </Card.Row>
+        </Card.Content>
+      </Card.Root>
+    );
+  },
+};
+
+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'>
+        <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'>
+        <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'>
+        <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>
+);

package/src/components/Card/Card.tsx

@@ -0,0 +1,390 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, {
+  CSSProperties,
+  type HTMLAttributes,
+  type PropsWithChildren,
+  createContext,
+  forwardRef,
+  useContext,
+} from 'react';
+
+import { composableProps, largeIconSize, mx } from '@dxos/ui-theme';
+import { type Density, type SlottableProps } from '@dxos/ui-types';
+
+import { useThemeContext } from '../../hooks';
+import { Column } from '../../primitives';
+import { type ThemedClassName } from '../../util';
+import { Button } from '../Button';
+import { Icon, type IconProps } from '../Icon';
+import { Image } from '../Image';
+import {
+  Toolbar,
+  ToolbarCloseIconButtonProps,
+  ToolbarDragHandleProps,
+  type ToolbarMenuItem,
+  type ToolbarMenuProps,
+  type ToolbarRootProps,
+} from '../Toolbar';
+
+//
+// Context
+//
+
+type CardContextValue = {
+  menuItems?: CardMenuItem<any>[];
+};
+
+/** @deprecated Use context for menus. */
+const CardContext = createContext<CardContextValue>({});
+
+//
+// Root
+//
+
+type CardRootProps = SlottableProps<
+  HTMLDivElement,
+  {
+    id?: string;
+    border?: boolean;
+    fullWidth?: boolean;
+    density?: Density;
+  }
+>;
+
+const CardRoot = forwardRef<HTMLDivElement, CardRootProps>(
+  ({ 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
+        {...rest}
+        {...(id && { 'data-object-id': id })}
+        role={role ?? 'group'}
+        className={tx('card.root', { border, fullWidth }, className)}
+        ref={forwardedRef}
+      >
+        <Column.Root gutter={density === 'coarse' ? 'lg' : 'md'}>{children}</Column.Root>
+      </Comp>
+    );
+  },
+);
+
+//
+// Toolbar
+//
+
+type CardToolbarProps = ToolbarRootProps;
+
+const CardToolbar = forwardRef<HTMLDivElement, CardToolbarProps>(({ children, classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+
+  return (
+    <Toolbar.Root {...props} style={largeIconSize} classNames={[tx('card.toolbar', {}), classNames]} ref={forwardedRef}>
+      {children}
+    </Toolbar.Root>
+  );
+});
+
+//
+// DragHandle
+//
+
+type CardDragHandleProps = ToolbarDragHandleProps;
+
+const CardDragHandle = forwardRef<HTMLButtonElement, CardDragHandleProps>((props, forwardedRef) => {
+  return (
+    <CardIconBlock>
+      <Toolbar.DragHandle {...props} testId='card-drag-handle' ref={forwardedRef} />
+    </CardIconBlock>
+  );
+});
+
+//
+// CloseIconButton
+//
+
+type CloseIconButtonProps = ToolbarCloseIconButtonProps;
+
+const CloseIconButton = forwardRef<HTMLButtonElement, CloseIconButtonProps>((props, forwardedRef) => {
+  return (
+    <CardIconBlock>
+      <Toolbar.CloseIconButton {...props} ref={forwardedRef} />
+    </CardIconBlock>
+  );
+});
+
+//
+// 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, ...props }: CardMenuProps<T>) => {
+  const { menuItems } = useContext(CardContext) ?? {};
+  const combinedItems = [...(items ?? []), ...((menuItems as CardMenuItem<T>[]) ?? [])];
+
+  return (
+    <CardIconBlock>
+      <Toolbar.Menu {...props} context={context} items={combinedItems} />
+    </CardIconBlock>
+  );
+};
+
+//
+// Icon
+//
+
+const CardIcon = (props: IconProps) => {
+  return (
+    <CardIconBlock>
+      <Icon {...props} />
+    </CardIconBlock>
+  );
+};
+
+//
+// IconBlock
+//
+
+const CardIconBlock = forwardRef<HTMLDivElement, ThemedClassName<PropsWithChildren>>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <div {...props} role='none' className={tx('card.icon-block', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </div>
+    );
+  },
+);
+
+//
+// Title
+//
+
+type CardTitleProps = SlottableProps<HTMLDivElement>;
+
+const CardTitle = forwardRef<HTMLDivElement, CardTitleProps>(({ children, asChild, role, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+
+  return (
+    <Comp {...rest} role={role ?? 'heading'} className={tx('card.title', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+//
+// Content
+//
+
+type CardContentProps = SlottableProps<HTMLDivElement>;
+
+const CardContent = forwardRef<HTMLDivElement, CardContentProps>(({ children, role, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+
+  return (
+    <div {...props} role={role ?? 'none'} className={tx('card.content', {})} ref={forwardedRef}>
+      {children}
+    </div>
+  );
+});
+
+//
+// Row
+//
+
+type CardRowProps = SlottableProps<HTMLDivElement, { icon?: string }>;
+
+const CardRow = forwardRef<HTMLDivElement, CardRowProps>(({ children, role, icon, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props);
+  return (
+    <Column.Row {...rest} role={role ?? 'none'} classNames={className} ref={forwardedRef}>
+      {(icon && <CardIcon classNames='text-subdued' icon={icon} />) || <div />}
+      {children}
+      <div />
+    </Column.Row>
+  );
+});
+
+//
+// Section
+//
+
+type CardSectionProps = SlottableProps<HTMLDivElement>;
+
+const CardSection = forwardRef<HTMLDivElement, CardSectionProps>(
+  ({ children, asChild, role, ...props }, forwardedRef) => {
+    const { className, ...rest } = composableProps(props);
+    const Comp = asChild ? Slot : Primitive.div;
+
+    return (
+      <Comp {...rest} role={role ?? 'none'} className={mx('col-span-full', className)} ref={forwardedRef}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+//
+// Heading
+//
+
+type CardHeadingProps = SlottableProps<HTMLDivElement, { variant?: 'default' | 'subtitle' }>;
+
+/**
+ * @deprecated Use typography.
+ */
+const CardHeading = forwardRef<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
+        {...rest}
+        role={role ?? 'heading'}
+        className={tx('card.heading', { variant }, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+//
+// Text
+//
+
+type CardTextProps = SlottableProps<HTMLDivElement, { truncate?: boolean; variant?: 'default' | 'description' }>;
+
+const CardText = forwardRef<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 {...rest} role={role ?? 'none'} className={tx('card.text', { variant }, className)} ref={forwardedRef}>
+        <span className={tx('card.text-span', { variant, truncate })}>{children}</span>
+      </Comp>
+    );
+  },
+);
+
+//
+// Poster
+//
+
+type CardPosterProps = ThemedClassName<
+  {
+    alt: string;
+    aspect?: 'video' | 'auto';
+  } & 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>
+    );
+  }
+
+  if (props.icon) {
+    return (
+      <div role='image' className={tx('card.poster-icon', {}, [aspect, props.classNames])} aria-label={props.alt}>
+        <Icon icon={props.icon} size={10} />
+      </div>
+    );
+  }
+};
+
+//
+// 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 />}
+      <span className={tx('card.action-label', {}, !actionIcon ? 'col-span-2' : undefined)}>{label}</span>
+      {actionIcon && <CardIcon icon={actionIcon} />}
+    </Button>
+  );
+};
+
+//
+// Link
+//
+
+type CardLinkProps = { label: string; href: string };
+
+const CardLink = ({ label, href }: CardLinkProps) => {
+  const { tx } = useThemeContext();
+  return (
+    <a className={tx('card.link', {})} data-variant='ghost' href={href} target='_blank' rel='noreferrer'>
+      <CardIcon classNames='text-subdued' icon='ph--link--regular' />
+      <span className={tx('card.link-label', {})}>{label}</span>
+      <CardIcon classNames='invisible group-hover:visible' icon='ph--arrow-square-out--regular' />
+    </a>
+  );
+};
+
+//
+// Card
+//
+
+export const Card = {
+  Root: CardRoot,
+
+  // Toolbar
+  Toolbar: CardToolbar,
+  ToolbarIconButton: Toolbar.IconButton,
+  ToolbarSeparator: Toolbar.Separator,
+
+  // Toolbar blocks
+  IconBlock: CardIconBlock,
+  DragHandle: CardDragHandle,
+  CloseIconButton: CloseIconButton,
+  Menu: CardMenu,
+  Icon: CardIcon,
+  Title: CardTitle,
+
+  // Content
+  Content: CardContent,
+  Row: CardRow,
+  Section: CardSection,
+  Heading: CardHeading,
+  Text: CardText,
+  Poster: CardPoster,
+  Action: CardAction,
+  Link: CardLink,
+};
+
+export type {
+  CardContextValue,
+  CardRootProps,
+  CardToolbarProps,
+  CardDragHandleProps,
+  CloseIconButtonProps,
+  CardMenuProps,
+};

package/src/components/Card/index.ts

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

package/src/components/Clipboard/CopyButton.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx, osTranslations } from '@dxos/ui-theme';
 
 import { Button, type ButtonProps, IconButton } from '../Button';
 import { Icon, type IconProps } from '../Icon';
@@ -18,10 +18,10 @@ export type CopyButtonProps = ButtonProps &
     value: string;
   };
 
-const inactiveLabelStyles = 'invisible bs-px -mbe-px overflow-hidden';
+const inactiveLabelStyles = 'invisible h-px -mb-px overflow-hidden';
 
 export const CopyButton = ({ classNames, value, size = 5, ...props }: CopyButtonProps) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   return (
@@ -32,11 +32,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='pli-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='pli-1'>{t('copy success label')}</span>
+        <span className='px-1'>{t('copy success label')}</span>
         <Icon icon='ph--check--regular' size={size} />
       </div>
     </Button>
@@ -55,7 +55,7 @@ export const CopyButtonIconOnly = ({
   variant,
   ...props
 }: TooltipScopedProps<CopyButtonIconOnlyProps>) => {
-  const { t } = useTranslation('os');
+  const { t } = useTranslation(osTranslations);
   const { textValue, setTextValue } = useClipboard();
   const isCopied = textValue === value;
   const label = isCopied ? t('copy success label') : (props.label ?? t('copy label'));

package/src/components/DensityProvider/DensityProvider.tsx

@@ -4,7 +4,7 @@
 
 import React, { type PropsWithChildren, createContext } from 'react';
 
-import { type Density } from '@dxos/react-ui-types';
+import { type Density } from '@dxos/ui-types';
 
 export interface DensityContextValue {
   density?: Density;

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

@@ -5,22 +5,22 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { faker } from '@dxos/random';
+
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-import { Toolbar } from '../Toolbar';
 
 import { AlertDialog } from './AlertDialog';
 
 type StoryProps = 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 }: StoryProps) => {
   return (
     <AlertDialog.Root defaultOpen>
       <AlertDialog.Trigger asChild>
@@ -28,18 +28,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 +48,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 +60,9 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    title: 'AlertDialog title',
+    title: faker.lorem.sentence(3),
+    description: faker.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',
   },