@bitrise/bitkit-v2 0.3.177 → 0.3.179

package/dist/theme/common/AlertAndToast.common.js

@@ -0,0 +1,50 @@
+//#region lib/theme/common/AlertAndToast.common.ts
+var e = [
+	"ai",
+	"critical",
+	"info",
+	"progress",
+	"success",
+	"warning"
+], t = {
+	ai: {
+		border: "1px solid transparent",
+		background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box"
+	},
+	critical: {
+		backgroundColor: "status/critical/bg",
+		borderColor: "status/critical/border"
+	},
+	info: {
+		backgroundColor: "status/info/bg",
+		borderColor: "status/info/border"
+	},
+	progress: {
+		backgroundColor: "status/progress/bg",
+		borderColor: "status/progress/border"
+	},
+	success: {
+		backgroundColor: "status/success/bg",
+		borderColor: "status/success/border"
+	},
+	warning: {
+		backgroundColor: "status/warning/bg",
+		borderColor: "status/warning/border"
+	}
+}, n = {
+	ai: "status/ai/icon",
+	critical: "status/critical/icon",
+	info: "status/info/icon",
+	progress: "status/progress/icon",
+	success: "status/success/icon",
+	warning: "status/warning/icon"
+}, r = {
+	ai: "status/ai/text",
+	critical: "status/critical/text",
+	info: "status/info/text",
+	progress: "status/progress/text",
+	success: "status/success/text",
+	warning: "status/warning/text"
+};
+//#endregion
+export { n as ICONS_MAP, e as NOTIFICATION_VARIANTS, t as ROOT_MAP, r as TEXT_MAP };

package/dist/theme/slot-recipes/Alert.recipe.js

@@ -1,10 +1,11 @@
 import { rem as e } from "../themeUtils.js";
-import { defineSlotRecipe as t } from "@chakra-ui/react/styled-system";
-import { alertAnatomy as n } from "@chakra-ui/react/anatomy";
+import { ICONS_MAP as t, NOTIFICATION_VARIANTS as n, ROOT_MAP as r, TEXT_MAP as i } from "../common/AlertAndToast.common.js";
+import { defineSlotRecipe as a } from "@chakra-ui/react/styled-system";
+import { alertAnatomy as o } from "@chakra-ui/react/anatomy";
 //#region lib/theme/slot-recipes/Alert.recipe.ts
-var r = t({
+var s = a({
 	className: "alert",
-	slots: n.keys(),
+	slots: o.keys(),
 	base: {
 		root: {
 			display: "flex",
@@ -32,60 +33,17 @@ var r = t({
 		},
 		description: {
 			textStyle: "comp/notification/message",
-			"&:first-child": { marginBlockStart: "2" }
+			"&:first-of-type": { marginBlockStart: "2" }
 		}
 	},
-	variants: { variant: {
-		ai: {
-			root: {
-				border: "1px solid transparent",
-				background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box",
-				color: "status/ai/text"
-			},
-			indicator: { color: "status/ai/icon" }
-		},
-		critical: {
-			root: {
-				backgroundColor: "status/critical/bg",
-				borderColor: "status/critical/border",
-				color: "status/critical/text"
-			},
-			indicator: { color: "status/critical/icon" }
-		},
-		info: {
-			root: {
-				backgroundColor: "status/info/bg",
-				borderColor: "status/info/border",
-				color: "status/info/text"
-			},
-			indicator: { color: "status/info/icon" }
-		},
-		progress: {
-			root: {
-				backgroundColor: "status/progress/bg",
-				borderColor: "status/progress/border",
-				color: "status/progress/text"
-			},
-			indicator: { color: "status/progress/icon" }
-		},
-		success: {
-			root: {
-				backgroundColor: "status/success/bg",
-				borderColor: "status/success/border",
-				color: "status/success/text"
-			},
-			indicator: { color: "status/success/icon" }
+	variants: { variant: Object.fromEntries(n.map((e) => [e, {
+		root: {
+			...r[e],
+			color: i[e]
 		},
-		warning: {
-			root: {
-				backgroundColor: "status/warning/bg",
-				borderColor: "status/warning/border",
-				color: "status/warning/text"
-			},
-			indicator: { color: "status/warning/icon" }
-		}
-	} },
+		indicator: { color: t[e] }
+	}])) },
 	defaultVariants: { variant: "info" }
 });
 //#endregion
-export { r as default };
+export { s as default };

package/dist/theme/slot-recipes/Markdown.recipe.d.ts

@@ -0,0 +1,20 @@
+declare const markdownSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"blockquote" | "root", {
+    size: {
+        sm: {
+            root: {
+                textStyle: "body/sm/regular";
+            };
+        };
+        md: {
+            root: {
+                textStyle: "body/md/regular";
+            };
+        };
+        lg: {
+            root: {
+                textStyle: "body/lg/regular";
+            };
+        };
+    };
+}>;
+export default markdownSlotRecipe;

package/dist/theme/slot-recipes/Markdown.recipe.js

@@ -0,0 +1,24 @@
+import { defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
+//#region lib/theme/slot-recipes/Markdown.recipe.ts
+var t = e({
+	className: "markdown",
+	slots: ["root", "blockquote"],
+	base: {
+		root: { color: "text/body" },
+		blockquote: {
+			borderInlineStart: "2px solid",
+			borderColor: "border/regular",
+			paddingInlineStart: "16",
+			paddingBlock: "8",
+			color: "text/secondary"
+		}
+	},
+	variants: { size: {
+		sm: { root: { textStyle: "body/sm/regular" } },
+		md: { root: { textStyle: "body/md/regular" } },
+		lg: { root: { textStyle: "body/lg/regular" } }
+	} },
+	defaultVariants: { size: "md" }
+});
+//#endregion
+export { t as default };

package/dist/theme/slot-recipes/MarkdownCard.recipe.d.ts

@@ -0,0 +1,45 @@
+declare const markdownCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "body" | "footer" | "header" | "title" | "root" | "description" | "iconBar" | "gradient" | "footerButtons", {
+    status: {
+        info: {
+            iconBar: {
+                backgroundColor: "background/secondary";
+                borderColor: "border/regular";
+                color: "icon/secondary";
+            };
+            root: {
+                borderColor: "border/regular";
+            };
+        };
+        success: {
+            iconBar: {
+                backgroundColor: "status/success/bg";
+                borderColor: "status/success/border";
+                color: "status/success/icon";
+            };
+            root: {
+                borderColor: "status/success/border";
+            };
+        };
+        warning: {
+            iconBar: {
+                backgroundColor: "status/warning/bg";
+                borderColor: "status/warning/border";
+                color: "status/warning/icon";
+            };
+            root: {
+                borderColor: "status/warning/border";
+            };
+        };
+        critical: {
+            iconBar: {
+                backgroundColor: "status/critical/bg";
+                borderColor: "status/critical/border";
+                color: "status/critical/icon";
+            };
+            root: {
+                borderColor: "status/critical/border";
+            };
+        };
+    };
+}>;
+export default markdownCardSlotRecipe;

package/dist/theme/slot-recipes/MarkdownCard.recipe.js

@@ -0,0 +1,86 @@
+import { defineSlotRecipe as e } from "@chakra-ui/react/styled-system";
+import { cardAnatomy as t } from "@chakra-ui/react/anatomy";
+//#region lib/theme/slot-recipes/MarkdownCard.recipe.ts
+var n = e({
+	className: "markdown-card",
+	slots: [
+		...t.keys(),
+		"iconBar",
+		"content",
+		"gradient",
+		"footerButtons"
+	],
+	base: {
+		root: {
+			backgroundColor: "background/primary",
+			overflow: "hidden"
+		},
+		iconBar: {
+			display: "flex",
+			alignItems: "flex-start",
+			justifyContent: "center",
+			paddingInline: "8",
+			paddingBlock: "12",
+			flexShrink: 0,
+			borderInlineEnd: "1px solid"
+		},
+		content: {
+			flex: 1,
+			paddingInlineStart: "16",
+			paddingInlineEnd: "24",
+			paddingBlockStart: "24",
+			minWidth: 0,
+			position: "relative"
+		},
+		gradient: {
+			background: "linear-gradient(to top, {colors.background.primary} 12.5%, transparent)",
+			bottom: 0,
+			height: "128",
+			insetInline: 0,
+			pointerEvents: "none",
+			position: "absolute"
+		},
+		footerButtons: {
+			justifyContent: "flex-end",
+			paddingBlockEnd: "16",
+			paddingInlineEnd: "8"
+		}
+	},
+	variants: { status: {
+		info: {
+			iconBar: {
+				backgroundColor: "background/secondary",
+				borderColor: "border/regular",
+				color: "icon/secondary"
+			},
+			root: { borderColor: "border/regular" }
+		},
+		success: {
+			iconBar: {
+				backgroundColor: "status/success/bg",
+				borderColor: "status/success/border",
+				color: "status/success/icon"
+			},
+			root: { borderColor: "status/success/border" }
+		},
+		warning: {
+			iconBar: {
+				backgroundColor: "status/warning/bg",
+				borderColor: "status/warning/border",
+				color: "status/warning/icon"
+			},
+			root: { borderColor: "status/warning/border" }
+		},
+		critical: {
+			iconBar: {
+				backgroundColor: "status/critical/bg",
+				borderColor: "status/critical/border",
+				color: "status/critical/icon"
+			},
+			root: { borderColor: "status/critical/border" }
+		}
+	} },
+	defaultVariants: { status: "info" }
+});
+//#endregion
+export { n as default };

package/dist/theme/slot-recipes/Toast.recipe.js

@@ -0,0 +1,71 @@
+import { rem as e } from "../themeUtils.js";
+import { ICONS_MAP as t, NOTIFICATION_VARIANTS as n, ROOT_MAP as r, TEXT_MAP as i } from "../common/AlertAndToast.common.js";
+import { defineSlotRecipe as a } from "@chakra-ui/react/styled-system";
+import { toastAnatomy as o } from "@chakra-ui/react/anatomy";
+//#region lib/theme/slot-recipes/Toast.recipe.ts
+var s = a({
+	className: "toast",
+	slots: [
+		...o.keys(),
+		"content",
+		"icon",
+		"timestamp"
+	],
+	base: {
+		actionTrigger: { marginBlockStart: "16" },
+		content: {
+			flex: 1,
+			minWidth: 0
+		},
+		description: { textStyle: "comp/notification/message" },
+		icon: {
+			alignSelf: "flex-start",
+			flexShrink: 0,
+			height: "24",
+			width: "24"
+		},
+		root: {
+			alignItems: "flex-start",
+			border: "1px solid",
+			borderRadius: "8",
+			boxShadow: "elevation/lg",
+			display: "flex",
+			gap: "8",
+			paddingBlock: "16",
+			paddingInline: "12",
+			position: "relative",
+			translate: "var(--x) var(--y)",
+			width: e(480),
+			willChange: "translate, opacity, scale",
+			transition: "translate 400ms, scale 400ms, opacity 400ms, height 400ms, box-shadow 200ms",
+			transitionTimingFunction: "cubic-bezier(0.21, 1.02, 0.73, 1)",
+			_closed: {
+				transition: "translate 400ms, scale 400ms, opacity 200ms",
+				transitionTimingFunction: "cubic-bezier(0.06, 0.71, 0.55, 1)"
+			}
+		},
+		timestamp: {
+			marginBlockStart: "16",
+			textStyle: "comp/notification/message"
+		},
+		title: {
+			marginBlockEnd: "2",
+			textStyle: "comp/notification/title"
+		},
+		closeTrigger: {
+			insetBlockStart: "12",
+			insetInlineEnd: "12",
+			position: "absolute"
+		}
+	},
+	variants: { variant: Object.fromEntries(n.map((e) => [e, {
+		icon: { color: t[e] },
+		root: {
+			...r[e],
+			color: i[e]
+		}
+	}])) },
+	defaultVariants: { variant: "info" }
+});
+//#endregion
+export { s as default };

package/dist/theme/slot-recipes/index.js

@@ -22,22 +22,25 @@ import b from "./GroupHeading.recipe.js";
 import x from "./ImageCropper.recipe.js";
 import S from "./InlineLoading.recipe.js";
 import C from "./List.recipe.js";
-import w from "./Menu.recipe.js";
-import T from "./NativeSelect.recipe.js";
-import E from "./PaginationLoadMore.recipe.js";
-import D from "./RadioGroup.recipe.js";
-import O from "./Ribbon.recipe.js";
-import k from "./SectionHeading.recipe.js";
-import A from "./SegmentGroup.recipe.js";
-import j from "./SplitButton.recipe.js";
-import M from "./Switch.recipe.js";
-import N from "./Table.recipe.js";
-import P from "./Tabs.recipe.js";
-import F from "./Tag.recipe.js";
-import I from "./TagsInput.recipe.js";
-import L from "./Tooltip.recipe.js";
+import w from "./Markdown.recipe.js";
+import T from "./MarkdownCard.recipe.js";
+import E from "./Menu.recipe.js";
+import D from "./NativeSelect.recipe.js";
+import O from "./PaginationLoadMore.recipe.js";
+import k from "./RadioGroup.recipe.js";
+import A from "./Ribbon.recipe.js";
+import j from "./SectionHeading.recipe.js";
+import M from "./SegmentGroup.recipe.js";
+import N from "./SplitButton.recipe.js";
+import P from "./Switch.recipe.js";
+import F from "./Table.recipe.js";
+import I from "./Tabs.recipe.js";
+import L from "./Tag.recipe.js";
+import R from "./TagsInput.recipe.js";
+import z from "./Toast.recipe.js";
+import B from "./Tooltip.recipe.js";
 //#region lib/theme/slot-recipes/index.ts
-var R = {
+var V = {
 	accordion: t,
 	actionBar: n,
 	alert: r,
@@ -60,22 +63,25 @@ var R = {
 	imageCropper: x,
 	inlineLoading: S,
 	list: C,
-	menu: w,
-	nativeSelect: T,
+	markdown: w,
+	markdownCard: T,
+	menu: E,
+	nativeSelect: D,
 	numberInput: e,
-	paginationLoadMore: E,
-	radioGroup: D,
-	ribbon: O,
-	sectionHeading: k,
-	segmentGroup: A,
+	paginationLoadMore: O,
+	radioGroup: k,
+	ribbon: A,
+	sectionHeading: j,
+	segmentGroup: M,
 	select: f,
-	splitButton: j,
-	switch: M,
-	table: N,
-	tabs: P,
-	tag: F,
-	tagsInput: I,
-	tooltip: L
+	splitButton: N,
+	switch: P,
+	table: F,
+	tabs: I,
+	tag: L,
+	tagsInput: R,
+	toast: z,
+	tooltip: B
 };
 //#endregion
-export { R as default };
+export { V as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.177",
+  "version": "0.3.179",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",
@@ -85,7 +85,8 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fontsource-variable/figtree": "^5.2.10",
-    "@fontsource-variable/source-code-pro": "^5.2.7"
+    "@fontsource-variable/source-code-pro": "^5.2.7",
+    "react-markdown": "^10.1.0"
   },
   "publishConfig": {
     "access": "public"

package/dist/theme/slot-recipes/Alert.recipe.d.ts

@@ -1,65 +0,0 @@
-declare const alertSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
-    variant: {
-        ai: {
-            root: {
-                border: "1px solid transparent";
-                background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box";
-                color: "status/ai/text";
-            };
-            indicator: {
-                color: "status/ai/icon";
-            };
-        };
-        critical: {
-            root: {
-                backgroundColor: "status/critical/bg";
-                borderColor: "status/critical/border";
-                color: "status/critical/text";
-            };
-            indicator: {
-                color: "status/critical/icon";
-            };
-        };
-        info: {
-            root: {
-                backgroundColor: "status/info/bg";
-                borderColor: "status/info/border";
-                color: "status/info/text";
-            };
-            indicator: {
-                color: "status/info/icon";
-            };
-        };
-        progress: {
-            root: {
-                backgroundColor: "status/progress/bg";
-                borderColor: "status/progress/border";
-                color: "status/progress/text";
-            };
-            indicator: {
-                color: "status/progress/icon";
-            };
-        };
-        success: {
-            root: {
-                backgroundColor: "status/success/bg";
-                borderColor: "status/success/border";
-                color: "status/success/text";
-            };
-            indicator: {
-                color: "status/success/icon";
-            };
-        };
-        warning: {
-            root: {
-                backgroundColor: "status/warning/bg";
-                borderColor: "status/warning/border";
-                color: "status/warning/text";
-            };
-            indicator: {
-                color: "status/warning/icon";
-            };
-        };
-    };
-}>;
-export default alertSlotRecipe;