/*! ratio-ui · design system for knowledge sharing · https://github.com/losol/ratio-ui · (c) 2026 Losol AS · MPL-2.0 */
import { Moon, Sun } from "../../icons/index.js";
import { Button } from "../Button/Button2.js";
import "../Button/index.js";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/core/ThemeToggle/ThemeToggle.tsx
/**
* ThemeToggle component for switching between light and dark modes
*
* @example
* ```tsx
* <ThemeToggle
*   theme={currentTheme}
*   onThemeChange={(newTheme) => setTheme(newTheme)}
* />
* ```
*/
var ThemeToggle = ({ theme, onThemeChange, className = "", ariaLabel = "Toggle theme" }) => {
	const [mounted, setMounted] = useState(false);
	const isDark = theme === "dark";
	useEffect(() => {
		setMounted(true);
	}, []);
	const handleToggle = () => {
		onThemeChange(isDark ? "light" : "dark");
	};
	if (!mounted) return /* @__PURE__ */ jsx(Button, {
		variant: "text",
		size: "sm",
		onClick: handleToggle,
		className,
		"aria-label": ariaLabel,
		type: "button",
		children: /* @__PURE__ */ jsx("span", { className: "w-5 h-5 block" })
	});
	return /* @__PURE__ */ jsxs(Button, {
		variant: "text",
		size: "sm",
		onClick: handleToggle,
		className,
		"aria-label": ariaLabel,
		type: "button",
		suppressHydrationWarning: true,
		children: [/* @__PURE__ */ jsx("span", {
			suppressHydrationWarning: true,
			children: isDark ? /* @__PURE__ */ jsx(Sun, {
				className: "w-5 h-5",
				"aria-hidden": "true"
			}) : /* @__PURE__ */ jsx(Moon, {
				className: "w-5 h-5",
				"aria-hidden": "true"
			})
		}), /* @__PURE__ */ jsx("span", {
			className: "sr-only",
			suppressHydrationWarning: true,
			children: isDark ? "Switch to light mode" : "Switch to dark mode"
		})]
	});
};
//#endregion
export { ThemeToggle };

//# sourceMappingURL=ThemeToggle.js.map