@dxos/react-ui-card 0.8.2 → 0.11.0

package/dist/types/src/components/Card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA8C,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC9F,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,KAAK,EAAE,EACZ,KAAK,wBAAwB,EAC7B,KAAK,qBAAqB,EAC1B,KAAK,EAAE,EAGR,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmC,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAcvF,KAAK,aAAa,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAClF,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAaF,KAAK,eAAe,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAEjG,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CAM1C,CAAC;AAEF,KAAK,cAAc,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAMxC,CAAC;AAGF,KAAK,mBAAmB,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AAW9G,KAAK,eAAe,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AAmCvH,KAAK,aAAa,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE7F,eAAO,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CAOtC,CAAC;AAEF,KAAK,cAAc,GAAG,eAAe,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAG7G,eAAO,MAAM,SAAS,EAAE,EAAE,CAAC,cAAc,CAMxC,CAAC;AAEF,eAAO,MAAM,IAAI;;;;;;;;mBA7CiD,MAAM,GAAG,OAAO;;;;;;;CAsDjF,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,CAAC"}

package/dist/types/src/components/Card.stories.d.ts

@@ -1,57 +0,0 @@
-import '@dxos-theme';
-import React from 'react';
-declare const _default: {
-    title: string;
-    component: {
-        Root: React.ForwardRefExoticComponent<Omit<import("./Card").CardRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-        Header: React.FC<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-            classNames?: import("@dxos/react-ui-types").ClassNameValue;
-        } & {
-            floating?: boolean;
-        }>;
-        DragHandle: React.FC<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-            classNames?: import("@dxos/react-ui-types").ClassNameValue;
-        } & {
-            position?: "left" | "right";
-        }>;
-        Endcap: React.FC<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-            classNames?: import("@dxos/react-ui-types").ClassNameValue;
-        } & {
-            Icon?: import("@phosphor-icons/react").Icon;
-            position?: "left" | "right";
-        }>;
-        Menu: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-            classNames?: import("@dxos/react-ui-types").ClassNameValue;
-        } & {
-            position?: "left" | "right";
-        } & {
-            children?: React.ReactNode | undefined;
-        } & React.RefAttributes<HTMLDivElement>>;
-        Title: React.FC<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-            classNames?: import("@dxos/react-ui-types").ClassNameValue;
-        } & {
-            center?: boolean;
-            title?: string;
-        }>;
-        Body: React.FC<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-            classNames?: import("@dxos/react-ui-types").ClassNameValue;
-        } & {
-            gutter?: boolean;
-        }>;
-        Media: React.FC<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
-            classNames?: import("@dxos/react-ui-types").ClassNameValue;
-        } & {
-            src?: string;
-            contain?: boolean;
-        }>;
-    };
-    decorators: import("@storybook/react").Decorator[];
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const Draggable: () => React.JSX.Element;
-export declare const ReadOnly: () => React.JSX.Element;
-export declare const Editable: () => React.JSX.Element;
-//# sourceMappingURL=Card.stories.d.ts.map

package/dist/types/src/components/Card.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Card.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAoD,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2LzE,wBAgBE;AAEF,eAAO,MAAM,SAAS,yBAA2B,CAAC;AAClD,eAAO,MAAM,QAAQ,yBAA8B,CAAC;AACpD,eAAO,MAAM,QAAQ,yBAA8B,CAAC"}

package/dist/types/src/theme.d.ts

@@ -1,31 +0,0 @@
-import { type ComponentFunction, type Density, type Theme } from '@dxos/react-ui';
-export type CardStyleProps = Partial<{
-    density: Density;
-    grow?: boolean;
-    square?: boolean;
-    rounded?: boolean;
-    noPadding?: boolean;
-}>;
-export declare const cardRoot: ComponentFunction<CardStyleProps>;
-export declare const cardHeader: ComponentFunction<CardStyleProps & {
-    floating?: boolean;
-}>;
-export declare const cardTitle: ComponentFunction<CardStyleProps & {
-    center?: boolean;
-}>;
-export declare const cardDragHandle: ComponentFunction<CardStyleProps & {
-    position?: 'left' | 'right';
-}>;
-export declare const cardDragHandleIcon: ComponentFunction<CardStyleProps>;
-export declare const cardMenu: ComponentFunction<CardStyleProps & {
-    position?: 'left' | 'right';
-}>;
-export declare const cardMenuIcon: ComponentFunction<CardStyleProps>;
-export declare const cardBody: ComponentFunction<CardStyleProps & {
-    gutter?: boolean;
-}>;
-export declare const cardMedia: ComponentFunction<CardStyleProps & {
-    contain?: boolean;
-}>;
-export declare const cardTheme: Theme<CardStyleProps>;
-//# sourceMappingURL=theme.d.ts.map

package/dist/types/src/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/theme.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,iBAAiB,EAAE,KAAK,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAOlF,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC,CAAC;AAEH,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,cAAc,CAUpD,CAAC;AAEJ,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,cAAc,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAC4B,CAAC;AAE/G,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CACY,CAAC;AAE5F,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,cAAc,GAAG;IAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAW5F,CAAC;AAEJ,eAAO,MAAM,kBAAkB,EAAE,iBAAiB,CAAC,cAAc,CACvB,CAAC;AAG3C,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,cAAc,GAAG;IAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAWtF,CAAC;AAEJ,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,cAAc,CAAmD,CAAC;AAE/G,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,cAAc,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAU3E,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAO7E,CAAC;AAEJ,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CAU3C,CAAC"}

package/src/components/Card.stories.tsx

@@ -1,217 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import '@dxos-theme';
-
-import { DndContext, type DragEndEvent } from '@dnd-kit/core';
-import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import React, { type FC, type PropsWithChildren, useState } from 'react';
-
-import { faker } from '@dxos/random';
-import { DropdownMenu, Input, ScrollArea } from '@dxos/react-ui';
-import { modalSurface, mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
-
-import { Card } from './Card';
-
-faker.seed(1);
-
-// https://unsplash.com
-// TODO(burdon): Use https://picsum.photos
-const testImages = [
-  'https://images.unsplash.com/photo-1616394158624-a2ba9cfe2994',
-  'https://images.unsplash.com/photo-1507941097613-9f2157b69235',
-  'https://images.unsplash.com/photo-1431274172761-fca41d930114',
-  'https://images.unsplash.com/photo-1513635269975-59663e0ac1ad',
-  'https://images.unsplash.com/photo-1564221710304-0b37c8b9d729',
-  'https://images.unsplash.com/photo-1605425183435-25b7e99104a4',
-];
-
-type CardData = {
-  id: string;
-  title: string;
-  body: string;
-  image?: string;
-};
-
-const DraggableCard: FC<{ data: CardData; onDelete: (id: string) => void }> = ({
-  data: { id, title, body, image },
-  onDelete,
-}) => {
-  const { attributes, listeners, setNodeRef, transform } = useSortable({ id });
-  const t = transform ? Object.assign(transform, { scaleY: 1 }) : null;
-
-  return (
-    <Card.Root ref={setNodeRef} style={{ transform: CSS.Transform.toString(t) }}>
-      <Card.Header>
-        <Card.DragHandle {...listeners} {...attributes} />
-        <Card.Title title={title} />
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger asChild>
-            <Card.Menu />
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content>
-            <DropdownMenu.Viewport>
-              <DropdownMenu.Item onClick={() => onDelete(id)}>Delete</DropdownMenu.Item>
-            </DropdownMenu.Viewport>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      </Card.Header>
-      <Card.Body classNames={'text-sm'} gutter>
-        <p>{body}</p>
-      </Card.Body>
-      {image && <Card.Media src={image} classNames={'h-[160px]'} />}
-    </Card.Root>
-  );
-};
-
-const DraggableStory: FC<PropsWithChildren> = ({ children }) => {
-  const [cards, setCards] = useState<CardData[]>(
-    Array.from({ length: 7 }).map(() => ({
-      id: faker.string.uuid(),
-      title: faker.lorem.sentence(3),
-      body: faker.lorem.sentences(),
-      image: faker.datatype.boolean() ? faker.helpers.arrayElement(testImages) : undefined,
-    })),
-  );
-
-  const handleDelete = (id: string) => {
-    setCards((cards) => cards.filter((card) => card.id !== id));
-  };
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const { active, over } = event;
-    if (active.id !== over?.id) {
-      setCards((cards) => {
-        const oldIndex = cards.findIndex((card) => card.id === active.id);
-        const newIndex = cards.findIndex((card) => card.id === over?.id);
-        return arrayMove(cards, oldIndex, newIndex);
-      });
-    }
-  };
-
-  return (
-    <DndContext onDragEnd={handleDragEnd}>
-      <SortableContext items={cards.map(({ id }) => id)} strategy={verticalListSortingStrategy}>
-        <div className='flex flex-col overflow-y-scroll'>
-          <div className='flex flex-col gap-4'>
-            {cards.map((card) => (
-              <DraggableCard key={card.id} data={card} onDelete={handleDelete} />
-            ))}
-          </div>
-        </div>
-      </SortableContext>
-    </DndContext>
-  );
-};
-
-const ReadonlyCardStory = () => {
-  return (
-    <div className='flex flex-col overflow-y-scroll'>
-      <div className='flex flex-col gap-4'>
-        <Card.Root square noPadding>
-          <Card.Header floating>
-            <Card.DragHandle position='left' />
-            <Card.Menu position='right' />
-          </Card.Header>
-          <Card.Media src={testImages[1]} />
-        </Card.Root>
-
-        <Card.Root>
-          <Card.Header>
-            <Card.Title title={faker.lorem.sentence(3)} />
-          </Card.Header>
-        </Card.Root>
-
-        <Card.Root>
-          <Card.Body classNames={'text-sm font-thin h-[100px]'}>
-            <ScrollArea.Root>
-              <ScrollArea.Viewport>{faker.lorem.sentences(16)}</ScrollArea.Viewport>
-              <ScrollArea.Scrollbar orientation='vertical'>
-                <ScrollArea.Thumb />
-              </ScrollArea.Scrollbar>
-            </ScrollArea.Root>
-          </Card.Body>
-        </Card.Root>
-
-        <Card.Root>
-          <Card.Header>
-            <Card.Title center title={faker.lorem.sentence(3)} />
-          </Card.Header>
-          <Card.Body classNames={'text-sm font-thin'}>{faker.lorem.sentences(3)}</Card.Body>
-        </Card.Root>
-
-        <Card.Root>
-          <Card.Header>
-            <Card.DragHandle />
-            <Card.Title title={faker.lorem.sentence(8)} />
-            {/* TODO(burdon): Menu util. */}
-            <Card.Menu />
-          </Card.Header>
-          <Card.Body gutter classNames={'gap-2 text-sm font-thin'}>
-            <p>Content with gutter</p>
-            <p className='line-clamp-3'>{faker.lorem.sentences(3)}</p>
-          </Card.Body>
-        </Card.Root>
-
-        <Card.Root>
-          <Card.Header>
-            <Card.DragHandle />
-            <Card.Title title={faker.lorem.sentence(3)} />
-            <Card.Menu />
-          </Card.Header>
-          <Card.Body gutter classNames={'text-sm gap-2 font-thin'}>
-            <p className='line-clamp-3'>{faker.lorem.sentences(1)}</p>
-          </Card.Body>
-          <Card.Media classNames={'h-[200px] grayscale'} src={testImages[0]} />
-          <Card.Body gutter classNames={'text-sm gap-2 font-thin'}>
-            <p className='line-clamp-3'>{faker.lorem.sentences(3)}</p>
-          </Card.Body>
-        </Card.Root>
-      </div>
-    </div>
-  );
-};
-
-const EditableCardStory = () => {
-  return (
-    <div className='flex flex-col h-full justify-center'>
-      <Card.Root>
-        <Card.Header>
-          <Card.DragHandle />
-          <Input.Root>
-            <Input.TextInput classNames={'-mx-2 px-2'} variant='subdued' placeholder={'Title'} />
-          </Input.Root>
-          <Card.Menu />
-        </Card.Header>
-        <Card.Body gutter classNames={'gap-2 text-sm font-thin'}>
-          {faker.lorem.sentences()}
-        </Card.Body>
-      </Card.Root>
-    </div>
-  );
-};
-
-export default {
-  title: 'ui/react-ui-card/Card',
-  component: Card,
-  decorators: [
-    withTheme,
-    (Story: any) => (
-      <div className={mx('flex h-screen w-full justify-center overflow-hidden', modalSurface)}>
-        <div className='flex flex-col w-[360px] overflow-hidden'>
-          <Story />
-        </div>
-      </div>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export const Draggable = () => <DraggableStory />;
-export const ReadOnly = () => <ReadonlyCardStory />;
-export const Editable = () => <EditableCardStory />;

package/src/components/Card.tsx

@@ -1,149 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { Circle, DotsSixVertical, DotsThreeVertical, type Icon } from '@phosphor-icons/react';
-import { type Primitive } from '@radix-ui/react-primitive';
-import React, {
-  type ComponentPropsWithoutRef,
-  type ComponentPropsWithRef,
-  type FC,
-  type PropsWithChildren,
-  forwardRef,
-} from 'react';
-
-import { useDensityContext, DropdownMenu, type ThemedClassName } from '@dxos/react-ui';
-
-import {
-  cardBody,
-  cardDragHandle,
-  cardDragHandleIcon,
-  cardHeader,
-  cardMedia,
-  cardMenu,
-  cardMenuIcon,
-  cardRoot,
-  cardTitle,
-} from '../theme';
-
-type CardRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  grow?: boolean;
-  square?: boolean;
-  noPadding?: boolean;
-};
-
-// TODO(burdon): Forward refs for all components?
-const CardRoot = forwardRef<HTMLDivElement, CardRootProps>(
-  ({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
-    return (
-      <div {...props} ref={forwardedRef} className={cardRoot({ grow, square, noPadding }, classNames)}>
-        {children}
-      </div>
-    );
-  },
-);
-
-type CardHeaderProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { floating?: boolean };
-
-export const CardHeader: FC<CardHeaderProps> = ({ floating, classNames, children, ...props }) => {
-  return (
-    <div {...props} className={cardHeader({ floating }, classNames)}>
-      {children}
-    </div>
-  );
-};
-
-type CardTitleProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
-  center?: boolean;
-  title?: string;
-};
-
-export const CardTitle: FC<CardTitleProps> = ({ center, title, classNames, ...props }) => {
-  return (
-    <div {...props} className={cardTitle({ center }, classNames)}>
-      {title}
-    </div>
-  );
-};
-
-// TODO(burdon): Reuse ListItemEndcap?
-type CardDragHandleProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { position?: 'left' | 'right' };
-
-const CardDragHandle: FC<CardDragHandleProps> = ({ position, classNames, ...props }) => {
-  const density = useDensityContext();
-  return (
-    <div {...props} className={cardDragHandle({ density, position }, classNames)}>
-      <DotsSixVertical className={cardDragHandleIcon({})} />
-    </div>
-  );
-};
-
-type CardEndcapProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { Icon?: Icon; position?: 'left' | 'right' };
-
-const CardEndcap: FC<CardEndcapProps> = ({ Icon = Circle, position, classNames, ...props }) => {
-  const density = useDensityContext();
-  return (
-    <div {...props} className={cardMenu({ density, position }, classNames)}>
-      <Icon className={cardMenuIcon({})} />
-    </div>
-  );
-};
-
-type CardMenuProps = PropsWithChildren<
-  ThemedClassName<ComponentPropsWithoutRef<'div'>> & { position?: 'left' | 'right' }
->;
-
-// TODO(burdon): Reconcile with Endcap (remove dropdown from here). See ListItem.Endcap (style icon/size?)
-const CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(
-  ({ children, position, classNames, ...props }, forwardRef) => {
-    const density = useDensityContext();
-    return (
-      <div {...props} className={cardMenu({ density, position }, classNames)} ref={forwardRef}>
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger asChild>
-            <DotsThreeVertical className={cardMenuIcon({})} />
-          </DropdownMenu.Trigger>
-          {/* TODO(burdon): Position to the left of the menu button. */}
-          <DropdownMenu.Content>
-            <DropdownMenu.Viewport>{children}</DropdownMenu.Viewport>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      </div>
-    );
-  },
-);
-
-type CardBodyProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { gutter?: boolean };
-
-export const CardBody: FC<CardBodyProps> = ({ gutter, classNames, children, ...props }) => {
-  const density = useDensityContext();
-  return (
-    <div {...props} className={cardBody({ density, gutter }, classNames)}>
-      {children}
-    </div>
-  );
-};
-
-type CardMediaProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { src?: string; contain?: boolean };
-
-// TODO(burdon): Option to set to 50% of height of card.
-export const CardMedia: FC<CardMediaProps> = ({ src, contain, classNames, ...props }) => {
-  return (
-    <div className='flex grow overflow-hidden'>
-      <img {...props} className={cardMedia({ contain }, classNames)} src={src} />
-    </div>
-  );
-};
-
-export const Card = {
-  Root: CardRoot,
-  Header: CardHeader,
-  DragHandle: CardDragHandle,
-  Endcap: CardEndcap,
-  Menu: CardMenu,
-  Title: CardTitle,
-  Body: CardBody,
-  Media: CardMedia,
-};
-
-export type { CardRootProps };

package/src/theme.ts

@@ -1,101 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import { type ComponentFunction, type Density, type Theme } from '@dxos/react-ui';
-import { getSize, attentionSurface, mx } from '@dxos/react-ui-theme';
-
-const defaults = {
-  width: 'min-w-[256px]',
-};
-
-export type CardStyleProps = Partial<{
-  density: Density;
-  grow?: boolean;
-  square?: boolean;
-  rounded?: boolean;
-  noPadding?: boolean;
-}>;
-
-export const cardRoot: ComponentFunction<CardStyleProps> = ({ grow, square, rounded = true }, ...etc) =>
-  mx(
-    'flex flex-col group/card overflow-hidden',
-    grow && 'h-full',
-    defaults.width,
-    attentionSurface,
-    'shadow', // TODO(burdon): Elevation?
-    rounded && 'rounded',
-    square && 'aspect-square',
-    ...etc,
-  );
-
-export const cardHeader: ComponentFunction<CardStyleProps & { floating?: boolean }> = ({ floating }, ...etc) =>
-  mx(floating ? 'relative' : 'flex w-full shrink-0 justify-between overflow-hidden items-center py-1', ...etc);
-
-export const cardTitle: ComponentFunction<CardStyleProps & { center?: boolean }> = ({ center }, ...etc) =>
-  mx('grow overflow-hidden truncate first:pl-4 last:pr-4', center && 'text-center', ...etc);
-
-export const cardDragHandle: ComponentFunction<CardStyleProps & { position?: 'left' | 'right' }> = (
-  { density, position },
-  ...etc
-) =>
-  mx(
-    'flex shrink-0 items-center justify-center select-none',
-    density === 'fine' ? getSize(8) : getSize(10),
-    position === 'left' && 'absolute top-1 left-1',
-    position === 'right' && 'absolute top-1 right-1',
-    position && 'text-black group-hover/card:bg-white group-hover/card:bg-opacity-80',
-    ...etc,
-  );
-
-export const cardDragHandleIcon: ComponentFunction<CardStyleProps> = (_, ...etc) =>
-  mx(getSize(5), 'cursor-pointer', ...etc);
-
-// TODO(burdon): Helper for DropdownMenu? Density, etc?
-export const cardMenu: ComponentFunction<CardStyleProps & { position?: 'left' | 'right' }> = (
-  { density, position },
-  ...etc
-) =>
-  mx(
-    'flex shrink-0 items-center justify-center',
-    density === 'fine' ? getSize(8) : getSize(10),
-    position === 'left' && 'absolute top-1 left-1',
-    position === 'right' && 'absolute top-1 right-1',
-    position && 'text-black group-hover/card:bg-white group-hover/card:bg-opacity-80',
-    ...etc,
-  );
-
-export const cardMenuIcon: ComponentFunction<CardStyleProps> = (_, ...etc) => mx(getSize(5), 'cursor-pointer');
-
-export const cardBody: ComponentFunction<CardStyleProps & { gutter?: boolean }> = (
-  { density, gutter, noPadding },
-  ...etc
-) =>
-  mx(
-    'grow overflow-auto',
-    !noPadding && 'px-2',
-    // TODO(burdon): Create density-specific constants.
-    gutter && (density === 'fine' ? 'pl-0 ml-[32px]' : 'pl-0 ml-[40px]'),
-    ...etc,
-  );
-
-export const cardMedia: ComponentFunction<CardStyleProps & { contain?: boolean }> = ({ contain }, ...etc) =>
-  mx(
-    'grow max-h-[300px]',
-    // Hide broken image links (e.g., if offline).
-    "before:content-[' '] before:block before:w-full before:h-full before:border-0",
-    contain ? 'object-contain' : 'object-cover',
-    ...etc,
-  );
-
-export const cardTheme: Theme<CardStyleProps> = {
-  root: cardRoot,
-  header: cardHeader,
-  title: cardTitle,
-  dragHandle: cardDragHandle,
-  dragHandleIcon: cardDragHandleIcon,
-  menu: cardMenu,
-  menuIcon: cardMenuIcon,
-  body: cardBody,
-  media: cardMedia,
-};