@sonny-ui/core 0.1.0-alpha.15 → 0.1.0-alpha.17

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

@@ -0,0 +1,275 @@
+import {
+  afterNextRender,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  ElementRef,
+  forwardRef,
+  input,
+  linkedSignal,
+  model,
+  output,
+  signal,
+  untracked,
+  viewChildren,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { otpCellVariants, type OtpInputSize, type OtpInputType } from './otp-input.variants';
+
+@Component({
+  selector: 'sny-otp-input',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyOtpInputComponent), multi: true },
+  ],
+  template: `
+    <div
+      role="group"
+      [attr.aria-label]="'OTP input, ' + length() + ' digits'"
+      class="flex items-center gap-2"
+    >
+      @for (digit of digits(); track $index; let i = $index) {
+        @if (separator() !== null && i === separator() && i > 0) {
+          <span class="text-muted-foreground text-lg select-none" aria-hidden="true">—</span>
+        }
+        <input
+          #inputEl
+          [type]="mask() ? 'password' : 'text'"
+          [inputMode]="type() === 'number' ? 'numeric' : 'text'"
+          [attr.pattern]="type() === 'number' ? '[0-9]' : '[a-zA-Z0-9]'"
+          maxlength="1"
+          autocomplete="one-time-code"
+          [value]="digit"
+          [placeholder]="placeholder()"
+          [disabled]="isDisabled()"
+          [class]="cellClass(i)"
+          [attr.aria-label]="'Digit ' + (i + 1) + ' of ' + length()"
+          (input)="onInput($event, i)"
+          (keydown)="onKeydown($event, i)"
+          (paste)="onPaste($event, i)"
+          (focus)="focusedIndex.set(i)"
+          (blur)="onBlur()"
+        />
+      }
+    </div>
+  `,
+})
+export class SnyOtpInputComponent implements ControlValueAccessor {
+  // Public API
+  readonly length = input(6);
+  readonly type = input<OtpInputType>('number');
+  readonly size = input<OtpInputSize>('md');
+  readonly disabled = input(false);
+  readonly mask = input(false);
+  readonly autoFocus = input(true);
+  readonly placeholder = input('');
+  readonly separator = input<number | null>(null);
+  readonly status = input<'idle' | 'loading' | 'success' | 'error'>('idle');
+  readonly value = model('');
+
+  readonly completed = output<string>();
+
+  // Internal state
+  readonly digits = linkedSignal<string[]>(() => Array(this.length()).fill(''));
+  readonly focusedIndex = signal(-1);
+  readonly inputRefs = viewChildren<ElementRef<HTMLInputElement>>('inputEl');
+
+  private readonly _disabledByCva = signal(false);
+  readonly isDisabled = computed(() => this.disabled() || this._disabledByCva() || this.status() === 'loading');
+
+  private _onChange: (value: string) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  // Computed
+  readonly fullValue = computed(() => this.digits().join(''));
+  readonly isComplete = computed(() => {
+    const d = this.digits();
+    return d.length === this.length() && d.every((c) => c !== '');
+  });
+
+  constructor() {
+    // Sync value → digits when value changes externally (e.g. reset)
+    effect(() => {
+      const val = this.value();
+      untracked(() => {
+        const chars = val.split('').slice(0, this.length());
+        const padded = [...chars, ...Array(this.length() - chars.length).fill('')];
+        const current = this.digits();
+        if (padded.join('') !== current.join('')) {
+          this.digits.set(padded);
+        }
+      });
+    });
+
+    afterNextRender(() => {
+      if (this.autoFocus()) {
+        this.focusInput(0);
+      }
+    });
+  }
+
+  // CVA
+  writeValue(val: string): void {
+    const str = val ?? '';
+    this.value.set(str);
+    const chars = str.split('').slice(0, this.length());
+    const padded = [...chars, ...Array(this.length() - chars.length).fill('')];
+    this.digits.set(padded);
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  // Cell class
+  cellClass(index: number): string {
+    const isFocused = this.focusedIndex() === index;
+    const hasValue = this.digits()[index] !== '';
+    const st = this.status();
+    return cn(
+      otpCellVariants({ size: this.size() }),
+      st === 'idle' && isFocused && 'border-primary ring-2 ring-ring',
+      st === 'idle' && hasValue && !isFocused && 'border-primary/50',
+      st === 'loading' && 'border-muted-foreground/30 opacity-70',
+      st === 'success' && 'border-green-500 bg-green-500/5',
+      st === 'error' && 'border-destructive bg-destructive/5 animate-shake',
+    );
+  }
+
+  // Input handler
+  onInput(event: Event, index: number): void {
+    const input = event.target as HTMLInputElement;
+    const char = input.value.slice(-1);
+
+    if (!this.isValidChar(char)) {
+      input.value = this.digits()[index];
+      return;
+    }
+
+    this.setDigit(index, char);
+
+    if (index < this.length() - 1) {
+      this.focusInput(index + 1);
+    }
+
+    this.emitValue();
+  }
+
+  // Keyboard handler
+  onKeydown(event: KeyboardEvent, index: number): void {
+    switch (event.key) {
+      case 'Backspace':
+        event.preventDefault();
+        if (this.digits()[index] !== '') {
+          this.setDigit(index, '');
+          this.emitValue();
+        } else if (index > 0) {
+          this.setDigit(index - 1, '');
+          this.focusInput(index - 1);
+          this.emitValue();
+        }
+        break;
+
+      case 'Delete':
+        event.preventDefault();
+        this.setDigit(index, '');
+        this.emitValue();
+        break;
+
+      case 'ArrowLeft':
+        event.preventDefault();
+        if (index > 0) this.focusInput(index - 1);
+        break;
+
+      case 'ArrowRight':
+        event.preventDefault();
+        if (index < this.length() - 1) this.focusInput(index + 1);
+        break;
+
+      case 'Home':
+        event.preventDefault();
+        this.focusInput(0);
+        break;
+
+      case 'End':
+        event.preventDefault();
+        this.focusInput(this.length() - 1);
+        break;
+    }
+  }
+
+  // Paste handler
+  onPaste(event: ClipboardEvent, index: number): void {
+    event.preventDefault();
+    const text = event.clipboardData?.getData('text') ?? '';
+    const chars = text.split('').filter((c) => this.isValidChar(c));
+
+    if (chars.length === 0) return;
+
+    const newDigits = [...this.digits()];
+    let lastFilledIndex = index;
+
+    for (let i = 0; i < chars.length && index + i < this.length(); i++) {
+      newDigits[index + i] = chars[i];
+      lastFilledIndex = index + i;
+    }
+
+    this.digits.set(newDigits);
+
+    const nextIndex = Math.min(lastFilledIndex + 1, this.length() - 1);
+    this.focusInput(nextIndex);
+    this.emitValue();
+  }
+
+  // Blur
+  onBlur(): void {
+    this.focusedIndex.set(-1);
+    this._onTouched();
+  }
+
+  // Helpers
+  private setDigit(index: number, char: string): void {
+    this.digits.update((d) => {
+      const next = [...d];
+      next[index] = char;
+      return next;
+    });
+  }
+
+  private emitValue(): void {
+    const val = this.fullValue();
+    this.value.set(val);
+    this._onChange(val);
+
+    if (this.isComplete()) {
+      this.completed.emit(val);
+    }
+  }
+
+  private focusInput(index: number): void {
+    const refs = this.inputRefs();
+    if (refs[index]) {
+      const el = refs[index].nativeElement;
+      el.focus();
+      el.select();
+    }
+  }
+
+  private isValidChar(char: string): boolean {
+    if (!char || char.length !== 1) return false;
+    if (this.type() === 'number') return /^[0-9]$/.test(char);
+    return /^[a-zA-Z0-9]$/.test(char);
+  }
+
+}

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

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority';
+
+export const otpCellVariants = cva(
+  'text-center font-mono font-semibold border border-border bg-background rounded-md transition-all focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed',
+  {
+    variants: {
+      size: {
+        sm: 'h-9 w-9 text-sm',
+        md: 'h-11 w-11 text-lg',
+        lg: 'h-14 w-14 text-2xl',
+      },
+    },
+    defaultVariants: { size: 'md' },
+  }
+);
+
+export type OtpInputSize = 'sm' | 'md' | 'lg';
+export type OtpInputType = 'number' | 'alphanumeric';

package/src/lib/popover/index.ts

@@ -0,0 +1,6 @@
+export {
+  SnyPopoverDirective,
+  SnyPopoverTriggerDirective,
+  SnyPopoverContentDirective,
+  SNY_POPOVER,
+} from './popover.directives';

package/src/lib/popover/popover.directives.spec.ts

@@ -0,0 +1,147 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import {
+  SnyPopoverDirective,
+  SnyPopoverTriggerDirective,
+  SnyPopoverContentDirective,
+} from './popover.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyPopoverDirective, SnyPopoverTriggerDirective, SnyPopoverContentDirective],
+  template: `
+    <div snyPopover [matchWidth]="matchWidth()" [closeOnOutside]="closeOnOutside()" [closeOnEscape]="closeOnEscape()" #pop="snyPopover">
+      <button snyPopoverTrigger>Open</button>
+      <div snyPopoverContent class="p-4">
+        <p>Popover content</p>
+        <button class="close-btn" (click)="pop.close()">Close</button>
+      </div>
+    </div>
+  `,
+})
+class TestHost {
+  matchWidth = signal(false);
+  closeOnOutside = signal(true);
+  closeOnEscape = signal(true);
+}
+
+describe('SnyPopoverDirective', () => {
+  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 getTrigger(): HTMLButtonElement {
+    return el.querySelector('[snypopovertrigger]') as HTMLButtonElement;
+  }
+
+  function getContent(): HTMLElement | null {
+    return el.querySelector('[snyPopoverContent], [snypopovercontent]');
+  }
+
+  function isVisible(): boolean {
+    const content = getContent();
+    return content ? content.style.display !== 'none' : false;
+  }
+
+  it('should render trigger and hidden content', () => {
+    expect(getTrigger()).not.toBeNull();
+    expect(getContent()).not.toBeNull();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should open on trigger click', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+  });
+
+  it('should close on second trigger click', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should set aria-expanded on trigger', () => {
+    expect(getTrigger().getAttribute('aria-expanded')).toBe('false');
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(getTrigger().getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should have aria-haspopup on trigger', () => {
+    expect(getTrigger().getAttribute('aria-haspopup')).toBe('dialog');
+  });
+
+  it('should have role=dialog on content', () => {
+    expect(getContent()?.getAttribute('role')).toBe('dialog');
+  });
+
+  it('should close on click outside', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    document.body.click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should not close on click outside when closeOnOutside=false', () => {
+    fixture.componentInstance.closeOnOutside.set(false);
+    fixture.detectChanges();
+
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    document.body.click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+  });
+
+  it('should close on escape', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    const host = el.querySelector('[snyPopover], [snypopover]') as HTMLElement;
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+
+  it('should not close on escape when closeOnEscape=false', () => {
+    fixture.componentInstance.closeOnEscape.set(false);
+    fixture.detectChanges();
+
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    const host = el.querySelector('[snyPopover], [snypopover]') as HTMLElement;
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+  });
+
+  it('should close programmatically via template ref', () => {
+    getTrigger().click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(true);
+
+    const closeBtn = el.querySelector('.close-btn') as HTMLButtonElement;
+    closeBtn.click();
+    fixture.detectChanges();
+    expect(isVisible()).toBe(false);
+  });
+});

package/src/lib/popover/popover.directives.ts

@@ -0,0 +1,155 @@
+import {
+  Directive,
+  ElementRef,
+  HostListener,
+  InjectionToken,
+  OnDestroy,
+  computed,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_POPOVER = new InjectionToken<SnyPopoverDirective>('SnyPopover');
+
+@Directive({
+  selector: '[snyPopover]',
+  standalone: true,
+  exportAs: 'snyPopover',
+  providers: [{ provide: SNY_POPOVER, useExisting: SnyPopoverDirective }],
+  host: {
+    '[class]': '"relative inline-block"',
+  },
+})
+export class SnyPopoverDirective implements OnDestroy {
+  private readonly elRef = inject(ElementRef);
+
+  readonly matchWidth = input(false);
+  readonly offset = input(4);
+  readonly closeOnOutside = input(true);
+  readonly closeOnEscape = input(true);
+
+  readonly isOpen = signal(false);
+  readonly triggerEl = signal<HTMLElement | null>(null);
+  readonly panelEl = signal<HTMLElement | null>(null);
+
+  private scrollHandler: (() => void) | null = null;
+  private resizeHandler: (() => void) | null = null;
+
+  toggle(): void {
+    if (this.isOpen()) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open(): void {
+    this.isOpen.set(true);
+    this.addListeners();
+    setTimeout(() => this.updatePosition());
+  }
+
+  close(): void {
+    this.isOpen.set(false);
+    this.removeListeners();
+  }
+
+  updatePosition(): void {
+    const trigger = this.triggerEl();
+    const panel = this.panelEl();
+    if (!trigger || !panel) return;
+    const rect = trigger.getBoundingClientRect();
+    panel.style.top = `${rect.bottom + this.offset()}px`;
+    panel.style.left = `${rect.left}px`;
+    if (this.matchWidth()) {
+      panel.style.width = `${rect.width}px`;
+    }
+  }
+
+  private addListeners(): void {
+    this.removeListeners();
+    this.scrollHandler = () => {
+      requestAnimationFrame(() => this.updatePosition());
+    };
+    this.resizeHandler = () => {
+      requestAnimationFrame(() => this.updatePosition());
+    };
+    document.addEventListener('scroll', this.scrollHandler, { capture: true, passive: true });
+    window.addEventListener('resize', this.resizeHandler, { passive: true });
+  }
+
+  private removeListeners(): void {
+    if (this.scrollHandler) {
+      document.removeEventListener('scroll', this.scrollHandler, { capture: true } as EventListenerOptions);
+      this.scrollHandler = null;
+    }
+    if (this.resizeHandler) {
+      window.removeEventListener('resize', this.resizeHandler);
+      this.resizeHandler = null;
+    }
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (this.closeOnOutside() && this.isOpen() && !this.elRef.nativeElement.contains(event.target)) {
+      this.close();
+    }
+  }
+
+  @HostListener('keydown.escape')
+  onEscape(): void {
+    if (this.closeOnEscape() && this.isOpen()) {
+      this.close();
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.removeListeners();
+  }
+}
+
+@Directive({
+  selector: '[snyPopoverTrigger]',
+  standalone: true,
+  host: {
+    '(click)': 'popover.toggle()',
+    '[attr.aria-expanded]': 'popover.isOpen()',
+    'aria-haspopup': 'dialog',
+  },
+})
+export class SnyPopoverTriggerDirective {
+  protected readonly popover = inject(SNY_POPOVER);
+  private readonly elRef = inject(ElementRef);
+
+  constructor() {
+    this.popover.triggerEl.set(this.elRef.nativeElement);
+  }
+}
+
+@Directive({
+  selector: '[snyPopoverContent]',
+  standalone: true,
+  host: {
+    'role': 'dialog',
+    '[style.display]': 'popover.isOpen() ? "" : "none"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyPopoverContentDirective {
+  protected readonly popover = inject(SNY_POPOVER);
+  private readonly elRef = inject(ElementRef);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'fixed z-50 rounded-md border border-border bg-popover text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95',
+      this.class()
+    )
+  );
+
+  constructor() {
+    this.popover.panelEl.set(this.elRef.nativeElement);
+  }
+}

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

@@ -0,0 +1,2 @@
+export { SnyTagInputComponent } from './tag-input.component';
+export { tagInputContainerVariants, tagVariants, type TagInputSize } from './tag-input.variants';