@bitrise/bitkit-v2 0.3.200 → 0.3.201
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.js +11 -4
- package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js.map +1 -1
- package/dist/theme/slot-recipes/CodeSnippet.recipe.d.ts +6 -1
- package/dist/theme/slot-recipes/CodeSnippet.recipe.js +9 -3
- package/dist/theme/slot-recipes/CodeSnippet.recipe.js.map +1 -1
- package/dist/theme/slot-recipes/index.d.ts +6 -1
- package/package.json +1 -1
|
@@ -81,16 +81,23 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
|
|
|
81
81
|
tabIndex: -1,
|
|
82
82
|
children
|
|
83
83
|
}),
|
|
84
|
-
/* @__PURE__ */ jsx(
|
|
85
|
-
|
|
86
|
-
children:
|
|
84
|
+
/* @__PURE__ */ jsx(chakra.div, {
|
|
85
|
+
css: styles.copyButtonWrapper,
|
|
86
|
+
children: /* @__PURE__ */ jsx(BitkitTooltip, {
|
|
87
|
+
text: COPY_TOOLTIP,
|
|
88
|
+
children: copyButton
|
|
89
|
+
})
|
|
87
90
|
}),
|
|
88
91
|
hasShowMore && /* @__PURE__ */ jsxs(chakra.div, {
|
|
89
92
|
css: styles.showMoreContainer,
|
|
90
93
|
children: [!isExpanded && /* @__PURE__ */ jsx(chakra.div, { css: styles.showMoreGradient }), /* @__PURE__ */ jsxs(chakra.button, {
|
|
91
94
|
onClick: handleToggleExpand,
|
|
92
95
|
css: styles.showMoreButton,
|
|
93
|
-
children: [isExpanded ? "Show less" : "Show more", /* @__PURE__ */ jsx(AssetSelectChevron, {
|
|
96
|
+
children: [isExpanded ? "Show less" : "Show more", /* @__PURE__ */ jsx(AssetSelectChevron, {
|
|
97
|
+
"data-state": isExpanded ? "open" : "closed",
|
|
98
|
+
height: "16",
|
|
99
|
+
width: "16"
|
|
100
|
+
})]
|
|
94
101
|
})]
|
|
95
102
|
})
|
|
96
103
|
]
|
|
@@ -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, 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 BaseProps {\n children: string;\n size?: 'md' | 'lg';\n textToCopy?: string;\n}\n\ninterface InlineProps extends BaseProps {\n interactive?: boolean;\n startingHeight?: never;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n interactive?: never;\n startingHeight?: number;\n variant: 'multi' | 'single';\n}\n\nexport type BitkitCodeSnippetProps = InlineProps | BlockProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n const { children, interactive, size = 'lg', startingHeight, textToCopy, variant } = props;\n\n const hasShowMore = startingHeight !== undefined;\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { copied, copy } = useClipboard({ timeout: 2000, value: textToCopy ?? children });\n\n const recipe = useSlotRecipe({ key: 'codeSnippet' });\n const styles = recipe({ size, variant, hasShowMore, isExpanded, interactive });\n\n const handleToggleExpand = () => {\n setIsExpanded((prev) => !prev);\n };\n\n const handleKeyDown = (e: KeyboardEvent) => {\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 (variant === 'inline') {\n if (!interactive) {\n return (\n <chakra.code ref={ref} css={styles.root}>\n {children}\n </chakra.code>\n );\n }\n\n return (\n <BitkitTooltip text={COPY_TOOLTIP}>\n <chakra.code ref={ref} css={styles.root} onClick={copy} onKeyDown={handleKeyDown} role=\"button\" tabIndex={0}>\n {children}\n </chakra.code>\n </BitkitTooltip>\n );\n }\n\n if (variant === 'single') {\n return (\n <chakra.div ref={ref} css={styles.root}>\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} css={styles.root}>\n <chakra.code css={styles.content} maxHeight={contentMaxHeight} tabIndex={-1}>\n {children}\n </chakra.code>\n <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\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'} />\n </chakra.button>\n </chakra.div>\n )}\n </chakra.div>\n );\n});\n\nBitkitCodeSnippet.displayName = 'BitkitCodeSnippet';\n\nexport default BitkitCodeSnippet;\n"],"mappings":";;;;;;;;;AAQA,IAAM,eAAe;AAsBrB,IAAM,oBAAoB,YAAiD,OAAO,QAAQ;CACxF,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM,gBAAgB,YAAY,YAAY;CAEpF,MAAM,cAAc,mBAAmB,KAAA;CACvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,EAAE,QAAQ,SAAS,aAAa;EAAE,SAAS;EAAM,OAAO,cAAc;EAAU,CAAC;CAGvF,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CAAC,CAC9B;EAAE;EAAM;EAAS;EAAa;EAAY;EAAa,CAAC;CAE9E,MAAM,2BAA2B;AAC/B,iBAAe,SAAS,CAAC,KAAK;;CAGhC,MAAM,iBAAiB,MAAqB;AAC1C,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,SAAM;;;CAIV,MAAM,aACJ,oBAAC,OAAO,QAAR;EAAe,cAAY;EAAc,KAAK,OAAO;EAAY,SAAS;EAAM,MAAK;YAClF,SAAS,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA,GAAG,oBAAC,UAAD,EAAU,MAAK,MAAO,CAAA;EAC5C,CAAA;AAGlB,KAAI,YAAY,UAAU;AACxB,MAAI,CAAC,YACH,QACE,oBAAC,OAAO,MAAR;GAAkB;GAAK,KAAK,OAAO;GAChC;GACW,CAAA;AAIlB,SACE,oBAAC,eAAD;GAAe,MAAM;aACnB,oBAAC,OAAO,MAAR;IAAkB;IAAK,KAAK,OAAO;IAAM,SAAS;IAAM,WAAW;IAAe,MAAK;IAAS,UAAU;IACvG;IACW,CAAA;GACA,CAAA;;AAIpB,KAAI,YAAY,SACd,QACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,KAAK,OAAO;YAAlC,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;GAAS,UAAU;GACzC;GACW,CAAA,EACd,oBAAC,eAAD;GAAe,MAAM;aAAe;GAA2B,CAAA,CACpD;;CAIjB,MAAM,mBAAmB,eAAe,CAAC,aAAa,iBAAiB,KAAA;AAEvE,QACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,KAAK,OAAO;YAAlC;GACE,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAS,WAAW;IAAkB,UAAU;IACtE;IACW,CAAA;GACd,oBAAC,eAAD;
|
|
1
|
+
{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, 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 BaseProps {\n children: string;\n size?: 'md' | 'lg';\n textToCopy?: string;\n}\n\ninterface InlineProps extends BaseProps {\n interactive?: boolean;\n startingHeight?: never;\n variant: 'inline';\n}\n\ninterface BlockProps extends BaseProps {\n interactive?: never;\n startingHeight?: number;\n variant: 'multi' | 'single';\n}\n\nexport type BitkitCodeSnippetProps = InlineProps | BlockProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n const { children, interactive, size = 'lg', startingHeight, textToCopy, variant } = props;\n\n const hasShowMore = startingHeight !== undefined;\n const [isExpanded, setIsExpanded] = useState(false);\n\n const { copied, copy } = useClipboard({ timeout: 2000, value: textToCopy ?? children });\n\n const recipe = useSlotRecipe({ key: 'codeSnippet' });\n const styles = recipe({ size, variant, hasShowMore, isExpanded, interactive });\n\n const handleToggleExpand = () => {\n setIsExpanded((prev) => !prev);\n };\n\n const handleKeyDown = (e: KeyboardEvent) => {\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 (variant === 'inline') {\n if (!interactive) {\n return (\n <chakra.code ref={ref} css={styles.root}>\n {children}\n </chakra.code>\n );\n }\n\n return (\n <BitkitTooltip text={COPY_TOOLTIP}>\n <chakra.code ref={ref} css={styles.root} onClick={copy} onKeyDown={handleKeyDown} role=\"button\" tabIndex={0}>\n {children}\n </chakra.code>\n </BitkitTooltip>\n );\n }\n\n if (variant === 'single') {\n return (\n <chakra.div ref={ref} css={styles.root}>\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} css={styles.root}>\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":";;;;;;;;;AAQA,IAAM,eAAe;AAsBrB,IAAM,oBAAoB,YAAiD,OAAO,QAAQ;CACxF,MAAM,EAAE,UAAU,aAAa,OAAO,MAAM,gBAAgB,YAAY,YAAY;CAEpF,MAAM,cAAc,mBAAmB,KAAA;CACvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAEnD,MAAM,EAAE,QAAQ,SAAS,aAAa;EAAE,SAAS;EAAM,OAAO,cAAc;EAAU,CAAC;CAGvF,MAAM,SADS,cAAc,EAAE,KAAK,eAAe,CAAC,CAC9B;EAAE;EAAM;EAAS;EAAa;EAAY;EAAa,CAAC;CAE9E,MAAM,2BAA2B;AAC/B,iBAAe,SAAS,CAAC,KAAK;;CAGhC,MAAM,iBAAiB,MAAqB;AAC1C,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,KAAE,gBAAgB;AAClB,SAAM;;;CAIV,MAAM,aACJ,oBAAC,OAAO,QAAR;EAAe,cAAY;EAAc,KAAK,OAAO;EAAY,SAAS;EAAM,MAAK;YAClF,SAAS,oBAAC,WAAD,EAAW,MAAK,MAAO,CAAA,GAAG,oBAAC,UAAD,EAAU,MAAK,MAAO,CAAA;EAC5C,CAAA;AAGlB,KAAI,YAAY,UAAU;AACxB,MAAI,CAAC,YACH,QACE,oBAAC,OAAO,MAAR;GAAkB;GAAK,KAAK,OAAO;GAChC;GACW,CAAA;AAIlB,SACE,oBAAC,eAAD;GAAe,MAAM;aACnB,oBAAC,OAAO,MAAR;IAAkB;IAAK,KAAK,OAAO;IAAM,SAAS;IAAM,WAAW;IAAe,MAAK;IAAS,UAAU;IACvG;IACW,CAAA;GACA,CAAA;;AAIpB,KAAI,YAAY,SACd,QACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,KAAK,OAAO;YAAlC,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;GAAS,UAAU;GACzC;GACW,CAAA,EACd,oBAAC,eAAD;GAAe,MAAM;aAAe;GAA2B,CAAA,CACpD;;CAIjB,MAAM,mBAAmB,eAAe,CAAC,aAAa,iBAAiB,KAAA;AAEvE,QACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,KAAK,OAAO;YAAlC;GACE,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAS,WAAW;IAAkB,UAAU;IACtE;IACW,CAAA;GACd,oBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cACtB,oBAAC,eAAD;KAAe,MAAM;eAAe;KAA2B,CAAA;IACpD,CAAA;GACZ,eACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;cAAxB,CACG,CAAC,cAAc,oBAAC,OAAO,KAAR,EAAY,KAAK,OAAO,kBAAoB,CAAA,EAC5D,qBAAC,OAAO,QAAR;KAAe,SAAS;KAAoB,KAAK,OAAO;eAAxD,CACG,aAAa,cAAc,aAC5B,oBAAC,oBAAD;MAAoB,cAAY,aAAa,SAAS;MAAU,QAAO;MAAK,OAAM;MAAO,CAAA,CAC3E;OACL;;GAEJ;;EAEf;AAEF,kBAAkB,cAAc"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const codeSnippetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "copyButton" | "showMoreContainer" | "showMoreGradient" | "showMoreButton", {
|
|
1
|
+
declare const codeSnippetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "copyButton" | "copyButtonWrapper" | "showMoreContainer" | "showMoreGradient" | "showMoreButton", {
|
|
2
2
|
variant: {
|
|
3
3
|
inline: {
|
|
4
4
|
root: {
|
|
@@ -62,6 +62,10 @@ declare const codeSnippetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefini
|
|
|
62
62
|
borderRadius: "4";
|
|
63
63
|
overflow: "hidden";
|
|
64
64
|
padding: "8";
|
|
65
|
+
};
|
|
66
|
+
copyButtonWrapper: {
|
|
67
|
+
background: "background/secondary";
|
|
68
|
+
padding: "4";
|
|
65
69
|
position: "absolute";
|
|
66
70
|
right: number;
|
|
67
71
|
top: number;
|
|
@@ -88,6 +92,7 @@ declare const codeSnippetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefini
|
|
|
88
92
|
color: "text/secondary";
|
|
89
93
|
cursor: "pointer";
|
|
90
94
|
display: "flex";
|
|
95
|
+
fontFamily: "body";
|
|
91
96
|
gap: "4";
|
|
92
97
|
justifyContent: "center";
|
|
93
98
|
minWidth: "64";
|
|
@@ -6,6 +6,7 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
|
|
|
6
6
|
"root",
|
|
7
7
|
"content",
|
|
8
8
|
"copyButton",
|
|
9
|
+
"copyButtonWrapper",
|
|
9
10
|
"showMoreContainer",
|
|
10
11
|
"showMoreGradient",
|
|
11
12
|
"showMoreButton"
|
|
@@ -96,7 +97,11 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
|
|
|
96
97
|
copyButton: {
|
|
97
98
|
borderRadius: "4",
|
|
98
99
|
overflow: "hidden",
|
|
99
|
-
padding: "8"
|
|
100
|
+
padding: "8"
|
|
101
|
+
},
|
|
102
|
+
copyButtonWrapper: {
|
|
103
|
+
background: "background/secondary",
|
|
104
|
+
padding: "4",
|
|
100
105
|
position: "absolute",
|
|
101
106
|
right: 0,
|
|
102
107
|
top: 0
|
|
@@ -123,6 +128,7 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
|
|
|
123
128
|
color: "text/secondary",
|
|
124
129
|
cursor: "pointer",
|
|
125
130
|
display: "flex",
|
|
131
|
+
fontFamily: "body",
|
|
126
132
|
gap: "4",
|
|
127
133
|
justifyContent: "center",
|
|
128
134
|
minWidth: "64",
|
|
@@ -178,8 +184,8 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
|
|
|
178
184
|
css: { root: {
|
|
179
185
|
cursor: "pointer",
|
|
180
186
|
userSelect: "none",
|
|
181
|
-
|
|
182
|
-
|
|
187
|
+
"&:hover:not(:active)": { background: "background/hover" },
|
|
188
|
+
"&:active": { background: "background/active" }
|
|
183
189
|
} }
|
|
184
190
|
},
|
|
185
191
|
{
|
|
@@ -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: ['root'
|
|
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":"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"}
|
|
@@ -283,7 +283,7 @@ declare const slotRecipes: {
|
|
|
283
283
|
};
|
|
284
284
|
};
|
|
285
285
|
}>;
|
|
286
|
-
codeSnippet: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "copyButton" | "showMoreContainer" | "showMoreGradient" | "showMoreButton", {
|
|
286
|
+
codeSnippet: import('@chakra-ui/react').SlotRecipeDefinition<"content" | "root" | "copyButton" | "copyButtonWrapper" | "showMoreContainer" | "showMoreGradient" | "showMoreButton", {
|
|
287
287
|
variant: {
|
|
288
288
|
inline: {
|
|
289
289
|
root: {
|
|
@@ -347,6 +347,10 @@ declare const slotRecipes: {
|
|
|
347
347
|
borderRadius: "4";
|
|
348
348
|
overflow: "hidden";
|
|
349
349
|
padding: "8";
|
|
350
|
+
};
|
|
351
|
+
copyButtonWrapper: {
|
|
352
|
+
background: "background/secondary";
|
|
353
|
+
padding: "4";
|
|
350
354
|
position: "absolute";
|
|
351
355
|
right: number;
|
|
352
356
|
top: number;
|
|
@@ -373,6 +377,7 @@ declare const slotRecipes: {
|
|
|
373
377
|
color: "text/secondary";
|
|
374
378
|
cursor: "pointer";
|
|
375
379
|
display: "flex";
|
|
380
|
+
fontFamily: "body";
|
|
376
381
|
gap: "4";
|
|
377
382
|
justifyContent: "center";
|
|
378
383
|
minWidth: "64";
|