@vllnt/ui 0.3.0-canary.00b20d6 → 0.3.0-canary.0572c35

package/dist/components/activity-heatmap/activity-heatmap.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { normalizeDate } from "../../lib/format";
 import { cn } from "../../lib/utils";
 const WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
 const VISIBLE_DAY_LABELS = /* @__PURE__ */ new Set(["Mon", "Wed", "Fri"]);
@@ -11,6 +10,12 @@ const LEVEL_CLASS_NAMES = [
   "bg-emerald-500/65",
   "bg-emerald-500"
 ];
+function normalizeDate(input) {
+  if (input instanceof Date) {
+    return new Date(input.getTime());
+  }
+  return new Date(input);
+}
 function toUtcDate(date) {
   return new Date(
     Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate())

package/dist/components/ai-sidebar/ai-sidebar.js

@@ -5,11 +5,11 @@ import {
   forwardRef,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState
 } from "react";
 import { Bot, MessageSquarePlus, X } from "lucide-react";
-import { useEscapeKey } from "../../lib/use-escape-key";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
 const DEFAULT_WIDTH = 400;
@@ -96,14 +96,23 @@ function AISidebarProvider({
   );
   return /* @__PURE__ */ jsx(AISidebarContext.Provider, { value, children });
 }
+function useEscapeToClose(enabled, isOpen, onClose) {
+  useEffect(() => {
+    if (!enabled || !isOpen) return;
+    const handler = (event) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => {
+      document.removeEventListener("keydown", handler);
+    };
+  }, [enabled, isOpen, onClose]);
+}
 const AISidebar = forwardRef(
   (props, ref) => {
     const { children, className, closeOnEscape = true, ...rest } = props;
     const { close, labels, openState, position, width } = useAISidebar();
-    useEscapeKey(close, {
-      enabled: closeOnEscape && openState,
-      target: "document"
-    });
+    useEscapeToClose(closeOnEscape, openState, close);
     return /* @__PURE__ */ jsx(
       "aside",
       {

package/dist/components/code-block/code-block.js

@@ -9,7 +9,6 @@ import { Check, Copy } from "lucide-react";
 import { useTheme } from "next-themes";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
-import { useCopyToClipboard } from "../copy-button/copy-button";
 function extractTextFromChildren(node) {
   if (typeof node === "string") {
     return node;
@@ -36,7 +35,7 @@ function CodeBlock({
   language = "typescript",
   showLanguage = false
 }) {
-  const { copied, copy } = useCopyToClipboard();
+  const [copied, setCopied] = useState(false);
   const [highlighter, setHighlighter] = useState(
     null
   );
@@ -78,8 +77,12 @@ function CodeBlock({
       element.removeEventListener("wheel", onWheel);
     };
   }, []);
-  const handleCopy = () => {
-    void copy(code);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
   };
   const SyntaxHighlighter = highlighter?.SyntaxHighlighter;
   const codeStyle = isDark ? highlighter?.oneDark : highlighter?.oneLight;

package/dist/components/code-playground/code-playground.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { Check, Code, Copy, FileCode } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { Button } from "../button/button";
-import { useCopyToClipboard } from "../copy-button/copy-button";
 function CodeLine({ highlightLines, line, lineNumber }) {
   const isHighlighted = highlightLines.includes(lineNumber);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex", isHighlighted && "bg-primary/10 -mx-4 px-4"), children: [
@@ -25,11 +25,15 @@ function CodePlayground({
   showLineNumbers = false,
   title
 }) {
-  const { copied, copy } = useCopyToClipboard();
+  const [copied, setCopied] = useState(false);
   const code = extractCode(children);
   const lines = code.split("\n");
-  const handleCopy = () => {
-    void copy(code);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2e3);
   };
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-muted/30", children: [

package/dist/components/countdown-timer/countdown-timer.js

@@ -1,8 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { normalizeDate } from "../../lib/format";
-import { useLiveDate } from "../../lib/use-live-date";
 import { cn } from "../../lib/utils";
 import { Badge } from "../badge/badge";
 import {
@@ -12,6 +10,32 @@ import {
   CardHeader,
   CardTitle
 } from "../card/card";
+function normalizeDate(input) {
+  if (input instanceof Date) {
+    return new Date(input.getTime());
+  }
+  return new Date(input);
+}
+function useLiveDate(now, tickMs) {
+  const fixedNow = React.useMemo(
+    () => now ? normalizeDate(now) : void 0,
+    [now]
+  );
+  const [liveNow, setLiveNow] = React.useState(fixedNow ?? /* @__PURE__ */ new Date());
+  React.useEffect(() => {
+    if (fixedNow) {
+      setLiveNow(fixedNow);
+      return;
+    }
+    const interval = window.setInterval(() => {
+      setLiveNow(/* @__PURE__ */ new Date());
+    }, tickMs);
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [fixedNow, tickMs]);
+  return liveNow;
+}
 function getRemainingMs(deadline, now) {
   return deadline.getTime() - now.getTime();
 }

package/dist/components/flow-diagram/flow-fullscreen.js

@@ -1,16 +1,26 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { memo } from "react";
+import { memo, useEffect } from "react";
 import { X } from "lucide-react";
 import { createPortal } from "react-dom";
-import { useEscapeKey } from "../../lib/use-escape-key";
 import { cn } from "../../lib/utils";
 const FlowFullscreen = memo(function FlowFullscreen2({
   children,
   isOpen,
   onClose
 }) {
-  useEscapeKey(onClose, { enabled: isOpen, target: "document" });
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, onClose]);
   if (!isOpen) return null;
   if (typeof document === "undefined") return null;
   return createPortal(

package/dist/components/flow-diagram/use-flow-diagram.js

@@ -6,8 +6,6 @@ import {
   useReactFlow
 } from "@xyflow/react";
 import { toPng } from "html-to-image";
-import { useBodyScrollLock } from "../../lib/use-body-scroll-lock";
-import { useEscapeKey } from "../../lib/use-escape-key";
 const MIN_ZOOM = 0.1;
 const MAX_ZOOM = 2;
 const ZOOM_STEP = 0.2;
@@ -46,11 +44,24 @@ function useFullscreenState(allowFullscreen) {
   const closeFullscreen = useCallback(() => {
     setIsFullscreen(false);
   }, []);
-  useEscapeKey(closeFullscreen, {
-    enabled: isFullscreen,
-    target: "document"
-  });
-  useBodyScrollLock(isFullscreen);
+  useEffect(() => {
+    if (!isFullscreen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        closeFullscreen();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isFullscreen, closeFullscreen]);
+  useEffect(() => {
+    document.body.style.overflow = isFullscreen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isFullscreen]);
   return { closeFullscreen, isFullscreen, toggleFullscreen };
 }
 const IMAGE_WIDTH = 1024;