@tony-ui-library/core 0.0.1

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

@@ -0,0 +1,173 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  TonAccordionDirective,
+  TonAccordionItemDirective,
+  TonAccordionTriggerDirective,
+  TonAccordionContentDirective,
+} from './accordion.directives';
+
+@Component({
+  standalone: true,
+  imports: [
+    TonAccordionDirective,
+    TonAccordionItemDirective,
+    TonAccordionTriggerDirective,
+    TonAccordionContentDirective,
+  ],
+  template: `
+    <div tonAccordion [multi]="multi()">
+      <div tonAccordionItem value="item-1">
+        <button tonAccordionTrigger>Item 1</button>
+        <div tonAccordionContent><div>Content 1</div></div>
+      </div>
+      <div tonAccordionItem value="item-2">
+        <button tonAccordionTrigger>Item 2</button>
+        <div tonAccordionContent><div>Content 2</div></div>
+      </div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  multi = signal(false);
+}
+
+describe('Accordion Directives', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render accordion items', () => {
+    const items = fixture.nativeElement.querySelectorAll('[tonAccordionItem]');
+    expect(items.length).toBe(2);
+  });
+
+  it('should toggle item on trigger click', () => {
+    const trigger = fixture.nativeElement.querySelector('[tonAccordionTrigger]');
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should close previous item in single mode', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    triggers[0].click();
+    fixture.detectChanges();
+    expect(triggers[0].getAttribute('aria-expanded')).toBe('true');
+
+    triggers[1].click();
+    fixture.detectChanges();
+    expect(triggers[0].getAttribute('aria-expanded')).toBe('false');
+    expect(triggers[1].getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should allow multiple open in multi mode', () => {
+    fixture.componentInstance.multi.set(true);
+    fixture.detectChanges();
+
+    const triggers = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    triggers[0].click();
+    fixture.detectChanges();
+    triggers[1].click();
+    fixture.detectChanges();
+
+    expect(triggers[0].getAttribute('aria-expanded')).toBe('true');
+    expect(triggers[1].getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should apply content visibility classes', () => {
+    const content = fixture.nativeElement.querySelector('[tonAccordionContent]');
+    expect(content.className).toContain('grid-rows-[0fr]');
+
+    const trigger = fixture.nativeElement.querySelector('[tonAccordionTrigger]');
+    trigger.click();
+    fixture.detectChanges();
+
+    expect(content.className).toContain('grid-rows-[1fr]');
+  });
+
+  it('should move focus with ArrowDown', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    (triggers[0] as HTMLElement).focus();
+    triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    expect(document.activeElement).toBe(updated[1]);
+  });
+
+  it('should move focus with ArrowUp', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    (triggers[1] as HTMLElement).focus();
+    triggers[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    expect(document.activeElement).toBe(updated[0]);
+  });
+
+  it('should move focus to first with Home', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    (triggers[1] as HTMLElement).focus();
+    triggers[1].dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    expect(document.activeElement).toBe(updated[0]);
+  });
+
+  it('should move focus to last with End', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    (triggers[0] as HTMLElement).focus();
+    triggers[0].dispatchEvent(new KeyboardEvent('keydown', { key: 'End', bubbles: true }));
+    fixture.detectChanges();
+    const updated = fixture.nativeElement.querySelectorAll('[tonAccordionTrigger]');
+    expect(document.activeElement).toBe(updated[1]);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [
+    TonAccordionDirective,
+    TonAccordionItemDirective,
+    TonAccordionTriggerDirective,
+    TonAccordionContentDirective,
+  ],
+  template: `
+    <div tonAccordion #a="tonAccordion">
+      <div tonAccordionItem #i="tonAccordionItem" value="item-1">
+        <button tonAccordionTrigger>Item 1</button>
+        <div tonAccordionContent><div>Content 1</div></div>
+      </div>
+    </div>
+  `,
+})
+class ExportAsHost {
+  accordion = viewChild<TonAccordionDirective>('a');
+  item = viewChild<TonAccordionItemDirective>('i');
+}
+
+describe('Accordion exportAs', () => {
+  it('should expose tonAccordion via template ref', async () => {
+    await TestBed.configureTestingModule({ imports: [ExportAsHost] }).compileComponents();
+    const fixture = TestBed.createComponent(ExportAsHost);
+    fixture.detectChanges();
+    const ref = fixture.componentInstance.accordion();
+    expect(ref).toBeTruthy();
+    expect(ref!.multi()).toBe(false);
+  });
+
+  it('should expose tonAccordionItem via template ref', async () => {
+    await TestBed.configureTestingModule({ imports: [ExportAsHost] }).compileComponents();
+    const fixture = TestBed.createComponent(ExportAsHost);
+    fixture.detectChanges();
+    const ref = fixture.componentInstance.item();
+    expect(ref).toBeTruthy();
+    expect(ref!.isOpen()).toBe(false);
+  });
+});

package/src/lib/accordion/accordion.directives.ts

@@ -0,0 +1,143 @@
+import { Directive, ElementRef, computed, inject, input, signal, InjectionToken } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const TON_ACCORDION = new InjectionToken<TonAccordionDirective>('TonAccordion');
+export const TON_ACCORDION_ITEM = new InjectionToken<TonAccordionItemDirective>('TonAccordionItem');
+
+@Directive({
+  selector: '[tonAccordion]',
+  exportAs: 'tonAccordion',
+  providers: [{ provide: TON_ACCORDION, useExisting: TonAccordionDirective }],
+  host: {
+    '[class]': 'computedClass()',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class TonAccordionDirective {
+  readonly multi = input(false);
+  readonly class = input<string>('');
+
+  private readonly elRef = inject(ElementRef);
+  private readonly _openItems = signal(new Set<string>());
+
+  protected readonly computedClass = computed(() =>
+    cn('divide-y divide-border', this.class())
+  );
+
+  isOpen(id: string): boolean {
+    return this._openItems().has(id);
+  }
+
+  toggle(id: string): void {
+    this._openItems.update(set => {
+      const next = new Set(set);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        if (!this.multi()) next.clear();
+        next.add(id);
+      }
+      return next;
+    });
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    const target = event.target as HTMLElement;
+    if (!target.hasAttribute('tonaccordiontrigger') && !target.closest('[tonAccordionTrigger]')) return;
+
+    const triggers = Array.from(
+      (this.elRef.nativeElement as HTMLElement).querySelectorAll<HTMLElement>('[tonAccordionTrigger]')
+    );
+    if (triggers.length === 0) return;
+
+    const currentIndex = triggers.indexOf(target.closest('[tonAccordionTrigger]') as HTMLElement || target);
+    if (currentIndex === -1) return;
+
+    let nextIndex: number | null = null;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        nextIndex = (currentIndex + 1) % triggers.length;
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        nextIndex = (currentIndex - 1 + triggers.length) % triggers.length;
+        break;
+      case 'Home':
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case 'End':
+        event.preventDefault();
+        nextIndex = triggers.length - 1;
+        break;
+    }
+    if (nextIndex !== null) {
+      triggers[nextIndex].focus();
+    }
+  }
+}
+
+@Directive({
+  selector: '[tonAccordionItem]',
+  exportAs: 'tonAccordionItem',
+  providers: [{ provide: TON_ACCORDION_ITEM, useExisting: TonAccordionItemDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class TonAccordionItemDirective {
+  readonly value = input.required<string>();
+  readonly class = input<string>('');
+  private readonly accordion = inject(TON_ACCORDION);
+
+  readonly isOpen = computed(() => this.accordion.isOpen(this.value()));
+
+  protected readonly computedClass = computed(() =>
+    cn('', this.class())
+  );
+
+  toggle(): void {
+    this.accordion.toggle(this.value());
+  }
+}
+
+@Directive({
+  selector: '[tonAccordionTrigger]',
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-expanded]': 'item.isOpen()',
+    'tabindex': '0',
+    '(click)': 'item.toggle()',
+  },
+})
+export class TonAccordionTriggerDirective {
+  readonly class = input<string>('');
+  readonly item = inject(TON_ACCORDION_ITEM);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline cursor-pointer [&>svg]:transition-transform',
+      this.item.isOpen() && '[&>svg]:rotate-180',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[tonAccordionContent]',
+  host: {
+    '[class]': 'computedClass()',
+    role: 'region',
+  },
+})
+export class TonAccordionContentDirective {
+  readonly class = input<string>('');
+  readonly item = inject(TON_ACCORDION_ITEM);
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'grid transition-all duration-200',
+      this.item.isOpen() ? 'grid-rows-[1fr] opacity-100 pb-4' : 'grid-rows-[0fr] opacity-0 overflow-hidden',
+      this.class()
+    )
+  );
+}

package/src/lib/accordion/index.ts

@@ -0,0 +1,8 @@
+export {
+  TonAccordionDirective,
+  TonAccordionItemDirective,
+  TonAccordionTriggerDirective,
+  TonAccordionContentDirective,
+  TON_ACCORDION,
+  TON_ACCORDION_ITEM,
+} from './accordion.directives';

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

@@ -0,0 +1,154 @@
+import { Component, signal, viewChild } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { TonAlertDirective, TonAlertTitleDirective, TonAlertDescriptionDirective } from './alert.directives';
+import type { AlertVariant } from './alert.variants';
+
+@Component({
+  standalone: true,
+  imports: [TonAlertDirective, TonAlertTitleDirective, TonAlertDescriptionDirective],
+  template: `
+    <div tonAlert [variant]="variant()" [dismissible]="dismissible()">
+      <h5 tonAlertTitle>{{ title() }}</h5>
+      <p tonAlertDescription>{{ description() }}</p>
+    </div>
+  `,
+})
+class TestHostComponent {
+  variant = signal<AlertVariant>('default');
+  dismissible = signal(false);
+  title = signal('Test Title');
+  description = signal('Test Description');
+  alert = viewChild(TonAlertDirective);
+}
+
+describe('TonAlertDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('[tonAlert]');
+  });
+
+  it('should apply default variant classes', () => {
+    expect(el.className).toContain('bg-background');
+    expect(el.className).toContain('rounded-lg');
+  });
+
+  it('should apply destructive variant classes', () => {
+    fixture.componentInstance.variant.set('destructive');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-destructive');
+  });
+
+  it('should apply success variant classes', () => {
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-green-700');
+  });
+
+  it('should apply warning variant classes', () => {
+    fixture.componentInstance.variant.set('warning');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-yellow-700');
+  });
+
+  it('should apply info variant classes', () => {
+    fixture.componentInstance.variant.set('info');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-blue-700');
+  });
+
+  it('should set role="status" for default and success', () => {
+    expect(el.getAttribute('role')).toBe('status');
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(el.getAttribute('role')).toBe('status');
+  });
+
+  it('should set role="alert" for destructive, warning, info', () => {
+    fixture.componentInstance.variant.set('destructive');
+    fixture.detectChanges();
+    expect(el.getAttribute('role')).toBe('alert');
+
+    fixture.componentInstance.variant.set('warning');
+    fixture.detectChanges();
+    expect(el.getAttribute('role')).toBe('alert');
+
+    fixture.componentInstance.variant.set('info');
+    fixture.detectChanges();
+    expect(el.getAttribute('role')).toBe('alert');
+  });
+
+  it('should set aria-live="assertive" for destructive/warning', () => {
+    fixture.componentInstance.variant.set('destructive');
+    fixture.detectChanges();
+    expect(el.getAttribute('aria-live')).toBe('assertive');
+
+    fixture.componentInstance.variant.set('warning');
+    fixture.detectChanges();
+    expect(el.getAttribute('aria-live')).toBe('assertive');
+  });
+
+  it('should set aria-live="polite" for default/success/info', () => {
+    expect(el.getAttribute('aria-live')).toBe('polite');
+
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(el.getAttribute('aria-live')).toBe('polite');
+
+    fixture.componentInstance.variant.set('info');
+    fixture.detectChanges();
+    expect(el.getAttribute('aria-live')).toBe('polite');
+  });
+
+  it('should be visible by default', () => {
+    expect(el.style.display).not.toBe('none');
+  });
+
+  it('should hide when dismiss() is called', () => {
+    const alert = fixture.componentInstance.alert();
+    alert!.dismiss();
+    fixture.detectChanges();
+    expect(el.style.display).toBe('none');
+  });
+});
+
+describe('TonAlertTitleDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply title classes', () => {
+    const title = fixture.nativeElement.querySelector('[tonAlertTitle]');
+    expect(title.className).toContain('font-medium');
+    expect(title.className).toContain('tracking-tight');
+  });
+});
+
+describe('TonAlertDescriptionDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply description classes', () => {
+    const desc = fixture.nativeElement.querySelector('[tonAlertDescription]');
+    expect(desc.className).toContain('text-sm');
+  });
+});

package/src/lib/alert/alert.directives.ts

@@ -0,0 +1,67 @@
+import { Directive, computed, input, signal } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { alertVariants, type AlertVariant } from './alert.variants';
+
+@Directive({
+  selector: '[tonAlert]',
+  exportAs: 'tonAlert',
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.role]': 'role()',
+    '[attr.aria-live]': 'ariaLive()',
+    '[style.display]': 'visible() ? null : "none"',
+  },
+})
+export class TonAlertDirective {
+  readonly variant = input<AlertVariant>('default');
+  readonly dismissible = input(false);
+  readonly class = input<string>('');
+
+  readonly visible = signal(true);
+
+  protected readonly role = computed(() => {
+    const v = this.variant();
+    return v === 'destructive' || v === 'warning' || v === 'info' ? 'alert' : 'status';
+  });
+
+  protected readonly ariaLive = computed(() => {
+    const v = this.variant();
+    return v === 'destructive' || v === 'warning' ? 'assertive' : 'polite';
+  });
+
+  protected readonly computedClass = computed(() =>
+    cn(alertVariants({ variant: this.variant() }), this.class())
+  );
+
+  dismiss(): void {
+    this.visible.set(false);
+  }
+}
+
+@Directive({
+  selector: '[tonAlertTitle]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class TonAlertTitleDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('mb-1 font-medium leading-none tracking-tight', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonAlertDescription]',
+  host: {
+    '[class]': 'computedClass()',
+  },
+})
+export class TonAlertDescriptionDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('text-sm [&_p]:leading-relaxed', this.class())
+  );
+}

package/src/lib/alert/alert.variants.ts

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+export const alertVariants = cva(
+  'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-background text-foreground border-border',
+        destructive:
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive bg-destructive/10',
+        success:
+          'border-green-500/50 text-green-700 dark:text-green-400 dark:border-green-500 [&>svg]:text-green-600 bg-green-50 dark:bg-green-950/30',
+        warning:
+          'border-yellow-500/50 text-yellow-700 dark:text-yellow-400 dark:border-yellow-500 [&>svg]:text-yellow-600 bg-yellow-50 dark:bg-yellow-950/30',
+        info: 'border-blue-500/50 text-blue-700 dark:text-blue-400 dark:border-blue-500 [&>svg]:text-blue-600 bg-blue-50 dark:bg-blue-950/30',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type AlertVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info';

package/src/lib/alert/index.ts

@@ -0,0 +1,6 @@
+export {
+  TonAlertDirective,
+  TonAlertTitleDirective,
+  TonAlertDescriptionDirective,
+} from './alert.directives';
+export { alertVariants, type AlertVariant } from './alert.variants';

package/src/lib/avatar/avatar.component.spec.ts

@@ -0,0 +1,75 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { TonAvatarComponent } from './avatar.component';
+import type { AvatarSize, AvatarVariant } from './avatar.variants';
+
+@Component({
+  standalone: true,
+  imports: [TonAvatarComponent],
+  template: `<ton-avatar [src]="src()" [alt]="alt()" [fallback]="fallback()" [size]="size()" [variant]="variant()" />`,
+})
+class TestHostComponent {
+  src = signal('');
+  alt = signal('John Doe');
+  fallback = signal('');
+  size = signal<AvatarSize>('md');
+  variant = signal<AvatarVariant>('circle');
+}
+
+describe('TonAvatarComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('ton-avatar');
+  });
+
+  it('should show fallback text when no src', () => {
+    const span = el.querySelector('span');
+    expect(span?.textContent?.trim()).toBe('JD');
+  });
+
+  it('should show custom fallback', () => {
+    fixture.componentInstance.fallback.set('AB');
+    fixture.detectChanges();
+    const span = el.querySelector('span');
+    expect(span?.textContent?.trim()).toBe('AB');
+  });
+
+  it('should show image when src is provided', () => {
+    fixture.componentInstance.src.set('https://example.com/avatar.png');
+    fixture.detectChanges();
+    const img = el.querySelector('img');
+    expect(img).toBeTruthy();
+    expect(img?.getAttribute('src')).toBe('https://example.com/avatar.png');
+  });
+
+  it('should apply circle variant by default', () => {
+    expect(el.className).toContain('rounded-full');
+  });
+
+  it('should apply rounded variant', () => {
+    fixture.componentInstance.variant.set('rounded');
+    fixture.detectChanges();
+    expect(el.className).toContain('rounded-md');
+  });
+
+  it('should apply size classes', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-12');
+    expect(el.className).toContain('w-12');
+  });
+
+  it('should apply xl size', () => {
+    fixture.componentInstance.size.set('xl');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-16');
+  });
+});