darkify-js 1.1.12 → 1.1.13-beta.0

package/dist/darkify.d.ts

@@ -1,39 +1,68 @@
+interface DarkifyPlugin {
+  el?: HTMLElement | ShadowRoot;
+  render(): void | HTMLElement | ShadowRoot;
+  onThemeChange?: (theme: string) => void;
+  onDestroy?: () => void;
+}
+
+interface DarkifyPluginElement {
+  new (host: any, options?: object): DarkifyPlugin;
+  pluginId: string;
+}
+
+type StorageType = 'local' | 'session' | 'none';
+
 interface Options {
   autoMatchTheme: boolean;
-  useLocalStorage: boolean;
-  useSessionStorage: boolean;
   useColorScheme: [string, string?];
+  useStorage: StorageType;
+  usePlugins?: (DarkifyPluginElement | [DarkifyPluginElement, any])[];
 }
 
 declare class Darkify {
     private static readonly storageKey;
     readonly options: Options;
+    private plugins;
     theme: string;
-    _style: HTMLStyleElement;
-    _meta: HTMLMetaElement;
+    private _elm;
+    private _meta;
+    private _style;
     /**
-     * @param {string} element Button ID ( recommended ) or HTML element
-     * @param {object} options Options
+     * Creates a new Darkify instance for managing dark/light theme
+     * @param element - Button ID (recommended) or HTML element selector
+     * @param options - Configuration options for customizing behavior
      * @see {@link https://github.com/emrocode/darkify-js/wiki|Documentation}
      */
     constructor(element: string, options: Partial<Options>);
     private init;
+    private initPlugins;
+    private notifyPlugins;
+    private getStorage;
     private getOsPreference;
     private createAttribute;
     private updateTags;
     private savePreference;
     private syncThemeBetweenTabs;
+    private setTheme;
     /**
      * Toggles the theme between light and dark modes
-     * @returns {void}
      */
     toggleTheme(): void;
     /**
-     * Retrieves the current active theme
-     * @returns {string}
+     * Retrieves the currently active theme
+     * @returns The current theme name ('light' or 'dark')
      */
     getCurrentTheme(): string;
+    /**
+     * Destroys the Darkify instance and cleans up all resources
+     *
+     * Removes all event listeners (system theme changes, click handlers, storage events),
+     * destroys all active plugins, removes injected DOM elements (<style> and <meta> tags),
+     * and frees associated resources.
+     * Call this method when the instance is no longer needed to prevent memory leaks.
+     */
+    destroy(): void;
 }
 
 export { Darkify as default };
-export type { Options };
+export type { DarkifyPlugin, Options };

package/dist/darkify.esm.js

@@ -1,30 +1,44 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.12
+ * @version 1.1.13-beta.0
  * @license MIT
  */
-const isBrowser = typeof window !== 'undefined';
+class EventListenerManager {
+    constructor() {
+        this.listeners = [];
+    }
+    addListener(target, event, handler, options) {
+        target.addEventListener(event, handler, options);
+        this.listeners.push({ target, event, handler, options });
+    }
+    clearListeners() {
+        this.listeners.forEach(({ target, event, handler, options }) => {
+            target.removeEventListener(event, handler, options);
+        });
+        this.listeners = [];
+    }
+}
 
 const defaultOptions = {
     autoMatchTheme: true,
-    useLocalStorage: true,
-    useSessionStorage: false,
     useColorScheme: ['#ffffff', '#000000'],
+    useStorage: 'local',
 };
 
+const isBrowser = typeof window !== 'undefined';
+
 class Darkify {
     constructor(element, options) {
         this.options = defaultOptions;
+        this.plugins = [];
         this.theme = 'light';
         if (!isBrowser)
             return;
+        this._elm = new EventListenerManager();
         const opts = Object.assign(Object.assign({}, defaultOptions), options);
-        if (opts.useLocalStorage && opts.useSessionStorage) {
-            opts.useSessionStorage = false;
-        }
         this.options = opts;
-        this.theme = this.getOsPreference(this.options);
+        this.theme = this.getOsPreference();
         this._style = document.createElement('style');
         this._meta = document.createElement('meta');
         this.init(element);
@@ -32,30 +46,59 @@ class Darkify {
         this.syncThemeBetweenTabs();
     }
     init(element) {
-        window
-            .matchMedia('(prefers-color-scheme: dark)')
-            .addEventListener('change', ({ matches: isDark }) => {
+        this._elm.addListener(window.matchMedia('(prefers-color-scheme: dark)'), 'change', ({ matches: isDark }) => {
             this.theme = isDark ? 'dark' : 'light';
             this.createAttribute();
         });
-        if (element) {
-            document.addEventListener('DOMContentLoaded', () => {
+        this.initPlugins();
+        const hasWidget = this.plugins.some(p => p.el !== undefined);
+        if (element && !hasWidget) {
+            this._elm.addListener(document, 'DOMContentLoaded', () => {
                 const htmlElement = document.querySelector(element);
-                htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.addEventListener('click', () => this.toggleTheme());
+                if (htmlElement) {
+                    this._elm.addListener(htmlElement, 'click', () => this.toggleTheme());
+                }
             });
         }
     }
-    getOsPreference(options) {
-        const { autoMatchTheme, useLocalStorage, useSessionStorage } = options;
-        const STO = (useLocalStorage && window.localStorage.getItem(Darkify.storageKey)) ||
-            (useSessionStorage && window.sessionStorage.getItem(Darkify.storageKey)) ||
-            (autoMatchTheme && window.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light');
-        return STO;
+    initPlugins() {
+        var _a;
+        (_a = this.options.usePlugins) === null || _a === void 0 ? void 0 : _a.forEach(p => {
+            const [Plugin, pluginOptions] = Array.isArray(p) ? p : [p, undefined];
+            const plugin = new Plugin(this, pluginOptions);
+            const renderedNode = plugin.render();
+            if (renderedNode instanceof HTMLElement || renderedNode instanceof ShadowRoot) {
+                plugin.el = renderedNode;
+            }
+            this.plugins.push(plugin);
+        });
+    }
+    notifyPlugins(theme) {
+        this.plugins.forEach(plugin => {
+            var _a;
+            (_a = plugin.onThemeChange) === null || _a === void 0 ? void 0 : _a.call(plugin, theme);
+        });
+    }
+    getStorage() {
+        const { useStorage } = this.options;
+        if (useStorage === 'none')
+            return;
+        return useStorage === 'local' ? window.localStorage : window.sessionStorage;
+    }
+    getOsPreference() {
+        const storage = this.getStorage();
+        if (storage) {
+            const stored = storage.getItem(Darkify.storageKey);
+            if (stored)
+                return stored;
+        }
+        if (this.options.autoMatchTheme) {
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return 'light';
     }
     createAttribute() {
-        const dataTheme = document.getElementsByTagName('html')[0];
+        const dataTheme = document.documentElement;
         const { useColorScheme } = this.options;
         const css = `/**! Darkify / A simple dark mode toggle library **/\n:root:where([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;
         dataTheme.dataset.theme = this.theme;
@@ -65,36 +108,61 @@ class Darkify {
     updateTags(css, useColorScheme) {
         const [lightColor, darkColor] = useColorScheme;
         this._meta.name = 'theme-color';
+        this._meta.media = `(prefers-color-scheme: ${this.theme})`;
         this._meta.content = this.theme === 'light' ? lightColor : (darkColor !== null && darkColor !== void 0 ? darkColor : lightColor);
         this._style.innerHTML = css;
-        const head = document.getElementsByTagName('head')[0];
+        const head = document.head;
         if (!this._meta.parentNode)
             head.appendChild(this._meta);
         if (!this._style.parentNode)
             head.appendChild(this._style);
     }
     savePreference() {
-        const { useLocalStorage } = this.options;
-        const STO = useLocalStorage ? window.localStorage : window.sessionStorage;
-        const OTS = useLocalStorage ? window.sessionStorage : window.localStorage;
+        const { useStorage } = this.options;
+        if (useStorage === 'none')
+            return;
+        const storage = useStorage === 'local';
+        const STO = storage ? window.localStorage : window.sessionStorage;
+        const OTS = storage ? window.sessionStorage : window.localStorage;
         OTS.removeItem(Darkify.storageKey);
         STO.setItem(Darkify.storageKey, this.theme);
     }
     syncThemeBetweenTabs() {
-        window.addEventListener('storage', e => {
+        this._elm.addListener(window, 'storage', (e) => {
             if (e.key === Darkify.storageKey && e.newValue) {
                 this.theme = e.newValue;
                 this.createAttribute();
+                this.notifyPlugins(e.newValue);
             }
         });
     }
-    toggleTheme() {
-        this.theme = this.theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme) {
+        this.theme = newTheme;
         this.createAttribute();
+        this.notifyPlugins(newTheme);
+    }
+    toggleTheme() {
+        this.setTheme(this.theme === 'light' ? 'dark' : 'light');
     }
     getCurrentTheme() {
         return this.theme;
     }
+    destroy() {
+        var _a, _b, _c, _d;
+        this._elm.clearListeners();
+        (_b = (_a = this._style) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.removeChild(this._style);
+        (_d = (_c = this._meta) === null || _c === void 0 ? void 0 : _c.parentNode) === null || _d === void 0 ? void 0 : _d.removeChild(this._meta);
+        if (this.plugins.length > 0) {
+            this.plugins.forEach(plugin => {
+                var _a;
+                if (plugin.el) {
+                    (plugin.el instanceof ShadowRoot ? plugin.el.host : plugin.el).remove();
+                }
+                (_a = plugin.onDestroy) === null || _a === void 0 ? void 0 : _a.call(plugin);
+            });
+            this.plugins = [];
+        }
+    }
 }
 Darkify.storageKey = 'theme';
 

package/dist/darkify.umd.js

@@ -1,7 +1,7 @@
 /**
  *
  * @author Emilio Romero <emrocode@gmail.com>
- * @version 1.1.12
+ * @version 1.1.13-beta.0
  * @license MIT
  */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Darkify=t()}(this,function(){"use strict";const e="undefined"!=typeof window,t={autoMatchTheme:!0,useLocalStorage:!0,useSessionStorage:!1,useColorScheme:["#ffffff","#000000"]};class s{constructor(s,o){if(this.options=t,this.theme="light",!e)return;const i=Object.assign(Object.assign({},t),o);i.useLocalStorage&&i.useSessionStorage&&(i.useSessionStorage=!1),this.options=i,this.theme=this.getOsPreference(this.options),this._style=document.createElement("style"),this._meta=document.createElement("meta"),this.init(s),this.createAttribute(),this.syncThemeBetweenTabs()}init(e){window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",({matches:e})=>{this.theme=e?"dark":"light",this.createAttribute()}),e&&document.addEventListener("DOMContentLoaded",()=>{const t=document.querySelector(e);null==t||t.addEventListener("click",()=>this.toggleTheme())})}getOsPreference(e){const{autoMatchTheme:t,useLocalStorage:o,useSessionStorage:i}=e;return o&&window.localStorage.getItem(s.storageKey)||i&&window.sessionStorage.getItem(s.storageKey)||(t&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")}createAttribute(){const e=document.getElementsByTagName("html")[0],{useColorScheme:t}=this.options,s=`/**! Darkify / A simple dark mode toggle library **/\n:root:where([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;e.dataset.theme=this.theme,this.updateTags(s,t),this.savePreference()}updateTags(e,t){const[s,o]=t;this._meta.name="theme-color",this._meta.content="light"===this.theme?s:null!=o?o:s,this._style.innerHTML=e;const i=document.getElementsByTagName("head")[0];this._meta.parentNode||i.appendChild(this._meta),this._style.parentNode||i.appendChild(this._style)}savePreference(){const{useLocalStorage:e}=this.options,t=e?window.localStorage:window.sessionStorage;(e?window.sessionStorage:window.localStorage).removeItem(s.storageKey),t.setItem(s.storageKey,this.theme)}syncThemeBetweenTabs(){window.addEventListener("storage",e=>{e.key===s.storageKey&&e.newValue&&(this.theme=e.newValue,this.createAttribute())})}toggleTheme(){this.theme="light"===this.theme?"dark":"light",this.createAttribute()}getCurrentTheme(){return this.theme}}return s.storageKey="theme",s});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Darkify=t()}(this,function(){"use strict";class e{constructor(){this.listeners=[]}addListener(e,t,s,i){e.addEventListener(t,s,i),this.listeners.push({target:e,event:t,handler:s,options:i})}clearListeners(){this.listeners.forEach(({target:e,event:t,handler:s,options:i})=>{e.removeEventListener(t,s,i)}),this.listeners=[]}}const t={autoMatchTheme:!0,useColorScheme:["#ffffff","#000000"],useStorage:"local"},s="undefined"!=typeof window;class i{constructor(i,n){if(this.options=t,this.plugins=[],this.theme="light",!s)return;this._elm=new e;const o=Object.assign(Object.assign({},t),n);this.options=o,this.theme=this.getOsPreference(),this._style=document.createElement("style"),this._meta=document.createElement("meta"),this.init(i),this.createAttribute(),this.syncThemeBetweenTabs()}init(e){this._elm.addListener(window.matchMedia("(prefers-color-scheme: dark)"),"change",({matches:e})=>{this.theme=e?"dark":"light",this.createAttribute()}),this.initPlugins();const t=this.plugins.some(e=>void 0!==e.el);e&&!t&&this._elm.addListener(document,"DOMContentLoaded",()=>{const t=document.querySelector(e);t&&this._elm.addListener(t,"click",()=>this.toggleTheme())})}initPlugins(){var e;null===(e=this.options.usePlugins)||void 0===e||e.forEach(e=>{const[t,s]=Array.isArray(e)?e:[e,void 0],i=new t(this,s),n=i.render();(n instanceof HTMLElement||n instanceof ShadowRoot)&&(i.el=n),this.plugins.push(i)})}notifyPlugins(e){this.plugins.forEach(t=>{var s;null===(s=t.onThemeChange)||void 0===s||s.call(t,e)})}getStorage(){const{useStorage:e}=this.options;if("none"!==e)return"local"===e?window.localStorage:window.sessionStorage}getOsPreference(){const e=this.getStorage();if(e){const t=e.getItem(i.storageKey);if(t)return t}return this.options.autoMatchTheme&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}createAttribute(){const e=document.documentElement,{useColorScheme:t}=this.options,s=`/**! Darkify / A simple dark mode toggle library **/\n:root:where([data-theme="${this.theme}"]),[data-theme="${this.theme}"]{color-scheme:${this.theme}}`;e.dataset.theme=this.theme,this.updateTags(s,t),this.savePreference()}updateTags(e,t){const[s,i]=t;this._meta.name="theme-color",this._meta.media=`(prefers-color-scheme: ${this.theme})`,this._meta.content="light"===this.theme?s:null!=i?i:s,this._style.innerHTML=e;const n=document.head;this._meta.parentNode||n.appendChild(this._meta),this._style.parentNode||n.appendChild(this._style)}savePreference(){const{useStorage:e}=this.options;if("none"===e)return;const t="local"===e,s=t?window.localStorage:window.sessionStorage;(t?window.sessionStorage:window.localStorage).removeItem(i.storageKey),s.setItem(i.storageKey,this.theme)}syncThemeBetweenTabs(){this._elm.addListener(window,"storage",e=>{e.key===i.storageKey&&e.newValue&&(this.theme=e.newValue,this.createAttribute(),this.notifyPlugins(e.newValue))})}setTheme(e){this.theme=e,this.createAttribute(),this.notifyPlugins(e)}toggleTheme(){this.setTheme("light"===this.theme?"dark":"light")}getCurrentTheme(){return this.theme}destroy(){var e,t,s,i;this._elm.clearListeners(),null===(t=null===(e=this._style)||void 0===e?void 0:e.parentNode)||void 0===t||t.removeChild(this._style),null===(i=null===(s=this._meta)||void 0===s?void 0:s.parentNode)||void 0===i||i.removeChild(this._meta),this.plugins.length>0&&(this.plugins.forEach(e=>{var t;e.el&&(e.el instanceof ShadowRoot?e.el.host:e.el).remove(),null===(t=e.onDestroy)||void 0===t||t.call(e)}),this.plugins=[])}}return i.storageKey="theme",i});

package/dist/plugins/index.d.ts

@@ -0,0 +1,54 @@
+interface DarkifyPlugin {
+  el?: HTMLElement | ShadowRoot;
+  render(): void | HTMLElement | ShadowRoot;
+  onThemeChange?: (theme: string) => void;
+  onDestroy?: () => void;
+}
+
+interface ThemeWidgetOptions {
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    size?: 'small' | 'medium' | 'large';
+    shortcut?: string;
+}
+declare class ThemeWidget implements DarkifyPlugin {
+    el?: ShadowRoot;
+    private _host;
+    static readonly pluginId = "d-widget";
+    private options;
+    /**
+     * Creates a theme toggle widget button
+     * @param host - The darkify instance that controls theme state
+     * @param options - Widget configuration (position, size, shortcut)
+     */
+    constructor(host: any, options?: ThemeWidgetOptions);
+    render(): ShadowRoot;
+    onThemeChange(theme: string): void;
+    onDestroy(): void;
+    private getPositionVars;
+    private getSizeVar;
+}
+
+interface KeyboardShortcutOptions {
+    key?: string;
+    ctrl?: boolean;
+    shift?: boolean;
+    target?: 'body' | 'input' | 'all';
+}
+declare class KeyboardShortcut implements DarkifyPlugin {
+    private _host;
+    private options;
+    /**
+     * Creates a keyboard shortcut listener for theme toggling
+     * @param host - The darkify instance that controls theme state
+     * @param options - Shortcut configuration (key, ctrl, shift, target)
+     */
+    constructor(host: any, options?: KeyboardShortcutOptions);
+    private handleKeyDown;
+    render(): void;
+    onDestroy(): void;
+    private matches;
+    private isTyping;
+}
+
+export { KeyboardShortcut, ThemeWidget };
+export type { KeyboardShortcutOptions, ThemeWidgetOptions };

package/dist/plugins/index.js

@@ -0,0 +1,226 @@
+class ThemeWidget {
+    constructor(host, options) {
+        var _a, _b, _c;
+        this._host = host;
+        this.options = {
+            position: (_a = options === null || options === void 0 ? void 0 : options.position) !== null && _a !== void 0 ? _a : 'bottom-right',
+            size: (_b = options === null || options === void 0 ? void 0 : options.size) !== null && _b !== void 0 ? _b : 'medium',
+            shortcut: (_c = options === null || options === void 0 ? void 0 : options.shortcut) !== null && _c !== void 0 ? _c : '',
+        };
+    }
+    render() {
+        var _a;
+        const container = document.createElement('div');
+        container.id = ThemeWidget.pluginId;
+        this.el = container.attachShadow({ mode: 'open' });
+        const positionVars = this.getPositionVars();
+        const sizeVars = this.getSizeVar();
+        const sheet = new CSSStyleSheet();
+        sheet.replaceSync(`
+      :host {
+        --widget-safe-top: env(safe-area-inset-top, 0px);
+        --widget-safe-right: env(safe-area-inset-right, 0px);
+        --widget-safe-bottom: env(safe-area-inset-bottom, 0px);
+        --widget-safe-left: env(safe-area-inset-left, 0px);
+        --widget-margin: 24px;
+      }
+
+      .d-wrapper {
+        --margin: max(var(--widget-margin), var(--widget-safe-bottom));
+        ${positionVars}
+        ${sizeVars}
+        position: fixed;
+        top: calc(var(--pos-top) + var(--widget-safe-top));
+        right: calc(var(--pos-right) + var(--widget-safe-right));
+        bottom: calc(var(--pos-bottom) + var(--widget-safe-bottom));
+        left: calc(var(--pos-left) + var(--widget-safe-left));
+        z-index: 9999;
+        max-width: fit-content;
+        display: flex;
+        align-items: center;
+        column-gap: 0.5rem;
+      }
+
+      .d-button {
+        --icon-size: calc(var(--size) * 0.4);
+        position: relative;
+        width: var(--size);
+        height: var(--size);
+        border-radius: 50%;
+        border: none;
+        border-bottom: 2px solid var(--widget-accent, hsl(0,0%,0%,0.30));
+        box-shadow: 0 1px 3px 0 hsla(210,6%,25%,0.30), 0 4px 8px 3px hsla(210,6%,25%,0.30);
+        background-color: transparent;
+        color: canvastext;
+        cursor: pointer;
+        font-size: var(--icon-size);
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+        transition: transform 0.4s ease-in-out;
+        user-select: none;
+        -webkit-user-select: none;
+        -webkit-tap-highlight-color: transparent;
+      }
+
+      .d-button::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border: none;
+        border-radius: 50%;
+        background-color: canvas;
+        filter: invert(90%);
+      }
+
+      .d-button.light { --widget-accent: hsl(45,99%,54%); }
+      .d-button.dark { --widget-accent: hsl(200,29%,43%); }
+
+      @media (prefers-reduced-motion: no-preference) {
+        .d-button {
+          animation: dEnter 0.4s cubic-bezier(0.34,1.56,0.64,1);
+          animation-fill-mode: backwards;
+        }
+      }
+
+      @keyframes dEnter {
+        from {
+          opacity: 0;
+          transform: scale(0.6);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+
+      .d-kbd {
+        position: relative;
+        padding: 0.25em 0.4em;
+        font-size: 11px;
+        font-family: ui-monospace, monospace;
+        line-height: 1;
+        letter-spacing: -0.025em;
+        background-color: canvas;
+        color: canvastext;
+        filter: invert(90%);
+        border: none;
+        border-bottom: 2px solid hsl(from canvastext h s l / calc(alpha * 0.5));
+        border-radius: 0.25rem;
+        box-shadow: 0 0 2px hsla(0,0%,0%,0.10);
+        user-select: none;
+        -webkit-user-select: none;
+      }
+    `);
+        this.el.adoptedStyleSheets = [sheet];
+        const wrapper = document.createElement('div');
+        wrapper.className = 'd-wrapper';
+        const button = document.createElement('button');
+        button.className = 'd-button';
+        button.setAttribute('aria-label', 'Toggle theme');
+        button.addEventListener('click', () => this._host.toggleTheme());
+        const icon = document.createElement('span');
+        icon.className = 'd-icon';
+        button.appendChild(icon);
+        const isLeftPosition = (_a = this.options.position) === null || _a === void 0 ? void 0 : _a.includes('left');
+        if (this.options.shortcut) {
+            const kbd = document.createElement('kbd');
+            kbd.className = 'd-kbd';
+            kbd.textContent = this.options.shortcut;
+            if (isLeftPosition) {
+                wrapper.appendChild(button);
+                wrapper.appendChild(kbd);
+            }
+            else {
+                wrapper.appendChild(kbd);
+                wrapper.appendChild(button);
+            }
+        }
+        else {
+            wrapper.appendChild(button);
+        }
+        this.el.appendChild(wrapper);
+        document.body.appendChild(container);
+        this.onThemeChange(this._host.getCurrentTheme());
+        return this.el;
+    }
+    onThemeChange(theme) {
+        var _a, _b;
+        const button = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('button.d-button');
+        const icon = (_b = this.el) === null || _b === void 0 ? void 0 : _b.querySelector('span.d-icon');
+        if (button && icon) {
+            button.className = `d-button ${theme}`;
+            icon.textContent = theme === 'light' ? '🌞' : '🌚';
+        }
+    }
+    onDestroy() {
+        if (this.el && this.el.host) {
+            this.el.host.remove();
+        }
+    }
+    getPositionVars() {
+        const vars = {
+            'top-left': '--pos-top:var(--margin);--pos-right:auto;--pos-bottom:auto;--pos-left:var(--margin);',
+            'top-right': '--pos-top:var(--margin);--pos-right:var(--margin);--pos-bottom:auto;--pos-left:auto;',
+            'bottom-left': '--pos-top:auto;--pos-right:auto;--pos-bottom:calc(var(--margin)*2);--pos-left:var(--margin);',
+            'bottom-right': '--pos-top:auto;--pos-right:var(--margin);--pos-bottom:calc(var(--margin)*2);--pos-left:auto;',
+        };
+        return vars[this.options.position];
+    }
+    getSizeVar() {
+        const vars = {
+            small: '--size:36px;',
+            medium: '--size:56px;',
+            large: '--size:72px;',
+        };
+        return vars[this.options.size];
+    }
+}
+ThemeWidget.pluginId = 'd-widget';
+
+class KeyboardShortcut {
+    constructor(host, options) {
+        var _a, _b, _c, _d;
+        this.handleKeyDown = (e) => {
+            if (this.options.target === 'body' && this.isTyping(e))
+                return;
+            if (this.options.target === 'input' && !this.isTyping(e))
+                return;
+            if (this.matches(e)) {
+                e.preventDefault();
+                this._host.toggleTheme();
+            }
+        };
+        this._host = host;
+        this.options = {
+            key: (_a = options === null || options === void 0 ? void 0 : options.key) !== null && _a !== void 0 ? _a : 'd',
+            ctrl: (_b = options === null || options === void 0 ? void 0 : options.ctrl) !== null && _b !== void 0 ? _b : false,
+            shift: (_c = options === null || options === void 0 ? void 0 : options.shift) !== null && _c !== void 0 ? _c : false,
+            target: (_d = options === null || options === void 0 ? void 0 : options.target) !== null && _d !== void 0 ? _d : 'body',
+        };
+    }
+    render() {
+        document.addEventListener('keydown', this.handleKeyDown);
+        return;
+    }
+    onDestroy() {
+        document.removeEventListener('keydown', this.handleKeyDown);
+    }
+    matches(e) {
+        return (e.key.toLowerCase() === this.options.key.toLowerCase() &&
+            (!this.options.ctrl || e.ctrlKey || e.metaKey) &&
+            (!this.options.shift || e.shiftKey) &&
+            (this.options.ctrl || (!e.ctrlKey && !e.metaKey && !e.altKey)));
+    }
+    isTyping(e) {
+        const target = e.target;
+        const tagName = target.tagName.toLowerCase();
+        const isEditable = target.isContentEditable || tagName === 'input' || tagName === 'textarea';
+        return isEditable;
+    }
+}
+
+export { KeyboardShortcut, ThemeWidget };

package/dist/plugins/index.umd.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).DarkifyPlugins={})}(this,function(t){"use strict";class e{constructor(t,e){var n,o,i;this._host=t,this.options={position:null!==(n=null==e?void 0:e.position)&&void 0!==n?n:"bottom-right",size:null!==(o=null==e?void 0:e.size)&&void 0!==o?o:"medium",shortcut:null!==(i=null==e?void 0:e.shortcut)&&void 0!==i?i:""}}render(){var t;const n=document.createElement("div");n.id=e.pluginId,this.el=n.attachShadow({mode:"open"});const o=this.getPositionVars(),i=this.getSizeVar(),s=new CSSStyleSheet;s.replaceSync(`\n      :host {\n        --widget-safe-top: env(safe-area-inset-top, 0px);\n        --widget-safe-right: env(safe-area-inset-right, 0px);\n        --widget-safe-bottom: env(safe-area-inset-bottom, 0px);\n        --widget-safe-left: env(safe-area-inset-left, 0px);\n        --widget-margin: 24px;\n      }\n\n      .d-wrapper {\n        --margin: max(var(--widget-margin), var(--widget-safe-bottom));\n        ${o}\n        ${i}\n        position: fixed;\n        top: calc(var(--pos-top) + var(--widget-safe-top));\n        right: calc(var(--pos-right) + var(--widget-safe-right));\n        bottom: calc(var(--pos-bottom) + var(--widget-safe-bottom));\n        left: calc(var(--pos-left) + var(--widget-safe-left));\n        z-index: 9999;\n        max-width: fit-content;\n        display: flex;\n        align-items: center;\n        column-gap: 0.5rem;\n      }\n\n      .d-button {\n        --icon-size: calc(var(--size) * 0.4);\n        position: relative;\n        width: var(--size);\n        height: var(--size);\n        border-radius: 50%;\n        border: none;\n        border-bottom: 2px solid var(--widget-accent, hsl(0,0%,0%,0.30));\n        box-shadow: 0 1px 3px 0 hsla(210,6%,25%,0.30), 0 4px 8px 3px hsla(210,6%,25%,0.30);\n        background-color: transparent;\n        color: canvastext;\n        cursor: pointer;\n        font-size: var(--icon-size);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        transition: transform 0.4s ease-in-out;\n        user-select: none;\n        -webkit-user-select: none;\n        -webkit-tap-highlight-color: transparent;\n      }\n\n      .d-button::before {\n        content: "";\n        position: absolute;\n        inset: 0;\n        z-index: -1;\n        border: none;\n        border-radius: 50%;\n        background-color: canvas;\n        filter: invert(90%);\n      }\n\n      .d-button.light { --widget-accent: hsl(45,99%,54%); }\n      .d-button.dark { --widget-accent: hsl(200,29%,43%); }\n\n      @media (prefers-reduced-motion: no-preference) {\n        .d-button {\n          animation: dEnter 0.4s cubic-bezier(0.34,1.56,0.64,1);\n          animation-fill-mode: backwards;\n        }\n      }\n\n      @keyframes dEnter {\n        from {\n          opacity: 0;\n          transform: scale(0.6);\n        }\n        to {\n          opacity: 1;\n          transform: scale(1);\n        }\n      }\n\n      .d-kbd {\n        position: relative;\n        padding: 0.25em 0.4em;\n        font-size: 11px;\n        font-family: ui-monospace, monospace;\n        line-height: 1;\n        letter-spacing: -0.025em;\n        background-color: canvas;\n        color: canvastext;\n        filter: invert(90%);\n        border: none;\n        border-bottom: 2px solid hsl(from canvastext h s l / calc(alpha * 0.5));\n        border-radius: 0.25rem;\n        box-shadow: 0 0 2px hsla(0,0%,0%,0.10);\n        user-select: none;\n        -webkit-user-select: none;\n      }\n    `),this.el.adoptedStyleSheets=[s];const a=document.createElement("div");a.className="d-wrapper";const r=document.createElement("button");r.className="d-button",r.setAttribute("aria-label","Toggle theme"),r.addEventListener("click",()=>this._host.toggleTheme());const l=document.createElement("span");l.className="d-icon",r.appendChild(l);const d=null===(t=this.options.position)||void 0===t?void 0:t.includes("left");if(this.options.shortcut){const t=document.createElement("kbd");t.className="d-kbd",t.textContent=this.options.shortcut,d?(a.appendChild(r),a.appendChild(t)):(a.appendChild(t),a.appendChild(r))}else a.appendChild(r);return this.el.appendChild(a),document.body.appendChild(n),this.onThemeChange(this._host.getCurrentTheme()),this.el}onThemeChange(t){var e,n;const o=null===(e=this.el)||void 0===e?void 0:e.querySelector("button.d-button"),i=null===(n=this.el)||void 0===n?void 0:n.querySelector("span.d-icon");o&&i&&(o.className=`d-button ${t}`,i.textContent="light"===t?"🌞":"🌚")}onDestroy(){this.el&&this.el.host&&this.el.host.remove()}getPositionVars(){return{"top-left":"--pos-top:var(--margin);--pos-right:auto;--pos-bottom:auto;--pos-left:var(--margin);","top-right":"--pos-top:var(--margin);--pos-right:var(--margin);--pos-bottom:auto;--pos-left:auto;","bottom-left":"--pos-top:auto;--pos-right:auto;--pos-bottom:calc(var(--margin)*2);--pos-left:var(--margin);","bottom-right":"--pos-top:auto;--pos-right:var(--margin);--pos-bottom:calc(var(--margin)*2);--pos-left:auto;"}[this.options.position]}getSizeVar(){return{small:"--size:36px;",medium:"--size:56px;",large:"--size:72px;"}[this.options.size]}}e.pluginId="d-widget";t.KeyboardShortcut=class{constructor(t,e){var n,o,i,s;this.handleKeyDown=t=>{"body"===this.options.target&&this.isTyping(t)||("input"!==this.options.target||this.isTyping(t))&&this.matches(t)&&(t.preventDefault(),this._host.toggleTheme())},this._host=t,this.options={key:null!==(n=null==e?void 0:e.key)&&void 0!==n?n:"d",ctrl:null!==(o=null==e?void 0:e.ctrl)&&void 0!==o&&o,shift:null!==(i=null==e?void 0:e.shift)&&void 0!==i&&i,target:null!==(s=null==e?void 0:e.target)&&void 0!==s?s:"body"}}render(){document.addEventListener("keydown",this.handleKeyDown)}onDestroy(){document.removeEventListener("keydown",this.handleKeyDown)}matches(t){return t.key.toLowerCase()===this.options.key.toLowerCase()&&(!this.options.ctrl||t.ctrlKey||t.metaKey)&&(!this.options.shift||t.shiftKey)&&(this.options.ctrl||!t.ctrlKey&&!t.metaKey&&!t.altKey)}isTyping(t){const e=t.target,n=e.tagName.toLowerCase();return e.isContentEditable||"input"===n||"textarea"===n}},t.ThemeWidget=e});

package/package.json

@@ -1,11 +1,23 @@
 {
   "name": "darkify-js",
-  "version": "1.1.12",
+  "version": "1.1.13-beta.0",
   "description": "A simple dark mode toggle library",
   "type": "module",
   "main": "dist/darkify.umd.js",
   "module": "dist/darkify.esm.js",
   "types": "dist/darkify.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/darkify.esm.js",
+      "require": "./dist/darkify.umd.js",
+      "types": "./dist/darkify.d.ts"
+    },
+    "./plugins": {
+      "import": "./dist/plugins/index.mjs",
+      "require": "./dist/plugins/index.umd.js",
+      "types": "./dist/plugins/index.d.ts"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -14,7 +26,8 @@
     "_bundle": "rollup -c rollup.config.ts --configPlugin typescript",
     "build": "npm run _cls && npm run _bundle",
     "format": "prettier --write src/",
-    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest"
+    "test": "NODE_OPTIONS=\"$NODE_OPTIONS --experimental-vm-modules\" jest",
+    "prepublishOnly": "npm run test && npm run build"
   },
   "repository": {
     "type": "git",
@@ -33,15 +46,15 @@
   "author": "Emilio Romero <emrocode@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@types/jest": "^30.0.0",
-    "jest": "^30.2.0",
-    "jest-environment-jsdom": "^30.2.0",
+    "jest": "^30.3.0",
+    "jest-environment-jsdom": "^30.3.0",
     "prettier": "^3.8.1",
-    "rollup": "^4.57.1",
+    "rollup": "^4.59.0",
     "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-dts": "^6.4.0",
     "ts-jest": "^29.4.6",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",