@sonny-ui/core 0.1.0-alpha.6 → 0.1.0-alpha.8

package/README.md

@@ -43,7 +43,7 @@ export const appConfig = {
 And import the theme in your global styles:
 
 ```css
-@import '@sonny-ui/core/src/styles/sonny-theme.css';
+@import '@sonny-ui/core/styles/sonny-theme.css';
 ```
 
 ### Requirements

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonny-ui/core",
-  "version": "0.1.0-alpha.6",
+  "version": "0.1.0-alpha.8",
   "description": "Angular UI component library inspired by shadcn/ui — signals, zoneless, Tailwind CSS v4",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
@@ -37,9 +37,10 @@
   "bugs": {
     "url": "https://github.com/coci-dev/sonny-ui/issues"
   },
-  "module": "fesm2022/sonny-ui-core.mjs",
-  "typings": "types/sonny-ui-core.d.ts",
   "exports": {
+    "./styles/*": {
+      "default": "./src/styles/*"
+    },
     "./package.json": {
       "default": "./package.json"
     },
@@ -47,5 +48,7 @@
       "types": "./types/sonny-ui-core.d.ts",
       "default": "./fesm2022/sonny-ui-core.mjs"
     }
-  }
+  },
+  "module": "fesm2022/sonny-ui-core.mjs",
+  "typings": "types/sonny-ui-core.d.ts"
 }

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

@@ -0,0 +1,95 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  SnyAccordionDirective,
+  SnyAccordionItemDirective,
+  SnyAccordionTriggerDirective,
+  SnyAccordionContentDirective,
+} from './accordion.directives';
+
+@Component({
+  standalone: true,
+  imports: [
+    SnyAccordionDirective,
+    SnyAccordionItemDirective,
+    SnyAccordionTriggerDirective,
+    SnyAccordionContentDirective,
+  ],
+  template: `
+    <div snyAccordion [multi]="multi()">
+      <div snyAccordionItem value="item-1">
+        <button snyAccordionTrigger>Item 1</button>
+        <div snyAccordionContent><div>Content 1</div></div>
+      </div>
+      <div snyAccordionItem value="item-2">
+        <button snyAccordionTrigger>Item 2</button>
+        <div snyAccordionContent><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('[snyAccordionItem]');
+    expect(items.length).toBe(2);
+  });
+
+  it('should toggle item on trigger click', () => {
+    const trigger = fixture.nativeElement.querySelector('[snyAccordionTrigger]');
+    trigger.click();
+    fixture.detectChanges();
+    expect(trigger.getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('should close previous item in single mode', () => {
+    const triggers = fixture.nativeElement.querySelectorAll('[snyAccordionTrigger]');
+    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('[snyAccordionTrigger]');
+    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('[snyAccordionContent]');
+    expect(content.className).toContain('grid-rows-[0fr]');
+
+    const trigger = fixture.nativeElement.querySelector('[snyAccordionTrigger]');
+    trigger.click();
+    fixture.detectChanges();
+
+    expect(content.className).toContain('grid-rows-[1fr]');
+  });
+});

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

@@ -0,0 +1,104 @@
+import { Directive, computed, inject, input, signal, InjectionToken } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_ACCORDION = new InjectionToken<SnyAccordionDirective>('SnyAccordion');
+export const SNY_ACCORDION_ITEM = new InjectionToken<SnyAccordionItemDirective>('SnyAccordionItem');
+
+@Directive({
+  selector: '[snyAccordion]',
+  standalone: true,
+  providers: [{ provide: SNY_ACCORDION, useExisting: SnyAccordionDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyAccordionDirective {
+  readonly multi = input(false);
+  readonly class = input<string>('');
+
+  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;
+    });
+  }
+}
+
+@Directive({
+  selector: '[snyAccordionItem]',
+  standalone: true,
+  providers: [{ provide: SNY_ACCORDION_ITEM, useExisting: SnyAccordionItemDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyAccordionItemDirective {
+  readonly value = input.required<string>();
+  readonly class = input<string>('');
+  private readonly accordion = inject(SNY_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: '[snyAccordionTrigger]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-expanded]': 'item.isOpen()',
+    '(click)': 'item.toggle()',
+  },
+})
+export class SnyAccordionTriggerDirective {
+  readonly class = input<string>('');
+  readonly item = inject(SNY_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: '[snyAccordionContent]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'region',
+  },
+})
+export class SnyAccordionContentDirective {
+  readonly class = input<string>('');
+  readonly item = inject(SNY_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 {
+  SnyAccordionDirective,
+  SnyAccordionItemDirective,
+  SnyAccordionTriggerDirective,
+  SnyAccordionContentDirective,
+  SNY_ACCORDION,
+  SNY_ACCORDION_ITEM,
+} from './accordion.directives';

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 { SnyAvatarComponent } from './avatar.component';
+import type { AvatarSize, AvatarVariant } from './avatar.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyAvatarComponent],
+  template: `<sny-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('SnyAvatarComponent', () => {
+  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('sny-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');
+  });
+});

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

@@ -0,0 +1,43 @@
+import { Component, computed, input, signal } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { avatarVariants, type AvatarSize, type AvatarVariant } from './avatar.variants';
+
+@Component({
+  selector: 'sny-avatar',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+  template: `
+    @if (src() && !error()) {
+      <img
+        [src]="src()"
+        [alt]="alt()"
+        class="aspect-square h-full w-full object-cover"
+        (error)="error.set(true)"
+      />
+    } @else {
+      <span class="font-medium text-muted-foreground">{{ fallbackText() }}</span>
+    }
+  `,
+})
+export class SnyAvatarComponent {
+  readonly src = input<string>('');
+  readonly alt = input<string>('');
+  readonly fallback = input<string>('');
+  readonly size = input<AvatarSize>('md');
+  readonly variant = input<AvatarVariant>('circle');
+  readonly class = input<string>('');
+
+  readonly error = signal(false);
+
+  protected readonly fallbackText = computed(() => {
+    const fb = this.fallback();
+    if (fb) return fb;
+    const a = this.alt();
+    if (a) return a.split(' ').map(w => w[0]).join('').toUpperCase().slice(0, 2);
+    return '?';
+  });
+
+  protected readonly computedClass = computed(() =>
+    cn(avatarVariants({ size: this.size(), variant: this.variant() }), this.class())
+  );
+}

package/src/lib/avatar/avatar.variants.ts

@@ -0,0 +1,26 @@
+import { cva } from 'class-variance-authority';
+
+export const avatarVariants = cva(
+  'relative inline-flex shrink-0 items-center justify-center overflow-hidden bg-muted',
+  {
+    variants: {
+      size: {
+        sm: 'h-8 w-8 text-xs',
+        md: 'h-10 w-10 text-sm',
+        lg: 'h-12 w-12 text-base',
+        xl: 'h-16 w-16 text-lg',
+      },
+      variant: {
+        circle: 'rounded-full',
+        rounded: 'rounded-md',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+      variant: 'circle',
+    },
+  }
+);
+
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarVariant = 'circle' | 'rounded';

package/src/lib/avatar/index.ts

@@ -0,0 +1,2 @@
+export { SnyAvatarComponent } from './avatar.component';
+export { avatarVariants, type AvatarSize, type AvatarVariant } from './avatar.variants';

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

@@ -0,0 +1,74 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyBadgeDirective } from './badge.directive';
+import type { BadgeVariant, BadgeSize } from './badge.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyBadgeDirective],
+  template: `<span snyBadge [variant]="variant()" [size]="size()">Badge</span>`,
+})
+class TestHostComponent {
+  variant = signal<BadgeVariant>('default');
+  size = signal<BadgeSize>('md');
+}
+
+describe('SnyBadgeDirective', () => {
+  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('[snyBadge]');
+  });
+
+  it('should apply default variant classes', () => {
+    expect(el.className).toContain('bg-primary');
+    expect(el.className).toContain('text-primary-foreground');
+  });
+
+  it('should apply destructive variant', () => {
+    fixture.componentInstance.variant.set('destructive');
+    fixture.detectChanges();
+    expect(el.className).toContain('bg-destructive');
+  });
+
+  it('should apply outline variant', () => {
+    fixture.componentInstance.variant.set('outline');
+    fixture.detectChanges();
+    expect(el.className).toContain('border-border');
+  });
+
+  it('should apply success variant', () => {
+    fixture.componentInstance.variant.set('success');
+    fixture.detectChanges();
+    expect(el.className).toContain('bg-green-600');
+  });
+
+  it('should apply warning variant', () => {
+    fixture.componentInstance.variant.set('warning');
+    fixture.detectChanges();
+    expect(el.className).toContain('bg-yellow-500');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-[10px]');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(el.className).toContain('text-sm');
+  });
+
+  it('should have rounded-full class', () => {
+    expect(el.className).toContain('rounded-full');
+  });
+});

package/src/lib/badge/badge.directive.ts

@@ -0,0 +1,18 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { badgeVariants, type BadgeVariant, type BadgeSize } from './badge.variants';
+
+@Directive({
+  selector: '[snyBadge]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyBadgeDirective {
+  readonly variant = input<BadgeVariant>('default');
+  readonly size = input<BadgeSize>('md');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(badgeVariants({ variant: this.variant(), size: this.size() }), this.class())
+  );
+}

package/src/lib/badge/badge.variants.ts

@@ -0,0 +1,29 @@
+import { cva } from 'class-variance-authority';
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
+        outline: 'border-border text-foreground',
+        destructive: 'border-transparent bg-destructive text-destructive-foreground',
+        success: 'border-transparent bg-green-600 text-white dark:bg-green-500',
+        warning: 'border-transparent bg-yellow-500 text-white dark:bg-yellow-400 dark:text-black',
+      },
+      size: {
+        sm: 'px-2 py-0.5 text-[10px]',
+        md: 'px-2.5 py-0.5 text-xs',
+        lg: 'px-3 py-1 text-sm',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export type BadgeVariant = 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning';
+export type BadgeSize = 'sm' | 'md' | 'lg';

package/src/lib/badge/index.ts

@@ -0,0 +1,2 @@
+export { SnyBadgeDirective } from './badge.directive';
+export { badgeVariants, type BadgeVariant, type BadgeSize } from './badge.variants';

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

@@ -0,0 +1,80 @@
+import { Component } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  SnyBreadcrumbDirective,
+  SnyBreadcrumbListDirective,
+  SnyBreadcrumbItemDirective,
+  SnyBreadcrumbLinkDirective,
+  SnyBreadcrumbSeparatorDirective,
+  SnyBreadcrumbPageDirective,
+} from './breadcrumb.directives';
+
+@Component({
+  standalone: true,
+  imports: [
+    SnyBreadcrumbDirective,
+    SnyBreadcrumbListDirective,
+    SnyBreadcrumbItemDirective,
+    SnyBreadcrumbLinkDirective,
+    SnyBreadcrumbSeparatorDirective,
+    SnyBreadcrumbPageDirective,
+  ],
+  template: `
+    <nav snyBreadcrumb>
+      <ol snyBreadcrumbList>
+        <li snyBreadcrumbItem>
+          <a snyBreadcrumbLink href="/">Home</a>
+        </li>
+        <li snyBreadcrumbSeparator>/</li>
+        <li snyBreadcrumbItem>
+          <span snyBreadcrumbPage>Current</span>
+        </li>
+      </ol>
+    </nav>
+  `,
+})
+class TestHostComponent {}
+
+describe('Breadcrumb Directives', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should set aria-label on nav', () => {
+    const nav = fixture.nativeElement.querySelector('nav');
+    expect(nav.getAttribute('aria-label')).toBe('Breadcrumb');
+  });
+
+  it('should apply list classes', () => {
+    const ol = fixture.nativeElement.querySelector('ol');
+    expect(ol.className).toContain('flex');
+    expect(ol.className).toContain('items-center');
+  });
+
+  it('should apply link hover classes', () => {
+    const link = fixture.nativeElement.querySelector('[snyBreadcrumbLink]');
+    expect(link.className).toContain('hover:text-foreground');
+  });
+
+  it('should set aria-current="page" on page', () => {
+    const page = fixture.nativeElement.querySelector('[snyBreadcrumbPage]');
+    expect(page.getAttribute('aria-current')).toBe('page');
+  });
+
+  it('should set aria-hidden on separator', () => {
+    const sep = fixture.nativeElement.querySelector('[snyBreadcrumbSeparator]');
+    expect(sep.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  it('should set role="presentation" on separator', () => {
+    const sep = fixture.nativeElement.querySelector('[snyBreadcrumbSeparator]');
+    expect(sep.getAttribute('role')).toBe('presentation');
+  });
+});