@dxos/react-ui-card 0.3.9-main.16d375f

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @dxos/react-ui-card
+
+Opinionated card component.

package/dist/lib/browser/index.mjs

@@ -0,0 +1,159 @@
+// packages/ui/react-ui-card/src/components/Card.tsx
+import { DotsSixVertical, DotsThreeVertical } from "@phosphor-icons/react";
+import React, { forwardRef } from "react";
+import { useDensityContext, DropdownMenu } from "@dxos/react-ui";
+
+// packages/ui/react-ui-card/src/theme.ts
+import { getSize, inputSurface, mx } from "@dxos/react-ui-theme";
+var defaults = {
+  width: "min-w-[256px]"
+};
+var cardRoot = ({ grow, square, rounded = true }, ...etc) => mx("flex flex-col group/card overflow-hidden", grow && "h-full", defaults.width, inputSurface, "shadow", rounded && "rounded", square && "aspect-square", ...etc);
+var cardHeader = ({ floating }, ...etc) => mx(floating ? "relative" : "flex w-full shrink-0 justify-between overflow-hidden items-center py-1", ...etc);
+var cardTitle = ({ center }, ...etc) => mx("grow overflow-hidden truncate first:pl-4 last:pr-4", center && "text-center", ...etc);
+var cardDragHandle = ({ 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);
+var cardDragHandleIcon = (_, ...etc) => mx(getSize(5), "cursor-pointer", ...etc);
+var cardMenu = ({ 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);
+var cardMenuIcon = (_, ...etc) => mx(getSize(5), "cursor-pointer");
+var cardBody = ({ 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
+);
+var cardMedia = ({ contain }, ...etc) => mx(
+  "grow max-h-[300px]",
+  // Hide broken image links (e.g., if offline).
+  "before:content-['\xA0'] before:block before:w-full before:h-full before:border-0",
+  contain ? "object-contain" : "object-cover",
+  ...etc
+);
+var cardTheme = {
+  root: cardRoot,
+  header: cardHeader,
+  title: cardTitle,
+  dragHandle: cardDragHandle,
+  dragHandleIcon: cardDragHandleIcon,
+  menu: cardMenu,
+  menuIcon: cardMenuIcon,
+  body: cardBody,
+  media: cardMedia
+};
+
+// packages/ui/react-ui-card/src/components/Card.tsx
+var CardRoot = /* @__PURE__ */ forwardRef(({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    ref: forwardedRef,
+    className: cardRoot({
+      grow,
+      square,
+      noPadding
+    }, classNames)
+  }, children);
+});
+var CardHeader = ({ floating, classNames, children, ...props }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: cardHeader({
+      floating
+    }, classNames)
+  }, children);
+};
+var CardTitle = ({ center, title, classNames, ...props }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: cardTitle({
+      center
+    }, classNames)
+  }, title);
+};
+var CardDragHandle = ({ position, classNames, ...props }) => {
+  const density = useDensityContext();
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: cardDragHandle({
+      density,
+      position
+    }, classNames)
+  }, /* @__PURE__ */ React.createElement(DotsSixVertical, {
+    className: cardDragHandleIcon({})
+  }));
+};
+var CardEndcap = ({ Icon, position, classNames, ...props }) => {
+  const density = useDensityContext();
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: cardMenu({
+      density,
+      position
+    }, classNames)
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    className: cardMenuIcon({})
+  }));
+};
+var CardMenu = /* @__PURE__ */ forwardRef(({ children, position, classNames, ...props }, forwardRef1) => {
+  const density = useDensityContext();
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: cardMenu({
+      density,
+      position
+    }, classNames),
+    ref: forwardRef1
+  }, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(DotsThreeVertical, {
+    className: cardMenuIcon({})
+  })), /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, children))));
+});
+var CardBody = ({ gutter, classNames, children, ...props }) => {
+  const density = useDensityContext();
+  return /* @__PURE__ */ React.createElement("div", {
+    ...props,
+    className: cardBody({
+      density,
+      gutter
+    }, classNames)
+  }, children);
+};
+var CardMedia = ({ src, contain, classNames, ...props }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex grow overflow-hidden"
+  }, /* @__PURE__ */ React.createElement("img", {
+    ...props,
+    className: cardMedia({
+      contain
+    }, classNames),
+    src
+  }));
+};
+var Card = {
+  Root: CardRoot,
+  Header: CardHeader,
+  DragHandle: CardDragHandle,
+  Endcap: CardEndcap,
+  Menu: CardMenu,
+  Title: CardTitle,
+  Body: CardBody,
+  Media: CardMedia
+};
+export {
+  Card,
+  CardBody,
+  CardHeader,
+  CardMedia,
+  CardTitle,
+  cardBody,
+  cardDragHandle,
+  cardDragHandleIcon,
+  cardHeader,
+  cardMedia,
+  cardMenu,
+  cardMenuIcon,
+  cardRoot,
+  cardTheme,
+  cardTitle
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/browser/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Card.tsx", "../../../src/theme.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { DotsSixVertical, DotsThreeVertical, type Icon } from '@phosphor-icons/react';\nimport { type Primitive } from '@radix-ui/react-primitive';\nimport React, {\n  type ComponentPropsWithoutRef,\n  type ComponentPropsWithRef,\n  type FC,\n  forwardRef,\n  type PropsWithChildren,\n} from 'react';\n\nimport { useDensityContext, DropdownMenu, type ThemedClassName } from '@dxos/react-ui';\n\nimport {\n  cardBody,\n  cardDragHandle,\n  cardDragHandleIcon,\n  cardHeader,\n  cardMedia,\n  cardMenu,\n  cardMenuIcon,\n  cardRoot,\n  cardTitle,\n} from '../theme';\n\ntype CardRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {\n  grow?: boolean;\n  square?: boolean;\n  noPadding?: boolean;\n};\n\n// TODO(burdon): Forward refs for all components?\nconst CardRoot = forwardRef<HTMLDivElement, CardRootProps>(\n  ({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {\n    return (\n      <div {...props} ref={forwardedRef} className={cardRoot({ grow, square, noPadding }, classNames)}>\n        {children}\n      </div>\n    );\n  },\n);\n\ntype CardHeaderProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { floating?: boolean };\n\nexport const CardHeader: FC<CardHeaderProps> = ({ floating, classNames, children, ...props }) => {\n  return (\n    <div {...props} className={cardHeader({ floating }, classNames)}>\n      {children}\n    </div>\n  );\n};\n\ntype CardTitleProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {\n  center?: boolean;\n  title?: string;\n};\n\nexport const CardTitle: FC<CardTitleProps> = ({ center, title, classNames, ...props }) => {\n  return (\n    <div {...props} className={cardTitle({ center }, classNames)}>\n      {title}\n    </div>\n  );\n};\n\n// TODO(burdon): Reuse ListItemEndcap?\ntype CardDragHandleProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { position?: 'left' | 'right' };\n\nconst CardDragHandle: FC<CardDragHandleProps> = ({ position, classNames, ...props }) => {\n  const density = useDensityContext();\n  return (\n    <div {...props} className={cardDragHandle({ density, position }, classNames)}>\n      <DotsSixVertical className={cardDragHandleIcon({})} />\n    </div>\n  );\n};\n\ntype CardEndcapProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { Icon: Icon; position?: 'left' | 'right' };\n\nconst CardEndcap: FC<CardEndcapProps> = ({ Icon, position, classNames, ...props }) => {\n  const density = useDensityContext();\n  return (\n    <div {...props} className={cardMenu({ density, position }, classNames)}>\n      <Icon className={cardMenuIcon({})} />\n    </div>\n  );\n};\n\ntype CardMenuProps = PropsWithChildren<\n  ThemedClassName<ComponentPropsWithoutRef<'div'>> & { position?: 'left' | 'right' }\n>;\n\n// TODO(burdon): Reconcile with Endcap (remove dropdown from here). See ListItem.Endcap (style icon/size?)\nconst CardMenu = forwardRef<HTMLDivElement, CardMenuProps>(\n  ({ children, position, classNames, ...props }, forwardRef) => {\n    const density = useDensityContext();\n    return (\n      <div {...props} className={cardMenu({ density, position }, classNames)} ref={forwardRef}>\n        <DropdownMenu.Root>\n          <DropdownMenu.Trigger asChild>\n            <DotsThreeVertical className={cardMenuIcon({})} />\n          </DropdownMenu.Trigger>\n          {/* TODO(burdon): Position to the left of the menu button. */}\n          <DropdownMenu.Content>\n            <DropdownMenu.Viewport>{children}</DropdownMenu.Viewport>\n          </DropdownMenu.Content>\n        </DropdownMenu.Root>\n      </div>\n    );\n  },\n);\n\ntype CardBodyProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { gutter?: boolean };\n\nexport const CardBody: FC<CardBodyProps> = ({ gutter, classNames, children, ...props }) => {\n  const density = useDensityContext();\n  return (\n    <div {...props} className={cardBody({ density, gutter }, classNames)}>\n      {children}\n    </div>\n  );\n};\n\ntype CardMediaProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & { src?: string; contain?: boolean };\n\n// TODO(burdon): Option to set to 50% of height of card.\nexport const CardMedia: FC<CardMediaProps> = ({ src, contain, classNames, ...props }) => {\n  return (\n    <div className='flex grow overflow-hidden'>\n      <img {...props} className={cardMedia({ contain }, classNames)} src={src} />\n    </div>\n  );\n};\n\nexport const Card = {\n  Root: CardRoot,\n  Header: CardHeader,\n  DragHandle: CardDragHandle,\n  Endcap: CardEndcap,\n  Menu: CardMenu,\n  Title: CardTitle,\n  Body: CardBody,\n  Media: CardMedia,\n};\n\nexport type { CardRootProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type ComponentFunction, type Density, type Theme } from '@dxos/react-ui';\nimport { getSize, inputSurface, mx } from '@dxos/react-ui-theme';\n\nconst defaults = {\n  width: 'min-w-[256px]',\n};\n\nexport type CardStyleProps = Partial<{\n  density: Density;\n  grow?: boolean;\n  square?: boolean;\n  rounded?: boolean;\n  noPadding?: boolean;\n}>;\n\nexport const cardRoot: ComponentFunction<CardStyleProps> = ({ grow, square, rounded = true }, ...etc) =>\n  mx(\n    'flex flex-col group/card overflow-hidden',\n    grow && 'h-full',\n    defaults.width,\n    inputSurface,\n    'shadow', // TODO(burdon): Elevation?\n    rounded && 'rounded',\n    square && 'aspect-square',\n    ...etc,\n  );\n\nexport const cardHeader: ComponentFunction<CardStyleProps & { floating?: boolean }> = ({ floating }, ...etc) =>\n  mx(floating ? 'relative' : 'flex w-full shrink-0 justify-between overflow-hidden items-center py-1', ...etc);\n\nexport const cardTitle: ComponentFunction<CardStyleProps & { center?: boolean }> = ({ center }, ...etc) =>\n  mx('grow overflow-hidden truncate first:pl-4 last:pr-4', center && 'text-center', ...etc);\n\nexport const cardDragHandle: ComponentFunction<CardStyleProps & { position?: 'left' | 'right' }> = (\n  { density, position },\n  ...etc\n) =>\n  mx(\n    'flex shrink-0 items-center justify-center select-none',\n    density === 'fine' ? getSize(8) : getSize(10),\n    position === 'left' && 'absolute top-1 left-1',\n    position === 'right' && 'absolute top-1 right-1',\n    position && 'text-black group-hover/card:bg-white group-hover/card:bg-opacity-80',\n    ...etc,\n  );\n\nexport const cardDragHandleIcon: ComponentFunction<CardStyleProps> = (_, ...etc) =>\n  mx(getSize(5), 'cursor-pointer', ...etc);\n\n// TODO(burdon): Helper for DropdownMenu? Density, etc?\nexport const cardMenu: ComponentFunction<CardStyleProps & { position?: 'left' | 'right' }> = (\n  { density, position },\n  ...etc\n) =>\n  mx(\n    'flex shrink-0 items-center justify-center',\n    density === 'fine' ? getSize(8) : getSize(10),\n    position === 'left' && 'absolute top-1 left-1',\n    position === 'right' && 'absolute top-1 right-1',\n    position && 'text-black group-hover/card:bg-white group-hover/card:bg-opacity-80',\n    ...etc,\n  );\n\nexport const cardMenuIcon: ComponentFunction<CardStyleProps> = (_, ...etc) => mx(getSize(5), 'cursor-pointer');\n\nexport const cardBody: ComponentFunction<CardStyleProps & { gutter?: boolean }> = (\n  { density, gutter, noPadding },\n  ...etc\n) =>\n  mx(\n    'grow overflow-auto',\n    !noPadding && 'px-2',\n    // TODO(burdon): Create density-specific constants.\n    gutter && (density === 'fine' ? 'pl-0 ml-[32px]' : 'pl-0 ml-[40px]'),\n    ...etc,\n  );\n\nexport const cardMedia: ComponentFunction<CardStyleProps & { contain?: boolean }> = ({ contain }, ...etc) =>\n  mx(\n    'grow max-h-[300px]',\n    // Hide broken image links (e.g., if offline).\n    \"before:content-[' '] before:block before:w-full before:h-full before:border-0\",\n    contain ? 'object-contain' : 'object-cover',\n    ...etc,\n  );\n\nexport const cardTheme: Theme<CardStyleProps> = {\n  root: cardRoot,\n  header: cardHeader,\n  title: cardTitle,\n  dragHandle: cardDragHandle,\n  dragHandleIcon: cardDragHandleIcon,\n  menu: cardMenu,\n  menuIcon: cardMenuIcon,\n  body: cardBody,\n  media: cardMedia,\n};\n"],
+  "mappings": ";AAIA,SAASA,iBAAiBC,yBAAoC;AAE9D,OAAOC,SAILC,kBAEK;AAEP,SAASC,mBAAmBC,oBAA0C;;;ACTtE,SAASC,SAASC,cAAcC,UAAU;AAE1C,IAAMC,WAAW;EACfC,OAAO;AACT;AAUO,IAAMC,WAA8C,CAAC,EAAEC,MAAMC,QAAQC,UAAU,KAAI,MAAOC,QAC/FC,GACE,4CACAJ,QAAQ,UACRH,SAASC,OACTO,cACA,UACAH,WAAW,WACXD,UAAU,iBAAA,GACPE,GAAAA;AAGA,IAAMG,aAAyE,CAAC,EAAEC,SAAQ,MAAOJ,QACtGC,GAAGG,WAAW,aAAa,0EAAA,GAA6EJ,GAAAA;AAEnG,IAAMK,YAAsE,CAAC,EAAEC,OAAM,MAAON,QACjGC,GAAG,sDAAsDK,UAAU,eAAA,GAAkBN,GAAAA;AAEhF,IAAMO,iBAAsF,CACjG,EAAEC,SAASC,SAAQ,MAChBT,QAEHC,GACE,yDACAO,YAAY,SAASE,QAAQ,CAAA,IAAKA,QAAQ,EAAA,GAC1CD,aAAa,UAAU,yBACvBA,aAAa,WAAW,0BACxBA,YAAY,uEAAA,GACTT,GAAAA;AAGA,IAAMW,qBAAwD,CAACC,MAAMZ,QAC1EC,GAAGS,QAAQ,CAAA,GAAI,kBAAA,GAAqBV,GAAAA;AAG/B,IAAMa,WAAgF,CAC3F,EAAEL,SAASC,SAAQ,MAChBT,QAEHC,GACE,6CACAO,YAAY,SAASE,QAAQ,CAAA,IAAKA,QAAQ,EAAA,GAC1CD,aAAa,UAAU,yBACvBA,aAAa,WAAW,0BACxBA,YAAY,uEAAA,GACTT,GAAAA;AAGA,IAAMc,eAAkD,CAACF,MAAMZ,QAAQC,GAAGS,QAAQ,CAAA,GAAI,gBAAA;AAEtF,IAAMK,WAAqE,CAChF,EAAEP,SAASQ,QAAQC,UAAS,MACzBjB,QAEHC;EACE;EACA,CAACgB,aAAa;;EAEdD,WAAWR,YAAY,SAAS,mBAAmB;EAAe,GAC/DR;AAAAA;AAGA,IAAMkB,YAAuE,CAAC,EAAEC,QAAO,MAAOnB,QACnGC;EACE;;EAEA;EACAkB,UAAU,mBAAmB;EAAA,GAC1BnB;AAAAA;AAGA,IAAMoB,YAAmC;EAC9CC,MAAMzB;EACN0B,QAAQnB;EACRoB,OAAOlB;EACPmB,YAAYjB;EACZkB,gBAAgBd;EAChBe,MAAMb;EACNc,UAAUb;EACVc,MAAMb;EACNc,OAAOX;AACT;;;ADjEA,IAAMY,WAAWC,2BACf,CAAC,EAAEC,MAAMC,QAAQC,WAAWC,YAAYC,UAAU,GAAGC,MAAAA,GAASC,iBAAAA;AAC5D,SACE,sBAAA,cAACC,OAAAA;IAAK,GAAGF;IAAOG,KAAKF;IAAcG,WAAWC,SAAS;MAAEV;MAAMC;MAAQC;IAAU,GAAGC,UAAAA;KACjFC,QAAAA;AAGP,CAAA;AAKK,IAAMO,aAAkC,CAAC,EAAEC,UAAUT,YAAYC,UAAU,GAAGC,MAAAA,MAAO;AAC1F,SACE,sBAAA,cAACE,OAAAA;IAAK,GAAGF;IAAOI,WAAWI,WAAW;MAAED;IAAS,GAAGT,UAAAA;KACjDC,QAAAA;AAGP;AAOO,IAAMU,YAAgC,CAAC,EAAEC,QAAQC,OAAOb,YAAY,GAAGE,MAAAA,MAAO;AACnF,SACE,sBAAA,cAACE,OAAAA;IAAK,GAAGF;IAAOI,WAAWQ,UAAU;MAAEF;IAAO,GAAGZ,UAAAA;KAC9Ca,KAAAA;AAGP;AAKA,IAAME,iBAA0C,CAAC,EAAEC,UAAUhB,YAAY,GAAGE,MAAAA,MAAO;AACjF,QAAMe,UAAUC,kBAAAA;AAChB,SACE,sBAAA,cAACd,OAAAA;IAAK,GAAGF;IAAOI,WAAWa,eAAe;MAAEF;MAASD;IAAS,GAAGhB,UAAAA;KAC/D,sBAAA,cAACoB,iBAAAA;IAAgBd,WAAWe,mBAAmB,CAAC,CAAA;;AAGtD;AAIA,IAAMC,aAAkC,CAAC,EAAEC,MAAMP,UAAUhB,YAAY,GAAGE,MAAAA,MAAO;AAC/E,QAAMe,UAAUC,kBAAAA;AAChB,SACE,sBAAA,cAACd,OAAAA;IAAK,GAAGF;IAAOI,WAAWkB,SAAS;MAAEP;MAASD;IAAS,GAAGhB,UAAAA;KACzD,sBAAA,cAACuB,MAAAA;IAAKjB,WAAWmB,aAAa,CAAC,CAAA;;AAGrC;AAOA,IAAMC,WAAW9B,2BACf,CAAC,EAAEK,UAAUe,UAAUhB,YAAY,GAAGE,MAAAA,GAASN,gBAAAA;AAC7C,QAAMqB,UAAUC,kBAAAA;AAChB,SACE,sBAAA,cAACd,OAAAA;IAAK,GAAGF;IAAOI,WAAWkB,SAAS;MAAEP;MAASD;IAAS,GAAGhB,UAAAA;IAAaK,KAAKT;KAC3E,sBAAA,cAAC+B,aAAaC,MAAI,MAChB,sBAAA,cAACD,aAAaE,SAAO;IAACC,SAAAA;KACpB,sBAAA,cAACC,mBAAAA;IAAkBzB,WAAWmB,aAAa,CAAC,CAAA;OAG9C,sBAAA,cAACE,aAAaK,SAAO,MACnB,sBAAA,cAACL,aAAaM,UAAQ,MAAEhC,QAAAA,CAAAA,CAAAA,CAAAA;AAKlC,CAAA;AAKK,IAAMiC,WAA8B,CAAC,EAAEC,QAAQnC,YAAYC,UAAU,GAAGC,MAAAA,MAAO;AACpF,QAAMe,UAAUC,kBAAAA;AAChB,SACE,sBAAA,cAACd,OAAAA;IAAK,GAAGF;IAAOI,WAAW8B,SAAS;MAAEnB;MAASkB;IAAO,GAAGnC,UAAAA;KACtDC,QAAAA;AAGP;AAKO,IAAMoC,YAAgC,CAAC,EAAEC,KAAKC,SAASvC,YAAY,GAAGE,MAAAA,MAAO;AAClF,SACE,sBAAA,cAACE,OAAAA;IAAIE,WAAU;KACb,sBAAA,cAACkC,OAAAA;IAAK,GAAGtC;IAAOI,WAAWmC,UAAU;MAAEF;IAAQ,GAAGvC,UAAAA;IAAasC;;AAGrE;AAEO,IAAMI,OAAO;EAClBd,MAAMjC;EACNgD,QAAQnC;EACRoC,YAAY7B;EACZ8B,QAAQvB;EACRwB,MAAMpB;EACNqB,OAAOpC;EACPqC,MAAMd;EACNe,OAAOZ;AACT;",
+  "names": ["DotsSixVertical", "DotsThreeVertical", "React", "forwardRef", "useDensityContext", "DropdownMenu", "getSize", "inputSurface", "mx", "defaults", "width", "cardRoot", "grow", "square", "rounded", "etc", "mx", "inputSurface", "cardHeader", "floating", "cardTitle", "center", "cardDragHandle", "density", "position", "getSize", "cardDragHandleIcon", "_", "cardMenu", "cardMenuIcon", "cardBody", "gutter", "noPadding", "cardMedia", "contain", "cardTheme", "root", "header", "title", "dragHandle", "dragHandleIcon", "menu", "menuIcon", "body", "media", "CardRoot", "forwardRef", "grow", "square", "noPadding", "classNames", "children", "props", "forwardedRef", "div", "ref", "className", "cardRoot", "CardHeader", "floating", "cardHeader", "CardTitle", "center", "title", "cardTitle", "CardDragHandle", "position", "density", "useDensityContext", "cardDragHandle", "DotsSixVertical", "cardDragHandleIcon", "CardEndcap", "Icon", "cardMenu", "cardMenuIcon", "CardMenu", "DropdownMenu", "Root", "Trigger", "asChild", "DotsThreeVertical", "Content", "Viewport", "CardBody", "gutter", "cardBody", "CardMedia", "src", "contain", "img", "cardMedia", "Card", "Header", "DragHandle", "Endcap", "Menu", "Title", "Body", "Media"]
+}

package/dist/lib/browser/meta.json

@@ -0,0 +1 @@
+{"inputs":{"packages/ui/react-ui-card/src/theme.ts":{"bytes":9556,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-card/src/components/Card.tsx":{"bytes":13946,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-card/src/theme.ts","kind":"import-statement","original":"../theme"}],"format":"esm"},"packages/ui/react-ui-card/src/components/index.ts":{"bytes":468,"imports":[{"path":"packages/ui/react-ui-card/src/components/Card.tsx","kind":"import-statement","original":"./Card"}],"format":"esm"},"packages/ui/react-ui-card/src/index.ts":{"bytes":552,"imports":[{"path":"packages/ui/react-ui-card/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-card/src/theme.ts","kind":"import-statement","original":"./theme"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-card/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12704},"packages/ui/react-ui-card/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["Card","CardBody","CardHeader","CardMedia","CardTitle","cardBody","cardDragHandle","cardDragHandleIcon","cardHeader","cardMedia","cardMenu","cardMenuIcon","cardRoot","cardTheme","cardTitle"],"entryPoint":"packages/ui/react-ui-card/src/index.ts","inputs":{"packages/ui/react-ui-card/src/components/Card.tsx":{"bytesInOutput":3079},"packages/ui/react-ui-card/src/theme.ts":{"bytesInOutput":2199},"packages/ui/react-ui-card/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-card/src/index.ts":{"bytesInOutput":0}},"bytes":5679}}}

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

@@ -0,0 +1,52 @@
+import { type Icon } from '@phosphor-icons/react';
+import { type Primitive } from '@radix-ui/react-primitive';
+import React, { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type FC } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+type CardRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+    grow?: boolean;
+    square?: boolean;
+    noPadding?: boolean;
+};
+type CardHeaderProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+    floating?: boolean;
+};
+export declare const CardHeader: FC<CardHeaderProps>;
+type CardTitleProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+    center?: boolean;
+    title?: string;
+};
+export declare const CardTitle: FC<CardTitleProps>;
+type CardDragHandleProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+    position?: 'left' | 'right';
+};
+type CardEndcapProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+    Icon: Icon;
+    position?: 'left' | 'right';
+};
+type CardBodyProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+    gutter?: boolean;
+};
+export declare const CardBody: FC<CardBodyProps>;
+type CardMediaProps = ThemedClassName<ComponentPropsWithoutRef<'div'>> & {
+    src?: string;
+    contain?: boolean;
+};
+export declare const CardMedia: FC<CardMediaProps>;
+export declare const Card: {
+    Root: React.ForwardRefExoticComponent<Pick<CardRootProps, "grow" | "square" | "noPadding" | "title" | "slot" | "style" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | "classNames"> & React.RefAttributes<HTMLDivElement>>;
+    Header: React.FC<CardHeaderProps>;
+    DragHandle: React.FC<CardDragHandleProps>;
+    Endcap: React.FC<CardEndcapProps>;
+    Menu: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "className"> & {
+        classNames?: import("@dxos/react-ui").ClassNameValue;
+    } & {
+        position?: "left" | "right" | undefined;
+    } & {
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Title: React.FC<CardTitleProps>;
+    Body: React.FC<CardBodyProps>;
+    Media: React.FC<CardMediaProps>;
+};
+export type { CardRootProps };
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/Card.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAsC,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACtF,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,EAAE,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;CAAE,CAAC;AAmCtH,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;;;;;;;;;;;;;;;CAShB,CAAC;AAEF,YAAY,EAAE,aAAa,EAAE,CAAC"}

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

@@ -0,0 +1,56 @@
+import '@dxosTheme';
+import React from 'react';
+declare const _default: {
+    component: {
+        Root: React.ForwardRefExoticComponent<Pick<import("./Card").CardRootProps, "grow" | "square" | "noPadding" | "title" | "slot" | "style" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "asChild" | "classNames"> & React.RefAttributes<HTMLDivElement>>;
+        Header: React.FC<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "className"> & {
+            classNames?: import("@dxos/react-ui").ClassNameValue;
+        } & {
+            floating?: boolean | undefined;
+        }>;
+        DragHandle: React.FC<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "className"> & {
+            classNames?: import("@dxos/react-ui").ClassNameValue;
+        } & {
+            position?: "left" | "right" | undefined;
+        }>;
+        Endcap: React.FC<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "className"> & {
+            classNames?: import("@dxos/react-ui").ClassNameValue;
+        } & {
+            Icon: import("@phosphor-icons/react").Icon;
+            position?: "left" | "right" | undefined;
+        }>;
+        Menu: React.ForwardRefExoticComponent<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "className"> & {
+            classNames?: import("@dxos/react-ui").ClassNameValue;
+        } & {
+            position?: "left" | "right" | undefined;
+        } & {
+            children?: React.ReactNode;
+        } & React.RefAttributes<HTMLDivElement>>;
+        Title: React.FC<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "className"> & {
+            classNames?: import("@dxos/react-ui").ClassNameValue;
+        } & {
+            center?: boolean | undefined;
+            title?: string | undefined;
+        }>;
+        Body: React.FC<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "className"> & {
+            classNames?: import("@dxos/react-ui").ClassNameValue;
+        } & {
+            gutter?: boolean | undefined;
+        }>;
+        Media: React.FC<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "className"> & {
+            classNames?: import("@dxos/react-ui").ClassNameValue;
+        } & {
+            src?: string | undefined;
+            contain?: boolean | undefined;
+        }>;
+    };
+    decorators: ((Story: any) => JSX.Element)[];
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Draggable: () => JSX.Element;
+export declare const ReadOnly: () => JSX.Element;
+export declare const Editable: () => JSX.Element;
+//# sourceMappingURL=Card.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Card.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAMpB,OAAO,KAAoD,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBA4L7D,GAAG;;;;;AAHf,wBAiBE;AAEF,eAAO,MAAM,SAAS,mBAA2B,CAAC;AAClD,eAAO,MAAM,QAAQ,mBAA8B,CAAC;AACpD,eAAO,MAAM,QAAQ,mBAA8B,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Card';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './theme';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1 @@
+{"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/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@dxos/react-ui-card",
+  "version": "0.3.9-main.16d375f",
+  "description": "A navigation tree component.",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "main": "dist/lib/node/index.cjs",
+  "browser": {
+    "./dist/lib/node/index.cjs": "./dist/lib/browser/index.mjs"
+  },
+  "types": "dist/types/src/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@radix-ui/react-primitive": "^1.0.2",
+    "@dxos/react-ui": "0.3.9-main.16d375f",
+    "@dxos/react-ui-theme": "0.3.9-main.16d375f"
+  },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/sortable": "^7.0.1",
+    "@dnd-kit/utilities": "^3.2.0",
+    "@faker-js/faker": "^8.0.2",
+    "@phosphor-icons/react": "^2.0.5",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "chromatic": "^7.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "vite": "^4.3.9",
+    "vite-plugin-turbosnap": "^1.0.2",
+    "@dxos/util": "0.3.9-main.16d375f"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "chromatic": "true"
+  }
+}

package/src/components/Card.stories.tsx

@@ -0,0 +1,217 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { DndContext, type DragEndEvent } from '@dnd-kit/core';
+import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { faker } from '@faker-js/faker';
+import React, { type FC, type PropsWithChildren, useState } from 'react';
+
+import { DensityProvider, DropdownMenu, Input, ScrollArea } from '@dxos/react-ui';
+import { chromeSurface, mx } from '@dxos/react-ui-theme';
+
+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 {
+  component: Card,
+  decorators: [
+    (Story: any) => (
+      <div className={mx('flex h-screen w-full justify-center overflow-hidden', chromeSurface)}>
+        <div className='flex flex-col w-[360px] overflow-hidden'>
+          {/* TODO(burdon): Story for different densities. */}
+          <DensityProvider density='fine'>
+            <Story />
+          </DensityProvider>
+        </div>
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const Draggable = () => <DraggableStory />;
+export const ReadOnly = () => <ReadonlyCardStory />;
+export const Editable = () => <EditableCardStory />;

package/src/components/Card.tsx

@@ -0,0 +1,149 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { DotsSixVertical, DotsThreeVertical, type Icon } from '@phosphor-icons/react';
+import { type Primitive } from '@radix-ui/react-primitive';
+import React, {
+  type ComponentPropsWithoutRef,
+  type ComponentPropsWithRef,
+  type FC,
+  forwardRef,
+  type PropsWithChildren,
+} 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, 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/components/index.ts

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

package/src/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './components';
+export * from './theme';

package/src/theme.ts

@@ -0,0 +1,101 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentFunction, type Density, type Theme } from '@dxos/react-ui';
+import { getSize, inputSurface, 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,
+    inputSurface,
+    '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,
+};