@bitrise/bitkit-v2 0.3.117 → 0.3.118

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.
Files changed (18) hide show
  1. package/dist/components/BitkitAlert/BitkitAlert.d.ts +21 -0
  2. package/dist/components/BitkitAlert/BitkitAlert.js +63 -0
  3. package/dist/components/index.d.ts +1 -1
  4. package/dist/main.js +30 -30
  5. package/dist/theme/semantic-tokens/semanticColors.js +25 -13
  6. package/dist/theme/slot-recipes/Alert.recipe.d.ts +9 -46
  7. package/dist/theme/slot-recipes/Alert.recipe.js +38 -81
  8. package/dist/theme/slot-recipes/Card.recipe.d.ts +1 -1
  9. package/dist/theme/slot-recipes/Checkbox.recipe.d.ts +1 -1
  10. package/dist/theme/slot-recipes/EmptyState.recipe.d.ts +1 -1
  11. package/dist/theme/slot-recipes/ExpandableCard.recipe.d.ts +1 -1
  12. package/dist/theme/slot-recipes/Select.recipe.d.ts +1 -1
  13. package/dist/theme/slot-recipes/Switch.recipe.d.ts +1 -1
  14. package/dist/theme/slot-recipes/Tabs.recipe.d.ts +1 -1
  15. package/dist/theme/slot-recipes/index.d.ts +16 -53
  16. package/package.json +4 -4
  17. package/dist/components/BitkitNotification/BitkitNotification.d.ts +0 -18
  18. package/dist/components/BitkitNotification/BitkitNotification.js +0 -51
package/dist/components/BitkitAlert/BitkitAlert.d.ts ADDED
@@ -0,0 +1,21 @@
1
+ import { AlertRootProps } from '@chakra-ui/react/alert';
2
+ import { JSX } from 'react';
3
+ export type AlertVariants = 'ai' | 'critical' | 'info' | 'progress' | 'success' | 'warning';
4
+ export declare const BUTTON_COLORS_MAP: Record<AlertVariants, string>;
5
+ export declare const ICONS_MAP: Record<AlertVariants, JSX.Element>;
6
+ export type ActionProps = {
7
+ href?: string;
8
+ label: string;
9
+ onClick?: () => void;
10
+ target?: HTMLAnchorElement['target'];
11
+ };
12
+ export interface BitkitAlertProps extends AlertRootProps {
13
+ action?: ActionProps;
14
+ dismissible?: boolean;
15
+ messageText: string;
16
+ onClose?: () => void;
17
+ titleText?: string;
18
+ variant: AlertVariants;
19
+ }
20
+ declare const BitkitAlert: (props: BitkitAlertProps) => import("react/jsx-runtime").JSX.Element;
21
+ export default BitkitAlert;
package/dist/components/BitkitAlert/BitkitAlert.js ADDED
@@ -0,0 +1,63 @@
1
+ import { jsxs as n, jsx as r } from "react/jsx-runtime";
2
+ import { Alert as t } from "@chakra-ui/react/alert";
3
+ import { Spinner as f } from "@chakra-ui/react/spinner";
4
+ import g from "../../icons/24x24/IconCheck24.js";
5
+ import d from "../../icons/24x24/IconErrorCircleFilled24.js";
6
+ import h from "../../icons/24x24/IconInfoCircle24.js";
7
+ import C from "../../icons/24x24/IconSparkleFilled24.js";
8
+ import I from "../../icons/24x24/IconWarning24.js";
9
+ import { rem as k } from "../../theme/themeUtils.js";
10
+ import u from "../BitkitCloseButton/BitkitCloseButton.js";
11
+ import S from "../BitkitColorButton/BitkitColorButton.js";
12
+ const l = {
13
+ ai: "indigo",
14
+ critical: "red",
15
+ info: "blue",
16
+ progress: "purple",
17
+ success: "green",
18
+ warning: "yellow"
19
+ }, B = {
20
+ ai: /* @__PURE__ */ r(C, {}),
21
+ critical: /* @__PURE__ */ r(d, {}),
22
+ info: /* @__PURE__ */ r(h, {}),
23
+ progress: /* @__PURE__ */ r(f, { width: "20", height: "20", margin: "2" }),
24
+ success: /* @__PURE__ */ r(g, {}),
25
+ warning: /* @__PURE__ */ r(I, {})
26
+ }, M = (c) => {
27
+ const { action: i, dismissible: s, messageText: a, onClose: m, titleText: e, variant: o, ...p } = c;
28
+ return /* @__PURE__ */ n(t.Root, { variant: o, ...p, children: [
29
+ /* @__PURE__ */ r(t.Indicator, { asChild: o !== "progress", children: B[o] }),
30
+ /* @__PURE__ */ n(t.Content, { children: [
31
+ e && /* @__PURE__ */ r(t.Title, { children: e }),
32
+ /* @__PURE__ */ r(t.Description, { children: a })
33
+ ] }),
34
+ !!i && /* @__PURE__ */ r(
35
+ S,
36
+ {
37
+ as: i.href ? "a" : "button",
38
+ colorPalette: l[o],
39
+ ...i.href && { href: i.href, target: i.target },
40
+ onClick: i.onClick,
41
+ marginInlineStart: "16",
42
+ marginInlineEnd: "12",
43
+ whiteSpace: "nowrap",
44
+ children: i.label
45
+ }
46
+ ),
47
+ !!s && /* @__PURE__ */ r(
48
+ u,
49
+ {
50
+ alignSelf: "flex-start",
51
+ marginBlockStart: k(7),
52
+ size: "sm",
53
+ onClick: m,
54
+ colorPalette: l[o]
55
+ }
56
+ )
57
+ ] });
58
+ };
59
+ export {
60
+ l as BUTTON_COLORS_MAP,
61
+ B as ICONS_MAP,
62
+ M as default
63
+ };
package/dist/components/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  export { default as BitkitActionBar, type BitkitActionBarProps } from './BitkitActionBar/BitkitActionBar';
2
+ export { default as BitkitAlert, type BitkitAlertProps } from './BitkitAlert/BitkitAlert';
2
3
  export { default as BitkitAvatar, type BitkitAvatarProps } from './BitkitAvatar/BitkitAvatar';
3
4
  export { default as BitkitBadge, type BitkitBadgeProps } from './BitkitBadge/BitkitBadge';
4
5
  export { default as BitkitButton, type BitkitButtonProps } from './BitkitButton/BitkitButton';
@@ -13,7 +14,6 @@ export { default as BitkitExpandableCard, type BitkitExpandableCardProps, } from
13
14
  export { default as BitkitField, type BitkitFieldProps } from './BitkitField/BitkitField';
14
15
  export { default as BitkitInteractiveTooltip, type BitkitInteractiveTooltipProps, } from './BitkitInteractiveTooltip/BitkitInteractiveTooltip';
15
16
  export { default as BitkitNativeSelect, type BitkitNativeSelectProps } from './BitkitNativeSelect/BitkitNativeSelect';
16
- export { default as BitkitNotification, type BitkitNotificationProps } from './BitkitNotification/BitkitNotification';
17
17
  export { default as BitkitNumberInput, type BitkitNumberInputProps } from './BitkitNumberInput/BitkitNumberInput';
18
18
  export { default as BitkitSelect, type BitkitSelectProps } from './BitkitSelect/BitkitSelect';
19
19
  export { default as BitkitSelectMenu, type BitkitSelectMenuProps } from './BitkitSelectMenu/BitkitSelectMenu';
package/dist/main.js CHANGED
@@ -1,21 +1,21 @@
1
1
  import { default as r } from "./providers/BitkitProvider.js";
2
2
  import { default as a } from "./theme/index.js";
3
3
  import { default as l } from "./components/BitkitActionBar/BitkitActionBar.js";
4
- import { default as s } from "./components/BitkitAvatar/BitkitAvatar.js";
5
- import { default as c } from "./components/BitkitBadge/BitkitBadge.js";
6
- import { default as p } from "./components/BitkitButton/BitkitButton.js";
7
- import { default as x } from "./components/BitkitCard/BitkitCard.js";
8
- import { default as i } from "./components/BitkitCheckbox/BitkitCheckbox.js";
9
- import { default as h } from "./components/BitkitCheckboxGroup/BitkitCheckboxGroup.js";
10
- import { default as k } from "./components/BitkitCloseButton/BitkitCloseButton.js";
11
- import { default as w } from "./components/BitkitColorButton/BitkitColorButton.js";
12
- import { default as b } from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
13
- import { default as F } from "./components/BitkitEmptyState/BitkitEmptyState.js";
14
- import { default as P } from "./components/BitkitExpandableCard/BitkitExpandableCard.js";
15
- import { default as y } from "./components/BitkitField/BitkitField.js";
16
- import { default as T } from "./components/BitkitInteractiveTooltip/BitkitInteractiveTooltip.js";
17
- import { default as L } from "./components/BitkitNativeSelect/BitkitNativeSelect.js";
18
- import { default as W } from "./components/BitkitNotification/BitkitNotification.js";
4
+ import { default as s } from "./components/BitkitAlert/BitkitAlert.js";
5
+ import { default as c } from "./components/BitkitAvatar/BitkitAvatar.js";
6
+ import { default as p } from "./components/BitkitBadge/BitkitBadge.js";
7
+ import { default as x } from "./components/BitkitButton/BitkitButton.js";
8
+ import { default as i } from "./components/BitkitCard/BitkitCard.js";
9
+ import { default as h } from "./components/BitkitCheckbox/BitkitCheckbox.js";
10
+ import { default as k } from "./components/BitkitCheckboxGroup/BitkitCheckboxGroup.js";
11
+ import { default as w } from "./components/BitkitCloseButton/BitkitCloseButton.js";
12
+ import { default as b } from "./components/BitkitColorButton/BitkitColorButton.js";
13
+ import { default as F } from "./components/BitkitDefinitionTooltip/BitkitDefinitionTooltip.js";
14
+ import { default as P } from "./components/BitkitEmptyState/BitkitEmptyState.js";
15
+ import { default as y } from "./components/BitkitExpandableCard/BitkitExpandableCard.js";
16
+ import { default as T } from "./components/BitkitField/BitkitField.js";
17
+ import { default as L } from "./components/BitkitInteractiveTooltip/BitkitInteractiveTooltip.js";
18
+ import { default as W } from "./components/BitkitNativeSelect/BitkitNativeSelect.js";
19
19
  import { default as U } from "./components/BitkitNumberInput/BitkitNumberInput.js";
20
20
  import { default as O } from "./components/BitkitSelect/BitkitSelect.js";
21
21
  import { default as z } from "./components/BitkitSelectMenu/BitkitSelectMenu.js";
@@ -565,21 +565,21 @@ import { default as q1 } from "./icons/24x24/IconXcode24.js";
565
565
  import { default as $1 } from "./icons/24x24/IconXTwitter24.js";
566
566
  export {
567
567
  l as BitkitActionBar,
568
- s as BitkitAvatar,
569
- c as BitkitBadge,
570
- p as BitkitButton,
571
- x as BitkitCard,
572
- i as BitkitCheckbox,
573
- h as BitkitCheckboxGroup,
574
- k as BitkitCloseButton,
575
- w as BitkitColorButton,
576
- b as BitkitDefinitionTooltip,
577
- F as BitkitEmptyState,
578
- P as BitkitExpandableCard,
579
- y as BitkitField,
580
- T as BitkitInteractiveTooltip,
581
- L as BitkitNativeSelect,
582
- W as BitkitNotification,
568
+ s as BitkitAlert,
569
+ c as BitkitAvatar,
570
+ p as BitkitBadge,
571
+ x as BitkitButton,
572
+ i as BitkitCard,
573
+ h as BitkitCheckbox,
574
+ k as BitkitCheckboxGroup,
575
+ w as BitkitCloseButton,
576
+ b as BitkitColorButton,
577
+ F as BitkitDefinitionTooltip,
578
+ P as BitkitEmptyState,
579
+ y as BitkitExpandableCard,
580
+ T as BitkitField,
581
+ L as BitkitInteractiveTooltip,
582
+ W as BitkitNativeSelect,
583
583
  U as BitkitNumberInput,
584
584
  r as BitkitProvider,
585
585
  O as BitkitSelect,
package/dist/theme/semantic-tokens/semanticColors.js CHANGED
@@ -624,22 +624,34 @@ const r = l.colors(
624
624
  },
625
625
  "ai-gradient": {
626
626
  base: {
627
- value: "linear-gradient(90deg, {colors.sys.purple} 0%, {colors.sys.indigo} 50%, {colors.sys.blue} 100%)"
627
+ value: {
628
+ _light: "linear-gradient(90deg, {colors.sys.purple} 0%, {colors.sys.indigo} 50%, {colors.sys.blue} 100%)"
629
+ }
628
630
  },
629
631
  bold: {
630
- value: "linear-gradient(90deg, {colors.sys.purple.bold} 0%, {colors.sys.indigo.bold} 50%, {colors.sys.blue.bold} 100%)"
632
+ value: {
633
+ _light: "linear-gradient(90deg, {colors.sys.purple.bold} 0%, {colors.sys.indigo.bold} 50%, {colors.sys.blue.bold} 100%)"
634
+ }
631
635
  },
632
- muted: {
633
- value: "linear-gradient(90deg, {colors.sys.purple.muted} 0%, {colors.sys.indigo.muted} 50%, {colors.sys.blue.muted} 100%)"
636
+ minimal: {
637
+ value: {
638
+ _light: "linear-gradient(90deg, {colors.sys.purple.minimal} 0%, {colors.sys.indigo.minimal} 50%, {colors.sys.blue.minimal} 100%)"
639
+ }
634
640
  },
635
641
  moderate: {
636
- value: "linear-gradient(90deg, {colors.sys.purple.moderate} 0%, {colors.sys.indigo.moderate} 50%, {colors.sys.blue.moderate} 100%)"
642
+ value: {
643
+ _light: "linear-gradient(90deg, {colors.sys.purple.moderate} 0%, {colors.sys.indigo.moderate} 50%, {colors.sys.blue.moderate} 100%)"
644
+ }
637
645
  },
638
- subtle: {
639
- value: "linear-gradient(90deg, {colors.sys.purple.subtle} 0%, {colors.sys.indigo.subtle} 50%, {colors.sys.blue.subtle} 100%)"
646
+ muted: {
647
+ value: {
648
+ _light: "linear-gradient(90deg, {colors.sys.purple.muted} 0%, {colors.sys.indigo.muted} 50%, {colors.sys.blue.muted} 100%)"
649
+ }
640
650
  },
641
- minimal: {
642
- value: "linear-gradient(90deg, {colors.sys.purple.minimal} 0%, {colors.sys.indigo.minimal} 50%, {colors.sys.blue.minimal} 100%)"
651
+ subtle: {
652
+ value: {
653
+ _light: "linear-gradient(90deg, {colors.sys.purple.subtle} 0%, {colors.sys.indigo.subtle} 50%, {colors.sys.blue.subtle} 100%)"
654
+ }
643
655
  }
644
656
  }
645
657
  },
@@ -1666,24 +1678,24 @@ const r = l.colors(
1666
1678
  },
1667
1679
  "minimal-vertical": {
1668
1680
  value: {
1669
- _light: "linear-gradient(180deg, rgba({colors.sys.purple.minimal}, 1) 0%, rgba({colors.sys.indigo.minimal}, 1) 50%, rgba({colors.sys.blue.minimal}, 1) 100%)"
1681
+ _light: "linear-gradient(180deg, {colors.sys.purple.minimal} 0%, {colors.sys.indigo.minimal} 50%, {colors.sys.blue.minimal} 100%)"
1670
1682
  }
1671
1683
  }
1672
1684
  },
1673
1685
  border: {
1674
1686
  regular: {
1675
1687
  value: {
1676
- _light: "linear-gradient(135deg, rgba({colors.sys.purple.subtle}, 1) 0%, rgba({colors.sys.indigo.subtle}, 1) 50%, rgba({colors.sys.blue.subtle}, 1) 100%)"
1688
+ _light: "linear-gradient(135deg, {colors.sys.purple.subtle} 0%, {colors.sys.indigo.subtle} 50%, {colors.sys.blue.subtle} 100%)"
1677
1689
  }
1678
1690
  },
1679
1691
  minimal: {
1680
1692
  value: {
1681
- _light: "linear-gradient(135deg, rgba({colors.sys.purple.minimal}, 1) 0%, rgba({colors.sys.indigo.minimal}, 1) 50%, rgba({colors.sys.blue.minimal}, 1) 100%)"
1693
+ _light: "linear-gradient(135deg, {colors.sys.purple.minimal} 0%, {colors.sys.indigo.minimal} 50%, {colors.sys.blue.minimal} 100%)"
1682
1694
  }
1683
1695
  },
1684
1696
  strong: {
1685
1697
  value: {
1686
- _light: "linear-gradient(135deg, rgba({colors.sys.purple.muted}, 1) 0%, rgba({colors.sys.indigo.muted}, 1) 50%, rgba({colors.sys.blue.muted}, 1) 100%)"
1698
+ _light: "linear-gradient(135deg, {colors.sys.purple.muted} 0%, {colors.sys.indigo.muted} 50%, {colors.sys.blue.muted} 100%)"
1687
1699
  }
1688
1700
  }
1689
1701
  }
package/dist/theme/slot-recipes/Alert.recipe.d.ts CHANGED
@@ -1,101 +1,64 @@
1
- declare const alertSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator" | "actionable" | "contentBox", {
2
- dismissible: {
3
- true: {
4
- actionable: {
5
- mr: "4";
6
- };
7
- };
8
- };
1
+ declare const alertSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
9
2
  variant: {
10
3
  ai: {
11
4
  root: {
12
- backgroundColor: "status/ai/bg";
13
- borderColor: "status/ai/border";
5
+ border: "1px solid transparent";
6
+ background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box";
7
+ color: "status/ai/text";
14
8
  };
15
9
  indicator: {
16
10
  color: "status/ai/icon";
17
11
  };
18
- title: {
19
- color: "status/ai/text";
20
- };
21
- description: {
22
- color: "status/ai/text";
23
- };
24
12
  };
25
13
  critical: {
26
14
  root: {
27
15
  backgroundColor: "status/critical/bg";
28
16
  borderColor: "status/critical/border";
17
+ color: "status/critical/text";
29
18
  };
30
19
  indicator: {
31
20
  color: "status/critical/icon";
32
21
  };
33
- title: {
34
- color: "status/critical/text";
35
- };
36
- description: {
37
- color: "status/critical/text";
38
- };
39
22
  };
40
23
  info: {
41
24
  root: {
42
25
  backgroundColor: "status/info/bg";
43
26
  borderColor: "status/info/border";
27
+ color: "status/info/text";
44
28
  };
45
29
  indicator: {
46
30
  color: "status/info/icon";
47
31
  };
48
- title: {
49
- color: "status/info/text";
50
- };
51
- description: {
52
- color: "status/info/text";
53
- };
54
32
  };
55
33
  progress: {
56
34
  root: {
57
35
  backgroundColor: "status/progress/bg";
58
36
  borderColor: "status/progress/border";
37
+ color: "status/progress/text";
59
38
  };
60
39
  indicator: {
61
40
  color: "status/progress/icon";
62
41
  };
63
- title: {
64
- color: "status/progress/text";
65
- };
66
- description: {
67
- color: "status/progress/text";
68
- };
69
42
  };
70
43
  success: {
71
44
  root: {
72
45
  backgroundColor: "status/success/bg";
73
46
  borderColor: "status/success/border";
47
+ color: "status/success/text";
74
48
  };
75
49
  indicator: {
76
50
  color: "status/success/icon";
77
51
  };
78
- title: {
79
- color: "status/success/text";
80
- };
81
- description: {
82
- color: "status/success/text";
83
- };
84
52
  };
85
53
  warning: {
86
54
  root: {
87
55
  backgroundColor: "status/warning/bg";
88
56
  borderColor: "status/warning/border";
57
+ color: "status/warning/text";
89
58
  };
90
59
  indicator: {
91
60
  color: "status/warning/icon";
92
61
  };
93
- title: {
94
- color: "status/warning/text";
95
- };
96
- description: {
97
- color: "status/warning/text";
98
- };
99
62
  };
100
63
  };
101
64
  }>;
package/dist/theme/slot-recipes/Alert.recipe.js CHANGED
@@ -1,143 +1,100 @@
1
1
  import { alertAnatomy as t } from "@chakra-ui/react/anatomy";
2
- import { defineSlotRecipe as o } from "@chakra-ui/react/styled-system";
3
- const i = o({
2
+ import { defineSlotRecipe as r } from "@chakra-ui/react/styled-system";
3
+ import { rem as o } from "../themeUtils.js";
4
+ const e = r({
4
5
  className: "alert",
5
- slots: [...t.keys(), "actionable", "contentBox"],
6
+ slots: t.keys(),
6
7
  base: {
7
- actionable: {
8
- alignSelf: "center",
9
- flexGrow: 0,
10
- flexShrink: 0,
11
- mr: "8"
12
- },
13
- content: {
14
- display: "flex",
15
- justifyContent: "space-between",
16
- alignItems: "flex-start",
17
- gap: "8",
18
- padding: "8",
19
- flex: "1",
20
- width: "100%"
21
- },
22
- contentBox: {
23
- flex: "1",
24
- padding: "4px 8px 4px 4px"
25
- },
26
- description: {
27
- textStyle: "comp/notification/message"
28
- },
29
- indicator: {
30
- paddingTop: "4"
31
- },
32
8
  root: {
33
9
  display: "flex",
34
- alignItems: "flex-start",
10
+ alignItems: "center",
35
11
  border: "1px solid",
36
12
  borderRadius: "8",
13
+ paddingInlineStart: o(11),
14
+ paddingInlineEnd: o(7),
37
15
  width: "100%"
38
16
  },
17
+ indicator: {
18
+ alignSelf: "flex-start",
19
+ marginBlock: o(11),
20
+ marginInlineEnd: "8",
21
+ width: "24",
22
+ height: "24"
23
+ },
24
+ content: {
25
+ paddingBlock: o(11),
26
+ flex: "1"
27
+ },
39
28
  title: {
40
29
  textStyle: "comp/notification/title",
41
- marginBottom: "4"
30
+ "& + *": {
31
+ marginBlockStart: "4"
32
+ }
33
+ },
34
+ description: {
35
+ textStyle: "comp/notification/message"
42
36
  }
43
37
  },
44
38
  variants: {
45
- dismissible: {
46
- true: {
47
- actionable: {
48
- mr: "4"
49
- }
50
- }
51
- },
52
39
  variant: {
53
40
  ai: {
54
41
  root: {
55
- backgroundColor: "status/ai/bg",
56
- borderColor: "status/ai/border"
42
+ border: "1px solid transparent",
43
+ background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box",
44
+ color: "status/ai/text"
57
45
  },
58
46
  indicator: {
59
47
  color: "status/ai/icon"
60
- },
61
- title: {
62
- color: "status/ai/text"
63
- },
64
- description: {
65
- color: "status/ai/text"
66
48
  }
67
49
  },
68
50
  critical: {
69
51
  root: {
70
52
  backgroundColor: "status/critical/bg",
71
- borderColor: "status/critical/border"
53
+ borderColor: "status/critical/border",
54
+ color: "status/critical/text"
72
55
  },
73
56
  indicator: {
74
57
  color: "status/critical/icon"
75
- },
76
- title: {
77
- color: "status/critical/text"
78
- },
79
- description: {
80
- color: "status/critical/text"
81
58
  }
82
59
  },
83
60
  info: {
84
61
  root: {
85
62
  backgroundColor: "status/info/bg",
86
- borderColor: "status/info/border"
63
+ borderColor: "status/info/border",
64
+ color: "status/info/text"
87
65
  },
88
66
  indicator: {
89
67
  color: "status/info/icon"
90
- },
91
- title: {
92
- color: "status/info/text"
93
- },
94
- description: {
95
- color: "status/info/text"
96
68
  }
97
69
  },
98
70
  progress: {
99
71
  root: {
100
72
  backgroundColor: "status/progress/bg",
101
- borderColor: "status/progress/border"
73
+ borderColor: "status/progress/border",
74
+ color: "status/progress/text"
102
75
  },
103
76
  indicator: {
104
77
  color: "status/progress/icon"
105
- },
106
- title: {
107
- color: "status/progress/text"
108
- },
109
- description: {
110
- color: "status/progress/text"
111
78
  }
112
79
  },
113
80
  success: {
114
81
  root: {
115
82
  backgroundColor: "status/success/bg",
116
- borderColor: "status/success/border"
83
+ borderColor: "status/success/border",
84
+ color: "status/success/text"
117
85
  },
118
86
  indicator: {
119
87
  color: "status/success/icon"
120
- },
121
- title: {
122
- color: "status/success/text"
123
- },
124
- description: {
125
- color: "status/success/text"
126
88
  }
127
89
  },
128
90
  warning: {
129
91
  root: {
130
92
  backgroundColor: "status/warning/bg",
131
- borderColor: "status/warning/border"
93
+ borderColor: "status/warning/border",
94
+ color: "status/warning/text"
132
95
  },
133
96
  indicator: {
134
97
  color: "status/warning/icon"
135
- },
136
- title: {
137
- color: "status/warning/text"
138
- },
139
- description: {
140
- color: "status/warning/text"
141
98
  }
142
99
  }
143
100
  }
@@ -147,5 +104,5 @@ const i = o({
147
104
  }
148
105
  });
149
106
  export {
150
- i as default
107
+ e as default
151
108
  };
package/dist/theme/slot-recipes/Card.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description", {
1
+ declare const cardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "description" | "root", {
2
2
  elevation: {
3
3
  true: {
4
4
  root: {
package/dist/theme/slot-recipes/Checkbox.recipe.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const checkboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "group" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "group" | "control" | "indicator">>;
1
+ declare const checkboxSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "indicator" | "group" | "control">>;
2
2
  export default checkboxSlotRecipe;
package/dist/theme/slot-recipes/EmptyState.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
1
+ declare const emptyStateSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
2
2
  colorScheme: {
3
3
  white: {
4
4
  root: {
package/dist/theme/slot-recipes/ExpandableCard.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "secdText" | "suffix", {
1
+ declare const expandableCardSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "description" | "root" | "collapsible" | "secdText" | "suffix", {
2
2
  size: {
3
3
  md: {
4
4
  header: {
package/dist/theme/slot-recipes/Select.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "list" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
1
+ export declare const selectSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "control" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
2
2
  size: {
3
3
  md: {
4
4
  item: {
package/dist/theme/slot-recipes/Switch.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const switchSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
1
+ declare const switchSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
2
2
  size: {
3
3
  sm: {
4
4
  root: {
package/dist/theme/slot-recipes/Tabs.recipe.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "list" | "indicator" | "contentGroup", {
1
+ declare const tabsSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "indicator" | "list" | "contentGroup", {
2
2
  variant: {
3
3
  line: {
4
4
  list: {
package/dist/theme/slot-recipes/index.d.ts CHANGED
@@ -184,7 +184,7 @@ declare const slotRecipes: {
184
184
  rounded: {};
185
185
  };
186
186
  }>;
187
- card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "root" | "description", {
187
+ card: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "description" | "root", {
188
188
  elevation: {
189
189
  true: {
190
190
  root: {
@@ -217,8 +217,8 @@ declare const slotRecipes: {
217
217
  };
218
218
  };
219
219
  }>;
220
- checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "group" | "control" | "indicator", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "group" | "control" | "indicator">>;
221
- emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator", {
220
+ checkbox: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "group" | "control", import('@chakra-ui/react').SlotRecipeVariantRecord<"label" | "root" | "indicator" | "group" | "control">>;
221
+ emptyState: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
222
222
  colorScheme: {
223
223
  white: {
224
224
  root: {
@@ -232,7 +232,7 @@ declare const slotRecipes: {
232
232
  };
233
233
  };
234
234
  }>;
235
- expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "root" | "description" | "collapsible" | "secdText" | "suffix", {
235
+ expandableCard: import('@chakra-ui/react').SlotRecipeDefinition<"body" | "footer" | "header" | "title" | "icon" | "description" | "root" | "collapsible" | "secdText" | "suffix", {
236
236
  size: {
237
237
  md: {
238
238
  header: {
@@ -275,104 +275,67 @@ declare const slotRecipes: {
275
275
  };
276
276
  };
277
277
  }>;
278
- alert: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "root" | "description" | "indicator" | "actionable" | "contentBox", {
279
- dismissible: {
280
- true: {
281
- actionable: {
282
- mr: "4";
283
- };
284
- };
285
- };
278
+ alert: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "title" | "description" | "root" | "indicator", {
286
279
  variant: {
287
280
  ai: {
288
281
  root: {
289
- backgroundColor: "status/ai/bg";
290
- borderColor: "status/ai/border";
282
+ border: "1px solid transparent";
283
+ background: "{colors.status.ai.bg} padding-box, {colors.status.ai.border} border-box";
284
+ color: "status/ai/text";
291
285
  };
292
286
  indicator: {
293
287
  color: "status/ai/icon";
294
288
  };
295
- title: {
296
- color: "status/ai/text";
297
- };
298
- description: {
299
- color: "status/ai/text";
300
- };
301
289
  };
302
290
  critical: {
303
291
  root: {
304
292
  backgroundColor: "status/critical/bg";
305
293
  borderColor: "status/critical/border";
294
+ color: "status/critical/text";
306
295
  };
307
296
  indicator: {
308
297
  color: "status/critical/icon";
309
298
  };
310
- title: {
311
- color: "status/critical/text";
312
- };
313
- description: {
314
- color: "status/critical/text";
315
- };
316
299
  };
317
300
  info: {
318
301
  root: {
319
302
  backgroundColor: "status/info/bg";
320
303
  borderColor: "status/info/border";
304
+ color: "status/info/text";
321
305
  };
322
306
  indicator: {
323
307
  color: "status/info/icon";
324
308
  };
325
- title: {
326
- color: "status/info/text";
327
- };
328
- description: {
329
- color: "status/info/text";
330
- };
331
309
  };
332
310
  progress: {
333
311
  root: {
334
312
  backgroundColor: "status/progress/bg";
335
313
  borderColor: "status/progress/border";
314
+ color: "status/progress/text";
336
315
  };
337
316
  indicator: {
338
317
  color: "status/progress/icon";
339
318
  };
340
- title: {
341
- color: "status/progress/text";
342
- };
343
- description: {
344
- color: "status/progress/text";
345
- };
346
319
  };
347
320
  success: {
348
321
  root: {
349
322
  backgroundColor: "status/success/bg";
350
323
  borderColor: "status/success/border";
324
+ color: "status/success/text";
351
325
  };
352
326
  indicator: {
353
327
  color: "status/success/icon";
354
328
  };
355
- title: {
356
- color: "status/success/text";
357
- };
358
- description: {
359
- color: "status/success/text";
360
- };
361
329
  };
362
330
  warning: {
363
331
  root: {
364
332
  backgroundColor: "status/warning/bg";
365
333
  borderColor: "status/warning/border";
334
+ color: "status/warning/text";
366
335
  };
367
336
  indicator: {
368
337
  color: "status/warning/icon";
369
338
  };
370
- title: {
371
- color: "status/warning/text";
372
- };
373
- description: {
374
- color: "status/warning/text";
375
- };
376
339
  };
377
340
  };
378
341
  }>;
@@ -392,7 +355,7 @@ declare const slotRecipes: {
392
355
  };
393
356
  };
394
357
  }>;
395
- select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "list" | "control" | "indicator" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
358
+ select: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "label" | "trigger" | "positioner" | "root" | "indicator" | "list" | "control" | "valueText" | "clearTrigger" | "item" | "itemText" | "itemIndicator" | "itemGroup" | "itemGroupLabel" | "indicatorGroup" | "searchInputGroup" | "searchInput", {
396
359
  size: {
397
360
  md: {
398
361
  item: {
@@ -424,7 +387,7 @@ declare const slotRecipes: {
424
387
  lg: {};
425
388
  };
426
389
  }>;
427
- switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "control" | "indicator" | "thumb", {
390
+ switch: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "indicator" | "control" | "thumb", {
428
391
  size: {
429
392
  sm: {
430
393
  root: {
@@ -454,7 +417,7 @@ declare const slotRecipes: {
454
417
  };
455
418
  };
456
419
  }>;
457
- tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "list" | "indicator" | "contentGroup", {
420
+ tabs: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "trigger" | "root" | "indicator" | "list" | "contentGroup", {
458
421
  variant: {
459
422
  line: {
460
423
  list: {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.117",
4
+ "version": "0.3.118",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",
@@ -60,8 +60,8 @@
60
60
  "@figma-export/output-components-as-svg": "^6.2.4",
61
61
  "@figma-export/transform-svg-with-svgo": "^6.2.4",
62
62
  "@google-cloud/storage": "^7.19.0",
63
- "@storybook/addon-docs": "10.2.10",
64
- "@storybook/react-vite": "10.2.10",
63
+ "@storybook/addon-docs": "10.2.11",
64
+ "@storybook/react-vite": "10.2.11",
65
65
  "@svgr/plugin-jsx": "^8.1.0",
66
66
  "@types/node": "^24.10.13",
67
67
  "@types/react": "^19.2.14",
@@ -72,7 +72,7 @@
72
72
  "react": "^19.2.4",
73
73
  "react-dom": "^19.2.4",
74
74
  "release-it": "^19.2.4",
75
- "storybook": "10.2.10",
75
+ "storybook": "10.2.11",
76
76
  "tsx": "^4.21.0",
77
77
  "typescript": "^5.9.3",
78
78
  "vite": "^7.3.1",
package/dist/components/BitkitNotification/BitkitNotification.d.ts DELETED
@@ -1,18 +0,0 @@
1
- import { AlertRootProps } from '@chakra-ui/react/alert';
2
- export type NotificationVariants = 'ai' | 'critical' | 'info' | 'progress' | 'success' | 'warning';
3
- export type ActionProps = {
4
- label: string;
5
- href?: string;
6
- target?: string;
7
- onClick?: () => void;
8
- };
9
- export interface BitkitNotificationProps extends AlertRootProps {
10
- actionable?: ActionProps;
11
- dismissable?: boolean;
12
- messageText: string;
13
- onClose?: () => void;
14
- titleText?: string;
15
- variant: NotificationVariants;
16
- }
17
- declare const BitkitNotification: (props: BitkitNotificationProps) => import("react/jsx-runtime").JSX.Element;
18
- export default BitkitNotification;
package/dist/components/BitkitNotification/BitkitNotification.js DELETED
@@ -1,51 +0,0 @@
1
- import { jsx as o, jsxs as l } from "react/jsx-runtime";
2
- import { Alert as e } from "@chakra-ui/react/alert";
3
- import { Box as d } from "@chakra-ui/react/box";
4
- import { Spinner as h } from "@chakra-ui/react/spinner";
5
- import { useSlotRecipe as u } from "@chakra-ui/react/styled-system";
6
- import C from "../../icons/24x24/IconCheck24.js";
7
- import g from "../../icons/24x24/IconErrorCircleFilled24.js";
8
- import k from "../../icons/24x24/IconInfoCircle24.js";
9
- import B from "../../icons/24x24/IconSparkleFilled24.js";
10
- import I from "../../icons/24x24/IconWarning24.js";
11
- import x from "../BitkitCloseButton/BitkitCloseButton.js";
12
- import b from "../BitkitColorButton/BitkitColorButton.js";
13
- const s = {
14
- ai: "turquoise",
15
- critical: "red",
16
- info: "blue",
17
- progress: "purple",
18
- success: "green",
19
- warning: "yellow"
20
- }, S = {
21
- ai: /* @__PURE__ */ o(B, {}),
22
- critical: /* @__PURE__ */ o(g, {}),
23
- info: /* @__PURE__ */ o(k, {}),
24
- progress: /* @__PURE__ */ o(h, {}),
25
- success: /* @__PURE__ */ o(C, {}),
26
- warning: /* @__PURE__ */ o(I, {})
27
- }, v = (a) => {
28
- const { actionable: r, dismissible: n, messageText: m, onClose: p, titleText: c, variant: t, ...f } = a, i = u({ key: "alert" })({ variant: t, dismissible: n });
29
- return /* @__PURE__ */ o(e.Root, { variant: t, ...f, children: /* @__PURE__ */ l(e.Content, { children: [
30
- /* @__PURE__ */ o(e.Indicator, { css: i.indicator, children: S[t] }),
31
- /* @__PURE__ */ l(d, { css: i.contentBox, children: [
32
- c && /* @__PURE__ */ o(e.Title, { children: c }),
33
- /* @__PURE__ */ o(e.Description, { children: m })
34
- ] }),
35
- !!r && /* @__PURE__ */ o(
36
- b,
37
- {
38
- as: r.href ? "a" : "button",
39
- colorPalette: s[t],
40
- css: i.actionable,
41
- ...r.href && { href: r.href, target: r.target },
42
- onClick: r.onClick,
43
- children: r.label
44
- }
45
- ),
46
- !!n && /* @__PURE__ */ o(x, { size: "sm", onClick: p, colorPalette: s[t] })
47
- ] }) });
48
- };
49
- export {
50
- v as default
51
- };