@tuwaio/docs-ui 0.0.29 → 0.0.31

package/dist/components/Logo.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import parse, { domToReact, Element } from "html-react-parser";
+import React from "react";
+const LOGO_URL = "https://cdn.jsdelivr.net/gh/TuwaIO/workflows@main/preview/logo_v2.svg";
+async function RemoteLogo({ url = LOGO_URL, className, style, ...props }) {
+  let rawSvg;
+  try {
+    const response = await fetch(url, {
+      next: { revalidate: 86400 }
+      // Cache for 24 hours
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch SVG: ${response.status}`);
+    }
+    rawSvg = await response.text();
+  } catch (error) {
+    console.error("RemoteLogo: Failed to fetch SVG from remote source:", error);
+    return /* @__PURE__ */ jsx("svg", { className, style, ...props });
+  }
+  const cleanSvg = rawSvg.replace(/<\?xml[\s\S]*?\?>/g, "").replace(/<!DOCTYPE[\s\S]*?>/gi, "").replace(/\sxml:space=/g, " xmlSpace=").trim();
+  const parsed = parse(cleanSvg, {
+    replace(domNode) {
+      if (domNode instanceof Element && domNode.name === "svg") {
+        const children = domToReact(domNode.children);
+        const attribs = { ...domNode.attribs };
+        if ("xmlspace" in attribs) {
+          attribs.xmlSpace = attribs.xmlspace;
+          delete attribs.xmlspace;
+        }
+        const svgClassName = [className, "remote-logo"].filter(Boolean).join(" ");
+        return /* @__PURE__ */ jsx("svg", { ...attribs, className: svgClassName, style, ...props, children });
+      }
+    }
+  });
+  const elements = Array.isArray(parsed) ? parsed : [parsed];
+  const svgElement = elements.find((el) => React.isValidElement(el) && el.type === "svg");
+  return svgElement ? svgElement : /* @__PURE__ */ jsx("svg", { className, style, ...props });
+}
+export {
+  RemoteLogo
+};

package/dist/components/NavBar.cjs

@@ -0,0 +1,50 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NavBar_exports = {};
+__export(NavBar_exports, {
+  Navbar: () => Navbar
+});
+module.exports = __toCommonJS(NavBar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_nova_core = require("@tuwaio/nova-core");
+var import_nextra_theme_docs = require("nextra-theme-docs");
+var import_utils = require("../utils");
+function Navbar({ links, logo }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_nextra_theme_docs.Navbar, { logo, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tuwadocs:flex tuwadocs:items-center tuwadocs:gap-3", children: (links ?? import_utils.baseNavLinks).map(({ title, href, image, className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: (0, import_nova_core.cn)(
+        "tuwadocs:hidden tuwadocs:sm:flex tuwadocs:items-center tuwadocs:gap-1 tuwadocs:px-3 tuwadocs:py-1.5 tuwadocs:text-sm tuwadocs:font-medium tuwadocs:transition-colors tuwadocs:text-[var(--tuwa-text-primary)]",
+        className
+      ),
+      children: [
+        image,
+        title
+      ]
+    },
+    title
+  )) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Navbar
+});

package/dist/components/NavBar.d.cts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type SocialLink = {
+    title: string;
+    href: string;
+    image: ReactNode;
+    className?: string;
+};
+interface NavProps {
+    links?: SocialLink[];
+    logo?: ReactNode;
+}
+declare function Navbar({ links, logo }: NavProps): react.JSX.Element;
+
+export { type NavProps, Navbar, type SocialLink };

package/dist/components/NavBar.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type SocialLink = {
+    title: string;
+    href: string;
+    image: ReactNode;
+    className?: string;
+};
+interface NavProps {
+    links?: SocialLink[];
+    logo?: ReactNode;
+}
+declare function Navbar({ links, logo }: NavProps): react.JSX.Element;
+
+export { type NavProps, Navbar, type SocialLink };

package/dist/components/NavBar.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@tuwaio/nova-core";
+import { Navbar as NextraNavbar } from "nextra-theme-docs";
+import { baseNavLinks } from "../utils";
+function Navbar({ links, logo }) {
+  return /* @__PURE__ */ jsx(NextraNavbar, { logo, children: /* @__PURE__ */ jsx("div", { className: "tuwadocs:flex tuwadocs:items-center tuwadocs:gap-3", children: (links ?? baseNavLinks).map(({ title, href, image, className }) => /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn(
+        "tuwadocs:hidden tuwadocs:sm:flex tuwadocs:items-center tuwadocs:gap-1 tuwadocs:px-3 tuwadocs:py-1.5 tuwadocs:text-sm tuwadocs:font-medium tuwadocs:transition-colors tuwadocs:text-[var(--tuwa-text-primary)]",
+        className
+      ),
+      children: [
+        image,
+        title
+      ]
+    },
+    title
+  )) }) });
+}
+export {
+  Navbar
+};

package/dist/components/NoSSR.cjs

@@ -0,0 +1,36 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NoSSR_exports = {};
+__export(NoSSR_exports, {
+  default: () => NoSSR
+});
+module.exports = __toCommonJS(NoSSR_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+function NoSSR({ children }) {
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+}

package/dist/components/NoSSR.d.cts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * A wrapper component that prevents its children from rendering on the server (SSR).
+ * It waits until the component is mounted on the client before rendering them.
+ *
+ * @param props - The component props.
+ * @param props.children - The children components to render on the client.
+ * @returns The children components on the client, or null on the server.
+ */
+declare function NoSSR({ children }: {
+    children: ReactNode;
+}): react.JSX.Element | null;
+
+export { NoSSR as default };

package/dist/components/NoSSR.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * A wrapper component that prevents its children from rendering on the server (SSR).
+ * It waits until the component is mounted on the client before rendering them.
+ *
+ * @param props - The component props.
+ * @param props.children - The children components to render on the client.
+ * @returns The children components on the client, or null on the server.
+ */
+declare function NoSSR({ children }: {
+    children: ReactNode;
+}): react.JSX.Element | null;
+
+export { NoSSR as default };

package/dist/components/NoSSR.js

@@ -0,0 +1,16 @@
+"use client";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+function NoSSR({ children }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+export {
+  NoSSR as default
+};

package/dist/components/PackageInstallationTabs.cjs

@@ -0,0 +1,64 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var PackageInstallationTabs_exports = {};
+__export(PackageInstallationTabs_exports, {
+  PackageInstallationTabs: () => PackageInstallationTabs
+});
+module.exports = __toCommonJS(PackageInstallationTabs_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_outline = require("@heroicons/react/24/outline");
+var import_components = require("nextra/components");
+var import_CodeBlock = require("./CodeBlock");
+var import_CodeHighlighter = require("./CodeHighlighter");
+const tabsItems = [
+  {
+    title: "pnpm",
+    command: "pnpm add"
+  },
+  {
+    title: "bun",
+    command: "bun add"
+  },
+  {
+    title: "npm",
+    command: "npm install"
+  },
+  {
+    title: "yarn",
+    command: "yarn add"
+  }
+];
+function PackageInstallationTabs({
+  packagesList,
+  resolvedTheme
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tuwadocs:my-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tabs, { items: tabsItems.map((tab) => tab.title), children: tabsItems.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tabs.Tab, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_CodeBlock.CodeBlock, { title: "Terminal", titleIcons: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_outline.CommandLineIcon, {}), textToCopy: `${tab.command} ${packagesList}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_CodeHighlighter.CodeHighlighter,
+    {
+      resolvedTheme,
+      language: "bash",
+      children: `${tab.command} ${packagesList}`
+    }
+  ) }) }, tab.title)) }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PackageInstallationTabs
+});

package/dist/components/PackageInstallationTabs.d.cts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { CodeHighlighterProps } from './CodeHighlighter.cjs';
+
+declare function PackageInstallationTabs({ packagesList, resolvedTheme, }: {
+    packagesList: string;
+} & Pick<CodeHighlighterProps, 'resolvedTheme'>): react.JSX.Element;
+
+export { PackageInstallationTabs };

package/dist/components/PackageInstallationTabs.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { CodeHighlighterProps } from './CodeHighlighter.js';
+
+declare function PackageInstallationTabs({ packagesList, resolvedTheme, }: {
+    packagesList: string;
+} & Pick<CodeHighlighterProps, 'resolvedTheme'>): react.JSX.Element;
+
+export { PackageInstallationTabs };

package/dist/components/PackageInstallationTabs.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { CommandLineIcon } from "@heroicons/react/24/outline";
+import { Tabs } from "nextra/components";
+import { CodeBlock } from "./CodeBlock";
+import { CodeHighlighter } from "./CodeHighlighter";
+const tabsItems = [
+  {
+    title: "pnpm",
+    command: "pnpm add"
+  },
+  {
+    title: "bun",
+    command: "bun add"
+  },
+  {
+    title: "npm",
+    command: "npm install"
+  },
+  {
+    title: "yarn",
+    command: "yarn add"
+  }
+];
+function PackageInstallationTabs({
+  packagesList,
+  resolvedTheme
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "tuwadocs:my-4", children: /* @__PURE__ */ jsx(Tabs, { items: tabsItems.map((tab) => tab.title), children: tabsItems.map((tab) => /* @__PURE__ */ jsx(Tabs.Tab, { children: /* @__PURE__ */ jsx(CodeBlock, { title: "Terminal", titleIcons: /* @__PURE__ */ jsx(CommandLineIcon, {}), textToCopy: `${tab.command} ${packagesList}`, children: /* @__PURE__ */ jsx(
+    CodeHighlighter,
+    {
+      resolvedTheme,
+      language: "bash",
+      children: `${tab.command} ${packagesList}`
+    }
+  ) }) }, tab.title)) }) });
+}
+export {
+  PackageInstallationTabs
+};

package/dist/components/StarryBackground.cjs

@@ -0,0 +1,162 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var StarryBackground_exports = {};
+__export(StarryBackground_exports, {
+  default: () => StarryBackground
+});
+module.exports = __toCommonJS(StarryBackground_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+const NUM_STARS = 100;
+const STAR_RADIUS_MIN = 0.9;
+const STAR_RADIUS_MAX = 2.7;
+const STAR_VELOCITY_FACTOR = 0.3;
+const STAR_INITIAL_OPACITY_MIN = 0.5;
+const STAR_INITIAL_OPACITY_RANGE = 0.5;
+const MOUSE_REPEL_DISTANCE = 150;
+const MOUSE_REPEL_DISTANCE_SQ = MOUSE_REPEL_DISTANCE * MOUSE_REPEL_DISTANCE;
+const MOUSE_REPEL_FORCE = 2;
+const LINE_MAX_DISTANCE = 120;
+const LINE_MAX_DISTANCE_SQ = LINE_MAX_DISTANCE * LINE_MAX_DISTANCE;
+const LINE_WIDTH = 0.75;
+const TWINKLE_SPEED = 1e-3;
+function StarryBackground() {
+  const canvasRef = (0, import_react.useRef)(null);
+  const mouseRef = (0, import_react.useRef)({ x: 0, y: 0 });
+  const starsRef = (0, import_react.useRef)([]);
+  const animationIdRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const setCanvasSize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+    };
+    const createStars = () => {
+      const stars = [];
+      for (let i = 0; i < NUM_STARS; i++) {
+        stars.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          radius: Math.random() * (STAR_RADIUS_MAX - STAR_RADIUS_MIN) + STAR_RADIUS_MIN,
+          vx: (Math.random() - 0.5) * STAR_VELOCITY_FACTOR,
+          vy: (Math.random() - 0.5) * STAR_VELOCITY_FACTOR,
+          opacity: Math.random() * STAR_INITIAL_OPACITY_RANGE + STAR_INITIAL_OPACITY_MIN
+        });
+      }
+      return stars;
+    };
+    const handleMouseMove = (e) => {
+      mouseRef.current.x = e.clientX;
+      mouseRef.current.y = e.clientY;
+    };
+    const handleResize = () => {
+      setCanvasSize();
+      starsRef.current = createStars();
+    };
+    const updateAndDrawScene = (timestamp) => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const stars = starsRef.current;
+      const mouse = mouseRef.current;
+      const isDark = document.documentElement.classList.contains("dark");
+      for (const star of stars) {
+        star.x += star.vx;
+        star.y += star.vy;
+        if (star.x < 0 || star.x > canvas.width) star.vx = -star.vx;
+        if (star.y < 0 || star.y > canvas.height) star.vy = -star.vy;
+        const dxMouse = mouse.x - star.x;
+        const dyMouse = mouse.y - star.y;
+        const distMouseSq = dxMouse * dxMouse + dyMouse * dyMouse;
+        if (distMouseSq < MOUSE_REPEL_DISTANCE_SQ) {
+          const distance = Math.sqrt(distMouseSq);
+          const force = (MOUSE_REPEL_DISTANCE - distance) / MOUSE_REPEL_DISTANCE;
+          const forceX = dxMouse / distance * force * MOUSE_REPEL_FORCE;
+          const forceY = dyMouse / distance * force * MOUSE_REPEL_FORCE;
+          star.x -= forceX;
+          star.y -= forceY;
+        }
+        star.opacity = 0.3 + Math.sin(timestamp * TWINKLE_SPEED + star.x) * 0.5 + 0.5;
+        const clampedOpacity = Math.min(star.opacity, 1);
+        const gradient = ctx.createRadialGradient(star.x, star.y, 0, star.x, star.y, star.radius);
+        if (isDark) {
+          gradient.addColorStop(0, `rgba(255, 255, 255, ${clampedOpacity})`);
+          gradient.addColorStop(0.5, `rgba(147, 197, 253, ${clampedOpacity * 0.6})`);
+          gradient.addColorStop(1, "rgba(59, 130, 246, 0)");
+        } else {
+          gradient.addColorStop(0, `rgba(15, 23, 42, ${clampedOpacity})`);
+          gradient.addColorStop(0.5, `rgba(71, 85, 105, ${clampedOpacity * 0.6})`);
+          gradient.addColorStop(1, "rgba(148, 163, 184, 0)");
+        }
+        ctx.beginPath();
+        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
+        ctx.fillStyle = gradient;
+        ctx.fill();
+      }
+      ctx.lineWidth = LINE_WIDTH;
+      for (let i = 0; i < stars.length; i++) {
+        const star1 = stars[i];
+        for (let j = i + 1; j < stars.length; j++) {
+          const star2 = stars[j];
+          const dx = star1.x - star2.x;
+          const dy = star1.y - star2.y;
+          const distanceSq = dx * dx + dy * dy;
+          if (distanceSq < LINE_MAX_DISTANCE_SQ) {
+            const opacity = 0.2 * (1 - distanceSq / LINE_MAX_DISTANCE_SQ);
+            if (isDark) {
+              ctx.strokeStyle = `rgba(147, 197, 253, ${opacity})`;
+            } else {
+              ctx.strokeStyle = `rgba(71, 85, 105, ${opacity * 1.5})`;
+            }
+            ctx.beginPath();
+            ctx.moveTo(star1.x, star1.y);
+            ctx.lineTo(star2.x, star2.y);
+            ctx.stroke();
+          }
+        }
+      }
+    };
+    const animate = () => {
+      const timestamp = Date.now();
+      updateAndDrawScene(timestamp);
+      animationIdRef.current = requestAnimationFrame(animate);
+    };
+    setCanvasSize();
+    starsRef.current = createStars();
+    animate();
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      if (animationIdRef.current) {
+        cancelAnimationFrame(animationIdRef.current);
+      }
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "tuwadocs:absolute tuwadocs:inset-0 tuwadocs:w-full tuwadocs:h-full tuwadocs:bg-gradient-to-b tuwadocs:from-slate-200 tuwadocs:to-slate-350 tuwadocs:dark:from-[#0a0e27] tuwadocs:dark:to-[#1a1f3a]"
+    }
+  );
+}

package/dist/components/StarryBackground.d.cts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function StarryBackground(): react.JSX.Element;
+
+export { StarryBackground as default };

package/dist/components/StarryBackground.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function StarryBackground(): react.JSX.Element;
+
+export { StarryBackground as default };