@philiprehberger/react-theme-provider 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# @philiprehberger/react-theme-provider
+
+Dark/light/system theme provider for React with localStorage persistence and system preference detection.
+
+## Installation
+
+```bash
+npm install @philiprehberger/react-theme-provider
+```
+
+## Usage
+
+### ThemeProvider
+
+Wrap your app with the provider:
+
+```tsx
+import { ThemeProvider } from '@philiprehberger/react-theme-provider';
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="system" storageKey="theme">
+      <YourApp />
+    </ThemeProvider>
+  );
+}
+```
+
+### useTheme
+
+Access theme state from any component:
+
+```tsx
+import { useTheme } from '@philiprehberger/react-theme-provider';
+
+function MyComponent() {
+  const { theme, setTheme, resolvedTheme } = useTheme();
+  // theme: 'light' | 'dark' | 'system'
+  // resolvedTheme: 'light' | 'dark' (actual applied theme)
+}
+```
+
+### ThemeToggle
+
+Pre-built toggle component with sun/moon/system icons:
+
+```tsx
+import { ThemeToggle } from '@philiprehberger/react-theme-provider';
+
+<ThemeToggle />
+```
+
+## How It Works
+
+- Applies `light` or `dark` class to `document.documentElement`
+- Persists user preference to `localStorage`
+- Listens for system `prefers-color-scheme` changes when set to `system`
+- Works with Tailwind CSS `dark:` variant out of the box
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var ThemeContext = react.createContext(void 0);
+function ThemeProvider({
+  children,
+  storageKey = "theme",
+  defaultTheme = "system"
+}) {
+  const [theme, setTheme] = react.useState(defaultTheme);
+  const [resolvedTheme, setResolvedTheme] = react.useState("light");
+  const [mounted, setMounted] = react.useState(false);
+  react.useEffect(() => {
+    setMounted(true);
+    const stored = localStorage.getItem(storageKey);
+    if (stored && ["light", "dark", "system"].includes(stored)) {
+      setTheme(stored);
+    }
+  }, [storageKey]);
+  react.useEffect(() => {
+    if (!mounted) return;
+    const root = document.documentElement;
+    let resolved;
+    if (theme === "system") {
+      const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      resolved = systemDark ? "dark" : "light";
+    } else {
+      resolved = theme;
+    }
+    setResolvedTheme(resolved);
+    root.classList.remove("light", "dark");
+    root.classList.add(resolved);
+    localStorage.setItem(storageKey, theme);
+  }, [theme, mounted, storageKey]);
+  react.useEffect(() => {
+    if (!mounted || theme !== "system") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setResolvedTheme(e.matches ? "dark" : "light");
+      document.documentElement.classList.remove("light", "dark");
+      document.documentElement.classList.add(e.matches ? "dark" : "light");
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme, mounted]);
+  return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
+}
+function useTheme() {
+  const context = react.useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+var SunIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) });
+var MoonIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
+var SystemIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) });
+function ThemeToggle({
+  className = "flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800",
+  activeClassName = "rounded-md p-2 transition-colors bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white",
+  inactiveClassName = "rounded-md p-2 transition-colors text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+}) {
+  const { theme, setTheme } = useTheme();
+  const options = [
+    { value: "light", icon: SunIcon, label: "Light" },
+    { value: "dark", icon: MoonIcon, label: "Dark" },
+    { value: "system", icon: SystemIcon, label: "System" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, role: "radiogroup", "aria-label": "Theme selection", children: options.map(({ value, icon: Icon, label }) => /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: () => setTheme(value),
+      role: "radio",
+      "aria-checked": theme === value,
+      "aria-label": `${label} theme`,
+      className: theme === value ? activeClassName : inactiveClassName,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {})
+    },
+    value
+  )) });
+}
+
+exports.ThemeProvider = ThemeProvider;
+exports.ThemeToggle = ThemeToggle;
+exports.useTheme = useTheme;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ThemeProvider.tsx","../src/ThemeToggle.tsx"],"names":["createContext","useState","useEffect","jsx","useContext"],"mappings":"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","file":"index.cjs","sourcesContent":["import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';\n\nexport type Theme = 'light' | 'dark' | 'system';\nexport type ResolvedTheme = 'light' | 'dark';\n\nexport interface ThemeContextType {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: ResolvedTheme;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nexport interface ThemeProviderProps {\n  children: ReactNode;\n  /** localStorage key for persisting theme (default: \"theme\") */\n  storageKey?: string;\n  /** Default theme when no stored preference exists (default: \"system\") */\n  defaultTheme?: Theme;\n}\n\n/**\n * Theme provider with dark/light/system support.\n * Persists preference to localStorage and syncs with system preference changes.\n * Applies theme by toggling \"light\"/\"dark\" classes on the document element.\n */\nexport function ThemeProvider({\n  children,\n  storageKey = 'theme',\n  defaultTheme = 'system',\n}: ThemeProviderProps) {\n  const [theme, setTheme] = useState<Theme>(defaultTheme);\n  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('light');\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n    const stored = localStorage.getItem(storageKey) as Theme | null;\n    if (stored && ['light', 'dark', 'system'].includes(stored)) {\n      setTheme(stored);\n    }\n  }, [storageKey]);\n\n  useEffect(() => {\n    if (!mounted) return;\n\n    const root = document.documentElement;\n    let resolved: ResolvedTheme;\n\n    if (theme === 'system') {\n      const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n      resolved = systemDark ? 'dark' : 'light';\n    } else {\n      resolved = theme;\n    }\n\n    setResolvedTheme(resolved);\n    root.classList.remove('light', 'dark');\n    root.classList.add(resolved);\n    localStorage.setItem(storageKey, theme);\n  }, [theme, mounted, storageKey]);\n\n  useEffect(() => {\n    if (!mounted || theme !== 'system') return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleChange = (e: MediaQueryListEvent) => {\n      setResolvedTheme(e.matches ? 'dark' : 'light');\n      document.documentElement.classList.remove('light', 'dark');\n      document.documentElement.classList.add(e.matches ? 'dark' : 'light');\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [theme, mounted]);\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n/**\n * Access the current theme context.\n * Must be used within a ThemeProvider.\n */\nexport function useTheme(): ThemeContextType {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n","import { type ReactNode } from 'react';\nimport { useTheme, type Theme } from './ThemeProvider';\n\nconst SunIcon = () => (\n  <svg className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\" />\n  </svg>\n);\n\nconst MoonIcon = () => (\n  <svg className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\" />\n  </svg>\n);\n\nconst SystemIcon = () => (\n  <svg className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" />\n  </svg>\n);\n\ninterface ThemeOption {\n  value: Theme;\n  icon: () => ReactNode;\n  label: string;\n}\n\nexport interface ThemeToggleProps {\n  /** CSS class for the outer container */\n  className?: string;\n  /** CSS class for the active button */\n  activeClassName?: string;\n  /** CSS class for inactive buttons */\n  inactiveClassName?: string;\n}\n\n/**\n * Three-way theme toggle (light / dark / system).\n * Uses radio group semantics for accessibility.\n */\nexport function ThemeToggle({\n  className = 'flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800',\n  activeClassName = 'rounded-md p-2 transition-colors bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white',\n  inactiveClassName = 'rounded-md p-2 transition-colors text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',\n}: ThemeToggleProps) {\n  const { theme, setTheme } = useTheme();\n\n  const options: ThemeOption[] = [\n    { value: 'light', icon: SunIcon, label: 'Light' },\n    { value: 'dark', icon: MoonIcon, label: 'Dark' },\n    { value: 'system', icon: SystemIcon, label: 'System' },\n  ];\n\n  return (\n    <div className={className} role=\"radiogroup\" aria-label=\"Theme selection\">\n      {options.map(({ value, icon: Icon, label }) => (\n        <button\n          key={value}\n          onClick={() => setTheme(value)}\n          role=\"radio\"\n          aria-checked={theme === value}\n          aria-label={`${label} theme`}\n          className={theme === value ? activeClassName : inactiveClassName}\n        >\n          <Icon />\n        </button>\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    resolvedTheme: ResolvedTheme;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    /** localStorage key for persisting theme (default: "theme") */
+    storageKey?: string;
+    /** Default theme when no stored preference exists (default: "system") */
+    defaultTheme?: Theme;
+}
+/**
+ * Theme provider with dark/light/system support.
+ * Persists preference to localStorage and syncs with system preference changes.
+ * Applies theme by toggling "light"/"dark" classes on the document element.
+ */
+declare function ThemeProvider({ children, storageKey, defaultTheme, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Access the current theme context.
+ * Must be used within a ThemeProvider.
+ */
+declare function useTheme(): ThemeContextType;
+
+interface ThemeToggleProps {
+    /** CSS class for the outer container */
+    className?: string;
+    /** CSS class for the active button */
+    activeClassName?: string;
+    /** CSS class for inactive buttons */
+    inactiveClassName?: string;
+}
+/**
+ * Three-way theme toggle (light / dark / system).
+ * Uses radio group semantics for accessibility.
+ */
+declare function ThemeToggle({ className, activeClassName, inactiveClassName, }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+export { type ResolvedTheme, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, useTheme };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+    resolvedTheme: ResolvedTheme;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    /** localStorage key for persisting theme (default: "theme") */
+    storageKey?: string;
+    /** Default theme when no stored preference exists (default: "system") */
+    defaultTheme?: Theme;
+}
+/**
+ * Theme provider with dark/light/system support.
+ * Persists preference to localStorage and syncs with system preference changes.
+ * Applies theme by toggling "light"/"dark" classes on the document element.
+ */
+declare function ThemeProvider({ children, storageKey, defaultTheme, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Access the current theme context.
+ * Must be used within a ThemeProvider.
+ */
+declare function useTheme(): ThemeContextType;
+
+interface ThemeToggleProps {
+    /** CSS class for the outer container */
+    className?: string;
+    /** CSS class for the active button */
+    activeClassName?: string;
+    /** CSS class for inactive buttons */
+    inactiveClassName?: string;
+}
+/**
+ * Three-way theme toggle (light / dark / system).
+ * Uses radio group semantics for accessibility.
+ */
+declare function ThemeToggle({ className, activeClassName, inactiveClassName, }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+
+export { type ResolvedTheme, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, useTheme };

package/dist/index.js

@@ -0,0 +1,85 @@
+import { createContext, useState, useEffect, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var ThemeContext = createContext(void 0);
+function ThemeProvider({
+  children,
+  storageKey = "theme",
+  defaultTheme = "system"
+}) {
+  const [theme, setTheme] = useState(defaultTheme);
+  const [resolvedTheme, setResolvedTheme] = useState("light");
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+    const stored = localStorage.getItem(storageKey);
+    if (stored && ["light", "dark", "system"].includes(stored)) {
+      setTheme(stored);
+    }
+  }, [storageKey]);
+  useEffect(() => {
+    if (!mounted) return;
+    const root = document.documentElement;
+    let resolved;
+    if (theme === "system") {
+      const systemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      resolved = systemDark ? "dark" : "light";
+    } else {
+      resolved = theme;
+    }
+    setResolvedTheme(resolved);
+    root.classList.remove("light", "dark");
+    root.classList.add(resolved);
+    localStorage.setItem(storageKey, theme);
+  }, [theme, mounted, storageKey]);
+  useEffect(() => {
+    if (!mounted || theme !== "system") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e) => {
+      setResolvedTheme(e.matches ? "dark" : "light");
+      document.documentElement.classList.remove("light", "dark");
+      document.documentElement.classList.add(e.matches ? "dark" : "light");
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme, mounted]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme, resolvedTheme }, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+var SunIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) });
+var MoonIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
+var SystemIcon = () => /* @__PURE__ */ jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" }) });
+function ThemeToggle({
+  className = "flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800",
+  activeClassName = "rounded-md p-2 transition-colors bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white",
+  inactiveClassName = "rounded-md p-2 transition-colors text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+}) {
+  const { theme, setTheme } = useTheme();
+  const options = [
+    { value: "light", icon: SunIcon, label: "Light" },
+    { value: "dark", icon: MoonIcon, label: "Dark" },
+    { value: "system", icon: SystemIcon, label: "System" }
+  ];
+  return /* @__PURE__ */ jsx("div", { className, role: "radiogroup", "aria-label": "Theme selection", children: options.map(({ value, icon: Icon, label }) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: () => setTheme(value),
+      role: "radio",
+      "aria-checked": theme === value,
+      "aria-label": `${label} theme`,
+      className: theme === value ? activeClassName : inactiveClassName,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    },
+    value
+  )) });
+}
+
+export { ThemeProvider, ThemeToggle, useTheme };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ThemeProvider.tsx","../src/ThemeToggle.tsx"],"names":["jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { createContext, useContext, useEffect, useState, type ReactNode } from 'react';\n\nexport type Theme = 'light' | 'dark' | 'system';\nexport type ResolvedTheme = 'light' | 'dark';\n\nexport interface ThemeContextType {\n  theme: Theme;\n  setTheme: (theme: Theme) => void;\n  resolvedTheme: ResolvedTheme;\n}\n\nconst ThemeContext = createContext<ThemeContextType | undefined>(undefined);\n\nexport interface ThemeProviderProps {\n  children: ReactNode;\n  /** localStorage key for persisting theme (default: \"theme\") */\n  storageKey?: string;\n  /** Default theme when no stored preference exists (default: \"system\") */\n  defaultTheme?: Theme;\n}\n\n/**\n * Theme provider with dark/light/system support.\n * Persists preference to localStorage and syncs with system preference changes.\n * Applies theme by toggling \"light\"/\"dark\" classes on the document element.\n */\nexport function ThemeProvider({\n  children,\n  storageKey = 'theme',\n  defaultTheme = 'system',\n}: ThemeProviderProps) {\n  const [theme, setTheme] = useState<Theme>(defaultTheme);\n  const [resolvedTheme, setResolvedTheme] = useState<ResolvedTheme>('light');\n  const [mounted, setMounted] = useState(false);\n\n  useEffect(() => {\n    setMounted(true);\n    const stored = localStorage.getItem(storageKey) as Theme | null;\n    if (stored && ['light', 'dark', 'system'].includes(stored)) {\n      setTheme(stored);\n    }\n  }, [storageKey]);\n\n  useEffect(() => {\n    if (!mounted) return;\n\n    const root = document.documentElement;\n    let resolved: ResolvedTheme;\n\n    if (theme === 'system') {\n      const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n      resolved = systemDark ? 'dark' : 'light';\n    } else {\n      resolved = theme;\n    }\n\n    setResolvedTheme(resolved);\n    root.classList.remove('light', 'dark');\n    root.classList.add(resolved);\n    localStorage.setItem(storageKey, theme);\n  }, [theme, mounted, storageKey]);\n\n  useEffect(() => {\n    if (!mounted || theme !== 'system') return;\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n    const handleChange = (e: MediaQueryListEvent) => {\n      setResolvedTheme(e.matches ? 'dark' : 'light');\n      document.documentElement.classList.remove('light', 'dark');\n      document.documentElement.classList.add(e.matches ? 'dark' : 'light');\n    };\n\n    mediaQuery.addEventListener('change', handleChange);\n    return () => mediaQuery.removeEventListener('change', handleChange);\n  }, [theme, mounted]);\n\n  return (\n    <ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>\n      {children}\n    </ThemeContext.Provider>\n  );\n}\n\n/**\n * Access the current theme context.\n * Must be used within a ThemeProvider.\n */\nexport function useTheme(): ThemeContextType {\n  const context = useContext(ThemeContext);\n  if (!context) {\n    throw new Error('useTheme must be used within a ThemeProvider');\n  }\n  return context;\n}\n","import { type ReactNode } from 'react';\nimport { useTheme, type Theme } from './ThemeProvider';\n\nconst SunIcon = () => (\n  <svg className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z\" />\n  </svg>\n);\n\nconst MoonIcon = () => (\n  <svg className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\" />\n  </svg>\n);\n\nconst SystemIcon = () => (\n  <svg className=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z\" />\n  </svg>\n);\n\ninterface ThemeOption {\n  value: Theme;\n  icon: () => ReactNode;\n  label: string;\n}\n\nexport interface ThemeToggleProps {\n  /** CSS class for the outer container */\n  className?: string;\n  /** CSS class for the active button */\n  activeClassName?: string;\n  /** CSS class for inactive buttons */\n  inactiveClassName?: string;\n}\n\n/**\n * Three-way theme toggle (light / dark / system).\n * Uses radio group semantics for accessibility.\n */\nexport function ThemeToggle({\n  className = 'flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-gray-800',\n  activeClassName = 'rounded-md p-2 transition-colors bg-white text-gray-900 shadow-sm dark:bg-gray-700 dark:text-white',\n  inactiveClassName = 'rounded-md p-2 transition-colors text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white',\n}: ThemeToggleProps) {\n  const { theme, setTheme } = useTheme();\n\n  const options: ThemeOption[] = [\n    { value: 'light', icon: SunIcon, label: 'Light' },\n    { value: 'dark', icon: MoonIcon, label: 'Dark' },\n    { value: 'system', icon: SystemIcon, label: 'System' },\n  ];\n\n  return (\n    <div className={className} role=\"radiogroup\" aria-label=\"Theme selection\">\n      {options.map(({ value, icon: Icon, label }) => (\n        <button\n          key={value}\n          onClick={() => setTheme(value)}\n          role=\"radio\"\n          aria-checked={theme === value}\n          aria-label={`${label} theme`}\n          className={theme === value ? activeClassName : inactiveClassName}\n        >\n          <Icon />\n        </button>\n      ))}\n    </div>\n  );\n}\n"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@philiprehberger/react-theme-provider",
+  "version": "0.1.0",
+  "description": "Dark/light/system theme provider for React with localStorage persistence and system preference detection",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "react": "^19.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "react",
+    "theme",
+    "dark-mode",
+    "light-mode",
+    "theme-provider",
+    "system-preference"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/philiprehberger/react-theme-provider"
+  },
+  "sideEffects": false
+}