npm - @cruxext/theme - Versions diffs - 0.0.7 → 0.0.8 - Mend

@cruxext/theme 0.0.7 → 0.0.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -8,9 +8,10 @@
 </div>
 <div align="center">
-    <img src="https://img.shields.io/badge/v-0.0.7-black"/>
+    <img src="https://img.shields.io/badge/v-0.0.8-black"/>
     <a href="https://github.com/cruxext-org"><img src="https://img.shields.io/badge/🔥-@cruxext-black"/></a>
     <br>
+    <img src="https://img.shields.io/badge/coverage-100%25-brightgreen" alt="Test Coverage" />
     <img src="https://img.shields.io/github/issues/cruxext-org/theme?style=flat" alt="Github Repo Issues" />
     <img src="https://img.shields.io/github/stars/cruxext-org/theme?style=social" alt="GitHub Repo stars" />
 </div>
@@ -25,17 +26,10 @@
 - ## Overview 👀
     - #### Why ?
-        > A lightweight, reactive theme management solution for dark/light mode switching with persistent storage and system preference detection, built for the CruxJS ecosystem.
+        > A lightweight, reactive theme management solution, built for [`@cruxjs`](https://github.com/cruxjs-org) ecosystem.
     - #### When ?
-        > Use this extension when you need to:
-        > - Implement dark/light mode switching in your application
-        > - Respect user's system color scheme preferences
-        > - Persist theme preferences across sessions
-        > - Build reactive UI components that respond to theme changes
-        > - Integrate theme management into CruxJS-based applications
-        > When using [@cruxjs/app](https://github.com/cruxjs-org/app) and [@cruxjs/client](https://github.com/cruxjs-org/client).
+        > When you need to manage theme preferences in your [`@cruxjs`](https://github.com/cruxjs-org) application.
     <br>
     <br>
@@ -49,45 +43,37 @@
     hmm i @cruxext/theme
     ```
-    ```ts
-    // in your ts files
-    import { ... } from `@cruxext/theme`;
-    ```
     <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
     <br>
-    - ### Example
+    - ### Setup
         ```typescript
-        import { type JSXElement }                  from '@minejs/jsx';
-        import { effect, signal }                   from '@minejs/signals';
-        import { Button }                           from '@cruxkit/core';
-        import { toggleTheme, getCurrentTheme }     from '@cruxext/theme';
-        export function MyComponent(): JSXElement {
-            const isDark = signal(getCurrentTheme() == 'dark');
-            effect(() => {
-                console.log('isDark:', isDark());
-                const btn = document.querySelector('#theme_button');
-                if(!btn) return;
-                toggleTheme();
-                btn.textContent = isDark() ? '☀️ Light Mode' : '🌙 Dark Mode';
-            });
-            return (
-                <Button
-                    id="theme_button"
-                    variant="solid"
-                    color="brand"
-                    onClick={() => isDark.set(!isDark())}
-                >
-                    {isDark() ? '☀️ Light Mode' : '🌙 Dark Mode'}
-                </Button>
-            );
-        }
+        // in your client config at `client.ts` file, add the theme extension.
+        import { themeExtension } from `@cruxext/theme`;
+        const config: ClientManagerConfig = {
+            ...
+            extensions: [
+                ...
+                createThemeExtension(),
+            ],
+        };
+        ```
+    - ### Usage
+        ```typescript
+        import { toggleTheme, getCurrentTheme } from '@cruxext/theme';
+        import { Button } from '@cruxkit/button';
+        <Button
+            onClick={ () => toggleTheme() }
+            leftIcon={{name: getCurrentTheme() === 'light' ? 'sun' : 'moon' }}
+            >
+            Toggle Theme
+        </Button>
         ```
     <br>
@@ -95,60 +81,34 @@
 - ## Documentation 📑
     - ### API ⛓️
-        - #### `createThemeExtension(config?: ThemeConfig): ClientExtension`
-            > Initializes the theme extension for your CruxJS application. Call this during your app bootstrap.
+        - #### Main-Functions
             ```typescript
-            import { createThemeExtension } from '@cruxext/theme';
+            export function themeExtension(config?: ThemeConfig) : ClientExtension
-            const themeExt = createThemeExtension({
-                default: 'light',
-                available: ['light', 'dark', 'auto']
-            });
+            export const getThemeManager    = () => themeManager;
+            export const setTheme           = (themeName: string) => getThemeManager().setTheme(themeName);
+            export const toggleTheme        = () => getThemeManager().toggleTheme();
+            export const getCurrentTheme    = () => getThemeManager().getTheme();
             ```
-        - #### `setTheme(themeName: string): void`
-            > Sets the active theme to the specified name. Must be one of the available themes defined in config.
+        - #### Toast Class Methods
             ```typescript
-            import { setTheme } from '@cruxext/theme';
-            setTheme('dark');
+            getTheme        ()                  : string
+            setTheme        (themeName: string) : void
+            toggleTheme     ()                  : void
             ```
-        - #### `toggleTheme(): void`
-            > Toggles between available themes. Cycles through the first non-current available theme.
+        - #### Types
             ```typescript
-            import { toggleTheme } from '@cruxext/theme';
-            toggleTheme();
-            ```
-        - #### `getCurrentTheme(): string`
-            > Returns the name of the currently active theme.
-            ```typescript
-            import { getCurrentTheme } from '@cruxext/theme';
-            const current = getCurrentTheme(); // 'light' | 'dark' | etc.
-            ```
-        - #### `getThemeManager(): ThemeManager`
-            > Returns the ThemeManager instance for advanced usage and direct signal access.
-            ```typescript
-            import { getThemeManager, signal } from '@cruxext/theme';
-            const manager = getThemeManager();
-            const themeSignal = manager.signal; // reactive signal
+            export interface ThemeConfig {
+                default     : string;
+                available   : string[];
+            }
             ```
         <div align="center"> <img src="./assets/img/line.png" alt="line" style="display: block; margin-top:20px;margin-bottom:20px;width:500px;"/> </div>
@@ -156,14 +116,12 @@
     - ### Related 🔗
-        - ##### [@minejs/signals](https://github.com/minejs-org/signals)
-            > Reactive signals library used for theme state management
+        - ##### [@minejs/jsx](https://github.com/minejs-org/jsx)
         - ##### [@minejs/store](https://github.com/minejs-org/store)
-            > Persistent storage solution for maintaining theme preferences
+        - ##### [@minejs/signals](https://github.com/minejs-org/signals)
-        - ##### [@cruxkit/core](https://github.com/cruxkit/core)
-            > Core UI component library that works seamlessly with theming
+        - ##### [@cruxjs/client](https://github.com/cruxjs-org/client)
+        - ##### [@cruxjs/app](https://github.com/cruxjs-org/app)
 <!-- ╚═════════════════════════════════════════════════════════════════╝ -->

package/dist/index.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-'use strict';var store=require('@minejs/store'),signals=require('@minejs/signals');var i=class{constructor(e){this.config=e;let t=new store.Storage({type:"local"});this.store=store.createStore({state:{theme:e.default},persist:true,storage:t,storageKey:"app:theme"}),this.signal=this.store.state.theme;let a=t.get("app:theme:theme")||e.default;this.signal.set(a),this.applyTheme(a),signals.effect(()=>{let n=this.signal?.();n&&this.applyTheme(n),console.log(`[ThemeManager] Reactive effect applied theme: ${n}`);}),signals.effect(()=>{let n=window.matchMedia("(prefers-color-scheme: dark)"),h=g=>{t.get("app:theme:theme")||this.signal.set(g.matches?"dark":"light");};return n.addEventListener("change",h),()=>n.removeEventListener("change",h)});}getTheme(){return this.signal?.()??this.config.default??"light"}setTheme(e){if(!this.config.available.includes(e)){console.warn(`[ThemeManager] Unsupported theme: ${e}`);return}this.signal&&(this.signal.set(e),console.log(`[ThemeManager] Theme set to: ${e}`));}toggleTheme(){if(!this.signal)return;let e=this.signal(),t=this.config.available.find(r=>r!==e);t&&(this.signal.set(t),console.log(`[ThemeManager] Theme toggled to: ${t}`));}applyTheme(e){(document.documentElement||document.rootElement).setAttribute("data-theme",e),console.log(`[ThemeManager] Applied theme: ${e}`);}};var m,s=()=>m,E=o=>s().setTheme(o),x=()=>s().toggleTheme(),y=()=>s().getTheme();function C(o){return {name:"ThemeExtension",onBoot:e=>{o&&(e.cconfig.theme={...e.cconfig.theme,...o}),e.cconfig.theme||(e.cconfig.theme={default:"dark",available:["dark","light"]}),m=new i({default:e.cconfig.theme.default,available:e.cconfig.theme.available});}}}exports.ThemeManager=i;exports.createThemeExtension=C;exports.getCurrentTheme=y;exports.getThemeManager=s;exports.setTheme=E;exports.toggleTheme=x;//# sourceMappingURL=index.cjs.map
+'use strict';var store=require('@minejs/store'),signals=require('@minejs/signals');var i=class{constructor(e){this.config=e;let t=new store.Storage({type:"local"});this.store=store.createStore({state:{theme:e.default},persist:true,storage:t,storageKey:"app:theme"}),this.signal=this.store.state.theme;let a=t.get("app:theme:theme")||e.default;this.signal.set(a),this.applyTheme(a),signals.effect(()=>{let n=this.signal?.();n&&this.applyTheme(n),console.log(`[ThemeManager] Reactive effect applied theme: ${n}`);}),signals.effect(()=>{let n=window.matchMedia("(prefers-color-scheme: dark)"),h=g=>{t.get("app:theme:theme")||this.signal.set(g.matches?"dark":"light");};return n.addEventListener("change",h),()=>n.removeEventListener("change",h)});}getTheme(){return this.signal?.()??this.config.default??"light"}setTheme(e){if(!this.config.available.includes(e)){console.warn(`[ThemeManager] Unsupported theme: ${e}`);return}this.signal&&(this.signal.set(e),console.log(`[ThemeManager] Theme set to: ${e}`));}toggleTheme(){if(!this.signal)return;let e=this.signal(),t=this.config.available.find(r=>r!==e);t&&(this.signal.set(t),console.log(`[ThemeManager] Theme toggled to: ${t}`));}applyTheme(e){(document.documentElement||document.rootElement).setAttribute("data-theme",e),console.log(`[ThemeManager] Applied theme: ${e}`);}};var m;function E(o){return {name:"ThemeExtension",onBoot:e=>{o&&(e.cconfig.theme={...e.cconfig.theme,...o}),e.cconfig.theme||(e.cconfig.theme={default:"dark",available:["dark","light"]}),m=new i({default:e.cconfig.theme.default,available:e.cconfig.theme.available});}}}var s=()=>m,x=o=>s().setTheme(o),y=()=>s().toggleTheme(),C=()=>s().getTheme();exports.ThemeManager=i;exports.getCurrentTheme=C;exports.getThemeManager=s;exports.setTheme=x;exports.themeExtension=E;exports.toggleTheme=y;//# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/mod/theme_manager.ts","../src/index.ts"],"names":["ThemeManager","config","storage","Storage","createStore","initialTheme","effect","currentTheme","mediaQuery","handleChange","e","themeName","nextTheme","t","themeManager","getThemeManager","setTheme","toggleTheme","getCurrentTheme","createThemeExtension","ctx"],"mappings":"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","file":"index.cjs","sourcesContent":["// src/mod/theme_manager.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import { ThemeConfig } from \"../types\";\r\n import { createStore, Storage } from '@minejs/store';\r\n import { signal, effect } from '@minejs/signals';\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n export class ThemeManager {\r\n\r\n // ┌──────────────────────────────── INIT ──────────────────────────────┐\r\n\r\n public store: ReturnType<typeof createStore>;\r\n public signal: ReturnType<typeof signal<string>>;\r\n\r\n constructor(public config: ThemeConfig) {\r\n\r\n const storage = new Storage({ type: 'local' });\r\n\r\n this.store = createStore({\r\n state: {\r\n theme: config.default\r\n },\r\n persist: true,\r\n storage,\r\n storageKey: 'app:theme'\r\n });\r\n\r\n this.signal = this.store.state.theme;\r\n\r\n // Set initial theme on body\r\n const storedTheme = storage.get('app:theme:theme') as string \| null;\r\n const initialTheme = storedTheme \|\| config.default;\r\n this.signal.set(initialTheme);\r\n this.applyTheme(initialTheme);\r\n\r\n // Setup reactive effect: apply theme whenever signal changes\r\n effect(() => {\r\n const currentTheme = this.signal?.();\r\n if (currentTheme) {\r\n this.applyTheme(currentTheme);\r\n }\r\n\r\n console.log(`[ThemeManager] Reactive effect applied theme: ${currentTheme}`);\r\n });\r\n\r\n // Listen for system theme changes\r\n effect(() => {\r\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n\r\n const handleChange = (e: MediaQueryListEvent) => {\r\n if (!storage.get('app:theme:theme')) this.signal.set(e.matches ? 'dark' : 'light');\r\n };\r\n\r\n mediaQuery.addEventListener('change', handleChange);\r\n return () => mediaQuery.removeEventListener('change', handleChange);\r\n });\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n // ┌──────────────────────────────── MAIN ──────────────────────────────┐\r\n\r\n getTheme(): string {\r\n return this.signal?.() ?? this.config.default ?? 'light';\r\n }\r\n\r\n setTheme(themeName: string): void {\r\n if (!this.config.available.includes(themeName)) {\r\n console.warn(`[ThemeManager] Unsupported theme: ${themeName}`);\r\n return;\r\n }\r\n\r\n // Update signal directly - effect will handle DOM updates\r\n if (this.signal) {\r\n this.signal.set(themeName);\r\n console.log(`[ThemeManager] Theme set to: ${themeName}`);\r\n }\r\n }\r\n\r\n toggleTheme(): void {\r\n if (!this.signal) return;\r\n const currentTheme = this.signal();\r\n const nextTheme = this.config.available.find(t => t !== currentTheme);\r\n if (nextTheme) {\r\n this.signal.set(nextTheme);\r\n console.log(`[ThemeManager] Theme toggled to: ${nextTheme}`);\r\n }\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n // ┌──────────────────────────────── HELP ──────────────────────────────┐\r\n\r\n private applyTheme(themeName: string): void {\r\n const htmlEl = document.documentElement \|\| document.rootElement;\r\n htmlEl.setAttribute('data-theme', themeName);\r\n console.log(`[ThemeManager] Applied theme: ${themeName}`);\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n","// src/index.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import { ClientExtension, ExtensionContext } from \"@cruxjs/base\";\r\n import { ThemeConfig } from \"./types\";\r\n import { ThemeManager } from \"./mod/theme_manager\";\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ MAIN ════════════════════════════════════════╗\r\n\r\n // Theme manager instance\r\n let themeManager : ThemeManager;\r\n\r\n // Exported theme functions\r\n export const getThemeManager = () => themeManager;\r\n export const setTheme = (themeName: string) => getThemeManager().setTheme(themeName);\r\n export const toggleTheme = () => getThemeManager().toggleTheme();\r\n export const getCurrentTheme = () => getThemeManager().getTheme();\r\n\r\n // Theme extension\r\n export function createThemeExtension(config?: ThemeConfig) : ClientExtension {\r\n return {\r\n name : 'ThemeExtension',\r\n\r\n onBoot: (ctx: ExtensionContext) => {\r\n // if config provided, merge into client config\r\n if (config) {\r\n ctx.cconfig.theme = {\r\n ...ctx.cconfig.theme,\r\n ...config\r\n };\r\n }\r\n\r\n // if no theme config provided, set default\r\n if (!ctx.cconfig.theme) {\r\n ctx.cconfig.theme = {\r\n default : 'dark',\r\n available : ['dark', 'light']\r\n };\r\n }\r\n\r\n // create theme manager instance\r\n themeManager = new ThemeManager({\r\n default : ctx.cconfig.theme!.default,\r\n available : ctx.cconfig.theme!.available\r\n });\r\n }\r\n };\r\n };\r\n\r\n // export\r\n export * from \"./types\";\r\n export { ThemeManager };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}
1	+ {"version":3,"sources":["../src/mod/manager.ts","../src/index.ts"],"names":["ThemeManager","config","storage","Storage","createStore","initialTheme","effect","currentTheme","mediaQuery","handleChange","e","themeName","nextTheme","t","themeManager","themeExtension","ctx","getThemeManager","setTheme","toggleTheme","getCurrentTheme"],"mappings":"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","file":"index.cjs","sourcesContent":["// src/mod/manager.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import { ThemeConfig } from \"../types\";\r\n import { createStore, Storage } from '@minejs/store';\r\n import { signal, effect } from '@minejs/signals';\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n export class ThemeManager {\r\n\r\n // ┌──────────────────────────────── INIT ──────────────────────────────┐\r\n\r\n public store: ReturnType<typeof createStore>;\r\n public signal: ReturnType<typeof signal<string>>;\r\n\r\n constructor(public config: ThemeConfig) {\r\n\r\n const storage = new Storage({ type: 'local' });\r\n\r\n this.store = createStore({\r\n state: {\r\n theme: config.default\r\n },\r\n persist: true,\r\n storage,\r\n storageKey: 'app:theme'\r\n });\r\n\r\n this.signal = this.store.state.theme;\r\n\r\n // Set initial theme on body\r\n const storedTheme = storage.get('app:theme:theme') as string \| null;\r\n const initialTheme = storedTheme \|\| config.default;\r\n this.signal.set(initialTheme);\r\n this.applyTheme(initialTheme);\r\n\r\n // Setup reactive effect: apply theme whenever signal changes\r\n effect(() => {\r\n const currentTheme = this.signal?.();\r\n if (currentTheme) {\r\n this.applyTheme(currentTheme);\r\n }\r\n\r\n console.log(`[ThemeManager] Reactive effect applied theme: ${currentTheme}`);\r\n });\r\n\r\n // Listen for system theme changes\r\n effect(() => {\r\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n\r\n const handleChange = (e: MediaQueryListEvent) => {\r\n if (!storage.get('app:theme:theme')) this.signal.set(e.matches ? 'dark' : 'light');\r\n };\r\n\r\n mediaQuery.addEventListener('change', handleChange);\r\n return () => mediaQuery.removeEventListener('change', handleChange);\r\n });\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n // ┌──────────────────────────────── MAIN ──────────────────────────────┐\r\n\r\n getTheme(): string {\r\n return this.signal?.() ?? this.config.default ?? 'light';\r\n }\r\n\r\n setTheme(themeName: string): void {\r\n if (!this.config.available.includes(themeName)) {\r\n console.warn(`[ThemeManager] Unsupported theme: ${themeName}`);\r\n return;\r\n }\r\n\r\n // Update signal directly - effect will handle DOM updates\r\n if (this.signal) {\r\n this.signal.set(themeName);\r\n console.log(`[ThemeManager] Theme set to: ${themeName}`);\r\n }\r\n }\r\n\r\n toggleTheme(): void {\r\n if (!this.signal) return;\r\n const currentTheme = this.signal();\r\n const nextTheme = this.config.available.find(t => t !== currentTheme);\r\n if (nextTheme) {\r\n this.signal.set(nextTheme);\r\n console.log(`[ThemeManager] Theme toggled to: ${nextTheme}`);\r\n }\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n // ┌──────────────────────────────── HELP ──────────────────────────────┐\r\n\r\n private applyTheme(themeName: string): void {\r\n const htmlEl = document.documentElement \|\| document.rootElement;\r\n htmlEl.setAttribute('data-theme', themeName);\r\n console.log(`[ThemeManager] Applied theme: ${themeName}`);\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n","// src/index.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import { ClientExtension, ExtensionContext } from \"@cruxjs/base\";\r\n import { ThemeConfig } from \"./types\";\r\n import { ThemeManager } from \"./mod/manager\";\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ INIT ════════════════════════════════════════╗\r\n\r\n // Theme manager instance\r\n let themeManager : ThemeManager;\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n /*\r\n Create a theme extension\r\n * @param config Theme configuration\r\n * @returns Theme extension\r\n /\r\n export function themeExtension(config?: ThemeConfig) : ClientExtension {\r\n return {\r\n name : 'ThemeExtension',\r\n\r\n onBoot: (ctx: ExtensionContext) => {\r\n // if config provided, merge into client config\r\n if (config) {\r\n ctx.cconfig.theme = {\r\n ...ctx.cconfig.theme,\r\n ...config\r\n };\r\n }\r\n\r\n // if no theme config provided, set default\r\n if (!ctx.cconfig.theme) {\r\n ctx.cconfig.theme = {\r\n default : 'dark',\r\n available : ['dark', 'light']\r\n };\r\n }\r\n\r\n // create theme manager instance\r\n themeManager = new ThemeManager({\r\n default : ctx.cconfig.theme!.default,\r\n available : ctx.cconfig.theme!.available\r\n });\r\n }\r\n };\r\n };\r\n\r\n // Exported theme functions\r\n export const getThemeManager = () => themeManager;\r\n export const setTheme = (themeName: string) => getThemeManager().setTheme(themeName);\r\n export const toggleTheme = () => getThemeManager().toggleTheme();\r\n export const getCurrentTheme = () => getThemeManager().getTheme();\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\r\n\r\n export from \"./types\";\r\n export { ThemeManager };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}

package/dist/index.d.cts CHANGED Viewed

@@ -14,10 +14,15 @@ declare class ThemeManager {
     private applyTheme;
 }
+/**
+ * Create a theme extension
+ * @param config Theme configuration
+ * @returns Theme extension
+ */
+declare function themeExtension(config?: ThemeConfig): ClientExtension;
 declare const getThemeManager: () => ThemeManager;
 declare const setTheme: (themeName: string) => void;
 declare const toggleTheme: () => void;
 declare const getCurrentTheme: () => string;
-declare function createThemeExtension(config?: ThemeConfig): ClientExtension;
-export { ThemeManager, createThemeExtension, getCurrentTheme, getThemeManager, setTheme, toggleTheme };
+export { ThemeManager, getCurrentTheme, getThemeManager, setTheme, themeExtension, toggleTheme };

package/dist/index.d.ts CHANGED Viewed

@@ -14,10 +14,15 @@ declare class ThemeManager {
     private applyTheme;
 }
+/**
+ * Create a theme extension
+ * @param config Theme configuration
+ * @returns Theme extension
+ */
+declare function themeExtension(config?: ThemeConfig): ClientExtension;
 declare const getThemeManager: () => ThemeManager;
 declare const setTheme: (themeName: string) => void;
 declare const toggleTheme: () => void;
 declare const getCurrentTheme: () => string;
-declare function createThemeExtension(config?: ThemeConfig): ClientExtension;
-export { ThemeManager, createThemeExtension, getCurrentTheme, getThemeManager, setTheme, toggleTheme };
+export { ThemeManager, getCurrentTheme, getThemeManager, setTheme, themeExtension, toggleTheme };

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import {Storage,createStore}from'@minejs/store';import {effect}from'@minejs/signals';var i=class{constructor(e){this.config=e;let t=new Storage({type:"local"});this.store=createStore({state:{theme:e.default},persist:true,storage:t,storageKey:"app:theme"}),this.signal=this.store.state.theme;let a=t.get("app:theme:theme")||e.default;this.signal.set(a),this.applyTheme(a),effect(()=>{let n=this.signal?.();n&&this.applyTheme(n),console.log(`[ThemeManager] Reactive effect applied theme: ${n}`);}),effect(()=>{let n=window.matchMedia("(prefers-color-scheme: dark)"),h=g=>{t.get("app:theme:theme")||this.signal.set(g.matches?"dark":"light");};return n.addEventListener("change",h),()=>n.removeEventListener("change",h)});}getTheme(){return this.signal?.()??this.config.default??"light"}setTheme(e){if(!this.config.available.includes(e)){console.warn(`[ThemeManager] Unsupported theme: ${e}`);return}this.signal&&(this.signal.set(e),console.log(`[ThemeManager] Theme set to: ${e}`));}toggleTheme(){if(!this.signal)return;let e=this.signal(),t=this.config.available.find(r=>r!==e);t&&(this.signal.set(t),console.log(`[ThemeManager] Theme toggled to: ${t}`));}applyTheme(e){(document.documentElement||document.rootElement).setAttribute("data-theme",e),console.log(`[ThemeManager] Applied theme: ${e}`);}};var m,s=()=>m,E=o=>s().setTheme(o),x=()=>s().toggleTheme(),y=()=>s().getTheme();function C(o){return {name:"ThemeExtension",onBoot:e=>{o&&(e.cconfig.theme={...e.cconfig.theme,...o}),e.cconfig.theme||(e.cconfig.theme={default:"dark",available:["dark","light"]}),m=new i({default:e.cconfig.theme.default,available:e.cconfig.theme.available});}}}export{i as ThemeManager,C as createThemeExtension,y as getCurrentTheme,s as getThemeManager,E as setTheme,x as toggleTheme};//# sourceMappingURL=index.js.map
+import {Storage,createStore}from'@minejs/store';import {effect}from'@minejs/signals';var i=class{constructor(e){this.config=e;let t=new Storage({type:"local"});this.store=createStore({state:{theme:e.default},persist:true,storage:t,storageKey:"app:theme"}),this.signal=this.store.state.theme;let a=t.get("app:theme:theme")||e.default;this.signal.set(a),this.applyTheme(a),effect(()=>{let n=this.signal?.();n&&this.applyTheme(n),console.log(`[ThemeManager] Reactive effect applied theme: ${n}`);}),effect(()=>{let n=window.matchMedia("(prefers-color-scheme: dark)"),h=g=>{t.get("app:theme:theme")||this.signal.set(g.matches?"dark":"light");};return n.addEventListener("change",h),()=>n.removeEventListener("change",h)});}getTheme(){return this.signal?.()??this.config.default??"light"}setTheme(e){if(!this.config.available.includes(e)){console.warn(`[ThemeManager] Unsupported theme: ${e}`);return}this.signal&&(this.signal.set(e),console.log(`[ThemeManager] Theme set to: ${e}`));}toggleTheme(){if(!this.signal)return;let e=this.signal(),t=this.config.available.find(r=>r!==e);t&&(this.signal.set(t),console.log(`[ThemeManager] Theme toggled to: ${t}`));}applyTheme(e){(document.documentElement||document.rootElement).setAttribute("data-theme",e),console.log(`[ThemeManager] Applied theme: ${e}`);}};var m;function E(o){return {name:"ThemeExtension",onBoot:e=>{o&&(e.cconfig.theme={...e.cconfig.theme,...o}),e.cconfig.theme||(e.cconfig.theme={default:"dark",available:["dark","light"]}),m=new i({default:e.cconfig.theme.default,available:e.cconfig.theme.available});}}}var s=()=>m,x=o=>s().setTheme(o),y=()=>s().toggleTheme(),C=()=>s().getTheme();export{i as ThemeManager,C as getCurrentTheme,s as getThemeManager,x as setTheme,E as themeExtension,y as toggleTheme};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/mod/theme_manager.ts","../src/index.ts"],"names":["ThemeManager","config","storage","Storage","createStore","initialTheme","effect","currentTheme","mediaQuery","handleChange","e","themeName","nextTheme","t","themeManager","getThemeManager","setTheme","toggleTheme","getCurrentTheme","createThemeExtension","ctx"],"mappings":"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","file":"index.js","sourcesContent":["// src/mod/theme_manager.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import { ThemeConfig } from \"../types\";\r\n import { createStore, Storage } from '@minejs/store';\r\n import { signal, effect } from '@minejs/signals';\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n export class ThemeManager {\r\n\r\n // ┌──────────────────────────────── INIT ──────────────────────────────┐\r\n\r\n public store: ReturnType<typeof createStore>;\r\n public signal: ReturnType<typeof signal<string>>;\r\n\r\n constructor(public config: ThemeConfig) {\r\n\r\n const storage = new Storage({ type: 'local' });\r\n\r\n this.store = createStore({\r\n state: {\r\n theme: config.default\r\n },\r\n persist: true,\r\n storage,\r\n storageKey: 'app:theme'\r\n });\r\n\r\n this.signal = this.store.state.theme;\r\n\r\n // Set initial theme on body\r\n const storedTheme = storage.get('app:theme:theme') as string \| null;\r\n const initialTheme = storedTheme \|\| config.default;\r\n this.signal.set(initialTheme);\r\n this.applyTheme(initialTheme);\r\n\r\n // Setup reactive effect: apply theme whenever signal changes\r\n effect(() => {\r\n const currentTheme = this.signal?.();\r\n if (currentTheme) {\r\n this.applyTheme(currentTheme);\r\n }\r\n\r\n console.log(`[ThemeManager] Reactive effect applied theme: ${currentTheme}`);\r\n });\r\n\r\n // Listen for system theme changes\r\n effect(() => {\r\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n\r\n const handleChange = (e: MediaQueryListEvent) => {\r\n if (!storage.get('app:theme:theme')) this.signal.set(e.matches ? 'dark' : 'light');\r\n };\r\n\r\n mediaQuery.addEventListener('change', handleChange);\r\n return () => mediaQuery.removeEventListener('change', handleChange);\r\n });\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n // ┌──────────────────────────────── MAIN ──────────────────────────────┐\r\n\r\n getTheme(): string {\r\n return this.signal?.() ?? this.config.default ?? 'light';\r\n }\r\n\r\n setTheme(themeName: string): void {\r\n if (!this.config.available.includes(themeName)) {\r\n console.warn(`[ThemeManager] Unsupported theme: ${themeName}`);\r\n return;\r\n }\r\n\r\n // Update signal directly - effect will handle DOM updates\r\n if (this.signal) {\r\n this.signal.set(themeName);\r\n console.log(`[ThemeManager] Theme set to: ${themeName}`);\r\n }\r\n }\r\n\r\n toggleTheme(): void {\r\n if (!this.signal) return;\r\n const currentTheme = this.signal();\r\n const nextTheme = this.config.available.find(t => t !== currentTheme);\r\n if (nextTheme) {\r\n this.signal.set(nextTheme);\r\n console.log(`[ThemeManager] Theme toggled to: ${nextTheme}`);\r\n }\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n // ┌──────────────────────────────── HELP ──────────────────────────────┐\r\n\r\n private applyTheme(themeName: string): void {\r\n const htmlEl = document.documentElement \|\| document.rootElement;\r\n htmlEl.setAttribute('data-theme', themeName);\r\n console.log(`[ThemeManager] Applied theme: ${themeName}`);\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n","// src/index.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import { ClientExtension, ExtensionContext } from \"@cruxjs/base\";\r\n import { ThemeConfig } from \"./types\";\r\n import { ThemeManager } from \"./mod/theme_manager\";\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ MAIN ════════════════════════════════════════╗\r\n\r\n // Theme manager instance\r\n let themeManager : ThemeManager;\r\n\r\n // Exported theme functions\r\n export const getThemeManager = () => themeManager;\r\n export const setTheme = (themeName: string) => getThemeManager().setTheme(themeName);\r\n export const toggleTheme = () => getThemeManager().toggleTheme();\r\n export const getCurrentTheme = () => getThemeManager().getTheme();\r\n\r\n // Theme extension\r\n export function createThemeExtension(config?: ThemeConfig) : ClientExtension {\r\n return {\r\n name : 'ThemeExtension',\r\n\r\n onBoot: (ctx: ExtensionContext) => {\r\n // if config provided, merge into client config\r\n if (config) {\r\n ctx.cconfig.theme = {\r\n ...ctx.cconfig.theme,\r\n ...config\r\n };\r\n }\r\n\r\n // if no theme config provided, set default\r\n if (!ctx.cconfig.theme) {\r\n ctx.cconfig.theme = {\r\n default : 'dark',\r\n available : ['dark', 'light']\r\n };\r\n }\r\n\r\n // create theme manager instance\r\n themeManager = new ThemeManager({\r\n default : ctx.cconfig.theme!.default,\r\n available : ctx.cconfig.theme!.available\r\n });\r\n }\r\n };\r\n };\r\n\r\n // export\r\n export * from \"./types\";\r\n export { ThemeManager };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}
1	+ {"version":3,"sources":["../src/mod/manager.ts","../src/index.ts"],"names":["ThemeManager","config","storage","Storage","createStore","initialTheme","effect","currentTheme","mediaQuery","handleChange","e","themeName","nextTheme","t","themeManager","themeExtension","ctx","getThemeManager","setTheme","toggleTheme","getCurrentTheme"],"mappings":"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","file":"index.js","sourcesContent":["// src/mod/manager.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import { ThemeConfig } from \"../types\";\r\n import { createStore, Storage } from '@minejs/store';\r\n import { signal, effect } from '@minejs/signals';\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n export class ThemeManager {\r\n\r\n // ┌──────────────────────────────── INIT ──────────────────────────────┐\r\n\r\n public store: ReturnType<typeof createStore>;\r\n public signal: ReturnType<typeof signal<string>>;\r\n\r\n constructor(public config: ThemeConfig) {\r\n\r\n const storage = new Storage({ type: 'local' });\r\n\r\n this.store = createStore({\r\n state: {\r\n theme: config.default\r\n },\r\n persist: true,\r\n storage,\r\n storageKey: 'app:theme'\r\n });\r\n\r\n this.signal = this.store.state.theme;\r\n\r\n // Set initial theme on body\r\n const storedTheme = storage.get('app:theme:theme') as string \| null;\r\n const initialTheme = storedTheme \|\| config.default;\r\n this.signal.set(initialTheme);\r\n this.applyTheme(initialTheme);\r\n\r\n // Setup reactive effect: apply theme whenever signal changes\r\n effect(() => {\r\n const currentTheme = this.signal?.();\r\n if (currentTheme) {\r\n this.applyTheme(currentTheme);\r\n }\r\n\r\n console.log(`[ThemeManager] Reactive effect applied theme: ${currentTheme}`);\r\n });\r\n\r\n // Listen for system theme changes\r\n effect(() => {\r\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n\r\n const handleChange = (e: MediaQueryListEvent) => {\r\n if (!storage.get('app:theme:theme')) this.signal.set(e.matches ? 'dark' : 'light');\r\n };\r\n\r\n mediaQuery.addEventListener('change', handleChange);\r\n return () => mediaQuery.removeEventListener('change', handleChange);\r\n });\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n // ┌──────────────────────────────── MAIN ──────────────────────────────┐\r\n\r\n getTheme(): string {\r\n return this.signal?.() ?? this.config.default ?? 'light';\r\n }\r\n\r\n setTheme(themeName: string): void {\r\n if (!this.config.available.includes(themeName)) {\r\n console.warn(`[ThemeManager] Unsupported theme: ${themeName}`);\r\n return;\r\n }\r\n\r\n // Update signal directly - effect will handle DOM updates\r\n if (this.signal) {\r\n this.signal.set(themeName);\r\n console.log(`[ThemeManager] Theme set to: ${themeName}`);\r\n }\r\n }\r\n\r\n toggleTheme(): void {\r\n if (!this.signal) return;\r\n const currentTheme = this.signal();\r\n const nextTheme = this.config.available.find(t => t !== currentTheme);\r\n if (nextTheme) {\r\n this.signal.set(nextTheme);\r\n console.log(`[ThemeManager] Theme toggled to: ${nextTheme}`);\r\n }\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n\r\n // ┌──────────────────────────────── HELP ──────────────────────────────┐\r\n\r\n private applyTheme(themeName: string): void {\r\n const htmlEl = document.documentElement \|\| document.rootElement;\r\n htmlEl.setAttribute('data-theme', themeName);\r\n console.log(`[ThemeManager] Applied theme: ${themeName}`);\r\n }\r\n\r\n // └────────────────────────────────────────────────────────────────────┘\r\n\r\n };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n","// src/index.ts\r\n//\r\n// Made with ❤️ by Maysara.\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ PACK ════════════════════════════════════════╗\r\n\r\n import { ClientExtension, ExtensionContext } from \"@cruxjs/base\";\r\n import { ThemeConfig } from \"./types\";\r\n import { ThemeManager } from \"./mod/manager\";\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ INIT ════════════════════════════════════════╗\r\n\r\n // Theme manager instance\r\n let themeManager : ThemeManager;\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ CORE ════════════════════════════════════════╗\r\n\r\n /*\r\n Create a theme extension\r\n * @param config Theme configuration\r\n * @returns Theme extension\r\n /\r\n export function themeExtension(config?: ThemeConfig) : ClientExtension {\r\n return {\r\n name : 'ThemeExtension',\r\n\r\n onBoot: (ctx: ExtensionContext) => {\r\n // if config provided, merge into client config\r\n if (config) {\r\n ctx.cconfig.theme = {\r\n ...ctx.cconfig.theme,\r\n ...config\r\n };\r\n }\r\n\r\n // if no theme config provided, set default\r\n if (!ctx.cconfig.theme) {\r\n ctx.cconfig.theme = {\r\n default : 'dark',\r\n available : ['dark', 'light']\r\n };\r\n }\r\n\r\n // create theme manager instance\r\n themeManager = new ThemeManager({\r\n default : ctx.cconfig.theme!.default,\r\n available : ctx.cconfig.theme!.available\r\n });\r\n }\r\n };\r\n };\r\n\r\n // Exported theme functions\r\n export const getThemeManager = () => themeManager;\r\n export const setTheme = (themeName: string) => getThemeManager().setTheme(themeName);\r\n export const toggleTheme = () => getThemeManager().toggleTheme();\r\n export const getCurrentTheme = () => getThemeManager().getTheme();\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝\r\n\r\n\r\n\r\n// ╔════════════════════════════════════════ ════ ════════════════════════════════════════╗\r\n\r\n export from \"./types\";\r\n export { ThemeManager };\r\n\r\n// ╚══════════════════════════════════════════════════════════════════════════════════════╝"]}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
 	"name": "@cruxext/theme",
-	"version": "0.0.7",
-	"description": "Lightweight reactive theme manager for CruxJS with dark/light mode support and persistent storage.",
+	"version": "0.0.8",
+	"description": "A lightweight, reactive theme management solution, built for @cruxjs ecosystem.",
 	"keywords": ["cruxjs", "extension", "theme"],
 	"license": "MIT",
 	"homepage": "https://github.com/cruxext-org/theme#readme",
@@ -48,12 +48,14 @@
 		"@eslint/js": "^9.39.2",
 		"@stylistic/eslint-plugin": "^5.7.0",
 		"@types/bun": "^1.3.6",
+		"@types/jsdom": "^27.0.0",
 		"@types/node": "^20.19.30",
 		"bun-plugin-dts": "^0.3.0",
 		"bun-types": "^1.3.6",
+		"jsdom": "^27.4.0",
 		"ts-node": "^10.9.2",
 		"tsup": "^8.5.1",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.53.0"
+		"typescript-eslint": "^8.53.1"
 	}
 }