@dxos/react-ui-card 0.8.2-staging.7ac8446 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +112 -71
- package/dist/lib/browser/index.mjs.map +2 -2
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +112 -71
- package/dist/lib/node/index.cjs.map +2 -2
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +112 -71
- package/dist/lib/node-esm/index.mjs.map +2 -2
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/tsconfig.tsbuildinfo +1 -1
- package/package.json +9 -8
- package/src/components/Card.tsx +1 -1
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
// packages/ui/react-ui-card/src/components/Card.tsx
|
|
2
|
+
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
2
3
|
import { Circle, DotsSixVertical, DotsThreeVertical } from "@phosphor-icons/react";
|
|
3
4
|
import React, { forwardRef } from "react";
|
|
4
5
|
import { useDensityContext, DropdownMenu } from "@dxos/react-ui";
|
|
@@ -43,91 +44,131 @@ var cardTheme = {
|
|
|
43
44
|
|
|
44
45
|
// packages/ui/react-ui-card/src/components/Card.tsx
|
|
45
46
|
var CardRoot = /* @__PURE__ */ forwardRef(({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
47
|
+
var _effect = _useSignals();
|
|
48
|
+
try {
|
|
49
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
50
|
+
...props,
|
|
51
|
+
ref: forwardedRef,
|
|
52
|
+
className: cardRoot({
|
|
53
|
+
grow,
|
|
54
|
+
square,
|
|
55
|
+
noPadding
|
|
56
|
+
}, classNames)
|
|
57
|
+
}, children);
|
|
58
|
+
} finally {
|
|
59
|
+
_effect.f();
|
|
60
|
+
}
|
|
55
61
|
});
|
|
56
62
|
var CardHeader = ({ floating, classNames, children, ...props }) => {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
+
var _effect = _useSignals();
|
|
64
|
+
try {
|
|
65
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
66
|
+
...props,
|
|
67
|
+
className: cardHeader({
|
|
68
|
+
floating
|
|
69
|
+
}, classNames)
|
|
70
|
+
}, children);
|
|
71
|
+
} finally {
|
|
72
|
+
_effect.f();
|
|
73
|
+
}
|
|
63
74
|
};
|
|
64
75
|
var CardTitle = ({ center, title, classNames, ...props }) => {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
76
|
+
var _effect = _useSignals();
|
|
77
|
+
try {
|
|
78
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
79
|
+
...props,
|
|
80
|
+
className: cardTitle({
|
|
81
|
+
center
|
|
82
|
+
}, classNames)
|
|
83
|
+
}, title);
|
|
84
|
+
} finally {
|
|
85
|
+
_effect.f();
|
|
86
|
+
}
|
|
71
87
|
};
|
|
72
88
|
var CardDragHandle = ({ position, classNames, ...props }) => {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
89
|
+
var _effect = _useSignals();
|
|
90
|
+
try {
|
|
91
|
+
const density = useDensityContext();
|
|
92
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
93
|
+
...props,
|
|
94
|
+
className: cardDragHandle({
|
|
95
|
+
density,
|
|
96
|
+
position
|
|
97
|
+
}, classNames)
|
|
98
|
+
}, /* @__PURE__ */ React.createElement(DotsSixVertical, {
|
|
99
|
+
className: cardDragHandleIcon({})
|
|
100
|
+
}));
|
|
101
|
+
} finally {
|
|
102
|
+
_effect.f();
|
|
103
|
+
}
|
|
83
104
|
};
|
|
84
105
|
var CardEndcap = ({ Icon = Circle, position, classNames, ...props }) => {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
106
|
+
var _effect = _useSignals();
|
|
107
|
+
try {
|
|
108
|
+
const density = useDensityContext();
|
|
109
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
110
|
+
...props,
|
|
111
|
+
className: cardMenu({
|
|
112
|
+
density,
|
|
113
|
+
position
|
|
114
|
+
}, classNames)
|
|
115
|
+
}, /* @__PURE__ */ React.createElement(Icon, {
|
|
116
|
+
className: cardMenuIcon({})
|
|
117
|
+
}));
|
|
118
|
+
} finally {
|
|
119
|
+
_effect.f();
|
|
120
|
+
}
|
|
95
121
|
};
|
|
96
122
|
var CardMenu = /* @__PURE__ */ forwardRef(({ children, position, classNames, ...props }, forwardRef2) => {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
123
|
+
var _effect = _useSignals();
|
|
124
|
+
try {
|
|
125
|
+
const density = useDensityContext();
|
|
126
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
127
|
+
...props,
|
|
128
|
+
className: cardMenu({
|
|
129
|
+
density,
|
|
130
|
+
position
|
|
131
|
+
}, classNames),
|
|
132
|
+
ref: forwardRef2
|
|
133
|
+
}, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
|
|
134
|
+
asChild: true
|
|
135
|
+
}, /* @__PURE__ */ React.createElement(DotsThreeVertical, {
|
|
136
|
+
className: cardMenuIcon({})
|
|
137
|
+
})), /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, children))));
|
|
138
|
+
} finally {
|
|
139
|
+
_effect.f();
|
|
140
|
+
}
|
|
110
141
|
});
|
|
111
142
|
var CardBody = ({ gutter, classNames, children, ...props }) => {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
143
|
+
var _effect = _useSignals();
|
|
144
|
+
try {
|
|
145
|
+
const density = useDensityContext();
|
|
146
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
147
|
+
...props,
|
|
148
|
+
className: cardBody({
|
|
149
|
+
density,
|
|
150
|
+
gutter
|
|
151
|
+
}, classNames)
|
|
152
|
+
}, children);
|
|
153
|
+
} finally {
|
|
154
|
+
_effect.f();
|
|
155
|
+
}
|
|
120
156
|
};
|
|
121
157
|
var CardMedia = ({ src, contain, classNames, ...props }) => {
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
158
|
+
var _effect = _useSignals();
|
|
159
|
+
try {
|
|
160
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
161
|
+
className: "flex grow overflow-hidden"
|
|
162
|
+
}, /* @__PURE__ */ React.createElement("img", {
|
|
163
|
+
...props,
|
|
164
|
+
className: cardMedia({
|
|
165
|
+
contain
|
|
166
|
+
}, classNames),
|
|
167
|
+
src
|
|
168
|
+
}));
|
|
169
|
+
} finally {
|
|
170
|
+
_effect.f();
|
|
171
|
+
}
|
|
131
172
|
};
|
|
132
173
|
var Card = {
|
|
133
174
|
Root: CardRoot,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Card.tsx", "../../../src/theme.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Circle, 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
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Circle, 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 type PropsWithChildren,\n forwardRef,\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 = Circle, 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, attentionSurface, 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 attentionSurface,\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Circle", "DotsSixVertical", "DotsThreeVertical", "React", "forwardRef", "useDensityContext", "DropdownMenu", "getSize", "attentionSurface", "mx", "defaults", "width", "cardRoot", "grow", "square", "rounded", "etc", "mx", "attentionSurface", "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", "Circle", "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"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-card/src/theme.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-card/src/theme.ts":{"bytes":9584,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-card/src/components/Card.tsx":{"bytes":15142,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":12814},"packages/ui/react-ui-card/dist/lib/browser/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":3911},"packages/ui/react-ui-card/src/theme.ts":{"bytesInOutput":2207},"packages/ui/react-ui-card/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-card/src/index.ts":{"bytesInOutput":0}},"bytes":6519}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -45,6 +45,7 @@ __export(node_exports, {
|
|
|
45
45
|
cardTitle: () => cardTitle
|
|
46
46
|
});
|
|
47
47
|
module.exports = __toCommonJS(node_exports);
|
|
48
|
+
var import_tracking = require("@preact-signals/safe-react/tracking");
|
|
48
49
|
var import_react = require("@phosphor-icons/react");
|
|
49
50
|
var import_react2 = __toESM(require("react"));
|
|
50
51
|
var import_react_ui = require("@dxos/react-ui");
|
|
@@ -85,91 +86,131 @@ var cardTheme = {
|
|
|
85
86
|
media: cardMedia
|
|
86
87
|
};
|
|
87
88
|
var CardRoot = /* @__PURE__ */ (0, import_react2.forwardRef)(({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
89
|
+
var _effect = (0, import_tracking.useSignals)();
|
|
90
|
+
try {
|
|
91
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
92
|
+
...props,
|
|
93
|
+
ref: forwardedRef,
|
|
94
|
+
className: cardRoot({
|
|
95
|
+
grow,
|
|
96
|
+
square,
|
|
97
|
+
noPadding
|
|
98
|
+
}, classNames)
|
|
99
|
+
}, children);
|
|
100
|
+
} finally {
|
|
101
|
+
_effect.f();
|
|
102
|
+
}
|
|
97
103
|
});
|
|
98
104
|
var CardHeader = ({ floating, classNames, children, ...props }) => {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
+
var _effect = (0, import_tracking.useSignals)();
|
|
106
|
+
try {
|
|
107
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
108
|
+
...props,
|
|
109
|
+
className: cardHeader({
|
|
110
|
+
floating
|
|
111
|
+
}, classNames)
|
|
112
|
+
}, children);
|
|
113
|
+
} finally {
|
|
114
|
+
_effect.f();
|
|
115
|
+
}
|
|
105
116
|
};
|
|
106
117
|
var CardTitle = ({ center, title, classNames, ...props }) => {
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
118
|
+
var _effect = (0, import_tracking.useSignals)();
|
|
119
|
+
try {
|
|
120
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
121
|
+
...props,
|
|
122
|
+
className: cardTitle({
|
|
123
|
+
center
|
|
124
|
+
}, classNames)
|
|
125
|
+
}, title);
|
|
126
|
+
} finally {
|
|
127
|
+
_effect.f();
|
|
128
|
+
}
|
|
113
129
|
};
|
|
114
130
|
var CardDragHandle = ({ position, classNames, ...props }) => {
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
131
|
+
var _effect = (0, import_tracking.useSignals)();
|
|
132
|
+
try {
|
|
133
|
+
const density = (0, import_react_ui.useDensityContext)();
|
|
134
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
135
|
+
...props,
|
|
136
|
+
className: cardDragHandle({
|
|
137
|
+
density,
|
|
138
|
+
position
|
|
139
|
+
}, classNames)
|
|
140
|
+
}, /* @__PURE__ */ import_react2.default.createElement(import_react.DotsSixVertical, {
|
|
141
|
+
className: cardDragHandleIcon({})
|
|
142
|
+
}));
|
|
143
|
+
} finally {
|
|
144
|
+
_effect.f();
|
|
145
|
+
}
|
|
125
146
|
};
|
|
126
147
|
var CardEndcap = ({ Icon = import_react.Circle, position, classNames, ...props }) => {
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
148
|
+
var _effect = (0, import_tracking.useSignals)();
|
|
149
|
+
try {
|
|
150
|
+
const density = (0, import_react_ui.useDensityContext)();
|
|
151
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
152
|
+
...props,
|
|
153
|
+
className: cardMenu({
|
|
154
|
+
density,
|
|
155
|
+
position
|
|
156
|
+
}, classNames)
|
|
157
|
+
}, /* @__PURE__ */ import_react2.default.createElement(Icon, {
|
|
158
|
+
className: cardMenuIcon({})
|
|
159
|
+
}));
|
|
160
|
+
} finally {
|
|
161
|
+
_effect.f();
|
|
162
|
+
}
|
|
137
163
|
};
|
|
138
164
|
var CardMenu = /* @__PURE__ */ (0, import_react2.forwardRef)(({ children, position, classNames, ...props }, forwardRef2) => {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
165
|
+
var _effect = (0, import_tracking.useSignals)();
|
|
166
|
+
try {
|
|
167
|
+
const density = (0, import_react_ui.useDensityContext)();
|
|
168
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
169
|
+
...props,
|
|
170
|
+
className: cardMenu({
|
|
171
|
+
density,
|
|
172
|
+
position
|
|
173
|
+
}, classNames),
|
|
174
|
+
ref: forwardRef2
|
|
175
|
+
}, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Root, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Trigger, {
|
|
176
|
+
asChild: true
|
|
177
|
+
}, /* @__PURE__ */ import_react2.default.createElement(import_react.DotsThreeVertical, {
|
|
178
|
+
className: cardMenuIcon({})
|
|
179
|
+
})), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Content, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.DropdownMenu.Viewport, null, children))));
|
|
180
|
+
} finally {
|
|
181
|
+
_effect.f();
|
|
182
|
+
}
|
|
152
183
|
});
|
|
153
184
|
var CardBody = ({ gutter, classNames, children, ...props }) => {
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
185
|
+
var _effect = (0, import_tracking.useSignals)();
|
|
186
|
+
try {
|
|
187
|
+
const density = (0, import_react_ui.useDensityContext)();
|
|
188
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
189
|
+
...props,
|
|
190
|
+
className: cardBody({
|
|
191
|
+
density,
|
|
192
|
+
gutter
|
|
193
|
+
}, classNames)
|
|
194
|
+
}, children);
|
|
195
|
+
} finally {
|
|
196
|
+
_effect.f();
|
|
197
|
+
}
|
|
162
198
|
};
|
|
163
199
|
var CardMedia = ({ src, contain, classNames, ...props }) => {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
200
|
+
var _effect = (0, import_tracking.useSignals)();
|
|
201
|
+
try {
|
|
202
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", {
|
|
203
|
+
className: "flex grow overflow-hidden"
|
|
204
|
+
}, /* @__PURE__ */ import_react2.default.createElement("img", {
|
|
205
|
+
...props,
|
|
206
|
+
className: cardMedia({
|
|
207
|
+
contain
|
|
208
|
+
}, classNames),
|
|
209
|
+
src
|
|
210
|
+
}));
|
|
211
|
+
} finally {
|
|
212
|
+
_effect.f();
|
|
213
|
+
}
|
|
173
214
|
};
|
|
174
215
|
var Card = {
|
|
175
216
|
Root: CardRoot,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Card.tsx", "../../../src/theme.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Circle, 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
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Circle, 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 type PropsWithChildren,\n forwardRef,\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 = Circle, 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, attentionSurface, 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 attentionSurface,\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "defaults", "width", "cardRoot", "grow", "square", "rounded", "etc", "mx", "attentionSurface", "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", "classNames", "children", "props", "forwardedRef", "React", "div", "ref", "className", "CardHeader", "CardTitle", "CardDragHandle", "useDensityContext", "DotsSixVertical", "CardEndcap", "Icon", "Circle", "CardMenu", "DropdownMenu", "Root", "Trigger", "asChild", "DotsThreeVertical", "Content", "Viewport", "CardBody", "CardMedia", "src", "img", "Card", "Header", "DragHandle", "Endcap", "Menu", "Title", "Body", "Media"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-card/src/theme.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-card/src/theme.ts":{"bytes":9584,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-card/src/components/Card.tsx":{"bytes":15142,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12814},"packages/ui/react-ui-card/dist/lib/node/index.cjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":3911},"packages/ui/react-ui-card/src/theme.ts":{"bytesInOutput":2207},"packages/ui/react-ui-card/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-card/src/index.ts":{"bytesInOutput":0}},"bytes":6519}}}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
|
|
2
2
|
|
|
3
3
|
// packages/ui/react-ui-card/src/components/Card.tsx
|
|
4
|
+
import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
|
|
4
5
|
import { Circle, DotsSixVertical, DotsThreeVertical } from "@phosphor-icons/react";
|
|
5
6
|
import React, { forwardRef } from "react";
|
|
6
7
|
import { useDensityContext, DropdownMenu } from "@dxos/react-ui";
|
|
@@ -45,91 +46,131 @@ var cardTheme = {
|
|
|
45
46
|
|
|
46
47
|
// packages/ui/react-ui-card/src/components/Card.tsx
|
|
47
48
|
var CardRoot = /* @__PURE__ */ forwardRef(({ grow, square, noPadding, classNames, children, ...props }, forwardedRef) => {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
49
|
+
var _effect = _useSignals();
|
|
50
|
+
try {
|
|
51
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
52
|
+
...props,
|
|
53
|
+
ref: forwardedRef,
|
|
54
|
+
className: cardRoot({
|
|
55
|
+
grow,
|
|
56
|
+
square,
|
|
57
|
+
noPadding
|
|
58
|
+
}, classNames)
|
|
59
|
+
}, children);
|
|
60
|
+
} finally {
|
|
61
|
+
_effect.f();
|
|
62
|
+
}
|
|
57
63
|
});
|
|
58
64
|
var CardHeader = ({ floating, classNames, children, ...props }) => {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
+
var _effect = _useSignals();
|
|
66
|
+
try {
|
|
67
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
68
|
+
...props,
|
|
69
|
+
className: cardHeader({
|
|
70
|
+
floating
|
|
71
|
+
}, classNames)
|
|
72
|
+
}, children);
|
|
73
|
+
} finally {
|
|
74
|
+
_effect.f();
|
|
75
|
+
}
|
|
65
76
|
};
|
|
66
77
|
var CardTitle = ({ center, title, classNames, ...props }) => {
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
78
|
+
var _effect = _useSignals();
|
|
79
|
+
try {
|
|
80
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
81
|
+
...props,
|
|
82
|
+
className: cardTitle({
|
|
83
|
+
center
|
|
84
|
+
}, classNames)
|
|
85
|
+
}, title);
|
|
86
|
+
} finally {
|
|
87
|
+
_effect.f();
|
|
88
|
+
}
|
|
73
89
|
};
|
|
74
90
|
var CardDragHandle = ({ position, classNames, ...props }) => {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
91
|
+
var _effect = _useSignals();
|
|
92
|
+
try {
|
|
93
|
+
const density = useDensityContext();
|
|
94
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
95
|
+
...props,
|
|
96
|
+
className: cardDragHandle({
|
|
97
|
+
density,
|
|
98
|
+
position
|
|
99
|
+
}, classNames)
|
|
100
|
+
}, /* @__PURE__ */ React.createElement(DotsSixVertical, {
|
|
101
|
+
className: cardDragHandleIcon({})
|
|
102
|
+
}));
|
|
103
|
+
} finally {
|
|
104
|
+
_effect.f();
|
|
105
|
+
}
|
|
85
106
|
};
|
|
86
107
|
var CardEndcap = ({ Icon = Circle, position, classNames, ...props }) => {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
108
|
+
var _effect = _useSignals();
|
|
109
|
+
try {
|
|
110
|
+
const density = useDensityContext();
|
|
111
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
112
|
+
...props,
|
|
113
|
+
className: cardMenu({
|
|
114
|
+
density,
|
|
115
|
+
position
|
|
116
|
+
}, classNames)
|
|
117
|
+
}, /* @__PURE__ */ React.createElement(Icon, {
|
|
118
|
+
className: cardMenuIcon({})
|
|
119
|
+
}));
|
|
120
|
+
} finally {
|
|
121
|
+
_effect.f();
|
|
122
|
+
}
|
|
97
123
|
};
|
|
98
124
|
var CardMenu = /* @__PURE__ */ forwardRef(({ children, position, classNames, ...props }, forwardRef2) => {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
125
|
+
var _effect = _useSignals();
|
|
126
|
+
try {
|
|
127
|
+
const density = useDensityContext();
|
|
128
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
129
|
+
...props,
|
|
130
|
+
className: cardMenu({
|
|
131
|
+
density,
|
|
132
|
+
position
|
|
133
|
+
}, classNames),
|
|
134
|
+
ref: forwardRef2
|
|
135
|
+
}, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
|
|
136
|
+
asChild: true
|
|
137
|
+
}, /* @__PURE__ */ React.createElement(DotsThreeVertical, {
|
|
138
|
+
className: cardMenuIcon({})
|
|
139
|
+
})), /* @__PURE__ */ React.createElement(DropdownMenu.Content, null, /* @__PURE__ */ React.createElement(DropdownMenu.Viewport, null, children))));
|
|
140
|
+
} finally {
|
|
141
|
+
_effect.f();
|
|
142
|
+
}
|
|
112
143
|
});
|
|
113
144
|
var CardBody = ({ gutter, classNames, children, ...props }) => {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
145
|
+
var _effect = _useSignals();
|
|
146
|
+
try {
|
|
147
|
+
const density = useDensityContext();
|
|
148
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
149
|
+
...props,
|
|
150
|
+
className: cardBody({
|
|
151
|
+
density,
|
|
152
|
+
gutter
|
|
153
|
+
}, classNames)
|
|
154
|
+
}, children);
|
|
155
|
+
} finally {
|
|
156
|
+
_effect.f();
|
|
157
|
+
}
|
|
122
158
|
};
|
|
123
159
|
var CardMedia = ({ src, contain, classNames, ...props }) => {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
160
|
+
var _effect = _useSignals();
|
|
161
|
+
try {
|
|
162
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
163
|
+
className: "flex grow overflow-hidden"
|
|
164
|
+
}, /* @__PURE__ */ React.createElement("img", {
|
|
165
|
+
...props,
|
|
166
|
+
className: cardMedia({
|
|
167
|
+
contain
|
|
168
|
+
}, classNames),
|
|
169
|
+
src
|
|
170
|
+
}));
|
|
171
|
+
} finally {
|
|
172
|
+
_effect.f();
|
|
173
|
+
}
|
|
133
174
|
};
|
|
134
175
|
var Card = {
|
|
135
176
|
Root: CardRoot,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/Card.tsx", "../../../src/theme.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Circle, 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
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Circle, 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 type PropsWithChildren,\n forwardRef,\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 = Circle, 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, attentionSurface, 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 attentionSurface,\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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Circle", "DotsSixVertical", "DotsThreeVertical", "React", "forwardRef", "useDensityContext", "DropdownMenu", "getSize", "attentionSurface", "mx", "defaults", "width", "cardRoot", "grow", "square", "rounded", "etc", "mx", "attentionSurface", "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", "Circle", "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"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/ui/react-ui-card/src/theme.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/ui/react-ui-card/src/theme.ts":{"bytes":9584,"imports":[{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-card/src/components/Card.tsx":{"bytes":15142,"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":12816},"packages/ui/react-ui-card/dist/lib/node-esm/index.mjs":{"imports":[{"path":"@preact-signals/safe-react/tracking","kind":"import-statement","external":true},{"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":3911},"packages/ui/react-ui-card/src/theme.ts":{"bytesInOutput":2207},"packages/ui/react-ui-card/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-card/src/index.ts":{"bytesInOutput":0}},"bytes":6612}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":"5.
|
|
1
|
+
{"version":"5.8.3"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-card",
|
|
3
|
-
"version": "0.8.2
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"description": "An opinionated card component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"src"
|
|
25
25
|
],
|
|
26
26
|
"dependencies": {
|
|
27
|
+
"@preact-signals/safe-react": "^0.9.0",
|
|
27
28
|
"@radix-ui/react-primitive": "2.0.2"
|
|
28
29
|
},
|
|
29
30
|
"devDependencies": {
|
|
@@ -36,18 +37,18 @@
|
|
|
36
37
|
"react": "~18.2.0",
|
|
37
38
|
"react-dom": "~18.2.0",
|
|
38
39
|
"vite": "5.4.7",
|
|
39
|
-
"@dxos/random": "0.8.2
|
|
40
|
-
"@dxos/react-ui": "0.8.2
|
|
41
|
-
"@dxos/react-ui-theme": "0.8.2
|
|
42
|
-
"@dxos/storybook-utils": "0.8.2
|
|
43
|
-
"@dxos/util": "0.8.2
|
|
40
|
+
"@dxos/random": "0.8.2",
|
|
41
|
+
"@dxos/react-ui": "0.8.2",
|
|
42
|
+
"@dxos/react-ui-theme": "0.8.2",
|
|
43
|
+
"@dxos/storybook-utils": "0.8.2",
|
|
44
|
+
"@dxos/util": "0.8.2"
|
|
44
45
|
},
|
|
45
46
|
"peerDependencies": {
|
|
46
47
|
"@phosphor-icons/react": "^2.1.5",
|
|
47
48
|
"react": "~18.2.0",
|
|
48
49
|
"react-dom": "~18.2.0",
|
|
49
|
-
"@dxos/react-ui-theme": "0.8.2
|
|
50
|
-
"@dxos/react-ui": "0.8.2
|
|
50
|
+
"@dxos/react-ui-theme": "0.8.2",
|
|
51
|
+
"@dxos/react-ui": "0.8.2"
|
|
51
52
|
},
|
|
52
53
|
"publishConfig": {
|
|
53
54
|
"access": "public"
|
package/src/components/Card.tsx
CHANGED