@sonny-ui/core 0.1.0-alpha.14 → 0.1.0-alpha.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonny-ui/core",
-  "version": "0.1.0-alpha.14",
+  "version": "0.1.0-alpha.16",
   "description": "Angular UI component library inspired by shadcn/ui — signals, zoneless, Tailwind CSS v4",
   "peerDependencies": {
     "@angular/common": "^21.0.0",

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

@@ -103,3 +103,90 @@ describe('SnyCalendarComponent — Reactive Forms', () => {
     expect(allDisabled).toBe(true);
   });
 });
+
+// --- Range Mode Tests ---
+
+import type { DateRange } from './calendar.types';
+
+@Component({
+  standalone: true,
+  imports: [SnyCalendarComponent],
+  template: `<sny-calendar mode="range" [(rangeValue)]="range" />`,
+})
+class RangeTestHost {
+  range = signal<DateRange | null>(null);
+}
+
+describe('SnyCalendarComponent — Range Mode', () => {
+  let fixture: ComponentFixture<RangeTestHost>;
+  let host: HTMLElement;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({ imports: [RangeTestHost] }).compileComponents();
+    fixture = TestBed.createComponent(RangeTestHost);
+    fixture.detectChanges();
+    host = fixture.nativeElement.querySelector('sny-calendar');
+  });
+
+  function clickDay(dayNum: string): void {
+    const buttons = host.querySelectorAll('[role="grid"] button:not([disabled])');
+    const btn = Array.from(buttons).find((b) => b.textContent?.trim() === dayNum) as HTMLButtonElement;
+    btn?.click();
+    fixture.detectChanges();
+  }
+
+  it('should render 42 buttons in range mode', () => {
+    const buttons = host.querySelectorAll('[role="grid"] button');
+    expect(buttons.length).toBe(42);
+  });
+
+  it('should set range start on first click', () => {
+    clickDay('10');
+    const range = fixture.componentInstance.range();
+    expect(range).not.toBeNull();
+    expect(range!.start).not.toBeNull();
+    expect(range!.start!.getDate()).toBe(10);
+    expect(range!.end).toBeNull();
+  });
+
+  it('should set range end on second click', () => {
+    clickDay('10');
+    clickDay('20');
+    const range = fixture.componentInstance.range();
+    expect(range!.start!.getDate()).toBe(10);
+    expect(range!.end!.getDate()).toBe(20);
+  });
+
+  it('should swap if second click is before start', () => {
+    clickDay('20');
+    clickDay('5');
+    const range = fixture.componentInstance.range();
+    expect(range!.start!.getDate()).toBe(5);
+    expect(range!.end!.getDate()).toBe(20);
+  });
+
+  it('should reset range on third click', () => {
+    clickDay('10');
+    clickDay('20');
+    clickDay('15');
+    const range = fixture.componentInstance.range();
+    expect(range!.start!.getDate()).toBe(15);
+    expect(range!.end).toBeNull();
+  });
+
+  it('should have range highlight classes when range is set', () => {
+    clickDay('10');
+    clickDay('15');
+    fixture.detectChanges();
+    const buttons = host.querySelectorAll('[role="grid"] button');
+    const classes = Array.from(buttons).map((b) => b.className);
+    const hasRangeStyle = classes.some((c) => c.includes('bg-primary/15') || c.includes('rounded-l-none') || c.includes('rounded-r-none'));
+    expect(hasRangeStyle).toBe(true);
+  });
+
+  it('should not affect single mode behavior', () => {
+    // This test uses the basic TestHostComponent which defaults to single mode
+    // Regression test: existing single mode tests above should still pass
+    expect(true).toBe(true);
+  });
+});

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

@@ -1,58 +1,70 @@
-import { ChangeDetectionStrategy, Component, computed, forwardRef, input, model, signal } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  forwardRef,
+  input,
+  linkedSignal,
+  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;
-}
+import type { CalendarDay, CalendarMode, DateRange } from './calendar.types';
 
 @Component({
   selector: 'sny-calendar',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
-    '[class]': '"inline-block p-3 rounded-md border bg-background"',
+    '[class]': 'hostClass()',
     '(keydown)': 'onKeydown($event)',
+    'role': 'application',
+    'aria-label': 'Calendar',
   },
   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>
+    @if (showNavigation()) {
+      <div class="flex items-center justify-between mb-3">
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+          (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" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+        </button>
+        <span class="text-sm font-semibold tracking-tight">{{ monthYearLabel() }}</span>
+        <button
+          type="button"
+          class="inline-flex items-center justify-center rounded-md h-8 w-8 hover:bg-accent hover:text-accent-foreground transition-colors"
+          (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" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+        </button>
+      </div>
+    }
 
-    <div role="grid" aria-label="Calendar" class="grid grid-cols-7 gap-0">
+    <div role="grid" class="grid grid-cols-7 gap-1">
       @for (dayName of weekDays; track dayName) {
-        <div class="text-center text-xs text-muted-foreground font-medium py-1">{{ dayName }}</div>
+        <div class="text-center text-xs text-muted-foreground font-medium h-9 flex items-center justify-center" role="columnheader">{{ dayName }}</div>
       }
       @for (day of days(); track day.date.getTime()) {
         <button
+          type="button"
           [class]="dayClass(day)"
           [disabled]="day.isDisabled"
-          [attr.aria-selected]="day.isSelected || null"
+          [attr.aria-selected]="day.isSelected || day.isRangeStart || day.isRangeEnd || null"
           [attr.aria-current]="day.isToday ? 'date' : null"
           [attr.aria-disabled]="day.isDisabled || null"
-          (click)="selectDate(day.date)"
+          [attr.aria-label]="day.date.toLocaleDateString(locale(), { month: 'long', day: 'numeric', year: 'numeric' })"
+          role="gridcell"
+          (click)="onDayClick(day.date)"
+          (mouseenter)="onDayHover(day.date)"
+          (mouseleave)="onDayHover(null)"
         >
           {{ day.day }}
         </button>
@@ -61,28 +73,53 @@ interface CalendarDay {
   `,
 })
 export class SnyCalendarComponent implements ControlValueAccessor {
+  // Existing inputs (backwards compatible)
   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);
+  // Range mode inputs
+  readonly mode = input<CalendarMode>('single');
+  readonly rangeValue = model<DateRange | null>(null);
+  readonly showNavigation = input(true);
+  readonly initialViewDate = input<Date | undefined>(undefined);
+  readonly borderless = input(false);
 
-  readonly viewDate = signal(new Date());
+  readonly hostClass = computed(() =>
+    this.borderless()
+      ? 'inline-block p-3 bg-background'
+      : 'inline-block p-4 rounded-md border border-border bg-background'
+  );
+
+  // Internal state
+  private readonly _disabledByCva = signal(false);
+  readonly hoveredDate = signal<Date | null>(null);
+  readonly viewDate = linkedSignal(() => this.initialViewDate() ?? new Date());
   readonly weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
 
-  private _onChange: (value: Date | null) => void = () => {};
+  // CVA
+  private _onChange: (value: unknown) => void = () => {};
   protected onTouched: () => void = () => {};
 
-  writeValue(val: Date | null): void {
-    this.value.set(val ?? null);
-    if (val) {
-      this.viewDate.set(new Date(val.getFullYear(), val.getMonth(), 1));
+  writeValue(val: unknown): void {
+    if (this.mode() === 'range') {
+      this.rangeValue.set((val as DateRange) ?? null);
+      const range = val as DateRange | null;
+      if (range?.start) {
+        this.viewDate.set(new Date(range.start.getFullYear(), range.start.getMonth(), 1));
+      }
+    } else {
+      this.value.set((val as Date) ?? null);
+      if (val) {
+        const d = val as Date;
+        this.viewDate.set(new Date(d.getFullYear(), d.getMonth(), 1));
+      }
     }
   }
 
-  registerOnChange(fn: (value: Date | null) => void): void {
+  registerOnChange(fn: (value: unknown) => void): void {
     this._onChange = fn;
   }
 
@@ -94,6 +131,7 @@ export class SnyCalendarComponent implements ControlValueAccessor {
     this._disabledByCva.set(isDisabled);
   }
 
+  // Computed
   readonly monthYearLabel = computed(() => {
     const d = this.viewDate();
     return d.toLocaleDateString(this.locale(), { month: 'long', year: 'numeric' });
@@ -105,6 +143,8 @@ export class SnyCalendarComponent implements ControlValueAccessor {
     const month = view.getMonth();
     const today = new Date();
     const selected = this.value();
+    const rangeVal = this.mode() === 'range' ? this.rangeValue() : null;
+    const hovered = this.hoveredDate();
     const minDate = this.min();
     const maxDate = this.max();
 
@@ -115,44 +155,78 @@ export class SnyCalendarComponent implements ControlValueAccessor {
 
     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));
+      days.push(this.createDay(date, false, today, selected, rangeVal, hovered, 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));
+      days.push(this.createDay(date, true, today, selected, rangeVal, hovered, 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));
+      days.push(this.createDay(date, false, today, selected, rangeVal, hovered, minDate, maxDate));
     }
 
     return days;
   });
 
+  // Navigation
   prevMonth(): void {
-    this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() - 1, 1));
+    this.viewDate.set(new Date(
+      this.viewDate().getFullYear(),
+      this.viewDate().getMonth() - 1,
+      1,
+    ));
   }
 
   nextMonth(): void {
-    this.viewDate.update((d) => new Date(d.getFullYear(), d.getMonth() + 1, 1));
+    this.viewDate.set(new Date(
+      this.viewDate().getFullYear(),
+      this.viewDate().getMonth() + 1,
+      1,
+    ));
   }
 
-  selectDate(date: Date): void {
-    this.value.set(date);
-    this._onChange(date);
+  // Click handler
+  onDayClick(date: Date): void {
+    if (this.mode() === 'single') {
+      this.value.set(date);
+      this._onChange(date);
+      this.onTouched();
+      return;
+    }
+
+    // Range mode
+    const current = this.rangeValue();
+    if (!current?.start || (current.start && current.end)) {
+      this.rangeValue.set({ start: date, end: null });
+    } else {
+      const start = current.start;
+      if (date < start) {
+        this.rangeValue.set({ start: date, end: start });
+      } else if (this.isSameDay(date, start)) {
+        this.rangeValue.set({ start: date, end: date });
+      } else {
+        this.rangeValue.set({ start, end: date });
+      }
+    }
+    this._onChange(this.rangeValue());
     this.onTouched();
   }
 
+  // Hover handler
+  onDayHover(date: Date | null): void {
+    if (this.mode() === 'range') {
+      this.hoveredDate.set(date);
+    }
+  }
+
+  // Keyboard
   onKeydown(event: KeyboardEvent): void {
-    // Simplified keyboard navigation
     switch (event.key) {
       case 'ArrowLeft':
         event.preventDefault();
@@ -173,17 +247,35 @@ export class SnyCalendarComponent implements ControlValueAccessor {
     }
   }
 
+  // Styling
   dayClass(day: CalendarDay): string {
+    const isEndpoint = day.isRangeStart || day.isRangeEnd;
     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'
+      'inline-flex items-center justify-center text-sm h-9 w-9 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      // Shape
+      day.isRangeStart && !day.isRangeEnd ? 'rounded-l-md rounded-r-none' :
+      day.isRangeEnd && !day.isRangeStart ? 'rounded-r-md rounded-l-none' :
+      day.isInRange || day.isRangePreview ? 'rounded-none' :
+      'rounded-md',
+      // Base text color
+      !day.isCurrentMonth && 'text-muted-foreground/40',
+      day.isCurrentMonth && !day.isSelected && !isEndpoint && 'text-foreground',
+      // Today indicator
+      day.isToday && !day.isSelected && !isEndpoint && 'bg-accent text-accent-foreground font-semibold',
+      // Single selected
+      day.isSelected && this.mode() === 'single' && 'bg-primary text-primary-foreground font-semibold shadow-sm',
+      // Range endpoints
+      isEndpoint && 'bg-primary text-primary-foreground font-semibold shadow-sm',
+      // Range band
+      day.isInRange && 'bg-primary/10 text-foreground',
+      day.isRangePreview && 'bg-primary/5 text-foreground',
+      // States
+      day.isDisabled && 'opacity-40 cursor-not-allowed pointer-events-none',
+      !day.isDisabled && !day.isSelected && !isEndpoint && 'hover:bg-accent hover:text-accent-foreground cursor-pointer',
     );
   }
 
+  // Private helpers
   private navigateDays(offset: number): void {
     const current = this.value() ?? new Date();
     const next = new Date(current);
@@ -198,16 +290,47 @@ export class SnyCalendarComponent implements ControlValueAccessor {
     isCurrentMonth: boolean,
     today: Date,
     selected: Date | null,
+    rangeVal: DateRange | null,
+    hoveredDate: Date | null,
     minDate: Date | undefined,
-    maxDate: 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);
+      (minDate ? date < minDate : false) ||
+      (maxDate ? date > maxDate : false);
+
+    let isRangeStart = false;
+    let isRangeEnd = false;
+    let isInRange = false;
+    let isRangePreview = false;
+
+    if (rangeVal) {
+      const { start, end } = rangeVal;
+      if (start) isRangeStart = this.isSameDay(date, start);
+      if (end) isRangeEnd = this.isSameDay(date, end);
+      if (start && end) {
+        isInRange = date > start && date < end && !isRangeStart && !isRangeEnd;
+      }
+      // Preview: start set, no end yet, user hovering
+      if (start && !end && hoveredDate && !this.isSameDay(hoveredDate, start)) {
+        const previewStart = hoveredDate > start ? start : hoveredDate;
+        const previewEnd = hoveredDate > start ? hoveredDate : start;
+        if (date > previewStart && date < previewEnd) {
+          isRangePreview = true;
+        }
+        if (this.isSameDay(date, hoveredDate) && !isRangeStart) {
+          isRangePreview = true;
+        }
+      }
+    }
 
-    return { date, day: date.getDate(), isCurrentMonth, isToday, isSelected, isDisabled };
+    return {
+      date, day: date.getDate(), isCurrentMonth, isToday, isSelected, isDisabled,
+      isRangeStart, isRangeEnd, isInRange, isRangePreview,
+    };
   }
 
   private isSameDay(a: Date, b: Date): boolean {

package/src/lib/calendar/calendar.types.ts

@@ -0,0 +1,24 @@
+export interface DateRange {
+  start: Date | null;
+  end: Date | null;
+}
+
+export interface CalendarDay {
+  date: Date;
+  day: number;
+  isCurrentMonth: boolean;
+  isToday: boolean;
+  isSelected: boolean;
+  isDisabled: boolean;
+  isRangeStart: boolean;
+  isRangeEnd: boolean;
+  isInRange: boolean;
+  isRangePreview: boolean;
+}
+
+export type CalendarMode = 'single' | 'range';
+
+export interface DatePickerPreset {
+  label: string;
+  range: DateRange;
+}

package/src/lib/calendar/index.ts

@@ -1 +1,7 @@
 export { SnyCalendarComponent } from './calendar.component';
+export type {
+  DateRange,
+  CalendarDay,
+  CalendarMode,
+  DatePickerPreset,
+} from './calendar.types';