@sonny-ui/core 0.1.0-alpha.16 → 0.1.0-alpha.18

package/src/lib/dock/dock.directives.ts

@@ -5,7 +5,6 @@ export type DockPosition = 'bottom' | 'top';
 
 @Directive({
   selector: '[snyDock]',
-  standalone: true,
   host: {
     'role': 'toolbar',
     'aria-label': 'Dock',
@@ -63,7 +62,6 @@ export class SnyDockDirective {
 
 @Directive({
   selector: '[snyDockItem]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.tabindex]': 'active() ? 0 : -1',

package/src/lib/drawer/drawer.directives.ts

@@ -5,7 +5,6 @@ export const SNY_DRAWER = new InjectionToken<SnyDrawerLayoutComponent>('SnyDrawe
 
 @Component({
   selector: '[snyDrawerLayout]',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'snyDrawerLayout',
   providers: [{ provide: SNY_DRAWER, useExisting: SnyDrawerLayoutComponent }],
@@ -41,7 +40,6 @@ export const SnyDrawerLayoutDirective = SnyDrawerLayoutComponent;
 
 @Directive({
   selector: '[snyDrawerContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },
@@ -57,7 +55,6 @@ export type DrawerSide = 'left' | 'right';
 
 @Directive({
   selector: '[snyDrawerSide]',
-  standalone: true,
   host: {
     'role': 'navigation',
     'aria-label': 'Sidebar navigation',

package/src/lib/dropdown/dropdown.directives.ts

@@ -1,4 +1,4 @@
-import { Directive, ElementRef, HostListener, InjectionToken, computed, inject, input, signal } from '@angular/core';
+import { Directive, ElementRef, InjectionToken, computed, inject, input, signal } from '@angular/core';
 import { cn } from '../core/utils/cn';
 import {
   dropdownContentVariants,
@@ -10,11 +10,12 @@ export const SNY_DROPDOWN = new InjectionToken<SnyDropdownDirective>('SnyDropdow
 
 @Directive({
   selector: '[snyDropdown]',
-  standalone: true,
   exportAs: 'snyDropdown',
   providers: [{ provide: SNY_DROPDOWN, useExisting: SnyDropdownDirective }],
   host: {
     '[class]': '"relative inline-block"',
+    '(document:click)': 'onDocumentClick($event)',
+    '(keydown.escape)': 'onEscape()',
   },
 })
 export class SnyDropdownDirective {
@@ -25,14 +26,12 @@ export class SnyDropdownDirective {
   open(): void { this.isOpen.set(true); }
   close(): void { this.isOpen.set(false); }
 
-  @HostListener('document:click', ['$event'])
   onDocumentClick(event: MouseEvent): void {
     if (!this.elementRef.nativeElement.contains(event.target)) {
       this.close();
     }
   }
 
-  @HostListener('keydown.escape')
   onEscape(): void {
     this.close();
   }
@@ -40,7 +39,6 @@ export class SnyDropdownDirective {
 
 @Directive({
   selector: '[snyDropdownTrigger]',
-  standalone: true,
   host: {
     '(click)': 'dropdown.toggle()',
     '[attr.aria-expanded]': 'dropdown.isOpen()',
@@ -53,7 +51,6 @@ export class SnyDropdownTriggerDirective {
 
 @Directive({
   selector: '[snyDropdownContent]',
-  standalone: true,
   host: {
     'role': 'menu',
     '[class]': 'computedClass()',
@@ -75,7 +72,6 @@ export class SnyDropdownContentDirective {
 
 @Directive({
   selector: '[snyMenuContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },
@@ -90,7 +86,6 @@ export class SnyMenuContentDirective {
 
 @Directive({
   selector: '[snyMenuItem]',
-  standalone: true,
   host: {
     'role': 'menuitem',
     '[class]': 'computedClass()',
@@ -113,7 +108,6 @@ export class SnyMenuItemDirective {
 
 @Directive({
   selector: '[snyMenuSeparator]',
-  standalone: true,
   host: {
     'role': 'separator',
     '[class]': 'computedClass()',
@@ -129,7 +123,6 @@ export class SnyMenuSeparatorDirective {
 
 @Directive({
   selector: '[snyMenuLabel]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

package/src/lib/fab/fab.directives.ts

@@ -14,7 +14,6 @@ const positionMap: Record<FabPosition, string> = {
 
 @Directive({
   selector: '[snyFab]',
-  standalone: true,
   exportAs: 'snyFab',
   providers: [{ provide: SNY_FAB, useExisting: SnyFabDirective }],
   host: { '[class]': 'computedClass()' },
@@ -36,7 +35,6 @@ export class SnyFabDirective {
 
 @Directive({
   selector: '[snyFabTrigger]',
-  standalone: true,
   host: {
     '(click)': 'fab.toggle()',
     '[attr.aria-expanded]': 'fab.isOpen()',
@@ -59,7 +57,6 @@ export class SnyFabTriggerDirective {
 
 @Directive({
   selector: '[snyFabAction]',
-  standalone: true,
   host: {
     'role': 'menuitem',
     '[attr.aria-label]': 'ariaLabel() || null',

package/src/lib/fieldset/fieldset.directives.ts

@@ -4,7 +4,6 @@ import { fieldsetVariants, type FieldsetVariant } from './fieldset.variants';
 
 @Directive({
   selector: 'fieldset[snyFieldset]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.disabled]': 'disabled() || null',
@@ -23,7 +22,6 @@ export class SnyFieldsetDirective {
 
 @Directive({
   selector: 'legend[snyFieldsetLegend]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },
@@ -38,7 +36,6 @@ export class SnyFieldsetLegendDirective {
 
 @Directive({
   selector: '[snyFieldsetContent]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

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

@@ -20,7 +20,6 @@ import {
 
 @Component({
   selector: 'sny-file-input',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': '"w-full"',

package/src/lib/indicator/indicator.directives.ts

@@ -26,7 +26,6 @@ const variantMap: Record<IndicatorVariant, string> = {
 
 @Directive({
   selector: '[snyIndicator]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyIndicatorDirective {
@@ -38,7 +37,6 @@ export class SnyIndicatorDirective {
 
 @Directive({
   selector: '[snyIndicatorBadge]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-label]': 'ariaLabel() || null',

package/src/lib/input/input.directive.ts

@@ -4,7 +4,6 @@ import { inputVariants, type InputVariant, type InputSize } from './input.varian
 
 @Directive({
   selector: 'input[snyInput], textarea[snyInput]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '[attr.aria-invalid]': 'variant() === "error" || null',

package/src/lib/input/label.directive.ts

@@ -4,7 +4,6 @@ import { labelVariants, type InputVariant } from './input.variants';
 
 @Directive({
   selector: 'label[snyLabel]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyLabelDirective {

package/src/lib/kbd/kbd.directive.ts

@@ -4,7 +4,6 @@ import { kbdVariants, type KbdSize } from './kbd.variants';
 
 @Directive({
   selector: 'kbd[snyKbd]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

package/src/lib/link/link.directive.ts

@@ -4,7 +4,6 @@ import { linkVariants, type LinkVariant } from './link.variants';
 
 @Directive({
   selector: 'a[snyLink]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
   },

package/src/lib/list/list.directives.ts

@@ -5,7 +5,6 @@ export type ListVariant = 'default' | 'bordered' | 'hover';
 
 @Directive({
   selector: '[snyList]',
-  standalone: true,
   host: {
     'role': 'list',
     '[class]': 'computedClass()',
@@ -27,7 +26,6 @@ export class SnyListDirective {
 
 @Directive({
   selector: '[snyListItem]',
-  standalone: true,
   host: {
     'role': 'listitem',
     '[class]': 'computedClass()',
@@ -51,7 +49,6 @@ export class SnyListItemDirective {
 
 @Directive({
   selector: '[snyListItemIcon]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyListItemIconDirective {
@@ -63,7 +60,6 @@ export class SnyListItemIconDirective {
 
 @Directive({
   selector: '[snyListItemContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyListItemContentDirective {
@@ -75,7 +71,6 @@ export class SnyListItemContentDirective {
 
 @Directive({
   selector: '[snyListItemAction]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyListItemActionDirective {

package/src/lib/loader/loader.component.ts

@@ -4,7 +4,6 @@ import { loaderVariants, type LoaderSize, type LoaderVariant } from './loader.va
 
 @Component({
   selector: 'sny-loader',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class]': 'computedClass()',

package/src/lib/modal/dialog.directives.ts

@@ -4,7 +4,6 @@ import { cn } from '../core/utils/cn';
 
 @Directive({
   selector: '[snyDialogHeader]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogHeaderDirective {
@@ -16,7 +15,6 @@ export class SnyDialogHeaderDirective {
 
 @Directive({
   selector: '[snyDialogTitle]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogTitleDirective {
@@ -28,7 +26,6 @@ export class SnyDialogTitleDirective {
 
 @Directive({
   selector: '[snyDialogDescription]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogDescriptionDirective {
@@ -40,7 +37,6 @@ export class SnyDialogDescriptionDirective {
 
 @Directive({
   selector: '[snyDialogContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogContentDirective {
@@ -55,7 +51,6 @@ export class SnyDialogContentDirective {
 
 @Directive({
   selector: '[snyDialogFooter]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyDialogFooterDirective {
@@ -67,7 +62,6 @@ export class SnyDialogFooterDirective {
 
 @Directive({
   selector: '[snyDialogClose]',
-  standalone: true,
   host: {
     '[class]': 'computedClass()',
     '(click)': 'onClick()',

package/src/lib/navbar/navbar.directives.ts

@@ -5,7 +5,6 @@ export type NavbarVariant = 'default' | 'bordered' | 'floating';
 
 @Directive({
   selector: '[snyNavbar]',
-  standalone: true,
   host: {
     'role': 'navigation',
     '[attr.aria-label]': 'ariaLabel()',
@@ -32,7 +31,6 @@ export class SnyNavbarDirective {
 
 @Directive({
   selector: '[snyNavbarBrand]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyNavbarBrandDirective {
@@ -42,7 +40,6 @@ export class SnyNavbarBrandDirective {
 
 @Directive({
   selector: '[snyNavbarContent]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyNavbarContentDirective {
@@ -52,7 +49,6 @@ export class SnyNavbarContentDirective {
 
 @Directive({
   selector: '[snyNavbarEnd]',
-  standalone: true,
   host: { '[class]': 'computedClass()' },
 })
 export class SnyNavbarEndDirective {

package/src/lib/number-input/index.ts

@@ -0,0 +1,2 @@
+export { SnyNumberInputComponent } from './number-input.component';
+export { numberInputVariants, type NumberInputSize } from './number-input.variants';

package/src/lib/number-input/number-input.component.spec.ts

@@ -0,0 +1,151 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyNumberInputComponent } from './number-input.component';
+
+@Component({
+  standalone: true,
+  imports: [SnyNumberInputComponent],
+  template: `
+    <sny-number-input
+      [(value)]="num"
+      [min]="min()"
+      [max]="max()"
+      [step]="step()"
+      [disabled]="disabled()"
+    />
+  `,
+})
+class TestHost {
+  num = signal(5);
+  min = signal<number | null>(null);
+  max = signal<number | null>(null);
+  step = signal(1);
+  disabled = signal(false);
+}
+
+describe('SnyNumberInputComponent', () => {
+  let fixture: ComponentFixture<TestHost>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHost] }).compileComponents();
+    fixture = TestBed.createComponent(TestHost);
+    fixture.detectChanges();
+    el = fixture.nativeElement;
+  });
+
+  function getInput(): HTMLInputElement {
+    return el.querySelector('input') as HTMLInputElement;
+  }
+  function getButtons(): HTMLButtonElement[] {
+    return Array.from(el.querySelectorAll('button'));
+  }
+
+  it('should render with initial value', () => {
+    expect(getInput().value).toBe('5');
+  });
+
+  it('should increment on + click', () => {
+    getButtons()[1].click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.num()).toBe(6);
+  });
+
+  it('should decrement on - click', () => {
+    getButtons()[0].click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.num()).toBe(4);
+  });
+
+  it('should respect min', () => {
+    fixture.componentInstance.min.set(5);
+    fixture.detectChanges();
+    getButtons()[0].click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.num()).toBe(5);
+  });
+
+  it('should respect max', () => {
+    fixture.componentInstance.max.set(5);
+    fixture.detectChanges();
+    getButtons()[1].click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.num()).toBe(5);
+  });
+
+  it('should use step', () => {
+    fixture.componentInstance.step.set(10);
+    fixture.detectChanges();
+    getButtons()[1].click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.num()).toBe(15); // 5 + 10
+  });
+
+  it('should handle manual input on blur', () => {
+    const input = getInput();
+    input.value = '42';
+    input.dispatchEvent(new Event('input'));
+    input.dispatchEvent(new Event('blur'));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.num()).toBe(42);
+  });
+
+  it('should revert invalid input on blur', () => {
+    const input = getInput();
+    input.value = 'abc';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    input.dispatchEvent(new Event('blur', { bubbles: true }));
+    fixture.detectChanges();
+    // Value should remain unchanged at 5
+    expect(fixture.componentInstance.num()).toBe(5);
+  });
+
+  it('should handle ArrowUp/Down', () => {
+    const input = getInput();
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.num()).toBe(6);
+    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    expect(fixture.componentInstance.num()).toBe(5);
+  });
+
+  it('should disable when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(getInput().disabled).toBe(true);
+    expect(getButtons().every(b => b.disabled)).toBe(true);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyNumberInputComponent],
+  template: `<sny-number-input [formControl]="ctrl" />`,
+})
+class ReactiveHost {
+  ctrl = new FormControl(10);
+}
+
+describe('SnyNumberInputComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveHost>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [ReactiveHost] }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveHost);
+    fixture.detectChanges();
+  });
+
+  it('should display FormControl value', () => {
+    const input = fixture.nativeElement.querySelector('input') as HTMLInputElement;
+    expect(input.value).toBe('10');
+  });
+
+  it('should update FormControl on increment', () => {
+    const buttons = fixture.nativeElement.querySelectorAll('button');
+    buttons[1].click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toBe(11);
+  });
+});

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

@@ -0,0 +1,152 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  input,
+  model,
+  signal,
+  untracked,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { numberInputVariants, type NumberInputSize } from './number-input.variants';
+
+@Component({
+  selector: 'sny-number-input',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyNumberInputComponent), multi: true },
+  ],
+  template: `
+    <div [class]="containerClass()">
+      <button
+        type="button"
+        class="px-2.5 hover:bg-accent transition-colors border-r border-border disabled:opacity-40 disabled:cursor-not-allowed"
+        [disabled]="isDisabled() || atMin()"
+        (click)="decrement()"
+        aria-label="Decrease"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/></svg>
+      </button>
+      <input
+        #inputEl
+        type="text"
+        inputmode="decimal"
+        class="flex-1 w-14 text-center outline-none bg-transparent font-medium"
+        [value]="inputValue()"
+        [disabled]="isDisabled()"
+        [placeholder]="placeholder()"
+        [attr.aria-label]="'Number input'"
+        [attr.aria-valuemin]="min() ?? null"
+        [attr.aria-valuemax]="max() ?? null"
+        [attr.aria-valuenow]="value()"
+        role="spinbutton"
+        (input)="onInput($event)"
+        (blur)="commitValue()"
+        (keydown)="onKeydown($event)"
+      />
+      <button
+        type="button"
+        class="px-2.5 hover:bg-accent transition-colors border-l border-border disabled:opacity-40 disabled:cursor-not-allowed"
+        [disabled]="isDisabled() || atMax()"
+        (click)="increment()"
+        aria-label="Increase"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
+      </button>
+    </div>
+  `,
+})
+export class SnyNumberInputComponent implements ControlValueAccessor {
+  readonly value = model(0);
+  readonly min = input<number | null>(null);
+  readonly max = input<number | null>(null);
+  readonly step = input(1);
+  readonly disabled = input(false);
+  readonly size = input<NumberInputSize>('md');
+  readonly placeholder = input('');
+  readonly class = input<string>('');
+
+  readonly inputValue = signal('0');
+  private readonly _disabledByCva = signal(false);
+  readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+
+  readonly atMin = computed(() => this.min() !== null && this.value() <= this.min()!);
+  readonly atMax = computed(() => this.max() !== null && this.value() >= this.max()!);
+
+  readonly containerClass = computed(() =>
+    cn(numberInputVariants({ size: this.size() }), this.isDisabled() && 'opacity-50', this.class())
+  );
+
+  private _onChange: (value: number) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  constructor() {
+    effect(() => {
+      const val = this.value();
+      untracked(() => this.inputValue.set(String(val)));
+    });
+  }
+
+  writeValue(val: number): void {
+    this.value.set(val ?? 0);
+  }
+
+  registerOnChange(fn: (value: number) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  increment(): void {
+    this.setValue(this.value() + this.step());
+  }
+
+  decrement(): void {
+    this.setValue(this.value() - this.step());
+  }
+
+  onInput(event: Event): void {
+    this.inputValue.set((event.target as HTMLInputElement).value);
+  }
+
+  commitValue(): void {
+    const parsed = parseFloat(this.inputValue());
+    if (isNaN(parsed)) {
+      this.inputValue.set(String(this.value()));
+    } else {
+      this.setValue(parsed);
+    }
+    this._onTouched();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault();
+        this.increment();
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.decrement();
+        break;
+    }
+  }
+
+  private setValue(raw: number): void {
+    let clamped = raw;
+    if (this.min() !== null) clamped = Math.max(this.min()!, clamped);
+    if (this.max() !== null) clamped = Math.min(this.max()!, clamped);
+    const rounded = parseFloat(clamped.toFixed(10));
+    this.value.set(rounded);
+    this._onChange(rounded);
+  }
+}

package/src/lib/number-input/number-input.variants.ts

@@ -0,0 +1,17 @@
+import { cva } from 'class-variance-authority';
+
+export const numberInputVariants = cva(
+  'inline-flex items-center border border-border rounded-md bg-background transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2',
+  {
+    variants: {
+      size: {
+        sm: 'h-9 text-xs',
+        md: 'h-10 text-sm',
+        lg: 'h-11 text-base',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+);
+
+export type NumberInputSize = 'sm' | 'md' | 'lg';

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

@@ -20,7 +20,6 @@ import { otpCellVariants, type OtpInputSize, type OtpInputType } from './otp-inp
 
 @Component({
   selector: 'sny-otp-input',
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
     { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyOtpInputComponent), multi: true },