// ThemeToggle.jsx — tri-state theme cycler
// States: 'dark' → 'light' → 'auto' → 'dark' ...
// Shows the *preference* icon (not the resolved effective theme) so
// 'auto' has its own glyph and the user sees what they picked.
function ThemeToggle({ theme, onCycle, compact }) {
const next = { dark: "light", light: "auto", auto: "dark" }[theme];
const label = {
dark: "Theme: dark · click for light",
light: "Theme: light · click for auto",
auto: "Theme: auto (follows OS) · click for dark",
}[theme];
// Icons — moon / sun / half-circle
const icon = {
dark: (
),
light: (
),
auto: (
),
}[theme];
const sizing = compact
? "h-7 w-7 rounded-md"
: "h-8 px-2.5 gap-1.5 rounded-lg";
return (
);
}
window.ThemeToggle = ThemeToggle;