@sonny-ui/core 0.1.0-alpha.1 → 0.1.0-alpha.11

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

@@ -0,0 +1,84 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+
+@Directive({
+  selector: 'nav[snyBreadcrumb]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    'aria-label': 'Breadcrumb',
+  },
+})
+export class SnyBreadcrumbDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() => cn('', this.class()));
+}
+
+@Directive({
+  selector: 'ol[snyBreadcrumbList]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyBreadcrumbListDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', this.class())
+  );
+}
+
+@Directive({
+  selector: 'li[snyBreadcrumbItem]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyBreadcrumbItemDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('inline-flex items-center gap-1.5', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyBreadcrumbLink]',
+  standalone: true,
+  host: { '[class]': 'computedClass()' },
+})
+export class SnyBreadcrumbLinkDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('transition-colors hover:text-foreground', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyBreadcrumbSeparator]',
+  standalone: true,
+  host: {
+    role: 'presentation',
+    '[aria-hidden]': 'true',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyBreadcrumbSeparatorDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('[&>svg]:size-3.5', this.class())
+  );
+}
+
+@Directive({
+  selector: '[snyBreadcrumbPage]',
+  standalone: true,
+  host: {
+    role: 'link',
+    'aria-disabled': 'true',
+    '[attr.aria-current]': '"page"',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyBreadcrumbPageDirective {
+  readonly class = input<string>('');
+  protected readonly computedClass = computed(() =>
+    cn('font-normal text-foreground', this.class())
+  );
+}

package/src/lib/breadcrumb/index.ts

@@ -0,0 +1,8 @@
+export {
+  SnyBreadcrumbDirective,
+  SnyBreadcrumbListDirective,
+  SnyBreadcrumbItemDirective,
+  SnyBreadcrumbLinkDirective,
+  SnyBreadcrumbSeparatorDirective,
+  SnyBreadcrumbPageDirective,
+} from './breadcrumb.directives';

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

@@ -0,0 +1,92 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyButtonDirective } from './button.directive';
+import type { ButtonVariant, ButtonSize } from './button.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyButtonDirective],
+  template: `<button snyBtn [variant]="variant()" [size]="size()" [disabled]="disabled()" [loading]="loading()">Click</button>`,
+})
+class TestHostComponent {
+  variant = signal<ButtonVariant>('default');
+  size = signal<ButtonSize>('md');
+  disabled = signal(false);
+  loading = signal(false);
+}
+
+describe('SnyButtonDirective', () => {
+  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 apply default variant classes', () => {
+    expect(button.className).toContain('bg-primary');
+    expect(button.className).toContain('text-primary-foreground');
+  });
+
+  it('should apply destructive variant', () => {
+    fixture.componentInstance.variant.set('destructive');
+    fixture.detectChanges();
+    expect(button.className).toContain('bg-destructive');
+  });
+
+  it('should apply outline variant', () => {
+    fixture.componentInstance.variant.set('outline');
+    fixture.detectChanges();
+    expect(button.className).toContain('border');
+    expect(button.className).toContain('bg-background');
+  });
+
+  it('should apply ghost variant', () => {
+    fixture.componentInstance.variant.set('ghost');
+    fixture.detectChanges();
+    expect(button.className).toContain('hover:bg-accent');
+  });
+
+  it('should apply sm size', () => {
+    fixture.componentInstance.size.set('sm');
+    fixture.detectChanges();
+    expect(button.className).toContain('h-9');
+  });
+
+  it('should apply lg size', () => {
+    fixture.componentInstance.size.set('lg');
+    fixture.detectChanges();
+    expect(button.className).toContain('h-11');
+  });
+
+  it('should apply icon size', () => {
+    fixture.componentInstance.size.set('icon');
+    fixture.detectChanges();
+    expect(button.className).toContain('w-10');
+  });
+
+  it('should set aria-disabled when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-disabled')).toBe('true');
+  });
+
+  it('should set aria-disabled when loading', () => {
+    fixture.componentInstance.loading.set(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('aria-disabled')).toBe('true');
+    expect(button.className).toContain('cursor-wait');
+  });
+
+  it('should set tabindex=-1 when disabled', () => {
+    fixture.componentInstance.disabled.set(true);
+    fixture.detectChanges();
+    expect(button.getAttribute('tabindex')).toBe('-1');
+  });
+});

package/src/lib/button/button.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { buttonVariants, type ButtonVariant, type ButtonSize } from './button.variants';
+
+@Directive({
+  selector: 'button[snyBtn], a[snyBtn]',
+  standalone: true,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.aria-disabled]': 'disabled() || loading() || null',
+    '[attr.disabled]': 'disabled() || loading() || null',
+    '[attr.tabindex]': '(disabled() || loading()) ? -1 : null',
+  },
+})
+export class SnyButtonDirective {
+  readonly variant = input<ButtonVariant>('default');
+  readonly size = input<ButtonSize>('md');
+  readonly disabled = input(false);
+  readonly loading = input(false);
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      buttonVariants({ variant: this.variant(), size: this.size() }),
+      this.loading() && 'relative cursor-wait',
+      this.class()
+    )
+  );
+}

package/src/lib/button/button.variants.ts

@@ -0,0 +1,30 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline: 'border border-border bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        sm: 'h-9 rounded-sm px-3',
+        md: 'h-10 px-4 py-2',
+        lg: 'h-11 rounded-sm px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'md',
+    },
+  }
+);
+
+export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';

package/src/lib/button/index.ts

@@ -0,0 +1,2 @@
+export { SnyButtonDirective } from './button.directive';
+export { buttonVariants, type ButtonVariant, type ButtonSize } from './button.variants';

package/src/lib/button-group/button-group.directive.spec.ts

@@ -0,0 +1,46 @@
+import { Component, signal } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { SnyButtonGroupDirective } from './button-group.directive';
+import type { ButtonGroupOrientation } from './button-group.variants';
+
+@Component({
+  standalone: true,
+  imports: [SnyButtonGroupDirective],
+  template: `<div snyButtonGroup [orientation]="orientation()"><button>A</button><button>B</button></div>`,
+})
+class TestHostComponent {
+  orientation = signal<ButtonGroupOrientation>('horizontal');
+}
+
+describe('SnyButtonGroupDirective', () => {
+  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('[snyButtonGroup]');
+  });
+
+  it('should have role="group"', () => {
+    expect(el.getAttribute('role')).toBe('group');
+  });
+
+  it('should apply inline-flex', () => {
+    expect(el.className).toContain('inline-flex');
+  });
+
+  it('should apply horizontal orientation by default', () => {
+    expect(el.className).toContain('flex-row');
+  });
+
+  it('should apply vertical orientation', () => {
+    fixture.componentInstance.orientation.set('vertical');
+    fixture.detectChanges();
+    expect(el.className).toContain('flex-col');
+  });
+});

package/src/lib/button-group/button-group.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, computed, input } from '@angular/core';
+import { cn } from '../core/utils/cn';
+import { buttonGroupVariants, type ButtonGroupOrientation } from './button-group.variants';
+
+@Directive({
+  selector: '[snyButtonGroup]',
+  standalone: true,
+  host: {
+    role: 'group',
+    '[class]': 'computedClass()',
+  },
+})
+export class SnyButtonGroupDirective {
+  readonly orientation = input<ButtonGroupOrientation>('horizontal');
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(buttonGroupVariants({ orientation: this.orientation() }), this.class())
+  );
+}

package/src/lib/button-group/button-group.variants.ts

@@ -0,0 +1,18 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonGroupVariants = cva(
+  'inline-flex [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child:not(:last-child)]:rounded-r-none [&>*:last-child:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:-ml-px',
+  {
+    variants: {
+      orientation: {
+        horizontal: 'flex-row',
+        vertical: 'flex-col [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:first-child:not(:last-child)]:rounded-b-none [&>*:first-child:not(:last-child)]:rounded-r-sm [&>*:last-child:not(:first-child)]:rounded-t-none [&>*:last-child:not(:first-child)]:rounded-l-sm [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:ml-0',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  }
+);
+
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';

package/src/lib/button-group/index.ts

@@ -0,0 +1,2 @@
+export { SnyButtonGroupDirective } from './button-group.directive';
+export { buttonGroupVariants, type ButtonGroupOrientation } from './button-group.variants';

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

@@ -0,0 +1,105 @@
+import { Component, signal } from '@angular/core';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { SnyCalendarComponent } from './calendar.component';
+
+@Component({
+  standalone: true,
+  imports: [SnyCalendarComponent],
+  template: `<sny-calendar [(value)]="selectedDate" />`,
+})
+class TestHostComponent {
+  selectedDate = signal<Date | null>(null);
+}
+
+describe('SnyCalendarComponent', () => {
+  let fixture: ComponentFixture<TestHostComponent>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [TestHostComponent] }).compileComponents();
+    fixture = TestBed.createComponent(TestHostComponent);
+    fixture.detectChanges();
+    host = fixture.nativeElement.querySelector('sny-calendar');
+  });
+
+  it('should render a grid', () => {
+    const grid = host.querySelector('[role="grid"]');
+    expect(grid).not.toBeNull();
+  });
+
+  it('should render day headers', () => {
+    const headers = host.querySelectorAll('[role="grid"] > div:not(button)');
+    expect(headers.length).toBe(7);
+  });
+
+  it('should render 42 day buttons', () => {
+    const buttons = host.querySelectorAll('[role="grid"] button');
+    expect(buttons.length).toBe(42);
+  });
+
+  it('should navigate months', () => {
+    const prevBtn = host.querySelector('[aria-label="Previous month"]') as HTMLButtonElement;
+    const nextBtn = host.querySelector('[aria-label="Next month"]') as HTMLButtonElement;
+    expect(prevBtn).not.toBeNull();
+    expect(nextBtn).not.toBeNull();
+  });
+
+  it('should select a date on click', () => {
+    const buttons = host.querySelectorAll('[role="grid"] button:not([disabled])');
+    const dayButton = Array.from(buttons).find((b) => b.textContent?.trim() === '15') as HTMLButtonElement;
+    if (dayButton) {
+      dayButton.click();
+      fixture.detectChanges();
+      expect(fixture.componentInstance.selectedDate()).not.toBeNull();
+    }
+  });
+});
+
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, SnyCalendarComponent],
+  template: `<sny-calendar [formControl]="ctrl" />`,
+})
+class ReactiveFormHost {
+  ctrl = new FormControl<Date | null>(null);
+}
+
+describe('SnyCalendarComponent — Reactive Forms', () => {
+  let fixture: ComponentFixture<ReactiveFormHost>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [ReactiveFormHost] }).compileComponents();
+    fixture = TestBed.createComponent(ReactiveFormHost);
+    fixture.detectChanges();
+    host = fixture.nativeElement.querySelector('sny-calendar');
+  });
+
+  it('should update view when FormControl value changes (writeValue)', () => {
+    const date = new Date(2025, 5, 15);
+    fixture.componentInstance.ctrl.setValue(date);
+    fixture.detectChanges();
+    const selected = host.querySelector('[role="grid"] button[aria-selected="true"]');
+    expect(selected).not.toBeNull();
+  });
+
+  it('should update FormControl when user interacts (onChange)', () => {
+    const buttons = host.querySelectorAll('[role="grid"] button:not([disabled])');
+    const dayButton = Array.from(buttons).find((b) => b.textContent?.trim() === '15') as HTMLButtonElement;
+    if (dayButton) {
+      dayButton.click();
+      fixture.detectChanges();
+      expect(fixture.componentInstance.ctrl.value).not.toBeNull();
+      expect(fixture.componentInstance.ctrl.value!.getDate()).toBe(15);
+    }
+  });
+
+  it('should disable via FormControl.disable() (setDisabledState)', () => {
+    fixture.componentInstance.ctrl.disable();
+    fixture.detectChanges();
+    const buttons = host.querySelectorAll('[role="grid"] button');
+    const allDisabled = Array.from(buttons).every((b) => (b as HTMLButtonElement).disabled || b.getAttribute('aria-disabled') === 'true');
+    expect(allDisabled).toBe(true);
+  });
+});

package/src/lib/calendar/calendar.component.ts

@@ -0,0 +1,231 @@
+import { ChangeDetectionStrategy, Component, computed, effect, forwardRef, input, model, signal } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { cn } from '../core/utils/cn';
+
+interface CalendarDay {
+  date: Date;
+  day: number;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+  isDisabled: boolean;
+}
+
+@Component({
+  selector: 'sny-calendar',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    '[class]': '"inline-block p-3 rounded-md border bg-background"',
+    '(keydown)': 'onKeydown($event)',
+  },
+  providers: [
+    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => SnyCalendarComponent), multi: true },
+  ],
+  template: `
+    <div class="flex items-center justify-between mb-4">
+      <button
+        class="inline-flex items-center justify-center rounded-md text-sm h-7 w-7 hover:bg-accent"
+        (click)="prevMonth()"
+        aria-label="Previous month"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 18-6-6 6-6"/></svg>
+      </button>
+      <span class="text-sm font-medium">{{ monthYearLabel() }}</span>
+      <button
+        class="inline-flex items-center justify-center rounded-md text-sm h-7 w-7 hover:bg-accent"
+        (click)="nextMonth()"
+        aria-label="Next month"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>
+      </button>
+    </div>
+
+    <div role="grid" aria-label="Calendar" class="grid grid-cols-7 gap-0">
+      @for (dayName of weekDays; track dayName) {
+        <div class="text-center text-xs text-muted-foreground font-medium py-1">{{ dayName }}</div>
+      }
+      @for (day of days(); track day.date.getTime()) {
+        <button
+          [class]="dayClass(day)"
+          [disabled]="day.isDisabled"
+          [attr.aria-selected]="day.isSelected || null"
+          [attr.aria-current]="day.isToday ? 'date' : null"
+          [attr.aria-disabled]="day.isDisabled || null"
+          (click)="selectDate(day.date)"
+        >
+          {{ day.day }}
+        </button>
+      }
+    </div>
+  `,
+})
+export class SnyCalendarComponent implements ControlValueAccessor {
+  readonly value = model<Date | null>(null);
+  readonly min = input<Date | undefined>(undefined);
+  readonly max = input<Date | undefined>(undefined);
+  readonly locale = input('en-US');
+  readonly class = input<string>('');
+
+  private readonly _disabledByCva = signal(false);
+
+  readonly viewDate = signal(new Date());
+  readonly weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+  private _onChange: (value: Date | null) => void = () => {};
+  protected onTouched: () => void = () => {};
+  private _writing = false;
+
+  constructor() {
+    effect(() => {
+      const val = this.value();
+      if (this._writing) {
+        this._writing = false;
+        return;
+      }
+      this._onChange(val);
+    });
+  }
+
+  writeValue(val: Date | null): void {
+    this._writing = true;
+    this.value.set(val ?? null);
+    if (val) {
+      this.viewDate.set(new Date(val.getFullYear(), val.getMonth(), 1));
+    }
+  }
+
+  registerOnChange(fn: (value: Date | null) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this._disabledByCva.set(isDisabled);
+  }
+
+  readonly monthYearLabel = computed(() => {
+    const d = this.viewDate();
+    return d.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
+  });
+
+  readonly days = computed<CalendarDay[]>(() => {
+    const view = this.viewDate();
+    const year = view.getFullYear();
+    const month = view.getMonth();
+    const today = new Date();
+    const selected = this.value();
+    const minDate = this.min();
+    const maxDate = this.max();
+
+    const firstDay = new Date(year, month, 1);
+    const startDay = firstDay.getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const daysInPrevMonth = new Date(year, month, 0).getDate();
+
+    const days: CalendarDay[] = [];
+
+    // Previous month
+    for (let i = startDay - 1; i >= 0; i--) {
+      const date = new Date(year, month - 1, daysInPrevMonth - i);
+      days.push(this.createDay(date, false, today, selected, minDate, maxDate));
+    }
+
+    // Current month
+    for (let d = 1; d <= daysInMonth; d++) {
+      const date = new Date(year, month, d);
+      days.push(this.createDay(date, true, today, selected, minDate, maxDate));
+    }
+
+    // Next month fill
+    const remaining = 42 - days.length;
+    for (let d = 1; d <= remaining; d++) {
+      const date = new Date(year, month + 1, d);
+      days.push(this.createDay(date, false, today, selected, minDate, maxDate));
+    }
+
+    return days;
+  });
+
+  prevMonth(): void {
+    this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+  }
+
+  nextMonth(): void {
+    this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+  }
+
+  selectDate(date: Date): void {
+    this.value.set(date);
+    this.onTouched();
+  }
+
+  onKeydown(event: KeyboardEvent): void {
+    // Simplified keyboard navigation
+    switch (event.key) {
+      case 'ArrowLeft':
+        event.preventDefault();
+        this.navigateDays(-1);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        this.navigateDays(1);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.navigateDays(-7);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        this.navigateDays(7);
+        break;
+    }
+  }
+
+  dayClass(day: CalendarDay): string {
+    return cn(
+      'inline-flex items-center justify-center rounded-md text-sm h-8 w-8 transition-colors',
+      day.isCurrentMonth ? 'text-foreground' : 'text-muted-foreground/50',
+      day.isToday && !day.isSelected && 'bg-accent font-bold',
+      day.isSelected && 'bg-primary text-primary-foreground',
+      day.isDisabled && 'opacity-50 cursor-not-allowed',
+      !day.isDisabled && !day.isSelected && 'hover:bg-accent cursor-pointer'
+    );
+  }
+
+  private navigateDays(offset: number): void {
+    const current = this.value() ?? new Date();
+    const next = new Date(current);
+    next.setDate(next.getDate() + offset);
+    this.value.set(next);
+    this.viewDate.set(new Date(next.getFullYear(), next.getMonth(), 1));
+  }
+
+  private createDay(
+    date: Date,
+    isCurrentMonth: boolean,
+    today: Date,
+    selected: Date | null,
+    minDate: Date | undefined,
+    maxDate: Date | undefined
+  ): CalendarDay {
+    const isToday = this.isSameDay(date, today);
+    const isSelected = selected ? this.isSameDay(date, selected) : false;
+    const isDisabled =
+      this._disabledByCva() ||
+      (minDate ? date < minDate : false) || (maxDate ? date > maxDate : false);
+
+    return { date, day: date.getDate(), isCurrentMonth, isToday, isSelected, isDisabled };
+  }
+
+  private isSameDay(a: Date, b: Date): boolean {
+    return (
+      a.getFullYear() === b.getFullYear() &&
+      a.getMonth() === b.getMonth() &&
+      a.getDate() === b.getDate()
+    );
+  }
+}

package/src/lib/calendar/index.ts

@@ -0,0 +1 @@
+export { SnyCalendarComponent } from './calendar.component';