@sonny-ui/core 0.1.0-alpha.11 → 0.1.0-alpha.12

package/fesm2022/sonny-ui-core.mjs

@@ -3,7 +3,7 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 export { cva } from 'class-variance-authority';
 import * as i0 from '@angular/core';
-import { InjectionToken, makeEnvironmentProviders, inject, PLATFORM_ID, signal, computed, Injectable, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, effect, forwardRef, HostListener, Injector, afterNextRender, Renderer2, output, contentChildren } from '@angular/core';
+import { inject, PLATFORM_ID, signal, computed, Injectable, InjectionToken, makeEnvironmentProviders, provideEnvironmentInitializer, input, Directive, ChangeDetectionStrategy, Component, ElementRef, model, viewChild, effect, forwardRef, HostListener, Injector, afterNextRender, Renderer2, output, contentChildren } from '@angular/core';
 import { DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { Dialog, DialogRef } from '@angular/cdk/dialog';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -13,27 +13,22 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
-const DEFAULT_CONFIG = { prefix: 'sny', defaultTheme: 'light' };
-const SNY_CONFIG = new InjectionToken('SNY_CONFIG', {
-    providedIn: 'root',
-    factory: () => DEFAULT_CONFIG,
-});
-function provideSonnyUI(config = {}) {
-    return makeEnvironmentProviders([
-        { provide: SNY_CONFIG, useValue: { ...DEFAULT_CONFIG, ...config } },
-    ]);
-}
-
+const STORAGE_KEY = 'sny-theme';
 class ThemeService {
     document = inject(DOCUMENT);
     isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    config = inject(SNY_CONFIG);
     _theme = signal('light', ...(ngDevMode ? [{ debugName: "_theme" }] : /* istanbul ignore next */ []));
     theme = this._theme.asReadonly();
     isDark = computed(() => this._theme() === 'dark', ...(ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.setTheme(this.resolveInitialTheme());
+    }
     setTheme(theme) {
         this._theme.set(theme);
         if (!this.isBrowser)
             return;
+        localStorage.setItem(STORAGE_KEY, theme);
         const root = this.document.documentElement;
         root.classList.remove('dark');
         root.removeAttribute('data-theme');
@@ -48,13 +43,40 @@ class ThemeService {
     toggleDark() {
         this.setTheme(this._theme() === 'dark' ? 'light' : 'dark');
     }
+    resolveInitialTheme() {
+        if (this.isBrowser) {
+            const stored = localStorage.getItem(STORAGE_KEY);
+            if (stored)
+                return stored;
+        }
+        const defaultTheme = this.config.defaultTheme ?? 'light';
+        if (defaultTheme === 'system') {
+            if (this.isBrowser && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                return 'dark';
+            }
+            return 'light';
+        }
+        return defaultTheme;
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [] });
+
+const DEFAULT_CONFIG = { prefix: 'sny', defaultTheme: 'light' };
+const SNY_CONFIG = new InjectionToken('SNY_CONFIG', {
+    providedIn: 'root',
+    factory: () => DEFAULT_CONFIG,
+});
+function provideSonnyUI(config = {}) {
+    return makeEnvironmentProviders([
+        { provide: SNY_CONFIG, useValue: { ...DEFAULT_CONFIG, ...config } },
+        provideEnvironmentInitializer(() => inject(ThemeService)),
+    ]);
+}
 
 const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {