@tony-ui-library/core 0.0.1

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

@@ -0,0 +1,104 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  TonCardDirective,
+  TonCardHeaderDirective,
+  TonCardTitleDirective,
+  TonCardDescriptionDirective,
+  TonCardContentDirective,
+  TonCardFooterDirective,
+} from './card.directives';
+import type { CardVariant, CardPadding } from './card.variants';
+
+@Component({
+  standalone: true,
+  imports: [
+    TonCardDirective,
+    TonCardHeaderDirective,
+    TonCardTitleDirective,
+    TonCardDescriptionDirective,
+    TonCardContentDirective,
+    TonCardFooterDirective,
+  ],
+  template: `
+    <div tonCard [variant]="variant()" [padding]="padding()">
+      <div tonCardHeader>
+        <h3 tonCardTitle>Title</h3>
+        <p tonCardDescription>Description</p>
+      </div>
+      <div tonCardContent>Content</div>
+      <div tonCardFooter>Footer</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  variant = signal<CardVariant>('default');
+  padding = signal<CardPadding>('none');
+}
+
+describe('Card Directives', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should apply default card classes', () => {
+    const card = fixture.nativeElement.querySelector('[tonCard]');
+    expect(card.className).toContain('bg-card');
+    expect(card.className).toContain('border');
+  });
+
+  it('should apply elevated variant', () => {
+    fixture.componentInstance.variant.set('elevated');
+    fixture.detectChanges();
+    const card = fixture.nativeElement.querySelector('[tonCard]');
+    expect(card.className).toContain('shadow-lg');
+  });
+
+  it('should apply ghost variant', () => {
+    fixture.componentInstance.variant.set('ghost');
+    fixture.detectChanges();
+    const card = fixture.nativeElement.querySelector('[tonCard]');
+    expect(card.className).toContain('bg-transparent');
+  });
+
+  it('should apply padding', () => {
+    fixture.componentInstance.padding.set('md');
+    fixture.detectChanges();
+    const card = fixture.nativeElement.querySelector('[tonCard]');
+    expect(card.className).toContain('p-6');
+  });
+
+  it('should render card header', () => {
+    const header = fixture.nativeElement.querySelector('[tonCardHeader]');
+    expect(header.className).toContain('flex');
+    expect(header.className).toContain('p-6');
+  });
+
+  it('should render card title', () => {
+    const title = fixture.nativeElement.querySelector('[tonCardTitle]');
+    expect(title.className).toContain('text-2xl');
+    expect(title.className).toContain('font-semibold');
+  });
+
+  it('should render card description', () => {
+    const desc = fixture.nativeElement.querySelector('[tonCardDescription]');
+    expect(desc.className).toContain('text-muted-foreground');
+  });
+
+  it('should render content projection', () => {
+    const content = fixture.nativeElement.querySelector('[tonCardContent]');
+    expect(content.textContent).toContain('Content');
+  });
+
+  it('should render card footer', () => {
+    const footer = fixture.nativeElement.querySelector('[tonCardFooter]');
+    expect(footer.className).toContain('flex');
+    expect(footer.className).toContain('items-center');
+  });
+});

package/src/lib/card/card.directives.ts

@@ -0,0 +1,72 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { cardVariants, type CardVariant, type CardPadding } from './card.variants';
+
+@Directive({
+  selector: '[tonCard]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonCardDirective {
+  readonly variant = input<CardVariant>('default');
+  readonly padding = input<CardPadding>('none');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(cardVariants({ variant: this.variant(), padding: this.padding() }), this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonCardHeader]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonCardHeaderDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-col space-y-1.5 p-6', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonCardTitle]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonCardTitleDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-2xl font-semibold leading-none tracking-tight', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonCardDescription]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonCardDescriptionDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-sm text-muted-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonCardContent]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonCardContentDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('p-6 pt-0', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonCardFooter]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonCardFooterDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex items-center p-6 pt-0', this.class())
+  );
+}

package/src/lib/card/card.variants.ts

@@ -0,0 +1,28 @@
+import { cva } from 'class-variance-authority';
+
+export const cardVariants = cva(
+  'rounded-sm text-card-foreground',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card border border-border',
+        outline: 'border-2 border-border bg-transparent',
+        elevated: 'bg-card shadow-lg',
+        ghost: 'bg-transparent',
+      },
+      padding: {
+        none: '',
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      padding: 'none',
+    },
+  }
+);
+
+export type CardVariant = 'default' | 'outline' | 'elevated' | 'ghost';
+export type CardPadding = 'none' | 'sm' | 'md' | 'lg';

package/src/lib/card/index.ts

@@ -0,0 +1,9 @@
+export {
+  TonCardDirective,
+  TonCardHeaderDirective,
+  TonCardTitleDirective,
+  TonCardDescriptionDirective,
+  TonCardContentDirective,
+  TonCardFooterDirective,
+} from './card.directives';
+export { cardVariants, type CardVariant, type CardPadding } from './card.variants';

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

@@ -0,0 +1,85 @@
+import { Component, viewChild } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { TonCarouselDirective, TonCarouselContentDirective, TonCarouselItemDirective } from './carousel.directives';
+
+@Component({
+  standalone: true,
+  imports: [TonCarouselDirective, TonCarouselContentDirective, TonCarouselItemDirective],
+  template: `
+    <div tonCarousel [loop]="true">
+      <div tonCarouselContent>
+        <div tonCarouselItem>Slide 1</div>
+        <div tonCarouselItem>Slide 2</div>
+        <div tonCarouselItem>Slide 3</div>
+      </div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  carousel = viewChild(TonCarouselDirective);
+}
+
+describe('TonCarouselDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    fixture.detectChanges();
+  });
+
+  it('should render with region role', () => {
+    const el = fixture.nativeElement.querySelector('[tonCarousel]');
+    expect(el.getAttribute('role')).toBe('region');
+    expect(el.getAttribute('aria-roledescription')).toBe('carousel');
+  });
+
+  it('should render slides with group role', () => {
+    const items = fixture.nativeElement.querySelectorAll('[tonCarouselItem]');
+    expect(items.length).toBe(3);
+    expect(items[0].getAttribute('role')).toBe('group');
+  });
+
+  it('should detect items via contentChildren', () => {
+    const c = fixture.componentInstance.carousel()!;
+    expect(c.totalItems()).toBe(3);
+  });
+
+  it('should navigate to next', () => {
+    const c = fixture.componentInstance.carousel()!;
+    expect(c.currentIndex()).toBe(0);
+    c.next();
+    expect(c.currentIndex()).toBe(1);
+  });
+
+  it('should loop around', () => {
+    const c = fixture.componentInstance.carousel()!;
+    c.goTo(2);
+    c.next();
+    expect(c.currentIndex()).toBe(0);
+  });
+
+  it('should navigate prev with loop', () => {
+    const c = fixture.componentInstance.carousel()!;
+    c.prev();
+    expect(c.currentIndex()).toBe(2);
+  });
+
+  it('should navigate next on ArrowRight keydown', () => {
+    const c = fixture.componentInstance.carousel()!;
+    const host = fixture.nativeElement.querySelector('[tonCarousel]');
+    expect(c.currentIndex()).toBe(0);
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }));
+    expect(c.currentIndex()).toBe(1);
+  });
+
+  it('should navigate prev on ArrowLeft keydown', () => {
+    const c = fixture.componentInstance.carousel()!;
+    const host = fixture.nativeElement.querySelector('[tonCarousel]');
+    c.goTo(1);
+    host.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }));
+    expect(c.currentIndex()).toBe(0);
+  });
+});

package/src/lib/carousel/carousel.directives.ts

@@ -0,0 +1,159 @@
+import {
+  Directive, InjectionToken, computed, contentChildren, inject, input, signal, effect, OnDestroy,
+} from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const TON_CAROUSEL = new InjectionToken<TonCarouselDirective>('TonCarousel');
+
+@Directive({
+  selector: '[tonCarouselItem]',
+  host: {
+    'role': 'group',
+    '[attr.aria-roledescription]': '"slide"',
+    '[class]': 'computedClass()',
+  },
+})
+export class TonCarouselItemDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('min-w-0 shrink-0 grow-0 basis-full pl-4', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonCarouselContent]',
+  host: {
+    '[class]': 'computedClass()',
+    '[style.transform]': 'transformStyle()',
+  },
+})
+export class TonCarouselContentDirective {
+  private readonly carousel = inject(TON_CAROUSEL);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('flex -ml-4 transition-transform duration-300 ease-in-out', this.class())
+  );
+
+  protected readonly transformStyle = computed(() =>
+    `translateX(-${this.carousel.currentIndex() * 100}%)`
+  );
+}
+
+@Directive({
+  selector: '[tonCarousel]',
+  exportAs: 'tonCarousel',
+  providers: [{ provide: TON_CAROUSEL, useExisting: TonCarouselDirective }],
+  host: {
+    'role': 'region',
+    '[attr.aria-roledescription]': '"carousel"',
+    'aria-label': 'Carousel',
+    'tabindex': '0',
+    '[class]': 'computedClass()',
+    '(keydown)': 'onKeydown($event)',
+  },
+})
+export class TonCarouselDirective implements OnDestroy {
+  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');
+  readonly loop = input(false);
+  readonly autoplay = input(0);
+  readonly class = input<string>('');
+
+  readonly items = contentChildren(TonCarouselItemDirective, { descendants: true });
+  readonly currentIndex = signal(0);
+  readonly totalItems = computed(() => this.items().length);
+
+  private autoplayInterval: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    effect(() => {
+      const ms = this.autoplay();
+      this.clearAutoplay();
+      if (ms > 0) {
+        this.autoplayInterval = setInterval(() => this.next(), ms);
+      }
+    });
+  }
+
+  next(): void {
+    const total = this.totalItems();
+    if (total === 0) return;
+    this.currentIndex.update((i) => {
+      if (i >= total - 1) return this.loop() ? 0 : i;
+      return i + 1;
+    });
+  }
+
+  prev(): void {
+    const total = this.totalItems();
+    if (total === 0) return;
+    this.currentIndex.update((i) => {
+      if (i <= 0) return this.loop() ? total - 1 : i;
+      return i - 1;
+    });
+  }
+
+  goTo(index: number): void {
+    this.currentIndex.set(Math.max(0, Math.min(index, this.totalItems() - 1)));
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.prev();
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        this.next();
+        break;
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.clearAutoplay();
+  }
+
+  private clearAutoplay(): void {
+    if (this.autoplayInterval) {
+      clearInterval(this.autoplayInterval);
+      this.autoplayInterval = null;
+    }
+  }
+
+  protected readonly computedClass = computed(() =>
+    cn('relative overflow-hidden', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonCarouselPrev]',
+  host: {
+    '(click)': 'carousel.prev()',
+    '[attr.aria-label]': '"Previous slide"',
+    '[class]': 'computedClass()',
+  },
+})
+export class TonCarouselPrevDirective {
+  readonly carousel = inject(TON_CAROUSEL);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('absolute left-2 top-1/2 -translate-y-1/2 z-10', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonCarouselNext]',
+  host: {
+    '(click)': 'carousel.next()',
+    '[attr.aria-label]': '"Next slide"',
+    '[class]': 'computedClass()',
+  },
+})
+export class TonCarouselNextDirective {
+  readonly carousel = inject(TON_CAROUSEL);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('absolute right-2 top-1/2 -translate-y-1/2 z-10', this.class())
+  );
+}

package/src/lib/carousel/index.ts

@@ -0,0 +1,8 @@
+export {
+  TonCarouselDirective,
+  TonCarouselContentDirective,
+  TonCarouselItemDirective,
+  TonCarouselPrevDirective,
+  TonCarouselNextDirective,
+  TON_CAROUSEL,
+} from './carousel.directives';

package/src/lib/chat-bubble/chat-bubble.directives.spec.ts

@@ -0,0 +1,52 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { TonChatBubbleDirective, TonChatBubbleContentDirective, type ChatBubbleAlign, type ChatBubbleContentVariant } from './chat-bubble.directives';
+
+@Component({
+  standalone: true,
+  imports: [TonChatBubbleDirective, TonChatBubbleContentDirective],
+  template: `
+    <div tonChatBubble [align]="align()">
+      <div tonChatBubbleContent [variant]="variant()">Hello!</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  align = signal<ChatBubbleAlign>('start');
+  variant = signal<ChatBubbleContentVariant>('default');
+}
+
+describe('TonChatBubbleDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render with article role', () => {
+    const bubble = fixture.nativeElement.querySelector('[tonChatBubble]');
+    expect(bubble.getAttribute('role')).toBe('article');
+  });
+
+  it('should apply start alignment by default', () => {
+    const bubble = fixture.nativeElement.querySelector('[tonChatBubble]');
+    expect(bubble.className).toContain('flex');
+    expect(bubble.className).not.toContain('flex-row-reverse');
+  });
+
+  it('should apply end alignment', () => {
+    fixture.componentInstance.align.set('end');
+    fixture.detectChanges();
+    const bubble = fixture.nativeElement.querySelector('[tonChatBubble]');
+    expect(bubble.className).toContain('flex-row-reverse');
+  });
+
+  it('should apply primary content variant', () => {
+    fixture.componentInstance.variant.set('primary');
+    fixture.detectChanges();
+    const content = fixture.nativeElement.querySelector('[tonChatBubbleContent]');
+    expect(content.className).toContain('bg-primary');
+  });
+});

package/src/lib/chat-bubble/chat-bubble.directives.ts

@@ -0,0 +1,96 @@
+import { Directive, InjectionToken, computed, inject, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export type ChatBubbleAlign = 'start' | 'end';
+export type ChatBubbleContentVariant = 'default' | 'primary' | 'secondary' | 'accent';
+
+export const TON_CHAT_BUBBLE = new InjectionToken<TonChatBubbleDirective>('TonChatBubble');
+
+@Directive({
+  selector: '[tonChatBubble]',
+  providers: [{ provide: TON_CHAT_BUBBLE, useExisting: TonChatBubbleDirective }],
+  host: {
+    'role': 'article',
+    '[class]': 'computedClass()',
+  },
+})
+export class TonChatBubbleDirective {
+  readonly align = input<ChatBubbleAlign>('start');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex gap-3 mb-4',
+      this.align() === 'end' && 'flex-row-reverse',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: '[tonChatBubbleAvatar]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonChatBubbleAvatarDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex-shrink-0 w-10 h-10 rounded-full overflow-hidden', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonChatBubbleHeader]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonChatBubbleHeaderDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-xs text-muted-foreground mb-1', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonChatBubbleContent]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonChatBubbleContentDirective {
+  readonly variant = input<ChatBubbleContentVariant>('default');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const v = this.variant();
+    const variantClass =
+      v === 'primary' ? 'bg-primary text-primary-foreground' :
+      v === 'secondary' ? 'bg-blue-100 text-blue-900 dark:bg-blue-900 dark:text-blue-100' :
+      v === 'accent' ? 'bg-violet-100 text-violet-900 dark:bg-violet-900 dark:text-violet-100' :
+      'bg-muted';
+    return cn('rounded-lg px-3 py-2 text-sm max-w-[80%]', variantClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[tonChatBubbleFooter]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonChatBubbleFooterDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('text-xs text-muted-foreground mt-1', this.class())
+  );
+}
+
+@Directive({
+  selector: '[tonChatBubbleBody]',
+  host: { '[class]': 'computedClass()' },
+})
+export class TonChatBubbleBodyDirective {
+  private readonly chatBubble = inject(TON_CHAT_BUBBLE);
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex flex-col',
+      this.chatBubble.align() === 'end' && 'items-end',
+      this.class()
+    )
+  );
+}

package/src/lib/chat-bubble/index.ts

@@ -0,0 +1,11 @@
+export {
+  TonChatBubbleDirective,
+  TonChatBubbleAvatarDirective,
+  TonChatBubbleHeaderDirective,
+  TonChatBubbleContentDirective,
+  TonChatBubbleFooterDirective,
+  TonChatBubbleBodyDirective,
+  TON_CHAT_BUBBLE,
+  type ChatBubbleAlign,
+  type ChatBubbleContentVariant,
+} from './chat-bubble.directives';

package/src/lib/checkbox/checkbox.directive.spec.ts

@@ -0,0 +1,57 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { TonCheckboxDirective } from './checkbox.directive';
+import type { CheckboxSize } from './checkbox.variants';
+
+@Component({
+  standalone: true,
+  imports: [TonCheckboxDirective],
+  template: `<input type="checkbox" tonCheckbox [size]="size()" />`,
+})
+class TestHostComponent {
+  size = signal<CheckboxSize>('md');
+}
+
+describe('TonCheckboxDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let el: HTMLInputElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    el = fixture.nativeElement.querySelector('input[type="checkbox"]');
+  });
+
+  it('should apply default classes', () => {
+    expect(el.className).toContain('appearance-none');
+    expect(el.className).toContain('rounded-sm');
+    expect(el.className).toContain('border');
+  });
+
+  it('should apply default md size', () => {
+    expect(el.className).toContain('h-4');
+    expect(el.className).toContain('w-4');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-3.5');
+    expect(el.className).toContain('w-3.5');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('h-5');
+    expect(el.className).toContain('w-5');
+  });
+
+  it('should have checked styles in class list', () => {
+    expect(el.className).toContain('checked:bg-primary');
+  });
+});