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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonny-ui/core",
-  "version": "0.1.0-alpha.11",
+  "version": "0.1.0-alpha.13",
   "description": "Angular UI component library inspired by shadcn/ui — signals, zoneless, Tailwind CSS v4",
   "peerDependencies": {
     "@angular/common": "^21.0.0",

package/schematics/ng-add/index.js

@@ -21,6 +21,33 @@ function ngAdd(options) {
                 context.logger.info('Added SonnyUI theme import to styles.css');
             }
         }
+        // Add provideSonnyUI to app.config.ts
+        const configPath = 'src/app/app.config.ts';
+        if (tree.exists(configPath)) {
+            let configContent = tree.read(configPath).toString('utf-8');
+            const theme = options.theme || 'light';
+            if (!configContent.includes('provideSonnyUI')) {
+                // Add import statement
+                const importLine = `import { provideSonnyUI } from '@sonny-ui/core';\n`;
+                const lastImportIndex = configContent.lastIndexOf('import ');
+                const lastImportEnd = configContent.indexOf('\n', lastImportIndex);
+                configContent =
+                    configContent.slice(0, lastImportEnd + 1) +
+                        importLine +
+                        configContent.slice(lastImportEnd + 1);
+                // Add provider to providers array
+                const providersMatch = configContent.match(/providers\s*:\s*\[/);
+                if (providersMatch && providersMatch.index !== undefined) {
+                    const insertPos = providersMatch.index + providersMatch[0].length;
+                    configContent =
+                        configContent.slice(0, insertPos) +
+                            `\n    provideSonnyUI({ defaultTheme: '${theme}' }),` +
+                            configContent.slice(insertPos);
+                }
+                tree.overwrite(configPath, configContent);
+                context.logger.info('Added provideSonnyUI to app.config.ts');
+            }
+        }
         return tree;
     };
 }

package/src/lib/button/button.directive.ts

@@ -22,7 +22,7 @@ export class SnyButtonDirective {
   protected readonly computedClass = computed(() =>
     cn(
       buttonVariants({ variant: this.variant(), size: this.size() }),
-      this.loading() && 'relative cursor-wait',
+      this.loading() && 'cursor-wait opacity-70',
       this.class()
     )
   );

package/src/lib/calendar/calendar.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, effect, forwardRef, input, model, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, model, signal } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { cn } from '../core/utils/cn';
 
@@ -74,21 +74,8 @@ export class SnyCalendarComponent implements ControlValueAccessor {
 
   private _onChange: (value: Date | null) => void = () => {};
   protected onTouched: () => void = () => {};
-  private _writing = false;
-
-  constructor() {
-    effect(() => {
-      const val = this.value();
-      if (this._writing) {
-        this._writing = false;
-        return;
-      }
-      this._onChange(val);
-    });
-  }
 
   writeValue(val: Date | null): void {
-    this._writing = true;
     this.value.set(val ?? null);
     if (val) {
       this.viewDate.set(new Date(val.getFullYear(), val.getMonth(), 1));
@@ -160,6 +147,7 @@ export class SnyCalendarComponent implements ControlValueAccessor {
 
   selectDate(date: Date): void {
     this.value.set(date);
+    this._onChange(date);
     this.onTouched();
   }
 
@@ -201,6 +189,7 @@ export class SnyCalendarComponent implements ControlValueAccessor {
     const next = new Date(current);
     next.setDate(next.getDate() + offset);
     this.value.set(next);
+    this._onChange(next);
     this.viewDate.set(new Date(next.getFullYear(), next.getMonth(), 1));
   }
 

package/src/lib/combobox/combobox.component.ts

@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  effect,
   ElementRef,
   forwardRef,
   HostListener,
@@ -72,7 +71,7 @@ export interface ComboboxOption {
 
         <!-- Options list -->
         @if (filtered().length > 0) {
-          <ul role="listbox" class="max-h-60 overflow-auto p-1">
+          <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
             @for (opt of filtered(); track opt.value; let i = $index) {
               <li
                 role="option"
@@ -122,21 +121,8 @@ export class SnyComboboxComponent implements ControlValueAccessor, OnDestroy {
 
   private _onChange: (value: string) => void = () => {};
   protected onTouched: () => void = () => {};
-  private _writing = false;
-
-  constructor() {
-    effect(() => {
-      const val = this.value();
-      if (this._writing) {
-        this._writing = false;
-        return;
-      }
-      this._onChange(val);
-    });
-  }
 
   writeValue(val: string): void {
-    this._writing = true;
     this.value.set(val ?? '');
   }
 
@@ -244,6 +230,7 @@ export class SnyComboboxComponent implements ControlValueAccessor, OnDestroy {
 
   select(opt: ComboboxOption): void {
     this.value.set(opt.value);
+    this._onChange(opt.value);
     this.close();
   }
 

package/src/lib/file-input/file-input.component.ts

@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  effect,
   forwardRef,
   input,
   model,
@@ -74,21 +73,8 @@ export class SnyFileInputComponent implements ControlValueAccessor {
 
   private _onChange: (value: FileList | null) => void = () => {};
   protected onTouched: () => void = () => {};
-  private _writing = false;
-
-  constructor() {
-    effect(() => {
-      const val = this.value();
-      if (this._writing) {
-        this._writing = false;
-        return;
-      }
-      this._onChange(val);
-    });
-  }
 
   writeValue(val: FileList | null): void {
-    this._writing = true;
     this.value.set(val ?? null);
   }
 
@@ -148,6 +134,7 @@ export class SnyFileInputComponent implements ControlValueAccessor {
 
   clear(): void {
     this.value.set(null);
+    this._onChange(null);
     const inputEl = this.fileInputRef()?.nativeElement;
     if (inputEl) inputEl.value = '';
   }
@@ -163,6 +150,7 @@ export class SnyFileInputComponent implements ControlValueAccessor {
       }
     }
     this.value.set(files);
+    this._onChange(files);
     this.fileChange.emit(files);
   }
 }

package/src/lib/rating/rating.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, effect, forwardRef, input, model, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, model, signal } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { cn } from '../core/utils/cn';
 import { ratingVariants, type RatingSize, type RatingVariant } from './rating.variants';
@@ -62,21 +62,8 @@ export class SnyRatingComponent implements ControlValueAccessor {
 
   private _onChange: (value: number) => void = () => {};
   protected onTouched: () => void = () => {};
-  private _writing = false;
-
-  constructor() {
-    effect(() => {
-      const val = this.value();
-      if (this._writing) {
-        this._writing = false;
-        return;
-      }
-      this._onChange(val);
-    });
-  }
 
   writeValue(val: number): void {
-    this._writing = true;
     this.value.set(val ?? 0);
   }
 
@@ -133,6 +120,7 @@ export class SnyRatingComponent implements ControlValueAccessor {
   onStarClick(index: number): void {
     if (this.isDisabled()) return;
     this.value.set(index);
+    this._onChange(index);
   }
 
   onStarHover(index: number): void {
@@ -147,25 +135,30 @@ export class SnyRatingComponent implements ControlValueAccessor {
   onKeydown(event: KeyboardEvent): void {
     if (this.isDisabled()) return;
     const step = this.half() ? 0.5 : 1;
+    let newVal: number | undefined;
     switch (event.key) {
       case 'ArrowRight':
       case 'ArrowUp':
         event.preventDefault();
-        this.value.update((v) => Math.min(this.max(), v + step));
+        newVal = Math.min(this.max(), this.value() + step);
         break;
       case 'ArrowLeft':
       case 'ArrowDown':
         event.preventDefault();
-        this.value.update((v) => Math.max(0, v - step));
+        newVal = Math.max(0, this.value() - step);
         break;
       case 'Home':
         event.preventDefault();
-        this.value.set(0);
+        newVal = 0;
         break;
       case 'End':
         event.preventDefault();
-        this.value.set(this.max());
+        newVal = this.max();
         break;
     }
+    if (newVal !== undefined) {
+      this.value.set(newVal);
+      this._onChange(newVal);
+    }
   }
 }

package/src/lib/select/select.component.ts

@@ -2,7 +2,6 @@ import {
   ChangeDetectionStrategy,
   Component,
   computed,
-  effect,
   ElementRef,
   forwardRef,
   HostListener,
@@ -56,7 +55,7 @@ export interface SelectOption {
         #dropdownEl
         class="fixed z-50 rounded-sm border border-border bg-popover text-popover-foreground shadow-md"
       >
-        <ul role="listbox" class="max-h-60 overflow-auto p-1">
+        <ul role="listbox" class="max-h-60 overflow-auto p-1 sny-scrollbar">
           @for (opt of options(); track opt.value; let i = $index) {
             <li
               role="option"
@@ -101,21 +100,8 @@ export class SnySelectComponent implements ControlValueAccessor, OnDestroy {
 
   private _onChange: (value: string) => void = () => {};
   protected onTouched: () => void = () => {};
-  private _writing = false;
-
-  constructor() {
-    effect(() => {
-      const val = this.value();
-      if (this._writing) {
-        this._writing = false;
-        return;
-      }
-      this._onChange(val);
-    });
-  }
 
   writeValue(val: string): void {
-    this._writing = true;
     this.value.set(val ?? '');
   }
 
@@ -207,6 +193,7 @@ export class SnySelectComponent implements ControlValueAccessor, OnDestroy {
 
   select(opt: SelectOption): void {
     this.value.set(opt.value);
+    this._onChange(opt.value);
     this.close();
   }
 

package/src/lib/slider/slider.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, forwardRef, input, model, OnDestroy, signal, viewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, ElementRef, forwardRef, input, model, OnDestroy, signal, viewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { cn } from '../core/utils/cn';
 import { sliderTrackVariants, sliderThumbSize, type SliderSize } from './slider.variants';
@@ -55,21 +55,8 @@ export class SnySliderComponent implements ControlValueAccessor, OnDestroy {
 
   private _onChange: (value: number) => void = () => {};
   protected onTouched: () => void = () => {};
-  private _writing = false;
-
-  constructor() {
-    effect(() => {
-      const val = this.value();
-      if (this._writing) {
-        this._writing = false;
-        return;
-      }
-      this._onChange(val);
-    });
-  }
 
   writeValue(val: number): void {
-    this._writing = true;
     this.value.set(val ?? 0);
   }
 
@@ -110,7 +97,9 @@ export class SnySliderComponent implements ControlValueAccessor, OnDestroy {
     const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
     const raw = this.min() + percent * (this.max() - this.min());
     const stepped = Math.round(raw / this.step()) * this.step();
-    this.value.set(Math.max(this.min(), Math.min(this.max(), stepped)));
+    const clamped = Math.max(this.min(), Math.min(this.max(), stepped));
+    this.value.set(clamped);
+    this._onChange(clamped);
   }
 
   onTrackMousedown(event: MouseEvent): void {
@@ -147,26 +136,31 @@ export class SnySliderComponent implements ControlValueAccessor, OnDestroy {
   onKeydown(event: KeyboardEvent): void {
     if (this.isDisabled()) return;
     const step = this.step();
+    let newVal: number | undefined;
     switch (event.key) {
       case 'ArrowRight':
       case 'ArrowUp':
         event.preventDefault();
-        this.value.set(Math.min(this.max(), this.value() + step));
+        newVal = Math.min(this.max(), this.value() + step);
         break;
       case 'ArrowLeft':
       case 'ArrowDown':
         event.preventDefault();
-        this.value.set(Math.max(this.min(), this.value() - step));
+        newVal = Math.max(this.min(), this.value() - step);
         break;
       case 'Home':
         event.preventDefault();
-        this.value.set(this.min());
+        newVal = this.min();
         break;
       case 'End':
         event.preventDefault();
-        this.value.set(this.max());
+        newVal = this.max();
         break;
     }
+    if (newVal !== undefined) {
+      this.value.set(newVal);
+      this._onChange(newVal);
+    }
   }
 
   private removeListeners(): void {

package/src/lib/switch/switch.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, computed, effect, forwardRef, input, model, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, model, signal } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { cn } from '../core/utils/cn';
 import { switchTrackVariants, switchThumbSize, switchThumbTranslate, type SwitchSize } from './switch.variants';
@@ -18,7 +18,7 @@ import { switchTrackVariants, switchThumbSize, switchThumbTranslate, type Switch
       [attr.aria-checked]="checked()"
       [disabled]="isDisabled()"
       [class]="trackClass()"
-      (click)="checked.set(!checked())"
+      (click)="toggle()"
       (blur)="onTouched()"
     >
       <span [class]="thumbClass()"></span>
@@ -36,21 +36,8 @@ export class SnySwitchComponent implements ControlValueAccessor {
 
   private _onChange: (value: boolean) => void = () => {};
   protected onTouched: () => void = () => {};
-  private _writing = false;
-
-  constructor() {
-    effect(() => {
-      const val = this.checked();
-      if (this._writing) {
-        this._writing = false;
-        return;
-      }
-      this._onChange(val);
-    });
-  }
 
   writeValue(val: boolean): void {
-    this._writing = true;
     this.checked.set(val ?? false);
   }
 
@@ -66,6 +53,12 @@ export class SnySwitchComponent implements ControlValueAccessor {
     this._disabledByCva.set(isDisabled);
   }
 
+  toggle(): void {
+    const newVal = !this.checked();
+    this.checked.set(newVal);
+    this._onChange(newVal);
+  }
+
   protected readonly trackClass = computed(() =>
     cn(
       switchTrackVariants({ size: this.size() }),

package/src/lib/toggle/toggle.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, computed, effect, forwardRef, input, model, signal } from '@angular/core';
+import { Directive, computed, forwardRef, input, model, signal } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { cn } from '../core/utils/cn';
 import { toggleVariants, type ToggleVariant, type ToggleSize } from './toggle.variants';
@@ -28,21 +28,8 @@ export class SnyToggleDirective implements ControlValueAccessor {
 
   private _onChange: (value: boolean) => void = () => {};
   protected onTouched: () => void = () => {};
-  private _writing = false;
-
-  constructor() {
-    effect(() => {
-      const val = this.pressed();
-      if (this._writing) {
-        this._writing = false;
-        return;
-      }
-      this._onChange(val);
-    });
-  }
 
   writeValue(val: boolean): void {
-    this._writing = true;
     this.pressed.set(val ?? false);
   }
 
@@ -60,7 +47,9 @@ export class SnyToggleDirective implements ControlValueAccessor {
 
   protected toggle(): void {
     if (this.isDisabled()) return;
-    this.pressed.set(!this.pressed());
+    const newVal = !this.pressed();
+    this.pressed.set(newVal);
+    this._onChange(newVal);
   }
 
   protected readonly computedClass = computed(() =>

package/src/styles/sonny-theme.css

@@ -17,6 +17,8 @@
   --color-destructive-foreground: var(--sny-destructive-foreground);
   --color-card: var(--sny-card);
   --color-card-foreground: var(--sny-card-foreground);
+  --color-popover: var(--sny-popover);
+  --color-popover-foreground: var(--sny-popover-foreground);
   --color-border: var(--sny-border);
   --color-input: var(--sny-input);
   --color-ring: var(--sny-ring);
@@ -38,6 +40,8 @@
   --sny-destructive-foreground: #fafafa;
   --sny-card: #ffffff;
   --sny-card-foreground: #0a0a0a;
+  --sny-popover: #ffffff;
+  --sny-popover-foreground: #0a0a0a;
   --sny-border: #e5e5e5;
   --sny-input: #e5e5e5;
   --sny-ring: #0a0a0a;
@@ -60,6 +64,8 @@
   --sny-destructive-foreground: #fafafa;
   --sny-card: #0a0a0a;
   --sny-card-foreground: #fafafa;
+  --sny-popover: #171717;
+  --sny-popover-foreground: #fafafa;
   --sny-border: #262626;
   --sny-input: #262626;
   --sny-ring: #d4d4d4;
@@ -80,12 +86,39 @@
   --sny-destructive-foreground: #ffffff;
   --sny-card: #ffffff;
   --sny-card-foreground: #0f172a;
+  --sny-popover: #ffffff;
+  --sny-popover-foreground: #0f172a;
   --sny-border: #cbd5e1;
   --sny-input: #cbd5e1;
   --sny-ring: #3b82f6;
   --sny-radius: 0.375rem;
 }
 
+/* ─── Custom scrollbar ─── */
+
+.sny-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sny-muted-foreground) transparent;
+}
+
+.sny-scrollbar::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.sny-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.sny-scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--sny-muted-foreground);
+  border-radius: 9999px;
+}
+
+.sny-scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: var(--sny-foreground);
+}
+
 /* ─── Dialog / Sheet overlay ─── */
 
 .sny-dialog-backdrop {

package/types/sonny-ui-core.d.ts

@@ -13,7 +13,7 @@ declare function cn(...inputs: ClassValue[]): string;
 
 interface SonnyConfig {
     prefix?: string;
-    defaultTheme?: 'light' | 'dark' | 'corporate';
+    defaultTheme?: 'light' | 'dark' | 'corporate' | 'system';
 }
 declare const SNY_CONFIG: InjectionToken<SonnyConfig>;
 declare function provideSonnyUI(config?: Partial<SonnyConfig>): EnvironmentProviders;
@@ -22,11 +22,14 @@ type Theme = 'light' | 'dark' | 'corporate';
 declare class ThemeService {
     private readonly document;
     private readonly isBrowser;
+    private readonly config;
     private readonly _theme;
     readonly theme: _angular_core.Signal<Theme>;
     readonly isDark: _angular_core.Signal<boolean>;
+    constructor();
     setTheme(theme: Theme): void;
     toggleDark(): void;
+    private resolveInitialTheme;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
 }
@@ -409,8 +412,6 @@ declare class SnyComboboxComponent implements ControlValueAccessor, OnDestroy {
     private resizeHandler;
     private _onChange;
     protected onTouched: () => void;
-    private _writing;
-    constructor();
     writeValue(val: string): void;
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -476,12 +477,11 @@ declare class SnySwitchComponent implements ControlValueAccessor {
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     private _onChange;
     protected onTouched: () => void;
-    private _writing;
-    constructor();
     writeValue(val: boolean): void;
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    toggle(): void;
     protected readonly trackClass: _angular_core.Signal<string>;
     protected readonly thumbClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<SnySwitchComponent, never>;
@@ -504,8 +504,6 @@ declare class SnyToggleDirective implements ControlValueAccessor {
     protected readonly isDisabled: _angular_core.Signal<boolean>;
     private _onChange;
     protected onTouched: () => void;
-    private _writing;
-    constructor();
     writeValue(val: boolean): void;
     registerOnChange(fn: (value: boolean) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -536,8 +534,6 @@ declare class SnySliderComponent implements ControlValueAccessor, OnDestroy {
     private upHandler;
     private _onChange;
     protected onTouched: () => void;
-    private _writing;
-    constructor();
     writeValue(val: number): void;
     registerOnChange(fn: (value: number) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -636,8 +632,6 @@ declare class SnySelectComponent implements ControlValueAccessor, OnDestroy {
     private resizeHandler;
     private _onChange;
     protected onTouched: () => void;
-    private _writing;
-    constructor();
     writeValue(val: string): void;
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -980,8 +974,6 @@ declare class SnyFileInputComponent implements ControlValueAccessor {
     readonly isDragOver: _angular_core.WritableSignal<boolean>;
     private _onChange;
     protected onTouched: () => void;
-    private _writing;
-    constructor();
     writeValue(val: FileList | null): void;
     registerOnChange(fn: (value: FileList | null) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -1047,8 +1039,6 @@ declare class SnyRatingComponent implements ControlValueAccessor {
     readonly hoverValue: _angular_core.WritableSignal<number | null>;
     private _onChange;
     protected onTouched: () => void;
-    private _writing;
-    constructor();
     writeValue(val: number): void;
     registerOnChange(fn: (value: number) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -1559,8 +1549,6 @@ declare class SnyCalendarComponent implements ControlValueAccessor {
     readonly weekDays: string[];
     private _onChange;
     protected onTouched: () => void;
-    private _writing;
-    constructor();
     writeValue(val: Date | null): void;
     registerOnChange(fn: (value: Date | null) => void): void;
     registerOnTouched(fn: () => void): void;