@tuwaio/docs-ui 0.0.38 → 0.0.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (53) hide show
  1. package/README.md +83 -7
  2. package/dist/components/Footer.d.cts +10 -5
  3. package/dist/components/Footer.d.ts +10 -5
  4. package/dist/components/Logo.d.cts +17 -5
  5. package/dist/components/Logo.d.ts +17 -5
  6. package/dist/components/NavBar.d.cts +21 -2
  7. package/dist/components/NavBar.d.ts +21 -2
  8. package/dist/components/NoSSR.d.cts +6 -6
  9. package/dist/components/NoSSR.d.ts +6 -6
  10. package/dist/components/Orb.cjs +2 -2
  11. package/dist/components/Orb.d.cts +19 -8
  12. package/dist/components/Orb.d.ts +19 -8
  13. package/dist/components/Orb.js +2 -2
  14. package/dist/components/StarryBackground.d.cts +11 -2
  15. package/dist/components/StarryBackground.d.ts +11 -2
  16. package/dist/components/ThemeSwitcher.d.cts +15 -2
  17. package/dist/components/ThemeSwitcher.d.ts +15 -2
  18. package/dist/index.cjs +1 -17
  19. package/dist/index.css +0 -162
  20. package/dist/index.d.cts +0 -8
  21. package/dist/index.d.ts +0 -8
  22. package/dist/index.js +0 -8
  23. package/dist/utils.d.cts +11 -13
  24. package/dist/utils.d.ts +11 -13
  25. package/package.json +6 -9
  26. package/dist/components/CodeBlock.cjs +0 -61
  27. package/dist/components/CodeBlock.d.cts +0 -20
  28. package/dist/components/CodeBlock.d.ts +0 -20
  29. package/dist/components/CodeBlock.js +0 -37
  30. package/dist/components/CodeHighlighter.cjs +0 -52
  31. package/dist/components/CodeHighlighter.d.cts +0 -10
  32. package/dist/components/CodeHighlighter.d.ts +0 -10
  33. package/dist/components/CodeHighlighter.js +0 -18
  34. package/dist/components/CopyIconButton.cjs +0 -44
  35. package/dist/components/CopyIconButton.d.cts +0 -9
  36. package/dist/components/CopyIconButton.d.ts +0 -9
  37. package/dist/components/CopyIconButton.js +0 -20
  38. package/dist/components/Features.cjs +0 -42
  39. package/dist/components/Features.d.cts +0 -11
  40. package/dist/components/Features.d.ts +0 -11
  41. package/dist/components/Features.js +0 -18
  42. package/dist/components/PackageInstallationTabs.cjs +0 -64
  43. package/dist/components/PackageInstallationTabs.d.cts +0 -8
  44. package/dist/components/PackageInstallationTabs.d.ts +0 -8
  45. package/dist/components/PackageInstallationTabs.js +0 -40
  46. package/dist/components/StyledLink.cjs +0 -44
  47. package/dist/components/StyledLink.d.cts +0 -9
  48. package/dist/components/StyledLink.d.ts +0 -9
  49. package/dist/components/StyledLink.js +0 -20
  50. package/dist/components/VideoPlayer.cjs +0 -103
  51. package/dist/components/VideoPlayer.d.cts +0 -34
  52. package/dist/components/VideoPlayer.d.ts +0 -34
  53. package/dist/components/VideoPlayer.js +0 -79
package/README.md CHANGED
@@ -1,15 +1,91 @@
1
- # TUWA Docs UI
1
+ # @tuwaio/docs-ui
2
2
 
3
3
  [![NPM Version](https://img.shields.io/npm/v/@tuwaio/docs-ui.svg)](https://www.npmjs.com/package/@tuwaio/docs-ui)
4
- [![License](https://img.shields.io/npm/l/@tuwaio/docs-ui.svg)](./LICENSE)
4
+ [![License](https://img.shields.io/npm/l/@tuwaio/docs-ui.svg)](https://github.com/TuwaIO/docs/blob/main/packages/docs-ui/LICENSE)
5
5
 
6
- The shared design system and UI components used across the **TUWA Ecosystem** documentation sites. This package ensures visual consistency and strictly adheres to the **DRY (Don't Repeat Yourself)** principle.
6
+ `@tuwaio/docs-ui` is the shared UI of the TUWA documentation sites: the navbar, footer, logo and stylesheet of every `*.docs.tuwa.io` site and of the [docs hub](https://docs.tuwa.io), plus the decorative parts of the hub and the TUWA landing page. The sites are built with Next.js (App Router) and Nextra 4; one package keeps them visually consistent.
7
7
 
8
- ## ✨ Features
8
+ ---
9
9
 
10
- - **Shared Components:** Ready-to-use React components for documentation (Callouts, Hero sections, Feature Cards).
11
- - **Design Tokens:** Shared Tailwind CSS configuration and brand colors.
10
+ ## 🏛️ Core Capabilities
11
+
12
+ - **Nextra layout parts:** `Navbar` and `Footer` wrap the navbar and footer of `nextra-theme-docs` with the site logo and a row of external links (`baseNavLinks`, `baseFooterLinks` are the defaults: the npm and GitHub organizations of TUWA).
13
+ - **Logo:** `RemoteLogo` is an async React Server Component that fetches an SVG (by default the TUWA logo) and renders it as React elements, so it takes `className` and `currentColor`.
14
+ - **Theme switch:** `ThemeSwitcher` is a light/dark switch for any theme state (for example `next-themes`).
15
+ - **Decoration:** `Orb` (an animated sphere in the brand color of a TUWA project), `StarryBackground` (an animated star field on a canvas) and `NoSSR` (renders its children only on the client).
16
+ - **Stylesheet:** `dist/index.css` contains the `--tuwa-*` theme variables of [`@tuwaio/nova-core`](https://stories.tuwa.io/?path=/docs/packages-nova-core-overview--docs) (light and `.dark`), the styles of the Nextra parts and the Tailwind CSS v4 utilities used by the components, prefixed with `tuwadocs:`.
17
+
18
+ ---
19
+
20
+ ## 💾 Installation
21
+
22
+ ```bash
23
+ pnpm add @tuwaio/docs-ui next nextra nextra-theme-docs react react-dom @heroicons/react
24
+ ```
25
+
26
+ `nextra-theme-docs` (and its peer `nextra`) is needed by `Navbar` and `Footer`, `next` by `RemoteLogo` (a Server Component that uses the `fetch` cache of Next.js) and `@heroicons/react` by `ThemeSwitcher`.
27
+
28
+ Import the stylesheet after the Nextra theme:
29
+
30
+ ```css
31
+ @import 'nextra-theme-docs/style.css';
32
+ @import '@tuwaio/docs-ui/dist/index.css';
33
+ @import 'tailwindcss';
34
+ ```
35
+
36
+ ---
37
+
38
+ ## 🚀 Usage
39
+
40
+ The root layout of a TUWA documentation site:
41
+
42
+ ```tsx
43
+ import { baseNavLinks, Footer, Navbar, RemoteLogo } from '@tuwaio/docs-ui';
44
+ import { getPageMap } from 'nextra/page-map';
45
+ import { Layout } from 'nextra-theme-docs';
46
+ import type { ReactNode } from 'react';
47
+
48
+ const logo = <RemoteLogo width={126} height={40} />;
49
+
50
+ const navLinks = [
51
+ ...baseNavLinks,
52
+ {
53
+ title: 'GitHub',
54
+ href: 'https://github.com/TuwaIO/pulsar-core',
55
+ image: <span aria-hidden="true">★</span>,
56
+ },
57
+ ];
58
+
59
+ export default async function RootLayout({ children }: { children: ReactNode }) {
60
+ return (
61
+ <html lang="en" suppressHydrationWarning>
62
+ <body>
63
+ <Layout
64
+ navbar={<Navbar logo={logo} links={navLinks} />}
65
+ footer={<Footer logo={logo} />}
66
+ pageMap={await getPageMap()}
67
+ docsRepositoryBase="https://github.com/TuwaIO/pulsar-core/tree/main/apps/docs"
68
+ >
69
+ {children}
70
+ </Layout>
71
+ </body>
72
+ </html>
73
+ );
74
+ }
75
+ ```
76
+
77
+ ---
78
+
79
+ ## 🗄️ Browser Storage
80
+
81
+ Nothing. `ThemeSwitcher` only calls `onToggle`; the site keeps the theme.
82
+
83
+ ## 🌐 External Services
84
+
85
+ `RemoteLogo` requests its `url` on the server (by default `cdn.jsdelivr.net/gh/TuwaIO/workflows@main/preview/logo_v2.svg`), cached by Next.js for 24 hours. The other components send no requests.
86
+
87
+ ---
12
88
 
13
89
  ## 📄 License
14
90
 
15
- This project is licensed under the **Apache-2.0 License** - see the [LICENSE](./LICENSE) file for details.
91
+ Licensed under the **Apache-2.0 License**. See the [LICENSE](https://github.com/TuwaIO/docs/blob/main/packages/docs-ui/LICENSE) file for details.
@@ -1,9 +1,14 @@
1
- import * as react from 'react';
2
- import { ReactNode } from 'react';
1
+ import * as React from 'react';
3
2
  import { NavProps } from './NavBar.cjs';
4
3
 
5
- declare function Footer({ links, logo }: NavProps & {
6
- logo?: ReactNode;
7
- }): react.JSX.Element;
4
+ /**
5
+ * The footer of a TUWA documentation site: the `Footer` of `nextra-theme-docs` with the logo, external links, the
6
+ * TUWA description, the license and the copyright line (the current year is read on render). Render it in the `footer`
7
+ * prop of the Nextra `Layout`.
8
+ *
9
+ * @param props - See {@link NavProps}.
10
+ * @returns The footer.
11
+ */
12
+ declare function Footer({ links, logo }: NavProps): React.JSX.Element;
8
13
 
9
14
  export { Footer };
@@ -1,9 +1,14 @@
1
- import * as react from 'react';
2
- import { ReactNode } from 'react';
1
+ import * as React from 'react';
3
2
  import { NavProps } from './NavBar.js';
4
3
 
5
- declare function Footer({ links, logo }: NavProps & {
6
- logo?: ReactNode;
7
- }): react.JSX.Element;
4
+ /**
5
+ * The footer of a TUWA documentation site: the `Footer` of `nextra-theme-docs` with the logo, external links, the
6
+ * TUWA description, the license and the copyright line (the current year is read on render). Render it in the `footer`
7
+ * prop of the Nextra `Layout`.
8
+ *
9
+ * @param props - See {@link NavProps}.
10
+ * @returns The footer.
11
+ */
12
+ declare function Footer({ links, logo }: NavProps): React.JSX.Element;
8
13
 
9
14
  export { Footer };
@@ -1,12 +1,24 @@
1
- import react__default from 'react';
1
+ import React__default from 'react';
2
2
 
3
- interface RemoteLogoProps extends react__default.SVGProps<SVGSVGElement> {
3
+ /**
4
+ * Props of {@link RemoteLogo}: the SVG attributes are applied to the root `svg` element.
5
+ */
6
+ interface RemoteLogoProps extends React__default.SVGProps<SVGSVGElement> {
7
+ /** URL of the SVG (default: the TUWA logo on jsDelivr, `cdn.jsdelivr.net/gh/TuwaIO/workflows@main/preview/logo_v2.svg`) */
4
8
  url?: string;
5
9
  }
6
10
  /**
7
- * Async Server Component that fetches a remote SVG and renders it
8
- * as native React elements using html-react-parser.
11
+ * Renders a remote SVG, by default the TUWA logo, as React elements, so the logo inherits `className` and CSS such as
12
+ * `currentColor`. It is an async React Server Component for the Next.js App Router: it fetches the SVG on the server
13
+ * (cached by Next.js for 24 hours), removes the XML declaration and doctype, and adds the `remote-logo` class and the
14
+ * props to the root element.
15
+ *
16
+ * Network: one request to `url` per revalidation. When the request fails, it logs the error and renders an empty
17
+ * `svg` with the props.
18
+ *
19
+ * @param props - See {@link RemoteLogoProps}.
20
+ * @returns The logo as an `svg` element.
9
21
  */
10
- declare function RemoteLogo({ url, className, style, ...props }: RemoteLogoProps): Promise<string | react__default.JSX.Element>;
22
+ declare function RemoteLogo({ url, className, style, ...props }: RemoteLogoProps): Promise<string | React__default.JSX.Element>;
11
23
 
12
24
  export { RemoteLogo, type RemoteLogoProps };
@@ -1,12 +1,24 @@
1
- import react__default from 'react';
1
+ import React__default from 'react';
2
2
 
3
- interface RemoteLogoProps extends react__default.SVGProps<SVGSVGElement> {
3
+ /**
4
+ * Props of {@link RemoteLogo}: the SVG attributes are applied to the root `svg` element.
5
+ */
6
+ interface RemoteLogoProps extends React__default.SVGProps<SVGSVGElement> {
7
+ /** URL of the SVG (default: the TUWA logo on jsDelivr, `cdn.jsdelivr.net/gh/TuwaIO/workflows@main/preview/logo_v2.svg`) */
4
8
  url?: string;
5
9
  }
6
10
  /**
7
- * Async Server Component that fetches a remote SVG and renders it
8
- * as native React elements using html-react-parser.
11
+ * Renders a remote SVG, by default the TUWA logo, as React elements, so the logo inherits `className` and CSS such as
12
+ * `currentColor`. It is an async React Server Component for the Next.js App Router: it fetches the SVG on the server
13
+ * (cached by Next.js for 24 hours), removes the XML declaration and doctype, and adds the `remote-logo` class and the
14
+ * props to the root element.
15
+ *
16
+ * Network: one request to `url` per revalidation. When the request fails, it logs the error and renders an empty
17
+ * `svg` with the props.
18
+ *
19
+ * @param props - See {@link RemoteLogoProps}.
20
+ * @returns The logo as an `svg` element.
9
21
  */
10
- declare function RemoteLogo({ url, className, style, ...props }: RemoteLogoProps): Promise<string | react__default.JSX.Element>;
22
+ declare function RemoteLogo({ url, className, style, ...props }: RemoteLogoProps): Promise<string | React__default.JSX.Element>;
11
23
 
12
24
  export { RemoteLogo, type RemoteLogoProps };
@@ -1,16 +1,35 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
  import { ReactNode } from 'react';
3
3
 
4
+ /**
5
+ * A link to an external page, rendered with its icon by {@link Navbar} and {@link Footer}. Links open in a new tab.
6
+ */
4
7
  type SocialLink = {
8
+ /** Text of the link (hidden on small screens) */
5
9
  title: string;
10
+ /** Absolute URL of the page */
6
11
  href: string;
12
+ /** Icon rendered before the title */
7
13
  image: ReactNode;
14
+ /** Classes added to the link */
8
15
  className?: string;
9
16
  };
17
+ /**
18
+ * Props of {@link Navbar} and {@link Footer}.
19
+ */
10
20
  interface NavProps {
21
+ /** Links rendered next to the logo (default: {@link baseNavLinks} in the navbar, {@link baseFooterLinks} in the footer) */
11
22
  links?: SocialLink[];
23
+ /** Logo of the site, for example {@link RemoteLogo} */
12
24
  logo?: ReactNode;
13
25
  }
14
- declare function Navbar({ links, logo }: NavProps): react.JSX.Element;
26
+ /**
27
+ * The navbar of a TUWA documentation site: the `Navbar` of `nextra-theme-docs` with the logo and a row of external
28
+ * links, hidden on small screens. Render it in the `navbar` prop of the Nextra `Layout`.
29
+ *
30
+ * @param props - See {@link NavProps}.
31
+ * @returns The navbar.
32
+ */
33
+ declare function Navbar({ links, logo }: NavProps): React.JSX.Element;
15
34
 
16
35
  export { type NavProps, Navbar, type SocialLink };
@@ -1,16 +1,35 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
  import { ReactNode } from 'react';
3
3
 
4
+ /**
5
+ * A link to an external page, rendered with its icon by {@link Navbar} and {@link Footer}. Links open in a new tab.
6
+ */
4
7
  type SocialLink = {
8
+ /** Text of the link (hidden on small screens) */
5
9
  title: string;
10
+ /** Absolute URL of the page */
6
11
  href: string;
12
+ /** Icon rendered before the title */
7
13
  image: ReactNode;
14
+ /** Classes added to the link */
8
15
  className?: string;
9
16
  };
17
+ /**
18
+ * Props of {@link Navbar} and {@link Footer}.
19
+ */
10
20
  interface NavProps {
21
+ /** Links rendered next to the logo (default: {@link baseNavLinks} in the navbar, {@link baseFooterLinks} in the footer) */
11
22
  links?: SocialLink[];
23
+ /** Logo of the site, for example {@link RemoteLogo} */
12
24
  logo?: ReactNode;
13
25
  }
14
- declare function Navbar({ links, logo }: NavProps): react.JSX.Element;
26
+ /**
27
+ * The navbar of a TUWA documentation site: the `Navbar` of `nextra-theme-docs` with the logo and a row of external
28
+ * links, hidden on small screens. Render it in the `navbar` prop of the Nextra `Layout`.
29
+ *
30
+ * @param props - See {@link NavProps}.
31
+ * @returns The navbar.
32
+ */
33
+ declare function Navbar({ links, logo }: NavProps): React.JSX.Element;
15
34
 
16
35
  export { type NavProps, Navbar, type SocialLink };
@@ -1,16 +1,16 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
  import { ReactNode } from 'react';
3
3
 
4
4
  /**
5
- * A wrapper component that prevents its children from rendering on the server (SSR).
6
- * It waits until the component is mounted on the client before rendering them.
5
+ * Renders its children only on the client, after the component is mounted; on the server and in the first client
6
+ * render it renders nothing. Use it for parts whose output depends on browser-only state.
7
7
  *
8
8
  * @param props - The component props.
9
- * @param props.children - The children components to render on the client.
10
- * @returns The children components on the client, or null on the server.
9
+ * @param props.children - The content to render on the client.
10
+ * @returns The children after mount, otherwise `null`.
11
11
  */
12
12
  declare function NoSSR({ children }: {
13
13
  children: ReactNode;
14
- }): react.JSX.Element | null;
14
+ }): React.JSX.Element | null;
15
15
 
16
16
  export { NoSSR as default };
@@ -1,16 +1,16 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
  import { ReactNode } from 'react';
3
3
 
4
4
  /**
5
- * A wrapper component that prevents its children from rendering on the server (SSR).
6
- * It waits until the component is mounted on the client before rendering them.
5
+ * Renders its children only on the client, after the component is mounted; on the server and in the first client
6
+ * render it renders nothing. Use it for parts whose output depends on browser-only state.
7
7
  *
8
8
  * @param props - The component props.
9
- * @param props.children - The children components to render on the client.
10
- * @returns The children components on the client, or null on the server.
9
+ * @param props.children - The content to render on the client.
10
+ * @returns The children after mount, otherwise `null`.
11
11
  */
12
12
  declare function NoSSR({ children }: {
13
13
  children: ReactNode;
14
- }): react.JSX.Element | null;
14
+ }): React.JSX.Element | null;
15
15
 
16
16
  export { NoSSR as default };
@@ -284,7 +284,7 @@ const getCosmicFilter = (type, id) => {
284
284
  }
285
285
  };
286
286
  const Orb = import_react.default.forwardRef(
287
- ({ packageType, size = 120, icon: Icon, className, ...props }, ref) => {
287
+ ({ packageType, size = 120, icon: Icon, className, style, ...props }, ref) => {
288
288
  const color = packageColors[packageType];
289
289
  const tint = packageTints[packageType];
290
290
  const filterId = `orb-filter-${packageType}`;
@@ -298,7 +298,7 @@ const Orb = import_react.default.forwardRef(
298
298
  "tuwadocs:relative tuwadocs:flex tuwadocs:items-center tuwadocs:justify-center tuwa-orb-float",
299
299
  className
300
300
  ),
301
- style: { width: size, height: size, flexShrink: 0, ...props.style },
301
+ style: { width: size, height: size, flexShrink: 0, ...style },
302
302
  ...props,
303
303
  children: [
304
304
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -1,18 +1,29 @@
1
- import react__default from 'react';
1
+ import React__default from 'react';
2
2
 
3
+ /**
4
+ * A TUWA project with its own brand color and {@link Orb} texture.
5
+ */
3
6
  type PackageType = 'orbit' | 'pulsar' | 'satellite' | 'nova' | 'quasar' | 'siwx' | 'sdk';
4
- interface OrbProps extends react__default.HTMLAttributes<HTMLDivElement> {
7
+ /**
8
+ * Props of {@link Orb}; the other props are applied to the root `div`.
9
+ */
10
+ interface OrbProps extends React__default.HTMLAttributes<HTMLDivElement> {
11
+ /** The project, which selects the color and the animated texture */
5
12
  packageType: PackageType;
13
+ /** Diameter in pixels (default: `120`) */
6
14
  size?: number;
7
- icon?: react__default.ComponentType<react__default.SVGProps<SVGSVGElement>>;
15
+ /** Icon rendered in the center */
16
+ icon?: React__default.ComponentType<React__default.SVGProps<SVGSVGElement>>;
8
17
  }
9
18
  /**
10
- * Orb — Premium 3D cosmic sphere for TUWA package visualization.
19
+ * An animated glass sphere in the brand color of a TUWA project, with an SVG texture (animated SVG filters) and an
20
+ * optional icon in the center. The SVG ids include `packageType`, so two orbs of the same project on one page share
21
+ * their filters.
11
22
  *
12
- * @param packageType - Which TUWA package this orb represents
13
- * @param size - Diameter in pixels (default: 120)
14
- * @param icon - SVG icon component rendered centered inside the orb
23
+ * @param props - See {@link OrbProps}.
24
+ * @param ref - Ref of the root `div`.
25
+ * @returns The orb.
15
26
  */
16
- declare const Orb: react__default.ForwardRefExoticComponent<OrbProps & react__default.RefAttributes<HTMLDivElement>>;
27
+ declare const Orb: React__default.ForwardRefExoticComponent<OrbProps & React__default.RefAttributes<HTMLDivElement>>;
17
28
 
18
29
  export { Orb, type OrbProps, type PackageType };
@@ -1,18 +1,29 @@
1
- import react__default from 'react';
1
+ import React__default from 'react';
2
2
 
3
+ /**
4
+ * A TUWA project with its own brand color and {@link Orb} texture.
5
+ */
3
6
  type PackageType = 'orbit' | 'pulsar' | 'satellite' | 'nova' | 'quasar' | 'siwx' | 'sdk';
4
- interface OrbProps extends react__default.HTMLAttributes<HTMLDivElement> {
7
+ /**
8
+ * Props of {@link Orb}; the other props are applied to the root `div`.
9
+ */
10
+ interface OrbProps extends React__default.HTMLAttributes<HTMLDivElement> {
11
+ /** The project, which selects the color and the animated texture */
5
12
  packageType: PackageType;
13
+ /** Diameter in pixels (default: `120`) */
6
14
  size?: number;
7
- icon?: react__default.ComponentType<react__default.SVGProps<SVGSVGElement>>;
15
+ /** Icon rendered in the center */
16
+ icon?: React__default.ComponentType<React__default.SVGProps<SVGSVGElement>>;
8
17
  }
9
18
  /**
10
- * Orb — Premium 3D cosmic sphere for TUWA package visualization.
19
+ * An animated glass sphere in the brand color of a TUWA project, with an SVG texture (animated SVG filters) and an
20
+ * optional icon in the center. The SVG ids include `packageType`, so two orbs of the same project on one page share
21
+ * their filters.
11
22
  *
12
- * @param packageType - Which TUWA package this orb represents
13
- * @param size - Diameter in pixels (default: 120)
14
- * @param icon - SVG icon component rendered centered inside the orb
23
+ * @param props - See {@link OrbProps}.
24
+ * @param ref - Ref of the root `div`.
25
+ * @returns The orb.
15
26
  */
16
- declare const Orb: react__default.ForwardRefExoticComponent<OrbProps & react__default.RefAttributes<HTMLDivElement>>;
27
+ declare const Orb: React__default.ForwardRefExoticComponent<OrbProps & React__default.RefAttributes<HTMLDivElement>>;
17
28
 
18
29
  export { Orb, type OrbProps, type PackageType };
@@ -251,7 +251,7 @@ const getCosmicFilter = (type, id) => {
251
251
  }
252
252
  };
253
253
  const Orb = React.forwardRef(
254
- ({ packageType, size = 120, icon: Icon, className, ...props }, ref) => {
254
+ ({ packageType, size = 120, icon: Icon, className, style, ...props }, ref) => {
255
255
  const color = packageColors[packageType];
256
256
  const tint = packageTints[packageType];
257
257
  const filterId = `orb-filter-${packageType}`;
@@ -265,7 +265,7 @@ const Orb = React.forwardRef(
265
265
  "tuwadocs:relative tuwadocs:flex tuwadocs:items-center tuwadocs:justify-center tuwa-orb-float",
266
266
  className
267
267
  ),
268
- style: { width: size, height: size, flexShrink: 0, ...props.style },
268
+ style: { width: size, height: size, flexShrink: 0, ...style },
269
269
  ...props,
270
270
  children: [
271
271
  /* @__PURE__ */ jsxs(
@@ -1,5 +1,14 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
 
3
- declare function StarryBackground(): react.JSX.Element;
3
+ /**
4
+ * A full-size canvas of slowly drifting, twinkling stars joined by lines, which move away from the mouse pointer.
5
+ * Place it behind the content of a page; it takes the size of the window and follows its resizes.
6
+ *
7
+ * Side effects: `mousemove` and `resize` listeners on `window` and a `requestAnimationFrame` loop, all removed on
8
+ * unmount.
9
+ *
10
+ * @returns The canvas.
11
+ */
12
+ declare function StarryBackground(): React.JSX.Element;
4
13
 
5
14
  export { StarryBackground as default };
@@ -1,5 +1,14 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
 
3
- declare function StarryBackground(): react.JSX.Element;
3
+ /**
4
+ * A full-size canvas of slowly drifting, twinkling stars joined by lines, which move away from the mouse pointer.
5
+ * Place it behind the content of a page; it takes the size of the window and follows its resizes.
6
+ *
7
+ * Side effects: `mousemove` and `resize` listeners on `window` and a `requestAnimationFrame` loop, all removed on
8
+ * unmount.
9
+ *
10
+ * @returns The canvas.
11
+ */
12
+ declare function StarryBackground(): React.JSX.Element;
4
13
 
5
14
  export { StarryBackground as default };
@@ -1,9 +1,22 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
 
3
+ /**
4
+ * Props of {@link ThemeSwitcher}.
5
+ */
3
6
  interface ThemeSwitcherProps {
7
+ /** The resolved theme of the site; `'dark'` selects the moon, anything else the sun */
4
8
  theme: string;
9
+ /** Called when the switch is clicked; switch the theme of the site here (for example with `next-themes`) */
5
10
  onToggle: () => void;
6
11
  }
7
- declare function ThemeSwitcher({ theme, onToggle }: ThemeSwitcherProps): react.JSX.Element;
12
+ /**
13
+ * A light/dark switch with a sliding indicator. It stores no theme itself: pass the resolved theme and a toggle. Until
14
+ * it is mounted on the client it renders an invisible placeholder of the same size, so the server output does not
15
+ * depend on the theme.
16
+ *
17
+ * @param props - See {@link ThemeSwitcherProps}.
18
+ * @returns The switch button.
19
+ */
20
+ declare function ThemeSwitcher({ theme, onToggle }: ThemeSwitcherProps): React.JSX.Element;
8
21
 
9
22
  export { ThemeSwitcher, type ThemeSwitcherProps };
@@ -1,9 +1,22 @@
1
- import * as react from 'react';
1
+ import * as React from 'react';
2
2
 
3
+ /**
4
+ * Props of {@link ThemeSwitcher}.
5
+ */
3
6
  interface ThemeSwitcherProps {
7
+ /** The resolved theme of the site; `'dark'` selects the moon, anything else the sun */
4
8
  theme: string;
9
+ /** Called when the switch is clicked; switch the theme of the site here (for example with `next-themes`) */
5
10
  onToggle: () => void;
6
11
  }
7
- declare function ThemeSwitcher({ theme, onToggle }: ThemeSwitcherProps): react.JSX.Element;
12
+ /**
13
+ * A light/dark switch with a sliding indicator. It stores no theme itself: pass the resolved theme and a toggle. Until
14
+ * it is mounted on the client it renders an invisible placeholder of the same size, so the server output does not
15
+ * depend on the theme.
16
+ *
17
+ * @param props - See {@link ThemeSwitcherProps}.
18
+ * @returns The switch button.
19
+ */
20
+ declare function ThemeSwitcher({ theme, onToggle }: ThemeSwitcherProps): React.JSX.Element;
8
21
 
9
22
  export { ThemeSwitcher, type ThemeSwitcherProps };
package/dist/index.cjs CHANGED
@@ -33,38 +33,22 @@ __export(index_exports, {
33
33
  StarryBackground: () => import_StarryBackground.default
34
34
  });
35
35
  module.exports = __toCommonJS(index_exports);
36
- __reExport(index_exports, require("./components/CodeBlock"), module.exports);
37
- __reExport(index_exports, require("./components/CodeHighlighter"), module.exports);
38
- __reExport(index_exports, require("./components/CopyIconButton"), module.exports);
39
- __reExport(index_exports, require("./components/Features"), module.exports);
40
36
  __reExport(index_exports, require("./components/Footer"), module.exports);
41
37
  __reExport(index_exports, require("./components/Logo"), module.exports);
42
38
  __reExport(index_exports, require("./components/NavBar"), module.exports);
43
39
  var import_NoSSR = __toESM(require("./components/NoSSR"), 1);
44
40
  __reExport(index_exports, require("./components/Orb"), module.exports);
45
- __reExport(index_exports, require("./components/PackageInstallationTabs"), module.exports);
46
41
  var import_StarryBackground = __toESM(require("./components/StarryBackground"), 1);
47
- __reExport(index_exports, require("./components/StyledLink"), module.exports);
48
42
  __reExport(index_exports, require("./components/ThemeSwitcher"), module.exports);
49
- __reExport(index_exports, require("./components/VideoPlayer"), module.exports);
50
43
  __reExport(index_exports, require("./utils"), module.exports);
51
- __reExport(index_exports, require("@tuwaio/nova-core"), module.exports);
52
44
  // Annotate the CommonJS export names for ESM import in node:
53
45
  0 && (module.exports = {
54
46
  NoSSR,
55
47
  StarryBackground,
56
- ...require("./components/CodeBlock"),
57
- ...require("./components/CodeHighlighter"),
58
- ...require("./components/CopyIconButton"),
59
- ...require("./components/Features"),
60
48
  ...require("./components/Footer"),
61
49
  ...require("./components/Logo"),
62
50
  ...require("./components/NavBar"),
63
51
  ...require("./components/Orb"),
64
- ...require("./components/PackageInstallationTabs"),
65
- ...require("./components/StyledLink"),
66
52
  ...require("./components/ThemeSwitcher"),
67
- ...require("./components/VideoPlayer"),
68
- ...require("./utils"),
69
- ...require("@tuwaio/nova-core")
53
+ ...require("./utils")
70
54
  });