@a-type/ui 6.0.47 → 6.0.48
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/components/card/Card.d.ts +14 -7
- package/dist/components/card/Card.js +20 -17
- package/dist/components/card/Card.js.map +1 -1
- package/dist/components/card/Card.module.css +29 -8
- package/dist/components/card/Card.stories.d.ts +17 -2
- package/dist/components/card/Card.stories.js +13 -2
- package/dist/components/card/Card.stories.js.map +1 -1
- package/dist/themes.stories.js +1 -1
- package/dist/themes.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/card/Card.module.css +29 -8
- package/src/components/card/Card.stories.tsx +14 -3
- package/src/components/card/Card.tsx +41 -28
- package/src/themes.stories.tsx +2 -2
|
@@ -1,9 +1,17 @@
|
|
|
1
1
|
import { UseRenderRenderProp } from '@base-ui/react/use-render';
|
|
2
2
|
import { CSSProperties, HTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';
|
|
3
3
|
import { MasonryProps } from '../masonry/masonry.js';
|
|
4
|
-
export
|
|
4
|
+
export interface CardRootProps extends HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
size?: CardSize;
|
|
6
|
+
emphasis?: 'ambient' | 'secondary' | 'primary';
|
|
7
|
+
render?: UseRenderRenderProp<{
|
|
8
|
+
emphasis?: 'ambient' | 'secondary' | 'primary';
|
|
9
|
+
size?: CardSize;
|
|
10
|
+
}>;
|
|
11
|
+
}
|
|
12
|
+
export declare function CardRoot({ emphasis, size, className, ...rest }: CardRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
5
13
|
export type CardSize = 'sm' | 'md' | 'lg';
|
|
6
|
-
export declare function CardMain({ className,
|
|
14
|
+
export declare function CardMain({ className, nonInteractive, ref, size, style, children, visuallyDisabled, visuallyFocused, render, ...rest }: {
|
|
7
15
|
render?: UseRenderRenderProp<{
|
|
8
16
|
visuallyFocused?: boolean;
|
|
9
17
|
visuallyDisabled?: boolean;
|
|
@@ -13,8 +21,7 @@ export declare function CardMain({ className, compact, size, nonInteractive, ref
|
|
|
13
21
|
className?: string;
|
|
14
22
|
onClick?: (ev: MouseEvent) => void;
|
|
15
23
|
children?: ReactNode;
|
|
16
|
-
/** @deprecated
|
|
17
|
-
compact?: boolean;
|
|
24
|
+
/** @deprecated set on Card */
|
|
18
25
|
size?: CardSize;
|
|
19
26
|
/** forces non-interactive version */
|
|
20
27
|
nonInteractive?: boolean;
|
|
@@ -23,7 +30,7 @@ export declare function CardMain({ className, compact, size, nonInteractive, ref
|
|
|
23
30
|
style?: CSSProperties;
|
|
24
31
|
ref?: Ref<any>;
|
|
25
32
|
}): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
26
|
-
export declare const CardTitle: import("react").FunctionComponent<import("../
|
|
33
|
+
export declare const CardTitle: import("react").FunctionComponent<import("../typography/typography.js").TypographyProps>;
|
|
27
34
|
export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
28
35
|
unstyled?: boolean;
|
|
29
36
|
ref?: Ref<HTMLDivElement>;
|
|
@@ -38,9 +45,9 @@ export declare const cardGridColumns: {
|
|
|
38
45
|
small: (size: number) => 2 | 1 | 4 | 3;
|
|
39
46
|
};
|
|
40
47
|
export declare const CardGrid: ({ children, className, columns, gap, }: MasonryProps) => import("react/jsx-runtime").JSX.Element;
|
|
41
|
-
export declare const Card:
|
|
48
|
+
export declare const Card: typeof CardRoot & {
|
|
42
49
|
Main: typeof CardMain;
|
|
43
|
-
Title: import("react").FunctionComponent<import("../
|
|
50
|
+
Title: import("react").FunctionComponent<import("../typography/typography.js").TypographyProps>;
|
|
44
51
|
Content: typeof CardContent;
|
|
45
52
|
Image: import("react").FunctionComponent<import("../utility/SlotDiv.js").SlotDivProps>;
|
|
46
53
|
Footer: import("react").FunctionComponent<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
|
|
@@ -12,14 +12,28 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { useRender } from '@base-ui/react/use-render';
|
|
14
14
|
import classNames from 'clsx';
|
|
15
|
-
import { withClassName
|
|
16
|
-
import { Box } from '../box/Box.js';
|
|
15
|
+
import { withClassName } from '../../hooks.js';
|
|
17
16
|
import { Masonry } from '../masonry/masonry.js';
|
|
17
|
+
import { Text } from '../typography/typography.js';
|
|
18
18
|
import { SlotDiv } from '../utility/SlotDiv.js';
|
|
19
19
|
import cls from './Card.module.css';
|
|
20
|
-
export
|
|
20
|
+
export function CardRoot(_a) {
|
|
21
|
+
var { emphasis = 'ambient', size, className } = _a, rest = __rest(_a, ["emphasis", "size", "className"]);
|
|
22
|
+
return useRender({
|
|
23
|
+
defaultTagName: 'div',
|
|
24
|
+
props: Object.assign(Object.assign({}, rest), { className: classNames(cls.root, {
|
|
25
|
+
'@mode-normal': size === 'lg',
|
|
26
|
+
'@mode-dense': size === 'md',
|
|
27
|
+
'@mode-denser': size === 'sm',
|
|
28
|
+
}, className) }),
|
|
29
|
+
state: {
|
|
30
|
+
emphasis,
|
|
31
|
+
size,
|
|
32
|
+
},
|
|
33
|
+
});
|
|
34
|
+
}
|
|
21
35
|
export function CardMain(_a) {
|
|
22
|
-
var { className,
|
|
36
|
+
var { className, nonInteractive, ref, size, style, children, visuallyDisabled, visuallyFocused, render } = _a, rest = __rest(_a, ["className", "nonInteractive", "ref", "size", "style", "children", "visuallyDisabled", "visuallyFocused", "render"]);
|
|
23
37
|
const isInteractive = !nonInteractive && (!!render || !!rest.onClick);
|
|
24
38
|
const rootProps = Object.assign(Object.assign({}, rest), { className: classNames(cls.main, {
|
|
25
39
|
'@mode-normal': size === 'lg',
|
|
@@ -41,19 +55,8 @@ export function CardMain(_a) {
|
|
|
41
55
|
});
|
|
42
56
|
return root;
|
|
43
57
|
}
|
|
44
|
-
export const CardTitle = withClassName(
|
|
45
|
-
|
|
46
|
-
gap: 'sm',
|
|
47
|
-
col: true,
|
|
48
|
-
rounded: 'md',
|
|
49
|
-
}), cls.title, '@mode-bold');
|
|
50
|
-
const CardContentRoot = withClassName(withProps(Box, {
|
|
51
|
-
surface: 'ambient',
|
|
52
|
-
glass: true,
|
|
53
|
-
col: true,
|
|
54
|
-
gap: 'sm',
|
|
55
|
-
rounded: 'sm',
|
|
56
|
-
}), '@mode-dense', cls.content);
|
|
58
|
+
export const CardTitle = withClassName(Text, cls.title, '@mode-bold');
|
|
59
|
+
const CardContentRoot = withClassName('div', '@mode-dense', cls.content);
|
|
57
60
|
export function CardContent(_a) {
|
|
58
61
|
var { unstyled, ref } = _a, rest = __rest(_a, ["unstyled", "ref"]);
|
|
59
62
|
return (_jsx(CardContentRoot, Object.assign({ ref: ref, "data-unstyled": unstyled || undefined }, rest)));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAuB,MAAM,2BAA2B,CAAC;AAC3E,OAAO,UAAU,MAAM,MAAM,CAAC;AAQ9B,OAAO,EAAE,aAAa,EAAE,
|
|
1
|
+
{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../../src/components/card/Card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -6,9 +6,6 @@
|
|
|
6
6
|
overflow: clip;
|
|
7
7
|
|
|
8
8
|
@apply --mx-shadow(var(--m-shadow-sm));
|
|
9
|
-
@apply --mx-surface-ambient;
|
|
10
|
-
@apply --mx-bg-heavier(0.1);
|
|
11
|
-
@apply --mx-borderColor-faded(50%);
|
|
12
9
|
border-width: var(--m-lineWidth-sm);
|
|
13
10
|
border-radius: var(--m-surface-radius);
|
|
14
11
|
|
|
@@ -18,9 +15,21 @@
|
|
|
18
15
|
|
|
19
16
|
padding: 0;
|
|
20
17
|
|
|
21
|
-
&[data-
|
|
22
|
-
--mx-
|
|
23
|
-
|
|
18
|
+
&[data-emphasis='ambient'] {
|
|
19
|
+
@apply --mx-surface-ambient;
|
|
20
|
+
padding: 0;
|
|
21
|
+
@apply --mx-bg-heavier(0.2);
|
|
22
|
+
@apply --mx-borderColor-faded(50%);
|
|
23
|
+
}
|
|
24
|
+
&[data-emphasis='secondary'] {
|
|
25
|
+
@apply --mx-surface-secondary;
|
|
26
|
+
padding: 0;
|
|
27
|
+
@apply --mx-borderColor-faded(50%);
|
|
28
|
+
}
|
|
29
|
+
&[data-emphasis='primary'] {
|
|
30
|
+
@apply --mx-surface-primary;
|
|
31
|
+
padding: 0;
|
|
32
|
+
@apply --mx-borderColor-faded(50%);
|
|
24
33
|
}
|
|
25
34
|
}
|
|
26
35
|
|
|
@@ -46,7 +55,8 @@
|
|
|
46
55
|
transition: all var(--m-duration) var(--m-easing);
|
|
47
56
|
|
|
48
57
|
@apply --mx-shadow;
|
|
49
|
-
|
|
58
|
+
/* Purposefully don't use mixin, allow children to inherit from card root */
|
|
59
|
+
background-color: transparent;
|
|
50
60
|
|
|
51
61
|
border-top-left-radius: inherit;
|
|
52
62
|
border-top-right-radius: inherit;
|
|
@@ -59,7 +69,7 @@
|
|
|
59
69
|
&:focus-visible,
|
|
60
70
|
&[data-focus-visible] {
|
|
61
71
|
@apply --mx-fg(var(--m-color-neutral-ink));
|
|
62
|
-
|
|
72
|
+
background-color: --fn-color-faded(var(--m-color-neutral-ink), 10%);
|
|
63
73
|
}
|
|
64
74
|
|
|
65
75
|
&:focus {
|
|
@@ -88,10 +98,18 @@
|
|
|
88
98
|
overflow: clip;
|
|
89
99
|
max-width: 100%;
|
|
90
100
|
display: block;
|
|
101
|
+
border-radius: var(--m-radius-md);
|
|
102
|
+
|
|
103
|
+
@apply --mx-bg(inherit);
|
|
91
104
|
}
|
|
92
105
|
|
|
93
106
|
.content {
|
|
94
107
|
z-index: 1;
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
gap: var(--m-space-sm);
|
|
111
|
+
align-items: center;
|
|
112
|
+
border-radius: var(--m-radius-sm);
|
|
95
113
|
|
|
96
114
|
padding: var(--m-space-sm) var(--m-space-md);
|
|
97
115
|
|
|
@@ -99,6 +117,9 @@
|
|
|
99
117
|
line-height: 1;
|
|
100
118
|
font-weight: var(--m-prose-ambient-weight);
|
|
101
119
|
|
|
120
|
+
@apply --mx-bg(inherit);
|
|
121
|
+
@apply --mx-bg-faded(70%);
|
|
122
|
+
|
|
102
123
|
&[data-unstyled] {
|
|
103
124
|
background-color: unset;
|
|
104
125
|
padding: 0;
|
|
@@ -2,8 +2,23 @@ import type { StoryObj } from '@storybook/react-vite';
|
|
|
2
2
|
import { CardRoot } from './Card.js';
|
|
3
3
|
declare const meta: {
|
|
4
4
|
title: string;
|
|
5
|
-
component:
|
|
6
|
-
argTypes: {
|
|
5
|
+
component: typeof CardRoot;
|
|
6
|
+
argTypes: {
|
|
7
|
+
emphasis: {
|
|
8
|
+
type: "string";
|
|
9
|
+
control: {
|
|
10
|
+
type: "inline-radio";
|
|
11
|
+
};
|
|
12
|
+
options: string[];
|
|
13
|
+
};
|
|
14
|
+
size: {
|
|
15
|
+
type: "string";
|
|
16
|
+
control: {
|
|
17
|
+
type: "inline-radio";
|
|
18
|
+
};
|
|
19
|
+
options: string[];
|
|
20
|
+
};
|
|
21
|
+
};
|
|
7
22
|
parameters: {
|
|
8
23
|
controls: {
|
|
9
24
|
expanded: boolean;
|
|
@@ -7,7 +7,18 @@ import { Card, CardActions, CardContent, CardFooter, cardGridColumns, CardImage,
|
|
|
7
7
|
const meta = {
|
|
8
8
|
title: 'Components/Card',
|
|
9
9
|
component: CardRoot,
|
|
10
|
-
argTypes: {
|
|
10
|
+
argTypes: {
|
|
11
|
+
emphasis: {
|
|
12
|
+
type: 'string',
|
|
13
|
+
control: { type: 'inline-radio' },
|
|
14
|
+
options: ['ambient', 'secondary', 'primary'],
|
|
15
|
+
},
|
|
16
|
+
size: {
|
|
17
|
+
type: 'string',
|
|
18
|
+
control: { type: 'inline-radio' },
|
|
19
|
+
options: ['sm', 'md', 'lg'],
|
|
20
|
+
},
|
|
21
|
+
},
|
|
11
22
|
parameters: {
|
|
12
23
|
controls: { expanded: true },
|
|
13
24
|
},
|
|
@@ -22,7 +33,7 @@ export const Default = {
|
|
|
22
33
|
}, children: [_jsxs(CardRoot, Object.assign({}, args, { style: { minHeight: '20vh' }, children: [_jsx(CardImage, { render: _jsx("img", { src: "https://resources.biscuits.club/images/pashka.jpg" }) }), _jsxs(CardMain, { onClick: () => alert('clicked'), children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff you'd have on a card. Maybe a time?" }), _jsx(CardContent, { children: "More things, if you want." })] }), _jsxs(CardFooter, { children: [_jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { size: "small", color: "primary", children: _jsx(Icon, { name: "placeholder" }) })] }), _jsx(CardMenu, { children: _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "dots" }) }) })] })] })), _jsxs(CardRoot, Object.assign({}, args, { style: { maxWidth: 300 }, children: [_jsxs(CardMain, { onClick: () => alert('clicked'), children: [_jsx(CardTitle, { children: "Card Title which is very long and would normally wrap" }), _jsx(CardContent, { children: "Other stuff" }), _jsx(CardContent, { unstyled: true, children: "Styling optional" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }))] })),
|
|
23
34
|
};
|
|
24
35
|
export const Compact = {
|
|
25
|
-
render: () => (_jsxs(CardRoot, { children: [_jsxs(CardMain, {
|
|
36
|
+
render: () => (_jsxs(CardRoot, { size: "sm", children: [_jsxs(CardMain, { children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" }), _jsx(CardContent, { children: "More things, if you want." })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })),
|
|
26
37
|
};
|
|
27
38
|
export const NonInteractive = {
|
|
28
39
|
render: () => (_jsxs(CardRoot, { children: [_jsxs(CardMain, { children: [_jsx(CardTitle, { children: "Card Title" }), _jsx(CardContent, { children: "Other stuff" })] }), _jsx(CardFooter, { children: _jsxs(CardActions, { children: [_jsx(Button, { size: "small", children: "Button" }), _jsx(Button, { emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACN,IAAI,EACJ,WAAW,EACX,WAAW,EACX,UAAU,EACV,eAAe,EACf,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACT,MAAM,WAAW,CAAC;AAEnB,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,QAAQ;IACnB,QAAQ,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"Card.stories.js","sourceRoot":"","sources":["../../../src/components/card/Card.stories.tsx"],"names":[],"mappings":"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"}
|
package/dist/themes.stories.js
CHANGED
|
@@ -23,7 +23,7 @@ export default meta;
|
|
|
23
23
|
export function DemoUI({ className, style, }) {
|
|
24
24
|
const nextWeek = new Date();
|
|
25
25
|
nextWeek.setDate(nextWeek.getDate() + 7);
|
|
26
|
-
return (_jsxs(PageRoot, { "data-testid": "demo", className: className, style: style, children: [_jsx(PageContent, { children: _jsxs("div", { className: cls.grid, children: [_jsxs(Box, { gap: true, wrap: true, p: true, children: [_jsx(Button, { emphasis: "primary", children: "Primary" }), _jsx(Button, { className: "@mode-accent", emphasis: "primary", children: "Accent" }), _jsx(Button, { children: "Default" }), _jsx(Button, { className: "@mode-inverted", children: "Contrast" }), _jsx(Button, { className: "@mode-attention", emphasis: "primary", children: "Destructive" }), _jsx(Button, { emphasis: "ghost", children: "Ghost" }), _jsx(Button, { className: "@mode-accent", emphasis: "ghost", children: "Ghost Accent" }), _jsx(Button, { size: "small", className: "@mode-attention", emphasis: "primary", children: "Destructive Small" }), _jsx(Button, { size: "small", className: "@mode-attention", emphasis: "ghost", children: "Ghost Destructive Small" })] }), _jsxs(Box, { gap: true, wrap: true, p: true, items: "start", children: [_jsx(Input, { placeholder: "Placeholder" }), _jsx(TextArea, { placeholder: "Placeholder" }), _jsxs(Box, { gap: true, items: "center", children: [_jsx(Checkbox, { defaultChecked: true }), _jsx("span", { children: "Checkbox" })] }), _jsxs(ToggleGroup, { defaultValue: ['1'], children: [_jsx(ToggleGroup.Item, { value: "1", children: "Toggle 1" }), _jsx(ToggleGroup.Item, { value: "2", children: "Toggle 2" })] })] }), _jsxs(Box, { layout: "start safe-center", col: true, gap: true, p: true, style: { maxHeight: 200 }, overflow: "auto-y", children: [_jsx(Heading, { emphasis: "primary", children: "Heading 1" }), _jsx(Heading, { emphasis: "secondary", children: "Heading 2" }), _jsx(Heading, { emphasis: "ambient", children: "Heading 3" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(TextSkeleton, { maxLength: 30 }), _jsx(TextSkeleton, { maxLength: 10 })] }), _jsxs(Box, { col: true, gap: true, children: [_jsxs(Card, { children: [_jsxs(Card.Main, { onClick: () => { }, children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" }), _jsx(Card.Content, { unstyled: true, children: _jsxs(Chip, { children: [_jsx(Icon, { name: "clock" }), " 2 hrs"] }) })] }), _jsx(Card.Footer, { children: _jsxs(Card.Actions, { children: [_jsx(Button, { size: "small", children: "Action 1" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }), _jsxs(Card, { children: [_jsxs(Card.Main, {
|
|
26
|
+
return (_jsxs(PageRoot, { "data-testid": "demo", className: className, style: style, children: [_jsx(PageContent, { children: _jsxs("div", { className: cls.grid, children: [_jsxs(Box, { gap: true, wrap: true, p: true, children: [_jsx(Button, { emphasis: "primary", children: "Primary" }), _jsx(Button, { className: "@mode-accent", emphasis: "primary", children: "Accent" }), _jsx(Button, { children: "Default" }), _jsx(Button, { className: "@mode-inverted", children: "Contrast" }), _jsx(Button, { className: "@mode-attention", emphasis: "primary", children: "Destructive" }), _jsx(Button, { emphasis: "ghost", children: "Ghost" }), _jsx(Button, { className: "@mode-accent", emphasis: "ghost", children: "Ghost Accent" }), _jsx(Button, { size: "small", className: "@mode-attention", emphasis: "primary", children: "Destructive Small" }), _jsx(Button, { size: "small", className: "@mode-attention", emphasis: "ghost", children: "Ghost Destructive Small" })] }), _jsxs(Box, { gap: true, wrap: true, p: true, items: "start", children: [_jsx(Input, { placeholder: "Placeholder" }), _jsx(TextArea, { placeholder: "Placeholder" }), _jsxs(Box, { gap: true, items: "center", children: [_jsx(Checkbox, { defaultChecked: true }), _jsx("span", { children: "Checkbox" })] }), _jsxs(ToggleGroup, { defaultValue: ['1'], children: [_jsx(ToggleGroup.Item, { value: "1", children: "Toggle 1" }), _jsx(ToggleGroup.Item, { value: "2", children: "Toggle 2" })] })] }), _jsxs(Box, { layout: "start safe-center", col: true, gap: true, p: true, style: { maxHeight: 200 }, overflow: "auto-y", children: [_jsx(Heading, { emphasis: "primary", children: "Heading 1" }), _jsx(Heading, { emphasis: "secondary", children: "Heading 2" }), _jsx(Heading, { emphasis: "ambient", children: "Heading 3" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(TextSkeleton, { maxLength: 30 }), _jsx(TextSkeleton, { maxLength: 10 })] }), _jsxs(Box, { col: true, gap: true, children: [_jsxs(Card, { children: [_jsxs(Card.Main, { onClick: () => { }, children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" }), _jsx(Card.Content, { unstyled: true, children: _jsxs(Chip, { children: [_jsx(Icon, { name: "clock" }), " 2 hrs"] }) })] }), _jsx(Card.Footer, { children: _jsxs(Card.Actions, { children: [_jsx(Button, { size: "small", children: "Action 1" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] }), _jsxs(Card, { size: "sm", children: [_jsxs(Card.Main, { onClick: () => { }, children: [_jsx(Card.Title, { children: "Card Title" }), _jsx(Card.Content, { children: "Card Content" }), _jsx(Card.Content, { unstyled: true, children: _jsxs(Chip, { children: [_jsx(Icon, { name: "clock" }), " 2 hrs"] }) })] }), _jsx(Card.Footer, { children: _jsxs(Card.Actions, { children: [_jsx(Button, { size: "small", children: "Action 1" }), _jsx(Button, { size: "small", emphasis: "ghost", children: _jsx(Icon, { name: "placeholder" }) })] }) })] })] }), _jsxs(Tabs, { defaultValue: "tab1", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Trigger, { value: "tab1", children: "Tab 1" }), _jsx(Tabs.Trigger, { value: "tab2", children: "Tab 2" })] }), _jsx(Tabs.Content, { value: "tab1", children: "Tab 1 Content" }), _jsx(Tabs.Content, { value: "tab2", children: "Tab 2 Content" })] }), _jsxs(ActionBar, { children: [_jsxs(ActionButton, { children: [_jsx(Icon, { name: "placeholder" }), "Hello"] }), _jsxs(ActionButton, { color: "primary", children: [_jsx(Icon, { name: "placeholder" }), "World"] }), _jsx(ActionButton, { children: _jsx(Icon, { name: "placeholder" }) })] }), _jsxs(AvatarList, { count: 3, children: [_jsx(AvatarList.Item, { index: 0, name: "John Doe" }), _jsx(AvatarList.Item, { index: 1, name: "Jane Doe" }), _jsx(AvatarList.Item, { index: 2, name: "John Smith" })] }), _jsxs(ContextMenu, { children: [_jsx(ContextMenu.Trigger, { render: _jsx(Tooltip, { content: "Hello World" }), children: _jsx(Button, { children: "Hover or right click" }) }), _jsxs(ContextMenu.Content, { children: [_jsx(ContextMenu.Item, { children: "Item 1" }), _jsx(ContextMenu.Item, { children: "Item 2" }), _jsx(ContextMenu.Item, { children: "Item 3" })] })] }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenu.Trigger, { render: _jsx(Button, {}), style: { margin: 'auto' }, children: "Dropdown" }), _jsxs(DropdownMenu.Content, { children: [_jsx(DropdownMenu.Item, { children: "Item 1" }), _jsx(DropdownMenu.Item, { children: "Item 2" }), _jsx(DropdownMenu.Item, { children: "Item 3" }), _jsx(DropdownMenu.Item, { disabled: true, children: "Disabled Item" }), _jsx(DropdownMenu.Separator, {}), _jsx(DropdownMenu.Item, { children: "Item 4" }), _jsx(DropdownMenu.Item, { children: "Item 5" }), _jsx(DropdownMenu.Item, { children: "Item 6" }), _jsxs(DropdownMenu.Item, { children: ["With icon", _jsx(DropdownMenu.ItemRightSlot, { children: _jsx(Icon, { name: "flag" }) })] })] })] }), _jsxs(Select, { value: "1", itemToStringLabel: (i) => `Item ${i}`, children: [_jsx(Select.Trigger, {}), _jsxs(Select.Content, { children: [_jsx(Select.Item, { value: "1", children: "Item 1" }), _jsx(Select.Item, { value: "2", children: "Item 2" }), _jsx(Select.Item, { value: "3", children: "Item 3" }), _jsx(Select.Item, { value: "4", children: "Item 4" }), _jsx(Select.Item, { value: "5", children: "Item 5" }), _jsx(Select.Item, { value: "6", children: "Item 6" }), _jsx(Select.Item, { value: "7", children: "Item 7" }), _jsx(Select.Item, { value: "8", children: "Item 8" }), _jsx(Select.Item, { value: "9", children: "Item 9" }), _jsx(Select.Item, { value: "10", children: "Item 10" })] })] }), _jsxs(Dialog, { children: [_jsx(Dialog.Trigger, { render: _jsx(Button, {}), children: "Click" }), _jsxs(Dialog.Content, { children: [_jsx(Dialog.Title, { children: "Hello there" }), _jsx(Dialog.Description, { children: "Im a dialog" }), _jsxs(Dialog.Actions, { children: [_jsx(Dialog.Close, { children: "Close" }), _jsx(Button, { color: "primary", children: "Action" })] })] })] }), _jsx(DateRangePicker, { style: { gridColumn: 'span 2' }, value: {
|
|
27
27
|
start: new Date(),
|
|
28
28
|
end: nextWeek,
|
|
29
29
|
}, onChange: () => { } }), _jsx(Progress, { value: 50, style: { margin: 'auto' } }), _jsx(Slider, { defaultValue: 50, min: 0, max: 100 }), _jsxs(Box, { surface: "primary", p: true, gap: true, col: true, children: [_jsx(Heading, { emphasis: "primary", children: "Primary surface" }), _jsx(Heading, { emphasis: "secondary", children: "Primary surface" }), _jsx(Heading, { emphasis: "ambient", children: "Primary surface" }), _jsx("div", { children: "Primary surface" }), _jsx(Button, { emphasis: "ghost", children: "Ghost" })] }), _jsxs(Box, { surface: "primary", color: "accent", p: true, col: true, style: { maxHeight: 200 }, overflow: "auto-y", children: [_jsx(Heading, { emphasis: "primary", children: "Accent surface" }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(P, { children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." }), _jsx(TextSkeleton, { maxLength: 30 }), _jsx(TextSkeleton, { maxLength: 10 }), "Accent surface"] }), _jsx(Box, { surface: "secondary", p: true, col: true, children: "Secondary surface" }), _jsx(Box, { surface: "ambient", p: true, col: true, children: "Ambient surface" }), _jsxs(Box, { surface: true, color: "attention", p: true, col: true, children: [_jsx(H2, { children: "Attention surface" }), _jsx(H3, { children: "Attention surface" }), "Attention surface", _jsx(Button, { emphasis: "ghost", children: "Ghost" })] }), _jsx(Box, { children: _jsx(Note, { children: "Note note" }) }), _jsx(Box, { justify: "start", items: "start", children: _jsxs(HorizontalList, { openDirection: "down", children: [_jsx(Button, { size: "small", children: "One" }), _jsx(Button, { size: "small", children: "Two" }), _jsx(Button, { size: "small", children: "Three" }), _jsx(Button, { size: "small", children: "Four" }), _jsx(Button, { size: "small", children: "Five" }), _jsx(Button, { size: "small", children: "Six" }), _jsx(Button, { size: "small", children: "Seven" }), _jsx(Button, { size: "small", children: "Eight" }), _jsx(Button, { size: "small", children: "Nine" }), _jsx(Button, { size: "small", children: "Ten" }), _jsx(Button, { size: "small", children: "Eleven" })] }) }), _jsx(ImageUploader, { style: { height: 200 }, value: null, onChange: () => { } })] }) }), _jsx(PageNav, { children: _jsxs(NavBarRoot, { children: [_jsxs(NavBarItem, { children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "cart" }) }), _jsx(NavBarItemText, { children: "Item 1 long" })] }), _jsxs(NavBarItem, { active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { name: "book" }) }), _jsx(NavBarItemText, { children: "Item 2" }), _jsx(NavBarItemPip, {})] }), _jsxs(NavBarItem, { color: "neutral", children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Neutral" })] }), _jsxs(NavBarItem, { color: "neutral", active: true, children: [_jsx(NavBarItemIconWrapper, { children: _jsx(NavBarItemIcon, { render: _jsx(Icon, { name: "book" }) }) }), _jsx(NavBarItemText, { children: "Neutral" }), _jsx(NavBarItemPip, {})] })] }) })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.stories.js","sourceRoot":"","sources":["../src/themes.stories.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"themes.stories.js","sourceRoot":"","sources":["../src/themes.stories.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -6,9 +6,6 @@
|
|
|
6
6
|
overflow: clip;
|
|
7
7
|
|
|
8
8
|
@apply --mx-shadow(var(--m-shadow-sm));
|
|
9
|
-
@apply --mx-surface-ambient;
|
|
10
|
-
@apply --mx-bg-heavier(0.1);
|
|
11
|
-
@apply --mx-borderColor-faded(50%);
|
|
12
9
|
border-width: var(--m-lineWidth-sm);
|
|
13
10
|
border-radius: var(--m-surface-radius);
|
|
14
11
|
|
|
@@ -18,9 +15,21 @@
|
|
|
18
15
|
|
|
19
16
|
padding: 0;
|
|
20
17
|
|
|
21
|
-
&[data-
|
|
22
|
-
--mx-
|
|
23
|
-
|
|
18
|
+
&[data-emphasis='ambient'] {
|
|
19
|
+
@apply --mx-surface-ambient;
|
|
20
|
+
padding: 0;
|
|
21
|
+
@apply --mx-bg-heavier(0.2);
|
|
22
|
+
@apply --mx-borderColor-faded(50%);
|
|
23
|
+
}
|
|
24
|
+
&[data-emphasis='secondary'] {
|
|
25
|
+
@apply --mx-surface-secondary;
|
|
26
|
+
padding: 0;
|
|
27
|
+
@apply --mx-borderColor-faded(50%);
|
|
28
|
+
}
|
|
29
|
+
&[data-emphasis='primary'] {
|
|
30
|
+
@apply --mx-surface-primary;
|
|
31
|
+
padding: 0;
|
|
32
|
+
@apply --mx-borderColor-faded(50%);
|
|
24
33
|
}
|
|
25
34
|
}
|
|
26
35
|
|
|
@@ -46,7 +55,8 @@
|
|
|
46
55
|
transition: all var(--m-duration) var(--m-easing);
|
|
47
56
|
|
|
48
57
|
@apply --mx-shadow;
|
|
49
|
-
|
|
58
|
+
/* Purposefully don't use mixin, allow children to inherit from card root */
|
|
59
|
+
background-color: transparent;
|
|
50
60
|
|
|
51
61
|
border-top-left-radius: inherit;
|
|
52
62
|
border-top-right-radius: inherit;
|
|
@@ -59,7 +69,7 @@
|
|
|
59
69
|
&:focus-visible,
|
|
60
70
|
&[data-focus-visible] {
|
|
61
71
|
@apply --mx-fg(var(--m-color-neutral-ink));
|
|
62
|
-
|
|
72
|
+
background-color: --fn-color-faded(var(--m-color-neutral-ink), 10%);
|
|
63
73
|
}
|
|
64
74
|
|
|
65
75
|
&:focus {
|
|
@@ -88,10 +98,18 @@
|
|
|
88
98
|
overflow: clip;
|
|
89
99
|
max-width: 100%;
|
|
90
100
|
display: block;
|
|
101
|
+
border-radius: var(--m-radius-md);
|
|
102
|
+
|
|
103
|
+
@apply --mx-bg(inherit);
|
|
91
104
|
}
|
|
92
105
|
|
|
93
106
|
.content {
|
|
94
107
|
z-index: 1;
|
|
108
|
+
display: flex;
|
|
109
|
+
flex-direction: row;
|
|
110
|
+
gap: var(--m-space-sm);
|
|
111
|
+
align-items: center;
|
|
112
|
+
border-radius: var(--m-radius-sm);
|
|
95
113
|
|
|
96
114
|
padding: var(--m-space-sm) var(--m-space-md);
|
|
97
115
|
|
|
@@ -99,6 +117,9 @@
|
|
|
99
117
|
line-height: 1;
|
|
100
118
|
font-weight: var(--m-prose-ambient-weight);
|
|
101
119
|
|
|
120
|
+
@apply --mx-bg(inherit);
|
|
121
|
+
@apply --mx-bg-faded(70%);
|
|
122
|
+
|
|
102
123
|
&[data-unstyled] {
|
|
103
124
|
background-color: unset;
|
|
104
125
|
padding: 0;
|
|
@@ -19,7 +19,18 @@ import {
|
|
|
19
19
|
const meta = {
|
|
20
20
|
title: 'Components/Card',
|
|
21
21
|
component: CardRoot,
|
|
22
|
-
argTypes: {
|
|
22
|
+
argTypes: {
|
|
23
|
+
emphasis: {
|
|
24
|
+
type: 'string',
|
|
25
|
+
control: { type: 'inline-radio' },
|
|
26
|
+
options: ['ambient', 'secondary', 'primary'],
|
|
27
|
+
},
|
|
28
|
+
size: {
|
|
29
|
+
type: 'string',
|
|
30
|
+
control: { type: 'inline-radio' },
|
|
31
|
+
options: ['sm', 'md', 'lg'],
|
|
32
|
+
},
|
|
33
|
+
},
|
|
23
34
|
parameters: {
|
|
24
35
|
controls: { expanded: true },
|
|
25
36
|
},
|
|
@@ -89,8 +100,8 @@ export const Default: Story = {
|
|
|
89
100
|
|
|
90
101
|
export const Compact: Story = {
|
|
91
102
|
render: () => (
|
|
92
|
-
<CardRoot>
|
|
93
|
-
<CardMain
|
|
103
|
+
<CardRoot size="sm">
|
|
104
|
+
<CardMain>
|
|
94
105
|
<CardTitle>Card Title</CardTitle>
|
|
95
106
|
<CardContent>Other stuff</CardContent>
|
|
96
107
|
<CardContent>More things, if you want.</CardContent>
|
|
@@ -7,22 +7,55 @@ import {
|
|
|
7
7
|
ReactNode,
|
|
8
8
|
Ref,
|
|
9
9
|
} from 'react';
|
|
10
|
-
import { withClassName
|
|
11
|
-
import { Box } from '../box/Box.js';
|
|
10
|
+
import { withClassName } from '../../hooks.js';
|
|
12
11
|
import { Masonry, MasonryProps } from '../masonry/masonry.js';
|
|
12
|
+
import { Text } from '../typography/typography.js';
|
|
13
13
|
import { SlotDiv } from '../utility/SlotDiv.js';
|
|
14
14
|
import cls from './Card.module.css';
|
|
15
15
|
|
|
16
|
-
export
|
|
16
|
+
export interface CardRootProps extends HTMLAttributes<HTMLDivElement> {
|
|
17
|
+
size?: CardSize;
|
|
18
|
+
emphasis?: 'ambient' | 'secondary' | 'primary';
|
|
19
|
+
render?: UseRenderRenderProp<{
|
|
20
|
+
emphasis?: 'ambient' | 'secondary' | 'primary';
|
|
21
|
+
size?: CardSize;
|
|
22
|
+
}>;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export function CardRoot({
|
|
26
|
+
emphasis = 'ambient',
|
|
27
|
+
size,
|
|
28
|
+
className,
|
|
29
|
+
...rest
|
|
30
|
+
}: CardRootProps) {
|
|
31
|
+
return useRender({
|
|
32
|
+
defaultTagName: 'div',
|
|
33
|
+
props: {
|
|
34
|
+
...rest,
|
|
35
|
+
className: classNames(
|
|
36
|
+
cls.root,
|
|
37
|
+
{
|
|
38
|
+
'@mode-normal': size === 'lg',
|
|
39
|
+
'@mode-dense': size === 'md',
|
|
40
|
+
'@mode-denser': size === 'sm',
|
|
41
|
+
},
|
|
42
|
+
className,
|
|
43
|
+
),
|
|
44
|
+
},
|
|
45
|
+
state: {
|
|
46
|
+
emphasis,
|
|
47
|
+
size,
|
|
48
|
+
},
|
|
49
|
+
});
|
|
50
|
+
}
|
|
17
51
|
|
|
18
52
|
export type CardSize = 'sm' | 'md' | 'lg';
|
|
19
53
|
|
|
20
54
|
export function CardMain({
|
|
21
55
|
className,
|
|
22
|
-
compact,
|
|
23
|
-
size = compact ? 'sm' : 'md',
|
|
24
56
|
nonInteractive,
|
|
25
57
|
ref,
|
|
58
|
+
size,
|
|
26
59
|
style,
|
|
27
60
|
children,
|
|
28
61
|
visuallyDisabled,
|
|
@@ -39,8 +72,7 @@ export function CardMain({
|
|
|
39
72
|
className?: string;
|
|
40
73
|
onClick?: (ev: MouseEvent) => void;
|
|
41
74
|
children?: ReactNode;
|
|
42
|
-
/** @deprecated
|
|
43
|
-
compact?: boolean;
|
|
75
|
+
/** @deprecated set on Card */
|
|
44
76
|
size?: CardSize;
|
|
45
77
|
/** forces non-interactive version */
|
|
46
78
|
nonInteractive?: boolean;
|
|
@@ -82,28 +114,9 @@ export function CardMain({
|
|
|
82
114
|
return root;
|
|
83
115
|
}
|
|
84
116
|
|
|
85
|
-
export const CardTitle = withClassName(
|
|
86
|
-
withProps(Box, {
|
|
87
|
-
surface: 'ambient',
|
|
88
|
-
gap: 'sm',
|
|
89
|
-
col: true,
|
|
90
|
-
rounded: 'md',
|
|
91
|
-
}),
|
|
92
|
-
cls.title,
|
|
93
|
-
'@mode-bold',
|
|
94
|
-
);
|
|
117
|
+
export const CardTitle = withClassName(Text, cls.title, '@mode-bold');
|
|
95
118
|
|
|
96
|
-
const CardContentRoot = withClassName(
|
|
97
|
-
withProps(Box, {
|
|
98
|
-
surface: 'ambient',
|
|
99
|
-
glass: true,
|
|
100
|
-
col: true,
|
|
101
|
-
gap: 'sm',
|
|
102
|
-
rounded: 'sm',
|
|
103
|
-
}),
|
|
104
|
-
'@mode-dense',
|
|
105
|
-
cls.content,
|
|
106
|
-
);
|
|
119
|
+
const CardContentRoot = withClassName('div', '@mode-dense', cls.content);
|
|
107
120
|
export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
108
121
|
unstyled?: boolean;
|
|
109
122
|
ref?: Ref<HTMLDivElement>;
|
package/src/themes.stories.tsx
CHANGED
|
@@ -141,8 +141,8 @@ export function DemoUI({
|
|
|
141
141
|
</Card.Actions>
|
|
142
142
|
</Card.Footer>
|
|
143
143
|
</Card>
|
|
144
|
-
<Card>
|
|
145
|
-
<Card.Main
|
|
144
|
+
<Card size="sm">
|
|
145
|
+
<Card.Main onClick={() => {}}>
|
|
146
146
|
<Card.Title>Card Title</Card.Title>
|
|
147
147
|
<Card.Content>Card Content</Card.Content>
|
|
148
148
|
<Card.Content unstyled>
|