@tuwaio/docs-ui 0.0.28 → 0.0.30

package/dist/components/StarryBackground.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "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 = useRef(null);
+  const mouseRef = useRef({ x: 0, y: 0 });
+  const starsRef = useRef([]);
+  const animationIdRef = useRef(null);
+  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__ */ 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]"
+    }
+  );
+}
+export {
+  StarryBackground as default
+};

package/dist/components/StyledLink.cjs

@@ -0,0 +1,44 @@
+"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 StyledLink_exports = {};
+__export(StyledLink_exports, {
+  StyledLink: () => StyledLink
+});
+module.exports = __toCommonJS(StyledLink_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_nova_core = require("@tuwaio/nova-core");
+function StyledLink({ href, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      className: (0, import_nova_core.cn)(
+        "tuwadocs:font-medium tuwadocs:text-[var(--tuwa-text-accent)]",
+        "tuwadocs:transition-all tuwadocs:hover:underline tuwadocs:underline-offset-4"
+      ),
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StyledLink
+});

package/dist/components/StyledLink.d.cts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare function StyledLink({ href, children }: {
+    href: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { StyledLink };

package/dist/components/StyledLink.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+declare function StyledLink({ href, children }: {
+    href: string;
+    children: ReactNode;
+}): react.JSX.Element;
+
+export { StyledLink };

package/dist/components/StyledLink.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "@tuwaio/nova-core";
+function StyledLink({ href, children }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: cn(
+        "tuwadocs:font-medium tuwadocs:text-[var(--tuwa-text-accent)]",
+        "tuwadocs:transition-all tuwadocs:hover:underline tuwadocs:underline-offset-4"
+      ),
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      children
+    }
+  );
+}
+export {
+  StyledLink
+};

package/dist/components/ThemeSwitcher.cjs

@@ -0,0 +1,96 @@
+"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 ThemeSwitcher_exports = {};
+__export(ThemeSwitcher_exports, {
+  ThemeSwitcher: () => ThemeSwitcher
+});
+module.exports = __toCommonJS(ThemeSwitcher_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_solid = require("@heroicons/react/24/solid");
+var import_nova_core = require("@tuwaio/nova-core");
+var import_react = require("react");
+function ThemeSwitcher({ theme, onToggle }) {
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  const defaultStyles = "tuwadocs:bg-black/5 tuwadocs:border-black/5 tuwadocs:hover:bg-black/10 tuwadocs:dark:bg-white/10 tuwadocs:dark:border-white/10 tuwadocs:dark:hover:bg-white/20";
+  if (!mounted) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: (0, import_nova_core.cn)(
+          "tuwadocs:relative tuwadocs:flex tuwadocs:h-10 tuwadocs:w-20 tuwadocs:md:h-8 tuwadocs:md:w-16 tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:border tuwadocs:opacity-0",
+          defaultStyles
+        )
+      }
+    );
+  }
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      onClick: onToggle,
+      className: (0, import_nova_core.cn)(
+        "tuwadocs:group tuwadocs:relative tuwadocs:flex tuwadocs:h-10 tuwadocs:w-20 tuwadocs:md:h-8 tuwadocs:md:w-16 tuwadocs:cursor-pointer tuwadocs:items-center tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:p-1 tuwadocs:transition-all tuwadocs:duration-300 tuwadocs:ease-in-out tuwadocs:backdrop-blur-sm tuwadocs:border",
+        defaultStyles
+      ),
+      "aria-label": "Toggle theme",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_nova_core.cn)(
+              "tuwadocs:absolute tuwadocs:top-[1px] tuwadocs:left-[2px] tuwadocs:z-10 tuwadocs:h-9 tuwadocs:w-9 tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:bg-[var(--tuwa-bg-primary)] tuwadocs:shadow-md tuwadocs:md:hidden",
+              isDark ? "tuwa-slide-dark" : "tuwa-slide-light"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_nova_core.cn)(
+              "tuwadocs:absolute tuwadocs:top-[1px] tuwadocs:left-[2px] tuwadocs:z-10 tuwadocs:h-9 tuwadocs:w-9 tuwadocs:md:h-7 tuwadocs:md:w-7 tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:bg-[var(--tuwa-bg-primary)] tuwadocs:shadow-md tuwadocs:hidden tuwadocs:md:block",
+              isDark ? "tuwa-slide-dark" : "tuwa-slide-light"
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "tuwadocs:relative tuwadocs:z-20 tuwadocs:flex tuwadocs:w-full tuwadocs:justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tuwadocs:flex tuwadocs:flex-1 tuwadocs:items-center tuwadocs:justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_solid.SunIcon,
+            {
+              className: `tuwadocs:h-6 tuwadocs:w-6 tuwadocs:relative tuwadocs:-left-[2px] tuwadocs:md:h-5 tuwadocs:md:w-5 tuwadocs:transition-colors tuwadocs:duration-300 ${!isDark ? "tuwadocs:text-yellow-500" : "tuwadocs:text-slate-500 tuwadocs:group-hover:text-yellow-400"}`
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tuwadocs:flex tuwadocs:flex-1 tuwadocs:justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_solid.MoonIcon,
+            {
+              className: `tuwadocs:h-6 tuwadocs:w-6 tuwadocs:relative tuwadocs:left-[2px] tuwadocs:md:h-5 tuwadocs:md:w-5 tuwadocs:transition-colors tuwadocs:duration-300 ${isDark ? "tuwadocs:text-indigo-400" : "tuwadocs:text-slate-500 tuwadocs:group-hover:text-indigo-300"}`
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeSwitcher
+});

package/dist/components/ThemeSwitcher.d.cts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+
+interface ThemeSwitcherProps {
+    theme: string;
+    onToggle: () => void;
+}
+declare function ThemeSwitcher({ theme, onToggle }: ThemeSwitcherProps): react.JSX.Element;
+
+export { ThemeSwitcher, type ThemeSwitcherProps };

package/dist/components/ThemeSwitcher.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+
+interface ThemeSwitcherProps {
+    theme: string;
+    onToggle: () => void;
+}
+declare function ThemeSwitcher({ theme, onToggle }: ThemeSwitcherProps): react.JSX.Element;
+
+export { ThemeSwitcher, type ThemeSwitcherProps };

package/dist/components/ThemeSwitcher.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/solid";
+import { cn } from "@tuwaio/nova-core";
+import { useEffect, useState } from "react";
+function ThemeSwitcher({ theme, onToggle }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const defaultStyles = "tuwadocs:bg-black/5 tuwadocs:border-black/5 tuwadocs:hover:bg-black/10 tuwadocs:dark:bg-white/10 tuwadocs:dark:border-white/10 tuwadocs:dark:hover:bg-white/20";
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "tuwadocs:relative tuwadocs:flex tuwadocs:h-10 tuwadocs:w-20 tuwadocs:md:h-8 tuwadocs:md:w-16 tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:border tuwadocs:opacity-0",
+          defaultStyles
+        )
+      }
+    );
+  }
+  const isDark = theme === "dark";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      onClick: onToggle,
+      className: cn(
+        "tuwadocs:group tuwadocs:relative tuwadocs:flex tuwadocs:h-10 tuwadocs:w-20 tuwadocs:md:h-8 tuwadocs:md:w-16 tuwadocs:cursor-pointer tuwadocs:items-center tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:p-1 tuwadocs:transition-all tuwadocs:duration-300 tuwadocs:ease-in-out tuwadocs:backdrop-blur-sm tuwadocs:border",
+        defaultStyles
+      ),
+      "aria-label": "Toggle theme",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "tuwadocs:absolute tuwadocs:top-[1px] tuwadocs:left-[2px] tuwadocs:z-10 tuwadocs:h-9 tuwadocs:w-9 tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:bg-[var(--tuwa-bg-primary)] tuwadocs:shadow-md tuwadocs:md:hidden",
+              isDark ? "tuwa-slide-dark" : "tuwa-slide-light"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "tuwadocs:absolute tuwadocs:top-[1px] tuwadocs:left-[2px] tuwadocs:z-10 tuwadocs:h-9 tuwadocs:w-9 tuwadocs:md:h-7 tuwadocs:md:w-7 tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:bg-[var(--tuwa-bg-primary)] tuwadocs:shadow-md tuwadocs:hidden tuwadocs:md:block",
+              isDark ? "tuwa-slide-dark" : "tuwa-slide-light"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "tuwadocs:relative tuwadocs:z-20 tuwadocs:flex tuwadocs:w-full tuwadocs:justify-between", children: [
+          /* @__PURE__ */ jsx("div", { className: "tuwadocs:flex tuwadocs:flex-1 tuwadocs:items-center tuwadocs:justify-center", children: /* @__PURE__ */ jsx(
+            SunIcon,
+            {
+              className: `tuwadocs:h-6 tuwadocs:w-6 tuwadocs:relative tuwadocs:-left-[2px] tuwadocs:md:h-5 tuwadocs:md:w-5 tuwadocs:transition-colors tuwadocs:duration-300 ${!isDark ? "tuwadocs:text-yellow-500" : "tuwadocs:text-slate-500 tuwadocs:group-hover:text-yellow-400"}`
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "tuwadocs:flex tuwadocs:flex-1 tuwadocs:justify-center", children: /* @__PURE__ */ jsx(
+            MoonIcon,
+            {
+              className: `tuwadocs:h-6 tuwadocs:w-6 tuwadocs:relative tuwadocs:left-[2px] tuwadocs:md:h-5 tuwadocs:md:w-5 tuwadocs:transition-colors tuwadocs:duration-300 ${isDark ? "tuwadocs:text-indigo-400" : "tuwadocs:text-slate-500 tuwadocs:group-hover:text-indigo-300"}`
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  ThemeSwitcher
+};

package/dist/components/VideoPlayer.cjs

@@ -0,0 +1,103 @@
+"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 VideoPlayer_exports = {};
+__export(VideoPlayer_exports, {
+  VideoPlayer: () => VideoPlayer
+});
+module.exports = __toCommonJS(VideoPlayer_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_nova_core = require("@tuwaio/nova-core");
+const aspectMap = {
+  "aspect-square": "tuwadocs:aspect-square",
+  "aspect-video": "tuwadocs:aspect-video",
+  "aspect-[4/3]": "tuwadocs:aspect-[4/3]",
+  "aspect-[3/2]": "tuwadocs:aspect-[3/2]",
+  "aspect-[21/9]": "tuwadocs:aspect-[21/9]"
+};
+const VideoPlayer = ({
+  src,
+  poster,
+  autoplay = false,
+  muted = false,
+  loop = false,
+  controls = true,
+  className = "",
+  aspectRatio = "aspect-video",
+  onPlay,
+  onPause,
+  onEnded,
+  "aria-label": ariaLabel
+}) => {
+  const mappedAspectRatio = aspectMap[aspectRatio] || "tuwadocs:aspect-video";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      className: (0, import_nova_core.cn)(
+        // Container with aspect ratio and responsive design
+        "tuwadocs:relative tuwadocs:w-full tuwadocs:overflow-hidden tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:bg-black tuwadocs:my-4",
+        mappedAspectRatio,
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "video",
+        {
+          src,
+          poster,
+          controls,
+          autoPlay: autoplay,
+          muted,
+          loop,
+          className: (0, import_nova_core.cn)(
+            // Video fills container completely
+            "tuwadocs:absolute tuwadocs:inset-0 tuwadocs:h-full tuwadocs:w-full tuwadocs:object-contain",
+            // Smooth transitions and focus states
+            "tuwadocs:transition-opacity tuwadocs:duration-200",
+            "tuwadocs:focus:outline-none tuwadocs:focus:ring-[length:var(--tuwa-ring-width)] tuwadocs:focus:ring-[var(--tuwa-text-accent)] tuwadocs:focus:ring-offset-[length:var(--tuwa-ring-width)] tuwadocs:focus:ring-offset-[var(--tuwa-bg-primary)]"
+          ),
+          onPlay,
+          onPause,
+          onEnded,
+          "aria-label": ariaLabel,
+          preload: "metadata",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("track", { kind: "captions" }),
+            "Your browser does not support the video tag. Please",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "a",
+              {
+                href: src,
+                download: true,
+                className: "tuwadocs:text-[var(--tuwa-text-accent)] tuwadocs:underline tuwadocs:hover:opacity-80",
+                children: "download the video"
+              }
+            ),
+            " ",
+            "to watch it."
+          ]
+        }
+      )
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VideoPlayer
+});

package/dist/components/VideoPlayer.d.cts

@@ -0,0 +1,34 @@
+import react__default from 'react';
+
+/**
+ * Props for the VideoPlayer component.
+ */
+interface VideoPlayerProps {
+    /** Path to the video file in the /public directory */
+    src: string;
+    /** Optional poster image to display before video plays */
+    poster?: string;
+    /** Whether the video should autoplay (Note: most browsers require muted for autoplay) */
+    autoplay?: boolean;
+    /** Whether the video should be muted */
+    muted?: boolean;
+    /** Whether the video should loop */
+    loop?: boolean;
+    /** Whether to show video controls */
+    controls?: boolean;
+    /** Optional CSS class name for the container */
+    className?: string;
+    /** Custom aspect ratio using Tailwind aspect-ratio classes (default: 'aspect-video' for 16:9) */
+    aspectRatio?: 'aspect-square' | 'aspect-video' | 'aspect-[4/3]' | 'aspect-[3/2]' | 'aspect-[21/9]';
+    /** Callback function called when video starts playing */
+    onPlay?: () => void;
+    /** Callback function called when video is paused */
+    onPause?: () => void;
+    /** Callback function called when video ends */
+    onEnded?: () => void;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+}
+declare const VideoPlayer: react__default.FC<VideoPlayerProps>;
+
+export { VideoPlayer, type VideoPlayerProps };

package/dist/components/VideoPlayer.d.ts

@@ -0,0 +1,34 @@
+import react__default from 'react';
+
+/**
+ * Props for the VideoPlayer component.
+ */
+interface VideoPlayerProps {
+    /** Path to the video file in the /public directory */
+    src: string;
+    /** Optional poster image to display before video plays */
+    poster?: string;
+    /** Whether the video should autoplay (Note: most browsers require muted for autoplay) */
+    autoplay?: boolean;
+    /** Whether the video should be muted */
+    muted?: boolean;
+    /** Whether the video should loop */
+    loop?: boolean;
+    /** Whether to show video controls */
+    controls?: boolean;
+    /** Optional CSS class name for the container */
+    className?: string;
+    /** Custom aspect ratio using Tailwind aspect-ratio classes (default: 'aspect-video' for 16:9) */
+    aspectRatio?: 'aspect-square' | 'aspect-video' | 'aspect-[4/3]' | 'aspect-[3/2]' | 'aspect-[21/9]';
+    /** Callback function called when video starts playing */
+    onPlay?: () => void;
+    /** Callback function called when video is paused */
+    onPause?: () => void;
+    /** Callback function called when video ends */
+    onEnded?: () => void;
+    /** ARIA label for accessibility */
+    'aria-label'?: string;
+}
+declare const VideoPlayer: react__default.FC<VideoPlayerProps>;
+
+export { VideoPlayer, type VideoPlayerProps };

package/dist/components/VideoPlayer.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@tuwaio/nova-core";
+const aspectMap = {
+  "aspect-square": "tuwadocs:aspect-square",
+  "aspect-video": "tuwadocs:aspect-video",
+  "aspect-[4/3]": "tuwadocs:aspect-[4/3]",
+  "aspect-[3/2]": "tuwadocs:aspect-[3/2]",
+  "aspect-[21/9]": "tuwadocs:aspect-[21/9]"
+};
+const VideoPlayer = ({
+  src,
+  poster,
+  autoplay = false,
+  muted = false,
+  loop = false,
+  controls = true,
+  className = "",
+  aspectRatio = "aspect-video",
+  onPlay,
+  onPause,
+  onEnded,
+  "aria-label": ariaLabel
+}) => {
+  const mappedAspectRatio = aspectMap[aspectRatio] || "tuwadocs:aspect-video";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        // Container with aspect ratio and responsive design
+        "tuwadocs:relative tuwadocs:w-full tuwadocs:overflow-hidden tuwadocs:rounded-[var(--tuwa-rounded-corners)] tuwadocs:bg-black tuwadocs:my-4",
+        mappedAspectRatio,
+        className
+      ),
+      children: /* @__PURE__ */ jsxs(
+        "video",
+        {
+          src,
+          poster,
+          controls,
+          autoPlay: autoplay,
+          muted,
+          loop,
+          className: cn(
+            // Video fills container completely
+            "tuwadocs:absolute tuwadocs:inset-0 tuwadocs:h-full tuwadocs:w-full tuwadocs:object-contain",
+            // Smooth transitions and focus states
+            "tuwadocs:transition-opacity tuwadocs:duration-200",
+            "tuwadocs:focus:outline-none tuwadocs:focus:ring-[length:var(--tuwa-ring-width)] tuwadocs:focus:ring-[var(--tuwa-text-accent)] tuwadocs:focus:ring-offset-[length:var(--tuwa-ring-width)] tuwadocs:focus:ring-offset-[var(--tuwa-bg-primary)]"
+          ),
+          onPlay,
+          onPause,
+          onEnded,
+          "aria-label": ariaLabel,
+          preload: "metadata",
+          children: [
+            /* @__PURE__ */ jsx("track", { kind: "captions" }),
+            "Your browser does not support the video tag. Please",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: src,
+                download: true,
+                className: "tuwadocs:text-[var(--tuwa-text-accent)] tuwadocs:underline tuwadocs:hover:opacity-80",
+                children: "download the video"
+              }
+            ),
+            " ",
+            "to watch it."
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  VideoPlayer
+};