@dxos/react-ui 0.8.4-main.bc674ce → 0.8.4-main.bd9b33e6c8

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 DefaultStoryProps = {
+  title: string;
+  description?: string;
+  image?: string;
+  fullWidth?: boolean;
+};
+
+const DefaultStory = ({ title, description, image, fullWidth }: DefaultStoryProps) => {
+  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,394 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, {
+  CSSProperties,
+  MouseEventHandler,
+  type PropsWithChildren,
+  createContext,
+  forwardRef,
+  useContext,
+} 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';
+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 CardRootOwnProps = {
+  id?: string;
+  border?: boolean;
+  fullWidth?: boolean;
+  density?: Density;
+  style?: CSSProperties;
+  tabIndex?: number;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  'data-selected'?: boolean;
+  'data-testid'?: string;
+};
+
+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
+        {...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 = 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>
+  );
+});
+
+//
+// DragHandle
+//
+
+type CardDragHandleProps = ToolbarDragHandleProps;
+
+const CardDragHandle = forwardRef<HTMLButtonElement, CardDragHandleProps>((props, forwardedRef) => {
+  return (
+    <CardIconBlock padding>
+      <Toolbar.DragHandle {...props} ref={forwardedRef} />
+    </CardIconBlock>
+  );
+});
+
+//
+// CloseIconButton
+//
+
+type CloseIconButtonProps = ToolbarCloseIconButtonProps;
+
+const CloseIconButton = forwardRef<HTMLButtonElement, CloseIconButtonProps>((props, forwardedRef) => {
+  return (
+    <CardIconBlock padding>
+      <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 padding>
+      <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<{ padding?: boolean }>>>(
+  ({ classNames, children, padding, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+
+    return (
+      <div {...props} role='none' className={tx('card.icon-block', { padding }, classNames)} ref={forwardedRef}>
+        {children}
+      </div>
+    );
+  },
+);
+
+//
+// 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>
+  );
+});
+
+//
+// Content
+//
+
+const CardContent = slottable<HTMLDivElement>(({ children, asChild, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props, { role: 'none' });
+  const Comp = asChild ? Slot : Primitive.div;
+  const { tx } = useThemeContext();
+
+  return (
+    <Comp {...rest} className={tx('card.content', {}, className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+//
+// Row
+//
+
+type CardRowProps = { icon?: string; fullWidth?: boolean };
+
+const CardRow = composable<HTMLDivElement, CardRowProps>(({ children, icon, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps(props, { role: 'none' });
+  const { tx } = useThemeContext();
+
+  return (
+    <Column.Row {...rest} className={tx('card.row', {}, className)} ref={forwardedRef}>
+      {(icon && <CardIcon classNames='text-subdued' icon={icon} size={4} />) || <div />}
+      {children}
+    </Column.Row>
+  );
+});
+
+//
+// Section
+//
+
+/**
+ * @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 {...rest} role={role ?? 'none'} className={mx('col-span-full', className)} ref={forwardedRef}>
+      {children}
+    </Comp>
+  );
+});
+
+//
+// Heading
+//
+
+type CardHeadingProps = { variant?: 'default' | 'subtitle' };
+
+/**
+ * @deprecated Use typography.
+ */
+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
+        {...rest}
+        role={role ?? 'heading'}
+        className={tx('card.heading', { variant }, className)}
+        ref={forwardedRef}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+//
+// Text
+//
+
+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 {...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} size={4} /> : <div />}
+      <span className={tx('card.action-label', {}, !actionIcon ? 'col-span-2' : undefined)}>{label}</span>
+      {actionIcon && <CardIcon icon={actionIcon} size={4} />}
+    </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

@@ -18,7 +18,7 @@ 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(osTranslations);
@@ -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>

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<{
+type DefaultStoryProps = 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 }: DefaultStoryProps) => {
   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',
   },