nextuiq/dist/index45.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import * as React from 'react';

const ThemeContext = React.createContext(void 0);
function ThemeClient({ children, defaultTheme = "system" }) {
  const [theme, setTheme] = React.useState(() => {
    if (typeof window !== "undefined") {
      return localStorage.getItem("theme") || defaultTheme;
    }
    return defaultTheme;
  });
  React.useEffect(() => {
    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
    const updateTheme = () => {
      const currentTheme = theme === "system" ? mediaQuery.matches ? "dark" : "light" : theme;
      document.body.setAttribute("data-theme", currentTheme);
      localStorage.setItem("theme", theme);
    };
    const handleChange = () => {
      if (theme === "system") {
        updateTheme();
      }
    };
    mediaQuery.addEventListener("change", handleChange);
    updateTheme();
    return () => mediaQuery.removeEventListener("change", handleChange);
  }, [theme]);
  const toggleTheme = React.useCallback(() => {
    setTheme((prevTheme) => {
      switch (prevTheme) {
        case "light":
          return "dark";
        case "dark":
          return "system";
        case "system":
          return "light";
        default:
          return "light";
      }
    });
  }, []);
  return /* @__PURE__ */ jsxRuntimeExports.jsx(ThemeContext.Provider, { value: { theme, toggleTheme }, children });
}
const useTheme = () => {
  const context = React.useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme must be used within a ThemeProvider");
  }
  return context;
};

export { ThemeClient, useTheme };