@ng-cn/core 1.0.11 → 1.0.12

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

@@ -0,0 +1,37 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * Avatar container component.
+ * Wraps the avatar image and fallback.
+ *
+ * @example
+ * <Avatar>
+ *   <img AvatarImage src="/avatar.png" alt="User" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ */
+@Component({
+  selector: 'Avatar',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    'data-slot': 'avatar',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Avatar {
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(
+      'relative flex size-8 shrink-0 overflow-hidden rounded-full',
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,5 @@
+export { AvatarFallback } from './avatar-fallback.component';
+export { AvatarImage } from './avatar-image.component';
+export { Avatar } from './avatar.component';
+export { UiAvatar } from './ui-avatar.component';
+

package/src/app/lib/components/ui/avatar/ui-avatar.component.ts

@@ -0,0 +1,52 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    input,
+    signal,
+} from '@angular/core';
+import { AvatarFallback } from './avatar-fallback.component';
+import { Avatar } from './avatar.component';
+
+/**
+ * Avatar component that handles image loading and fallback display.
+ * This is a convenience component that combines Avatar, AvatarImage, and AvatarFallback.
+ *
+ * @example
+ * <ui-avatar
+ *   src="/avatar.png"
+ *   alt="John Doe"
+ *   fallback="JD"
+ * />
+ */
+@Component({
+  selector: 'ui-avatar',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [Avatar, AvatarFallback],
+  template: `
+    <Avatar [class]="class()">
+      @if (src() && !imageError()) {
+        <img
+          AvatarImage
+          [src]="src()"
+          [alt]="alt()"
+          (error)="onImageError()"
+        />
+      }
+      @if (!src() || imageError()) {
+        <AvatarFallback>{{ fallback() }}</AvatarFallback>
+      }
+    </Avatar>
+  `,
+})
+export class UiAvatar {
+  readonly src = input<string>('');
+  readonly alt = input<string>('');
+  readonly fallback = input<string>('');
+  readonly class = input<string>('');
+
+  protected readonly imageError = signal(false);
+
+  protected onImageError() {
+    this.imageError.set(true);
+  }
+}

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

@@ -0,0 +1,28 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Badge variants using class-variance-authority
+ * Matches shadcn/ui React badge exactly
+ * WCAG AA compliant contrast ratios for all variants
+ */
+export const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+        outline: 'text-foreground border-border [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

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

@@ -0,0 +1,50 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+import { badgeVariants, type BadgeVariants } from './badge-variants';
+
+/**
+ * Badge component that applies shadcn badge styles.
+ *
+ * @example
+ * <!-- Default badge -->
+ * <Badge>New</Badge>
+ *
+ * <!-- With variant -->
+ * <Badge variant="secondary">Beta</Badge>
+ *
+ * <!-- Destructive -->
+ * <Badge variant="destructive">Error</Badge>
+ *
+ * <!-- Outline -->
+ * <Badge variant="outline">Tag</Badge>
+ */
+@Component({
+  selector: 'Badge',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Badge {
+  /** The visual style variant of the badge */
+  readonly variant = input<BadgeVariants['variant']>('default');
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Computed class combining variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      badgeVariants({
+        variant: this.variant(),
+      }),
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,3 @@
+export { badgeVariants, type BadgeVariants } from './badge-variants';
+export { Badge } from './badge.component';
+

package/src/app/lib/components/ui/breadcrumb/breadcrumb-ellipsis.component.ts

@@ -0,0 +1,48 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * BreadcrumbEllipsis component - shows more items indicator.
+ * Matches shadcn/ui React BreadcrumbEllipsis exactly.
+ */
+@Component({
+  selector: 'BreadcrumbEllipsis',
+  template: `
+    <svg
+      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"
+      class="h-4 w-4"
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+    <span class="sr-only">More</span>
+  `,
+  host: {
+    role: 'presentation',
+    '[attr.aria-hidden]': '"true"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbEllipsis {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('flex h-9 w-9 items-center justify-center', this.class())
+  );
+}

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

@@ -0,0 +1,28 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * BreadcrumbItem component - li container.
+ * Matches shadcn/ui React BreadcrumbItem exactly.
+ */
+@Component({
+  selector: 'BreadcrumbItem',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbItem {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('inline-flex items-center gap-1.5', this.class())
+  );
+}

package/src/app/lib/components/ui/breadcrumb/breadcrumb-link.component.ts

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+
+/**
+ * BreadcrumbLink component - anchor link.
+ * Matches shadcn/ui React BreadcrumbLink exactly.
+ */
+@Component({
+  selector: 'BreadcrumbLink',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.href]': 'href()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbLink {
+  /** Link href */
+  readonly href = input<string>('#');
+
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('transition-colors hover:text-foreground', this.class())
+  );
+}

package/src/app/lib/components/ui/breadcrumb/breadcrumb-list.component.ts

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * BreadcrumbList component - ol container for items.
+ * Matches shadcn/ui React BreadcrumbList exactly.
+ */
+@Component({
+  selector: 'BreadcrumbList',
+  template: `<ng-content />`,
+  host: {
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbList {
+  /** Additional CSS classes */
+  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()
+    )
+  );
+}

package/src/app/lib/components/ui/breadcrumb/breadcrumb-page.component.ts

@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * BreadcrumbPage component - current page span.
+ * Matches shadcn/ui React BreadcrumbPage exactly.
+ */
+@Component({
+  selector: 'BreadcrumbPage',
+  template: `<ng-content />`,
+  host: {
+    role: 'link',
+    '[attr.aria-disabled]': '"true"',
+    '[attr.aria-current]': '"page"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbPage {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('font-normal text-foreground', this.class())
+  );
+}

package/src/app/lib/components/ui/breadcrumb/breadcrumb-separator.component.ts

@@ -0,0 +1,47 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * BreadcrumbSeparator component - visual separator.
+ * Matches shadcn/ui React BreadcrumbSeparator exactly.
+ */
+@Component({
+  selector: 'BreadcrumbSeparator',
+  template: `
+    <ng-content>
+      <svg
+        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"
+        class="h-3.5 w-3.5"
+      >
+        <path d="m9 18 6-6-6-6" />
+      </svg>
+    </ng-content>
+  `,
+  host: {
+    role: 'presentation',
+    '[attr.aria-hidden]': '"true"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BreadcrumbSeparator {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn('[&>svg]:h-3.5 [&>svg]:w-3.5', this.class())
+  );
+}

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

@@ -0,0 +1,43 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+
+/**
+ * Breadcrumb component - root container.
+ * Matches shadcn/ui React Breadcrumb exactly.
+ *
+ * @example
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem>
+ *       <BreadcrumbLink href="/">Home</BreadcrumbLink>
+ *     </BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem>
+ *       <BreadcrumbPage>Current Page</BreadcrumbPage>
+ *     </BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+@Component({
+  selector: 'Breadcrumb',
+  template: `<ng-content />`,
+  host: {
+    role: 'navigation',
+    '[attr.aria-label]': '"breadcrumb"',
+    '[class]': 'computedClass()',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Breadcrumb {
+  /** Additional CSS classes */
+  readonly class = input<string>('');
+
+  protected readonly computedClass = computed(() =>
+    cn(this.class())
+  );
+}

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

@@ -0,0 +1,8 @@
+export { BreadcrumbEllipsis } from './breadcrumb-ellipsis.component';
+export { BreadcrumbItem } from './breadcrumb-item.component';
+export { BreadcrumbLink } from './breadcrumb-link.component';
+export { BreadcrumbList } from './breadcrumb-list.component';
+export { BreadcrumbPage } from './breadcrumb-page.component';
+export { BreadcrumbSeparator } from './breadcrumb-separator.component';
+export { Breadcrumb } from './breadcrumb.component';
+

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

@@ -0,0 +1,38 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * Button variants using class-variance-authority
+ * Matches shadcn/ui React button exactly
+ * WCAG AA compliant contrast ratios for all variants
+ */
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*=size-])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+        outline:
+          'border border-input bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+        ghost: 'text-foreground hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

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

@@ -0,0 +1,103 @@
+import { cn } from '@/lib/utils';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    input,
+} from '@angular/core';
+import { buttonVariants, type ButtonVariants } from './button-variants';
+
+/**
+ * Button component that applies shadcn button styles.
+ *
+ * @example
+ * <!-- Default button -->
+ * <Button>Click me</Button>
+ *
+ * <!-- With variant -->
+ * <Button variant="destructive">Delete</Button>
+ *
+ * <!-- With size -->
+ * <Button size="lg">Large Button</Button>
+ *
+ * <!-- Combined -->
+ * <Button variant="outline" size="sm">Small Outline</Button>
+ *
+ * <!-- As link -->
+ * <Button variant="link">Link Button</Button>
+ *
+ * <!-- Loading state -->
+ * <Button [loading]="isLoading">Submit</Button>
+ *
+ * <!-- Disabled state -->
+ * <Button [disabled]="true">Disabled</Button>
+ */
+@Component({
+  selector: 'Button',
+  template: `
+    @if (loading()) {
+      <svg
+        class="animate-spin -ml-1 mr-2 h-4 w-4"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+      >
+        <circle
+          class="opacity-25"
+          cx="12"
+          cy="12"
+          r="10"
+          stroke="currentColor"
+          stroke-width="4"
+        ></circle>
+        <path
+          class="opacity-75"
+          fill="currentColor"
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        ></path>
+      </svg>
+      <span class="sr-only">Loading</span>
+    }
+    <ng-content />
+  `,
+  host: {
+    '[class]': 'computedClass()',
+    '[attr.disabled]': 'isDisabled() || null',
+    '[attr.aria-disabled]': 'isDisabled() || null',
+    '[attr.aria-busy]': 'loading() || null',
+    '[attr.data-loading]': 'loading() || null',
+  },
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Button {
+  /** The visual style variant of the button */
+  readonly variant = input<ButtonVariants['variant']>('default');
+
+  /** The size of the button */
+  readonly size = input<ButtonVariants['size']>('default');
+
+  /** Whether the button is disabled */
+  readonly disabled = input<boolean>(false);
+
+  /** Whether the button is in a loading state */
+  readonly loading = input<boolean>(false);
+
+  /** Additional CSS classes to apply */
+  readonly class = input<string>('');
+
+  /** Whether button is effectively disabled (disabled or loading) */
+  protected readonly isDisabled = computed(() => this.disabled() || this.loading());
+
+  /** Computed class combining variants and custom classes */
+  protected readonly computedClass = computed(() =>
+    cn(
+      buttonVariants({
+        variant: this.variant(),
+        size: this.size(),
+      }),
+      this.loading() && 'relative cursor-wait',
+      this.class()
+    )
+  );
+}

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

@@ -0,0 +1,3 @@
+export { buttonVariants, type ButtonVariants } from './button-variants';
+export { Button } from './button.component';
+

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

@@ -0,0 +1,24 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+/**
+ * ButtonGroup variants using class-variance-authority
+ * Grouped buttons with shared styling
+ */
+export const buttonGroupVariants = cva(
+  'inline-flex items-center justify-center rounded-md',
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          '[&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px',
+        vertical:
+          'flex-col [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-mt-px',
+      },
+    },
+    defaultVariants: {
+      orientation: 'horizontal',
+    },
+  }
+);
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;