@dxos/react-ui 0.8.4-main.c1de068 → 0.8.4-main.c351d160a8

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/ClipboardProvider.tsx

@@ -2,7 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren, useCallback, useContext, useState } from 'react';
+import React, { type PropsWithChildren, createContext, useCallback, useContext, useState } from 'react';
 
 export type ClipboardContextValue = {
   textValue: string;

package/src/components/Clipboard/CopyButton.tsx

@@ -4,23 +4,24 @@
 
 import React from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx, osTranslations } from '@dxos/ui-theme';
 
-import { useClipboard } from './ClipboardProvider';
-import { Button, type ButtonProps, IconButton } from '../Buttons';
+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 &
   Pick<IconProps, 'size'> & {
     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 (
@@ -31,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>
@@ -54,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

@@ -2,9 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { createContext, type PropsWithChildren } from 'react';
+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

@@ -0,0 +1,69 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+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 { AlertDialog } from './AlertDialog';
+
+type StoryProps = Partial<{
+  title: string;
+  description: string;
+  openTrigger: string;
+  cancelTrigger: string;
+  actionTrigger: string;
+}>;
+
+const DefaultStory = ({ title, description, openTrigger, cancelTrigger, actionTrigger }: StoryProps) => {
+  return (
+    <AlertDialog.Root defaultOpen>
+      <AlertDialog.Trigger asChild>
+        <Button>{openTrigger}</Button>
+      </AlertDialog.Trigger>
+      <AlertDialog.Overlay>
+        <AlertDialog.Content>
+          <AlertDialog.Body>
+            <AlertDialog.Title>{title}</AlertDialog.Title>
+            <AlertDialog.Description>{description}</AlertDialog.Description>
+          </AlertDialog.Body>
+          <AlertDialog.ActionBar>
+            <div className='grow' />
+            <AlertDialog.Cancel asChild>
+              <Button>{cancelTrigger}</Button>
+            </AlertDialog.Cancel>
+            <AlertDialog.Action asChild>
+              <Button variant='primary'>{actionTrigger}</Button>
+            </AlertDialog.Action>
+          </AlertDialog.ActionBar>
+        </AlertDialog.Content>
+      </AlertDialog.Overlay>
+    </AlertDialog.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-core/components/AlertDialog',
+  component: AlertDialog.Root as any,
+  render: DefaultStory as any,
+  decorators: [withTheme()],
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: faker.lorem.sentence(3),
+    description: faker.lorem.paragraph(1),
+    openTrigger: 'Open AlertDialog',
+    cancelTrigger: 'Cancel',
+    actionTrigger: 'Action',
+  },
+};