@fakhrirafiki/theme-engine 0.2.1 → 0.2.5

package/README.md

@@ -390,6 +390,22 @@ function CustomControls() {
     </button>
   )
 }
+
+// Or apply a preset by ID (from built-in or custom presets)
+function QuickPresetSwitcher() {
+  const { setThemePresetById } = useTheme()
+
+  return (
+    <div>
+      <button onClick={() => setThemePresetById('modern-minimal')}>
+        Modern Minimal
+      </button>
+      <button onClick={() => setThemePresetById('tiket-ngobrol')}>
+        Ngobrol Blue
+      </button>
+    </div>
+  )
+}
 ```
 
 ## 🔄 Migration Guide
@@ -563,4 +579,4 @@ This architecture ensures seamless coordination between appearance modes and col
 
 ## 📄 License
 
-MIT License - see the monorepo root for details.
+MIT License - see the monorepo root for details.

package/dist/index.d.mts

@@ -318,7 +318,7 @@ interface UnifiedThemeContextValue {
     /** Current appearance mode setting */
     mode: Mode;
     /** Resolved appearance mode (never 'system') */
-    resolvedMode: 'light' | 'dark';
+    resolvedMode: "light" | "dark";
     /** Change the appearance mode */
     setMode: (mode: Mode) => void;
     /** Toggle between light and dark modes with optional animation */
@@ -330,14 +330,18 @@ interface UnifiedThemeContextValue {
         /** Human-readable preset name */
         presetName: string;
         /** Color values for light and dark modes */
-        colors: ThemePreset['colors'];
+        colors: ThemePreset["colors"];
         /** Timestamp when preset was applied */
         appliedAt: number;
     } | null;
     /** Apply a new color preset */
     applyPreset: (preset: ThemePreset) => void;
+    /** Apply a preset by its ID from the available preset collection */
+    setThemePresetById: (presetId: string) => void;
     /** Clear the current preset and revert to default colors */
     clearPreset: () => void;
+    /** Whether the currently active preset matches the defaultPreset prop */
+    isUsingDefaultPreset: boolean;
     /** Available presets (merged built-in + custom) */
     availablePresets: Record<string, TweakCNThemePreset>;
     /** Built-in presets only */

package/dist/index.d.ts

@@ -318,7 +318,7 @@ interface UnifiedThemeContextValue {
     /** Current appearance mode setting */
     mode: Mode;
     /** Resolved appearance mode (never 'system') */
-    resolvedMode: 'light' | 'dark';
+    resolvedMode: "light" | "dark";
     /** Change the appearance mode */
     setMode: (mode: Mode) => void;
     /** Toggle between light and dark modes with optional animation */
@@ -330,14 +330,18 @@ interface UnifiedThemeContextValue {
         /** Human-readable preset name */
         presetName: string;
         /** Color values for light and dark modes */
-        colors: ThemePreset['colors'];
+        colors: ThemePreset["colors"];
         /** Timestamp when preset was applied */
         appliedAt: number;
     } | null;
     /** Apply a new color preset */
     applyPreset: (preset: ThemePreset) => void;
+    /** Apply a preset by its ID from the available preset collection */
+    setThemePresetById: (presetId: string) => void;
     /** Clear the current preset and revert to default colors */
     clearPreset: () => void;
+    /** Whether the currently active preset matches the defaultPreset prop */
+    isUsingDefaultPreset: boolean;
     /** Available presets (merged built-in + custom) */
     availablePresets: Record<string, TweakCNThemePreset>;
     /** Built-in presets only */

package/dist/index.js

@@ -3748,9 +3748,12 @@ function ThemeProvider({
   }, [includeBuiltInPresets, customPresets]);
   const builtInPresets = (0, import_react.useMemo)(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
   const normalizedCustomPresets = (0, import_react.useMemo)(() => customPresets || {}, [customPresets]);
-  const getAvailablePresetById = (0, import_react.useCallback)((id) => {
-    return availablePresets[id] || null;
-  }, [availablePresets]);
+  const getAvailablePresetById = (0, import_react.useCallback)(
+    (id) => {
+      return availablePresets[id] || null;
+    },
+    [availablePresets]
+  );
   const [currentPreset, setCurrentPreset] = (0, import_react.useState)(null);
   const [isReady, setIsReady] = (0, import_react.useState)(false);
   (0, import_react.useEffect)(() => {
@@ -3760,10 +3763,9 @@ function ThemeProvider({
     }
     try {
       const stored = localStorage.getItem(presetStorageKey);
-      if (stored) {
-        const preset = JSON.parse(stored);
-        setCurrentPreset(preset);
-      } else if (defaultPreset) {
+      const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
+      const applyDefaultPreset = () => {
+        if (!defaultPreset) return;
         const preset = getAvailablePresetById(defaultPreset);
         if (preset) {
           const presetData = {
@@ -3779,13 +3781,42 @@ function ThemeProvider({
         } else {
           console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
         }
+      };
+      if (stored) {
+        try {
+          const parsed = JSON.parse(stored);
+          const isValidObject = parsed && typeof parsed === "object";
+          const hasColors = isValidObject && "colors" in parsed && parsed.colors && typeof parsed.colors === "object" && parsed.colors.light && parsed.colors.dark;
+          if (hasColors) {
+            setCurrentPreset(parsed);
+            if (isDevelopment) {
+            }
+          } else {
+            if (isDevelopment) {
+              console.warn("\u{1F3A8} UnifiedTheme: Invalid persisted preset shape. Clearing and falling back.");
+            }
+            localStorage.removeItem(presetStorageKey);
+            applyDefaultPreset();
+          }
+        } catch (error) {
+          if (isDevelopment) {
+            console.warn("\u{1F3A8} UnifiedTheme: Failed to parse persisted preset. Clearing key.", error);
+          }
+          localStorage.removeItem(presetStorageKey);
+          applyDefaultPreset();
+        }
+      } else {
+        applyDefaultPreset();
       }
     } catch (error) {
-      console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset:", error);
+      const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
+      if (isDevelopment) {
+        console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset from storage:", error);
+      }
     } finally {
       setIsReady(true);
     }
-  }, [presetStorageKey, enablePresets, defaultPreset]);
+  }, [presetStorageKey, enablePresets, defaultPreset, getAvailablePresetById]);
   (0, import_react.useEffect)(() => {
     if (mode === "system") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -3806,11 +3837,12 @@ function ThemeProvider({
     root.style.colorScheme = resolvedMode;
   }, [resolvedMode]);
   const applyPresetColors = (0, import_react.useCallback)((preset, mode2) => {
+    if (!preset) return;
     const root = document.documentElement;
     const colors = preset[mode2];
     if (!colors) return;
     const defaultValues = {
-      "spacing": "0.25rem",
+      spacing: "0.25rem",
       "letter-spacing": "normal"
     };
     const allCategories = [
@@ -3849,49 +3881,79 @@ function ThemeProvider({
       }
     });
   }, []);
-  const handleModeChange = (0, import_react.useCallback)((newMode) => {
-    setMode(newMode);
-    setStoredMode(newMode, modeStorageKey);
-  }, [modeStorageKey]);
-  const handleModeToggle = (0, import_react.useCallback)((coordinates) => {
-    const newMode = resolvedMode === "light" ? "dark" : "light";
-    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (enableTransitions && !prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
-      const root = document.documentElement;
-      if (coordinates) {
-        root.style.setProperty("--x", `${coordinates.x}px`);
-        root.style.setProperty("--y", `${coordinates.y}px`);
-      }
-      document.startViewTransition(() => {
+  const handleModeChange = (0, import_react.useCallback)(
+    (newMode) => {
+      setMode(newMode);
+      setStoredMode(newMode, modeStorageKey);
+    },
+    [modeStorageKey]
+  );
+  const handleModeToggle = (0, import_react.useCallback)(
+    (coordinates) => {
+      const newMode = resolvedMode === "light" ? "dark" : "light";
+      const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (enableTransitions && !prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
+        const root = document.documentElement;
+        if (coordinates) {
+          root.style.setProperty("--x", `${coordinates.x}px`);
+          root.style.setProperty("--y", `${coordinates.y}px`);
+        }
+        document.startViewTransition(() => {
+          handleModeChange(newMode);
+        });
+      } else {
         handleModeChange(newMode);
-      });
-    } else {
-      handleModeChange(newMode);
-    }
-  }, [resolvedMode, enableTransitions, handleModeChange]);
+      }
+    },
+    [resolvedMode, enableTransitions, handleModeChange]
+  );
   (0, import_react.useEffect)(() => {
     if (!currentPreset || typeof window === "undefined") return;
     applyPresetColors(currentPreset.colors, resolvedMode);
   }, [currentPreset, resolvedMode, applyPresetColors]);
-  const applyPreset = (0, import_react.useCallback)((preset) => {
-    const presetData = {
-      presetId: preset.id,
-      presetName: preset.name,
-      colors: preset.colors,
-      appliedAt: Date.now()
-    };
-    setCurrentPreset(presetData);
-    if (enablePresets && typeof window !== "undefined") {
-      try {
-        localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
-      } catch (error) {
-        console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
+  const applyPreset = (0, import_react.useCallback)(
+    (preset) => {
+      const presetData = {
+        presetId: preset.id,
+        presetName: preset.name,
+        colors: preset.colors,
+        appliedAt: Date.now()
+      };
+      setCurrentPreset(presetData);
+      if (enablePresets && typeof window !== "undefined") {
+        try {
+          localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
+        } catch (error) {
+          console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
+        }
       }
-    }
-    if (typeof window !== "undefined") {
-      applyPresetColors(preset.colors, resolvedMode);
-    }
-  }, [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]);
+      if (typeof window !== "undefined") {
+        applyPresetColors(preset.colors, resolvedMode);
+      }
+    },
+    [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]
+  );
+  const setThemePresetById = (0, import_react.useCallback)(
+    (presetId) => {
+      const preset = getAvailablePresetById(presetId);
+      if (!preset) {
+        if (typeof window !== "undefined") {
+          console.warn("\u{1F3A8} UnifiedTheme: Preset not found for id:", presetId);
+        }
+        return;
+      }
+      const presetData = {
+        id: presetId,
+        name: preset.label,
+        colors: {
+          light: preset.styles.light,
+          dark: preset.styles.dark
+        }
+      };
+      applyPreset(presetData);
+    },
+    [getAvailablePresetById, applyPreset]
+  );
   const clearPreset = (0, import_react.useCallback)(() => {
     if (enablePresets && typeof window !== "undefined") {
       try {
@@ -3939,6 +4001,7 @@ function ThemeProvider({
   if (!isReady) {
     return null;
   }
+  const isUsingDefaultPreset = !!defaultPreset && currentPreset?.presetId === defaultPreset;
   const contextValue = {
     mode,
     resolvedMode,
@@ -3946,7 +4009,9 @@ function ThemeProvider({
     toggleMode: handleModeToggle,
     currentPreset,
     applyPreset,
+    setThemePresetById,
     clearPreset,
+    isUsingDefaultPreset,
     availablePresets,
     builtInPresets,
     customPresets: normalizedCustomPresets

package/dist/index.mjs

@@ -3707,9 +3707,12 @@ function ThemeProvider({
   }, [includeBuiltInPresets, customPresets]);
   const builtInPresets = useMemo(() => includeBuiltInPresets ? tweakcnPresets : {}, [includeBuiltInPresets]);
   const normalizedCustomPresets = useMemo(() => customPresets || {}, [customPresets]);
-  const getAvailablePresetById = useCallback((id) => {
-    return availablePresets[id] || null;
-  }, [availablePresets]);
+  const getAvailablePresetById = useCallback(
+    (id) => {
+      return availablePresets[id] || null;
+    },
+    [availablePresets]
+  );
   const [currentPreset, setCurrentPreset] = useState(null);
   const [isReady, setIsReady] = useState(false);
   useEffect(() => {
@@ -3719,10 +3722,9 @@ function ThemeProvider({
     }
     try {
       const stored = localStorage.getItem(presetStorageKey);
-      if (stored) {
-        const preset = JSON.parse(stored);
-        setCurrentPreset(preset);
-      } else if (defaultPreset) {
+      const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
+      const applyDefaultPreset = () => {
+        if (!defaultPreset) return;
         const preset = getAvailablePresetById(defaultPreset);
         if (preset) {
           const presetData = {
@@ -3738,13 +3740,42 @@ function ThemeProvider({
         } else {
           console.warn("\u{1F3A8} UnifiedTheme: Default preset not found:", defaultPreset);
         }
+      };
+      if (stored) {
+        try {
+          const parsed = JSON.parse(stored);
+          const isValidObject = parsed && typeof parsed === "object";
+          const hasColors = isValidObject && "colors" in parsed && parsed.colors && typeof parsed.colors === "object" && parsed.colors.light && parsed.colors.dark;
+          if (hasColors) {
+            setCurrentPreset(parsed);
+            if (isDevelopment) {
+            }
+          } else {
+            if (isDevelopment) {
+              console.warn("\u{1F3A8} UnifiedTheme: Invalid persisted preset shape. Clearing and falling back.");
+            }
+            localStorage.removeItem(presetStorageKey);
+            applyDefaultPreset();
+          }
+        } catch (error) {
+          if (isDevelopment) {
+            console.warn("\u{1F3A8} UnifiedTheme: Failed to parse persisted preset. Clearing key.", error);
+          }
+          localStorage.removeItem(presetStorageKey);
+          applyDefaultPreset();
+        }
+      } else {
+        applyDefaultPreset();
       }
     } catch (error) {
-      console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset:", error);
+      const isDevelopment = typeof window !== "undefined" && window.location?.hostname === "localhost";
+      if (isDevelopment) {
+        console.warn("\u{1F3A8} UnifiedTheme: Failed to load preset from storage:", error);
+      }
     } finally {
       setIsReady(true);
     }
-  }, [presetStorageKey, enablePresets, defaultPreset]);
+  }, [presetStorageKey, enablePresets, defaultPreset, getAvailablePresetById]);
   useEffect(() => {
     if (mode === "system") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
@@ -3765,11 +3796,12 @@ function ThemeProvider({
     root.style.colorScheme = resolvedMode;
   }, [resolvedMode]);
   const applyPresetColors = useCallback((preset, mode2) => {
+    if (!preset) return;
     const root = document.documentElement;
     const colors = preset[mode2];
     if (!colors) return;
     const defaultValues = {
-      "spacing": "0.25rem",
+      spacing: "0.25rem",
       "letter-spacing": "normal"
     };
     const allCategories = [
@@ -3808,49 +3840,79 @@ function ThemeProvider({
       }
     });
   }, []);
-  const handleModeChange = useCallback((newMode) => {
-    setMode(newMode);
-    setStoredMode(newMode, modeStorageKey);
-  }, [modeStorageKey]);
-  const handleModeToggle = useCallback((coordinates) => {
-    const newMode = resolvedMode === "light" ? "dark" : "light";
-    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (enableTransitions && !prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
-      const root = document.documentElement;
-      if (coordinates) {
-        root.style.setProperty("--x", `${coordinates.x}px`);
-        root.style.setProperty("--y", `${coordinates.y}px`);
-      }
-      document.startViewTransition(() => {
+  const handleModeChange = useCallback(
+    (newMode) => {
+      setMode(newMode);
+      setStoredMode(newMode, modeStorageKey);
+    },
+    [modeStorageKey]
+  );
+  const handleModeToggle = useCallback(
+    (coordinates) => {
+      const newMode = resolvedMode === "light" ? "dark" : "light";
+      const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (enableTransitions && !prefersReducedMotion && typeof document !== "undefined" && "startViewTransition" in document) {
+        const root = document.documentElement;
+        if (coordinates) {
+          root.style.setProperty("--x", `${coordinates.x}px`);
+          root.style.setProperty("--y", `${coordinates.y}px`);
+        }
+        document.startViewTransition(() => {
+          handleModeChange(newMode);
+        });
+      } else {
         handleModeChange(newMode);
-      });
-    } else {
-      handleModeChange(newMode);
-    }
-  }, [resolvedMode, enableTransitions, handleModeChange]);
+      }
+    },
+    [resolvedMode, enableTransitions, handleModeChange]
+  );
   useEffect(() => {
     if (!currentPreset || typeof window === "undefined") return;
     applyPresetColors(currentPreset.colors, resolvedMode);
   }, [currentPreset, resolvedMode, applyPresetColors]);
-  const applyPreset = useCallback((preset) => {
-    const presetData = {
-      presetId: preset.id,
-      presetName: preset.name,
-      colors: preset.colors,
-      appliedAt: Date.now()
-    };
-    setCurrentPreset(presetData);
-    if (enablePresets && typeof window !== "undefined") {
-      try {
-        localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
-      } catch (error) {
-        console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
+  const applyPreset = useCallback(
+    (preset) => {
+      const presetData = {
+        presetId: preset.id,
+        presetName: preset.name,
+        colors: preset.colors,
+        appliedAt: Date.now()
+      };
+      setCurrentPreset(presetData);
+      if (enablePresets && typeof window !== "undefined") {
+        try {
+          localStorage.setItem(presetStorageKey, JSON.stringify(presetData));
+        } catch (error) {
+          console.error("\u{1F3A8} UnifiedTheme: Failed to save preset:", error);
+        }
       }
-    }
-    if (typeof window !== "undefined") {
-      applyPresetColors(preset.colors, resolvedMode);
-    }
-  }, [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]);
+      if (typeof window !== "undefined") {
+        applyPresetColors(preset.colors, resolvedMode);
+      }
+    },
+    [presetStorageKey, enablePresets, applyPresetColors, resolvedMode]
+  );
+  const setThemePresetById = useCallback(
+    (presetId) => {
+      const preset = getAvailablePresetById(presetId);
+      if (!preset) {
+        if (typeof window !== "undefined") {
+          console.warn("\u{1F3A8} UnifiedTheme: Preset not found for id:", presetId);
+        }
+        return;
+      }
+      const presetData = {
+        id: presetId,
+        name: preset.label,
+        colors: {
+          light: preset.styles.light,
+          dark: preset.styles.dark
+        }
+      };
+      applyPreset(presetData);
+    },
+    [getAvailablePresetById, applyPreset]
+  );
   const clearPreset = useCallback(() => {
     if (enablePresets && typeof window !== "undefined") {
       try {
@@ -3898,6 +3960,7 @@ function ThemeProvider({
   if (!isReady) {
     return null;
   }
+  const isUsingDefaultPreset = !!defaultPreset && currentPreset?.presetId === defaultPreset;
   const contextValue = {
     mode,
     resolvedMode,
@@ -3905,7 +3968,9 @@ function ThemeProvider({
     toggleMode: handleModeToggle,
     currentPreset,
     applyPreset,
+    setThemePresetById,
     clearPreset,
+    isUsingDefaultPreset,
     availablePresets,
     builtInPresets,
     customPresets: normalizedCustomPresets

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fakhrirafiki/theme-engine",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "description": "Elegant theming system with smooth transitions, custom presets, semantic accent colors, and complete shadcn/ui support for modern React applications",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -57,7 +57,7 @@
     "dark-mode",
     "light-mode",
     "react",
-    "typescript", 
+    "typescript",
     "transitions",
     "shadcn",
     "tailwind",
@@ -70,6 +70,6 @@
     "accent-colors",
     "semantic-colors"
   ],
-  "author": "NgobrolLink Team",
+  "author": "Tiket Ngobrol Team",
   "license": "MIT"
-}
+}