@bitrise/bitkit-v2 0.3.403-beta.2607 → 0.3.403-beta.2614
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/BitkitToast/BitkitToaster.js +4 -1
- package/dist/components/BitkitToast/BitkitToaster.js.map +1 -1
- package/dist/theme/slot-recipes/Toast.recipe.d.ts +8 -0
- package/dist/theme/slot-recipes/Toast.recipe.js +19 -12
- package/dist/theme/slot-recipes/Toast.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +8 -0
- package/package.json +1 -1
|
@@ -16,7 +16,10 @@ var BitkitToaster = () => {
|
|
|
16
16
|
style: { zIndex },
|
|
17
17
|
children: (toast) => {
|
|
18
18
|
const variant = toast.type;
|
|
19
|
-
const styles = toastRecipe({
|
|
19
|
+
const styles = toastRecipe({
|
|
20
|
+
closable: toast.closable,
|
|
21
|
+
variant
|
|
22
|
+
});
|
|
20
23
|
const IconComponent = ICON_COMPONENTS_MAP[variant];
|
|
21
24
|
return /* @__PURE__ */ jsxs(Toast.Root, {
|
|
22
25
|
variant,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitToaster.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToaster.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe, useToken } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Toast, Toaster } from '@chakra-ui/react/toast';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from '../common/notificationMaps';\nimport { type BitkitToastVariant, toaster } from './BitkitToast';\n\nconst BitkitToaster = () => {\n const toastRecipe = useSlotRecipe({ key: 'toast' });\n const [zIndex] = useToken('zIndex', 'toast');\n\n return (\n <Toaster toaster={toaster} style={{ zIndex }}>\n {(toast) => {\n const variant = toast.type as BitkitToastVariant;\n const styles = toastRecipe({ variant });\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n return (\n <Toast.Root variant={variant} {...toast.meta?.dataAttributes}>\n <IconComponent css={styles.icon} />\n <Box css={styles.content}>\n {!!toast.title && <Toast.Title>{toast.title}</Toast.Title>}\n <Toast.Description>{toast.description}</Toast.Description>\n {!!toast.meta?.action &&\n (toast.meta.action.href !== undefined ? (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n href={toast.meta.action.href}\n isExternal={toast.meta.action.target === '_blank'}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n target={toast.meta.action.target}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ) : (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ))}\n {!!toast.meta?.timestamp && <Text css={styles.timestamp}>{toast.meta.timestamp}</Text>}\n </Box>\n {toast.closable && (\n <Toast.CloseTrigger asChild>\n <BitkitCloseButton\n aria-label=\"Dismiss notification\"\n colorVariant={BUTTON_COLORS_MAP[variant]}\n size=\"sm\"\n tooltipText=\"Dismiss\"\n />\n </Toast.CloseTrigger>\n )}\n </Toast.Root>\n );\n }}\n </Toaster>\n );\n};\n\nexport default BitkitToaster;\n"],"mappings":";;;;;;;;;;AAUA,IAAM,sBAAsB;CAC1B,MAAM,cAAc,cAAc,EAAE,KAAK,QAAQ,CAAC;CAClD,MAAM,CAAC,UAAU,SAAS,UAAU,OAAO;CAE3C,OACE,oBAAC,SAAD;EAAkB;EAAS,OAAO,EAAE,OAAO;EACvC,WAAA,UAAU;GACV,MAAM,UAAU,MAAM;GACtB,MAAM,SAAS,YAAY,
|
|
1
|
+
{"version":3,"file":"BitkitToaster.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToaster.tsx"],"sourcesContent":["import { Box } from '@chakra-ui/react/box';\nimport { useSlotRecipe, useToken } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { Toast, Toaster } from '@chakra-ui/react/toast';\n\nimport BitkitCloseButton from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton from '../BitkitColorButton/BitkitColorButton';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from '../common/notificationMaps';\nimport { type BitkitToastVariant, toaster } from './BitkitToast';\n\nconst BitkitToaster = () => {\n const toastRecipe = useSlotRecipe({ key: 'toast' });\n const [zIndex] = useToken('zIndex', 'toast');\n\n return (\n <Toaster toaster={toaster} style={{ zIndex }}>\n {(toast) => {\n const variant = toast.type as BitkitToastVariant;\n const styles = toastRecipe({ closable: toast.closable, variant });\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n return (\n <Toast.Root variant={variant} {...toast.meta?.dataAttributes}>\n <IconComponent css={styles.icon} />\n <Box css={styles.content}>\n {!!toast.title && <Toast.Title>{toast.title}</Toast.Title>}\n <Toast.Description>{toast.description}</Toast.Description>\n {!!toast.meta?.action &&\n (toast.meta.action.href !== undefined ? (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n href={toast.meta.action.href}\n isExternal={toast.meta.action.target === '_blank'}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n target={toast.meta.action.target}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ) : (\n <BitkitColorButton\n colorVariant={BUTTON_COLORS_MAP[variant]}\n css={styles.actionTrigger}\n onClick={toast.meta.action.onClick}\n state={toast.meta.action.state}\n >\n {toast.meta.action.label}\n </BitkitColorButton>\n ))}\n {!!toast.meta?.timestamp && <Text css={styles.timestamp}>{toast.meta.timestamp}</Text>}\n </Box>\n {toast.closable && (\n <Toast.CloseTrigger asChild>\n <BitkitCloseButton\n aria-label=\"Dismiss notification\"\n colorVariant={BUTTON_COLORS_MAP[variant]}\n size=\"sm\"\n tooltipText=\"Dismiss\"\n />\n </Toast.CloseTrigger>\n )}\n </Toast.Root>\n );\n }}\n </Toaster>\n );\n};\n\nexport default BitkitToaster;\n"],"mappings":";;;;;;;;;;AAUA,IAAM,sBAAsB;CAC1B,MAAM,cAAc,cAAc,EAAE,KAAK,QAAQ,CAAC;CAClD,MAAM,CAAC,UAAU,SAAS,UAAU,OAAO;CAE3C,OACE,oBAAC,SAAD;EAAkB;EAAS,OAAO,EAAE,OAAO;EACvC,WAAA,UAAU;GACV,MAAM,UAAU,MAAM;GACtB,MAAM,SAAS,YAAY;IAAE,UAAU,MAAM;IAAU;GAAQ,CAAC;GAChE,MAAM,gBAAgB,oBAAoB;GAC1C,OACE,qBAAC,MAAM,MAAP;IAAqB;IAAS,GAAI,MAAM,MAAM;IAA9C,UAAA;KACE,oBAAC,eAAD,EAAe,KAAK,OAAO,KAAO,CAAA;KAClC,qBAAC,KAAD;MAAK,KAAK,OAAO;MAAjB,UAAA;OACG,CAAC,CAAC,MAAM,SAAS,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAM,MAAmB,CAAA;OACzD,oBAAC,MAAM,aAAP,EAAA,UAAoB,MAAM,YAA+B,CAAA;OACxD,CAAC,CAAC,MAAM,MAAM,WACZ,MAAM,KAAK,OAAO,SAAS,KAAA,IAC1B,oBAAC,mBAAD;QACE,cAAc,kBAAkB;QAChC,KAAK,OAAO;QACZ,MAAM,MAAM,KAAK,OAAO;QACxB,YAAY,MAAM,KAAK,OAAO,WAAW;QACzC,SAAS,MAAM,KAAK,OAAO;QAC3B,OAAO,MAAM,KAAK,OAAO;QACzB,QAAQ,MAAM,KAAK,OAAO;QAEzB,UAAA,MAAM,KAAK,OAAO;OACF,CAAA,IAEnB,oBAAC,mBAAD;QACE,cAAc,kBAAkB;QAChC,KAAK,OAAO;QACZ,SAAS,MAAM,KAAK,OAAO;QAC3B,OAAO,MAAM,KAAK,OAAO;QAExB,UAAA,MAAM,KAAK,OAAO;OACF,CAAA;OAEtB,CAAC,CAAC,MAAM,MAAM,aAAa,oBAAC,MAAD;QAAM,KAAK,OAAO;QAAY,UAAA,MAAM,KAAK;OAAgB,CAAA;MAClF;;KACJ,MAAM,YACL,oBAAC,MAAM,cAAP;MAAoB,SAAA;MAClB,UAAA,oBAAC,mBAAD;OACE,cAAW;OACX,cAAc,kBAAkB;OAChC,MAAK;OACL,aAAY;MACb,CAAA;KACiB,CAAA;IAEZ;;EAEhB;CACO,CAAA;AAEb"}
|
|
@@ -1,4 +1,12 @@
|
|
|
1
1
|
declare const toastSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "icon" | "root" | "closeTrigger" | "indicator" | "description" | "timestamp" | "actionTrigger", {
|
|
2
|
+
closable: {
|
|
3
|
+
true: {
|
|
4
|
+
content: {
|
|
5
|
+
paddingInlineEnd: "48";
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
false: {};
|
|
9
|
+
};
|
|
2
10
|
variant: {
|
|
3
11
|
[k: string]: {
|
|
4
12
|
icon: {
|
|
@@ -15,7 +15,8 @@ var toastSlotRecipe = defineSlotRecipe({
|
|
|
15
15
|
actionTrigger: { marginBlockStart: "16" },
|
|
16
16
|
content: {
|
|
17
17
|
flex: 1,
|
|
18
|
-
minWidth: 0
|
|
18
|
+
minWidth: 0,
|
|
19
|
+
paddingInlineEnd: "16"
|
|
19
20
|
},
|
|
20
21
|
description: {
|
|
21
22
|
paddingBlockStart: "2",
|
|
@@ -25,6 +26,7 @@ var toastSlotRecipe = defineSlotRecipe({
|
|
|
25
26
|
alignSelf: "flex-start",
|
|
26
27
|
flexShrink: 0,
|
|
27
28
|
height: "24",
|
|
29
|
+
marginInlineEnd: "8",
|
|
28
30
|
width: "24"
|
|
29
31
|
},
|
|
30
32
|
root: {
|
|
@@ -33,9 +35,8 @@ var toastSlotRecipe = defineSlotRecipe({
|
|
|
33
35
|
borderRadius: "8",
|
|
34
36
|
boxShadow: "elevation/lg",
|
|
35
37
|
display: "flex",
|
|
36
|
-
gap: "8",
|
|
37
38
|
paddingBlock: rem(15),
|
|
38
|
-
paddingInline:
|
|
39
|
+
paddingInline: rem(11),
|
|
39
40
|
position: "relative",
|
|
40
41
|
translate: "var(--x) var(--y)",
|
|
41
42
|
width: rem(480),
|
|
@@ -56,18 +57,24 @@ var toastSlotRecipe = defineSlotRecipe({
|
|
|
56
57
|
textStyle: "comp/notification/title"
|
|
57
58
|
},
|
|
58
59
|
closeTrigger: {
|
|
59
|
-
insetBlockStart:
|
|
60
|
-
insetInlineEnd:
|
|
60
|
+
insetBlockStart: rem(11),
|
|
61
|
+
insetInlineEnd: rem(11),
|
|
61
62
|
position: "absolute"
|
|
62
63
|
}
|
|
63
64
|
},
|
|
64
|
-
variants: {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
65
|
+
variants: {
|
|
66
|
+
closable: {
|
|
67
|
+
true: { content: { paddingInlineEnd: "48" } },
|
|
68
|
+
false: {}
|
|
69
|
+
},
|
|
70
|
+
variant: Object.fromEntries(NOTIFICATION_VARIANTS.map((v) => [v, {
|
|
71
|
+
icon: { color: ICONS_MAP[v] },
|
|
72
|
+
root: {
|
|
73
|
+
...ROOT_MAP[v],
|
|
74
|
+
color: TEXT_MAP[v]
|
|
75
|
+
}
|
|
76
|
+
}]))
|
|
77
|
+
},
|
|
71
78
|
defaultVariants: { variant: "info" }
|
|
72
79
|
});
|
|
73
80
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Toast.recipe.ts"],"sourcesContent":["import { toastAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst toastSlotRecipe = defineSlotRecipe({\n className: 'toast',\n slots: [...toastAnatomy.keys(), 'content', 'icon', 'timestamp'],\n base: {\n actionTrigger: {\n marginBlockStart: '16',\n },\n content: {\n flex: 1,\n minWidth: 0,\n },\n description: {\n paddingBlockStart: '2',\n textStyle: 'comp/notification/message',\n },\n icon: {\n alignSelf: 'flex-start',\n flexShrink: 0,\n height: '24',\n width: '24',\n },\n root: {\n alignItems: 'flex-start',\n border: '1px solid',\n borderRadius: '8',\n boxShadow: 'elevation/lg',\n display: 'flex',\n
|
|
1
|
+
{"version":3,"file":"Toast.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/Toast.recipe.ts"],"sourcesContent":["import { toastAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nimport { ICONS_MAP, NOTIFICATION_VARIANTS, ROOT_MAP, TEXT_MAP } from '../common/AlertAndToast.common';\nimport { rem } from '../themeUtils';\n\nconst toastSlotRecipe = defineSlotRecipe({\n className: 'toast',\n slots: [...toastAnatomy.keys(), 'content', 'icon', 'timestamp'],\n base: {\n actionTrigger: {\n marginBlockStart: '16',\n },\n content: {\n flex: 1,\n minWidth: 0,\n paddingInlineEnd: '16',\n },\n description: {\n paddingBlockStart: '2',\n textStyle: 'comp/notification/message',\n },\n icon: {\n alignSelf: 'flex-start',\n flexShrink: 0,\n height: '24',\n marginInlineEnd: '8',\n width: '24',\n },\n root: {\n alignItems: 'flex-start',\n border: '1px solid',\n borderRadius: '8',\n boxShadow: 'elevation/lg',\n display: 'flex',\n // `rem(15)`/`rem(11)` padding (not 16/12) lands the toast on the designed geometry once the\n // 1px border is added — Figma measures its padding from the frame edge, stroke included:\n // heights 56px message-only, 102px message + action, 116px title + message + timestamp,\n // 128px title + message + action, and 12px from the inline edges on both sides. Same\n // compensation as BitkitAlert's `rem(11)`.\n paddingBlock: rem(15),\n paddingInline: rem(11),\n position: 'relative',\n translate: 'var(--x) var(--y)',\n width: rem(480),\n willChange: 'translate, opacity, scale',\n transition: 'translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms',\n transitionTimingFunction: 'cubic-bezier(0.21, 1.02, 0.73, 1)',\n _closed: {\n transition: 'translate 400ms, scale 400ms, opacity 200ms',\n transitionTimingFunction: 'cubic-bezier(0.06, 0.71, 0.55, 1)',\n },\n },\n timestamp: {\n marginBlockStart: '16',\n textStyle: 'comp/notification/message',\n },\n title: {\n marginBlockEnd: '2',\n textStyle: 'comp/notification/title',\n },\n closeTrigger: {\n // Out of flow, as Figma models it: `closeButton-margin` spans the full toast height in\n // every variant with the button pinned at its top, so the toast's height comes from the\n // content alone. `rem(11)` for the same border compensation as the root padding — 12px\n // from the frame edge, which puts the 32px button at x436 y12 of the 480px frame.\n insetBlockStart: rem(11),\n insetInlineEnd: rem(11),\n position: 'absolute',\n },\n },\n variants: {\n // The out-of-flow close button reserves its own space: 48px = its 32px box plus the 16px\n // gutter Figma's `content-block` keeps after the text column. Without one the gutter is\n // the base 16px, which is what widens the text column from 376px to 408px.\n closable: {\n true: {\n content: {\n paddingInlineEnd: '48',\n },\n },\n false: {},\n },\n variant: Object.fromEntries(\n NOTIFICATION_VARIANTS.map((v) => [\n v,\n {\n icon: { color: ICONS_MAP[v] },\n root: { ...ROOT_MAP[v], color: TEXT_MAP[v] },\n },\n ]),\n ),\n },\n defaultVariants: {\n variant: 'info',\n },\n});\n\nexport default toastSlotRecipe;\n"],"mappings":";;;;;AAMA,IAAM,kBAAkB,iBAAiB;CACvC,WAAW;CACX,OAAO;EAAC,GAAG,aAAa,KAAK;EAAG;EAAW;EAAQ;CAAW;CAC9D,MAAM;EACJ,eAAe,EACb,kBAAkB,KACpB;EACA,SAAS;GACP,MAAM;GACN,UAAU;GACV,kBAAkB;EACpB;EACA,aAAa;GACX,mBAAmB;GACnB,WAAW;EACb;EACA,MAAM;GACJ,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,iBAAiB;GACjB,OAAO;EACT;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,WAAW;GACX,SAAS;GAMT,cAAc,IAAI,EAAE;GACpB,eAAe,IAAI,EAAE;GACrB,UAAU;GACV,WAAW;GACX,OAAO,IAAI,GAAG;GACd,YAAY;GACZ,YAAY;GACZ,0BAA0B;GAC1B,SAAS;IACP,YAAY;IACZ,0BAA0B;GAC5B;EACF;EACA,WAAW;GACT,kBAAkB;GAClB,WAAW;EACb;EACA,OAAO;GACL,gBAAgB;GAChB,WAAW;EACb;EACA,cAAc;GAKZ,iBAAiB,IAAI,EAAE;GACvB,gBAAgB,IAAI,EAAE;GACtB,UAAU;EACZ;CACF;CACA,UAAU;EAIR,UAAU;GACR,MAAM,EACJ,SAAS,EACP,kBAAkB,KACpB,EACF;GACA,OAAO,CAAC;EACV;EACA,SAAS,OAAO,YACd,sBAAsB,KAAK,MAAM,CAC/B,GACA;GACE,MAAM,EAAE,OAAO,UAAU,GAAG;GAC5B,MAAM;IAAE,GAAG,SAAS;IAAI,OAAO,SAAS;GAAG;EAC7C,CACF,CAAC,CACH;CACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
|
|
@@ -2637,6 +2637,14 @@ declare const slotRecipes: {
|
|
|
2637
2637
|
};
|
|
2638
2638
|
}>;
|
|
2639
2639
|
toast: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "icon" | "root" | "closeTrigger" | "indicator" | "description" | "timestamp" | "actionTrigger", {
|
|
2640
|
+
closable: {
|
|
2641
|
+
true: {
|
|
2642
|
+
content: {
|
|
2643
|
+
paddingInlineEnd: "48";
|
|
2644
|
+
};
|
|
2645
|
+
};
|
|
2646
|
+
false: {};
|
|
2647
|
+
};
|
|
2640
2648
|
variant: {
|
|
2641
2649
|
[k: string]: {
|
|
2642
2650
|
icon: {
|