50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T315d,// Hairline UI · theme-toggle · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { flushSync } from "react-dom"; import { TextMorph } from "./text-morph"; /* ───────────────────────────────────────────────────────── * THEME TOGGLE: the sun sets into a moon, and the room follows * * icon one round button: the sun's rays fold in and turn * away while a shadow slides across the disc and * carves the moon (and back at dawn) * pill the same icon with a label that morphs, "Light" * into "Dark" * segmented Light, System and Dark, with a thumb thrown to the * choice; its icon morphs the same way * reveal the new theme spreads out from the button in a * circle (View Transitions); elsewhere it switches * without a flash of animated colours * * On its own it remembers the choice, follows the system when * asked to and sets the dark class on . Pass value and * onValueChange to drive it from next-themes or your own state. * ───────────────────────────────────────────────────────── */ export type Theme = "light" | "dark" | "system"; export interface ThemeToggleProps extends Omit, "onChange"> { variant?: "icon" | "pill" | "segmented"; value?: Theme; defaultValue?: Theme; onValueChange?: (theme: Theme) => void; /** Where an uncontrolled toggle remembers the choice. */ storageKey?: string; /** How an uncontrolled toggle marks dark mode on : the "dark" class, or data-theme. */ attribute?: "class" | "data-theme"; /** Spread the new theme from the button in a circle, where the browser can. */ reveal?: boolean; } const EASE = "cubic-bezier(0.16,1,0.3,1)"; const THROW = "cubic-bezier(0.34,1.36,0.64,1)"; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"; const OPTIONS: { value: Theme; label: string }[] = [ { value: "light", label: "Light" }, { value: "system", label: "System" }, { value: "dark", label: "Dark" }, ]; const reducedQuery = "(prefers-reduced-motion: reduce)"; const darkQuery = "(prefers-color-scheme: dark)"; const subscribeQuery = (q: string) => (onChange: () => void) => { const query = window.matchMedia(q); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useMedia = (q: string) => React.useSyncExternalStore(subscribeQuery(q), () => window.matchMedia(q).matches, () => false); /** * The sun and moon are one drawing: a disc that grows into the moon, eight rays that fold in, * and a shadow (a masked-out circle) that slides across to carve the crescent. */ function SunMoon({ dark, reduced, className = "size-[18px]" }: { dark: boolean; reduced: boolean; className?: string }) { const id = React.useId().replace(/:/g, ""); const t = (ms: number, ease = EASE) => (reduced ? "none" : `transform ${ms}ms ${ease}, opacity ${Math.round(ms * 0.6)}ms ${EASE}`); return ( ); } function SystemIcon() { return ( ); } /** Switch themes inside a View Transition, revealed as a circle growing out of the button. */ function withReveal(from: HTMLElement | null, apply: () => void, enabled: boolean) { const doc = document as Document & { startViewTransition?: (cb: () => void) => { ready: Promise; finished: Promise } }; if (!enabled || !from || !doc.startViewTransition) { // No transition API: switch with colour transitions held for a frame, so nothing flickers mid-change. const hold = document.createElement("style"); hold.textContent = "*,*::before,*::after{transition:none!important}"; document.head.appendChild(hold); apply(); void document.body.offsetHeight; requestAnimationFrame(() => hold.remove()); return; } const r = from.getBoundingClientRect(); const x = r.left + r.width / 2; const y = r.top + r.height / 2; const radius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y)); // Only the circle should move: switch off the browser's default crossfade for this one transition. const style = document.createElement("style"); style.textContent = "::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}"; document.head.appendChild(style); const transition = doc.startViewTransition(() => flushSync(apply)); transition.ready .then(() => document.documentElement.animate( { clipPath: [`circle(0px at ${x}px ${y}px)`, `circle(${radius}px at ${x}px ${y}px)`] }, { duration: 620, easing: "cubic-bezier(0.65,0,0.35,1)", pseudoElement: "::view-transition-new(root)" } ) ) .catch(() => {}); transition.finished.finally(() => style.remove()); } export function ThemeToggle({ variant = "icon", value, defaultValue = "system", onValueChange, storageKey = "theme", attribute = "class", reveal = true, className = "", ...props }: ThemeToggleProps) { const reduced = useMedia(reducedQuery); const systemDark = useMedia(darkQuery); const controlled = value !== undefined; const [own, setOwn] = React.useState(defaultValue); const [ready, setReady] = React.useState(false); const theme = value ?? own; const resolved = theme === "system" ? (systemDark ? "dark" : "light") : theme; const dark = resolved === "dark"; const rootRef = React.useRef(null); const segRefs = React.useRef<(HTMLButtonElement | null)[]>([]); const [thumb, setThumb] = React.useState({ left: 0, width: 0, ready: false }); // Uncontrolled: pick up the remembered choice once mounted (the first paint never animates). React.useEffect(() => { if (!controlled) { try { const saved = localStorage.getItem(storageKey) as Theme | null; if (saved === "light" || saved === "dark" || saved === "system") setOwn(saved); } catch {} } const frame = requestAnimationFrame(() => setReady(true)); return () => cancelAnimationFrame(frame); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // Uncontrolled: mark and follow the system while on "system". React.useEffect(() => { if (controlled) return; const root = document.documentElement; if (attribute === "class") root.classList.toggle("dark", dark); else root.setAttribute("data-theme", resolved); root.style.colorScheme = resolved; }, [controlled, dark, resolved, attribute]); const choose = (next: Theme) => { if (next === theme) return; const nextDark = (next === "system" ? systemDark : next === "dark") !== dark; const apply = () => { if (!controlled) { setOwn(next); try { localStorage.setItem(storageKey, next); } catch {} const root = document.documentElement; const r = next === "system" ? (systemDark ? "dark" : "light") : next; if (attribute === "class") root.classList.toggle("dark", r === "dark"); else root.setAttribute("data-theme", r); root.style.colorScheme = r; } onValueChange?.(next); }; // Only reveal when the colours actually change (System to Light on a light system doesn't). withReveal(rootRef.current, apply, reveal && !reduced && nextDark); }; // Segmented: the thumb sits under the choice. const index = Math.max(0, OPTIONS.findIndex((o) => o.value === theme)); React.useLayoutEffect(() => { if (variant !== "segmented") return; const measure = () => { const el = segRefs.current[index]; if (!el) return; setThumb((t) => (t.left === el.offsetLeft && t.width === el.offsetWidth ? t : { left: el.offsetLeft, width: el.offsetWidth, ready: t.width > 0 })); }; measure(); const observer = new ResizeObserver(measure); segRefs.current.forEach((el) => el && observer.observe(el)); return () => observer.disconnect(); }, [variant, index]); const motion = reduced || !ready; const label = dark ? "Dark" : "Light"; if (variant === "segmented") { return (

{ const moves: Record = { ArrowRight: index + 1, ArrowLeft: index - 1, Home: 0, End: OPTIONS.length - 1 }; if (!(e.key in moves)) return; e.preventDefault(); const next = (moves[e.key] + OPTIONS.length) % OPTIONS.length; choose(OPTIONS[next].value); segRefs.current[next]?.focus(); }} className={`relative inline-flex h-9 items-center rounded-full bg-muted p-0.5 ${className}`} {...props} > {OPTIONS.map((o, i) => { const selected = o.value === theme; return ( ); })}

); } return (

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/theme-toggle.tsx","content":"$52","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]