4f:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:Tf83,"use client"; import { useEffect, useRef, useState, type ButtonHTMLAttributes } from "react"; import { flushSync } from "react-dom"; type ViewTransitionLike = { ready: Promise; finished: Promise }; type TransitionDocument = Document & { startViewTransition?: (update: () => void | Promise) => ViewTransitionLike }; export type ThemeRevealProps = Omit, "onChange" | "onClick" | "onError"> & { theme: "light" | "dark"; onThemeChange: (theme: "light" | "dark") => void | Promise; onError?: (error: unknown) => void; lightLabel?: string; darkLabel?: string; duration?: number; }; export function ThemeReveal({ theme, onThemeChange, onError, lightLabel = "Use light theme", darkLabel = "Use dark theme", duration = 460, className = "", disabled, ...props }: ThemeRevealProps) { const button = useRef(null); const pendingRef = useRef(false); const [reduced, setReduced] = useState(false); const [pending, setPending] = useState(false); useEffect(() => { const query = window.matchMedia("(prefers-reduced-motion: reduce)"); const update = () => setReduced(query.matches); update(); query.addEventListener("change", update); return () => query.removeEventListener("change", update); }, []); const toggle = async () => { if (disabled || pendingRef.current) return; pendingRef.current = true; setPending(true); const next = theme === "dark" ? "light" : "dark"; try { const start = (document as TransitionDocument).startViewTransition; if (!start || reduced || !button.current) { await onThemeChange(next); return; } const box = button.current.getBoundingClientRect(); const x = box.left + box.width / 2; const y = box.top + box.height / 2; const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y)); const transition = start.call(document, () => { let result: void | Promise = undefined; flushSync(() => { result = onThemeChange(next); }); return result; }); await transition.ready; document.documentElement.animate( { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`] }, { duration, easing: "cubic-bezier(.23,1,.32,1)", pseudoElement: "::view-transition-new(root)" }, ); await transition.finished; } catch (error: unknown) { onError?.(error); } finally { pendingRef.current = false; setPending(false); } }; const dark = theme === "dark"; const unavailable = Boolean(disabled || pending); return ( ); } 4b:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/theme-reveal.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/theme-reveal","itemId":"@motion-lexicon/theme-reveal"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L51",null,{"files":[{"path":"src/registry/components/theme-reveal.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/theme-reveal.tsx"}]}]]}],"$L53"]}]

Theme Reveal

Installation

Files

components

Styles