@dxos/react-ui 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/src/components/Card/Card.tsx

@@ -0,0 +1,347 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+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 { composableProps, 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, 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;
+  }
+>;
+
+const CardRoot = forwardRef<HTMLDivElement, CardRootProps>(
+  ({ children, id, asChild, role, border = true, fullWidth, ...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='rail'>{children}</Column.Root>
+      </Comp>
+    );
+  },
+);
+
+//
+// Toolbar
+//
+
+type CardToolbarProps = ToolbarRootProps & {
+  density?: Density;
+};
+
+// TODO(burdon): Roncile name with DialogHeader.
+const CardToolbar = forwardRef<HTMLDivElement, CardToolbarProps>(
+  ({ children, classNames, density = 'fine', ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+
+    return (
+      <Toolbar.Root
+        {...props}
+        classNames={[tx('card.toolbar', { coarse: density !== 'fine' }), classNames]}
+        ref={forwardedRef}
+      >
+        {children}
+      </Toolbar.Root>
+    );
+  },
+);
+
+//
+// Menu (delegated to Toolbar.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 { menuItems } = useContext(CardContext) ?? {};
+  const combinedItems = [...(items ?? []), ...((menuItems as CardMenuItem<T>[]) ?? [])];
+
+  return <Toolbar.Menu context={context} items={combinedItems} />;
+};
+
+//
+// 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>
+  );
+};
+
+//
+// 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>
+  );
+};
+
+//
+// Card
+//
+
+export const Card = {
+  Root: CardRoot,
+
+  // Toolbar
+  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,
+  Menu: CardMenu,
+  Icon: CardIcon,
+  IconBlock: CardIconBlock,
+
+  // Content
+  Content: CardContent,
+  Row: CardRow,
+  Section: CardSection,
+  Heading: CardHeading,
+  Text: CardText,
+  Poster: CardPoster,
+  Action: CardAction,
+  Link: CardLink,
+};
+
+export type { CardContextValue, CardRootProps, CardToolbarProps, 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<{
   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',
   },