@tuwaio/docs-ui 0.0.2 → 1.0.0-fix-components-alpha.1.c574a38
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/index.cjs +2 -1
- package/dist/index.d.cts +125 -2
- package/dist/index.d.ts +125 -2
- package/dist/index.js +2 -1
- package/package.json +11 -3
package/dist/index.cjs
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
'use strict';var novaCore=require('@tuwaio/nova-core'),jsxRuntime=require('react/jsx-runtime');function a({href:e,children:t}){return jsxRuntime.jsx("a",{className:novaCore.cn("tuwadocs:font-medium tuwadocs:text-[var(--tuwa-text-accent)]","tuwadocs:transition-all tuwadocs:hover:underline tuwadocs:underline-offset-4"),href:e,target:"_blank",rel:"noopener noreferrer",children:t})}
|
|
1
|
+
'use strict';var novaCore=require('@tuwaio/nova-core'),outline=require('@heroicons/react/24/outline'),jsxRuntime=require('react/jsx-runtime'),reactSyntaxHighlighter=require('react-syntax-highlighter'),V=require('next/dynamic'),E=require('next/image'),nextraThemeDocs=require('nextra-theme-docs'),components=require('nextra/components');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var V__default=/*#__PURE__*/_interopDefault(V);var E__default=/*#__PURE__*/_interopDefault(E);var b=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(o,t)=>(typeof require<"u"?require:o)[t]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});function N({isCopied:e,onCopy:o}){return jsxRuntime.jsx("button",{onClick:o,type:"button",className:novaCore.cn("h-6 w-6 cursor-pointer transition-colors",e?"text-[var(--tuwa-success-icon)]":"text-[var(--tuwa-text-secondary)] hover:text-[var(--tuwa-text-primary)]"),children:e?jsxRuntime.jsx(outline.CheckCircleIcon,{}):jsxRuntime.jsx(outline.Square2StackIcon,{})})}function x({title:e,titleIcons:o,children:t,textToCopy:a}){let{isCopied:c,copy:f}=novaCore.useCopyToClipboard(1500);return jsxRuntime.jsxs("div",{className:novaCore.cn("group overflow-hidden rounded-lg border","border-[var(--tuwa-border-secondary)] bg-[var(--tuwa-bg-primary)]"),children:[jsxRuntime.jsxs("div",{className:novaCore.cn("flex items-center justify-between gap-4 px-4 py-2","border-b border-[var(--tuwa-border-secondary)] bg-[var(--tuwa-bg-secondary)]"),children:[jsxRuntime.jsxs("div",{className:"flex items-center gap-2",children:[jsxRuntime.jsx("div",{className:"h-[20px] w-[20px] text-[var(--tuwa-text-secondary)]",children:o}),jsxRuntime.jsx("p",{className:"text-sm font-medium text-[var(--tuwa-text-primary)]",children:e})]}),jsxRuntime.jsx("div",{className:"transition md:opacity-0 group-hover:opacity-100",children:jsxRuntime.jsx(N,{isCopied:c,onCopy:()=>f(a)})})]}),t]})}var _=({children:e})=>jsxRuntime.jsx(jsxRuntime.Fragment,{children:e}),s=V__default.default(()=>Promise.resolve(_),{ssr:false});function y({children:e,language:o,resolvedTheme:t}){return jsxRuntime.jsx("div",{className:"border-t border-[var(--tuwa-border-secondary)]",children:jsxRuntime.jsx(s,{children:jsxRuntime.jsx(reactSyntaxHighlighter.Prism,{language:o??"bash",customStyle:{margin:0,background:"transparent"},style:t==="dark"?b("react-syntax-highlighter/dist/esm/styles/prism").materialOceanic:b("react-syntax-highlighter/dist/esm/styles/prism").materialLight,children:String(e).replace(/\n$/,"")})})})}function ve({features:e}){return jsxRuntime.jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6 mt-12",children:e.map(o=>jsxRuntime.jsxs("div",{className:"p-6 border rounded-lg hover:shadow-lg transition-shadow",children:[jsxRuntime.jsx("div",{className:"text-2xl mb-3",children:o.icon}),jsxRuntime.jsx("h3",{className:"text-lg font-semibold mb-2",children:o.title}),jsxRuntime.jsx("p",{className:"text-gray-600 dark:text-gray-400",children:o.description})]},o.title))})}var C=[{title:"NPM",href:"https://npmjs.com/org/tuwaio",className:"hover:text-red-600 dark:hover:text-red-400",image:jsxRuntime.jsx("svg",{className:"w-4 h-4",fill:"currentColor",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{d:"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0H1.763zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113l.017-13.847z"})})}],k=[{title:"NPM",href:"https://npmjs.com/org/tuwaio",image:jsxRuntime.jsx("svg",{className:"w-4 h-4",fill:"currentColor",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{d:"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0H1.763zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113l.017-13.847z"})})},{title:"GitHub",href:"https://github.com/TuwaIO",image:jsxRuntime.jsx("svg",{className:"w-4 h-4",fill:"currentColor",viewBox:"0 0 24 24",children:jsxRuntime.jsx("path",{d:"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"})})}];function Pe({links:e}){return jsxRuntime.jsx(nextraThemeDocs.Footer,{children:jsxRuntime.jsxs("div",{className:"flex w-full flex-col items-center sm:items-start tuwa-footer-border pt-8",children:[jsxRuntime.jsxs("div",{className:"mb-6 flex items-center gap-4 w-full justify-between",children:[jsxRuntime.jsx("div",{className:"flex items-center",children:jsxRuntime.jsx(s,{children:jsxRuntime.jsx(E__default.default,{width:120,height:40,src:"https://raw.githubusercontent.com/TuwaIO/workflows/refs/heads/main/preview/tuwa_logo.svg",alt:"TUWA Logo",className:"transition-opacity duration-300"})})}),jsxRuntime.jsx("div",{className:"flex items-center gap-4 text-sm",children:(e??k).map(({title:o,href:t,image:a})=>jsxRuntime.jsxs("a",{href:t,target:"_blank",rel:"noopener noreferrer",className:"tuwa-footer-link tuwa-footer-link--npm flex items-center gap-1",children:[a,jsxRuntime.jsx("span",{className:"hidden sm:inline",children:o})]},o))})]}),jsxRuntime.jsxs("div",{className:"w-full tuwa-footer-border pt-4",children:[jsxRuntime.jsxs("div",{className:"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4",children:[jsxRuntime.jsxs("div",{className:"flex-1",children:[jsxRuntime.jsx("p",{className:"tuwa-footer-description",children:"A useful and powerful utils for building decentralized applications."}),jsxRuntime.jsx("p",{className:"tuwa-footer-license",children:"Licensed under Apache 2.0. Open source and free to use."})]}),jsxRuntime.jsxs("div",{className:"tuwa-footer-copyright",children:["\xA9 2025 - ",new Date().getFullYear()," TUWA. Built with"," ",jsxRuntime.jsx("span",{className:"tuwa-heart","aria-label":"love",children:"\u2764\uFE0F"})," ","for Web3."]})]}),jsxRuntime.jsx("div",{className:"flex flex-wrap items-center gap-3 mt-4 pt-4 tuwa-footer-border"})]})]})})}function Fe({links:e}){return jsxRuntime.jsx(nextraThemeDocs.Navbar,{logo:jsxRuntime.jsx(s,{children:jsxRuntime.jsx(E__default.default,{width:120,height:40,src:"https://raw.githubusercontent.com/TuwaIO/workflows/refs/heads/main/preview/tuwa_logo.svg",alt:"TUWA Logo"})}),children:jsxRuntime.jsx("div",{className:"flex items-center gap-3",children:(e??C).map(({title:o,href:t,image:a,className:c})=>jsxRuntime.jsxs("a",{href:t,target:"_blank",rel:"noopener noreferrer",className:novaCore.cn("hidden sm:flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition-colors text-gray-700 dark:text-gray-300",c),children:[a,o]},o))})})}var S=[{title:"pnpm",command:"pnpm add"},{title:"bun",command:"bun add"},{title:"npm",command:"npm install"},{title:"yarn",command:"yarn add"}];function qe({packagesList:e,resolvedTheme:o}){return jsxRuntime.jsx("div",{className:"my-4",children:jsxRuntime.jsx(components.Tabs,{items:S.map(t=>t.title),children:S.map(t=>jsxRuntime.jsx(components.Tabs.Tab,{children:jsxRuntime.jsx(x,{title:"Terminal",titleIcons:jsxRuntime.jsx(outline.CommandLineIcon,{}),textToCopy:`${t.command} ${e}`,children:jsxRuntime.jsx(y,{resolvedTheme:o,language:"bash",children:`${t.command} ${e}`})})},t.title))})})}function Ye({href:e,children:o}){return jsxRuntime.jsx("a",{className:novaCore.cn("tuwadocs:font-medium tuwadocs:text-[var(--tuwa-text-accent)]","tuwadocs:transition-all tuwadocs:hover:underline tuwadocs:underline-offset-4"),href:e,target:"_blank",rel:"noopener noreferrer",children:o})}var Ke=({src:e,poster:o,autoplay:t=false,muted:a=false,loop:c=false,controls:f=true,className:T="",aspectRatio:I="aspect-video",onPlay:L,onPause:B,onEnded:H,"aria-label":F})=>jsxRuntime.jsx("div",{className:novaCore.cn("relative w-full overflow-hidden rounded-lg bg-black my-4",I,T),children:jsxRuntime.jsxs("video",{src:e,poster:o,controls:f,autoPlay:t,muted:a,loop:c,className:novaCore.cn("absolute inset-0 h-full w-full object-contain","transition-opacity duration-200","focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"),onPlay:L,onPause:B,onEnded:H,"aria-label":F,preload:"metadata",children:[jsxRuntime.jsx("track",{kind:"captions"}),"Your browser does not support the video tag. Please"," ",jsxRuntime.jsx("a",{href:e,download:true,className:"text-blue-400 underline hover:text-blue-300",children:"download the video"})," ","to watch it."]})});
|
|
2
|
+
exports.CodeBlock=x;exports.CodeHighlighter=y;exports.CopyIconButton=N;exports.Features=ve;exports.Footer=Pe;exports.Navbar=Fe;exports.PackageInstallationTabs=qe;exports.StyledLink=Ye;exports.VideoPlayer=Ke;exports.baseFooterLinks=k;exports.baseNavLinks=C;Object.keys(novaCore).forEach(function(k){if(k!=='default'&&!Object.prototype.hasOwnProperty.call(exports,k))Object.defineProperty(exports,k,{enumerable:true,get:function(){return novaCore[k]}})});
|
package/dist/index.d.cts
CHANGED
|
@@ -1,9 +1,132 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import react, { ReactNode } from 'react';
|
|
3
|
+
export * from '@tuwaio/nova-core';
|
|
4
|
+
|
|
5
|
+
interface CodeBlockProps {
|
|
6
|
+
/** The title displayed in the header of the code block. */
|
|
7
|
+
title: string;
|
|
8
|
+
/** An icon or other React node to display next to the title. */
|
|
9
|
+
titleIcons: ReactNode;
|
|
10
|
+
/** The code or content to display within the block. */
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
/** The raw text content that will be copied to the clipboard. */
|
|
13
|
+
textToCopy: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* A UI component that wraps content, typically code snippets, in a styled block
|
|
17
|
+
* with a header containing a title, an icon, and a copy button.
|
|
18
|
+
*/
|
|
19
|
+
declare function CodeBlock({ title, titleIcons, children, textToCopy }: CodeBlockProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
interface CodeHighlighterProps {
|
|
22
|
+
children: string | string[];
|
|
23
|
+
language?: string;
|
|
24
|
+
resolvedTheme: string;
|
|
25
|
+
}
|
|
26
|
+
declare function CodeHighlighter({ children, language, resolvedTheme }: CodeHighlighterProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
interface CopyIconButtonProps {
|
|
29
|
+
isCopied: boolean;
|
|
30
|
+
onCopy: () => void;
|
|
31
|
+
}
|
|
32
|
+
declare function CopyIconButton({ isCopied, onCopy }: CopyIconButtonProps): react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare function Features({ features }: {
|
|
35
|
+
features: {
|
|
36
|
+
title: string;
|
|
37
|
+
icon: string;
|
|
38
|
+
description: string;
|
|
39
|
+
}[];
|
|
40
|
+
}): react_jsx_runtime.JSX.Element;
|
|
41
|
+
|
|
42
|
+
type SocialLink = {
|
|
43
|
+
title: string;
|
|
44
|
+
href: string;
|
|
45
|
+
image: ReactNode;
|
|
46
|
+
className?: string;
|
|
47
|
+
};
|
|
48
|
+
interface NavProps {
|
|
49
|
+
links?: SocialLink[];
|
|
50
|
+
}
|
|
51
|
+
declare function Navbar({ links }: NavProps): react_jsx_runtime.JSX.Element;
|
|
52
|
+
|
|
53
|
+
declare function Footer({ links }: NavProps): react_jsx_runtime.JSX.Element;
|
|
54
|
+
|
|
55
|
+
declare function PackageInstallationTabs({ packagesList, resolvedTheme, }: {
|
|
56
|
+
packagesList: string;
|
|
57
|
+
} & Pick<CodeHighlighterProps, 'resolvedTheme'>): react_jsx_runtime.JSX.Element;
|
|
3
58
|
|
|
4
59
|
declare function StyledLink({ href, children }: {
|
|
5
60
|
href: string;
|
|
6
61
|
children: ReactNode;
|
|
7
62
|
}): react_jsx_runtime.JSX.Element;
|
|
8
63
|
|
|
9
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Props for the VideoPlayer component.
|
|
66
|
+
*/
|
|
67
|
+
interface VideoPlayerProps {
|
|
68
|
+
/** Path to the video file in the /public directory */
|
|
69
|
+
src: string;
|
|
70
|
+
/** Optional poster image to display before video plays */
|
|
71
|
+
poster?: string;
|
|
72
|
+
/** Whether the video should autoplay (Note: most browsers require muted for autoplay) */
|
|
73
|
+
autoplay?: boolean;
|
|
74
|
+
/** Whether the video should be muted */
|
|
75
|
+
muted?: boolean;
|
|
76
|
+
/** Whether the video should loop */
|
|
77
|
+
loop?: boolean;
|
|
78
|
+
/** Whether to show video controls */
|
|
79
|
+
controls?: boolean;
|
|
80
|
+
/** Optional CSS class name for the container */
|
|
81
|
+
className?: string;
|
|
82
|
+
/** Custom aspect ratio using Tailwind aspect-ratio classes (default: 'aspect-video' for 16:9) */
|
|
83
|
+
aspectRatio?: 'aspect-square' | 'aspect-video' | 'aspect-[4/3]' | 'aspect-[3/2]' | 'aspect-[21/9]';
|
|
84
|
+
/** Callback function called when video starts playing */
|
|
85
|
+
onPlay?: () => void;
|
|
86
|
+
/** Callback function called when video is paused */
|
|
87
|
+
onPause?: () => void;
|
|
88
|
+
/** Callback function called when video ends */
|
|
89
|
+
onEnded?: () => void;
|
|
90
|
+
/** ARIA label for accessibility */
|
|
91
|
+
'aria-label'?: string;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* A responsive video player component that maintains aspect ratio using Tailwind CSS.
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```tsx
|
|
98
|
+
* <VideoPlayer
|
|
99
|
+
* src="/videos/demo.mp4"
|
|
100
|
+
* poster="/images/video-thumbnail.jpg"
|
|
101
|
+
* aria-label="Product demonstration video"
|
|
102
|
+
* />
|
|
103
|
+
* ```
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* ```tsx
|
|
107
|
+
* // Custom aspect ratio (4:3) with autoplay
|
|
108
|
+
* <VideoPlayer
|
|
109
|
+
* src="/videos/demo.mp4"
|
|
110
|
+
* aspectRatio="aspect-[4/3]"
|
|
111
|
+
* autoplay
|
|
112
|
+
* muted
|
|
113
|
+
* loop
|
|
114
|
+
* className="shadow-lg"
|
|
115
|
+
* />
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
declare const VideoPlayer: react.FC<VideoPlayerProps>;
|
|
119
|
+
|
|
120
|
+
declare const baseNavLinks: {
|
|
121
|
+
title: string;
|
|
122
|
+
href: string;
|
|
123
|
+
className: string;
|
|
124
|
+
image: react_jsx_runtime.JSX.Element;
|
|
125
|
+
}[];
|
|
126
|
+
declare const baseFooterLinks: {
|
|
127
|
+
title: string;
|
|
128
|
+
href: string;
|
|
129
|
+
image: react_jsx_runtime.JSX.Element;
|
|
130
|
+
}[];
|
|
131
|
+
|
|
132
|
+
export { CodeBlock, CodeHighlighter, type CodeHighlighterProps, CopyIconButton, Features, Footer, type NavProps, Navbar, PackageInstallationTabs, type SocialLink, StyledLink, VideoPlayer, type VideoPlayerProps, baseFooterLinks, baseNavLinks };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,132 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import react, { ReactNode } from 'react';
|
|
3
|
+
export * from '@tuwaio/nova-core';
|
|
4
|
+
|
|
5
|
+
interface CodeBlockProps {
|
|
6
|
+
/** The title displayed in the header of the code block. */
|
|
7
|
+
title: string;
|
|
8
|
+
/** An icon or other React node to display next to the title. */
|
|
9
|
+
titleIcons: ReactNode;
|
|
10
|
+
/** The code or content to display within the block. */
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
/** The raw text content that will be copied to the clipboard. */
|
|
13
|
+
textToCopy: string;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* A UI component that wraps content, typically code snippets, in a styled block
|
|
17
|
+
* with a header containing a title, an icon, and a copy button.
|
|
18
|
+
*/
|
|
19
|
+
declare function CodeBlock({ title, titleIcons, children, textToCopy }: CodeBlockProps): react_jsx_runtime.JSX.Element;
|
|
20
|
+
|
|
21
|
+
interface CodeHighlighterProps {
|
|
22
|
+
children: string | string[];
|
|
23
|
+
language?: string;
|
|
24
|
+
resolvedTheme: string;
|
|
25
|
+
}
|
|
26
|
+
declare function CodeHighlighter({ children, language, resolvedTheme }: CodeHighlighterProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
interface CopyIconButtonProps {
|
|
29
|
+
isCopied: boolean;
|
|
30
|
+
onCopy: () => void;
|
|
31
|
+
}
|
|
32
|
+
declare function CopyIconButton({ isCopied, onCopy }: CopyIconButtonProps): react_jsx_runtime.JSX.Element;
|
|
33
|
+
|
|
34
|
+
declare function Features({ features }: {
|
|
35
|
+
features: {
|
|
36
|
+
title: string;
|
|
37
|
+
icon: string;
|
|
38
|
+
description: string;
|
|
39
|
+
}[];
|
|
40
|
+
}): react_jsx_runtime.JSX.Element;
|
|
41
|
+
|
|
42
|
+
type SocialLink = {
|
|
43
|
+
title: string;
|
|
44
|
+
href: string;
|
|
45
|
+
image: ReactNode;
|
|
46
|
+
className?: string;
|
|
47
|
+
};
|
|
48
|
+
interface NavProps {
|
|
49
|
+
links?: SocialLink[];
|
|
50
|
+
}
|
|
51
|
+
declare function Navbar({ links }: NavProps): react_jsx_runtime.JSX.Element;
|
|
52
|
+
|
|
53
|
+
declare function Footer({ links }: NavProps): react_jsx_runtime.JSX.Element;
|
|
54
|
+
|
|
55
|
+
declare function PackageInstallationTabs({ packagesList, resolvedTheme, }: {
|
|
56
|
+
packagesList: string;
|
|
57
|
+
} & Pick<CodeHighlighterProps, 'resolvedTheme'>): react_jsx_runtime.JSX.Element;
|
|
3
58
|
|
|
4
59
|
declare function StyledLink({ href, children }: {
|
|
5
60
|
href: string;
|
|
6
61
|
children: ReactNode;
|
|
7
62
|
}): react_jsx_runtime.JSX.Element;
|
|
8
63
|
|
|
9
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Props for the VideoPlayer component.
|
|
66
|
+
*/
|
|
67
|
+
interface VideoPlayerProps {
|
|
68
|
+
/** Path to the video file in the /public directory */
|
|
69
|
+
src: string;
|
|
70
|
+
/** Optional poster image to display before video plays */
|
|
71
|
+
poster?: string;
|
|
72
|
+
/** Whether the video should autoplay (Note: most browsers require muted for autoplay) */
|
|
73
|
+
autoplay?: boolean;
|
|
74
|
+
/** Whether the video should be muted */
|
|
75
|
+
muted?: boolean;
|
|
76
|
+
/** Whether the video should loop */
|
|
77
|
+
loop?: boolean;
|
|
78
|
+
/** Whether to show video controls */
|
|
79
|
+
controls?: boolean;
|
|
80
|
+
/** Optional CSS class name for the container */
|
|
81
|
+
className?: string;
|
|
82
|
+
/** Custom aspect ratio using Tailwind aspect-ratio classes (default: 'aspect-video' for 16:9) */
|
|
83
|
+
aspectRatio?: 'aspect-square' | 'aspect-video' | 'aspect-[4/3]' | 'aspect-[3/2]' | 'aspect-[21/9]';
|
|
84
|
+
/** Callback function called when video starts playing */
|
|
85
|
+
onPlay?: () => void;
|
|
86
|
+
/** Callback function called when video is paused */
|
|
87
|
+
onPause?: () => void;
|
|
88
|
+
/** Callback function called when video ends */
|
|
89
|
+
onEnded?: () => void;
|
|
90
|
+
/** ARIA label for accessibility */
|
|
91
|
+
'aria-label'?: string;
|
|
92
|
+
}
|
|
93
|
+
/**
|
|
94
|
+
* A responsive video player component that maintains aspect ratio using Tailwind CSS.
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```tsx
|
|
98
|
+
* <VideoPlayer
|
|
99
|
+
* src="/videos/demo.mp4"
|
|
100
|
+
* poster="/images/video-thumbnail.jpg"
|
|
101
|
+
* aria-label="Product demonstration video"
|
|
102
|
+
* />
|
|
103
|
+
* ```
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* ```tsx
|
|
107
|
+
* // Custom aspect ratio (4:3) with autoplay
|
|
108
|
+
* <VideoPlayer
|
|
109
|
+
* src="/videos/demo.mp4"
|
|
110
|
+
* aspectRatio="aspect-[4/3]"
|
|
111
|
+
* autoplay
|
|
112
|
+
* muted
|
|
113
|
+
* loop
|
|
114
|
+
* className="shadow-lg"
|
|
115
|
+
* />
|
|
116
|
+
* ```
|
|
117
|
+
*/
|
|
118
|
+
declare const VideoPlayer: react.FC<VideoPlayerProps>;
|
|
119
|
+
|
|
120
|
+
declare const baseNavLinks: {
|
|
121
|
+
title: string;
|
|
122
|
+
href: string;
|
|
123
|
+
className: string;
|
|
124
|
+
image: react_jsx_runtime.JSX.Element;
|
|
125
|
+
}[];
|
|
126
|
+
declare const baseFooterLinks: {
|
|
127
|
+
title: string;
|
|
128
|
+
href: string;
|
|
129
|
+
image: react_jsx_runtime.JSX.Element;
|
|
130
|
+
}[];
|
|
131
|
+
|
|
132
|
+
export { CodeBlock, CodeHighlighter, type CodeHighlighterProps, CopyIconButton, Features, Footer, type NavProps, Navbar, PackageInstallationTabs, type SocialLink, StyledLink, VideoPlayer, type VideoPlayerProps, baseFooterLinks, baseNavLinks };
|
package/dist/index.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
import {cn}from'@tuwaio/nova-core';import {jsx}from'react/jsx-runtime';function a({href:e,children:t}){return jsx("a",{className:cn("tuwadocs:font-medium tuwadocs:text-[var(--tuwa-text-accent)]","tuwadocs:transition-all tuwadocs:hover:underline tuwadocs:underline-offset-4"),href:e,target:"_blank",rel:"noopener noreferrer",children:
|
|
1
|
+
import {cn,useCopyToClipboard}from'@tuwaio/nova-core';export*from'@tuwaio/nova-core';import {CheckCircleIcon,Square2StackIcon,CommandLineIcon}from'@heroicons/react/24/outline';import {jsx,Fragment,jsxs}from'react/jsx-runtime';import {Prism}from'react-syntax-highlighter';import V from'next/dynamic';import E from'next/image';import {Footer,Navbar}from'nextra-theme-docs';import {Tabs}from'nextra/components';var b=(e=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(e,{get:(o,t)=>(typeof require<"u"?require:o)[t]}):e)(function(e){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+e+'" is not supported')});function N({isCopied:e,onCopy:o}){return jsx("button",{onClick:o,type:"button",className:cn("h-6 w-6 cursor-pointer transition-colors",e?"text-[var(--tuwa-success-icon)]":"text-[var(--tuwa-text-secondary)] hover:text-[var(--tuwa-text-primary)]"),children:e?jsx(CheckCircleIcon,{}):jsx(Square2StackIcon,{})})}function x({title:e,titleIcons:o,children:t,textToCopy:a}){let{isCopied:c,copy:f}=useCopyToClipboard(1500);return jsxs("div",{className:cn("group overflow-hidden rounded-lg border","border-[var(--tuwa-border-secondary)] bg-[var(--tuwa-bg-primary)]"),children:[jsxs("div",{className:cn("flex items-center justify-between gap-4 px-4 py-2","border-b border-[var(--tuwa-border-secondary)] bg-[var(--tuwa-bg-secondary)]"),children:[jsxs("div",{className:"flex items-center gap-2",children:[jsx("div",{className:"h-[20px] w-[20px] text-[var(--tuwa-text-secondary)]",children:o}),jsx("p",{className:"text-sm font-medium text-[var(--tuwa-text-primary)]",children:e})]}),jsx("div",{className:"transition md:opacity-0 group-hover:opacity-100",children:jsx(N,{isCopied:c,onCopy:()=>f(a)})})]}),t]})}var _=({children:e})=>jsx(Fragment,{children:e}),s=V(()=>Promise.resolve(_),{ssr:false});function y({children:e,language:o,resolvedTheme:t}){return jsx("div",{className:"border-t border-[var(--tuwa-border-secondary)]",children:jsx(s,{children:jsx(Prism,{language:o??"bash",customStyle:{margin:0,background:"transparent"},style:t==="dark"?b("react-syntax-highlighter/dist/esm/styles/prism").materialOceanic:b("react-syntax-highlighter/dist/esm/styles/prism").materialLight,children:String(e).replace(/\n$/,"")})})})}function ve({features:e}){return jsx("div",{className:"grid grid-cols-1 md:grid-cols-3 gap-6 mt-12",children:e.map(o=>jsxs("div",{className:"p-6 border rounded-lg hover:shadow-lg transition-shadow",children:[jsx("div",{className:"text-2xl mb-3",children:o.icon}),jsx("h3",{className:"text-lg font-semibold mb-2",children:o.title}),jsx("p",{className:"text-gray-600 dark:text-gray-400",children:o.description})]},o.title))})}var C=[{title:"NPM",href:"https://npmjs.com/org/tuwaio",className:"hover:text-red-600 dark:hover:text-red-400",image:jsx("svg",{className:"w-4 h-4",fill:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{d:"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0H1.763zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113l.017-13.847z"})})}],k=[{title:"NPM",href:"https://npmjs.com/org/tuwaio",image:jsx("svg",{className:"w-4 h-4",fill:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{d:"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0H1.763zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113l.017-13.847z"})})},{title:"GitHub",href:"https://github.com/TuwaIO",image:jsx("svg",{className:"w-4 h-4",fill:"currentColor",viewBox:"0 0 24 24",children:jsx("path",{d:"M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"})})}];function Pe({links:e}){return jsx(Footer,{children:jsxs("div",{className:"flex w-full flex-col items-center sm:items-start tuwa-footer-border pt-8",children:[jsxs("div",{className:"mb-6 flex items-center gap-4 w-full justify-between",children:[jsx("div",{className:"flex items-center",children:jsx(s,{children:jsx(E,{width:120,height:40,src:"https://raw.githubusercontent.com/TuwaIO/workflows/refs/heads/main/preview/tuwa_logo.svg",alt:"TUWA Logo",className:"transition-opacity duration-300"})})}),jsx("div",{className:"flex items-center gap-4 text-sm",children:(e??k).map(({title:o,href:t,image:a})=>jsxs("a",{href:t,target:"_blank",rel:"noopener noreferrer",className:"tuwa-footer-link tuwa-footer-link--npm flex items-center gap-1",children:[a,jsx("span",{className:"hidden sm:inline",children:o})]},o))})]}),jsxs("div",{className:"w-full tuwa-footer-border pt-4",children:[jsxs("div",{className:"flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4",children:[jsxs("div",{className:"flex-1",children:[jsx("p",{className:"tuwa-footer-description",children:"A useful and powerful utils for building decentralized applications."}),jsx("p",{className:"tuwa-footer-license",children:"Licensed under Apache 2.0. Open source and free to use."})]}),jsxs("div",{className:"tuwa-footer-copyright",children:["\xA9 2025 - ",new Date().getFullYear()," TUWA. Built with"," ",jsx("span",{className:"tuwa-heart","aria-label":"love",children:"\u2764\uFE0F"})," ","for Web3."]})]}),jsx("div",{className:"flex flex-wrap items-center gap-3 mt-4 pt-4 tuwa-footer-border"})]})]})})}function Fe({links:e}){return jsx(Navbar,{logo:jsx(s,{children:jsx(E,{width:120,height:40,src:"https://raw.githubusercontent.com/TuwaIO/workflows/refs/heads/main/preview/tuwa_logo.svg",alt:"TUWA Logo"})}),children:jsx("div",{className:"flex items-center gap-3",children:(e??C).map(({title:o,href:t,image:a,className:c})=>jsxs("a",{href:t,target:"_blank",rel:"noopener noreferrer",className:cn("hidden sm:flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition-colors text-gray-700 dark:text-gray-300",c),children:[a,o]},o))})})}var S=[{title:"pnpm",command:"pnpm add"},{title:"bun",command:"bun add"},{title:"npm",command:"npm install"},{title:"yarn",command:"yarn add"}];function qe({packagesList:e,resolvedTheme:o}){return jsx("div",{className:"my-4",children:jsx(Tabs,{items:S.map(t=>t.title),children:S.map(t=>jsx(Tabs.Tab,{children:jsx(x,{title:"Terminal",titleIcons:jsx(CommandLineIcon,{}),textToCopy:`${t.command} ${e}`,children:jsx(y,{resolvedTheme:o,language:"bash",children:`${t.command} ${e}`})})},t.title))})})}function Ye({href:e,children:o}){return jsx("a",{className:cn("tuwadocs:font-medium tuwadocs:text-[var(--tuwa-text-accent)]","tuwadocs:transition-all tuwadocs:hover:underline tuwadocs:underline-offset-4"),href:e,target:"_blank",rel:"noopener noreferrer",children:o})}var Ke=({src:e,poster:o,autoplay:t=false,muted:a=false,loop:c=false,controls:f=true,className:T="",aspectRatio:I="aspect-video",onPlay:L,onPause:B,onEnded:H,"aria-label":F})=>jsx("div",{className:cn("relative w-full overflow-hidden rounded-lg bg-black my-4",I,T),children:jsxs("video",{src:e,poster:o,controls:f,autoPlay:t,muted:a,loop:c,className:cn("absolute inset-0 h-full w-full object-contain","transition-opacity duration-200","focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"),onPlay:L,onPause:B,onEnded:H,"aria-label":F,preload:"metadata",children:[jsx("track",{kind:"captions"}),"Your browser does not support the video tag. Please"," ",jsx("a",{href:e,download:true,className:"text-blue-400 underline hover:text-blue-300",children:"download the video"})," ","to watch it."]})});
|
|
2
|
+
export{x as CodeBlock,y as CodeHighlighter,N as CopyIconButton,ve as Features,Pe as Footer,Fe as Navbar,qe as PackageInstallationTabs,Ye as StyledLink,Ke as VideoPlayer,k as baseFooterLinks,C as baseNavLinks};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tuwaio/docs-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "1.0.0-fix-components-alpha.1.c574a38",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Oleksandr Tkach",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,7 +47,6 @@
|
|
|
47
47
|
}
|
|
48
48
|
],
|
|
49
49
|
"dependencies": {
|
|
50
|
-
"@heroicons/react": "^2.2.0",
|
|
51
50
|
"@tuwaio/nova-core": "^0.2.6",
|
|
52
51
|
"clsx": "^2.1.1",
|
|
53
52
|
"react-syntax-highlighter": "^16.1.0",
|
|
@@ -55,11 +54,20 @@
|
|
|
55
54
|
"tailwind-merge": "^3.4.0"
|
|
56
55
|
},
|
|
57
56
|
"peerDependencies": {
|
|
58
|
-
"react": ">=
|
|
57
|
+
"@heroicons/react": ">=2",
|
|
58
|
+
"react": ">=19.2.3",
|
|
59
|
+
"next": ">=16.1",
|
|
60
|
+
"nextra": ">=4.6",
|
|
61
|
+
"nextra-theme-docs": ">=4.6"
|
|
59
62
|
},
|
|
60
63
|
"devDependencies": {
|
|
64
|
+
"next": "16.1.4",
|
|
65
|
+
"nextra": "^4.6.1",
|
|
66
|
+
"nextra-theme-docs": "^4.6.1",
|
|
67
|
+
"@heroicons/react": "^2.2.0",
|
|
61
68
|
"@tailwindcss/postcss": "^4.1.18",
|
|
62
69
|
"@tailwindcss/vite": "^4.1.18",
|
|
70
|
+
"@types/node": "^25",
|
|
63
71
|
"@types/react": "^19.2.9",
|
|
64
72
|
"autoprefixer": "^10.4.23",
|
|
65
73
|
"postcss": "^8.5.6",
|