@bitrise/bitkit-v2 0.3.284 → 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/components/BitkitPromoBanner/BitkitPromoBanner.js +36 -5
- package/dist/components/BitkitPromoBanner/BitkitPromoBanner.js.map +1 -1
- package/dist/components/common/NotificationContent.d.ts +3 -1
- package/dist/components/common/NotificationContent.js +39 -9
- package/dist/components/common/NotificationContent.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"}
|
|
@@ -11,22 +11,52 @@ var PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;
|
|
|
11
11
|
var BitkitPromoBanner = (props) => {
|
|
12
12
|
const { actionable, dismissible, illustration, message, onClose, title, ...rest } = props;
|
|
13
13
|
return /* @__PURE__ */ jsxs(Alert.Root, {
|
|
14
|
+
...rest,
|
|
14
15
|
variant: "info",
|
|
15
16
|
border: "none",
|
|
17
|
+
position: "relative",
|
|
18
|
+
flexDirection: {
|
|
19
|
+
base: "column",
|
|
20
|
+
tablet: "row"
|
|
21
|
+
},
|
|
22
|
+
alignItems: {
|
|
23
|
+
base: "stretch",
|
|
24
|
+
tablet: "center"
|
|
25
|
+
},
|
|
26
|
+
rowGap: {
|
|
27
|
+
base: "16",
|
|
28
|
+
tablet: "0"
|
|
29
|
+
},
|
|
30
|
+
paddingBlockEnd: {
|
|
31
|
+
base: actionable ? "20" : "16",
|
|
32
|
+
tablet: rem(11)
|
|
33
|
+
},
|
|
16
34
|
css: { "& .alert__title + *": { marginBlockStart: 0 } },
|
|
17
|
-
...rest,
|
|
18
35
|
children: [illustration ? /* @__PURE__ */ jsx(Box, {
|
|
19
36
|
flexShrink: 0,
|
|
20
|
-
marginInlineEnd:
|
|
37
|
+
marginInlineEnd: {
|
|
38
|
+
base: "0",
|
|
39
|
+
tablet: "12"
|
|
40
|
+
},
|
|
21
41
|
"aria-hidden": true,
|
|
22
42
|
children: illustration
|
|
23
43
|
}) : /* @__PURE__ */ jsx(Icon, {
|
|
24
44
|
asChild: true,
|
|
25
45
|
width: rem(72),
|
|
26
46
|
height: rem(68),
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
47
|
+
flexShrink: 0,
|
|
48
|
+
marginInlineEnd: {
|
|
49
|
+
base: "0",
|
|
50
|
+
tablet: "12"
|
|
51
|
+
},
|
|
52
|
+
marginBlock: {
|
|
53
|
+
base: "0",
|
|
54
|
+
tablet: rem(-11)
|
|
55
|
+
},
|
|
56
|
+
marginInlineStart: {
|
|
57
|
+
base: "0",
|
|
58
|
+
tablet: rem(-12)
|
|
59
|
+
},
|
|
30
60
|
children: /* @__PURE__ */ jsx(ForwardRef, {})
|
|
31
61
|
}), /* @__PURE__ */ jsx(NotificationContent, {
|
|
32
62
|
action: actionable,
|
|
@@ -34,6 +64,7 @@ var BitkitPromoBanner = (props) => {
|
|
|
34
64
|
dismissible,
|
|
35
65
|
messageText: message,
|
|
36
66
|
onClose,
|
|
67
|
+
stackable: true,
|
|
37
68
|
titleText: title
|
|
38
69
|
})]
|
|
39
70
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitPromoBanner.js","names":[],"sources":["../../../lib/components/BitkitPromoBanner/BitkitPromoBanner.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { Icon } from '@chakra-ui/react/icon';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport { NotificationContent } from '../common/NotificationContent';\nimport { BUTTON_COLORS_MAP, type NotificationAction } from '../common/notificationMaps';\nimport MascotSvg from './mascot.svg?react';\n\nexport type PromoBannerAction = NotificationAction;\n\nconst PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;\n\nexport interface BitkitPromoBannerProps extends Omit<AlertRootProps, 'title' | 'variant'> {\n actionable?: PromoBannerAction;\n dismissible?: boolean;\n /** Custom leading illustration. Defaults to the built-in mascot. */\n illustration?: ReactNode;\n message: ReactNode;\n onClose?: () => void;\n title: ReactNode;\n}\n\nconst BitkitPromoBanner = (props: BitkitPromoBannerProps) => {\n const { actionable, dismissible, illustration, message, onClose, title, ...rest } = props;\n\n return (\n <Alert.Root
|
|
1
|
+
{"version":3,"file":"BitkitPromoBanner.js","names":[],"sources":["../../../lib/components/BitkitPromoBanner/BitkitPromoBanner.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { Icon } from '@chakra-ui/react/icon';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport { NotificationContent } from '../common/NotificationContent';\nimport { BUTTON_COLORS_MAP, type NotificationAction } from '../common/notificationMaps';\nimport MascotSvg from './mascot.svg?react';\n\nexport type PromoBannerAction = NotificationAction;\n\nconst PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;\n\nexport interface BitkitPromoBannerProps extends Omit<AlertRootProps, 'title' | 'variant'> {\n actionable?: PromoBannerAction;\n dismissible?: boolean;\n /** Custom leading illustration. Defaults to the built-in mascot. */\n illustration?: ReactNode;\n message: ReactNode;\n onClose?: () => void;\n title: ReactNode;\n}\n\nconst BitkitPromoBanner = (props: BitkitPromoBannerProps) => {\n const { actionable, dismissible, illustration, message, onClose, title, ...rest } = props;\n\n return (\n <Alert.Root\n {...rest}\n variant=\"info\"\n border=\"none\"\n position=\"relative\"\n flexDirection={{ base: 'column', tablet: 'row' }}\n alignItems={{ base: 'stretch', tablet: 'center' }}\n rowGap={{ base: '16', tablet: '0' }}\n paddingBlockEnd={{ base: actionable ? '20' : '16', tablet: rem(11) }}\n css={{ '& .alert__title + *': { marginBlockStart: 0 } }}\n >\n {illustration ? (\n <Box flexShrink={0} marginInlineEnd={{ base: '0', tablet: '12' }} aria-hidden>\n {illustration}\n </Box>\n ) : (\n <Icon\n asChild\n width={rem(72)}\n height={rem(68)}\n flexShrink={0}\n marginInlineEnd={{ base: '0', tablet: '12' }}\n marginBlock={{ base: '0', tablet: rem(-11) }}\n marginInlineStart={{ base: '0', tablet: rem(-12) }}\n >\n <MascotSvg />\n </Icon>\n )}\n <NotificationContent\n action={actionable}\n colorVariant={PROMO_BANNER_COLOR}\n dismissible={dismissible}\n messageText={message}\n onClose={onClose}\n stackable\n titleText={title}\n />\n </Alert.Root>\n );\n};\n\nBitkitPromoBanner.displayName = 'BitkitPromoBanner';\n\nexport default BitkitPromoBanner;\n"],"mappings":";;;;;;;;;AAYA,IAAM,qBAAqB,kBAAkB;AAY7C,IAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,YAAY,aAAa,cAAc,SAAS,SAAS,OAAO,GAAG,SAAS;CAEpF,OACE,qBAAC,MAAM,MAAP;EACE,GAAI;EACJ,SAAQ;EACR,QAAO;EACP,UAAS;EACT,eAAe;GAAE,MAAM;GAAU,QAAQ;EAAM;EAC/C,YAAY;GAAE,MAAM;GAAW,QAAQ;EAAS;EAChD,QAAQ;GAAE,MAAM;GAAM,QAAQ;EAAI;EAClC,iBAAiB;GAAE,MAAM,aAAa,OAAO;GAAM,QAAQ,IAAI,EAAE;EAAE;EACnE,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,EAAE;YATxD,CAWG,eACC,oBAAC,KAAD;GAAK,YAAY;GAAG,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAAG,eAAA;aAC/D;EACE,CAAA,IAEL,oBAAC,MAAD;GACE,SAAA;GACA,OAAO,IAAI,EAAE;GACb,QAAQ,IAAI,EAAE;GACd,YAAY;GACZ,iBAAiB;IAAE,MAAM;IAAK,QAAQ;GAAK;GAC3C,aAAa;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;GAC3C,mBAAmB;IAAE,MAAM;IAAK,QAAQ,IAAI,GAAG;GAAE;aAEjD,oBAAC,YAAD,CAAY,CAAA;EACR,CAAA,GAER,oBAAC,qBAAD;GACE,QAAQ;GACR,cAAc;GACD;GACb,aAAa;GACJ;GACT,WAAA;GACA,WAAW;EACZ,CAAA,CACS;;AAEhB;AAEA,kBAAkB,cAAc"}
|
|
@@ -7,7 +7,9 @@ export interface NotificationContentProps {
|
|
|
7
7
|
dismissible?: boolean;
|
|
8
8
|
messageText: ReactNode;
|
|
9
9
|
onClose?: () => void;
|
|
10
|
+
/** Opt in to responsive stacking below `tablet`. Requires Root `position="relative"`. */
|
|
11
|
+
stackable?: boolean;
|
|
10
12
|
titleText?: ReactNode;
|
|
11
13
|
}
|
|
12
|
-
export declare const NotificationContent: ({ action, colorVariant, dismissible, messageText, onClose, titleText, }: NotificationContentProps) => import("react").JSX.Element;
|
|
14
|
+
export declare const NotificationContent: ({ action, colorVariant, dismissible, messageText, onClose, stackable, titleText, }: NotificationContentProps) => import("react").JSX.Element;
|
|
13
15
|
export {};
|
|
@@ -19,24 +19,53 @@ var ActionButton = ({ action, colorVariant }) => /* @__PURE__ */ jsx(BitkitColor
|
|
|
19
19
|
whiteSpace: "nowrap",
|
|
20
20
|
children: action.label
|
|
21
21
|
});
|
|
22
|
-
var CloseButton = ({ colorVariant, onClose }) => /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
22
|
+
var CloseButton = ({ colorVariant, onClose, stackable }) => /* @__PURE__ */ jsx(BitkitCloseButton, {
|
|
23
23
|
alignSelf: "flex-start",
|
|
24
|
-
marginBlock: rem(-4),
|
|
25
24
|
size: "sm",
|
|
26
25
|
onClick: onClose,
|
|
27
|
-
colorVariant
|
|
26
|
+
colorVariant,
|
|
27
|
+
position: stackable ? {
|
|
28
|
+
base: "absolute",
|
|
29
|
+
tablet: "static"
|
|
30
|
+
} : void 0,
|
|
31
|
+
insetBlockStart: stackable ? "8" : void 0,
|
|
32
|
+
insetInlineEnd: stackable ? "8" : void 0,
|
|
33
|
+
marginBlock: {
|
|
34
|
+
base: stackable ? "0" : rem(-4),
|
|
35
|
+
tablet: rem(-4)
|
|
36
|
+
}
|
|
28
37
|
});
|
|
29
|
-
var NotificationContent = ({ action, colorVariant, dismissible, messageText, onClose, titleText }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Box, {
|
|
38
|
+
var NotificationContent = ({ action, colorVariant, dismissible, messageText, onClose, stackable, titleText }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Box, {
|
|
30
39
|
display: "flex",
|
|
31
|
-
|
|
40
|
+
flexDirection: stackable ? {
|
|
41
|
+
base: "column",
|
|
42
|
+
tablet: "row"
|
|
43
|
+
} : void 0,
|
|
44
|
+
flex: stackable ? {
|
|
45
|
+
base: "0 1 0%",
|
|
46
|
+
tablet: "1"
|
|
47
|
+
} : "1",
|
|
32
48
|
minWidth: "0",
|
|
33
49
|
flexWrap: "wrap",
|
|
34
|
-
alignItems:
|
|
50
|
+
alignItems: stackable ? {
|
|
51
|
+
base: "flex-start",
|
|
52
|
+
tablet: "center"
|
|
53
|
+
} : "center",
|
|
35
54
|
columnGap: "16",
|
|
36
|
-
rowGap:
|
|
55
|
+
rowGap: stackable ? {
|
|
56
|
+
base: "20",
|
|
57
|
+
tablet: rem(11)
|
|
58
|
+
} : rem(11),
|
|
59
|
+
paddingInlineEnd: stackable && dismissible ? {
|
|
60
|
+
base: "40",
|
|
61
|
+
tablet: "0"
|
|
62
|
+
} : void 0,
|
|
37
63
|
children: [/* @__PURE__ */ jsxs(Alert.Content, {
|
|
38
64
|
minWidth: "0",
|
|
39
|
-
flex:
|
|
65
|
+
flex: stackable ? {
|
|
66
|
+
base: "none",
|
|
67
|
+
tablet: `1 1 ${rem(240)}`
|
|
68
|
+
} : `1 1 ${rem(240)}`,
|
|
40
69
|
children: [titleText && /* @__PURE__ */ jsx(Alert.Title, { children: titleText }), /* @__PURE__ */ jsx(Alert.Description, { children: messageText })]
|
|
41
70
|
}), !!action && /* @__PURE__ */ jsx(ActionButton, {
|
|
42
71
|
action,
|
|
@@ -44,7 +73,8 @@ var NotificationContent = ({ action, colorVariant, dismissible, messageText, onC
|
|
|
44
73
|
})]
|
|
45
74
|
}), !!dismissible && /* @__PURE__ */ jsx(CloseButton, {
|
|
46
75
|
colorVariant,
|
|
47
|
-
onClose
|
|
76
|
+
onClose,
|
|
77
|
+
stackable
|
|
48
78
|
})] });
|
|
49
79
|
//#endregion
|
|
50
80
|
export { NotificationContent };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NotificationContent.js","names":[],"sources":["../../../lib/components/common/NotificationContent.tsx"],"sourcesContent":["/* Shared inner structure for notification-like components (Alert, PromoBanner):\n the content + action row and the trailing close button, plus the two buttons themselves.\n Alert.Root is the flex container, so this fragment's row and close button land as flex\n siblings next to the leading visual (indicator / illustration).\n The constants here are load-bearing and must not drift across the two components:\n `rem(11)` rowGap + the button `rem(-4)` bleed keep a single-line notification on 48px,\n and `flex: 1 1 rem(240)` on the content lets the action wrap below the text on narrow widths. */\n\nimport { Alert } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton, { type BitkitCloseButtonProps } from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\nimport { type BUTTON_COLORS_MAP, type NotificationAction } from './notificationMaps';\n\ntype NotificationColorVariant = (typeof BUTTON_COLORS_MAP)[keyof typeof BUTTON_COLORS_MAP];\n\nconst ActionButton = ({\n action,\n colorVariant,\n}: {\n action: NotificationAction;\n colorVariant: BitkitColorButtonProps['colorVariant'];\n}) => (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={colorVariant}\n {...(action.href && {\n href: action.href,\n target: action.target,\n rel: action.target === '_blank' ? 'noopener noreferrer' : undefined,\n })}\n onClick={action.onClick}\n marginBlock={rem(-4)}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n);\n\nconst CloseButton = ({\n colorVariant,\n onClose,\n}: {\n colorVariant: BitkitCloseButtonProps['colorVariant'];\n onClose?: () => void;\n}) => (\n <BitkitCloseButton\n alignSelf=\"flex-start\"\n
|
|
1
|
+
{"version":3,"file":"NotificationContent.js","names":[],"sources":["../../../lib/components/common/NotificationContent.tsx"],"sourcesContent":["/* Shared inner structure for notification-like components (Alert, PromoBanner):\n the content + action row and the trailing close button, plus the two buttons themselves.\n Alert.Root is the flex container, so this fragment's row and close button land as flex\n siblings next to the leading visual (indicator / illustration).\n The constants here are load-bearing and must not drift across the two components:\n `rem(11)` rowGap + the button `rem(-4)` bleed keep a single-line notification on 48px,\n and `flex: 1 1 rem(240)` on the content lets the action wrap below the text on narrow widths.\n\n `stackable` (opt-in, currently only PromoBanner) makes the elements this fragment owns\n responsive: below `tablet` the content/action row stacks vertically and the close button\n floats to the top-right corner. It positions the button absolutely, so the consuming\n component must give Alert.Root `position=\"relative\"`. Because the button floats over the\n top-right corner (32px at `inset 8` ⇒ a 40px band), the content row reserves a matching\n inline-end gutter below `tablet` so title/message text never runs under it — independent of\n how tall the leading visual is. The leading visual and the Root's own flex direction / gap /\n padding stay with the consumer — they differ per component. */\n\nimport { Alert } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton, { type BitkitCloseButtonProps } from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\nimport { type BUTTON_COLORS_MAP, type NotificationAction } from './notificationMaps';\n\ntype NotificationColorVariant = (typeof BUTTON_COLORS_MAP)[keyof typeof BUTTON_COLORS_MAP];\n\nconst ActionButton = ({\n action,\n colorVariant,\n}: {\n action: NotificationAction;\n colorVariant: BitkitColorButtonProps['colorVariant'];\n}) => (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={colorVariant}\n {...(action.href && {\n href: action.href,\n target: action.target,\n rel: action.target === '_blank' ? 'noopener noreferrer' : undefined,\n })}\n onClick={action.onClick}\n marginBlock={rem(-4)}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n);\n\nconst CloseButton = ({\n colorVariant,\n onClose,\n stackable,\n}: {\n colorVariant: BitkitCloseButtonProps['colorVariant'];\n onClose?: () => void;\n stackable?: boolean;\n}) => (\n <BitkitCloseButton\n alignSelf=\"flex-start\"\n size=\"sm\"\n onClick={onClose}\n colorVariant={colorVariant}\n // Below tablet (stackable only) it floats to the top-right corner (needs Root\n // position=\"relative\"); otherwise inline with the -4 bleed that keeps a single line on 48px.\n position={stackable ? { base: 'absolute', tablet: 'static' } : undefined}\n insetBlockStart={stackable ? '8' : undefined}\n insetInlineEnd={stackable ? '8' : undefined}\n marginBlock={{ base: stackable ? '0' : rem(-4), tablet: rem(-4) }}\n />\n);\n\nexport interface NotificationContentProps {\n action?: NotificationAction;\n colorVariant: NotificationColorVariant;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n /** Opt in to responsive stacking below `tablet`. Requires Root `position=\"relative\"`. */\n stackable?: boolean;\n titleText?: ReactNode;\n}\n\nexport const NotificationContent = ({\n action,\n colorVariant,\n dismissible,\n messageText,\n onClose,\n stackable,\n titleText,\n}: NotificationContentProps) => (\n <>\n {/* content + action share a wrapping row so the action drops below the text on narrow widths;\n when stacking, the row switches to a column below tablet */}\n <Box\n display=\"flex\"\n flexDirection={stackable ? { base: 'column', tablet: 'row' } : undefined}\n flex={stackable ? { base: '0 1 0%', tablet: '1' } : '1'}\n minWidth=\"0\"\n flexWrap=\"wrap\"\n alignItems={stackable ? { base: 'flex-start', tablet: 'center' } : 'center'}\n columnGap=\"16\"\n rowGap={stackable ? { base: '20', tablet: rem(11) } : rem(11)}\n paddingInlineEnd={stackable && dismissible ? { base: '40', tablet: '0' } : undefined}\n >\n <Alert.Content minWidth=\"0\" flex={stackable ? { base: 'none', tablet: `1 1 ${rem(240)}` } : `1 1 ${rem(240)}`}>\n {titleText && <Alert.Title>{titleText}</Alert.Title>}\n <Alert.Description>{messageText}</Alert.Description>\n </Alert.Content>\n {!!action && <ActionButton action={action} colorVariant={colorVariant} />}\n </Box>\n {!!dismissible && <CloseButton colorVariant={colorVariant} onClose={onClose} stackable={stackable} />}\n </>\n);\n"],"mappings":";;;;;;;AA4BA,IAAM,gBAAgB,EACpB,QACA,mBAKA,oBAAC,mBAAD;CACE,IAAI,OAAO,OAAO,MAAM;CACV;CACd,GAAK,OAAO,QAAQ;EAClB,MAAM,OAAO;EACb,QAAQ,OAAO;EACf,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;CAC5D;CACA,SAAS,OAAO;CAChB,aAAa,IAAI,EAAE;CACnB,iBAAgB;CAChB,YAAW;WAEV,OAAO;AACS,CAAA;AAGrB,IAAM,eAAe,EACnB,cACA,SACA,gBAMA,oBAAC,mBAAD;CACE,WAAU;CACV,MAAK;CACL,SAAS;CACK;CAGd,UAAU,YAAY;EAAE,MAAM;EAAY,QAAQ;CAAS,IAAI,KAAA;CAC/D,iBAAiB,YAAY,MAAM,KAAA;CACnC,gBAAgB,YAAY,MAAM,KAAA;CAClC,aAAa;EAAE,MAAM,YAAY,MAAM,IAAI,EAAE;EAAG,QAAQ,IAAI,EAAE;CAAE;AACjE,CAAA;AAcH,IAAa,uBAAuB,EAClC,QACA,cACA,aACA,aACA,SACA,WACA,gBAEA,qBAAA,UAAA,EAAA,UAAA,CAGE,qBAAC,KAAD;CACE,SAAQ;CACR,eAAe,YAAY;EAAE,MAAM;EAAU,QAAQ;CAAM,IAAI,KAAA;CAC/D,MAAM,YAAY;EAAE,MAAM;EAAU,QAAQ;CAAI,IAAI;CACpD,UAAS;CACT,UAAS;CACT,YAAY,YAAY;EAAE,MAAM;EAAc,QAAQ;CAAS,IAAI;CACnE,WAAU;CACV,QAAQ,YAAY;EAAE,MAAM;EAAM,QAAQ,IAAI,EAAE;CAAE,IAAI,IAAI,EAAE;CAC5D,kBAAkB,aAAa,cAAc;EAAE,MAAM;EAAM,QAAQ;CAAI,IAAI,KAAA;WAT7E,CAWE,qBAAC,MAAM,SAAP;EAAe,UAAS;EAAI,MAAM,YAAY;GAAE,MAAM;GAAQ,QAAQ,OAAO,IAAI,GAAG;EAAI,IAAI,OAAO,IAAI,GAAG;YAA1G,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC;KACd,CAAC,CAAC,UAAU,oBAAC,cAAD;EAAsB;EAAsB;CAAe,CAAA,CACrE;IACJ,CAAC,CAAC,eAAe,oBAAC,aAAD;CAA2B;CAAuB;CAAoB;AAAY,CAAA,CACpG,EAAA,CAAA"}
|
|
@@ -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
|
};
|