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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonny-ui/core",
-  "version": "0.1.0-alpha.12",
+  "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-generate/component/index.js

@@ -393,12 +393,12 @@ function generateComponent(options) {
         // Ensure cn.ts utility exists
         const cnTargetPath = `${targetDir}/utils/cn.ts`;
         if (!tree.exists(cnTargetPath)) {
-            const cnContent = `import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}
+            const cnContent = `import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
 `;
             tree.create(cnTargetPath, cnContent);
             context.logger.info('Created utils/cn.ts');

package/schematics/ng-generate/component/schema.json

@@ -1,32 +1,32 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "$id": "SonnyUIGenerateComponentSchema",
-  "title": "SonnyUI component generator (copy-paste style)",
-  "type": "object",
-  "properties": {
-    "name": {
-      "type": "string",
-      "description": "The component to copy (accordion, alert, avatar, badge, breadcrumb, button, button-group, calendar, card, carousel, chat-bubble, checkbox, combobox, diff, divider, dock, drawer, dropdown, fab, fieldset, file-input, indicator, input, kbd, link, list, loader, modal, navbar, pagination, progress, radial-progress, radio, rating, select, sheet, skeleton, slider, stat, status, steps, switch, table, tabs, textarea, timeline, toast, toggle, tooltip, validator).",
-      "$default": {
-        "$source": "argv",
-        "index": 0
-      }
-    },
-    "path": {
-      "type": "string",
-      "default": "src/app/ui",
-      "description": "The path to copy the component into."
-    },
-    "prefix": {
-      "type": "string",
-      "default": "sny",
-      "description": "The prefix to use for selectors."
-    },
-    "skipTests": {
-      "type": "boolean",
-      "default": false,
-      "description": "Skip copying test files."
-    }
-  },
-  "required": ["name"]
-}
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "SonnyUIGenerateComponentSchema",
+  "title": "SonnyUI component generator (copy-paste style)",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "The component to copy (accordion, alert, avatar, badge, breadcrumb, button, button-group, calendar, card, carousel, chat-bubble, checkbox, combobox, diff, divider, dock, drawer, dropdown, fab, fieldset, file-input, indicator, input, kbd, link, list, loader, modal, navbar, pagination, progress, radial-progress, radio, rating, select, sheet, skeleton, slider, stat, status, steps, switch, table, tabs, textarea, timeline, toast, toggle, tooltip, validator).",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "path": {
+      "type": "string",
+      "default": "src/app/ui",
+      "description": "The path to copy the component into."
+    },
+    "prefix": {
+      "type": "string",
+      "default": "sny",
+      "description": "The prefix to use for selectors."
+    },
+    "skipTests": {
+      "type": "boolean",
+      "default": false,
+      "description": "Skip copying test files."
+    }
+  },
+  "required": ["name"]
+}

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

@@ -412,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;
@@ -479,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>;
@@ -507,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;
@@ -539,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;
@@ -639,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;
@@ -983,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;
@@ -1050,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;
@@ -1562,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;