@ng-cn/core 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-cn/core",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Beautifully designed Angular components built with Tailwind CSS v4 - The official Angular port of shadcn/ui",
   "keywords": [
     "angular",
@@ -27,6 +27,7 @@
   },
   "files": [
     "schematics",
+    "src/app/lib",
     "README.md",
     "LICENSE"
   ],
@@ -103,4 +104,4 @@
     "typescript": "~5.9.2",
     "vitest": "^4.0.16"
   }
-}
+}

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

@@ -0,0 +1,53 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
+
+/**
+ * AccordionContent component - expandable content area.
+ * Uses role="region" and aria-labelledby to associate with trigger.
+ *
+ * @example
+ * <AccordionContent>
+ *   <p>Your content here</p>
+ * </AccordionContent>
+ */
+@Component({
+  selector: 'AccordionContent',
+  template: `
+    @if (item.isOpen()) {
+      <div [class]="innerClass()">
+        <ng-content />
+      </div>
+    }
+  `,
+  host: {
+    'role': 'region',
+    '[class]': 'computedClass()',
+    '[attr.id]': 'item.contentId',
+    '[attr.data-state]': 'item.isOpen() ? "open" : "closed"',
+    '[attr.aria-labelledby]': 'item.triggerId',
+    '[attr.aria-hidden]': '!item.isOpen()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccordionContent {
+  protected readonly item = inject(ACCORDION_ITEM_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'overflow-hidden text-sm',
+      'data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down'
+    )
+  );
+
+  protected readonly innerClass = computed(() => cn('pb-4 pt-2 px-1 text-muted-foreground leading-relaxed', this.class()));
+}

package/src/app/lib/components/ui/accordion/accordion-context.ts

@@ -0,0 +1,33 @@
+import { InjectionToken, WritableSignal } from '@angular/core';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type AccordionType = 'single' | 'multiple';
+
+export interface AccordionContext {
+  type: () => AccordionType;
+  collapsible: () => boolean;
+  value: () => string | string[] | undefined;
+  onValueChange: (itemValue: string) => void;
+  isItemOpen: (itemValue: string) => boolean;
+  /** Registry of item values for keyboard navigation */
+  itemValues: WritableSignal<string[]>;
+}
+
+export interface AccordionItemContext {
+  value: () => string;
+  isOpen: () => boolean;
+  toggle: () => void;
+  /** Unique IDs for ARIA relationships */
+  triggerId: string;
+  contentId: string;
+}
+
+// ============================================================================
+// Injection Tokens
+// ============================================================================
+
+export const ACCORDION_CONTEXT = new InjectionToken<AccordionContext>('AccordionContext');
+export const ACCORDION_ITEM_CONTEXT = new InjectionToken<AccordionItemContext>('AccordionItemContext');

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

@@ -0,0 +1,86 @@
+import { cn } from '@/lib/utils';
+import { AriaIdService } from '@/lib/utils/accessibility';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    forwardRef,
+    inject,
+    input,
+    OnDestroy,
+    OnInit,
+} from '@angular/core';
+import {
+    ACCORDION_CONTEXT,
+    ACCORDION_ITEM_CONTEXT,
+    AccordionItemContext,
+} from './accordion-context';
+
+/**
+ * AccordionItem component - wrapper for each accordion section.
+ * Provides proper ARIA relationships between trigger and content.
+ *
+ * @example
+ * <AccordionItem value="item-1">
+ *   <AccordionTrigger>Title</AccordionTrigger>
+ *   <AccordionContent>Content</AccordionContent>
+ * </AccordionItem>
+ */
+@Component({
+  selector: 'AccordionItem',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.data-state]': 'isOpen() ? "open" : "closed"',
+    '[attr.data-value]': 'value()',
+  },
+  providers: [
+    {
+      provide: ACCORDION_ITEM_CONTEXT,
+      useExisting: forwardRef(() => AccordionItem),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccordionItem implements AccordionItemContext, OnInit, OnDestroy {
+  private readonly accordion = inject(ACCORDION_CONTEXT);
+  private readonly ariaIdService = inject(AriaIdService);
+  private readonly ariaIds = this.ariaIdService.generateAccordionIds('accordion');
+
+  /** Unique value for this accordion item */
+  readonly value = input.required<string>();
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** ARIA IDs for relationships */
+  readonly triggerId = this.ariaIds.generateTriggerId();
+  readonly contentId = this.ariaIds.generateContentId(0);
+
+  /** Whether this item is currently open */
+  readonly isOpen = computed(() => this.accordion.isItemOpen(this.value()));
+
+  /** Toggle this item's open state */
+  toggle(): void {
+    this.accordion.onValueChange(this.value());
+  }
+
+  ngOnInit(): void {
+    // Register this item's value for keyboard navigation
+    this.accordion.itemValues.update(values => {
+      if (!values.includes(this.value())) {
+        return [...values, this.value()];
+      }
+      return values;
+    });
+  }
+
+  ngOnDestroy(): void {
+    // Unregister this item's value
+    this.accordion.itemValues.update(values =>
+      values.filter(v => v !== this.value())
+    );
+  }
+
+  protected readonly computedClass = computed(() => cn('border-b w-full', this.class()));
+}

package/src/app/lib/components/ui/accordion/accordion-trigger.component.ts

@@ -0,0 +1,73 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+} from '@angular/core';
+import { ACCORDION_ITEM_CONTEXT } from './accordion-context';
+
+/**
+ * AccordionTrigger component - clickable header that toggles content.
+ * Implements proper ARIA pattern for accordion triggers.
+ *
+ * @example
+ * <AccordionTrigger>Click to expand</AccordionTrigger>
+ */
+@Component({
+  selector: 'AccordionTrigger',
+  template: `
+    <span class="me-2"><ng-content /></span>
+    <svg
+      class="size-4 shrink-0 ms-auto text-muted-foreground transition-transform duration-200"
+      [class.rotate-180]="item.isOpen()"
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.id]': 'item.triggerId',
+    '[attr.data-state]': 'item.isOpen() ? "open" : "closed"',
+    '[attr.aria-expanded]': 'item.isOpen()',
+    '[attr.aria-controls]': 'item.contentId',
+    '(click)': 'onClick()',
+    '(keydown.enter)': 'onClick()',
+    '(keydown.space)': 'onSpace($event)',
+    '[attr.tabindex]': '0',
+    'role': 'button',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AccordionTrigger {
+  protected readonly item = inject(ACCORDION_ITEM_CONTEXT);
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180 cursor-pointer w-full',
+      this.class()
+    )
+  );
+
+  protected onClick(): void {
+    this.item.toggle();
+  }
+
+  protected onSpace(event: Event): void {
+    event.preventDefault();
+    this.item.toggle();
+  }
+}

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

@@ -0,0 +1,197 @@
+import { cn } from '@/lib/utils';
+import {
+    booleanAttribute,
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    forwardRef,
+    input,
+    signal,
+} from '@angular/core';
+import {
+    ACCORDION_CONTEXT,
+    AccordionContext,
+    AccordionType,
+} from './accordion-context';
+
+/**
+ * Accordion component - root container for accordion items.
+ * Matches shadcn/ui React Accordion exactly.
+ * Includes full keyboard navigation with arrow keys.
+ *
+ * @example
+ * <Accordion type="single" collapsible defaultValue="item-1">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Title</AccordionTrigger>
+ *     <AccordionContent>Content here</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+@Component({
+  selector: 'Accordion',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.data-orientation]': '"vertical"',
+    '(keydown)': 'onKeydown($event)',
+  },
+  providers: [
+    {
+      provide: ACCORDION_CONTEXT,
+      useExisting: forwardRef(() => Accordion),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Accordion implements AccordionContext {
+  /** Type of accordion: 'single' allows one item open, 'multiple' allows many */
+  readonly type = input<AccordionType>('single');
+
+  /** Whether the accordion can be fully collapsed (only for single type) */
+  readonly collapsible = input<boolean, unknown>(false, { transform: booleanAttribute });
+
+  /** Default value(s) to be open initially */
+  readonly defaultValue = input<string | string[] | undefined>(undefined);
+
+  /** Controlled value - external control of open state */
+  readonly controlledValue = input<string | string[] | undefined>(undefined, { alias: 'value' });
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  /** Internal state for open items */
+  private readonly openItems = signal<Set<string>>(new Set());
+
+  /** Registry of item values for keyboard navigation */
+  readonly itemValues = signal<string[]>([]);
+
+  /** Flag to track if initialized */
+  private initialized = false;
+
+  constructor() {
+    // Initialize with default value
+    effect(() => {
+      if (!this.initialized) {
+        const defaultVal = this.defaultValue();
+        if (defaultVal !== undefined) {
+          if (Array.isArray(defaultVal)) {
+            this.openItems.set(new Set(defaultVal));
+          } else {
+            this.openItems.set(new Set([defaultVal]));
+          }
+        }
+        this.initialized = true;
+      }
+    });
+  }
+
+  /** Get current value(s) */
+  readonly value = computed(() => {
+    const controlled = this.controlledValue();
+    if (controlled !== undefined) {
+      return controlled;
+    }
+    const items = this.openItems();
+    if (this.type() === 'single') {
+      return items.size > 0 ? Array.from(items)[0] : undefined;
+    }
+    return Array.from(items);
+  });
+
+  /** Handle value change from accordion items */
+  onValueChange(itemValue: string): void {
+    const currentType = this.type();
+    const isCollapsible = this.collapsible();
+
+    this.openItems.update((current) => {
+      const newSet = new Set(current);
+
+      if (currentType === 'single') {
+        if (newSet.has(itemValue)) {
+          if (isCollapsible) {
+            newSet.delete(itemValue);
+          }
+        } else {
+          newSet.clear();
+          newSet.add(itemValue);
+        }
+      } else {
+        // multiple
+        if (newSet.has(itemValue)) {
+          newSet.delete(itemValue);
+        } else {
+          newSet.add(itemValue);
+        }
+      }
+
+      return newSet;
+    });
+  }
+
+  /** Check if an item is open */
+  isItemOpen(itemValue: string): boolean {
+    const controlled = this.controlledValue();
+    if (controlled !== undefined) {
+      if (Array.isArray(controlled)) {
+        return controlled.includes(itemValue);
+      }
+      return controlled === itemValue;
+    }
+    return this.openItems().has(itemValue);
+  }
+
+  /** Handle keyboard navigation */
+  onKeydown(event: KeyboardEvent): void {
+    const values = this.itemValues();
+    if (values.length === 0) return;
+
+    // Find the currently focused trigger
+    const activeElement = document.activeElement;
+    const currentTrigger = activeElement?.closest('[role="button"][aria-expanded]');
+    if (!currentTrigger) return;
+
+    // Find current index by looking at the accordion item
+    const accordionItem = currentTrigger.closest('AccordionItem');
+    const itemValue = accordionItem?.getAttribute('data-value') ||
+                     values.find(v => document.querySelector(`AccordionItem[data-state][data-value="${v}"]`)?.contains(currentTrigger));
+
+    if (!itemValue) return;
+    const currentIndex = values.indexOf(itemValue);
+    if (currentIndex === -1) return;
+
+    let newIndex = currentIndex;
+    let handled = false;
+
+    switch (event.key) {
+      case 'ArrowDown':
+        newIndex = currentIndex < values.length - 1 ? currentIndex + 1 : 0;
+        handled = true;
+        break;
+      case 'ArrowUp':
+        newIndex = currentIndex > 0 ? currentIndex - 1 : values.length - 1;
+        handled = true;
+        break;
+      case 'Home':
+        newIndex = 0;
+        handled = true;
+        break;
+      case 'End':
+        newIndex = values.length - 1;
+        handled = true;
+        break;
+    }
+
+    if (handled) {
+      event.preventDefault();
+      // Focus the trigger of the new item
+      const newValue = values[newIndex];
+      const newTrigger = document.querySelector(
+        `AccordionItem[data-value="${newValue}"] AccordionTrigger, [data-accordion-trigger="${newValue}"]`
+      ) as HTMLElement;
+      newTrigger?.focus();
+    }
+  }
+
+  protected readonly computedClass = computed(() => cn('w-full', this.class()));
+}

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

@@ -0,0 +1,15 @@
+// Context and types
+export {
+    ACCORDION_CONTEXT,
+    ACCORDION_ITEM_CONTEXT,
+    type AccordionContext,
+    type AccordionItemContext,
+    type AccordionType
+} from './accordion-context';
+
+// Components
+export { AccordionContent } from './accordion-content.component';
+export { AccordionItem } from './accordion-item.component';
+export { AccordionTrigger } from './accordion-trigger.component';
+export { Accordion } from './accordion.component';
+

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

@@ -0,0 +1,33 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * Alert description component.
+ *
+ * @example
+ * <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
+ */
+@Component({
+  selector: 'AlertDescription',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-slot': 'alert-description',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertDescription {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,30 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * Alert title component.
+ *
+ * @example
+ * <AlertTitle>Heads up!</AlertTitle>
+ */
+@Component({
+  selector: 'AlertTitle',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-slot': 'alert-title',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertTitle {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', this.class())
+  );
+}

package/src/app/lib/components/ui/alert/alert-variants.ts

@@ -0,0 +1,23 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Alert variants using class-variance-authority
+ * WCAG AA compliant contrast ratios for all variants
+ */
+export const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground border-border',
+        destructive:
+          'bg-destructive/10 text-destructive border-destructive/30 [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

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

@@ -0,0 +1,50 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { alertVariants, type AlertVariants } from './alert-variants';
+
+/**
+ * Alert container component.
+ *
+ * @example
+ * <Alert>
+ *   <lucide-icon name="terminal" />
+ *   <AlertTitle>Heads up!</AlertTitle>
+ *   <AlertDescription>You can add components to your app using the CLI.</AlertDescription>
+ * </Alert>
+ *
+ * <!-- Destructive variant -->
+ * <Alert variant="destructive">
+ *   <lucide-icon name="alert-circle" />
+ *   <AlertTitle>Error</AlertTitle>
+ *   <AlertDescription>Your session has expired.</AlertDescription>
+ * </Alert>
+ */
+@Component({
+  selector: 'Alert',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    role: 'alert',
+    'data-slot': 'alert',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Alert {
+  /** The visual style variant */
+  readonly variant = input<AlertVariants['variant']>('default');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      alertVariants({ variant: this.variant() }),
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,5 @@
+export { AlertDescription } from './alert-description.component';
+export { AlertTitle } from './alert-title.component';
+export { alertVariants, type AlertVariants } from './alert-variants';
+export { Alert } from './alert.component';
+

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

@@ -0,0 +1,44 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    inject,
+    input,
+} from '@angular/core';
+import { buttonVariants } from '../button/button-variants';
+import { ALERT_DIALOG_CONTEXT } from './alert-dialog-context';
+
+/**
+ * AlertDialogAction component - action button that confirms and closes the dialog.
+ * Matches shadcn/ui React AlertDialogAction exactly.
+ * Styled as the primary action button.
+ *
+ * @example
+ * <AlertDialogAction>Delete Account</AlertDialogAction>
+ */
+@Component({
+  selector: 'AlertDialogAction',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '(click)': 'onClick($event)',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AlertDialogAction {
+  protected readonly context = inject(ALERT_DIALOG_CONTEXT);
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(buttonVariants(), this.class())
+  );
+
+  onClick(event: Event): void {
+    // Allow the click to propagate for custom handlers
+    event.stopPropagation();
+    this.context.setOpen(false);
+  }
+}