@bitrise/bitkit-v2 0.3.285 → 0.3.286
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/BitkitNoteCard/BitkitNoteCard.d.ts +4 -2
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js +26 -14
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js.map +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.d.ts +26 -19
- package/dist/theme/slot-recipes/NoteCard.recipe.js +29 -16
- package/dist/theme/slot-recipes/NoteCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +26 -19
- package/package.json +1 -1
|
@@ -4,13 +4,15 @@ import { NotificationVariant } from '../../theme/common/AlertAndToast.common';
|
|
|
4
4
|
import { NotificationAction } from '../common/notificationMaps';
|
|
5
5
|
export type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {
|
|
6
6
|
action?: NotificationAction;
|
|
7
|
-
message
|
|
7
|
+
message?: ReactNode;
|
|
8
|
+
messageList?: string[];
|
|
8
9
|
status?: NotificationVariant;
|
|
9
10
|
title?: string;
|
|
10
11
|
};
|
|
11
12
|
declare const BitkitNoteCard: import('react').ForwardRefExoticComponent<Omit<BoxProps, "title" | "children"> & {
|
|
12
13
|
action?: NotificationAction;
|
|
13
|
-
message
|
|
14
|
+
message?: ReactNode;
|
|
15
|
+
messageList?: string[];
|
|
14
16
|
status?: NotificationVariant;
|
|
15
17
|
title?: string;
|
|
16
18
|
} & import('react').RefAttributes<HTMLDivElement>>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
|
|
2
2
|
import BitkitButton from "../BitkitButton/BitkitButton.js";
|
|
3
|
+
import BitkitList_default from "../BitkitList/BitkitList.js";
|
|
3
4
|
import { Box } from "@chakra-ui/react/box";
|
|
4
5
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
5
6
|
import { Text } from "@chakra-ui/react/text";
|
|
@@ -7,10 +8,12 @@ import { forwardRef } from "react";
|
|
|
7
8
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
9
|
//#region lib/components/BitkitNoteCard/BitkitNoteCard.tsx
|
|
9
10
|
var BitkitNoteCard = forwardRef((props, ref) => {
|
|
10
|
-
const { action, message, status = "info", title, ...rest } = props;
|
|
11
|
+
const { action, message, messageList, status = "info", title, ...rest } = props;
|
|
11
12
|
const styles = useSlotRecipe({ key: "noteCard" })({ status });
|
|
12
13
|
const IconComponent = ICON_COMPONENTS_MAP[status];
|
|
13
14
|
const isProgress = status === "progress";
|
|
15
|
+
const listItems = messageList ?? [];
|
|
16
|
+
const hasList = listItems.length > 0;
|
|
14
17
|
return /* @__PURE__ */ jsxs(Box, {
|
|
15
18
|
ref,
|
|
16
19
|
css: styles.root,
|
|
@@ -22,30 +25,39 @@ var BitkitNoteCard = forwardRef((props, ref) => {
|
|
|
22
25
|
children: isProgress ? /* @__PURE__ */ jsx(IconComponent, { size: "lg" }) : /* @__PURE__ */ jsx(IconComponent, { size: "24" })
|
|
23
26
|
})
|
|
24
27
|
}), /* @__PURE__ */ jsxs(Box, {
|
|
25
|
-
css: styles.content,
|
|
28
|
+
css: [styles.content, !action && { paddingInlineEnd: "24" }],
|
|
26
29
|
children: [/* @__PURE__ */ jsxs(Box, {
|
|
27
|
-
css: styles.messageBlock,
|
|
28
|
-
children: [
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
css: [styles.messageBlock, !title && { paddingBlockStart: "2" }],
|
|
31
|
+
children: [
|
|
32
|
+
title && /* @__PURE__ */ jsx(Text, {
|
|
33
|
+
css: styles.title,
|
|
34
|
+
children: title
|
|
35
|
+
}),
|
|
36
|
+
message && /* @__PURE__ */ jsx(Text, {
|
|
37
|
+
css: styles.message,
|
|
38
|
+
children: message
|
|
39
|
+
}),
|
|
40
|
+
hasList && /* @__PURE__ */ jsx(BitkitList_default, {
|
|
41
|
+
css: styles.messageList,
|
|
42
|
+
size: "md",
|
|
43
|
+
children: listItems.map((item) => /* @__PURE__ */ jsx(BitkitList_default.Item, { children: item }, item))
|
|
44
|
+
})
|
|
45
|
+
]
|
|
35
46
|
}), action && (action.href !== void 0 ? /* @__PURE__ */ jsx(BitkitButton, {
|
|
36
|
-
css: styles.actionArea,
|
|
47
|
+
css: [styles.actionArea, hasList && styles.actionAreaList],
|
|
37
48
|
href: action.href,
|
|
38
49
|
onClick: action.onClick,
|
|
39
50
|
rel: action.target === "_blank" ? "noopener noreferrer" : void 0,
|
|
40
|
-
size: "
|
|
51
|
+
size: "md",
|
|
41
52
|
target: action.target,
|
|
42
53
|
variant: "tertiary",
|
|
43
54
|
children: action.label
|
|
44
55
|
}) : /* @__PURE__ */ jsx(BitkitButton, {
|
|
45
|
-
css: styles.actionArea,
|
|
56
|
+
css: [styles.actionArea, hasList && styles.actionAreaList],
|
|
46
57
|
onClick: action.onClick,
|
|
47
|
-
size: "
|
|
58
|
+
size: "md",
|
|
48
59
|
variant: "tertiary",
|
|
60
|
+
marginBlock: "4",
|
|
49
61
|
children: action.label
|
|
50
62
|
}))]
|
|
51
63
|
})]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n message
|
|
1
|
+
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitList from '../BitkitList/BitkitList';\nimport { ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\n// ----- Props -----\n\nexport type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {\n action?: NotificationAction;\n message?: ReactNode;\n messageList?: string[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const { action, message, messageList, status = 'info', title, ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = messageList ?? [];\n const hasList = listItems.length > 0;\n\n return (\n <Box ref={ref} css={styles.root} {...rest}>\n <Box css={styles.iconBar}>\n <Box css={styles.iconWrapper}>{isProgress ? <IconComponent size=\"lg\" /> : <IconComponent size=\"24\" />}</Box>\n </Box>\n <Box css={[styles.content, !action && { paddingInlineEnd: '24' }]}>\n <Box css={[styles.messageBlock, !title && { paddingBlockStart: '2' }]}>\n {title && <Text css={styles.title}>{title}</Text>}\n {message && <Text css={styles.message}>{message}</Text>}\n {hasList && (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item) => (\n <BitkitList.Item key={item}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n )}\n </Box>\n {action &&\n (action.href !== undefined ? (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n href={action.href}\n onClick={action.onClick}\n rel={action.target === '_blank' ? 'noopener noreferrer' : undefined}\n size=\"md\"\n target={action.target}\n variant=\"tertiary\"\n >\n {action.label}\n </BitkitButton>\n ) : (\n <BitkitButton\n css={[styles.actionArea, hasList && styles.actionAreaList]}\n onClick={action.onClick}\n size=\"md\"\n variant=\"tertiary\"\n marginBlock=\"4\"\n >\n {action.label}\n </BitkitButton>\n ))}\n </Box>\n </Box>\n );\n});\n\nBitkitNoteCard.displayName = 'BitkitNoteCard';\n\nexport default BitkitNoteCard;\n"],"mappings":";;;;;;;;;AAsBA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EAAE,QAAQ,SAAS,aAAa,SAAS,QAAQ,OAAO,GAAG,SAAS;CAG1E,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,EAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,YAAY,eAAe,CAAC;CAClC,MAAM,UAAU,UAAU,SAAS;CAEnC,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;YAArC,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;aACf,oBAAC,KAAD;IAAK,KAAK,OAAO;cAAc,aAAa,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA,IAAI,oBAAC,eAAD,EAAe,MAAK,KAAM,CAAA;GAAO,CAAA;EACxG,CAAA,GACL,qBAAC,KAAD;GAAK,KAAK,CAAC,OAAO,SAAS,CAAC,UAAU,EAAE,kBAAkB,KAAK,CAAC;aAAhE,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;cAApE;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAQ;KAAY,CAAA;KAC/C,WAAW,oBAAC,MAAD;MAAM,KAAK,OAAO;gBAAU;KAAc,CAAA;KACrD,WACC,oBAAC,oBAAD;MAAY,KAAK,OAAO;MAAa,MAAK;gBACvC,UAAU,KAAK,SACd,oBAAC,mBAAW,MAAZ,EAAA,UAA6B,KAAsB,GAA7B,IAA6B,CACpD;KACS,CAAA;IAEX;OACJ,WACE,OAAO,SAAS,KAAA,IACf,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,MAAM,OAAO;IACb,SAAS,OAAO;IAChB,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;IAC1D,MAAK;IACL,QAAQ,OAAO;IACf,SAAQ;cAEP,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,SAAQ;IACR,aAAY;cAEX,OAAO;GACI,CAAA,EAEf;IACF;;AAET,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1,13 +1,10 @@
|
|
|
1
|
-
declare const noteCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "iconBar" | "message" | "iconWrapper" | "messageBlock" | "
|
|
1
|
+
declare const noteCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "iconBar" | "message" | "messageList" | "iconWrapper" | "messageBlock" | "actionArea" | "actionAreaList", {
|
|
2
2
|
status: {
|
|
3
3
|
ai: {
|
|
4
4
|
iconBar: {
|
|
5
5
|
background: "gradient/ai/background/minimal-vertical";
|
|
6
6
|
color: string;
|
|
7
7
|
};
|
|
8
|
-
messageSolo: {
|
|
9
|
-
color: string;
|
|
10
|
-
};
|
|
11
8
|
root: {
|
|
12
9
|
backgroundColor: "transparent";
|
|
13
10
|
border: "1px solid transparent";
|
|
@@ -18,13 +15,15 @@ declare const noteCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
|
|
|
18
15
|
};
|
|
19
16
|
};
|
|
20
17
|
critical: {
|
|
18
|
+
message?: {
|
|
19
|
+
'&:only-child': {
|
|
20
|
+
color: string;
|
|
21
|
+
};
|
|
22
|
+
} | undefined;
|
|
21
23
|
iconBar: {
|
|
22
24
|
backgroundColor: string;
|
|
23
25
|
color: string;
|
|
24
26
|
};
|
|
25
|
-
messageSolo: {
|
|
26
|
-
color: string;
|
|
27
|
-
};
|
|
28
27
|
root: {
|
|
29
28
|
borderColor: string;
|
|
30
29
|
};
|
|
@@ -33,13 +32,15 @@ declare const noteCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
|
|
|
33
32
|
};
|
|
34
33
|
};
|
|
35
34
|
info: {
|
|
35
|
+
message?: {
|
|
36
|
+
'&:only-child': {
|
|
37
|
+
color: string;
|
|
38
|
+
};
|
|
39
|
+
} | undefined;
|
|
36
40
|
iconBar: {
|
|
37
41
|
backgroundColor: string;
|
|
38
42
|
color: string;
|
|
39
43
|
};
|
|
40
|
-
messageSolo: {
|
|
41
|
-
color: string;
|
|
42
|
-
};
|
|
43
44
|
root: {
|
|
44
45
|
borderColor: string;
|
|
45
46
|
};
|
|
@@ -48,13 +49,15 @@ declare const noteCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
|
|
|
48
49
|
};
|
|
49
50
|
};
|
|
50
51
|
progress: {
|
|
52
|
+
message?: {
|
|
53
|
+
'&:only-child': {
|
|
54
|
+
color: string;
|
|
55
|
+
};
|
|
56
|
+
} | undefined;
|
|
51
57
|
iconBar: {
|
|
52
58
|
backgroundColor: string;
|
|
53
59
|
color: string;
|
|
54
60
|
};
|
|
55
|
-
messageSolo: {
|
|
56
|
-
color: string;
|
|
57
|
-
};
|
|
58
61
|
root: {
|
|
59
62
|
borderColor: string;
|
|
60
63
|
};
|
|
@@ -63,13 +66,15 @@ declare const noteCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
|
|
|
63
66
|
};
|
|
64
67
|
};
|
|
65
68
|
success: {
|
|
69
|
+
message?: {
|
|
70
|
+
'&:only-child': {
|
|
71
|
+
color: string;
|
|
72
|
+
};
|
|
73
|
+
} | undefined;
|
|
66
74
|
iconBar: {
|
|
67
75
|
backgroundColor: string;
|
|
68
76
|
color: string;
|
|
69
77
|
};
|
|
70
|
-
messageSolo: {
|
|
71
|
-
color: string;
|
|
72
|
-
};
|
|
73
78
|
root: {
|
|
74
79
|
borderColor: string;
|
|
75
80
|
};
|
|
@@ -78,13 +83,15 @@ declare const noteCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinitio
|
|
|
78
83
|
};
|
|
79
84
|
};
|
|
80
85
|
warning: {
|
|
86
|
+
message?: {
|
|
87
|
+
'&:only-child': {
|
|
88
|
+
color: string;
|
|
89
|
+
};
|
|
90
|
+
} | undefined;
|
|
81
91
|
iconBar: {
|
|
82
92
|
backgroundColor: string;
|
|
83
93
|
color: string;
|
|
84
94
|
};
|
|
85
|
-
messageSolo: {
|
|
86
|
-
color: string;
|
|
87
|
-
};
|
|
88
95
|
root: {
|
|
89
96
|
borderColor: string;
|
|
90
97
|
};
|
|
@@ -1,5 +1,10 @@
|
|
|
1
1
|
import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
2
2
|
//#region lib/theme/slot-recipes/NoteCard.recipe.ts
|
|
3
|
+
var MESSAGE_ONLY_STATUSES = [
|
|
4
|
+
"critical",
|
|
5
|
+
"progress",
|
|
6
|
+
"success"
|
|
7
|
+
];
|
|
3
8
|
var SIDEBAR_ICON_COLOR_MAP = {
|
|
4
9
|
ai: "color/indigo/base",
|
|
5
10
|
critical: "color/red/base",
|
|
@@ -8,7 +13,7 @@ var SIDEBAR_ICON_COLOR_MAP = {
|
|
|
8
13
|
success: "color/green/base",
|
|
9
14
|
warning: "color/yellow/base"
|
|
10
15
|
};
|
|
11
|
-
var
|
|
16
|
+
var STATUS_TEXT_COLOR_MAP = {
|
|
12
17
|
ai: "status/ai/text",
|
|
13
18
|
critical: "text/negative",
|
|
14
19
|
info: "text/primary",
|
|
@@ -21,9 +26,9 @@ var getStatusVariant = (v) => ({
|
|
|
21
26
|
backgroundColor: `status/${v}/bg`,
|
|
22
27
|
color: SIDEBAR_ICON_COLOR_MAP[v]
|
|
23
28
|
},
|
|
24
|
-
messageSolo: { color: TITLE_COLOR_MAP[v] },
|
|
25
29
|
root: { borderColor: `status/${v}/border` },
|
|
26
|
-
title: { color:
|
|
30
|
+
title: { color: STATUS_TEXT_COLOR_MAP[v] },
|
|
31
|
+
...MESSAGE_ONLY_STATUSES.includes(v) && { message: { "&:only-child": { color: STATUS_TEXT_COLOR_MAP[v] } } }
|
|
27
32
|
});
|
|
28
33
|
var noteCardSlotRecipe = defineSlotRecipe({
|
|
29
34
|
className: "note-card",
|
|
@@ -33,10 +38,11 @@ var noteCardSlotRecipe = defineSlotRecipe({
|
|
|
33
38
|
"iconWrapper",
|
|
34
39
|
"content",
|
|
35
40
|
"messageBlock",
|
|
41
|
+
"messageList",
|
|
36
42
|
"title",
|
|
37
43
|
"message",
|
|
38
|
-
"
|
|
39
|
-
"
|
|
44
|
+
"actionArea",
|
|
45
|
+
"actionAreaList"
|
|
40
46
|
],
|
|
41
47
|
base: {
|
|
42
48
|
root: {
|
|
@@ -63,10 +69,20 @@ var noteCardSlotRecipe = defineSlotRecipe({
|
|
|
63
69
|
width: "24"
|
|
64
70
|
},
|
|
65
71
|
content: {
|
|
66
|
-
alignItems:
|
|
72
|
+
alignItems: {
|
|
73
|
+
base: "flex-end",
|
|
74
|
+
tablet: "center"
|
|
75
|
+
},
|
|
67
76
|
display: "flex",
|
|
68
77
|
flex: 1,
|
|
69
|
-
|
|
78
|
+
flexDirection: {
|
|
79
|
+
base: "column",
|
|
80
|
+
tablet: "row"
|
|
81
|
+
},
|
|
82
|
+
gap: {
|
|
83
|
+
base: "12",
|
|
84
|
+
tablet: "24"
|
|
85
|
+
},
|
|
70
86
|
minWidth: 0,
|
|
71
87
|
paddingBlock: "12",
|
|
72
88
|
paddingInlineEnd: "16",
|
|
@@ -80,16 +96,14 @@ var noteCardSlotRecipe = defineSlotRecipe({
|
|
|
80
96
|
minWidth: 0,
|
|
81
97
|
width: "100%"
|
|
82
98
|
},
|
|
83
|
-
|
|
99
|
+
messageList: { paddingBlock: "4" },
|
|
100
|
+
title: { textStyle: "body/lg/semibold" },
|
|
84
101
|
message: {
|
|
85
|
-
textStyle: "
|
|
102
|
+
textStyle: "body/md/regular",
|
|
86
103
|
color: "text/body"
|
|
87
104
|
},
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
textStyle: "comp/notification/message"
|
|
91
|
-
},
|
|
92
|
-
actionArea: { flexShrink: 0 }
|
|
105
|
+
actionArea: { flexShrink: 0 },
|
|
106
|
+
actionAreaList: { alignSelf: { tablet: "flex-start" } }
|
|
93
107
|
},
|
|
94
108
|
variants: { status: {
|
|
95
109
|
ai: {
|
|
@@ -97,13 +111,12 @@ var noteCardSlotRecipe = defineSlotRecipe({
|
|
|
97
111
|
background: "gradient/ai/background/minimal-vertical",
|
|
98
112
|
color: SIDEBAR_ICON_COLOR_MAP.ai
|
|
99
113
|
},
|
|
100
|
-
messageSolo: { color: TITLE_COLOR_MAP.ai },
|
|
101
114
|
root: {
|
|
102
115
|
backgroundColor: "transparent",
|
|
103
116
|
border: "1px solid transparent",
|
|
104
117
|
background: "linear-gradient({colors.neutral.100}, {colors.neutral.100}) padding-box, linear-gradient(135deg, {colors.purple.80} 0%, {colors.indigo.80} 50%, {colors.blue.80} 100%) border-box"
|
|
105
118
|
},
|
|
106
|
-
title: { color:
|
|
119
|
+
title: { color: STATUS_TEXT_COLOR_MAP.ai }
|
|
107
120
|
},
|
|
108
121
|
critical: getStatusVariant("critical"),
|
|
109
122
|
info: getStatusVariant("info"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NoteCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NoteCard.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { type NotificationVariant } from '../common/AlertAndToast.common';\n\nconst SIDEBAR_ICON_COLOR_MAP: Record<NotificationVariant, string> = {\n ai: 'color/indigo/base',\n critical: 'color/red/base',\n info: 'color/blue/base',\n progress: 'color/purple/base',\n success: 'color/green/base',\n warning: 'color/yellow/base',\n};\n\nconst
|
|
1
|
+
{"version":3,"file":"NoteCard.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/NoteCard.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { type NotificationVariant } from '../common/AlertAndToast.common';\n\nconst MESSAGE_ONLY_STATUSES: NotificationVariant[] = ['critical', 'progress', 'success'];\n\nconst SIDEBAR_ICON_COLOR_MAP: Record<NotificationVariant, string> = {\n ai: 'color/indigo/base',\n critical: 'color/red/base',\n info: 'color/blue/base',\n progress: 'color/purple/base',\n success: 'color/green/base',\n warning: 'color/yellow/base',\n};\n\nconst STATUS_TEXT_COLOR_MAP: Record<NotificationVariant, string> = {\n ai: 'status/ai/text',\n critical: 'text/negative',\n info: 'text/primary',\n progress: 'text/secondary',\n success: 'text/positive',\n warning: 'text/primary',\n};\n\nconst getStatusVariant = (v: NotificationVariant) => ({\n iconBar: {\n backgroundColor: `status/${v}/bg`,\n color: SIDEBAR_ICON_COLOR_MAP[v],\n },\n root: { borderColor: `status/${v}/border` },\n title: { color: STATUS_TEXT_COLOR_MAP[v] },\n ...(MESSAGE_ONLY_STATUSES.includes(v) && {\n message: { '&:only-child': { color: STATUS_TEXT_COLOR_MAP[v] } },\n }),\n});\n\nconst noteCardSlotRecipe = defineSlotRecipe({\n className: 'note-card',\n slots: [\n 'root',\n 'iconBar',\n 'iconWrapper',\n 'content',\n 'messageBlock',\n 'messageList',\n 'title',\n 'message',\n 'actionArea',\n 'actionAreaList',\n ],\n base: {\n root: {\n alignItems: 'stretch',\n backgroundColor: 'background/primary',\n border: '1px solid',\n borderRadius: '8',\n display: 'flex',\n overflow: 'hidden',\n },\n iconBar: {\n alignItems: 'flex-start',\n display: 'flex',\n flexShrink: 0,\n justifyContent: 'center',\n paddingBlock: '12',\n paddingInline: '8',\n },\n iconWrapper: {\n alignItems: 'center',\n display: 'flex',\n height: '24',\n justifyContent: 'center',\n width: '24',\n },\n content: {\n alignItems: { base: 'flex-end', tablet: 'center' },\n display: 'flex',\n flex: 1,\n flexDirection: { base: 'column', tablet: 'row' },\n gap: { base: '12', tablet: '24' },\n minWidth: 0,\n paddingBlock: '12',\n paddingInlineEnd: '16',\n paddingInlineStart: '12',\n },\n messageBlock: {\n display: 'flex',\n flex: 1,\n flexDirection: 'column',\n gap: '4',\n minWidth: 0,\n width: '100%',\n },\n messageList: {\n paddingBlock: '4',\n },\n title: {\n textStyle: 'body/lg/semibold',\n },\n message: {\n textStyle: 'body/md/regular',\n color: 'text/body',\n },\n actionArea: {\n flexShrink: 0,\n },\n actionAreaList: {\n alignSelf: { tablet: 'flex-start' },\n },\n },\n variants: {\n status: {\n ai: {\n iconBar: {\n background: 'gradient/ai/background/minimal-vertical',\n color: SIDEBAR_ICON_COLOR_MAP.ai,\n },\n root: {\n backgroundColor: 'transparent',\n border: '1px solid transparent',\n background:\n 'linear-gradient({colors.neutral.100}, {colors.neutral.100}) padding-box, linear-gradient(135deg, {colors.purple.80} 0%, {colors.indigo.80} 50%, {colors.blue.80} 100%) border-box',\n },\n title: { color: STATUS_TEXT_COLOR_MAP.ai },\n },\n critical: getStatusVariant('critical'),\n info: getStatusVariant('info'),\n progress: getStatusVariant('progress'),\n success: getStatusVariant('success'),\n warning: getStatusVariant('warning'),\n },\n },\n defaultVariants: {\n status: 'info',\n },\n});\n\nexport default noteCardSlotRecipe;\n"],"mappings":";;AAIA,IAAM,wBAA+C;CAAC;CAAY;CAAY;AAAS;AAEvF,IAAM,yBAA8D;CAClE,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAM,wBAA6D;CACjE,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAM,oBAAoB,OAA4B;CACpD,SAAS;EACP,iBAAiB,UAAU,EAAE;EAC7B,OAAO,uBAAuB;CAChC;CACA,MAAM,EAAE,aAAa,UAAU,EAAE,SAAS;CAC1C,OAAO,EAAE,OAAO,sBAAsB,GAAG;CACzC,GAAI,sBAAsB,SAAS,CAAC,KAAK,EACvC,SAAS,EAAE,gBAAgB,EAAE,OAAO,sBAAsB,GAAG,EAAE,EACjE;AACF;AAEA,IAAM,qBAAqB,iBAAiB;CAC1C,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM;GACJ,YAAY;GACZ,iBAAiB;GACjB,QAAQ;GACR,cAAc;GACd,SAAS;GACT,UAAU;EACZ;EACA,SAAS;GACP,YAAY;GACZ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,cAAc;GACd,eAAe;EACjB;EACA,aAAa;GACX,YAAY;GACZ,SAAS;GACT,QAAQ;GACR,gBAAgB;GAChB,OAAO;EACT;EACA,SAAS;GACP,YAAY;IAAE,MAAM;IAAY,QAAQ;GAAS;GACjD,SAAS;GACT,MAAM;GACN,eAAe;IAAE,MAAM;IAAU,QAAQ;GAAM;GAC/C,KAAK;IAAE,MAAM;IAAM,QAAQ;GAAK;GAChC,UAAU;GACV,cAAc;GACd,kBAAkB;GAClB,oBAAoB;EACtB;EACA,cAAc;GACZ,SAAS;GACT,MAAM;GACN,eAAe;GACf,KAAK;GACL,UAAU;GACV,OAAO;EACT;EACA,aAAa,EACX,cAAc,IAChB;EACA,OAAO,EACL,WAAW,mBACb;EACA,SAAS;GACP,WAAW;GACX,OAAO;EACT;EACA,YAAY,EACV,YAAY,EACd;EACA,gBAAgB,EACd,WAAW,EAAE,QAAQ,aAAa,EACpC;CACF;CACA,UAAU,EACR,QAAQ;EACN,IAAI;GACF,SAAS;IACP,YAAY;IACZ,OAAO,uBAAuB;GAChC;GACA,MAAM;IACJ,iBAAiB;IACjB,QAAQ;IACR,YACE;GACJ;GACA,OAAO,EAAE,OAAO,sBAAsB,GAAG;EAC3C;EACA,UAAU,iBAAiB,UAAU;EACrC,MAAM,iBAAiB,MAAM;EAC7B,UAAU,iBAAiB,UAAU;EACrC,SAAS,iBAAiB,SAAS;EACnC,SAAS,iBAAiB,SAAS;CACrC,EACF;CACA,iBAAiB,EACf,QAAQ,OACV;AACF,CAAC"}
|
|
@@ -1171,16 +1171,13 @@ declare const slotRecipes: {
|
|
|
1171
1171
|
};
|
|
1172
1172
|
};
|
|
1173
1173
|
}>;
|
|
1174
|
-
noteCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "iconBar" | "message" | "iconWrapper" | "messageBlock" | "
|
|
1174
|
+
noteCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "iconBar" | "message" | "messageList" | "iconWrapper" | "messageBlock" | "actionArea" | "actionAreaList", {
|
|
1175
1175
|
status: {
|
|
1176
1176
|
ai: {
|
|
1177
1177
|
iconBar: {
|
|
1178
1178
|
background: "gradient/ai/background/minimal-vertical";
|
|
1179
1179
|
color: string;
|
|
1180
1180
|
};
|
|
1181
|
-
messageSolo: {
|
|
1182
|
-
color: string;
|
|
1183
|
-
};
|
|
1184
1181
|
root: {
|
|
1185
1182
|
backgroundColor: "transparent";
|
|
1186
1183
|
border: "1px solid transparent";
|
|
@@ -1191,13 +1188,15 @@ declare const slotRecipes: {
|
|
|
1191
1188
|
};
|
|
1192
1189
|
};
|
|
1193
1190
|
critical: {
|
|
1191
|
+
message?: {
|
|
1192
|
+
'&:only-child': {
|
|
1193
|
+
color: string;
|
|
1194
|
+
};
|
|
1195
|
+
} | undefined;
|
|
1194
1196
|
iconBar: {
|
|
1195
1197
|
backgroundColor: string;
|
|
1196
1198
|
color: string;
|
|
1197
1199
|
};
|
|
1198
|
-
messageSolo: {
|
|
1199
|
-
color: string;
|
|
1200
|
-
};
|
|
1201
1200
|
root: {
|
|
1202
1201
|
borderColor: string;
|
|
1203
1202
|
};
|
|
@@ -1206,13 +1205,15 @@ declare const slotRecipes: {
|
|
|
1206
1205
|
};
|
|
1207
1206
|
};
|
|
1208
1207
|
info: {
|
|
1208
|
+
message?: {
|
|
1209
|
+
'&:only-child': {
|
|
1210
|
+
color: string;
|
|
1211
|
+
};
|
|
1212
|
+
} | undefined;
|
|
1209
1213
|
iconBar: {
|
|
1210
1214
|
backgroundColor: string;
|
|
1211
1215
|
color: string;
|
|
1212
1216
|
};
|
|
1213
|
-
messageSolo: {
|
|
1214
|
-
color: string;
|
|
1215
|
-
};
|
|
1216
1217
|
root: {
|
|
1217
1218
|
borderColor: string;
|
|
1218
1219
|
};
|
|
@@ -1221,13 +1222,15 @@ declare const slotRecipes: {
|
|
|
1221
1222
|
};
|
|
1222
1223
|
};
|
|
1223
1224
|
progress: {
|
|
1225
|
+
message?: {
|
|
1226
|
+
'&:only-child': {
|
|
1227
|
+
color: string;
|
|
1228
|
+
};
|
|
1229
|
+
} | undefined;
|
|
1224
1230
|
iconBar: {
|
|
1225
1231
|
backgroundColor: string;
|
|
1226
1232
|
color: string;
|
|
1227
1233
|
};
|
|
1228
|
-
messageSolo: {
|
|
1229
|
-
color: string;
|
|
1230
|
-
};
|
|
1231
1234
|
root: {
|
|
1232
1235
|
borderColor: string;
|
|
1233
1236
|
};
|
|
@@ -1236,13 +1239,15 @@ declare const slotRecipes: {
|
|
|
1236
1239
|
};
|
|
1237
1240
|
};
|
|
1238
1241
|
success: {
|
|
1242
|
+
message?: {
|
|
1243
|
+
'&:only-child': {
|
|
1244
|
+
color: string;
|
|
1245
|
+
};
|
|
1246
|
+
} | undefined;
|
|
1239
1247
|
iconBar: {
|
|
1240
1248
|
backgroundColor: string;
|
|
1241
1249
|
color: string;
|
|
1242
1250
|
};
|
|
1243
|
-
messageSolo: {
|
|
1244
|
-
color: string;
|
|
1245
|
-
};
|
|
1246
1251
|
root: {
|
|
1247
1252
|
borderColor: string;
|
|
1248
1253
|
};
|
|
@@ -1251,13 +1256,15 @@ declare const slotRecipes: {
|
|
|
1251
1256
|
};
|
|
1252
1257
|
};
|
|
1253
1258
|
warning: {
|
|
1259
|
+
message?: {
|
|
1260
|
+
'&:only-child': {
|
|
1261
|
+
color: string;
|
|
1262
|
+
};
|
|
1263
|
+
} | undefined;
|
|
1254
1264
|
iconBar: {
|
|
1255
1265
|
backgroundColor: string;
|
|
1256
1266
|
color: string;
|
|
1257
1267
|
};
|
|
1258
|
-
messageSolo: {
|
|
1259
|
-
color: string;
|
|
1260
|
-
};
|
|
1261
1268
|
root: {
|
|
1262
1269
|
borderColor: string;
|
|
1263
1270
|
};
|