@xyd-js/components 0.0.0-build-099b7bb-20250918135344 → 0.0.0-build-9f87f13-20250930210637
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/CHANGELOG.md +2 -2
- package/dist/{Button-Dv56kC7u.js → Button-fMF3BbTS.js} +2 -2
- package/dist/{Button-Dv56kC7u.js.map → Button-fMF3BbTS.js.map} +1 -1
- package/dist/{CodeSample-CA5uae4s.js → CodeSample-BvMpEdYx.js} +2 -2
- package/dist/{CodeSample-CA5uae4s.js.map → CodeSample-BvMpEdYx.js.map} +1 -1
- package/dist/{Icon-B2o-k_o9.js → Icon-BECiB8p6.js} +2 -2
- package/dist/{Icon-B2o-k_o9.js.map → Icon-BECiB8p6.js.map} +1 -1
- package/dist/{PageFirstSlide-EZGQLHOE.js → PageFirstSlide-B5TKIFNT.js} +2 -2
- package/dist/{PageFirstSlide-EZGQLHOE.js.map → PageFirstSlide-B5TKIFNT.js.map} +1 -1
- package/dist/{TabsAnalytics-NM3C0FHY.js → TabsAnalytics-pSll2pNA.js} +2 -2
- package/dist/{TabsAnalytics-NM3C0FHY.js.map → TabsAnalytics-pSll2pNA.js.map} +1 -1
- package/dist/{Update-CdlM6KC1.js → Update-F_-paxNc.js} +2 -2
- package/dist/{Update-CdlM6KC1.js.map → Update-F_-paxNc.js.map} +1 -1
- package/dist/{VideoGuide-yKq_9O3J.js → VideoGuide-mnR1NnMY.js} +2 -2
- package/dist/{VideoGuide-yKq_9O3J.js.map → VideoGuide-mnR1NnMY.js.map} +1 -1
- package/dist/{_rollupPluginBabelHelpers-Cg9WiRr8.js → _rollupPluginBabelHelpers-CKM-H-qJ.js} +1 -1
- package/dist/_rollupPluginBabelHelpers-CKM-H-qJ.js.map +1 -0
- package/dist/coder.d.ts +1 -0
- package/dist/coder.js +1 -1
- package/dist/content.d.ts +1 -0
- package/dist/content.js +1 -1
- package/dist/index.css +58 -58
- package/dist/layouts.js +1 -1
- package/dist/pages.js +1 -1
- package/dist/system.js +1 -1
- package/dist/{useUXClick-BNCn9KQ0.js → useUXClick-DqZOqZ6b.js} +2 -2
- package/dist/{useUXClick-BNCn9KQ0.js.map → useUXClick-DqZOqZ6b.js.map} +1 -1
- package/dist/{useUXEvents-HrxnxyD6.js → useUXEvents-zrExjrQz.js} +1 -1
- package/dist/{useUXEvents-HrxnxyD6.js.map → useUXEvents-zrExjrQz.js.map} +1 -1
- package/dist/{useUXScrollDepth-_OeUmapB.js → useUXScrollDepth-cHzHGxha.js} +1 -1
- package/dist/{useUXScrollDepth-_OeUmapB.js.map → useUXScrollDepth-cHzHGxha.js.map} +1 -1
- package/dist/uxsdk.js +1 -1
- package/dist/writer.js +1 -1
- package/package.json +2 -2
- package/src/coder/CodeSample/CodeSample.tsx +5 -1
- package/src/coder/CodeTabs/CodeTabs.tsx +120 -105
- package/dist/_rollupPluginBabelHelpers-Cg9WiRr8.js.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useUXScrollDepth-
|
|
1
|
+
{"version":3,"file":"useUXScrollDepth-cHzHGxha.js","sources":["../src/uxsdk/useUXScrollDepth.ts"],"sourcesContent":["import React, {useEffect, useRef} from \"react\";\n\nexport interface ScrollDepthOptions {\n thresholds?: number[]; // Default: [25, 50, 75, 100]\n onDepthReached?: (depth: number) => void;\n}\n\nexport function useUXScrollDepth(\n ref: React.RefObject<HTMLElement | null>, \n options: ScrollDepthOptions = {}\n) {\n const { thresholds = [25, 50, 75, 100], onDepthReached } = options;\n const reachedDepthsRef = useRef<Set<number>>(new Set());\n\n useEffect(() => {\n if (!ref.current) {\n return\n }\n\n function handleScroll() {\n const element = ref.current;\n if (!element) return;\n\n const { scrollTop, scrollHeight, clientHeight } = element;\n \n // Calculate current scroll percentage\n const scrollableHeight = scrollHeight - clientHeight;\n if (scrollableHeight <= 0) return;\n \n const scrollPercentage = Math.round((scrollTop / scrollableHeight) * 100);\n \n // Check which thresholds have been reached\n thresholds.forEach(threshold => {\n if (scrollPercentage >= threshold && !reachedDepthsRef.current.has(threshold)) {\n reachedDepthsRef.current.add(threshold);\n onDepthReached?.(threshold);\n }\n });\n }\n\n const element = ref.current;\n element.addEventListener('scroll', handleScroll);\n\n return () => {\n element.removeEventListener('scroll', handleScroll);\n };\n }, [ref.current, thresholds, onDepthReached]);\n}\n\n"],"names":["useUXScrollDepth","ref","options","_options$thresholds","thresholds","onDepthReached","reachedDepthsRef","useRef","Set","useEffect","current","element","addEventListener","handleScroll","removeEventListener","scrollTop","scrollableHeight","scrollHeight","clientHeight","scrollPercentage","Math","round","forEach","threshold","has","add"],"mappings":"uDAOgBA,EACZC,GACgC,IAAhCC,yDAA8B,CAAA,EAE9BC,EAA2DD,EAAnDE,WAAAA,OAAU,IAAAD,EAAG,CAAC,GAAI,GAAI,GAAI,KAAIA,EAAEE,EAAmBH,EAAnBG,eAClCC,EAAmBC,EAAoB,IAAIC,KAEjDC,EAAU,WACN,GAAKR,EAAIS,QAAT,CAyBA,IAAMC,EAAUV,EAAIS,QAGpB,OAFAC,EAAQC,iBAAiB,SAAUC,GAE5B,WACHF,EAAQG,oBAAoB,SAAUD,EAC1C,CA5BA,CAEA,SAASA,IACL,IAAMF,EAAUV,EAAIS,QACpB,GAAKC,EAAL,CAEA,IAAQI,EAA0CJ,EAA1CI,UAGFC,EAH4CL,EAA/BM,aAA+BN,EAAjBO,aAIjC,KAAIF,GAAoB,GAAxB,CAEA,IAAMG,EAAmBC,KAAKC,MAAON,EAAYC,EAAoB,KAGrEZ,EAAWkB,QAAQ,SAAAC,GACXJ,GAAoBI,IAAcjB,EAAiBI,QAAQc,IAAID,KAC/DjB,EAAiBI,QAAQe,IAAIF,GAC7BlB,SAAAA,EAAiBkB,GAEzB,EAV2B,CANb,CAiBlB,CAQJ,EAAG,CAACtB,EAAIS,QAASN,EAAYC,GACjC"}
|
package/dist/uxsdk.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{E as EVENT_COMPONENT_TAB_CHANGE,u as useUXEvents}from"./useUXEvents-
|
|
1
|
+
export{E as EVENT_COMPONENT_TAB_CHANGE,u as useUXEvents}from"./useUXEvents-zrExjrQz.js";export{u as useUXClick}from"./useUXClick-DqZOqZ6b.js";export{u as useUXScrollDepth}from"./useUXScrollDepth-cHzHGxha.js";import{useRef as e,useCallback as r,useEffect as t}from"react";import"openux-js";import"./_rollupPluginBabelHelpers-CKM-H-qJ.js";function n(n,u,c){var o=e(!1),i=e(!1),s=e(null),l=e(0),a=r(function(){var e=Date.now();e-l.current>1e3&&(o.current=!0,l.current=e,u())},[u]),m=r(function(){s.current&&clearTimeout(s.current),s.current=setTimeout(function(){o.current=!1,s.current=null},50)},[]);t(function(){if(n.current)return n.current.addEventListener("mouseenter",a),n.current.addEventListener("mouseleave",m),function(){n.current&&(n.current.removeEventListener("mouseenter",a),n.current.removeEventListener("mouseleave",m)),s.current&&clearTimeout(s.current)}},[n.current,a,m]);var v=r(function(){s.current&&(clearTimeout(s.current),s.current=null),i.current=!1,o.current&&(o.current=!1,i.current=!0,c())},[c]);t(function(){return document.addEventListener("visibilitychange",v),function(){document.removeEventListener("visibilitychange",v),s.current&&clearTimeout(s.current)}},[v])}export{n as useUXUnreachableElementTracker};
|
|
2
2
|
//# sourceMappingURL=uxsdk.js.map
|
package/dist/writer.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{A as Anchor,B as Badge,c as Banner,G as GuideCard,H as Heading,I as IconSocial,L as List,a as ListOl,N as NavLinks,S as Steps,T as Table,b as Tabs,V as VideoGuide}from"./VideoGuide-
|
|
1
|
+
export{A as Anchor,B as Badge,c as Banner,G as GuideCard,H as Heading,I as IconSocial,L as List,a as ListOl,N as NavLinks,S as Steps,T as Table,b as Tabs,V as VideoGuide}from"./VideoGuide-mnR1NnMY.js";export{B as Blockquote,c as Breadcrumbs,a as Callout,d as Card,b as Code,C as ColorSchemeButton,D as Details,H as Hr,I as Image,U as Update,u as useColorScheme}from"./Update-F_-paxNc.js";export{B as Button}from"./Button-fMF3BbTS.js";import{I as e,a as r}from"./Icon-BECiB8p6.js";export{b as IconProvider}from"./Icon-BECiB8p6.js";import t from"react";export{T as Text}from"./TabsAnalytics-pSll2pNA.js";import"./useUXEvents-zrExjrQz.js";import"./_rollupPluginBabelHelpers-CKM-H-qJ.js";import"radix-ui";import"lucide-react";import"./useUXClick-DqZOqZ6b.js";import"openux-js";function s(e){return e}function o(e){var a=e.children,r=e.className;return t.createElement("pre",{className:"".concat("p1vb39qj"," ").concat(r||"")},a)}function n(e){return e}var i="TocCard-module_TocCardHost__pT0XJ";function l(a){var r=a.title,s=a.description,o=a.href,n=a.className,c=a.icon,l=a.as||m;return t.createElement("xyd-toccard",{className:"".concat(i," ").concat(n||"")},t.createElement("div",{part:"container"},t.createElement(l,{part:"link",href:o,target:"_blank",rel:"noreferrer"},t.createElement("div",{part:"title-container"},t.createElement("div",{part:"title"},r),c&&t.createElement(e,{name:c,size:16})),t.createElement("div",{part:"description"},s))))}function m(e){var a=e.children,s=e.href,o=r(e,["children","href"]);return t.createElement("a",Object.assign({href:s},o),a)}export{s as DetailsPropsProps,e as Icon,o as Pre,n as TabsProps,l as TocCard};
|
|
2
2
|
//# sourceMappingURL=writer.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyd-js/components",
|
|
3
|
-
"version": "0.0.0-build-
|
|
3
|
+
"version": "0.0.0-build-9f87f13-20250930210637",
|
|
4
4
|
"description": "",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@code-hike/lighter": "^1.0.3",
|
|
50
50
|
"openux-js": "0.0.0-pre.1",
|
|
51
51
|
"react": "^19.1.0",
|
|
52
|
-
"@xyd-js/core": "0.0.0-build-
|
|
52
|
+
"@xyd-js/core": "0.0.0-build-9f87f13-20250930210637"
|
|
53
53
|
},
|
|
54
54
|
"devDependencies": {
|
|
55
55
|
"@linaria/core": "^6.2.0",
|
|
@@ -24,16 +24,18 @@ export interface CodeSampleProps {
|
|
|
24
24
|
descriptionHead?: string
|
|
25
25
|
descriptionContent?: string | React.ReactNode
|
|
26
26
|
descriptionIcon?: string
|
|
27
|
+
markdownFormat?: boolean
|
|
27
28
|
kind?: "secondary"
|
|
28
29
|
controlByMeta?: boolean // TODO: BETTER IN THE FUTURE
|
|
29
30
|
}
|
|
30
31
|
|
|
31
|
-
const CodeContext = React.createContext<{
|
|
32
|
+
export const CodeContext = React.createContext<{
|
|
32
33
|
size?: "full"
|
|
33
34
|
lineNumbers?: boolean
|
|
34
35
|
descriptionHead?: string
|
|
35
36
|
descriptionContent?: string | React.ReactNode
|
|
36
37
|
descriptionIcon?: string
|
|
38
|
+
markdownFormat?: boolean
|
|
37
39
|
}>({})
|
|
38
40
|
|
|
39
41
|
export function CodeSample(props: CodeSampleProps) {
|
|
@@ -58,6 +60,7 @@ function $ThemedCodeSample(props: CodeSampleProps) {
|
|
|
58
60
|
descriptionHead: props.descriptionHead,
|
|
59
61
|
descriptionContent: props.descriptionContent,
|
|
60
62
|
descriptionIcon: props.descriptionIcon,
|
|
63
|
+
markdownFormat: props.markdownFormat,
|
|
61
64
|
}}>
|
|
62
65
|
<Code.Pre
|
|
63
66
|
codeblock={highlighted[0]}
|
|
@@ -85,6 +88,7 @@ function $ThemedCodeSample(props: CodeSampleProps) {
|
|
|
85
88
|
descriptionHead: props.descriptionHead,
|
|
86
89
|
descriptionContent: props.descriptionContent,
|
|
87
90
|
descriptionIcon: props.descriptionIcon,
|
|
91
|
+
markdownFormat: props.markdownFormat,
|
|
88
92
|
}}>
|
|
89
93
|
<$CodeSampleTabs
|
|
90
94
|
description={props.description}
|
|
@@ -1,128 +1,143 @@
|
|
|
1
|
-
import React, { useState, useEffect } from "react";
|
|
2
|
-
import {Tabs as TabsPrimitive} from "radix-ui"; // TODO: remove and use separation
|
|
3
|
-
import {
|
|
4
|
-
HighlightedCode,
|
|
5
|
-
} from "codehike/code"
|
|
1
|
+
import React, { useState, useEffect, useContext } from "react";
|
|
2
|
+
import { Tabs as TabsPrimitive } from "radix-ui"; // TODO: remove and use separation
|
|
3
|
+
import { HighlightedCode } from "codehike/code";
|
|
6
4
|
|
|
7
|
-
import {
|
|
8
|
-
CodeCopy,
|
|
9
|
-
} from "../CodeCopy";
|
|
5
|
+
import { CodeCopy } from "../CodeCopy";
|
|
10
6
|
import * as cn from "./CodeTabs.styles"; // TODO: style by highlighted?
|
|
11
7
|
import { SyntaxHighlightedCode } from "../CodeTheme/CodeTheme";
|
|
12
8
|
import { useCodeSampleAnalytics } from "../CodeSample/CodeSampleAnalytics";
|
|
13
9
|
import { useUXEvents } from "../../uxsdk";
|
|
10
|
+
import { CodeContext } from "../CodeSample/CodeSample";
|
|
14
11
|
|
|
15
12
|
export interface CodeTabsProps {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
13
|
+
description: string;
|
|
14
|
+
highlighted: SyntaxHighlightedCode[];
|
|
15
|
+
className?: string;
|
|
16
|
+
controlByMeta?: boolean; // TODO: BETTER IN THE FUTURE
|
|
20
17
|
}
|
|
21
18
|
|
|
22
19
|
export function withCodeTabs(PreComponent) {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
return null
|
|
48
|
-
}
|
|
20
|
+
return function CodeTabs(props: CodeTabsProps) {
|
|
21
|
+
const isSingle = props?.highlighted?.length === 1 && !props.description;
|
|
22
|
+
const defaultValue =
|
|
23
|
+
props.highlighted[0]?.meta || props.highlighted[0]?.lang;
|
|
24
|
+
const [activeTab, setActiveTab] = useState(defaultValue);
|
|
25
|
+
const {markdownFormat} = useContext(CodeContext);
|
|
26
|
+
|
|
27
|
+
const codeSampleAnalytics = useCodeSampleAnalytics();
|
|
28
|
+
const ux = useUXEvents();
|
|
29
|
+
|
|
30
|
+
// Reset active tab when highlighted prop changes
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
setActiveTab(defaultValue);
|
|
33
|
+
}, [defaultValue]);
|
|
34
|
+
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
codeSampleAnalytics.setActiveTab(activeTab);
|
|
37
|
+
}, []);
|
|
38
|
+
|
|
39
|
+
function changeTab(value: string) {
|
|
40
|
+
setActiveTab(value);
|
|
41
|
+
codeSampleAnalytics.setActiveTab(value);
|
|
42
|
+
ux.docs.code.tab_change({ tab: value });
|
|
43
|
+
}
|
|
49
44
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
part="root"
|
|
54
|
-
data-single={String(isSingle)}
|
|
55
|
-
data-nodescription={!props.description ? "true" : undefined}
|
|
56
|
-
className={`${cn.CodeTabsRoot}`}
|
|
57
|
-
style={props.highlighted[0]?.style}
|
|
58
|
-
value={activeTab}
|
|
59
|
-
onValueChange={changeTab}
|
|
60
|
-
>
|
|
61
|
-
<$LanguageTabSwitcher
|
|
62
|
-
description={props.description}
|
|
63
|
-
highlighted={props.highlighted}
|
|
64
|
-
/>
|
|
45
|
+
if (props?.highlighted?.length === 0) {
|
|
46
|
+
return null;
|
|
47
|
+
}
|
|
65
48
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
style={codeblock?.style || codeblock?.style}
|
|
70
|
-
codeblock={codeblock}
|
|
71
|
-
/>
|
|
72
|
-
</TabsPrimitive.Content>
|
|
73
|
-
))}
|
|
74
|
-
</TabsPrimitive.Root>
|
|
75
|
-
</xyd-codetabs>
|
|
76
|
-
)
|
|
49
|
+
let ContentRoot = TabsPrimitive.Content
|
|
50
|
+
if (markdownFormat) { // TODO: BETTER IN THE FUTURE
|
|
51
|
+
ContentRoot = React.Fragment
|
|
77
52
|
}
|
|
53
|
+
|
|
54
|
+
return (
|
|
55
|
+
<xyd-codetabs className={`${cn.CodeTabsHost} ${props.className || ""}`}>
|
|
56
|
+
<TabsPrimitive.Root
|
|
57
|
+
part="root"
|
|
58
|
+
data-single={String(isSingle)}
|
|
59
|
+
data-nodescription={!props.description ? "true" : undefined}
|
|
60
|
+
className={`${cn.CodeTabsRoot}`}
|
|
61
|
+
style={props.highlighted[0]?.style}
|
|
62
|
+
value={activeTab}
|
|
63
|
+
onValueChange={changeTab}
|
|
64
|
+
>
|
|
65
|
+
<$LanguageTabSwitcher
|
|
66
|
+
description={props.description}
|
|
67
|
+
highlighted={props.highlighted}
|
|
68
|
+
/>
|
|
69
|
+
|
|
70
|
+
{props.highlighted?.map((codeblock, i) => (
|
|
71
|
+
<ContentRoot
|
|
72
|
+
value={codeblock.meta || codeblock.lang}
|
|
73
|
+
key={i}
|
|
74
|
+
>
|
|
75
|
+
<PreComponent
|
|
76
|
+
style={codeblock?.style || codeblock?.style}
|
|
77
|
+
codeblock={codeblock}
|
|
78
|
+
/>
|
|
79
|
+
</ContentRoot>
|
|
80
|
+
))}
|
|
81
|
+
</TabsPrimitive.Root>
|
|
82
|
+
</xyd-codetabs>
|
|
83
|
+
);
|
|
84
|
+
};
|
|
78
85
|
}
|
|
79
86
|
|
|
80
87
|
interface LanguageTabSwitcherProps {
|
|
81
|
-
|
|
82
|
-
|
|
88
|
+
description: string;
|
|
89
|
+
highlighted: HighlightedCode[];
|
|
83
90
|
}
|
|
84
91
|
|
|
85
92
|
function $LanguageTabSwitcher(props: LanguageTabSwitcherProps) {
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
93
|
+
const isSingle = props?.highlighted?.length === 1 && !props.description;
|
|
94
|
+
|
|
95
|
+
const highlighted = props.highlighted.filter(
|
|
96
|
+
(item, index, self) =>
|
|
97
|
+
index ===
|
|
98
|
+
self.findIndex((t) => (t.meta || t.lang) === (item.meta || item.lang))
|
|
99
|
+
);
|
|
100
|
+
return (
|
|
101
|
+
<xyd-codetabs-languages
|
|
102
|
+
data-single={String(isSingle)}
|
|
103
|
+
className={`
|
|
94
104
|
${cn.CodeTabsLanguagesHost}
|
|
95
|
-
`}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
{props.description}
|
|
101
|
-
</div>
|
|
102
|
-
</div>
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
<TabsPrimitive.List part="languages-list">
|
|
106
|
-
{highlighted?.map(({ meta, lang }, i) => {
|
|
107
|
-
if (isSingle) {
|
|
108
|
-
return null
|
|
109
|
-
}
|
|
110
|
-
return <TabsPrimitive.Trigger
|
|
111
|
-
part="language-trigger"
|
|
112
|
-
value={meta || lang}
|
|
113
|
-
key={i}
|
|
114
|
-
>
|
|
115
|
-
{meta || lang}
|
|
116
|
-
</TabsPrimitive.Trigger>
|
|
117
|
-
})}
|
|
118
|
-
</TabsPrimitive.List>
|
|
119
|
-
|
|
120
|
-
<div part="copy">
|
|
121
|
-
{highlighted?.map((codeblock, i) => (
|
|
122
|
-
<TabsPrimitive.Content value={codeblock.meta || codeblock.lang} asChild key={i}>
|
|
123
|
-
<CodeCopy text={codeblock.value} />
|
|
124
|
-
</TabsPrimitive.Content>
|
|
125
|
-
))}
|
|
105
|
+
`}
|
|
106
|
+
>
|
|
107
|
+
{props.description && (
|
|
108
|
+
<div part="description">
|
|
109
|
+
<div part="description-item">{props.description}</div>
|
|
126
110
|
</div>
|
|
111
|
+
)}
|
|
112
|
+
|
|
113
|
+
<TabsPrimitive.List part="languages-list">
|
|
114
|
+
{highlighted?.map(({ meta, lang }, i) => {
|
|
115
|
+
if (isSingle) {
|
|
116
|
+
return null;
|
|
117
|
+
}
|
|
118
|
+
return (
|
|
119
|
+
<TabsPrimitive.Trigger
|
|
120
|
+
part="language-trigger"
|
|
121
|
+
value={meta || lang}
|
|
122
|
+
key={i}
|
|
123
|
+
>
|
|
124
|
+
{meta || lang}
|
|
125
|
+
</TabsPrimitive.Trigger>
|
|
126
|
+
);
|
|
127
|
+
})}
|
|
128
|
+
</TabsPrimitive.List>
|
|
129
|
+
|
|
130
|
+
<div part="copy">
|
|
131
|
+
{highlighted?.map((codeblock, i) => (
|
|
132
|
+
<TabsPrimitive.Content
|
|
133
|
+
value={codeblock.meta || codeblock.lang}
|
|
134
|
+
asChild
|
|
135
|
+
key={i}
|
|
136
|
+
>
|
|
137
|
+
<CodeCopy text={codeblock.value} />
|
|
138
|
+
</TabsPrimitive.Content>
|
|
139
|
+
))}
|
|
140
|
+
</div>
|
|
127
141
|
</xyd-codetabs-languages>
|
|
142
|
+
);
|
|
128
143
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"_rollupPluginBabelHelpers-Cg9WiRr8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
|