@bitrise/bitkit-v2 0.3.334 → 0.3.336
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.d.ts +16 -3
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js +3 -2
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js.map +1 -1
- package/dist/components/BitkitToast/BitkitToast.d.ts +11 -0
- package/dist/components/BitkitToast/BitkitToast.js +2 -1
- package/dist/components/BitkitToast/BitkitToast.js.map +1 -1
- package/dist/components/BitkitToast/BitkitToaster.js +1 -0
- package/dist/components/BitkitToast/BitkitToaster.js.map +1 -1
- package/dist/theme/slot-recipes/CodeSnippet.recipe.d.ts +4 -0
- package/dist/theme/slot-recipes/CodeSnippet.recipe.js +14 -1
- package/dist/theme/slot-recipes/CodeSnippet.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +4 -0
- package/package.json +1 -1
|
@@ -6,15 +6,28 @@ interface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'>
|
|
|
6
6
|
startingHeight?: never;
|
|
7
7
|
textToCopy?: string;
|
|
8
8
|
variant: 'inline';
|
|
9
|
+
wrapLines?: never;
|
|
9
10
|
}
|
|
10
11
|
interface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {
|
|
11
12
|
children: string;
|
|
12
13
|
interactive?: never;
|
|
13
14
|
size?: 'md' | 'lg';
|
|
14
|
-
startingHeight?: number;
|
|
15
15
|
textToCopy?: string;
|
|
16
|
-
variant: 'multi' | 'single';
|
|
17
16
|
}
|
|
18
|
-
|
|
17
|
+
interface SingleProps extends BlockProps {
|
|
18
|
+
startingHeight?: never;
|
|
19
|
+
variant: 'single';
|
|
20
|
+
wrapLines?: never;
|
|
21
|
+
}
|
|
22
|
+
interface MultiProps extends BlockProps {
|
|
23
|
+
startingHeight?: number;
|
|
24
|
+
variant: 'multi';
|
|
25
|
+
/**
|
|
26
|
+
* Long lines wrap by default; `false` keeps them whole behind a horizontal scrollbar, which is
|
|
27
|
+
* what indented code (YAML, shell) needs to stay readable.
|
|
28
|
+
*/
|
|
29
|
+
wrapLines?: boolean;
|
|
30
|
+
}
|
|
31
|
+
export type BitkitCodeSnippetProps = InlineProps | MultiProps | SingleProps;
|
|
19
32
|
declare const BitkitCodeSnippet: import('react').ForwardRefExoticComponent<BitkitCodeSnippetProps & import('react').RefAttributes<HTMLElement>>;
|
|
20
33
|
export default BitkitCodeSnippet;
|
|
@@ -20,7 +20,8 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
20
20
|
interactive: props.interactive,
|
|
21
21
|
isExpanded,
|
|
22
22
|
size: props.size ?? "lg",
|
|
23
|
-
variant: props.variant
|
|
23
|
+
variant: props.variant,
|
|
24
|
+
wrapLines: props.wrapLines
|
|
24
25
|
});
|
|
25
26
|
const handleToggleExpand = () => {
|
|
26
27
|
setIsExpanded((prev) => !prev);
|
|
@@ -66,7 +67,7 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
66
67
|
})
|
|
67
68
|
});
|
|
68
69
|
}
|
|
69
|
-
const { children, size: _size, startingHeight, textToCopy: _textToCopy, variant, ...rest } = props;
|
|
70
|
+
const { children, size: _size, startingHeight, textToCopy: _textToCopy, variant, wrapLines: _wrapLines, ...rest } = props;
|
|
70
71
|
if (variant === "single") return /* @__PURE__ */ jsxs(chakra.div, {
|
|
71
72
|
ref,
|
|
72
73
|
...rest,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {\n children: string;\n interactive?: boolean;\n size?: 'md' | 'lg';\n startingHeight?: never;\n textToCopy?: string;\n variant: 'inline';\n}\n\ninterface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {\n children: string;\n interactive?: never;\n size?: 'md' | 'lg';\n
|
|
1
|
+
{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {\n children: string;\n interactive?: boolean;\n size?: 'md' | 'lg';\n startingHeight?: never;\n textToCopy?: string;\n variant: 'inline';\n wrapLines?: never;\n}\n\ninterface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {\n children: string;\n interactive?: never;\n size?: 'md' | 'lg';\n textToCopy?: string;\n}\n\n// `single` is one line behind a horizontal scrollbar, so neither the show-more height nor the\n// wrapping switch means anything there -- `never` says so at the call site instead of ignoring them.\ninterface SingleProps extends BlockProps {\n startingHeight?: never;\n variant: 'single';\n wrapLines?: never;\n}\n\ninterface MultiProps extends BlockProps {\n startingHeight?: number;\n variant: 'multi';\n /**\n * Long lines wrap by default; `false` keeps them whole behind a horizontal scrollbar, which is\n * what indented code (YAML, shell) needs to stay readable.\n */\n wrapLines?: boolean;\n}\n\nexport type BitkitCodeSnippetProps = InlineProps | MultiProps | SingleProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n const hasShowMore = props.startingHeight !== undefined;\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { copied, copy } = useClipboard({ timeout: 2000, value: props.textToCopy ?? props.children });\n\n const recipe = useSlotRecipe({ key: 'codeSnippet' });\n const styles = recipe({\n hasShowMore,\n interactive: props.interactive,\n isExpanded,\n size: props.size ?? 'lg',\n variant: props.variant,\n wrapLines: props.wrapLines,\n });\n\n const handleToggleExpand = () => {\n setIsExpanded((prev) => !prev);\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n copy();\n }\n };\n\n const copyButton = (\n <chakra.button aria-label={COPY_TOOLTIP} css={styles.copyButton} onClick={copy} type=\"button\">\n {copied ? <IconCheck size=\"16\" /> : <IconCopy size=\"16\" />}\n </chakra.button>\n );\n\n if (props.variant === 'inline') {\n const { children, interactive, size: _size, textToCopy: _textToCopy, variant: _variant, ...rest } = props;\n\n if (!interactive) {\n return (\n <chakra.code ref={ref} {...rest} css={[styles.root, rest.css]}>\n {children}\n </chakra.code>\n );\n }\n\n return (\n <BitkitTooltip text={COPY_TOOLTIP}>\n <chakra.code\n ref={ref}\n {...rest}\n css={[styles.root, rest.css]}\n onClick={(e) => {\n rest.onClick?.(e);\n if (!e.defaultPrevented) copy();\n }}\n onKeyDown={(e) => {\n rest.onKeyDown?.(e);\n if (!e.defaultPrevented) handleKeyDown(e);\n }}\n role=\"button\"\n tabIndex={0}\n >\n {children}\n </chakra.code>\n </BitkitTooltip>\n );\n }\n\n const {\n children,\n size: _size,\n startingHeight,\n textToCopy: _textToCopy,\n variant,\n wrapLines: _wrapLines,\n ...rest\n } = props;\n\n if (variant === 'single') {\n return (\n <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n <chakra.code css={styles.content} tabIndex={-1}>\n {children}\n </chakra.code>\n <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n </chakra.div>\n );\n }\n\n const contentMaxHeight = hasShowMore && !isExpanded ? startingHeight : undefined;\n\n return (\n <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n <chakra.code css={styles.content} maxHeight={contentMaxHeight} tabIndex={-1}>\n {children}\n </chakra.code>\n <chakra.div css={styles.copyButtonWrapper}>\n <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n </chakra.div>\n {hasShowMore && (\n <chakra.div css={styles.showMoreContainer}>\n {!isExpanded && <chakra.div css={styles.showMoreGradient} />}\n <chakra.button onClick={handleToggleExpand} css={styles.showMoreButton}>\n {isExpanded ? 'Show less' : 'Show more'}\n <AssetSelectChevron data-state={isExpanded ? 'open' : 'closed'} height=\"16\" width=\"16\" />\n </chakra.button>\n </chakra.div>\n )}\n </chakra.div>\n );\n});\n\nBitkitCodeSnippet.displayName = 'BitkitCodeSnippet';\n\nexport default BitkitCodeSnippet;\n"],"mappings":"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"}
|
|
@@ -15,6 +15,17 @@ export type BitkitToastProps = {
|
|
|
15
15
|
timestamp?: string;
|
|
16
16
|
titleText?: ReactNode;
|
|
17
17
|
variant: BitkitToastVariant;
|
|
18
|
+
} & {
|
|
19
|
+
/**
|
|
20
|
+
* Data attributes are forwarded to the toast's root element. `createBitkitToast` is a
|
|
21
|
+
* function rather than a component, so props can't be spread onto anything directly —
|
|
22
|
+
* these travel through the toast store's `meta` and are applied when it renders.
|
|
23
|
+
*
|
|
24
|
+
* The case this exists for is `data-clarity-unmask`, which opts a region out of session
|
|
25
|
+
* replay masking: without it a migrated error toast shows up as blocks in the replay,
|
|
26
|
+
* exactly where support needs to read what went wrong.
|
|
27
|
+
*/
|
|
28
|
+
[dataAttribute: `data-${string}`]: string | undefined;
|
|
18
29
|
};
|
|
19
30
|
export declare const toaster: import('@zag-js/toast').Store<any>;
|
|
20
31
|
declare const createBitkitToast: (props: BitkitToastProps) => string;
|
|
@@ -22,7 +22,7 @@ var toaster = createToaster({
|
|
|
22
22
|
pauseOnPageIdle: true
|
|
23
23
|
});
|
|
24
24
|
var createBitkitToast = (props) => {
|
|
25
|
-
const { action, dismissible = true, duration, messageText, timestamp, titleText, variant } = props;
|
|
25
|
+
const { action, dismissible = true, duration, messageText, timestamp, titleText, variant, ...dataAttributes } = props;
|
|
26
26
|
const [actionable, nonActionable] = TOAST_PRIORITIES[variant];
|
|
27
27
|
return toaster.create({
|
|
28
28
|
closable: dismissible,
|
|
@@ -30,6 +30,7 @@ var createBitkitToast = (props) => {
|
|
|
30
30
|
duration: duration ?? TOAST_DURATIONS[variant],
|
|
31
31
|
meta: {
|
|
32
32
|
action,
|
|
33
|
+
dataAttributes,
|
|
33
34
|
timestamp
|
|
34
35
|
},
|
|
35
36
|
priority: action ? actionable : nonActionable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitToast.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToast.tsx"],"sourcesContent":["import { createToaster } from '@chakra-ui/react/toast';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { type NotificationAction } from '../common/notificationMaps';\n\nexport type BitkitToastVariant = NotificationVariant;\n\nexport type BitkitToastProps = {\n action?: NotificationAction;\n dismissible?: boolean;\n /**\n * How long the toast stays visible, in milliseconds. Overrides the per-variant\n * default for any variant: 5000ms for `ai`/`info`/`success`/`warning`, `Infinity`\n * for `critical` and `progress`. Pass `Infinity` to make a toast persist.\n */\n duration?: number;\n messageText: ReactNode;\n timestamp?: string;\n titleText?: ReactNode;\n variant: BitkitToastVariant;\n};\n\n// Zag's internal priority table only knows its 5 built-in types and crashes\n// on our custom variants (ai/critical/progress). We replicate Zag's algorithm\n// with our full variant set and compute priority ourselves, so the broken\n// lookup is never reached. Each tuple is [actionable, nonActionable] — mirrors\n// Zag, which ranks actionable toasts higher. Lower number = higher in the stack.\nconst TOAST_PRIORITIES = {\n critical: [1, 2], // ~ Zag \"error\" — most urgent\n warning: [3, 6], // = Zag \"warning\"\n progress: [4, 5], // ~ Zag \"loading\"\n success: [5, 7], // = Zag \"success\"\n ai: [6, 8], // ~ Zag \"info\"\n info: [6, 8], // = Zag \"info\" — least urgent\n} as const satisfies Record<BitkitToastVariant, readonly [number, number]>;\n\n// Same name-collision problem as the priorities above: Zag keys its timeout table\n// by its own type names, so only info/warning/success happen to match ours and the\n// rest silently fall back to its 5000ms DEFAULT. We own the full table instead.\n// `critical` and `progress` persist until dismissed — an error the user must see,\n// and an operation that is still running, should not disappear on a timer.\nconst TOAST_DURATIONS = {\n ai: 5000,\n critical: Infinity,\n info: 5000,\n progress: Infinity,\n success: 5000,\n warning: 5000,\n} as const satisfies Record<BitkitToastVariant, number>;\n\nexport const toaster = createToaster({\n max: 5,\n placement: 'top-end',\n pauseOnPageIdle: true,\n});\n\nconst createBitkitToast = (props: BitkitToastProps) => {\n const { action, dismissible = true, duration, messageText, timestamp, titleText, variant } = props;\n\n const [actionable, nonActionable] = TOAST_PRIORITIES[variant];\n\n return toaster.create({\n closable: dismissible,\n description: messageText,\n duration: duration ?? TOAST_DURATIONS[variant],\n meta: { action, timestamp },\n priority: action ? actionable : nonActionable,\n title: titleText,\n type: variant,\n });\n};\n\n/**\n * Closes the toast with the given id — the one `createBitkitToast` returns — or every\n * visible toast when called without an id — note that an `undefined` id counts as \"no id\",\n * so guard ids that may not be set yet. Use it to close `duration: Infinity` toasts\n * (`critical`, `progress`) from code once the operation they report on ends, and to clean\n * up toasts between tests. The node is unmounted 200ms after the call — Zag's fixed\n * `removeDelay`, which cuts the exit transition short rather than waiting it out — so in\n * tests, assert its absence with `waitFor` or advance the timers.\n */\nexport const dismissBitkitToast = (id?: string) => toaster.dismiss(id);\n\nexport default createBitkitToast;\n"],"mappings":";;
|
|
1
|
+
{"version":3,"file":"BitkitToast.js","names":[],"sources":["../../../lib/components/BitkitToast/BitkitToast.tsx"],"sourcesContent":["import { createToaster } from '@chakra-ui/react/toast';\nimport { type ReactNode } from 'react';\n\nimport { type NotificationVariant } from '../../theme/common/AlertAndToast.common';\nimport { type NotificationAction } from '../common/notificationMaps';\n\nexport type BitkitToastVariant = NotificationVariant;\n\nexport type BitkitToastProps = {\n action?: NotificationAction;\n dismissible?: boolean;\n /**\n * How long the toast stays visible, in milliseconds. Overrides the per-variant\n * default for any variant: 5000ms for `ai`/`info`/`success`/`warning`, `Infinity`\n * for `critical` and `progress`. Pass `Infinity` to make a toast persist.\n */\n duration?: number;\n messageText: ReactNode;\n timestamp?: string;\n titleText?: ReactNode;\n variant: BitkitToastVariant;\n} & {\n /**\n * Data attributes are forwarded to the toast's root element. `createBitkitToast` is a\n * function rather than a component, so props can't be spread onto anything directly —\n * these travel through the toast store's `meta` and are applied when it renders.\n *\n * The case this exists for is `data-clarity-unmask`, which opts a region out of session\n * replay masking: without it a migrated error toast shows up as blocks in the replay,\n * exactly where support needs to read what went wrong.\n */\n [dataAttribute: `data-${string}`]: string | undefined;\n};\n\n// Zag's internal priority table only knows its 5 built-in types and crashes\n// on our custom variants (ai/critical/progress). We replicate Zag's algorithm\n// with our full variant set and compute priority ourselves, so the broken\n// lookup is never reached. Each tuple is [actionable, nonActionable] — mirrors\n// Zag, which ranks actionable toasts higher. Lower number = higher in the stack.\nconst TOAST_PRIORITIES = {\n critical: [1, 2], // ~ Zag \"error\" — most urgent\n warning: [3, 6], // = Zag \"warning\"\n progress: [4, 5], // ~ Zag \"loading\"\n success: [5, 7], // = Zag \"success\"\n ai: [6, 8], // ~ Zag \"info\"\n info: [6, 8], // = Zag \"info\" — least urgent\n} as const satisfies Record<BitkitToastVariant, readonly [number, number]>;\n\n// Same name-collision problem as the priorities above: Zag keys its timeout table\n// by its own type names, so only info/warning/success happen to match ours and the\n// rest silently fall back to its 5000ms DEFAULT. We own the full table instead.\n// `critical` and `progress` persist until dismissed — an error the user must see,\n// and an operation that is still running, should not disappear on a timer.\nconst TOAST_DURATIONS = {\n ai: 5000,\n critical: Infinity,\n info: 5000,\n progress: Infinity,\n success: 5000,\n warning: 5000,\n} as const satisfies Record<BitkitToastVariant, number>;\n\nexport const toaster = createToaster({\n max: 5,\n placement: 'top-end',\n pauseOnPageIdle: true,\n});\n\nconst createBitkitToast = (props: BitkitToastProps) => {\n const { action, dismissible = true, duration, messageText, timestamp, titleText, variant, ...dataAttributes } = props;\n\n const [actionable, nonActionable] = TOAST_PRIORITIES[variant];\n\n return toaster.create({\n closable: dismissible,\n description: messageText,\n duration: duration ?? TOAST_DURATIONS[variant],\n meta: { action, dataAttributes, timestamp },\n priority: action ? actionable : nonActionable,\n title: titleText,\n type: variant,\n });\n};\n\n/**\n * Closes the toast with the given id — the one `createBitkitToast` returns — or every\n * visible toast when called without an id — note that an `undefined` id counts as \"no id\",\n * so guard ids that may not be set yet. Use it to close `duration: Infinity` toasts\n * (`critical`, `progress`) from code once the operation they report on ends, and to clean\n * up toasts between tests. The node is unmounted 200ms after the call — Zag's fixed\n * `removeDelay`, which cuts the exit transition short rather than waiting it out — so in\n * tests, assert its absence with `waitFor` or advance the timers.\n */\nexport const dismissBitkitToast = (id?: string) => toaster.dismiss(id);\n\nexport default createBitkitToast;\n"],"mappings":";;AAuCA,IAAM,mBAAmB;CACvB,UAAU,CAAC,GAAG,CAAC;CACf,SAAS,CAAC,GAAG,CAAC;CACd,UAAU,CAAC,GAAG,CAAC;CACf,SAAS,CAAC,GAAG,CAAC;CACd,IAAI,CAAC,GAAG,CAAC;CACT,MAAM,CAAC,GAAG,CAAC;AACb;AAOA,IAAM,kBAAkB;CACtB,IAAI;CACJ,UAAU;CACV,MAAM;CACN,UAAU;CACV,SAAS;CACT,SAAS;AACX;AAEA,IAAa,UAAU,cAAc;CACnC,KAAK;CACL,WAAW;CACX,iBAAiB;AACnB,CAAC;AAED,IAAM,qBAAqB,UAA4B;CACrD,MAAM,EAAE,QAAQ,cAAc,MAAM,UAAU,aAAa,WAAW,WAAW,SAAS,GAAG,mBAAmB;CAEhH,MAAM,CAAC,YAAY,iBAAiB,iBAAiB;CAErD,OAAO,QAAQ,OAAO;EACpB,UAAU;EACV,aAAa;EACb,UAAU,YAAY,gBAAgB;EACtC,MAAM;GAAE;GAAQ;GAAgB;EAAU;EAC1C,UAAU,SAAS,aAAa;EAChC,OAAO;EACP,MAAM;CACR,CAAC;AACH;;;;;;;;;;AAWA,IAAa,sBAAsB,OAAgB,QAAQ,QAAQ,EAAE"}
|
|
@@ -18,6 +18,7 @@ var BitkitToaster = () => {
|
|
|
18
18
|
const IconComponent = ICON_COMPONENTS_MAP[variant];
|
|
19
19
|
return /* @__PURE__ */ jsxs(Toast.Root, {
|
|
20
20
|
variant,
|
|
21
|
+
...toast.meta?.dataAttributes,
|
|
21
22
|
children: [
|
|
22
23
|
/* @__PURE__ */ jsx(IconComponent, { css: styles.icon }),
|
|
23
24
|
/* @__PURE__ */ jsxs(Box, {
|
|
@@ -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}>\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;
|
|
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"}
|
|
@@ -172,12 +172,24 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
|
|
|
172
172
|
true: {},
|
|
173
173
|
false: {}
|
|
174
174
|
},
|
|
175
|
+
wrapLines: {
|
|
176
|
+
true: {},
|
|
177
|
+
false: {}
|
|
178
|
+
},
|
|
175
179
|
isExpanded: {
|
|
176
180
|
true: {},
|
|
177
181
|
false: {}
|
|
178
182
|
}
|
|
179
183
|
},
|
|
180
184
|
compoundVariants: [
|
|
185
|
+
{
|
|
186
|
+
variant: "multi",
|
|
187
|
+
wrapLines: false,
|
|
188
|
+
css: { content: {
|
|
189
|
+
overflowX: "auto",
|
|
190
|
+
whiteSpace: "pre"
|
|
191
|
+
} }
|
|
192
|
+
},
|
|
181
193
|
{
|
|
182
194
|
variant: "inline",
|
|
183
195
|
interactive: true,
|
|
@@ -228,7 +240,8 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
|
|
|
228
240
|
defaultVariants: {
|
|
229
241
|
interactive: false,
|
|
230
242
|
size: "lg",
|
|
231
|
-
variant: "single"
|
|
243
|
+
variant: "single",
|
|
244
|
+
wrapLines: true
|
|
232
245
|
}
|
|
233
246
|
});
|
|
234
247
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeSnippet.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/CodeSnippet.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst codeSnippetSlotRecipe = defineSlotRecipe({\n className: 'code-snippet',\n slots: [\n 'root',\n 'content',\n 'copyButton',\n 'copyButtonWrapper',\n 'showMoreContainer',\n 'showMoreGradient',\n 'showMoreButton',\n ],\n base: {\n root: {\n background: 'background/secondary',\n },\n content: {\n flex: '1',\n minWidth: 0,\n },\n copyButton: {\n background: 'background/secondary',\n color: 'icon/secondary',\n cursor: 'pointer',\n _hover: {\n background: 'background/hover',\n color: 'icon/primary',\n _active: {\n background: 'background/active',\n color: 'icon/primary',\n },\n },\n _active: {\n background: 'background/active',\n color: 'icon/primary',\n },\n _focusVisible: {\n outlineOffset: '-3px',\n },\n },\n },\n variants: {\n variant: {\n inline: {\n root: {\n alignItems: 'center',\n borderRadius: '2',\n color: 'text/body',\n display: 'inline-flex',\n paddingBlock: '2',\n paddingInline: '6',\n whiteSpace: 'nowrap',\n },\n },\n single: {\n root: {\n alignItems: 'center',\n borderRadius: '4',\n display: 'flex',\n height: '40',\n isolation: 'isolate',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n content: {\n alignItems: 'center',\n display: 'flex',\n height: '40',\n overflow: 'hidden',\n paddingInlineStart: '16',\n position: 'relative',\n _after: {\n background: 'linear-gradient(to left, var(--colors-background-secondary), transparent)',\n content: '\"\"',\n height: '40',\n pointerEvents: 'none',\n position: 'absolute',\n right: 0,\n top: 0,\n width: '8',\n },\n },\n copyButton: {\n flexShrink: '0',\n padding: '12',\n },\n },\n multi: {\n root: {\n borderRadius: '4',\n display: 'flex',\n flexDirection: 'column',\n padding: '16',\n position: 'relative',\n },\n content: {\n color: 'text/body',\n overflowY: 'auto',\n transition: 'max-height 0.3s ease',\n whiteSpace: 'pre-wrap',\n },\n copyButton: {\n borderRadius: '4',\n overflow: 'hidden',\n padding: '8',\n },\n copyButtonWrapper: {\n background: 'background/secondary',\n padding: '4',\n position: 'absolute',\n right: 0,\n top: 0,\n },\n showMoreContainer: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-end',\n },\n showMoreGradient: {\n background: 'linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)',\n borderBottomRadius: '4',\n bottom: 0,\n height: '40',\n left: 0,\n pointerEvents: 'none',\n position: 'absolute',\n right: 0,\n },\n showMoreButton: {\n alignItems: 'center',\n background: 'background/secondary',\n borderRadius: '4',\n color: 'text/secondary',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: 'body',\n gap: '4',\n justifyContent: 'center',\n minWidth: '64',\n paddingBlock: '8',\n paddingInline: '12',\n position: 'relative',\n textStyle: 'comp/button/md',\n _hover: {\n background: 'background/hover',\n color: 'text/primary',\n _active: {\n background: 'background/active',\n color: 'text/primary',\n overflow: 'hidden',\n },\n },\n _active: {\n background: 'background/active',\n color: 'text/primary',\n overflow: 'hidden',\n },\n _focusVisible: {\n outlineOffset: '-3px',\n },\n },\n },\n },\n size: {\n md: {\n root: { textStyle: 'code/md' },\n content: { textStyle: 'code/md' },\n },\n lg: {\n root: { textStyle: 'code/lg' },\n content: { textStyle: 'code/lg' },\n },\n },\n interactive: {\n true: {},\n false: {},\n },\n hasShowMore: {\n true: {},\n false: {},\n },\n isExpanded: {\n true: {},\n false: {},\n },\n },\n compoundVariants: [\n {\n variant: 'inline',\n interactive: true,\n css: {\n root: {\n cursor: 'pointer',\n userSelect: 'none',\n '&:hover:not(:active)': {\n background: 'background/hover',\n },\n '&:active': {\n background: 'background/active',\n },\n },\n },\n },\n {\n variant: 'multi',\n hasShowMore: true,\n css: {\n root: { paddingBlockEnd: 0, paddingInlineEnd: '8' },\n },\n },\n {\n variant: 'multi',\n hasShowMore: true,\n isExpanded: false,\n css: {\n showMoreContainer: { bottom: 0, left: 0, position: 'absolute', right: 0 },\n },\n },\n {\n variant: 'multi',\n hasShowMore: true,\n isExpanded: true,\n css: {\n root: { padding: 0, paddingInlineEnd: 0 },\n content: { overflow: 'auto', padding: '16', paddingBlockEnd: 0 },\n showMoreContainer: { position: 'relative' },\n },\n },\n ],\n defaultVariants: {\n interactive: false,\n size: 'lg',\n variant: 'single',\n },\n});\n\nexport default codeSnippetSlotRecipe;\n"],"mappings":";;AAEA,IAAM,wBAAwB,iBAAiB;CAC7C,WAAW;CACX,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,MAAM;EACJ,MAAM,EACJ,YAAY,uBACd;EACA,SAAS;GACP,MAAM;GACN,UAAU;EACZ;EACA,YAAY;GACV,YAAY;GACZ,OAAO;GACP,QAAQ;GACR,QAAQ;IACN,YAAY;IACZ,OAAO;IACP,SAAS;KACP,YAAY;KACZ,OAAO;IACT;GACF;GACA,SAAS;IACP,YAAY;IACZ,OAAO;GACT;GACA,eAAe,EACb,eAAe,OACjB;EACF;CACF;CACA,UAAU;EACR,SAAS;GACP,QAAQ,EACN,MAAM;IACJ,YAAY;IACZ,cAAc;IACd,OAAO;IACP,SAAS;IACT,cAAc;IACd,eAAe;IACf,YAAY;GACd,EACF;GACA,QAAQ;IACN,MAAM;KACJ,YAAY;KACZ,cAAc;KACd,SAAS;KACT,QAAQ;KACR,WAAW;KACX,UAAU;KACV,YAAY;IACd;IACA,SAAS;KACP,YAAY;KACZ,SAAS;KACT,QAAQ;KACR,UAAU;KACV,oBAAoB;KACpB,UAAU;KACV,QAAQ;MACN,YAAY;MACZ,SAAS;MACT,QAAQ;MACR,eAAe;MACf,UAAU;MACV,OAAO;MACP,KAAK;MACL,OAAO;KACT;IACF;IACA,YAAY;KACV,YAAY;KACZ,SAAS;IACX;GACF;GACA,OAAO;IACL,MAAM;KACJ,cAAc;KACd,SAAS;KACT,eAAe;KACf,SAAS;KACT,UAAU;IACZ;IACA,SAAS;KACP,OAAO;KACP,WAAW;KACX,YAAY;KACZ,YAAY;IACd;IACA,YAAY;KACV,cAAc;KACd,UAAU;KACV,SAAS;IACX;IACA,mBAAmB;KACjB,YAAY;KACZ,SAAS;KACT,UAAU;KACV,OAAO;KACP,KAAK;IACP;IACA,mBAAmB;KACjB,YAAY;KACZ,SAAS;KACT,gBAAgB;IAClB;IACA,kBAAkB;KAChB,YAAY;KACZ,oBAAoB;KACpB,QAAQ;KACR,QAAQ;KACR,MAAM;KACN,eAAe;KACf,UAAU;KACV,OAAO;IACT;IACA,gBAAgB;KACd,YAAY;KACZ,YAAY;KACZ,cAAc;KACd,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,KAAK;KACL,gBAAgB;KAChB,UAAU;KACV,cAAc;KACd,eAAe;KACf,UAAU;KACV,WAAW;KACX,QAAQ;MACN,YAAY;MACZ,OAAO;MACP,SAAS;OACP,YAAY;OACZ,OAAO;OACP,UAAU;MACZ;KACF;KACA,SAAS;MACP,YAAY;MACZ,OAAO;MACP,UAAU;KACZ;KACA,eAAe,EACb,eAAe,OACjB;IACF;GACF;EACF;EACA,MAAM;GACJ,IAAI;IACF,MAAM,EAAE,WAAW,UAAU;IAC7B,SAAS,EAAE,WAAW,UAAU;GAClC;GACA,IAAI;IACF,MAAM,EAAE,WAAW,UAAU;IAC7B,SAAS,EAAE,WAAW,UAAU;GAClC;EACF;EACA,aAAa;GACX,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,aAAa;GACX,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,YAAY;GACV,MAAM,CAAC;GACP,OAAO,CAAC;EACV;CACF;CACA,kBAAkB;
|
|
1
|
+
{"version":3,"file":"CodeSnippet.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/CodeSnippet.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst codeSnippetSlotRecipe = defineSlotRecipe({\n className: 'code-snippet',\n slots: [\n 'root',\n 'content',\n 'copyButton',\n 'copyButtonWrapper',\n 'showMoreContainer',\n 'showMoreGradient',\n 'showMoreButton',\n ],\n base: {\n root: {\n background: 'background/secondary',\n },\n content: {\n flex: '1',\n minWidth: 0,\n },\n copyButton: {\n background: 'background/secondary',\n color: 'icon/secondary',\n cursor: 'pointer',\n _hover: {\n background: 'background/hover',\n color: 'icon/primary',\n _active: {\n background: 'background/active',\n color: 'icon/primary',\n },\n },\n _active: {\n background: 'background/active',\n color: 'icon/primary',\n },\n _focusVisible: {\n outlineOffset: '-3px',\n },\n },\n },\n variants: {\n variant: {\n inline: {\n root: {\n alignItems: 'center',\n borderRadius: '2',\n color: 'text/body',\n display: 'inline-flex',\n paddingBlock: '2',\n paddingInline: '6',\n whiteSpace: 'nowrap',\n },\n },\n single: {\n root: {\n alignItems: 'center',\n borderRadius: '4',\n display: 'flex',\n height: '40',\n isolation: 'isolate',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n content: {\n alignItems: 'center',\n display: 'flex',\n height: '40',\n overflow: 'hidden',\n paddingInlineStart: '16',\n position: 'relative',\n _after: {\n background: 'linear-gradient(to left, var(--colors-background-secondary), transparent)',\n content: '\"\"',\n height: '40',\n pointerEvents: 'none',\n position: 'absolute',\n right: 0,\n top: 0,\n width: '8',\n },\n },\n copyButton: {\n flexShrink: '0',\n padding: '12',\n },\n },\n multi: {\n root: {\n borderRadius: '4',\n display: 'flex',\n flexDirection: 'column',\n padding: '16',\n position: 'relative',\n },\n content: {\n color: 'text/body',\n overflowY: 'auto',\n transition: 'max-height 0.3s ease',\n whiteSpace: 'pre-wrap',\n },\n copyButton: {\n borderRadius: '4',\n overflow: 'hidden',\n padding: '8',\n },\n copyButtonWrapper: {\n background: 'background/secondary',\n padding: '4',\n position: 'absolute',\n right: 0,\n top: 0,\n },\n showMoreContainer: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'flex-end',\n },\n showMoreGradient: {\n background: 'linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)',\n borderBottomRadius: '4',\n bottom: 0,\n height: '40',\n left: 0,\n pointerEvents: 'none',\n position: 'absolute',\n right: 0,\n },\n showMoreButton: {\n alignItems: 'center',\n background: 'background/secondary',\n borderRadius: '4',\n color: 'text/secondary',\n cursor: 'pointer',\n display: 'flex',\n fontFamily: 'body',\n gap: '4',\n justifyContent: 'center',\n minWidth: '64',\n paddingBlock: '8',\n paddingInline: '12',\n position: 'relative',\n textStyle: 'comp/button/md',\n _hover: {\n background: 'background/hover',\n color: 'text/primary',\n _active: {\n background: 'background/active',\n color: 'text/primary',\n overflow: 'hidden',\n },\n },\n _active: {\n background: 'background/active',\n color: 'text/primary',\n overflow: 'hidden',\n },\n _focusVisible: {\n outlineOffset: '-3px',\n },\n },\n },\n },\n size: {\n md: {\n root: { textStyle: 'code/md' },\n content: { textStyle: 'code/md' },\n },\n lg: {\n root: { textStyle: 'code/lg' },\n content: { textStyle: 'code/lg' },\n },\n },\n interactive: {\n true: {},\n false: {},\n },\n hasShowMore: {\n true: {},\n false: {},\n },\n wrapLines: {\n true: {},\n false: {},\n },\n isExpanded: {\n true: {},\n false: {},\n },\n },\n compoundVariants: [\n // Indented code (YAML, shell) loses its structure when a long line wraps: the continuation starts\n // at the left edge, so a nested key reads like a top-level one. `wrapLines={false}` keeps lines whole\n // behind a horizontal scrollbar instead. Only `multi` wraps in the first place.\n {\n variant: 'multi',\n wrapLines: false,\n css: {\n content: {\n overflowX: 'auto',\n whiteSpace: 'pre',\n },\n },\n },\n {\n variant: 'inline',\n interactive: true,\n css: {\n root: {\n cursor: 'pointer',\n userSelect: 'none',\n '&:hover:not(:active)': {\n background: 'background/hover',\n },\n '&:active': {\n background: 'background/active',\n },\n },\n },\n },\n {\n variant: 'multi',\n hasShowMore: true,\n css: {\n root: { paddingBlockEnd: 0, paddingInlineEnd: '8' },\n },\n },\n {\n variant: 'multi',\n hasShowMore: true,\n isExpanded: false,\n css: {\n showMoreContainer: { bottom: 0, left: 0, position: 'absolute', right: 0 },\n },\n },\n {\n variant: 'multi',\n hasShowMore: true,\n isExpanded: true,\n css: {\n root: { padding: 0, paddingInlineEnd: 0 },\n content: { overflow: 'auto', padding: '16', paddingBlockEnd: 0 },\n showMoreContainer: { position: 'relative' },\n },\n },\n ],\n defaultVariants: {\n interactive: false,\n size: 'lg',\n variant: 'single',\n wrapLines: true,\n },\n});\n\nexport default codeSnippetSlotRecipe;\n"],"mappings":"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"}
|