@sonny-ui/core 0.1.0-alpha.2 → 0.1.0-alpha.20

package/src/lib/status/status.variants.ts

@@ -0,0 +1,26 @@
+import { cva } from 'class-variance-authority';
+
+export const statusVariants = cva('inline-block rounded-full', {
+  variants: {
+    variant: {
+      default: 'bg-primary',
+      success: 'bg-green-500',
+      warning: 'bg-yellow-500',
+      error: 'bg-destructive',
+      info: 'bg-blue-500',
+      neutral: 'bg-muted-foreground',
+    },
+    size: {
+      xs: 'h-1.5 w-1.5',
+      sm: 'h-2 w-2',
+      md: 'h-2.5 w-2.5',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+  },
+});
+
+export type StatusVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export type StatusSize = 'xs' | 'sm' | 'md';

package/src/lib/steps/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyStepsDirective,
+  SnyStepDirective,
+  SNY_STEPS,
+  type StepStatus,
+  type StepsOrientation,
+  type StepsSize,
+} from './steps.directives';

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

@@ -0,0 +1,52 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyStepsDirective, SnyStepDirective, type StepStatus } from './steps.directives';
+
+@Component({
+  standalone: true,
+  imports: [SnyStepsDirective, SnyStepDirective],
+  template: `
+    <div snySteps>
+      <div snyStep status="completed">Register</div>
+      <div snyStep [status]="activeStatus()">Payment</div>
+      <div snyStep status="default">Confirm</div>
+    </div>
+  `,
+})
+class TestHostComponent {
+  activeStatus = signal<StepStatus>('active');
+}
+
+describe('SnyStepsDirective', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+  });
+
+  it('should render with list role', () => {
+    const steps = fixture.nativeElement.querySelector('[snySteps]');
+    expect(steps.getAttribute('role')).toBe('list');
+  });
+
+  it('should render steps with listitem role', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyStep]');
+    expect(items.length).toBe(3);
+    items.forEach((item: HTMLElement) => {
+      expect(item.getAttribute('role')).toBe('listitem');
+    });
+  });
+
+  it('should mark active step with aria-current', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyStep]');
+    expect(items[1].getAttribute('aria-current')).toBe('step');
+    expect(items[0].getAttribute('aria-current')).toBeNull();
+  });
+
+  it('should apply completed styling', () => {
+    const items = fixture.nativeElement.querySelectorAll('[snyStep]');
+    expect(items[0].className).toContain('text-primary');
+  });
+});

package/src/lib/steps/steps.directives.ts

@@ -0,0 +1,78 @@
+import { Directive, InjectionToken, computed, contentChildren, inject, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+export const SNY_STEPS = new InjectionToken<SnyStepsDirective>('SnySteps');
+
+export type StepStatus = 'default' | 'active' | 'completed' | 'error';
+export type StepsOrientation = 'horizontal' | 'vertical';
+export type StepsSize = 'sm' | 'md' | 'lg';
+
+@Directive({
+  selector: '[snyStep]',
+  host: {
+    'role': 'listitem',
+    '[class]': 'computedClass()',
+    '[attr.aria-current]': 'status() === "active" ? "step" : null',
+  },
+})
+export class SnyStepDirective {
+  readonly status = input<StepStatus>('default');
+  readonly icon = input<string>('');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() => {
+    const s = this.status();
+    const base = 'flex items-center gap-2';
+
+    // Step indicator via before: pseudo-element
+    const indicatorBase = 'before:flex before:items-center before:justify-center before:w-8 before:h-8 before:rounded-full before:border-2 before:text-xs before:shrink-0';
+
+    const statusIndicator =
+      s === 'completed' ? 'before:bg-primary before:border-primary before:text-primary-foreground before:content-["✓"]' :
+      s === 'active' ? 'before:border-primary before:text-primary before:content-["●"]' :
+      s === 'error' ? 'before:border-destructive before:text-destructive before:content-["!"]' :
+      'before:border-muted-foreground/30 before:text-muted-foreground before:content-["○"]';
+
+    const statusClass =
+      s === 'completed' ? 'text-primary' :
+      s === 'active' ? 'text-primary font-medium' :
+      s === 'error' ? 'text-destructive' :
+      'text-muted-foreground';
+
+    return cn(base, indicatorBase, statusIndicator, statusClass, this.class());
+  });
+}
+
+@Directive({
+  selector: '[snySteps]',
+  exportAs: 'snySteps',
+  providers: [{ provide: SNY_STEPS, useExisting: SnyStepsDirective }],
+  host: {
+    'role': 'list',
+    'aria-label': 'Progress steps',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyStepsDirective {
+  readonly orientation = input<StepsOrientation>('horizontal');
+  readonly size = input<StepsSize>('md');
+  readonly class = input<string>('');
+
+  readonly steps = contentChildren(SnyStepDirective);
+
+  readonly activeIndex = computed(() => {
+    const s = this.steps();
+    return s.findIndex((step) => step.status() === 'active');
+  });
+
+  protected readonly computedClass = computed(() => {
+    const o = this.orientation();
+    const s = this.size();
+    const base = 'flex';
+    const orientationClass = o === 'horizontal'
+      ? 'flex-row items-center gap-2 [&>*+*]:before:content-[""] [&>*+*]:before:flex-1 [&>*+*]:before:h-px [&>*+*]:before:bg-border [&>*+*]:before:mx-2 [&>*+*]:before:min-w-[2rem]'
+      : 'flex-col gap-2 [&>*+*]:before:content-[""] [&>*+*]:before:w-px [&>*+*]:before:h-4 [&>*+*]:before:bg-border [&>*+*]:before:ml-4';
+    const sizeClass = s === 'sm' ? 'text-xs' : s === 'lg' ? 'text-base' : 'text-sm';
+    return cn(base, orientationClass, sizeClass, this.class());
+  });
+}

package/src/lib/switch/index.ts

@@ -0,0 +1,2 @@
+export { SnySwitchComponent } from './switch.component';
+export { switchTrackVariants, type SwitchSize } from './switch.variants';

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

@@ -0,0 +1,98 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnySwitchComponent } from './switch.component';
+
+@Component({
+  standalone: true,
+  imports: [SnySwitchComponent],
+  template: `<sny-switch [(checked)]="checked" [disabled]="disabled()" />`,
+})
+class TestHostComponent {
+  checked = signal(false);
+  disabled = signal(false);
+}
+
+describe('SnySwitchComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  it('should have switch role', () => {
+    expect(button.getAttribute('role')).toBe('switch');
+  });
+
+  it('should be unchecked by default', () => {
+    expect(button.getAttribute('aria-checked')).toBe('false');
+    expect(button.className).toContain('bg-input');
+  });
+
+  it('should toggle on click', () => {
+    button.click();
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-checked')).toBe('true');
+    expect(button.className).toContain('bg-primary');
+  });
+
+  it('should not toggle when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(button.disabled).toBe(true);
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnySwitchComponent],
+  template: `<sny-switch [formControl]="ctrl" />`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl(false);
+}
+
+describe('SnySwitchComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let button: HTMLButtonElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ReactiveFormHost],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    button = fixture.nativeElement.querySelector('button');
+  });
+
+  it('should update view when FormControl value changes (writeValue)', () => {
+    fixture.componentInstance.ctrl.setValue(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-checked')).toBe('true');
+  });
+
+  it('should update FormControl when user interacts (onChange)', () => {
+    button.click();
+    fixture.detectChanges();
+    expect(fixture.componentInstance.ctrl.value).toBe(true);
+  });
+
+  it('should disable via FormControl.disable() (setDisabledState)', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    expect(button.disabled).toBe(true);
+  });
+
+  it('should mark as touched on blur (onTouched)', () => {
+    expect(fixture.componentInstance.ctrl.touched).toBe(false);
+    button.dispatchEvent(new Event('blur'));
+    expect(fixture.componentInstance.ctrl.touched).toBe(true);
+  });
+});

package/src/lib/switch/switch.component.ts

@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, model, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+import { switchTrackVariants, switchThumbSize, switchThumbTranslate, type SwitchSize } from './switch.variants';
+
+@Component({
+  selector: 'sny-switch',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'inline-flex' },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnySwitchComponent), multi: true },
+  ],
+  template: `
+    <button
+      type="button"
+      role="switch"
+      [attr.aria-checked]="checked()"
+      [disabled]="isDisabled()"
+      [class]="trackClass()"
+      (click)="toggle()"
+      (blur)="onTouched()"
+    >
+      <span [class]="thumbClass()"></span>
+    </button>
+  `,
+})
+export class SnySwitchComponent implements ControlValueAccessor {
+  readonly checked = model(false);
+  readonly disabled = input(false);
+  readonly size = input<SwitchSize>('md');
+  readonly class = input<string>('');
+
+  private readonly _disabledByCva = signal(false);
+  protected readonly isDisabled = computed(() => this.disabled() || this._disabledByCva());
+
+  private _onChange: (value: boolean) => void = () => {};
+  protected onTouched: () => void = () => {};
+
+  writeValue(val: boolean): void {
+    this.checked.set(val ?? false);
+  }
+
+  registerOnChange(fn: (value: boolean) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  toggle(): void {
+    const newVal = !this.checked();
+    this.checked.set(newVal);
+    this._onChange(newVal);
+  }
+
+  protected readonly trackClass = computed(() =>
+    cn(
+      switchTrackVariants({ size: this.size() }),
+      this.checked() ? 'bg-primary' : 'bg-input',
+      this.class()
+    )
+  );
+
+  protected readonly thumbClass = computed(() =>
+    cn(
+      'pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform',
+      switchThumbSize[this.size()],
+      this.checked() ? switchThumbTranslate[this.size()] : 'translate-x-0'
+    )
+  );
+}

package/src/lib/switch/switch.variants.ts

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const switchTrackVariants = cva(
+  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    variants: {
+      size: {
+        sm: 'h-5 w-9',
+        md: 'h-6 w-11',
+        lg: 'h-7 w-14',
+      },
+    },
+    defaultVariants: {
+      size: 'md',
+    },
+  }
+);
+
+export const switchThumbSize: Record<string, string> = {
+  sm: 'h-4 w-4',
+  md: 'h-5 w-5',
+  lg: 'h-6 w-6',
+};
+
+export const switchThumbTranslate: Record<string, string> = {
+  sm: 'translate-x-4',
+  md: 'translate-x-5',
+  lg: 'translate-x-7',
+};
+
+export type SwitchSize = 'sm' | 'md' | 'lg';

package/src/lib/table/index.ts

@@ -0,0 +1,12 @@
+export {
+  SnyTableDirective,
+  SnyTableHeaderDirective,
+  SnyTableBodyDirective,
+  SnyTableRowDirective,
+  SnyTableHeadDirective,
+  SnyTableCellDirective,
+  SnyTableFooterDirective,
+  SnyTableCaptionDirective,
+  SNY_TABLE,
+} from './table.directives';
+export { tableVariants, tableCellVariants, type TableVariant, type TableDensity } from './table.variants';

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

@@ -0,0 +1,111 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import {
+  SnyTableDirective,
+  SnyTableHeaderDirective,
+  SnyTableBodyDirective,
+  SnyTableRowDirective,
+  SnyTableHeadDirective,
+  SnyTableCellDirective,
+  SnyTableFooterDirective,
+  SnyTableCaptionDirective,
+} from './table.directives';
+import type { TableVariant, TableDensity } from './table.variants';
+
+@Component({
+  standalone: true,
+  imports: [
+    SnyTableDirective, SnyTableHeaderDirective, SnyTableBodyDirective,
+    SnyTableRowDirective, SnyTableHeadDirective, SnyTableCellDirective,
+    SnyTableFooterDirective, SnyTableCaptionDirective,
+  ],
+  template: `
+    <table snyTable [variant]="variant()" [density]="density()" [hoverable]="hoverable()" [stickyHeader]="stickyHeader()">
+      <caption snyTableCaption>Test table</caption>
+      <thead snyTableHeader>
+        <tr snyTableRow>
+          <th snyTableHead>Name</th>
+          <th snyTableHead>Value</th>
+        </tr>
+      </thead>
+      <tbody snyTableBody>
+        <tr snyTableRow>
+          <td snyTableCell>A</td>
+          <td snyTableCell>1</td>
+        </tr>
+      </tbody>
+      <tfoot snyTableFooter>
+        <tr snyTableRow>
+          <td snyTableCell>Total</td>
+          <td snyTableCell>1</td>
+        </tr>
+      </tfoot>
+    </table>
+  `,
+})
+class TestHostComponent {
+  variant = signal<TableVariant>('default');
+  density = signal<TableDensity>('normal');
+  hoverable = signal(false);
+  stickyHeader = signal(false);
+}
+
+describe('Table Directives', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let table: HTMLTableElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TestHostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    table = fixture.nativeElement.querySelector('table');
+  });
+
+  it('should apply base table classes', () => {
+    expect(table.className).toContain('w-full');
+    expect(table.className).toContain('caption-bottom');
+  });
+
+  it('should apply striped variant', () => {
+    fixture.componentInstance.variant.set('striped');
+    fixture.detectChanges();
+    expect(table.className).toContain('nth-child');
+  });
+
+  it('should apply bordered variant', () => {
+    fixture.componentInstance.variant.set('bordered');
+    fixture.detectChanges();
+    expect(table.className).toContain('border');
+  });
+
+  it('should apply compact density to cells', () => {
+    fixture.componentInstance.density.set('compact');
+    fixture.detectChanges();
+    const th = fixture.nativeElement.querySelector('th');
+    expect(th.className).toContain('px-2');
+    expect(th.className).toContain('text-xs');
+  });
+
+  it('should apply hoverable to rows', () => {
+    fixture.componentInstance.hoverable.set(true);
+    fixture.detectChanges();
+    const row = fixture.nativeElement.querySelector('tbody tr');
+    expect(row.className).toContain('hover:bg-muted/50');
+  });
+
+  it('should apply sticky header', () => {
+    fixture.componentInstance.stickyHeader.set(true);
+    fixture.detectChanges();
+    const thead = fixture.nativeElement.querySelector('thead');
+    expect(thead.className).toContain('sticky');
+  });
+
+  it('should render caption', () => {
+    const caption = fixture.nativeElement.querySelector('caption');
+    expect(caption.className).toContain('text-muted-foreground');
+    expect(caption.textContent).toContain('Test table');
+  });
+});

package/src/lib/table/table.directives.ts

@@ -0,0 +1,126 @@
+import { Directive, computed, inject, input, InjectionToken } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { tableVariants, tableCellVariants, type TableVariant, type TableDensity } from './table.variants';
+
+export const SNY_TABLE = new InjectionToken<SnyTableDirective>('SnyTable');
+
+@Directive({
+  selector: 'table[snyTable]',
+  providers: [{ provide: SNY_TABLE, useExisting: SnyTableDirective }],
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableDirective {
+  readonly variant = input<TableVariant>('default');
+  readonly density = input<TableDensity>('normal');
+  readonly hoverable = input(false);
+  readonly stickyHeader = input(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(tableVariants({ variant: this.variant() }), this.class())
+  );
+}
+
+@Directive({
+  selector: 'thead[snyTableHeader]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableHeaderDirective {
+  readonly class = input<string>('');
+  private readonly table = inject(SNY_TABLE, { optional: true });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      '[&_tr]:border-b',
+      this.table?.stickyHeader() ? 'sticky top-0 z-10 bg-background' : '',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: 'tbody[snyTableBody]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableBodyDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('[&_tr:last-child]:border-0', this.class())
+  );
+}
+
+@Directive({
+  selector: 'tr[snyTableRow]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableRowDirective {
+  readonly class = input<string>('');
+  private readonly table = inject(SNY_TABLE, { optional: true });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'border-b border-border transition-colors data-[state=selected]:bg-muted',
+      this.table?.hoverable() ? 'hover:bg-muted/50' : '',
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: 'th[snyTableHead]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableHeadDirective {
+  readonly class = input<string>('');
+  private readonly table = inject(SNY_TABLE, { optional: true });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'text-left font-medium text-muted-foreground [&[align=center]]:text-center [&[align=right]]:text-right',
+      tableCellVariants({ density: this.table?.density() ?? 'normal' }),
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: 'td[snyTableCell]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableCellDirective {
+  readonly class = input<string>('');
+  private readonly table = inject(SNY_TABLE, { optional: true });
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      '[&[align=center]]:text-center [&[align=right]]:text-right',
+      tableCellVariants({ density: this.table?.density() ?? 'normal' }),
+      this.class()
+    )
+  );
+}
+
+@Directive({
+  selector: 'tfoot[snyTableFooter]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableFooterDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('border-t border-border font-medium [&>tr]:last:border-b-0', this.class())
+  );
+}
+
+@Directive({
+  selector: 'caption[snyTableCaption]',
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyTableCaptionDirective {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('mt-4 text-sm text-muted-foreground', this.class())
+  );
+}

package/src/lib/table/table.variants.ts

@@ -0,0 +1,36 @@
+import { cva } from 'class-variance-authority';
+
+export const tableVariants = cva(
+  'w-full caption-bottom text-sm border-collapse',
+  {
+    variants: {
+      variant: {
+        default: '',
+        striped: '[&_tbody_tr:nth-child(even)]:bg-muted/50',
+        bordered: 'border border-border [&_th]:border [&_th]:border-border [&_td]:border [&_td]:border-border',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export const tableCellVariants = cva(
+  '',
+  {
+    variants: {
+      density: {
+        compact: 'px-2 py-1 text-xs',
+        normal: 'px-4 py-3 text-sm',
+        comfortable: 'px-6 py-4 text-base',
+      },
+    },
+    defaultVariants: {
+      density: 'normal',
+    },
+  }
+);
+
+export type TableVariant = 'default' | 'striped' | 'bordered';
+export type TableDensity = 'compact' | 'normal' | 'comfortable';

package/src/lib/tabs/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyTabsDirective,
+  SnyTabsListDirective,
+  SnyTabsTriggerDirective,
+  SnyTabsContentDirective,
+  SNY_TABS,
+} from './tabs.directives';
+export { tabsListVariants, tabsTriggerVariants } from './tabs.variants';