@bitrise/bitkit-v2 0.3.353 → 0.3.354

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.
@@ -1,5 +1,10 @@
1
1
  import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
2
2
  export interface BitkitCloseButtonProps extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {
3
+ /**
4
+ * Hover label for the button. Defaults to `aria-label` — set it when the accessible name is
5
+ * too long to read well as a tooltip.
6
+ */
7
+ tooltipText?: string;
3
8
  }
4
9
  declare const BitkitCloseButton: import('react').ForwardRefExoticComponent<BitkitCloseButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
5
10
  export default BitkitCloseButton;
@@ -5,11 +5,11 @@ import { forwardRef } from "react";
5
5
  import { jsx } from "react/jsx-runtime";
6
6
  //#region lib/components/BitkitCloseButton/BitkitCloseButton.tsx
7
7
  var BitkitCloseButton = forwardRef((props, ref) => {
8
- const { "aria-label": ariaLabel = "Close", size, colorVariant, css, ...rest } = props;
8
+ const { "aria-label": ariaLabel = "Close", size, colorVariant, css, tooltipText, ...rest } = props;
9
9
  const style = useRecipe({ key: "closeButton" });
10
10
  return /* @__PURE__ */ jsx(BitkitLabelTooltip, {
11
11
  disabled: rest.disabled,
12
- text: ariaLabel,
12
+ text: tooltipText ?? ariaLabel,
13
13
  children: /* @__PURE__ */ jsx(chakra.button, {
14
14
  ref,
15
15
  "aria-label": ariaLabel,
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n const { 'aria-label': ariaLabel = 'Close', size, colorVariant, css, ...rest } = props;\n\n const style = useRecipe({ key: 'closeButton' });\n\n return (\n <BitkitLabelTooltip disabled={rest.disabled} text={ariaLabel}>\n <chakra.button\n ref={ref}\n aria-label={ariaLabel}\n {...rest}\n css={[style({ size, colorVariant }), css]}\n color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n >\n <IconCross size={size === 'xs' ? '16' : '24'} />\n </chakra.button>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AASA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,MAAM,cAAc,KAAK,GAAG,SAAS;CAEhF,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM;EACjD,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,CAAC,MAAM;IAAE;IAAM;GAAa,CAAC,GAAG,GAAG;GACxC,OAAO,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;GAEvE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}
1
+ {"version":3,"file":"BitkitCloseButton.js","names":[],"sources":["../../../lib/components/BitkitCloseButton/BitkitCloseButton.tsx"],"sourcesContent":["import { chakra, type HTMLChakraProps, type RecipeProps, useRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconCross } from '../../icons';\nimport BitkitLabelTooltip from '../BitkitLabelTooltip/BitkitLabelTooltip';\n\nexport interface BitkitCloseButtonProps\n extends Omit<HTMLChakraProps<'button'>, 'colorPalette'>, RecipeProps<'closeButton'> {\n /**\n * Hover label for the button. Defaults to `aria-label` — set it when the accessible name is\n * too long to read well as a tooltip.\n */\n tooltipText?: string;\n}\n\nconst BitkitCloseButton = forwardRef<HTMLButtonElement, BitkitCloseButtonProps>((props, ref) => {\n const { 'aria-label': ariaLabel = 'Close', size, colorVariant, css, tooltipText, ...rest } = props;\n\n const style = useRecipe({ key: 'closeButton' });\n\n return (\n <BitkitLabelTooltip disabled={rest.disabled} text={tooltipText ?? ariaLabel}>\n <chakra.button\n ref={ref}\n aria-label={ariaLabel}\n {...rest}\n css={[style({ size, colorVariant }), css]}\n color={colorVariant === 'neutral' && !rest.disabled ? 'icon/primary' : undefined}\n >\n <IconCross size={size === 'xs' ? '16' : '24'} />\n </chakra.button>\n </BitkitLabelTooltip>\n );\n});\n\nBitkitCloseButton.displayName = 'BitkitCloseButton';\n\nexport default BitkitCloseButton;\n"],"mappings":";;;;;;AAeA,IAAM,oBAAoB,YAAuD,OAAO,QAAQ;CAC9F,MAAM,EAAE,cAAc,YAAY,SAAS,MAAM,cAAc,KAAK,aAAa,GAAG,SAAS;CAE7F,MAAM,QAAQ,UAAU,EAAE,KAAK,cAAc,CAAC;CAE9C,OACE,oBAAC,oBAAD;EAAoB,UAAU,KAAK;EAAU,MAAM,eAAe;EAChE,UAAA,oBAAC,OAAO,QAAR;GACO;GACL,cAAY;GACZ,GAAI;GACJ,KAAK,CAAC,MAAM;IAAE;IAAM;GAAa,CAAC,GAAG,GAAG;GACxC,OAAO,iBAAiB,aAAa,CAAC,KAAK,WAAW,iBAAiB,KAAA;GAEvE,UAAA,oBAAC,WAAD,EAAW,MAAM,SAAS,OAAO,OAAO,KAAO,CAAA;EAClC,CAAA;CACG,CAAA;AAExB,CAAC;AAED,kBAAkB,cAAc"}
@@ -3,15 +3,17 @@ import BitkitColorButton from "../BitkitColorButton/BitkitColorButton.js";
3
3
  import { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
4
4
  import { toaster } from "./BitkitToast.js";
5
5
  import { Box } from "@chakra-ui/react/box";
6
- import { useSlotRecipe } from "@chakra-ui/react/styled-system";
6
+ import { useSlotRecipe, useToken } from "@chakra-ui/react/styled-system";
7
7
  import { jsx, jsxs } from "react/jsx-runtime";
8
8
  import { Text } from "@chakra-ui/react/text";
9
9
  import { Toast, Toaster } from "@chakra-ui/react/toast";
10
10
  //#region lib/components/BitkitToast/BitkitToaster.tsx
11
11
  var BitkitToaster = () => {
12
12
  const toastRecipe = useSlotRecipe({ key: "toast" });
13
+ const [zIndex] = useToken("zIndex", "toast");
13
14
  return /* @__PURE__ */ jsx(Toaster, {
14
15
  toaster,
16
+ style: { zIndex },
15
17
  children: (toast) => {
16
18
  const variant = toast.type;
17
19
  const styles = toastRecipe({ variant });
@@ -51,8 +53,10 @@ var BitkitToaster = () => {
51
53
  toast.closable && /* @__PURE__ */ jsx(Toast.CloseTrigger, {
52
54
  asChild: true,
53
55
  children: /* @__PURE__ */ jsx(BitkitCloseButton, {
56
+ "aria-label": "Dismiss notification",
54
57
  colorVariant: BUTTON_COLORS_MAP[variant],
55
- size: "sm"
58
+ size: "sm",
59
+ tooltipText: "Dismiss"
56
60
  })
57
61
  })
58
62
  ]
@@ -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 } 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\n return (\n <Toaster toaster={toaster}>\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 colorVariant={BUTTON_COLORS_MAP[variant]} size=\"sm\" />\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;CAElD,OACE,oBAAC,SAAD;EAAkB;EACd,WAAA,UAAU;GACV,MAAM,UAAU,MAAM;GACtB,MAAM,SAAS,YAAY,EAAE,QAAQ,CAAC;GACtC,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;OAAmB,cAAc,kBAAkB;OAAU,MAAK;MAAM,CAAA;KACtD,CAAA;IAEZ;;EAEhB;CACO,CAAA;AAEb"}
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,EAAE,QAAQ,CAAC;GACtC,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"}
@@ -18,8 +18,8 @@ var toastSlotRecipe = defineSlotRecipe({
18
18
  minWidth: 0
19
19
  },
20
20
  description: {
21
- textStyle: "comp/notification/message",
22
- "&:first-child": { paddingBlockStart: "2" }
21
+ paddingBlockStart: "2",
22
+ textStyle: "comp/notification/message"
23
23
  },
24
24
  icon: {
25
25
  alignSelf: "flex-start",
@@ -34,7 +34,7 @@ var toastSlotRecipe = defineSlotRecipe({
34
34
  boxShadow: "elevation/lg",
35
35
  display: "flex",
36
36
  gap: "8",
37
- paddingBlock: "16",
37
+ paddingBlock: rem(15),
38
38
  paddingInline: "12",
39
39
  position: "relative",
40
40
  translate: "var(--x) var(--y)",
@@ -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 textStyle: 'comp/notification/message',\n '&:first-child': {\n paddingBlockStart: '2',\n },\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 gap: '8',\n paddingBlock: '16',\n paddingInline: '12',\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 insetBlockStart: '12',\n insetInlineEnd: '12',\n position: 'absolute',\n },\n },\n variants: {\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;EACZ;EACA,aAAa;GACX,WAAW;GACX,iBAAiB,EACf,mBAAmB,IACrB;EACF;EACA,MAAM;GACJ,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,OAAO;EACT;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,WAAW;GACX,SAAS;GACT,KAAK;GACL,cAAc;GACd,eAAe;GACf,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;GACZ,iBAAiB;GACjB,gBAAgB;GAChB,UAAU;EACZ;CACF;CACA,UAAU,EACR,SAAS,OAAO,YACd,sBAAsB,KAAK,MAAM,CAC/B,GACA;EACE,MAAM,EAAE,OAAO,UAAU,GAAG;EAC5B,MAAM;GAAE,GAAG,SAAS;GAAI,OAAO,SAAS;EAAG;CAC7C,CACF,CAAC,CACH,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
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 gap: '8',\n // `rem(15)` block padding (not 16) lands the toast on the designed heights once the 1px\n // border is added — Figma measures its 16px padding from the frame edge, stroke included:\n // 56px message-only, 102px message + action, 116px title + message + timestamp, 128px\n // title + message + action. Same compensation as BitkitAlert's `rem(11)`.\n paddingBlock: rem(15),\n paddingInline: '12',\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 insetBlockStart: '12',\n insetInlineEnd: '12',\n position: 'absolute',\n },\n },\n variants: {\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;EACZ;EACA,aAAa;GACX,mBAAmB;GACnB,WAAW;EACb;EACA,MAAM;GACJ,WAAW;GACX,YAAY;GACZ,QAAQ;GACR,OAAO;EACT;EACA,MAAM;GACJ,YAAY;GACZ,QAAQ;GACR,cAAc;GACd,WAAW;GACX,SAAS;GACT,KAAK;GAKL,cAAc,IAAI,EAAE;GACpB,eAAe;GACf,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;GACZ,iBAAiB;GACjB,gBAAgB;GAChB,UAAU;EACZ;CACF;CACA,UAAU,EACR,SAAS,OAAO,YACd,sBAAsB,KAAK,MAAM,CAC/B,GACA;EACE,MAAM,EAAE,OAAO,UAAU,GAAG;EAC5B,MAAM;GAAE,GAAG,SAAS;GAAI,OAAO,SAAS;EAAG;CAC7C,CACF,CAAC,CACH,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC"}
@@ -624,6 +624,9 @@ declare const tokens: {
624
624
  select: {
625
625
  value: number;
626
626
  };
627
+ toast: {
628
+ value: number;
629
+ };
627
630
  tooltip: {
628
631
  value: number;
629
632
  };
@@ -26,6 +26,9 @@ declare const zIndex: {
26
26
  select: {
27
27
  value: number;
28
28
  };
29
+ toast: {
30
+ value: number;
31
+ };
29
32
  tooltip: {
30
33
  value: number;
31
34
  };
@@ -10,6 +10,7 @@ var zIndex = defineTokens.zIndex({
10
10
  hide: { value: -1 },
11
11
  popover: { value: 1400 },
12
12
  select: { value: 1500 },
13
+ toast: { value: 1550 },
13
14
  tooltip: { value: 1600 }
14
15
  });
15
16
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"zIndex.js","names":[],"sources":["../../../lib/theme/tokens/zIndex.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nconst zIndex = defineTokens.zIndex({\n base: {\n value: 0,\n },\n dialog: {\n value: 1300,\n },\n dialogOverlay: {\n value: 1299,\n },\n fullDialog: {\n value: 1200,\n },\n fullDialogOverlay: {\n value: 1199,\n },\n header: {\n value: 1100,\n },\n hide: {\n value: -1,\n },\n popover: {\n value: 1400,\n },\n select: {\n value: 1500,\n },\n tooltip: {\n value: 1600,\n },\n});\n\nexport default zIndex;\n"],"mappings":";;AAEA,IAAM,SAAS,aAAa,OAAO;CACjC,MAAM,EACJ,OAAO,EACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,eAAe,EACb,OAAO,KACT;CACA,YAAY,EACV,OAAO,KACT;CACA,mBAAmB,EACjB,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,MAAM,EACJ,OAAO,GACT;CACA,SAAS,EACP,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,SAAS,EACP,OAAO,KACT;AACF,CAAC"}
1
+ {"version":3,"file":"zIndex.js","names":[],"sources":["../../../lib/theme/tokens/zIndex.ts"],"sourcesContent":["import { defineTokens } from '@chakra-ui/react/styled-system';\n\nconst zIndex = defineTokens.zIndex({\n base: {\n value: 0,\n },\n dialog: {\n value: 1300,\n },\n dialogOverlay: {\n value: 1299,\n },\n fullDialog: {\n value: 1200,\n },\n fullDialogOverlay: {\n value: 1199,\n },\n header: {\n value: 1100,\n },\n hide: {\n value: -1,\n },\n popover: {\n value: 1400,\n },\n select: {\n value: 1500,\n },\n toast: {\n value: 1550,\n },\n tooltip: {\n value: 1600,\n },\n});\n\nexport default zIndex;\n"],"mappings":";;AAEA,IAAM,SAAS,aAAa,OAAO;CACjC,MAAM,EACJ,OAAO,EACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,eAAe,EACb,OAAO,KACT;CACA,YAAY,EACV,OAAO,KACT;CACA,mBAAmB,EACjB,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,MAAM,EACJ,OAAO,GACT;CACA,SAAS,EACP,OAAO,KACT;CACA,QAAQ,EACN,OAAO,KACT;CACA,OAAO,EACL,OAAO,KACT;CACA,SAAS,EACP,OAAO,KACT;AACF,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.353",
4
+ "version": "0.3.354",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",