@ng-cn/core 1.0.15 → 1.0.17

package/src/app/lib/components/ui/button-group/button-group.component.ts

@@ -1,14 +1,6 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
-import {
-    buttonGroupVariants,
-    type ButtonGroupVariants,
-} from './button-group-variants';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
+import { buttonGroupVariants, type ButtonGroupVariants } from './button-group-variants';
 
 /**
  * ButtonGroup component - groups buttons together with shared styling.
@@ -32,6 +24,7 @@ import {
   selector: 'ButtonGroup',
   template: `<ng-content />`,
   host: {
+    'attr.data-slot': '"button-group"',
     '[class]': 'computedClass()',
     role: 'group',
   },
@@ -39,8 +32,7 @@ import {
 })
 export class ButtonGroup {
   /** The orientation of the button group */
-  readonly orientation =
-    input<ButtonGroupVariants['orientation']>('horizontal');
+  readonly orientation = input<ButtonGroupVariants['orientation']>('horizontal');
 
   /** Additional CSS classes to apply */
   readonly class = input<string>('');
@@ -51,7 +43,7 @@ export class ButtonGroup {
       buttonGroupVariants({
         orientation: this.orientation(),
       }),
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/button-group/index.ts

@@ -1,6 +1,2 @@
-export {
-    buttonGroupVariants,
-    type ButtonGroupVariants
-} from './button-group-variants';
+export { buttonGroupVariants, type ButtonGroupVariants } from './button-group-variants';
 export { ButtonGroup } from './button-group.component';
-

package/src/app/lib/components/ui/calendar/calendar.component.ts

@@ -1,14 +1,14 @@
 import { cn } from '@/lib/utils';
 import { LiveAnnouncerService } from '@/lib/utils/accessibility';
 import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    inject,
-    input,
-    model,
-    output,
-    signal,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  model,
+  output,
+  signal,
 } from '@angular/core';
 import { ChevronLeft, ChevronRight, LucideAngularModule } from 'lucide-angular';
 import { buttonVariants } from '../button';
@@ -29,10 +29,10 @@ import { buttonVariants } from '../button';
   template: `
     <div [class]="computedClass()" role="application" [attr.aria-label]="ariaLabel()">
       <!-- Header with navigation -->
-      <div class="flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0">
-        <div class="space-y-4">
+      <div class="w-full">
+        <div class="w-full space-y-4">
           <!-- Month navigation -->
-          <div class="flex justify-center pt-1 relative items-center">
+          <div class="relative flex items-center justify-center pt-1">
             <div
               class="text-sm font-medium"
               aria-live="polite"
@@ -63,13 +63,17 @@ import { buttonVariants } from '../button';
           </div>
 
           <!-- Calendar grid -->
-          <table class="w-full border-collapse space-y-1" role="grid" [attr.aria-label]="monthYear()">
+          <table
+            class="w-full border-collapse space-y-1"
+            role="grid"
+            [attr.aria-label]="monthYear()"
+          >
             <thead>
               <tr class="flex" role="row">
                 @for (day of weekDays; track day; let i = $index) {
                   <th
                     scope="col"
-                    class="text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]"
+                    class="text-muted-foreground w-full rounded-md font-normal text-[0.8rem]"
                     [attr.aria-label]="fullWeekDays[i]"
                   >
                     {{ day }}
@@ -83,7 +87,7 @@ import { buttonVariants } from '../button';
                   @for (day of week; track day.date.toISOString()) {
                     <td
                       role="gridcell"
-                      class="relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md"
+                      class="relative w-full p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-gray-100 dark:[&:has([aria-selected])]:bg-neutral-800 [&:has([aria-selected].day-outside)]:bg-gray-100/50 dark:[&:has([aria-selected].day-outside)]:bg-neutral-800/50 [&:has([aria-selected].day-range-end)]:rounded-r-md"
                       [class.first:rounded-l-md]="true"
                       [class.last:rounded-r-md]="true"
                     >
@@ -91,9 +95,9 @@ import { buttonVariants } from '../button';
                         type="button"
                         [class]="getDayClass(day)"
                         [attr.aria-label]="getDateLabel(day.date)"
-                        [attr.aria-selected]="isSelected(day.date)"
+                        [attr.aria-selected]="isSelected(day.date) ? 'true' : null"
                         [attr.aria-current]="isToday(day.date) ? 'date' : null"
-                        [attr.aria-disabled]="day.disabled"
+                        [attr.aria-disabled]="day.disabled ? 'true' : null"
                         [disabled]="day.disabled"
                         [tabindex]="getDayTabIndex(day)"
                         (click)="selectDate(day.date)"
@@ -114,57 +118,103 @@ import { buttonVariants } from '../button';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class Calendar {
-  protected readonly ChevronLeftIcon = ChevronLeft;
-  protected readonly ChevronRightIcon = ChevronRight;
-  private readonly liveAnnouncer = inject(LiveAnnouncerService);
+  /** Date select event */
+  readonly onSelect = output<Date | undefined>();
+  /** Month change event */
+  readonly onMonthChange = output<Date>();
 
   /** Selected date */
   readonly selected = model<Date | undefined>(undefined);
 
   /** Mode - single, multiple, or range */
   readonly mode = input<'single' | 'multiple' | 'range'>('single');
-
   /** Number of months to display */
   readonly numberOfMonths = input<number>(1);
-
   /** Whether to show days outside current month */
   readonly showOutsideDays = input<boolean>(true);
-
   /** Disabled dates function */
   readonly disabled = input<((date: Date) => boolean) | undefined>(undefined);
-
   /** Accessible label for the calendar */
   readonly ariaLabel = input<string>('Calendar');
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  /** Date select event */
-  readonly onSelect = output<Date | undefined>();
-
-  /** Month change event */
-  readonly onMonthChange = output<Date>();
-
-  protected readonly weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-  protected readonly fullWeekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-
-  protected readonly currentMonth = signal(new Date());
-
-  protected readonly computedClass = computed(() =>
-    cn('p-3', this.class())
-  );
+  private readonly _liveAnnouncer = inject(LiveAnnouncerService);
 
+  protected readonly computedClass = computed(() => cn('w-full p-3', this.class()));
   protected readonly navButtonClass = computed(() =>
     cn(
       buttonVariants({ variant: 'outline' }),
-      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
-    )
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 hover:bg-gray-100 dark:hover:bg-neutral-800',
+    ),
   );
-
   protected readonly monthYear = computed(() => {
     const date = this.currentMonth();
     return date.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
   });
+  protected readonly calendarWeeks = computed(() => {
+    const date = this.currentMonth();
+    const year = date.getFullYear();
+    const month = date.getMonth();
+
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+
+    const startDate = new Date(firstDay);
+    startDate.setDate(startDate.getDate() - firstDay.getDay());
+
+    const endDate = new Date(lastDay);
+    endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()));
+
+    const weeks: {
+      date: Date;
+      isOutside: boolean;
+      disabled: boolean;
+    }[][] = [];
+
+    const current = new Date(startDate);
+    while (current <= endDate) {
+      const week: {
+        date: Date;
+        isOutside: boolean;
+        disabled: boolean;
+      }[] = [];
+
+      for (let i = 0; i < 7; i++) {
+        const dayDate = new Date(current);
+        const isOutside = dayDate.getMonth() !== month;
+        const disabledFn = this.disabled();
+        const isDisabled = disabledFn ? disabledFn(dayDate) : false;
+
+        week.push({
+          date: dayDate,
+          isOutside,
+          disabled: isDisabled,
+        });
+
+        current.setDate(current.getDate() + 1);
+      }
+
+      weeks.push(week);
+    }
+
+    return weeks;
+  });
+
+  protected readonly currentMonth = signal(new Date());
+
+  protected readonly ChevronLeftIcon = ChevronLeft;
+  protected readonly ChevronRightIcon = ChevronRight;
+  protected readonly weekDays = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  protected readonly fullWeekDays = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ];
 
   /** Get accessible label for a date */
   protected getDateLabel(date: Date): string {
@@ -172,7 +222,7 @@ export class Calendar {
       weekday: 'long',
       month: 'long',
       day: 'numeric',
-      year: 'numeric'
+      year: 'numeric',
     };
     const label = date.toLocaleDateString('en-US', options);
 
@@ -184,26 +234,22 @@ export class Calendar {
     }
     return label;
   }
-
   /** Check if date is today */
   protected isToday(date: Date): boolean {
     return this.isSameDay(date, new Date());
   }
-
   /** Get label for previous month button */
   protected getPreviousMonthLabel(): string {
     const current = this.currentMonth();
     const prev = new Date(current.getFullYear(), current.getMonth() - 1, 1);
     return prev.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
   }
-
   /** Get label for next month button */
   protected getNextMonthLabel(): string {
     const current = this.currentMonth();
     const next = new Date(current.getFullYear(), current.getMonth() + 1, 1);
     return next.toLocaleDateString('en-US', { month: 'long', year: 'numeric' });
   }
-
   /** Get tabindex for day button (roving tabindex) */
   protected getDayTabIndex(day: { date: Date; isOutside: boolean; disabled: boolean }): number {
     if (day.disabled || day.isOutside) return -1;
@@ -212,7 +258,6 @@ export class Calendar {
     if (this.isToday(day.date)) return 0;
     return -1;
   }
-
   /** Handle keyboard navigation within the calendar */
   protected onDayKeydown(event: KeyboardEvent, currentDate: Date): void {
     let newDate: Date | null = null;
@@ -255,109 +300,52 @@ export class Calendar {
       }
       // Focus the new date after DOM update
       setTimeout(() => {
-        const button = document.querySelector(`[aria-label*="${newDate!.getDate()},"]`) as HTMLElement;
+        const button = document.querySelector(
+          `[aria-label*="${newDate!.getDate()},"]`,
+        ) as HTMLElement;
         button?.focus();
       }, 0);
     }
   }
-
-  protected readonly calendarWeeks = computed(() => {
-    const date = this.currentMonth();
-    const year = date.getFullYear();
-    const month = date.getMonth();
-
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-
-    const startDate = new Date(firstDay);
-    startDate.setDate(startDate.getDate() - firstDay.getDay());
-
-    const endDate = new Date(lastDay);
-    endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()));
-
-    const weeks: {
-      date: Date;
-      isOutside: boolean;
-      disabled: boolean;
-    }[][] = [];
-
-    const current = new Date(startDate);
-    while (current <= endDate) {
-      const week: {
-        date: Date;
-        isOutside: boolean;
-        disabled: boolean;
-      }[] = [];
-
-      for (let i = 0; i < 7; i++) {
-        const dayDate = new Date(current);
-        const isOutside = dayDate.getMonth() !== month;
-        const disabledFn = this.disabled();
-        const isDisabled = disabledFn ? disabledFn(dayDate) : false;
-
-        week.push({
-          date: dayDate,
-          isOutside,
-          disabled: isDisabled,
-        });
-
-        current.setDate(current.getDate() + 1);
-      }
-
-      weeks.push(week);
-    }
-
-    return weeks;
-  });
-
-  protected getDayClass(day: {
-    date: Date;
-    isOutside: boolean;
-    disabled: boolean;
-  }): string {
+  protected getDayClass(day: { date: Date; isOutside: boolean; disabled: boolean }): string {
     const todayCheck = this.isSameDay(day.date, new Date());
     const selected = this.isSelected(day.date);
 
     return cn(
       buttonVariants({ variant: 'ghost' }),
-      'h-8 w-8 p-0 font-normal aria-selected:opacity-100',
-      todayCheck && 'bg-accent text-accent-foreground',
+      'h-9 w-full p-0 font-normal aria-selected:opacity-100 hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-100',
+      todayCheck && 'bg-gray-100 text-gray-900 dark:bg-neutral-800 dark:text-neutral-100',
       selected &&
         'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
       day.isOutside &&
-        'day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground',
-      day.disabled && 'text-muted-foreground opacity-50'
+        'day-outside text-muted-foreground aria-selected:bg-gray-100/50 aria-selected:text-muted-foreground dark:aria-selected:bg-neutral-800/50',
+      day.disabled && 'text-muted-foreground opacity-50',
     );
   }
-
   protected isSelected(date: Date): boolean {
     const selected = this.selected();
     if (!selected) return false;
     return this.isSameDay(date, selected);
   }
-
   protected selectDate(date: Date): void {
     this.selected.set(date);
     this.onSelect.emit(date);
-    this.liveAnnouncer.announce(`Selected ${this.getDateLabel(date)}`, 'polite');
+    this._liveAnnouncer.announce(`Selected ${this.getDateLabel(date)}`, 'polite');
   }
-
   protected previousMonth(): void {
     const current = this.currentMonth();
     const newDate = new Date(current.getFullYear(), current.getMonth() - 1, 1);
     this.currentMonth.set(newDate);
     this.onMonthChange.emit(newDate);
-    this.liveAnnouncer.announce(this.getPreviousMonthLabel(), 'polite');
+    this._liveAnnouncer.announce(this.getPreviousMonthLabel(), 'polite');
   }
-
   protected nextMonth(): void {
     const current = this.currentMonth();
     const newDate = new Date(current.getFullYear(), current.getMonth() + 1, 1);
     this.currentMonth.set(newDate);
     this.onMonthChange.emit(newDate);
-    this.liveAnnouncer.announce(this.getNextMonthLabel(), 'polite');
+    this._liveAnnouncer.announce(this.getNextMonthLabel(), 'polite');
   }
-
   private isSameDay(date1: Date, date2: Date): boolean {
     return (
       date1.getFullYear() === date2.getFullYear() &&

package/src/app/lib/components/ui/card/card-action.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Card action element.
@@ -31,9 +26,6 @@ export class CardAction {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn(
-      'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
-      this.class()
-    )
+    cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', this.class()),
   );
 }

package/src/app/lib/components/ui/card/card-content.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Card content section.

package/src/app/lib/components/ui/card/card-description.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Card description element.
@@ -26,6 +21,6 @@ export class CardDescription {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('text-muted-foreground text-sm', this.class())
+    cn('text-muted-foreground text-sm', this.class()),
   );
 }

package/src/app/lib/components/ui/card/card-footer.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Card footer section.
@@ -29,6 +24,6 @@ export class CardFooter {
   readonly class = input<string>('');
 
   protected readonly computedClass = computed(() =>
-    cn('flex items-center px-6 [.border-t]:pt-6', this.class())
+    cn('flex items-center px-6 [.border-t]:pt-6', this.class()),
   );
 }

package/src/app/lib/components/ui/card/card-header.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Card header section.
@@ -31,7 +26,7 @@ export class CardHeader {
   protected readonly computedClass = computed(() =>
     cn(
       '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/card/card-title.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Card title element.
@@ -25,7 +20,5 @@ import {
 export class CardTitle {
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('leading-none font-semibold', this.class())
-  );
+  protected readonly computedClass = computed(() => cn('leading-none font-semibold', this.class()));
 }

package/src/app/lib/components/ui/card/card.component.ts

@@ -1,10 +1,5 @@
 import { cn } from '@/lib/utils';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    input,
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 /**
  * Card container component.
@@ -35,7 +30,7 @@ export class Card {
   protected readonly computedClass = computed(() =>
     cn(
       'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/card/index.ts

@@ -5,4 +5,3 @@ export { CardFooter } from './card-footer.component';
 export { CardHeader } from './card-header.component';
 export { CardTitle } from './card-title.component';
 export { Card } from './card.component';
-

package/src/app/lib/components/ui/carousel/carousel-content.component.ts

@@ -20,19 +20,13 @@ import { CAROUSEL_CONTEXT } from './carousel-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CarouselContent {
-  protected readonly context = inject(CAROUSEL_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
-  protected readonly computedClass = computed(() =>
-    cn('overflow-hidden', this.class())
-  );
+  protected readonly context = inject(CAROUSEL_CONTEXT);
 
+  protected readonly computedClass = computed(() => cn('overflow-hidden', this.class()));
   protected readonly innerClass = computed(() =>
-    cn(
-      'flex',
-      this.context.orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col'
-    )
+    cn('flex', this.context.orientation() === 'horizontal' ? '-ml-4' : '-mt-4 flex-col'),
   );
 }

package/src/app/lib/components/ui/carousel/carousel-item.component.ts

@@ -11,22 +11,22 @@ import { CAROUSEL_CONTEXT } from './carousel-context';
   template: `<ng-content />`,
   host: {
     '[class]': 'computedClass()',
-    'role': 'group',
+    role: 'group',
     'aria-roledescription': 'slide',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CarouselItem {
-  protected readonly context = inject(CAROUSEL_CONTEXT);
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(CAROUSEL_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       'min-w-0 shrink-0 grow-0 basis-full',
       this.context.orientation() === 'horizontal' ? 'pl-4' : 'pt-4',
-      this.class()
-    )
+      this.class(),
+    ),
   );
 }

package/src/app/lib/components/ui/carousel/carousel-next.component.ts

@@ -29,18 +29,17 @@ import { CAROUSEL_CONTEXT } from './carousel-context';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class CarouselNext {
-  protected readonly context = inject(CAROUSEL_CONTEXT);
-  protected readonly ArrowRightIcon = ArrowRight;
-
   /** Button variant */
-  readonly variant = input<'default' | 'outline' | 'secondary' | 'ghost' | 'link' | 'destructive'>('outline');
-
+  readonly variant = input<'default' | 'outline' | 'secondary' | 'ghost' | 'link' | 'destructive'>(
+    'outline',
+  );
   /** Button size */
   readonly size = input<'default' | 'sm' | 'lg' | 'icon'>('icon');
-
   /** Additional CSS classes */
   readonly class = input<string>('');
 
+  protected readonly context = inject(CAROUSEL_CONTEXT);
+
   protected readonly computedClass = computed(() =>
     cn(
       buttonVariants({ variant: this.variant(), size: this.size() }),
@@ -48,7 +47,9 @@ export class CarouselNext {
       this.context.orientation() === 'horizontal'
         ? '-right-12 top-1/2 -translate-y-1/2'
         : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-      this.class()
-    )
+      this.class(),
+    ),
   );
+
+  protected readonly ArrowRightIcon = ArrowRight;
 }