@bitrise/bitkit-v2 0.3.280-beta.1868 → 0.3.281-beta.1870

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.js +12 -30
  2. package/dist/components/BitkitAlert/BitkitAlert.js.map +1 -1
  3. package/dist/components/BitkitPromoBanner/BitkitPromoBanner.d.ts +1 -1
  4. package/dist/components/BitkitPromoBanner/BitkitPromoBanner.js +22 -33
  5. package/dist/components/BitkitPromoBanner/BitkitPromoBanner.js.map +1 -1
  6. package/dist/components/common/NotificationContent.d.ts +13 -0
  7. package/dist/components/common/NotificationContent.js +52 -0
  8. package/dist/components/common/NotificationContent.js.map +1 -0
  9. package/dist/theme/slot-recipes/QrCode.recipe.d.ts +15 -0
  10. package/dist/theme/slot-recipes/QrCode.recipe.js +38 -0
  11. package/dist/theme/slot-recipes/QrCode.recipe.js.map +1 -0
  12. package/dist/theme/slot-recipes/index.d.ts +14 -0
  13. package/dist/theme/slot-recipes/index.js +2 -0
  14. package/dist/theme/slot-recipes/index.js.map +1 -1
  15. package/package.json +1 -1
  16. package/dist/components/common/NotificationButtons.d.ts +0 -11
  17. package/dist/components/common/NotificationButtons.js +0 -30
  18. package/dist/components/common/NotificationButtons.js.map +0 -1
package/dist/components/BitkitAlert/BitkitAlert.js CHANGED
@@ -1,7 +1,5 @@
1
- import { rem } from "../../theme/themeUtils.js";
2
- import { NotificationActionButton, NotificationCloseButton } from "../common/NotificationButtons.js";
1
+ import { NotificationContent } from "../common/NotificationContent.js";
3
2
  import { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP } from "../common/notificationMaps.js";
4
- import { Box } from "@chakra-ui/react/box";
5
3
  import { jsx, jsxs } from "react/jsx-runtime";
6
4
  import { Alert } from "@chakra-ui/react/alert";
7
5
  //#region lib/components/BitkitAlert/BitkitAlert.tsx
@@ -11,33 +9,17 @@ var BitkitAlert = (props) => {
11
9
  return /* @__PURE__ */ jsxs(Alert.Root, {
12
10
  variant,
13
11
  ...rest,
14
- children: [
15
- /* @__PURE__ */ jsx(Alert.Indicator, {
16
- asChild: variant !== "progress",
17
- children: /* @__PURE__ */ jsx(IconComponent, {})
18
- }),
19
- /* @__PURE__ */ jsxs(Box, {
20
- display: "flex",
21
- flex: "1",
22
- minWidth: "0",
23
- flexWrap: "wrap",
24
- alignItems: "center",
25
- columnGap: "16",
26
- rowGap: rem(11),
27
- children: [/* @__PURE__ */ jsxs(Alert.Content, {
28
- minWidth: "0",
29
- flex: `1 1 ${rem(240)}`,
30
- children: [titleText && /* @__PURE__ */ jsx(Alert.Title, { children: titleText }), /* @__PURE__ */ jsx(Alert.Description, { children: messageText })]
31
- }), !!action && /* @__PURE__ */ jsx(NotificationActionButton, {
32
- action,
33
- colorVariant: BUTTON_COLORS_MAP[variant]
34
- })]
35
- }),
36
- !!dismissible && /* @__PURE__ */ jsx(NotificationCloseButton, {
37
- colorVariant: BUTTON_COLORS_MAP[variant],
38
- onClose
39
- })
40
- ]
12
+ children: [/* @__PURE__ */ jsx(Alert.Indicator, {
13
+ asChild: variant !== "progress",
14
+ children: /* @__PURE__ */ jsx(IconComponent, {})
15
+ }), /* @__PURE__ */ jsx(NotificationContent, {
16
+ action,
17
+ colorVariant: BUTTON_COLORS_MAP[variant],
18
+ dismissible,
19
+ messageText,
20
+ onClose,
21
+ titleText
22
+ })]
41
23
  });
42
24
  };
43
25
  //#endregion
package/dist/components/BitkitAlert/BitkitAlert.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { rem } from '../../theme/themeUtils';\nimport { NotificationActionButton, NotificationCloseButton } from '../common/NotificationButtons';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n action?: ActionProps;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n titleText?: ReactNode;\n variant: AlertVariants;\n}\n\nconst BitkitAlert = (props: BitkitAlertProps) => {\n const { action, dismissible, messageText, onClose, titleText, variant, ...rest } = props;\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n\n return (\n <Alert.Root variant={variant} {...rest}>\n <Alert.Indicator asChild={variant !== 'progress'}>\n <IconComponent />\n </Alert.Indicator>\n {/* content + action share a wrapping row so the action drops below the text on narrow widths */}\n <Box display=\"flex\" flex=\"1\" minWidth=\"0\" flexWrap=\"wrap\" alignItems=\"center\" columnGap=\"16\" rowGap={rem(11)}>\n <Alert.Content minWidth=\"0\" flex={`1 1 ${rem(240)}`}>\n {titleText && <Alert.Title>{titleText}</Alert.Title>}\n <Alert.Description>{messageText}</Alert.Description>\n </Alert.Content>\n {!!action && <NotificationActionButton action={action} colorVariant={BUTTON_COLORS_MAP[variant]} />}\n </Box>\n {!!dismissible && <NotificationCloseButton colorVariant={BUTTON_COLORS_MAP[variant]} onClose={onClose} />}\n </Alert.Root>\n );\n};\n\nexport default BitkitAlert;\n"],"mappings":";;;;;;;AAqBA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,QAAQ,aAAa,aAAa,SAAS,WAAW,SAAS,GAAG,SAAS;CACnF,MAAM,gBAAgB,oBAAoB;CAE1C,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAS,GAAI;YAAlC;GACE,oBAAC,MAAM,WAAP;IAAiB,SAAS,YAAY;cACpC,oBAAC,eAAD,CAAgB,CAAA;GACD,CAAA;GAEjB,qBAAC,KAAD;IAAK,SAAQ;IAAO,MAAK;IAAI,UAAS;IAAI,UAAS;IAAO,YAAW;IAAS,WAAU;IAAK,QAAQ,IAAI,EAAE;cAA3G,CACE,qBAAC,MAAM,SAAP;KAAe,UAAS;KAAI,MAAM,OAAO,IAAI,GAAG;eAAhD,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC;QACd,CAAC,CAAC,UAAU,oBAAC,0BAAD;KAAkC;KAAQ,cAAc,kBAAkB;IAAW,CAAA,CAC/F;;GACJ,CAAC,CAAC,eAAe,oBAAC,yBAAD;IAAyB,cAAc,kBAAkB;IAAmB;GAAU,CAAA;EAC9F;;AAEhB"}
1
+ {"version":3,"file":"BitkitAlert.js","names":[],"sources":["../../../lib/components/BitkitAlert/BitkitAlert.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { NotificationContent } from '../common/NotificationContent';\nimport { BUTTON_COLORS_MAP, ICON_COMPONENTS_MAP, type NotificationAction } from '../common/notificationMaps';\n\nexport type AlertVariants = NotificationVariant;\nexport type ActionProps = NotificationAction;\n\nexport interface BitkitAlertProps extends AlertRootProps {\n action?: ActionProps;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n titleText?: ReactNode;\n variant: AlertVariants;\n}\n\nconst BitkitAlert = (props: BitkitAlertProps) => {\n const { action, dismissible, messageText, onClose, titleText, variant, ...rest } = props;\n const IconComponent = ICON_COMPONENTS_MAP[variant];\n\n return (\n <Alert.Root variant={variant} {...rest}>\n <Alert.Indicator asChild={variant !== 'progress'}>\n <IconComponent />\n </Alert.Indicator>\n <NotificationContent\n action={action}\n colorVariant={BUTTON_COLORS_MAP[variant]}\n dismissible={dismissible}\n messageText={messageText}\n onClose={onClose}\n titleText={titleText}\n />\n </Alert.Root>\n );\n};\n\nexport default BitkitAlert;\n"],"mappings":";;;;;AAmBA,IAAM,eAAe,UAA4B;CAC/C,MAAM,EAAE,QAAQ,aAAa,aAAa,SAAS,WAAW,SAAS,GAAG,SAAS;CACnF,MAAM,gBAAgB,oBAAoB;CAE1C,OACE,qBAAC,MAAM,MAAP;EAAqB;EAAS,GAAI;YAAlC,CACE,oBAAC,MAAM,WAAP;GAAiB,SAAS,YAAY;aACpC,oBAAC,eAAD,CAAgB,CAAA;EACD,CAAA,GACjB,oBAAC,qBAAD;GACU;GACR,cAAc,kBAAkB;GACnB;GACA;GACJ;GACE;EACZ,CAAA,CACS;;AAEhB"}
package/dist/components/BitkitPromoBanner/BitkitPromoBanner.d.ts CHANGED
@@ -5,7 +5,7 @@ export type PromoBannerAction = NotificationAction;
5
5
  export interface BitkitPromoBannerProps extends Omit<AlertRootProps, 'title' | 'variant'> {
6
6
  actionable?: PromoBannerAction;
7
7
  dismissible?: boolean;
8
- /** Custom leading illustration (an SVG element). Defaults to the built-in mascot. */
8
+ /** Custom leading illustration. Defaults to the built-in mascot. */
9
9
  illustration?: ReactNode;
10
10
  message: ReactNode;
11
11
  onClose?: () => void;
package/dist/components/BitkitPromoBanner/BitkitPromoBanner.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { rem } from "../../theme/themeUtils.js";
2
- import { NotificationActionButton, NotificationCloseButton } from "../common/NotificationButtons.js";
2
+ import { NotificationContent } from "../common/NotificationContent.js";
3
3
  import { BUTTON_COLORS_MAP } from "../common/notificationMaps.js";
4
4
  import ForwardRef from "./mascot.js";
5
5
  import { Box } from "@chakra-ui/react/box";
@@ -15,38 +15,27 @@ var BitkitPromoBanner = (props) => {
15
15
  border: "none",
16
16
  css: { "& .alert__title + *": { marginBlockStart: 0 } },
17
17
  ...rest,
18
- children: [
19
- /* @__PURE__ */ jsx(Icon, {
20
- asChild: true,
21
- width: rem(72),
22
- height: rem(68),
23
- marginInlineEnd: "12",
24
- marginBlock: rem(-11),
25
- marginInlineStart: rem(-12),
26
- children: illustration ?? /* @__PURE__ */ jsx(ForwardRef, {})
27
- }),
28
- /* @__PURE__ */ jsxs(Box, {
29
- display: "flex",
30
- flex: "1",
31
- minWidth: "0",
32
- flexWrap: "wrap",
33
- alignItems: "center",
34
- columnGap: "16",
35
- rowGap: rem(11),
36
- children: [/* @__PURE__ */ jsxs(Alert.Content, {
37
- minWidth: "0",
38
- flex: `1 1 ${rem(240)}`,
39
- children: [/* @__PURE__ */ jsx(Alert.Title, { children: title }), /* @__PURE__ */ jsx(Alert.Description, { children: message })]
40
- }), !!actionable && /* @__PURE__ */ jsx(NotificationActionButton, {
41
- action: actionable,
42
- colorVariant: PROMO_BANNER_COLOR
43
- })]
44
- }),
45
- !!dismissible && /* @__PURE__ */ jsx(NotificationCloseButton, {
46
- colorVariant: PROMO_BANNER_COLOR,
47
- onClose
48
- })
49
- ]
18
+ children: [illustration ? /* @__PURE__ */ jsx(Box, {
19
+ flexShrink: 0,
20
+ marginInlineEnd: "12",
21
+ "aria-hidden": true,
22
+ children: illustration
23
+ }) : /* @__PURE__ */ jsx(Icon, {
24
+ asChild: true,
25
+ width: rem(72),
26
+ height: rem(68),
27
+ marginInlineEnd: "12",
28
+ marginBlock: rem(-11),
29
+ marginInlineStart: rem(-12),
30
+ children: /* @__PURE__ */ jsx(ForwardRef, {})
31
+ }), /* @__PURE__ */ jsx(NotificationContent, {
32
+ action: actionable,
33
+ colorVariant: PROMO_BANNER_COLOR,
34
+ dismissible,
35
+ messageText: message,
36
+ onClose,
37
+ titleText: title
38
+ })]
50
39
  });
51
40
  };
52
41
  BitkitPromoBanner.displayName = "BitkitPromoBanner";
package/dist/components/BitkitPromoBanner/BitkitPromoBanner.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BitkitPromoBanner.js","names":[],"sources":["../../../lib/components/BitkitPromoBanner/BitkitPromoBanner.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { Icon } from '@chakra-ui/react/icon';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport { NotificationActionButton, NotificationCloseButton } from '../common/NotificationButtons';\nimport { BUTTON_COLORS_MAP, type NotificationAction } from '../common/notificationMaps';\nimport MascotSvg from './mascot.svg?react';\n\nexport type PromoBannerAction = NotificationAction;\n\nconst PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;\n\nexport interface BitkitPromoBannerProps extends Omit<AlertRootProps, 'title' | 'variant'> {\n actionable?: PromoBannerAction;\n dismissible?: boolean;\n /** Custom leading illustration (an SVG element). Defaults to the built-in mascot. */\n illustration?: ReactNode;\n message: ReactNode;\n onClose?: () => void;\n title: ReactNode;\n}\n\nconst BitkitPromoBanner = (props: BitkitPromoBannerProps) => {\n const { actionable, dismissible, illustration, message, onClose, title, ...rest } = props;\n\n return (\n <Alert.Root variant=\"info\" border=\"none\" css={{ '& .alert__title + *': { marginBlockStart: 0 } }} {...rest}>\n <Icon\n asChild\n width={rem(72)}\n height={rem(68)}\n marginInlineEnd=\"12\"\n marginBlock={rem(-11)}\n marginInlineStart={rem(-12)}\n >\n {illustration ?? <MascotSvg />}\n </Icon>\n <Box display=\"flex\" flex=\"1\" minWidth=\"0\" flexWrap=\"wrap\" alignItems=\"center\" columnGap=\"16\" rowGap={rem(11)}>\n <Alert.Content minWidth=\"0\" flex={`1 1 ${rem(240)}`}>\n <Alert.Title>{title}</Alert.Title>\n <Alert.Description>{message}</Alert.Description>\n </Alert.Content>\n {!!actionable && <NotificationActionButton action={actionable} colorVariant={PROMO_BANNER_COLOR} />}\n </Box>\n {!!dismissible && <NotificationCloseButton colorVariant={PROMO_BANNER_COLOR} onClose={onClose} />}\n </Alert.Root>\n );\n};\n\nBitkitPromoBanner.displayName = 'BitkitPromoBanner';\n\nexport default BitkitPromoBanner;\n"],"mappings":";;;;;;;;;AAYA,IAAM,qBAAqB,kBAAkB;AAY7C,IAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,YAAY,aAAa,cAAc,SAAS,SAAS,OAAO,GAAG,SAAS;CAEpF,OACE,qBAAC,MAAM,MAAP;EAAY,SAAQ;EAAO,QAAO;EAAO,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,EAAE;EAAG,GAAI;YAAtG;GACE,oBAAC,MAAD;IACE,SAAA;IACA,OAAO,IAAI,EAAE;IACb,QAAQ,IAAI,EAAE;IACd,iBAAgB;IAChB,aAAa,IAAI,GAAG;IACpB,mBAAmB,IAAI,GAAG;cAEzB,gBAAgB,oBAAC,YAAD,CAAY,CAAA;GACzB,CAAA;GACN,qBAAC,KAAD;IAAK,SAAQ;IAAO,MAAK;IAAI,UAAS;IAAI,UAAS;IAAO,YAAW;IAAS,WAAU;IAAK,QAAQ,IAAI,EAAE;cAA3G,CACE,qBAAC,MAAM,SAAP;KAAe,UAAS;KAAI,MAAM,OAAO,IAAI,GAAG;eAAhD,CACE,oBAAC,MAAM,OAAP,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,MAAM,aAAP,EAAA,UAAoB,QAA2B,CAAA,CAClC;QACd,CAAC,CAAC,cAAc,oBAAC,0BAAD;KAA0B,QAAQ;KAAY,cAAc;IAAqB,CAAA,CAC/F;;GACJ,CAAC,CAAC,eAAe,oBAAC,yBAAD;IAAyB,cAAc;IAA6B;GAAU,CAAA;EACtF;;AAEhB;AAEA,kBAAkB,cAAc"}
1
+ {"version":3,"file":"BitkitPromoBanner.js","names":[],"sources":["../../../lib/components/BitkitPromoBanner/BitkitPromoBanner.tsx"],"sourcesContent":["import { Alert, type AlertRootProps } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { Icon } from '@chakra-ui/react/icon';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport { NotificationContent } from '../common/NotificationContent';\nimport { BUTTON_COLORS_MAP, type NotificationAction } from '../common/notificationMaps';\nimport MascotSvg from './mascot.svg?react';\n\nexport type PromoBannerAction = NotificationAction;\n\nconst PROMO_BANNER_COLOR = BUTTON_COLORS_MAP.info;\n\nexport interface BitkitPromoBannerProps extends Omit<AlertRootProps, 'title' | 'variant'> {\n actionable?: PromoBannerAction;\n dismissible?: boolean;\n /** Custom leading illustration. Defaults to the built-in mascot. */\n illustration?: ReactNode;\n message: ReactNode;\n onClose?: () => void;\n title: ReactNode;\n}\n\nconst BitkitPromoBanner = (props: BitkitPromoBannerProps) => {\n const { actionable, dismissible, illustration, message, onClose, title, ...rest } = props;\n\n return (\n <Alert.Root variant=\"info\" border=\"none\" css={{ '& .alert__title + *': { marginBlockStart: 0 } }} {...rest}>\n {illustration ? (\n <Box flexShrink={0} marginInlineEnd=\"12\" aria-hidden>\n {illustration}\n </Box>\n ) : (\n <Icon\n asChild\n width={rem(72)}\n height={rem(68)}\n marginInlineEnd=\"12\"\n marginBlock={rem(-11)}\n marginInlineStart={rem(-12)}\n >\n <MascotSvg />\n </Icon>\n )}\n <NotificationContent\n action={actionable}\n colorVariant={PROMO_BANNER_COLOR}\n dismissible={dismissible}\n messageText={message}\n onClose={onClose}\n titleText={title}\n />\n </Alert.Root>\n );\n};\n\nBitkitPromoBanner.displayName = 'BitkitPromoBanner';\n\nexport default BitkitPromoBanner;\n"],"mappings":";;;;;;;;;AAYA,IAAM,qBAAqB,kBAAkB;AAY7C,IAAM,qBAAqB,UAAkC;CAC3D,MAAM,EAAE,YAAY,aAAa,cAAc,SAAS,SAAS,OAAO,GAAG,SAAS;CAEpF,OACE,qBAAC,MAAM,MAAP;EAAY,SAAQ;EAAO,QAAO;EAAO,KAAK,EAAE,uBAAuB,EAAE,kBAAkB,EAAE,EAAE;EAAG,GAAI;YAAtG,CACG,eACC,oBAAC,KAAD;GAAK,YAAY;GAAG,iBAAgB;GAAK,eAAA;aACtC;EACE,CAAA,IAEL,oBAAC,MAAD;GACE,SAAA;GACA,OAAO,IAAI,EAAE;GACb,QAAQ,IAAI,EAAE;GACd,iBAAgB;GAChB,aAAa,IAAI,GAAG;GACpB,mBAAmB,IAAI,GAAG;aAE1B,oBAAC,YAAD,CAAY,CAAA;EACR,CAAA,GAER,oBAAC,qBAAD;GACE,QAAQ;GACR,cAAc;GACD;GACb,aAAa;GACJ;GACT,WAAW;EACZ,CAAA,CACS;;AAEhB;AAEA,kBAAkB,cAAc"}
package/dist/components/common/NotificationContent.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { ReactNode } from 'react';
2
+ import { BUTTON_COLORS_MAP, NotificationAction } from './notificationMaps';
3
+ type NotificationColorVariant = (typeof BUTTON_COLORS_MAP)[keyof typeof BUTTON_COLORS_MAP];
4
+ export interface NotificationContentProps {
5
+ action?: NotificationAction;
6
+ colorVariant: NotificationColorVariant;
7
+ dismissible?: boolean;
8
+ messageText: ReactNode;
9
+ onClose?: () => void;
10
+ titleText?: ReactNode;
11
+ }
12
+ export declare const NotificationContent: ({ action, colorVariant, dismissible, messageText, onClose, titleText, }: NotificationContentProps) => import("react").JSX.Element;
13
+ export {};
package/dist/components/common/NotificationContent.js ADDED
@@ -0,0 +1,52 @@
1
+ import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
2
+ import { rem } from "../../theme/themeUtils.js";
3
+ import BitkitColorButton from "../BitkitColorButton/BitkitColorButton.js";
4
+ import { Box } from "@chakra-ui/react/box";
5
+ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
+ import { Alert } from "@chakra-ui/react/alert";
7
+ //#region lib/components/common/NotificationContent.tsx
8
+ var ActionButton = ({ action, colorVariant }) => /* @__PURE__ */ jsx(BitkitColorButton, {
9
+ as: action.href ? "a" : "button",
10
+ colorVariant,
11
+ ...action.href && {
12
+ href: action.href,
13
+ target: action.target,
14
+ rel: action.target === "_blank" ? "noopener noreferrer" : void 0
15
+ },
16
+ onClick: action.onClick,
17
+ marginBlock: rem(-4),
18
+ marginInlineEnd: "12",
19
+ whiteSpace: "nowrap",
20
+ children: action.label
21
+ });
22
+ var CloseButton = ({ colorVariant, onClose }) => /* @__PURE__ */ jsx(BitkitCloseButton, {
23
+ alignSelf: "flex-start",
24
+ marginBlock: rem(-4),
25
+ size: "sm",
26
+ onClick: onClose,
27
+ colorVariant
28
+ });
29
+ var NotificationContent = ({ action, colorVariant, dismissible, messageText, onClose, titleText }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(Box, {
30
+ display: "flex",
31
+ flex: "1",
32
+ minWidth: "0",
33
+ flexWrap: "wrap",
34
+ alignItems: "center",
35
+ columnGap: "16",
36
+ rowGap: rem(11),
37
+ children: [/* @__PURE__ */ jsxs(Alert.Content, {
38
+ minWidth: "0",
39
+ flex: `1 1 ${rem(240)}`,
40
+ children: [titleText && /* @__PURE__ */ jsx(Alert.Title, { children: titleText }), /* @__PURE__ */ jsx(Alert.Description, { children: messageText })]
41
+ }), !!action && /* @__PURE__ */ jsx(ActionButton, {
42
+ action,
43
+ colorVariant
44
+ })]
45
+ }), !!dismissible && /* @__PURE__ */ jsx(CloseButton, {
46
+ colorVariant,
47
+ onClose
48
+ })] });
49
+ //#endregion
50
+ export { NotificationContent };
51
+
52
+ //# sourceMappingURL=NotificationContent.js.map
package/dist/components/common/NotificationContent.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"NotificationContent.js","names":[],"sources":["../../../lib/components/common/NotificationContent.tsx"],"sourcesContent":["/* Shared inner structure for notification-like components (Alert, PromoBanner):\n the content + action row and the trailing close button, plus the two buttons themselves.\n Alert.Root is the flex container, so this fragment's row and close button land as flex\n siblings next to the leading visual (indicator / illustration).\n The constants here are load-bearing and must not drift across the two components:\n `rem(11)` rowGap + the button `rem(-4)` bleed keep a single-line notification on 48px,\n and `flex: 1 1 rem(240)` on the content lets the action wrap below the text on narrow widths. */\n\nimport { Alert } from '@chakra-ui/react/alert';\nimport { Box } from '@chakra-ui/react/box';\nimport { type ReactNode } from 'react';\n\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton, { type BitkitCloseButtonProps } from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\nimport { type BUTTON_COLORS_MAP, type NotificationAction } from './notificationMaps';\n\ntype NotificationColorVariant = (typeof BUTTON_COLORS_MAP)[keyof typeof BUTTON_COLORS_MAP];\n\nconst ActionButton = ({\n action,\n colorVariant,\n}: {\n action: NotificationAction;\n colorVariant: BitkitColorButtonProps['colorVariant'];\n}) => (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={colorVariant}\n {...(action.href && {\n href: action.href,\n target: action.target,\n rel: action.target === '_blank' ? 'noopener noreferrer' : undefined,\n })}\n onClick={action.onClick}\n marginBlock={rem(-4)}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n);\n\nconst CloseButton = ({\n colorVariant,\n onClose,\n}: {\n colorVariant: BitkitCloseButtonProps['colorVariant'];\n onClose?: () => void;\n}) => (\n <BitkitCloseButton\n alignSelf=\"flex-start\"\n marginBlock={rem(-4)}\n size=\"sm\"\n onClick={onClose}\n colorVariant={colorVariant}\n />\n);\n\nexport interface NotificationContentProps {\n action?: NotificationAction;\n colorVariant: NotificationColorVariant;\n dismissible?: boolean;\n messageText: ReactNode;\n onClose?: () => void;\n titleText?: ReactNode;\n}\n\nexport const NotificationContent = ({\n action,\n colorVariant,\n dismissible,\n messageText,\n onClose,\n titleText,\n}: NotificationContentProps) => (\n <>\n {/* content + action share a wrapping row so the action drops below the text on narrow widths */}\n <Box display=\"flex\" flex=\"1\" minWidth=\"0\" flexWrap=\"wrap\" alignItems=\"center\" columnGap=\"16\" rowGap={rem(11)}>\n <Alert.Content minWidth=\"0\" flex={`1 1 ${rem(240)}`}>\n {titleText && <Alert.Title>{titleText}</Alert.Title>}\n <Alert.Description>{messageText}</Alert.Description>\n </Alert.Content>\n {!!action && <ActionButton action={action} colorVariant={colorVariant} />}\n </Box>\n {!!dismissible && <CloseButton colorVariant={colorVariant} onClose={onClose} />}\n </>\n);\n"],"mappings":";;;;;;;AAmBA,IAAM,gBAAgB,EACpB,QACA,mBAKA,oBAAC,mBAAD;CACE,IAAI,OAAO,OAAO,MAAM;CACV;CACd,GAAK,OAAO,QAAQ;EAClB,MAAM,OAAO;EACb,QAAQ,OAAO;EACf,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;CAC5D;CACA,SAAS,OAAO;CAChB,aAAa,IAAI,EAAE;CACnB,iBAAgB;CAChB,YAAW;WAEV,OAAO;AACS,CAAA;AAGrB,IAAM,eAAe,EACnB,cACA,cAKA,oBAAC,mBAAD;CACE,WAAU;CACV,aAAa,IAAI,EAAE;CACnB,MAAK;CACL,SAAS;CACK;AACf,CAAA;AAYH,IAAa,uBAAuB,EAClC,QACA,cACA,aACA,aACA,SACA,gBAEA,qBAAA,UAAA,EAAA,UAAA,CAEE,qBAAC,KAAD;CAAK,SAAQ;CAAO,MAAK;CAAI,UAAS;CAAI,UAAS;CAAO,YAAW;CAAS,WAAU;CAAK,QAAQ,IAAI,EAAE;WAA3G,CACE,qBAAC,MAAM,SAAP;EAAe,UAAS;EAAI,MAAM,OAAO,IAAI,GAAG;YAAhD,CACG,aAAa,oBAAC,MAAM,OAAP,EAAA,UAAc,UAAuB,CAAA,GACnD,oBAAC,MAAM,aAAP,EAAA,UAAoB,YAA+B,CAAA,CACtC;KACd,CAAC,CAAC,UAAU,oBAAC,cAAD;EAAsB;EAAsB;CAAe,CAAA,CACrE;IACJ,CAAC,CAAC,eAAe,oBAAC,aAAD;CAA2B;CAAuB;AAAU,CAAA,CAC9E,EAAA,CAAA"}
package/dist/theme/slot-recipes/QrCode.recipe.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ declare const qrCodeSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"overlay" | "pattern" | "root" | "frame" | "downloadTrigger", {
2
+ size: {
3
+ '104': {
4
+ root: {
5
+ '--qr-code-size': "104px";
6
+ };
7
+ };
8
+ '240': {
9
+ root: {
10
+ '--qr-code-size': "240px";
11
+ };
12
+ };
13
+ };
14
+ }>;
15
+ export default qrCodeSlotRecipe;
package/dist/theme/slot-recipes/QrCode.recipe.js ADDED
@@ -0,0 +1,38 @@
1
+ import { defineSlotRecipe } from "@chakra-ui/react/styled-system";
2
+ import { qrCodeAnatomy } from "@chakra-ui/react/anatomy";
3
+ //#region lib/theme/slot-recipes/QrCode.recipe.ts
4
+ var qrCodeSlotRecipe = defineSlotRecipe({
5
+ slots: qrCodeAnatomy.keys(),
6
+ className: "chakra-qr-code",
7
+ base: {
8
+ root: {
9
+ position: "relative",
10
+ width: "fit-content",
11
+ "--qr-code-overlay-size": "calc(var(--qr-code-size) / 3)"
12
+ },
13
+ frame: {
14
+ width: "var(--qr-code-size)",
15
+ height: "var(--qr-code-size)",
16
+ fill: "currentColor"
17
+ },
18
+ overlay: {
19
+ display: "flex",
20
+ alignItems: "center",
21
+ justifyContent: "center",
22
+ width: "var(--qr-code-overlay-size)",
23
+ height: "var(--qr-code-overlay-size)",
24
+ padding: "1",
25
+ backgroundColor: "background/primary",
26
+ borderRadius: "4"
27
+ }
28
+ },
29
+ variants: { size: {
30
+ "104": { root: { "--qr-code-size": "104px" } },
31
+ "240": { root: { "--qr-code-size": "240px" } }
32
+ } },
33
+ defaultVariants: { size: "104" }
34
+ });
35
+ //#endregion
36
+ export { qrCodeSlotRecipe as default };
37
+
38
+ //# sourceMappingURL=QrCode.recipe.js.map
package/dist/theme/slot-recipes/QrCode.recipe.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"QrCode.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/QrCode.recipe.ts"],"sourcesContent":["import { qrCodeAnatomy } from '@chakra-ui/react/anatomy';\nimport { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\n// The size is driven by the `--qr-code-size` CSS variable that the `frame` slot\n// sizes off. The `size` variant sets that variable to a preset, and\n// `defaultVariants` guarantees a value so the component is never broken when no\n// size is passed. Consumers who need an arbitrary size can still override the\n// variable directly (`<QrCode.Root css={{ '--qr-code-size': '160px' }} />`) —\n// the `css` prop wins over the variant.\nconst qrCodeSlotRecipe = defineSlotRecipe({\n slots: qrCodeAnatomy.keys(),\n className: 'chakra-qr-code',\n base: {\n root: {\n position: 'relative',\n width: 'fit-content',\n '--qr-code-overlay-size': 'calc(var(--qr-code-size) / 3)',\n },\n frame: {\n // The pattern draws with `currentColor` and the frame has no background of\n // its own. A QR needs dark modules on a light background (a quiet zone) to\n // scan reliably, so the foreground color and the surface behind it are the\n // consumer's responsibility — this mirrors upstream Chakra, which also\n // leaves the frame transparent.\n width: 'var(--qr-code-size)',\n height: 'var(--qr-code-size)',\n fill: 'currentColor',\n },\n overlay: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: 'var(--qr-code-overlay-size)',\n height: 'var(--qr-code-overlay-size)',\n padding: '1',\n backgroundColor: 'background/primary',\n borderRadius: '4',\n },\n },\n variants: {\n size: {\n '104': { root: { '--qr-code-size': '104px' } },\n '240': { root: { '--qr-code-size': '240px' } },\n },\n },\n defaultVariants: {\n size: '104',\n },\n});\n\nexport default qrCodeSlotRecipe;\n"],"mappings":";;;AASA,IAAM,mBAAmB,iBAAiB;CACxC,OAAO,cAAc,KAAK;CAC1B,WAAW;CACX,MAAM;EACJ,MAAM;GACJ,UAAU;GACV,OAAO;GACP,0BAA0B;EAC5B;EACA,OAAO;GAML,OAAO;GACP,QAAQ;GACR,MAAM;EACR;EACA,SAAS;GACP,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACP,QAAQ;GACR,SAAS;GACT,iBAAiB;GACjB,cAAc;EAChB;CACF;CACA,UAAU,EACR,MAAM;EACJ,OAAO,EAAE,MAAM,EAAE,kBAAkB,QAAQ,EAAE;EAC7C,OAAO,EAAE,MAAM,EAAE,kBAAkB,QAAQ,EAAE;CAC/C,EACF;CACA,iBAAiB,EACf,MAAM,MACR;AACF,CAAC"}
package/dist/theme/slot-recipes/index.d.ts CHANGED
@@ -1482,6 +1482,20 @@ declare const slotRecipes: {
1482
1482
  };
1483
1483
  }>;
1484
1484
  popover: import('@chakra-ui/react').SlotRecipeDefinition<"anchor" | "content" | "body" | "footer" | "header" | "title" | "trigger" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "indicator" | "description" | "scrollBody" | "scrollGradient" | "scrollButton", import('@chakra-ui/react').SlotRecipeVariantRecord<"anchor" | "content" | "body" | "footer" | "header" | "title" | "trigger" | "arrow" | "arrowTip" | "positioner" | "closeTrigger" | "indicator" | "description" | "scrollBody" | "scrollGradient" | "scrollButton">>;
1485
+ qrCode: import('@chakra-ui/react').SlotRecipeDefinition<"overlay" | "pattern" | "root" | "frame" | "downloadTrigger", {
1486
+ size: {
1487
+ '104': {
1488
+ root: {
1489
+ '--qr-code-size': "104px";
1490
+ };
1491
+ };
1492
+ '240': {
1493
+ root: {
1494
+ '--qr-code-size': "240px";
1495
+ };
1496
+ };
1497
+ };
1498
+ }>;
1485
1499
  radioGroup: import('@chakra-ui/react').SlotRecipeDefinition<"label" | "root" | "item" | "itemIndicator" | "indicator" | "itemText" | "itemControl" | "itemAddon", {
1486
1500
  orientation: {
1487
1501
  horizontal: {
package/dist/theme/slot-recipes/index.js CHANGED
@@ -37,6 +37,7 @@ import pageFooterSlotRecipe from "./PageFooter.recipe.js";
37
37
  import paginationSlotRecipe from "./Pagination.recipe.js";
38
38
  import paginationLoadMoreRecipe from "./PaginationLoadMore.recipe.js";
39
39
  import popoverSlotRecipe from "./Popover.recipe.js";
40
+ import qrCodeSlotRecipe from "./QrCode.recipe.js";
40
41
  import radioGroupSlotRecipe from "./RadioGroup.recipe.js";
41
42
  import ribbonSlotRecipe from "./Ribbon.recipe.js";
42
43
  import sectionHeadingRecipe from "./SectionHeading.recipe.js";
@@ -95,6 +96,7 @@ var slotRecipes = {
95
96
  pagination: paginationSlotRecipe,
96
97
  paginationLoadMore: paginationLoadMoreRecipe,
97
98
  popover: popoverSlotRecipe,
99
+ qrCode: qrCodeSlotRecipe,
98
100
  radioGroup: radioGroupSlotRecipe,
99
101
  ribbon: ribbonSlotRecipe,
100
102
  sectionHeading: sectionHeadingRecipe,
package/dist/theme/slot-recipes/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n dataWidget: dataWidgetSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n drawer: drawerSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n multiselect: multiselectSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n popover: popoverSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n sidebar: sidebarSlotRecipe,\n select: selectSlotRecipe,\n settingsCard: settingsCardSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n textInput: textInputSlotRecipe,\n toast: toastSlotRecipe,\n tooltip: tooltipSlotRecipe,\n treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,UAAU;AACZ"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../../lib/theme/slot-recipes/index.ts"],"sourcesContent":["import accordionSlotRecipe from './Accordion.recipe.ts';\nimport actionBarSlotRecipe from './ActionBar.recipe.ts';\nimport alertSlotRecipe from './Alert.recipe.ts';\nimport avatarSlotRecipe from './Avatar.recipe.ts';\nimport breadcrumbSlotRecipe from './Breadcrumb.recipe.ts';\nimport cardSlotRecipe from './Card.recipe';\nimport checkboxSlotRecipe from './Checkbox.recipe';\nimport codeSnippetSlotRecipe from './CodeSnippet.recipe.ts';\nimport collapsibleSlotRecipe from './Collapsible.recipe.ts';\nimport comboboxSlotRecipe from './Combobox.recipe.ts';\nimport dataWidgetSlotRecipe from './DataWidget.recipe.ts';\nimport datePickerSlotRecipe from './DatePicker.recipe.ts';\nimport datePickerSelectSlotRecipe from './DatePickerSelect.recipe.ts';\nimport dialogSlotRecipe from './Dialog.recipe.ts';\nimport draggableCardSlotRecipe from './DraggableCard.recipe.ts';\nimport drawerSlotRecipe from './Drawer.recipe.ts';\nimport emptyStateSlotRecipe from './EmptyState.recipe';\nimport expandableCardSlotRecipe from './ExpandableCard.recipe.ts';\nimport fieldSlotRecipe from './Field.recipe';\nimport fieldsetSlotRecipe from './Fieldset.recipe.ts';\nimport fileUploadSlotRecipe from './FileUpload.recipe.ts';\nimport groupHeadingSlotRecipe from './GroupHeading.recipe.ts';\nimport imageCropperSlotRecipe from './ImageCropper.recipe.ts';\nimport inlineLoadingSlotRecipe from './InlineLoading.recipe.ts';\nimport labeledDataSlotRecipe from './LabeledData.recipe.ts';\nimport listSlotRecipe from './List.recipe.ts';\nimport markdownSlotRecipe from './Markdown.recipe.ts';\nimport markdownCardSlotRecipe from './MarkdownCard.recipe.ts';\nimport menuSlotRecipe from './Menu.recipe.ts';\nimport multiselectSlotRecipe from './Multiselect.recipe.ts';\nimport nativeSelectSlotRecipe from './NativeSelect.recipe.ts';\nimport noteCardSlotRecipe from './NoteCard.recipe.ts';\nimport numberInputSlotRecipe from './NumberInput.recipe';\nimport overflowContentSlotRecipe from './OverflowContent.recipe.ts';\nimport pageFooterSlotRecipe from './PageFooter.recipe.ts';\nimport paginationSlotRecipe from './Pagination.recipe.ts';\nimport paginationLoadMoreSlotRecipe from './PaginationLoadMore.recipe.ts';\nimport popoverSlotRecipe from './Popover.recipe.ts';\nimport qrCodeSlotRecipe from './QrCode.recipe.ts';\nimport radioGroupSlotRecipe from './RadioGroup.recipe.ts';\nimport ribbonSlotRecipe from './Ribbon.recipe.ts';\nimport sectionHeadingSlotRecipe from './SectionHeading.recipe.ts';\nimport segmentGroupSlotRecipe from './SegmentGroup.recipe.ts';\nimport { selectSlotRecipe } from './Select.recipe.ts';\nimport settingsCardSlotRecipe from './SettingsCard.recipe.ts';\nimport sidebarSlotRecipe from './Sidebar.recipe.ts';\nimport splitButtonSlotRecipe from './SplitButton.recipe.ts';\nimport statSlotRecipe from './Stat.recipe.ts';\nimport stepCardSlotRecipe from './StepCard.recipe.ts';\nimport stepsSlotRecipe from './Steps.recipe.ts';\nimport switchSlotRecipe from './Switch.recipe';\nimport tableSlotRecipe from './Table.recipe.ts';\nimport tabsSlotRecipe from './Tabs.recipe';\nimport tagSlotRecipe from './Tag.recipe.ts';\nimport tagsInputSlotRecipe from './TagsInput.recipe.ts';\nimport textInputSlotRecipe from './TextInput.recipe.ts';\nimport toastSlotRecipe from './Toast.recipe';\nimport tooltipSlotRecipe from './Tooltip.recipe';\nimport treeViewSlotRecipe from './TreeView.recipe.ts';\n\nconst slotRecipes = {\n accordion: accordionSlotRecipe,\n actionBar: actionBarSlotRecipe,\n alert: alertSlotRecipe,\n avatar: avatarSlotRecipe,\n breadcrumb: breadcrumbSlotRecipe,\n card: cardSlotRecipe,\n checkbox: checkboxSlotRecipe,\n codeSnippet: codeSnippetSlotRecipe,\n collapsible: collapsibleSlotRecipe,\n combobox: comboboxSlotRecipe,\n dataWidget: dataWidgetSlotRecipe,\n datePicker: datePickerSlotRecipe,\n datePickerSelect: datePickerSelectSlotRecipe,\n dialog: dialogSlotRecipe,\n draggableCard: draggableCardSlotRecipe,\n drawer: drawerSlotRecipe,\n emptyState: emptyStateSlotRecipe,\n expandableCard: expandableCardSlotRecipe,\n field: fieldSlotRecipe,\n groupHeading: groupHeadingSlotRecipe,\n fieldset: fieldsetSlotRecipe,\n fileUpload: fileUploadSlotRecipe,\n imageCropper: imageCropperSlotRecipe,\n inlineLoading: inlineLoadingSlotRecipe,\n list: listSlotRecipe,\n markdown: markdownSlotRecipe,\n markdownCard: markdownCardSlotRecipe,\n menu: menuSlotRecipe,\n multiselect: multiselectSlotRecipe,\n noteCard: noteCardSlotRecipe,\n nativeSelect: nativeSelectSlotRecipe,\n numberInput: numberInputSlotRecipe,\n overflowContent: overflowContentSlotRecipe,\n pageFooter: pageFooterSlotRecipe,\n pagination: paginationSlotRecipe,\n paginationLoadMore: paginationLoadMoreSlotRecipe,\n popover: popoverSlotRecipe,\n qrCode: qrCodeSlotRecipe,\n radioGroup: radioGroupSlotRecipe,\n ribbon: ribbonSlotRecipe,\n sectionHeading: sectionHeadingSlotRecipe,\n labeledData: labeledDataSlotRecipe,\n segmentGroup: segmentGroupSlotRecipe,\n sidebar: sidebarSlotRecipe,\n select: selectSlotRecipe,\n settingsCard: settingsCardSlotRecipe,\n splitButton: splitButtonSlotRecipe,\n stat: statSlotRecipe,\n stepsCard: stepCardSlotRecipe,\n steps: stepsSlotRecipe,\n switch: switchSlotRecipe,\n table: tableSlotRecipe,\n tabs: tabsSlotRecipe,\n tag: tagSlotRecipe,\n tagsInput: tagsInputSlotRecipe,\n textInput: textInputSlotRecipe,\n toast: toastSlotRecipe,\n tooltip: tooltipSlotRecipe,\n treeView: treeViewSlotRecipe,\n};\n\nexport default slotRecipes;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,IAAM,cAAc;CAClB,WAAW;CACX,WAAW;CACX,OAAO;CACP,QAAQ;CACR,YAAY;CACZ,MAAM;CACN,UAAU;CACV,aAAa;CACb,aAAa;CACb,UAAU;CACV,YAAY;CACZ,YAAY;CACZ,kBAAkB;CAClB,QAAQ;CACR,eAAe;CACf,QAAQ;CACR,YAAY;CACZ,gBAAgB;CAChB,OAAO;CACP,cAAc;CACd,UAAU;CACV,YAAY;CACZ,cAAc;CACd,eAAe;CACf,MAAM;CACN,UAAU;CACV,cAAc;CACd,MAAM;CACN,aAAa;CACb,UAAU;CACV,cAAc;CACd,aAAa;CACb,iBAAiB;CACjB,YAAY;CACZ,YAAY;CACZ,oBAAoB;CACpB,SAAS;CACT,QAAQ;CACR,YAAY;CACZ,QAAQ;CACR,gBAAgB;CAChB,aAAa;CACb,cAAc;CACd,SAAS;CACT,QAAQ;CACR,cAAc;CACd,aAAa;CACb,MAAM;CACN,WAAW;CACX,OAAO;CACP,QAAQ;CACR,OAAO;CACP,MAAM;CACN,KAAK;CACL,WAAW;CACX,WAAW;CACX,OAAO;CACP,SAAS;CACT,UAAU;AACZ"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bitrise/bitkit-v2",
3
3
  "private": false,
4
- "version": "0.3.280-beta.1868",
4
+ "version": "0.3.281-beta.1870",
5
5
  "description": "Bitrise Design System Components built with Chakra UI V3",
6
6
  "keywords": [
7
7
  "react",
package/dist/components/common/NotificationButtons.d.ts DELETED
@@ -1,11 +0,0 @@
1
- import { BitkitCloseButtonProps } from '../BitkitCloseButton/BitkitCloseButton';
2
- import { BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';
3
- import { NotificationAction } from './notificationMaps';
4
- export declare const NotificationActionButton: ({ action, colorVariant, }: {
5
- action: NotificationAction;
6
- colorVariant: BitkitColorButtonProps["colorVariant"];
7
- }) => import("react").JSX.Element;
8
- export declare const NotificationCloseButton: ({ colorVariant, onClose, }: {
9
- colorVariant: BitkitCloseButtonProps["colorVariant"];
10
- onClose?: () => void;
11
- }) => import("react").JSX.Element;
package/dist/components/common/NotificationButtons.js DELETED
@@ -1,30 +0,0 @@
1
- import BitkitCloseButton from "../BitkitCloseButton/BitkitCloseButton.js";
2
- import { rem } from "../../theme/themeUtils.js";
3
- import BitkitColorButton from "../BitkitColorButton/BitkitColorButton.js";
4
- import { jsx } from "react/jsx-runtime";
5
- //#region lib/components/common/NotificationButtons.tsx
6
- var NotificationActionButton = ({ action, colorVariant }) => /* @__PURE__ */ jsx(BitkitColorButton, {
7
- as: action.href ? "a" : "button",
8
- colorVariant,
9
- ...action.href && {
10
- href: action.href,
11
- target: action.target,
12
- rel: action.target === "_blank" ? "noopener noreferrer" : void 0
13
- },
14
- onClick: action.onClick,
15
- marginBlock: rem(-4),
16
- marginInlineEnd: "12",
17
- whiteSpace: "nowrap",
18
- children: action.label
19
- });
20
- var NotificationCloseButton = ({ colorVariant, onClose }) => /* @__PURE__ */ jsx(BitkitCloseButton, {
21
- alignSelf: "flex-start",
22
- marginBlock: rem(-4),
23
- size: "sm",
24
- onClick: onClose,
25
- colorVariant
26
- });
27
- //#endregion
28
- export { NotificationActionButton, NotificationCloseButton };
29
-
30
- //# sourceMappingURL=NotificationButtons.js.map
package/dist/components/common/NotificationButtons.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"NotificationButtons.js","names":[],"sources":["../../../lib/components/common/NotificationButtons.tsx"],"sourcesContent":["/* Shared trailing action / dismiss buttons for notification-like components (Alert, PromoBanner). */\n\nimport { rem } from '../../theme/themeUtils';\nimport BitkitCloseButton, { type BitkitCloseButtonProps } from '../BitkitCloseButton/BitkitCloseButton';\nimport BitkitColorButton, { type BitkitColorButtonProps } from '../BitkitColorButton/BitkitColorButton';\nimport { type NotificationAction } from './notificationMaps';\n\nexport const NotificationActionButton = ({\n action,\n colorVariant,\n}: {\n action: NotificationAction;\n colorVariant: BitkitColorButtonProps['colorVariant'];\n}) => (\n <BitkitColorButton\n as={action.href ? 'a' : 'button'}\n colorVariant={colorVariant}\n {...(action.href && {\n href: action.href,\n target: action.target,\n rel: action.target === '_blank' ? 'noopener noreferrer' : undefined,\n })}\n onClick={action.onClick}\n marginBlock={rem(-4)}\n marginInlineEnd=\"12\"\n whiteSpace=\"nowrap\"\n >\n {action.label}\n </BitkitColorButton>\n);\n\nexport const NotificationCloseButton = ({\n colorVariant,\n onClose,\n}: {\n colorVariant: BitkitCloseButtonProps['colorVariant'];\n onClose?: () => void;\n}) => (\n <BitkitCloseButton\n alignSelf=\"flex-start\"\n marginBlock={rem(-4)}\n size=\"sm\"\n onClick={onClose}\n colorVariant={colorVariant}\n />\n);\n"],"mappings":";;;;;AAOA,IAAa,4BAA4B,EACvC,QACA,mBAKA,oBAAC,mBAAD;CACE,IAAI,OAAO,OAAO,MAAM;CACV;CACd,GAAK,OAAO,QAAQ;EAClB,MAAM,OAAO;EACb,QAAQ,OAAO;EACf,KAAK,OAAO,WAAW,WAAW,wBAAwB,KAAA;CAC5D;CACA,SAAS,OAAO;CAChB,aAAa,IAAI,EAAE;CACnB,iBAAgB;CAChB,YAAW;WAEV,OAAO;AACS,CAAA;AAGrB,IAAa,2BAA2B,EACtC,cACA,cAKA,oBAAC,mBAAD;CACE,WAAU;CACV,aAAa,IAAI,EAAE;CACnB,MAAK;CACL,SAAS;CACK;AACf,CAAA"}