@bitrise/bitkit-v2 0.3.377 → 0.3.378
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 -0
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js +30 -7
- package/dist/components/BitkitNoteCard/BitkitNoteCard.js.map +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.d.ts +1 -1
- package/dist/theme/slot-recipes/NoteCard.recipe.js +24 -0
- package/dist/theme/slot-recipes/NoteCard.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +1 -1
- package/package.json +1 -1
|
@@ -4,6 +4,8 @@ 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
|
+
defaultOpen?: boolean;
|
|
8
|
+
isCollapsible?: boolean;
|
|
7
9
|
message?: ReactNode;
|
|
8
10
|
messageList?: ReactNode[];
|
|
9
11
|
status?: NotificationVariant;
|
|
@@ -11,6 +13,8 @@ export type BitkitNoteCardProps = Omit<BoxProps, 'children' | 'title'> & {
|
|
|
11
13
|
};
|
|
12
14
|
declare const BitkitNoteCard: import('react').ForwardRefExoticComponent<Omit<BoxProps, "title" | "children"> & {
|
|
13
15
|
action?: NotificationAction;
|
|
16
|
+
defaultOpen?: boolean;
|
|
17
|
+
isCollapsible?: boolean;
|
|
14
18
|
message?: ReactNode;
|
|
15
19
|
messageList?: ReactNode[];
|
|
16
20
|
status?: NotificationVariant;
|
|
@@ -1,19 +1,30 @@
|
|
|
1
|
+
import IconChevronDown from "../../icons/IconChevronDown.js";
|
|
2
|
+
import IconChevronUp from "../../icons/IconChevronUp.js";
|
|
1
3
|
import { ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
|
|
2
4
|
import BitkitButton from "../BitkitButton/BitkitButton.js";
|
|
5
|
+
import BitkitLinkButton from "../BitkitLinkButton/BitkitLinkButton.js";
|
|
3
6
|
import BitkitList_default from "../BitkitList/BitkitList.js";
|
|
4
7
|
import { Box } from "@chakra-ui/react/box";
|
|
5
8
|
import { useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
|
-
import { forwardRef } from "react";
|
|
9
|
+
import { forwardRef, useState } from "react";
|
|
7
10
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
11
|
import { Text } from "@chakra-ui/react/text";
|
|
12
|
+
import { Collapsible } from "@chakra-ui/react/collapsible";
|
|
9
13
|
//#region lib/components/BitkitNoteCard/BitkitNoteCard.tsx
|
|
10
14
|
var BitkitNoteCard = forwardRef((props, ref) => {
|
|
11
|
-
const { action, message, messageList, status = "info", title, ...rest } = props;
|
|
15
|
+
const { action, defaultOpen = false, isCollapsible = false, message, messageList, status = "info", title, ...rest } = props;
|
|
12
16
|
const styles = useSlotRecipe({ key: "noteCard" })({ status });
|
|
17
|
+
const [isOpen, setIsOpen] = useState(defaultOpen);
|
|
13
18
|
const IconComponent = ICON_COMPONENTS_MAP[status];
|
|
14
19
|
const isProgress = status === "progress";
|
|
15
20
|
const listItems = (messageList ?? []).filter((item) => item !== null && item !== void 0 && typeof item !== "boolean");
|
|
16
21
|
const hasList = listItems.length > 0;
|
|
22
|
+
const hasToggle = isCollapsible && hasList;
|
|
23
|
+
const list = hasList ? /* @__PURE__ */ jsx(BitkitList_default, {
|
|
24
|
+
css: styles.messageList,
|
|
25
|
+
size: "md",
|
|
26
|
+
children: listItems.map((item, index) => /* @__PURE__ */ jsx(BitkitList_default.Item, { children: item }, index))
|
|
27
|
+
}) : null;
|
|
17
28
|
return /* @__PURE__ */ jsxs(Box, {
|
|
18
29
|
ref,
|
|
19
30
|
css: styles.root,
|
|
@@ -37,11 +48,23 @@ var BitkitNoteCard = forwardRef((props, ref) => {
|
|
|
37
48
|
css: styles.message,
|
|
38
49
|
children: message
|
|
39
50
|
}),
|
|
40
|
-
|
|
41
|
-
css: styles.
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
51
|
+
hasToggle ? /* @__PURE__ */ jsxs(Collapsible.Root, {
|
|
52
|
+
css: styles.collapsible,
|
|
53
|
+
onOpenChange: (details) => setIsOpen(details.open),
|
|
54
|
+
open: isOpen,
|
|
55
|
+
unstyled: true,
|
|
56
|
+
children: [/* @__PURE__ */ jsx(Collapsible.Content, {
|
|
57
|
+
css: styles.collapsibleContent,
|
|
58
|
+
children: list
|
|
59
|
+
}), /* @__PURE__ */ jsx(Collapsible.Trigger, {
|
|
60
|
+
asChild: true,
|
|
61
|
+
children: /* @__PURE__ */ jsx(BitkitLinkButton, {
|
|
62
|
+
css: styles.collapsibleTrigger,
|
|
63
|
+
suffixIcon: isOpen ? IconChevronUp : IconChevronDown,
|
|
64
|
+
children: isOpen ? "Hide details" : "Show details"
|
|
65
|
+
})
|
|
66
|
+
})]
|
|
67
|
+
}) : list
|
|
45
68
|
]
|
|
46
69
|
}), action && (action.href !== void 0 ? /* @__PURE__ */ jsx(BitkitButton, {
|
|
47
70
|
css: [styles.actionArea, hasList && styles.actionAreaList],
|
|
@@ -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 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?: ReactNode[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const {
|
|
1
|
+
{"version":3,"file":"BitkitNoteCard.js","names":[],"sources":["../../../lib/components/BitkitNoteCard/BitkitNoteCard.tsx"],"sourcesContent":["import { Box, type BoxProps } from '@chakra-ui/react/box';\nimport { Collapsible } from '@chakra-ui/react/collapsible';\nimport { useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ElementType, forwardRef, type ReactNode, useState } from 'react';\n\nimport { IconChevronDown, IconChevronUp } from '../../icons';\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport BitkitButton from '../BitkitButton/BitkitButton';\nimport BitkitLinkButton from '../BitkitLinkButton/BitkitLinkButton';\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 defaultOpen?: boolean;\n isCollapsible?: boolean;\n message?: ReactNode;\n messageList?: ReactNode[];\n status?: NotificationVariant;\n title?: string;\n};\n\n// ----- Component -----\n\nconst BitkitNoteCard = forwardRef<HTMLDivElement, BitkitNoteCardProps>((props, ref) => {\n const {\n action,\n defaultOpen = false,\n isCollapsible = false,\n message,\n messageList,\n status = 'info',\n title,\n ...rest\n } = props;\n\n const recipe = useSlotRecipe({ key: 'noteCard' });\n const styles = recipe({ status });\n\n const [isOpen, setIsOpen] = useState(defaultOpen);\n\n const IconComponent: ElementType = ICON_COMPONENTS_MAP[status];\n const isProgress = status === 'progress';\n const listItems = (messageList ?? []).filter(\n (item) => item !== null && item !== undefined && typeof item !== 'boolean',\n );\n const hasList = listItems.length > 0;\n const hasToggle = isCollapsible && hasList;\n\n const list = hasList ? (\n <BitkitList css={styles.messageList} size=\"md\">\n {listItems.map((item, index) => (\n <BitkitList.Item key={index}>{item}</BitkitList.Item>\n ))}\n </BitkitList>\n ) : null;\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 {hasToggle ? (\n <Collapsible.Root\n css={styles.collapsible}\n onOpenChange={(details) => setIsOpen(details.open)}\n open={isOpen}\n unstyled\n >\n <Collapsible.Content css={styles.collapsibleContent}>{list}</Collapsible.Content>\n <Collapsible.Trigger asChild>\n <BitkitLinkButton css={styles.collapsibleTrigger} suffixIcon={isOpen ? IconChevronUp : IconChevronDown}>\n {isOpen ? 'Hide details' : 'Show details'}\n </BitkitLinkButton>\n </Collapsible.Trigger>\n </Collapsible.Root>\n ) : (\n list\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 // See the known gap documented on `NotificationAction.state`: BitkitButton's anchor\n // variant has no loading state, so only `disabled` carries over here.\n state={action.state === 'loading' ? undefined : action.state}\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 state={action.state}\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":";;;;;;;;;;;;;AA2BA,IAAM,iBAAiB,YAAiD,OAAO,QAAQ;CACrF,MAAM,EACJ,QACA,cAAc,OACd,gBAAgB,OAChB,SACA,aACA,SAAS,QACT,OACA,GAAG,SACD;CAGJ,MAAM,SADS,cAAc,EAAE,KAAK,WAAW,CAChC,CAAA,CAAO,EAAE,OAAO,CAAC;CAEhC,MAAM,CAAC,QAAQ,aAAa,SAAS,WAAW;CAEhD,MAAM,gBAA6B,oBAAoB;CACvD,MAAM,aAAa,WAAW;CAC9B,MAAM,aAAa,eAAe,CAAC,EAAA,CAAG,QACnC,SAAS,SAAS,QAAQ,SAAS,KAAA,KAAa,OAAO,SAAS,SACnE;CACA,MAAM,UAAU,UAAU,SAAS;CACnC,MAAM,YAAY,iBAAiB;CAEnC,MAAM,OAAO,UACX,oBAAC,oBAAD;EAAY,KAAK,OAAO;EAAa,MAAK;EACvC,UAAA,UAAU,KAAK,MAAM,UACpB,oBAAC,mBAAW,MAAZ,EAAA,UAA8B,KAAsB,GAA9B,KAA8B,CACrD;CACS,CAAA,IACV;CAEJ,OACE,qBAAC,KAAD;EAAU;EAAK,KAAK,OAAO;EAAM,GAAI;EAArC,UAAA,CACE,oBAAC,KAAD;GAAK,KAAK,OAAO;GACf,UAAA,oBAAC,KAAD;IAAK,KAAK,OAAO;IAAc,UAAA,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;GAAhE,UAAA,CACE,qBAAC,KAAD;IAAK,KAAK,CAAC,OAAO,cAAc,CAAC,SAAS,EAAE,mBAAmB,IAAI,CAAC;IAApE,UAAA;KACG,SAAS,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAQ,UAAA;KAAY,CAAA;KAC/C,WAAW,oBAAC,MAAD;MAAM,KAAK,OAAO;MAAU,UAAA;KAAc,CAAA;KACrD,YACC,qBAAC,YAAY,MAAb;MACE,KAAK,OAAO;MACZ,eAAe,YAAY,UAAU,QAAQ,IAAI;MACjD,MAAM;MACN,UAAA;MAJF,UAAA,CAME,oBAAC,YAAY,SAAb;OAAqB,KAAK,OAAO;OAAqB,UAAA;MAA0B,CAAA,GAChF,oBAAC,YAAY,SAAb;OAAqB,SAAA;OACnB,UAAA,oBAAC,kBAAD;QAAkB,KAAK,OAAO;QAAoB,YAAY,SAAS,gBAAgB;QACpF,UAAA,SAAS,iBAAiB;OACX,CAAA;MACC,CAAA,CACL;KAElB,CAAA,IAAA;IAEC;GACJ,CAAA,GAAA,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;IAGL,OAAO,OAAO,UAAU,YAAY,KAAA,IAAY,OAAO;IACvD,QAAQ,OAAO;IACf,SAAQ;IAEP,UAAA,OAAO;GACI,CAAA,IAEd,oBAAC,cAAD;IACE,KAAK,CAAC,OAAO,YAAY,WAAW,OAAO,cAAc;IACzD,SAAS,OAAO;IAChB,MAAK;IACL,OAAO,OAAO;IACd,SAAQ;IACR,aAAY;IAEX,UAAA,OAAO;GACI,CAAA,EAEf;EACF,CAAA,CAAA;;AAET,CAAC;AAED,eAAe,cAAc"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const noteCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "iconBar" | "message" | "messageList" | "iconWrapper" | "messageBlock" | "actionArea" | "actionAreaList", {
|
|
1
|
+
declare const noteCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "collapsible" | "root" | "iconBar" | "message" | "messageList" | "iconWrapper" | "messageBlock" | "collapsibleContent" | "collapsibleTrigger" | "actionArea" | "actionAreaList", {
|
|
2
2
|
status: {
|
|
3
3
|
ai: {
|
|
4
4
|
iconBar: {
|
|
@@ -41,6 +41,9 @@ var noteCardSlotRecipe = defineSlotRecipe({
|
|
|
41
41
|
"messageList",
|
|
42
42
|
"title",
|
|
43
43
|
"message",
|
|
44
|
+
"collapsible",
|
|
45
|
+
"collapsibleContent",
|
|
46
|
+
"collapsibleTrigger",
|
|
44
47
|
"actionArea",
|
|
45
48
|
"actionAreaList"
|
|
46
49
|
],
|
|
@@ -102,6 +105,27 @@ var noteCardSlotRecipe = defineSlotRecipe({
|
|
|
102
105
|
textStyle: "body/md/regular",
|
|
103
106
|
color: "text/body"
|
|
104
107
|
},
|
|
108
|
+
collapsible: {
|
|
109
|
+
display: "flex",
|
|
110
|
+
flexDirection: "column",
|
|
111
|
+
gap: "4",
|
|
112
|
+
width: "100%"
|
|
113
|
+
},
|
|
114
|
+
collapsibleContent: {
|
|
115
|
+
overflow: "hidden",
|
|
116
|
+
_open: {
|
|
117
|
+
animationName: "expand-height, fade-in",
|
|
118
|
+
animationDuration: "moderate"
|
|
119
|
+
},
|
|
120
|
+
_closed: {
|
|
121
|
+
animationName: "collapse-height, fade-out",
|
|
122
|
+
animationDuration: "moderate"
|
|
123
|
+
}
|
|
124
|
+
},
|
|
125
|
+
collapsibleTrigger: {
|
|
126
|
+
alignSelf: "flex-start",
|
|
127
|
+
marginBlockStart: "4"
|
|
128
|
+
},
|
|
105
129
|
actionArea: { flexShrink: 0 },
|
|
106
130
|
actionAreaList: { alignSelf: { tablet: "flex-start" } }
|
|
107
131
|
},
|
|
@@ -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 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"}
|
|
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 'collapsible',\n 'collapsibleContent',\n 'collapsibleTrigger',\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 collapsible: {\n display: 'flex',\n flexDirection: 'column',\n gap: '4',\n width: '100%',\n },\n collapsibleContent: {\n overflow: 'hidden',\n _open: {\n animationName: 'expand-height, fade-in',\n animationDuration: 'moderate',\n },\n _closed: {\n animationName: 'collapse-height, fade-out',\n animationDuration: 'moderate',\n },\n },\n collapsibleTrigger: {\n alignSelf: 'flex-start',\n marginBlockStart: '4',\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;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,aAAa;GACX,SAAS;GACT,eAAe;GACf,KAAK;GACL,OAAO;EACT;EACA,oBAAoB;GAClB,UAAU;GACV,OAAO;IACL,eAAe;IACf,mBAAmB;GACrB;GACA,SAAS;IACP,eAAe;IACf,mBAAmB;GACrB;EACF;EACA,oBAAoB;GAClB,WAAW;GACX,kBAAkB;EACpB;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"}
|
|
@@ -1184,7 +1184,7 @@ declare const slotRecipes: {
|
|
|
1184
1184
|
};
|
|
1185
1185
|
};
|
|
1186
1186
|
}>;
|
|
1187
|
-
noteCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "iconBar" | "message" | "messageList" | "iconWrapper" | "messageBlock" | "actionArea" | "actionAreaList", {
|
|
1187
|
+
noteCard: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "collapsible" | "root" | "iconBar" | "message" | "messageList" | "iconWrapper" | "messageBlock" | "collapsibleContent" | "collapsibleTrigger" | "actionArea" | "actionAreaList", {
|
|
1188
1188
|
status: {
|
|
1189
1189
|
ai: {
|
|
1190
1190
|
iconBar: {
|