thirdweb 5.80.0 → 5.80.1-nightly-ce3e850fdbf34911e20919ecc2674e4a63f08fa3-20241225000333

package/src/react/core/utils/walletIcon.ts

@@ -38,6 +38,9 @@ export const genericWalletIcon =
 const passkeyIcon =
   "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzU2MzlfMzIpIj4KPHBhdGggZD0iTTcuOTk5NTkgNi42NjY1QzcuNjQ1OTYgNi42NjY1IDcuMzA2ODMgNi44MDY5OCA3LjA1Njc4IDcuMDU3MDNDNi44MDY3MyA3LjMwNzA4IDYuNjY2MjUgNy42NDYyMiA2LjY2NjI1IDcuOTk5ODRDNi42NjYyNSA4LjY3OTg0IDYuNTk5NTkgOS42NzMxNyA2LjQ5MjkyIDEwLjY2NjUiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIxLjI1NDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNOS4zMzI5MyA4Ljc0NjU4QzkuMzMyOTMgMTAuMzMzMiA5LjMzMjkzIDEyLjk5OTkgOC42NjYyNiAxNC42NjY2IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTExLjUyNzMgMTQuMDEzM0MxMS42MDczIDEzLjYxMzMgMTEuODE0IDEyLjQ4IDExLjg2MDcgMTIiIHN0cm9rZT0iIzMzODVGRiIgc3Ryb2tlLXdpZHRoPSIxLjI1NDkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8cGF0aCBkPSJNMS4zMzM5OCA4LjAwMDE2QzEuMzMzOTggNi42MDA5NSAxLjc3NDIzIDUuMjM3MiAyLjU5MjM3IDQuMTAyMDlDMy40MTA1MSAyLjk2Njk5IDQuNTY1MDUgMi4xMTgwOCA1Ljg5MjQ3IDEuNjc1NjFDNy4yMTk4OCAxLjIzMzE0IDguNjUyODYgMS4yMTk1NCA5Ljk4ODQ0IDEuNjM2NzRDMTEuMzI0IDIuMDUzOTQgMTIuNDk0NSAyLjg4MDc5IDEzLjMzNCA0LjAwMDE2IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTEuMzMzOTggMTAuNjY2NUgxLjMzOTE0IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTE0LjUzMjcgMTAuNjY2NUMxNC42NjYgOS4zMzMxNyAxNC42MiA3LjA5NzE3IDE0LjUzMjcgNi42NjY1IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTMuMzMzOTggMTIuOTk5OEMzLjY2NzMyIDExLjk5OTggNC4wMDA2NSA5Ljk5OTg0IDQuMDAwNjUgNy45OTk4NEMzLjk5OTk4IDcuNTQ1NzUgNC4wNzY2MyA3LjA5NDg2IDQuMjI3MzIgNi42NjY1IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTUuNzY3MDkgMTQuNjY2OEM1LjkwNzA5IDE0LjIyNjggNi4wNjcwOSAxMy43ODY4IDYuMTQ3MDkgMTMuMzMzNSIgc3Ryb2tlPSIjMzM4NUZGIiBzdHJva2Utd2lkdGg9IjEuMjU0OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik02IDQuNTMzNDZDNi42MDgyNyA0LjE4MjI4IDcuMjk4MjggMy45OTc0NSA4LjAwMDY0IDMuOTk3NTZDOC43MDMwMSAzLjk5NzY3IDkuMzkyOTYgNC4xODI3MiAxMC4wMDExIDQuNTM0MUMxMC42MDkzIDQuODg1NDggMTEuMTE0MiA1LjM5MDc5IDExLjQ2NTEgNS45OTkyM0MxMS44MTYgNi42MDc2NiAxMi4wMDA1IDcuMjk3NzYgMTIgOC4wMDAxMlY5LjMzMzQ2IiBzdHJva2U9IiMzMzg1RkYiIHN0cm9rZS13aWR0aD0iMS4yNTQ5IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF81NjM5XzMyIj4KPHJlY3Qgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSJ3aGl0ZSIvPgo8L2NsaXBQYXRoPgo8L2RlZnM+Cjwvc3ZnPgo=";
 
+/**
+ * @internal
+ */
 export const socialIcons = {
   google: googleIconUri,
   apple: appleIconUri,

package/src/react/web/ui/MediaRenderer/MediaRenderer.test.tsx

@@ -1,11 +1,18 @@
-import { describe, expect, it } from "vitest";
+import React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import {
+  fireEvent,
   render,
   screen,
   waitFor,
 } from "../../../../../test/src/react-render.js";
 import { TEST_CLIENT } from "../../../../../test/src/test-clients.js";
-import { MediaRenderer } from "./MediaRenderer.js";
+import {
+  IframePlayer,
+  LinkPlayer,
+  MediaRenderer,
+  mergeRefs,
+} from "./MediaRenderer.js";
 
 describe("MediaRenderer", () => {
   it("should render nothing if no src provided", () => {
@@ -31,4 +38,188 @@ describe("MediaRenderer", () => {
       expect(screen.getByRole("img")).toBeInTheDocument();
     });
   });
+
+  describe("mergeRefs", () => {
+    it("should call all callback refs with the given value", () => {
+      const callbackRef1 = vi.fn();
+      const callbackRef2 = vi.fn();
+
+      const mergedRef = mergeRefs([callbackRef1, callbackRef2]);
+
+      const testValue = { test: "value" };
+      mergedRef(testValue);
+
+      expect(callbackRef1).toHaveBeenCalledWith(testValue);
+      expect(callbackRef2).toHaveBeenCalledWith(testValue);
+    });
+
+    it("should assign the value to all mutable object refs", () => {
+      const mutableRef1 = React.createRef();
+      const mutableRef2 = React.createRef();
+
+      const mergedRef = mergeRefs([mutableRef1, mutableRef2]);
+
+      const testValue = { test: "value" };
+      mergedRef(testValue);
+
+      expect(mutableRef1.current).toBe(testValue);
+      expect(mutableRef2.current).toBe(testValue);
+    });
+
+    it("should handle a mix of callback and mutable object refs", () => {
+      const callbackRef = vi.fn();
+      const mutableRef = React.createRef();
+
+      const mergedRef = mergeRefs([callbackRef, mutableRef]);
+
+      const testValue = { test: "value" };
+      mergedRef(testValue);
+
+      expect(callbackRef).toHaveBeenCalledWith(testValue);
+      expect(mutableRef.current).toBe(testValue);
+    });
+
+    it("should do nothing if refs array is empty", () => {
+      const mergedRef = mergeRefs([]);
+
+      expect(() => mergedRef(null)).not.toThrow();
+    });
+  });
+
+  describe("LinkPlayer", () => {
+    it("renders with default props", () => {
+      render(<LinkPlayer />);
+
+      const linkElement = screen.getByText("File");
+      expect(linkElement).toBeInTheDocument();
+      expect(linkElement.tagName).toBe("A");
+      expect(linkElement).toHaveAttribute("target", "_blank");
+      expect(linkElement).toHaveAttribute("rel", "noopener noreferrer");
+    });
+
+    it("renders with custom src and alt", () => {
+      const src = "https://example.com/file";
+      const alt = "Custom File Name";
+      render(<LinkPlayer src={src} alt={alt} />);
+
+      const linkElement = screen.getByText(alt);
+      expect(linkElement).toBeInTheDocument();
+      expect(linkElement).toHaveAttribute("href", src);
+    });
+
+    it("applies custom style and className", () => {
+      const customStyle = { backgroundColor: "red" };
+      const customClassName = "custom-class";
+      const { container } = render(
+        <LinkPlayer style={customStyle} className={customClassName} />,
+      );
+
+      const outerDiv = container.querySelector(".custom-class");
+      if (!outerDiv) {
+        throw new Error("Failed to render LinkPlayer");
+      }
+      const styles = window.getComputedStyle(outerDiv);
+      expect(styles.backgroundColor).toBe("red");
+    });
+
+    it("forwards ref to anchor element", () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+      render(<LinkPlayer ref={ref} />);
+
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+    });
+  });
+
+  describe("IframePlayer", () => {
+    beforeEach(() => {
+      // Reset the body before each test
+      document.body.innerHTML = "";
+    });
+
+    it("renders with default props", () => {
+      render(<IframePlayer />);
+
+      const iframe = screen.getByTitle("thirdweb iframe player");
+      expect(iframe).toBeInTheDocument();
+      expect(iframe.tagName).toBe("IFRAME");
+      expect(iframe).toHaveAttribute("sandbox", "allow-scripts");
+      expect(iframe).toHaveAttribute(
+        "allow",
+        "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",
+      );
+    });
+
+    it("applies custom src and alt", () => {
+      const src = "https://example.com/video";
+      const alt = "Custom Video";
+      render(<IframePlayer src={src} alt={alt} />);
+
+      const iframe = screen.getByTitle(alt);
+      expect(iframe).toBeInTheDocument();
+      expect(iframe).toHaveAttribute("src", src);
+    });
+
+    it("renders poster image when provided", () => {
+      const poster = "https://example.com/poster.jpg";
+      render(<IframePlayer poster={poster} />);
+
+      const posterImg = screen.getByRole("img");
+      expect(posterImg).toBeInTheDocument();
+      expect(posterImg).toHaveAttribute("src", poster);
+    });
+
+    it("toggles play state when PlayButton is clicked", async () => {
+      render(<IframePlayer src="https://example.com/video" />);
+
+      const playButton = screen.getByRole("button");
+      expect(playButton).toBeInTheDocument();
+
+      const iframe = screen.getByTitle("thirdweb iframe player");
+      expect(iframe).toHaveAttribute("src", "https://example.com/video");
+
+      fireEvent.click(playButton);
+
+      // After clicking, the iframe src should be undefined
+      expect(iframe).not.toHaveAttribute("src");
+
+      fireEvent.click(playButton);
+
+      // After clicking again, the iframe src should be restored
+      expect(iframe).toHaveAttribute("src", "https://example.com/video");
+    });
+
+    it("applies custom style", () => {
+      const customStyle = { backgroundColor: "red" };
+      const { container } = render(
+        <IframePlayer style={customStyle} className="iframe-test" />,
+      );
+
+      const element = container.querySelector(".iframe-test");
+      if (!element) {
+        throw new Error("no iframe detected");
+      }
+      expect(element).toHaveStyle("background-color: red");
+    });
+
+    it("forwards ref to iframe element", () => {
+      const ref = React.createRef<HTMLIFrameElement>();
+      render(<IframePlayer ref={ref} />);
+
+      expect(ref.current).toBeInstanceOf(HTMLIFrameElement);
+    });
+
+    it("respects requireInteraction prop", () => {
+      render(
+        <IframePlayer src="https://example.com/video" requireInteraction />,
+      );
+
+      const iframe = screen.getByTitle("thirdweb iframe player");
+      expect(iframe).not.toHaveAttribute("src");
+
+      const playButton = screen.getByRole("button");
+      fireEvent.click(playButton);
+
+      expect(iframe).toHaveAttribute("src", "https://example.com/video");
+    });
+  });
 });

package/src/react/web/ui/MediaRenderer/MediaRenderer.tsx

@@ -521,7 +521,10 @@ const AudioPlayer = /* @__PURE__ */ (() =>
     );
   }))();
 
-const IframePlayer = /* @__PURE__ */ (() =>
+/**
+ * @internal Exported for tests
+ */
+export const IframePlayer = /* @__PURE__ */ (() =>
   React.forwardRef<
     HTMLIFrameElement,
     Omit<
@@ -588,7 +591,10 @@ const IframePlayer = /* @__PURE__ */ (() =>
     );
   }))();
 
-const LinkPlayer = /* @__PURE__ */ (() =>
+/**
+ * @internal Exported for tests
+ */
+export const LinkPlayer = /* @__PURE__ */ (() =>
   React.forwardRef<
     HTMLAnchorElement,
     Pick<MediaRendererProps, "src" | "alt" | "style" | "className">
@@ -640,8 +646,11 @@ const LinkPlayer = /* @__PURE__ */ (() =>
     );
   }))();
 
+/**
+ * @internal
+ */
 // biome-ignore lint/suspicious/noExplicitAny: TODO: fix any
-function mergeRefs<T = any>(
+export function mergeRefs<T = any>(
   refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,
 ): React.RefCallback<T> {
   return (value) => {

package/src/react/web/ui/MediaRenderer/icons.test.tsx

@@ -0,0 +1,80 @@
+import { describe, expect, it } from "vitest";
+import { render } from "~test/react-render.js";
+import {
+  CarbonDocumentAudio,
+  CarbonDocumentUnknown,
+  CarbonPauseFilled,
+  CarbonPlayFilledAlt,
+} from "./icons.js";
+
+describe("MediaRenderer Icons", () => {
+  it("renders CarbonDocumentUnknown correctly", () => {
+    const { container } = render(<CarbonDocumentUnknown />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+    expect(container.querySelector("svg")).toHaveAttribute("width", "16");
+    expect(container.querySelector("svg")).toHaveAttribute("height", "16");
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "viewBox",
+      "0 0 32 32",
+    );
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "role",
+      "presentation",
+    );
+  });
+
+  it("renders CarbonDocumentAudio correctly", () => {
+    const { container } = render(<CarbonDocumentAudio />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+    expect(container.querySelector("svg")).toHaveAttribute("width", "16");
+    expect(container.querySelector("svg")).toHaveAttribute("height", "16");
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "viewBox",
+      "0 0 32 32",
+    );
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "role",
+      "presentation",
+    );
+  });
+
+  it("renders CarbonPauseFilled correctly", () => {
+    const { container } = render(<CarbonPauseFilled />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+    expect(container.querySelector("svg")).toHaveAttribute("width", "16");
+    expect(container.querySelector("svg")).toHaveAttribute("height", "16");
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "viewBox",
+      "0 0 32 32",
+    );
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "role",
+      "presentation",
+    );
+  });
+
+  it("renders CarbonPlayFilledAlt correctly", () => {
+    const { container } = render(<CarbonPlayFilledAlt />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+    expect(container.querySelector("svg")).toHaveAttribute("width", "16");
+    expect(container.querySelector("svg")).toHaveAttribute("height", "16");
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "viewBox",
+      "0 0 32 32",
+    );
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "role",
+      "presentation",
+    );
+  });
+
+  it("applies custom props to the svg element", () => {
+    const { container } = render(
+      <CarbonDocumentUnknown data-testid="custom-icon" />,
+    );
+    expect(container.querySelector("svg")).toHaveAttribute(
+      "data-testid",
+      "custom-icon",
+    );
+  });
+});

package/src/react/web/ui/MediaRenderer/mime/mime.test.ts

@@ -0,0 +1,66 @@
+import { describe, expect, it } from "vitest";
+import { getMimeTypeFromUrl } from "./mime.js";
+import { extensionsToMimeType } from "./types.js";
+
+describe("getMimeTypeFromUrl", () => {
+  it("should return correct mime type for valid file extensions", () => {
+    expect(getMimeTypeFromUrl("https://example.com/image.jpg")).toBe(
+      "image/jpeg",
+    );
+    expect(getMimeTypeFromUrl("https://example.com/audio.mp3")).toBe(
+      "audio/mpeg",
+    );
+    expect(getMimeTypeFromUrl("https://example.com/video.mp4")).toBe(
+      "video/mp4",
+    );
+    expect(getMimeTypeFromUrl("https://example.com/document.html")).toBe(
+      "text/html",
+    );
+    expect(getMimeTypeFromUrl("https://example.com/model.gltf")).toBe(
+      "model/gltf+json",
+    );
+  });
+
+  it("should be case-insensitive for file extensions", () => {
+    expect(getMimeTypeFromUrl("https://example.com/IMAGE.JPG")).toBe(
+      "image/jpeg",
+    );
+    expect(getMimeTypeFromUrl("https://example.com/AUDIO.MP3")).toBe(
+      "audio/mpeg",
+    );
+  });
+
+  it("should return null for unknown file extensions", () => {
+    expect(getMimeTypeFromUrl("https://example.com/unknown.xyz")).toBeNull();
+  });
+
+  it("should handle URLs without file extensions", () => {
+    expect(getMimeTypeFromUrl("https://example.com/noextension")).toBeNull();
+    expect(getMimeTypeFromUrl("https://example.com/")).toBeNull();
+  });
+
+  it("should handle URLs with only a file name", () => {
+    expect(getMimeTypeFromUrl("image.jpg")).toBe("image/jpeg");
+    expect(getMimeTypeFromUrl("audio.mp3")).toBe("audio/mpeg");
+  });
+
+  it("should handle URLs with special characters", () => {
+    expect(
+      getMimeTypeFromUrl("https://example.com/image%20with%20spaces.png"),
+    ).toBe("image/png");
+    expect(
+      getMimeTypeFromUrl(
+        "https://example.com/file-name_with-special_chars.mp4",
+      ),
+    ).toBe("video/mp4");
+  });
+
+  it("should return correct mime type for all defined extensions", () => {
+    // biome-ignore lint/complexity/noForEach: Relax just a test
+    Object.entries(extensionsToMimeType).forEach(([extension, mimeType]) => {
+      expect(getMimeTypeFromUrl(`https://example.com/file.${extension}`)).toBe(
+        mimeType,
+      );
+    });
+  });
+});

package/src/react/web/ui/MediaRenderer/useResolvedMediaType.test.tsx

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+import { TEST_CLIENT } from "~test/test-clients.js";
+import { resolveMediaTypeFromUri } from "./useResolvedMediaType.js";
+
+const client = TEST_CLIENT;
+
+describe("useResolvedMediaType", () => {
+  it("resolveMediaTypeFromUri should return an empty string if uri is falsy", () => {
+    expect(resolveMediaTypeFromUri({ client })).toBe("");
+  });
+
+  it("resolveMediaTypeFromUri should resolve Arweave scheme", () => {
+    expect(resolveMediaTypeFromUri({ client, uri: "ar://test" })).toBe(
+      "https://arweave.net/test",
+    );
+  });
+
+  it("resolveMediaTypeFromUri should resolve IPFS uri with custom gateway", () => {
+    expect(
+      resolveMediaTypeFromUri({
+        client,
+        uri: "ipfs://test",
+        gatewayUrl: "https://cf-ipfs.com/ipfs/",
+      }),
+    ).toBe("https://cf-ipfs.com/ipfs/test");
+  });
+});

package/src/react/web/ui/MediaRenderer/useResolvedMediaType.ts

@@ -46,3 +46,31 @@ export function useResolvedMediaType(
     isFetched: resolvedMimeType.isFetched || !!mimeType,
   };
 }
+
+/**
+ * @internal Exported for tests
+ */
+export function resolveMediaTypeFromUri(props: {
+  uri?: string;
+  client: ThirdwebClient;
+  gatewayUrl?: string;
+}) {
+  const { uri, client, gatewayUrl } = props;
+  if (!uri) {
+    return "";
+  }
+  if (uri.startsWith("ar://")) {
+    return resolveArweaveScheme({ uri, gatewayUrl });
+  }
+  if (gatewayUrl) {
+    return uri.replace("ipfs://", gatewayUrl);
+  }
+  try {
+    return resolveScheme({
+      client,
+      uri,
+    });
+  } catch {
+    return uri.replace("ipfs://", "https://ipfs.io/ipfs/");
+  }
+}

package/src/react/web/ui/hooks/useCopyClipboard.test.tsx

@@ -0,0 +1,41 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, renderHook } from "~test/react-render.js";
+import { useClipboard } from "./useCopyClipboard.js";
+
+describe("useClipboard", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should copy text to clipboard and set hasCopied to true", async () => {
+    const { result } = renderHook(() => useClipboard("Hello World"));
+
+    // Simulate copying text
+    await act(async () => {
+      await result.current.onCopy();
+    });
+
+    // Check if hasCopied is true after copying
+    expect(result.current.hasCopied).toBe(true);
+  });
+
+  it("should reset hasCopied to false after 1.5 seconds", async () => {
+    const { result } = renderHook(() => useClipboard("Hello World"));
+
+    await act(async () => {
+      await result.current.onCopy();
+    });
+
+    expect(result.current.hasCopied).toBe(true);
+
+    act(() => {
+      vi.advanceTimersByTime(1500);
+    });
+
+    expect(result.current.hasCopied).toBe(false);
+  });
+});

package/src/react/web/ui/hooks/useDebouncedValue.test.tsx

@@ -0,0 +1,107 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, renderHook } from "~test/react-render.js";
+import { useDebouncedValue } from "./useDebouncedValue.js";
+
+describe("useDebouncedValue", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should return the initial value immediately", () => {
+    const { result } = renderHook(() => useDebouncedValue("initial", 1000));
+    expect(result.current).toBe("initial");
+  });
+
+  it("should debounce value changes", () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebouncedValue(value, delay),
+      { initialProps: { value: "initial", delay: 1000 } },
+    );
+
+    expect(result.current).toBe("initial");
+
+    // Change the value
+    rerender({ value: "changed", delay: 1000 });
+
+    // The value should not change immediately
+    expect(result.current).toBe("initial");
+
+    // Fast-forward time by 500ms
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    // The value should still not have changed
+    expect(result.current).toBe("initial");
+
+    // Fast-forward time to just before the delay
+    act(() => {
+      vi.advanceTimersByTime(499);
+    });
+
+    // The value should still not have changed
+    expect(result.current).toBe("initial");
+
+    // Fast-forward time to the full delay
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+
+    // Now the value should have changed
+    expect(result.current).toBe("changed");
+  });
+
+  it("should handle multiple rapid changes", () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebouncedValue(value, delay),
+      { initialProps: { value: "initial", delay: 1000 } },
+    );
+
+    rerender({ value: "change1", delay: 1000 });
+    rerender({ value: "change2", delay: 1000 });
+    rerender({ value: "change3", delay: 1000 });
+
+    expect(result.current).toBe("initial");
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(result.current).toBe("change3");
+  });
+
+  it("should respect changing delay times", () => {
+    const { result, rerender } = renderHook(
+      ({ value, delay }) => useDebouncedValue(value, delay),
+      { initialProps: { value: "initial", delay: 1000 } },
+    );
+
+    rerender({ value: "changed", delay: 500 });
+
+    act(() => {
+      vi.advanceTimersByTime(600);
+    });
+
+    expect(result.current).toBe("changed");
+  });
+
+  it("should cancel debounce on unmount", () => {
+    const { result, unmount } = renderHook(() =>
+      useDebouncedValue("initial", 1000),
+    );
+
+    expect(result.current).toBe("initial");
+
+    act(() => {
+      unmount();
+      vi.advanceTimersByTime(1000);
+    });
+
+    // The value should remain 'initial' as the effect should have been cleaned up
+    expect(result.current).toBe("initial");
+  });
+});