@dxos/react-ui-card 0.3.11-main.fbbdc2a → 0.3.11-main.fc97a54
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 +4 -4
- package/dist/lib/browser/index.mjs.map +3 -3
- package/dist/lib/browser/meta.json +1 -1
- package/dist/types/src/components/Card.stories.d.ts +1 -1
- package/dist/types/src/components/Card.stories.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/components/Card.stories.tsx +3 -3
- package/src/theme.ts +2 -2
|
@@ -4,11 +4,11 @@ import React, { forwardRef } from "react";
|
|
|
4
4
|
import { useDensityContext, DropdownMenu } from "@dxos/react-ui";
|
|
5
5
|
|
|
6
6
|
// packages/ui/react-ui-card/src/theme.ts
|
|
7
|
-
import { getSize,
|
|
7
|
+
import { getSize, attentionSurface, mx } from "@dxos/react-ui-theme";
|
|
8
8
|
var defaults = {
|
|
9
9
|
width: "min-w-[256px]"
|
|
10
10
|
};
|
|
11
|
-
var cardRoot = ({ grow, square, rounded = true }, ...etc) => mx("flex flex-col group/card overflow-hidden", grow && "h-full", defaults.width,
|
|
11
|
+
var cardRoot = ({ grow, square, rounded = true }, ...etc) => mx("flex flex-col group/card overflow-hidden", grow && "h-full", defaults.width, attentionSurface, "shadow", rounded && "rounded", square && "aspect-square", ...etc);
|
|
12
12
|
var cardHeader = ({ floating }, ...etc) => mx(floating ? "relative" : "flex w-full shrink-0 justify-between overflow-hidden items-center py-1", ...etc);
|
|
13
13
|
var cardTitle = ({ center }, ...etc) => mx("grow overflow-hidden truncate first:pl-4 last:pr-4", center && "text-center", ...etc);
|
|
14
14
|
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);
|
|
@@ -93,7 +93,7 @@ var CardEndcap = ({ Icon, position, classNames, ...props }) => {
|
|
|
93
93
|
className: cardMenuIcon({})
|
|
94
94
|
}));
|
|
95
95
|
};
|
|
96
|
-
var CardMenu = /* @__PURE__ */ forwardRef(({ children, position, classNames, ...props },
|
|
96
|
+
var CardMenu = /* @__PURE__ */ forwardRef(({ children, position, classNames, ...props }, forwardRef2) => {
|
|
97
97
|
const density = useDensityContext();
|
|
98
98
|
return /* @__PURE__ */ React.createElement("div", {
|
|
99
99
|
...props,
|
|
@@ -101,7 +101,7 @@ var CardMenu = /* @__PURE__ */ forwardRef(({ children, position, classNames, ...
|
|
|
101
101
|
density,
|
|
102
102
|
position
|
|
103
103
|
}, classNames),
|
|
104
|
-
ref:
|
|
104
|
+
ref: forwardRef2
|
|
105
105
|
}, /* @__PURE__ */ React.createElement(DropdownMenu.Root, null, /* @__PURE__ */ React.createElement(DropdownMenu.Trigger, {
|
|
106
106
|
asChild: true
|
|
107
107
|
}, /* @__PURE__ */ React.createElement(DotsThreeVertical, {
|
|
@@ -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 { 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,
|
|
5
|
-
"mappings": ";AAIA,SAASA,iBAAiBC,yBAAoC;AAE9D,OAAOC,SAILC,kBAEK;AAEP,SAASC,mBAAmBC,oBAA0C;;;ACTtE,SAASC,SAASC,
|
|
6
|
-
"names": ["DotsSixVertical", "DotsThreeVertical", "React", "forwardRef", "useDensityContext", "DropdownMenu", "getSize", "
|
|
4
|
+
"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, 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
|
+
"names": ["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", "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":13944,"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":12723},"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":2207},"packages/ui/react-ui-card/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-card/src/index.ts":{"bytesInOutput":0}},"bytes":5687}}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Card.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Card.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Card.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAKpB,OAAO,KAAoD,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2LzE,wBAmBE;AAEF,eAAO,MAAM,SAAS,mBAA2B,CAAC;AAClD,eAAO,MAAM,QAAQ,mBAA8B,CAAC;AACpD,eAAO,MAAM,QAAQ,mBAA8B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/react-ui-card",
|
|
3
|
-
"version": "0.3.11-main.
|
|
3
|
+
"version": "0.3.11-main.fc97a54",
|
|
4
4
|
"description": "A navigation tree component.",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -17,23 +17,23 @@
|
|
|
17
17
|
],
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@radix-ui/react-primitive": "^1.0.2",
|
|
20
|
-
"@dxos/react-ui": "0.3.11-main.
|
|
21
|
-
"@dxos/react-ui-theme": "0.3.11-main.
|
|
20
|
+
"@dxos/react-ui": "0.3.11-main.fc97a54",
|
|
21
|
+
"@dxos/react-ui-theme": "0.3.11-main.fc97a54"
|
|
22
22
|
},
|
|
23
23
|
"devDependencies": {
|
|
24
24
|
"@dnd-kit/core": "^6.0.5",
|
|
25
25
|
"@dnd-kit/sortable": "^7.0.1",
|
|
26
26
|
"@dnd-kit/utilities": "^3.2.0",
|
|
27
|
-
"@faker-js/faker": "^8.0.2",
|
|
28
27
|
"@phosphor-icons/react": "^2.0.5",
|
|
29
28
|
"@types/react": "^18.0.21",
|
|
30
29
|
"@types/react-dom": "^18.0.6",
|
|
31
30
|
"react": "^18.2.0",
|
|
32
31
|
"react-dom": "^18.2.0",
|
|
33
|
-
"vite": "^
|
|
32
|
+
"vite": "^5.0.12",
|
|
34
33
|
"vite-plugin-turbosnap": "^1.0.2",
|
|
35
|
-
"@dxos/
|
|
36
|
-
"@dxos/
|
|
34
|
+
"@dxos/random": "0.3.11-main.fc97a54",
|
|
35
|
+
"@dxos/storybook-utils": "0.3.11-main.fc97a54",
|
|
36
|
+
"@dxos/util": "0.3.11-main.fc97a54"
|
|
37
37
|
},
|
|
38
38
|
"peerDependencies": {
|
|
39
39
|
"@phosphor-icons/react": "^2.0.5",
|
|
@@ -7,11 +7,11 @@ import '@dxosTheme';
|
|
|
7
7
|
import { DndContext, type DragEndEvent } from '@dnd-kit/core';
|
|
8
8
|
import { arrayMove, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
|
|
9
9
|
import { CSS } from '@dnd-kit/utilities';
|
|
10
|
-
import { faker } from '@faker-js/faker';
|
|
11
10
|
import React, { type FC, type PropsWithChildren, useState } from 'react';
|
|
12
11
|
|
|
12
|
+
import { faker } from '@dxos/random';
|
|
13
13
|
import { DensityProvider, DropdownMenu, Input, ScrollArea } from '@dxos/react-ui';
|
|
14
|
-
import {
|
|
14
|
+
import { modalSurface, mx } from '@dxos/react-ui-theme';
|
|
15
15
|
import { withTheme } from '@dxos/storybook-utils';
|
|
16
16
|
|
|
17
17
|
import { Card } from './Card';
|
|
@@ -200,7 +200,7 @@ export default {
|
|
|
200
200
|
decorators: [
|
|
201
201
|
withTheme,
|
|
202
202
|
(Story: any) => (
|
|
203
|
-
<div className={mx('flex h-screen w-full justify-center overflow-hidden',
|
|
203
|
+
<div className={mx('flex h-screen w-full justify-center overflow-hidden', modalSurface)}>
|
|
204
204
|
<div className='flex flex-col w-[360px] overflow-hidden'>
|
|
205
205
|
{/* TODO(burdon): Story for different densities. */}
|
|
206
206
|
<DensityProvider density='fine'>
|
package/src/theme.ts
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
//
|
|
4
4
|
|
|
5
5
|
import { type ComponentFunction, type Density, type Theme } from '@dxos/react-ui';
|
|
6
|
-
import { getSize,
|
|
6
|
+
import { getSize, attentionSurface, mx } from '@dxos/react-ui-theme';
|
|
7
7
|
|
|
8
8
|
const defaults = {
|
|
9
9
|
width: 'min-w-[256px]',
|
|
@@ -22,7 +22,7 @@ export const cardRoot: ComponentFunction<CardStyleProps> = ({ grow, square, roun
|
|
|
22
22
|
'flex flex-col group/card overflow-hidden',
|
|
23
23
|
grow && 'h-full',
|
|
24
24
|
defaults.width,
|
|
25
|
-
|
|
25
|
+
attentionSurface,
|
|
26
26
|
'shadow', // TODO(burdon): Elevation?
|
|
27
27
|
rounded && 'rounded',
|
|
28
28
|
square && 'aspect-square',
|