ngx-com 0.0.1 → 0.0.4

package/fesm2022/ngx-com.mjs

@@ -1,30 +1,16 @@
-import * as i0 from '@angular/core';
-import { Component } from '@angular/core';
-
-class Com {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Com, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: Com, isStandalone: true, selector: "com-com", ngImport: i0, template: `
-    <p>
-      com works!
-    </p>
-  `, isInline: true, styles: [""] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: Com, decorators: [{
-            type: Component,
-            args: [{ selector: 'com-com', imports: [], template: `
-    <p>
-      com works!
-    </p>
-  ` }]
-        }] });
-
-/*
- * Public API Surface of com
+/**
+ * Public API Surface of ngx-com
+ *
+ * For specific imports, use subpaths:
+ * - ngx-com/components
+ * - ngx-com/utils
+ * - ngx-com/tokens
  */
+const VERSION = '0.0.1';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { Com };
+export { VERSION };
 //# sourceMappingURL=ngx-com.mjs.map

package/fesm2022/ngx-com.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ngx-com.mjs","sources":["../../../projects/com/src/lib/com.ts","../../../projects/com/src/public-api.ts","../../../projects/com/src/ngx-com.ts"],"sourcesContent":["import { Component } from '@angular/core';\n\n@Component({\n  selector: 'com-com',\n  imports: [],\n  template: `\n    <p>\n      com works!\n    </p>\n  `,\n  styles: ``,\n})\nexport class Com {\n\n}\n","/*\n * Public API Surface of com\n */\n\nexport * from './lib/com';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;MAYa,GAAG,CAAA;uGAAH,GAAG,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAH,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,GAAG,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAPJ;;;;AAIT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;2FAGU,GAAG,EAAA,UAAA,EAAA,CAAA;kBAVf,SAAS;+BACE,SAAS,EAAA,OAAA,EACV,EAAE,EAAA,QAAA,EACD;;;;AAIT,EAAA,CAAA,EAAA;;;ACTH;;AAEG;;ACFH;;AAEG;;;;"}
+{"version":3,"file":"ngx-com.mjs","sources":["../../../projects/com/src/public-api.ts","../../../projects/com/src/ngx-com.ts"],"sourcesContent":["/**\n * Public API Surface of ngx-com\n *\n * For specific imports, use subpaths:\n * - ngx-com/components\n * - ngx-com/utils\n * - ngx-com/tokens\n */\n\nexport const VERSION = '0.0.1';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"AAAA;;;;;;;AAOG;AAEI,MAAM,OAAO,GAAG;;ACTvB;;AAEG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-com",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "repository": {
     "type": "git",
     "url": "https://github.com/avs2001/ngx-com"
@@ -22,6 +22,110 @@
     ".": {
       "types": "./types/ngx-com.d.ts",
       "default": "./fesm2022/ngx-com.mjs"
+    },
+    "./components": {
+      "types": "./types/ngx-com-components.d.ts",
+      "default": "./fesm2022/ngx-com-components.mjs"
+    },
+    "./components/avatar": {
+      "types": "./types/ngx-com-components-avatar.d.ts",
+      "default": "./fesm2022/ngx-com-components-avatar.mjs"
+    },
+    "./components/badge": {
+      "types": "./types/ngx-com-components-badge.d.ts",
+      "default": "./fesm2022/ngx-com-components-badge.mjs"
+    },
+    "./components/button": {
+      "types": "./types/ngx-com-components-button.d.ts",
+      "default": "./fesm2022/ngx-com-components-button.mjs"
+    },
+    "./components/calendar": {
+      "types": "./types/ngx-com-components-calendar.d.ts",
+      "default": "./fesm2022/ngx-com-components-calendar.mjs"
+    },
+    "./components/card": {
+      "types": "./types/ngx-com-components-card.d.ts",
+      "default": "./fesm2022/ngx-com-components-card.mjs"
+    },
+    "./components/checkbox": {
+      "types": "./types/ngx-com-components-checkbox.d.ts",
+      "default": "./fesm2022/ngx-com-components-checkbox.mjs"
+    },
+    "./components/collapsible": {
+      "types": "./types/ngx-com-components-collapsible.d.ts",
+      "default": "./fesm2022/ngx-com-components-collapsible.mjs"
+    },
+    "./components/confirm": {
+      "types": "./types/ngx-com-components-confirm.d.ts",
+      "default": "./fesm2022/ngx-com-components-confirm.mjs"
+    },
+    "./components/dropdown": {
+      "types": "./types/ngx-com-components-dropdown.d.ts",
+      "default": "./fesm2022/ngx-com-components-dropdown.mjs"
+    },
+    "./components/dropdown/testing": {
+      "types": "./types/ngx-com-components-dropdown-testing.d.ts",
+      "default": "./fesm2022/ngx-com-components-dropdown-testing.mjs"
+    },
+    "./components/empty-state": {
+      "types": "./types/ngx-com-components-empty-state.d.ts",
+      "default": "./fesm2022/ngx-com-components-empty-state.mjs"
+    },
+    "./components/form-field": {
+      "types": "./types/ngx-com-components-form-field.d.ts",
+      "default": "./fesm2022/ngx-com-components-form-field.mjs"
+    },
+    "./components/icon": {
+      "types": "./types/ngx-com-components-icon.d.ts",
+      "default": "./fesm2022/ngx-com-components-icon.mjs"
+    },
+    "./components/item": {
+      "types": "./types/ngx-com-components-item.d.ts",
+      "default": "./fesm2022/ngx-com-components-item.mjs"
+    },
+    "./components/menu": {
+      "types": "./types/ngx-com-components-menu.d.ts",
+      "default": "./fesm2022/ngx-com-components-menu.mjs"
+    },
+    "./components/paginator": {
+      "types": "./types/ngx-com-components-paginator.d.ts",
+      "default": "./fesm2022/ngx-com-components-paginator.mjs"
+    },
+    "./components/popover": {
+      "types": "./types/ngx-com-components-popover.d.ts",
+      "default": "./fesm2022/ngx-com-components-popover.mjs"
+    },
+    "./components/radio": {
+      "types": "./types/ngx-com-components-radio.d.ts",
+      "default": "./fesm2022/ngx-com-components-radio.mjs"
+    },
+    "./components/segmented-control": {
+      "types": "./types/ngx-com-components-segmented-control.d.ts",
+      "default": "./fesm2022/ngx-com-components-segmented-control.mjs"
+    },
+    "./components/sort": {
+      "types": "./types/ngx-com-components-sort.d.ts",
+      "default": "./fesm2022/ngx-com-components-sort.mjs"
+    },
+    "./components/spinner": {
+      "types": "./types/ngx-com-components-spinner.d.ts",
+      "default": "./fesm2022/ngx-com-components-spinner.mjs"
+    },
+    "./components/tabs": {
+      "types": "./types/ngx-com-components-tabs.d.ts",
+      "default": "./fesm2022/ngx-com-components-tabs.mjs"
+    },
+    "./components/tooltip": {
+      "types": "./types/ngx-com-components-tooltip.d.ts",
+      "default": "./fesm2022/ngx-com-components-tooltip.mjs"
+    },
+    "./tokens": {
+      "types": "./types/ngx-com-tokens.d.ts",
+      "default": "./fesm2022/ngx-com-tokens.mjs"
+    },
+    "./utils": {
+      "types": "./types/ngx-com-utils.d.ts",
+      "default": "./fesm2022/ngx-com-utils.mjs"
     }
   }
 }

package/types/ngx-com-components-avatar.d.ts

@@ -0,0 +1,409 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, ElementRef, InputSignal, OutputEmitterRef, Signal, WritableSignal } from '@angular/core';
+
+/** Avatar size variants. */
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Avatar color variants. */
+type AvatarColor = 'primary' | 'accent' | 'muted' | 'warn' | 'auto';
+/** Avatar shape variants. */
+type AvatarShape = 'circle' | 'rounded';
+/** Avatar variant types. */
+type AvatarVariant = 'soft' | 'filled' | 'outline';
+/** Resolved color (excludes 'auto' which is computed at runtime). */
+type ResolvedAvatarColor = Exclude<AvatarColor, 'auto'>;
+/**
+ * Generates initials from a display name.
+ *
+ * @param name - The display name to extract initials from
+ * @param maxLength - Maximum number of characters (default: 2)
+ * @returns Uppercase initials, or empty string if name is empty
+ *
+ * @example
+ * ```ts
+ * getInitials('Jane Doe')       // 'JD'
+ * getInitials('Jane')           // 'JA'
+ * getInitials('Jane Marie Doe') // 'JD' (first + last)
+ * getInitials('j')              // 'J'
+ * getInitials('')               // ''
+ * ```
+ */
+declare function getInitials(name: string, maxLength?: number): string;
+/**
+ * CVA variants for the avatar container.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-subtle`, `--color-accent-subtle-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`,
+ *         `--color-border`, `--color-background`, `--color-foreground`, `--color-ring`
+ */
+declare const avatarVariants: (props?: {
+    size?: AvatarSize;
+    shape?: AvatarShape;
+    interactive?: boolean;
+}) => string;
+/**
+ * CVA variants for the avatar color/variant styling.
+ * These are applied based on the resolved color and variant.
+ */
+declare const avatarColorVariants: (props?: {
+    variant?: AvatarVariant;
+    color?: ResolvedAvatarColor;
+}) => string;
+
+/**
+ * Template context provided to custom avatar templates.
+ *
+ * @example
+ * ```html
+ * <com-avatar name="Acme Corp" size="lg">
+ *   <ng-template comAvatarCustom let-name let-initials="initials" let-size="size">
+ *     <img src="/logos/acme.svg" class="size-full object-contain p-1" [alt]="name" />
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ */
+interface AvatarTemplateContext {
+    /** The `name` input value (default for `let-name`). */
+    $implicit: string | undefined;
+    /** Computed initials from the name. */
+    initials: string;
+    /** Current size variant, allowing templates to adapt. */
+    size: AvatarSize;
+}
+/**
+ * Directive to provide a custom template for avatar content.
+ *
+ * When this directive is used, the avatar ignores the `src`, `name`, and
+ * default icon fallback — the template has full control over the content.
+ * Use this for company logos, emoji avatars, or custom graphics.
+ *
+ * @example Company logo
+ * ```html
+ * <com-avatar name="Acme Corp" size="lg" color="primary">
+ *   <ng-template comAvatarCustom let-initials="initials">
+ *     <img src="/logos/acme.svg" class="size-full object-contain p-1" alt="Acme Corp" />
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Emoji avatar
+ * ```html
+ * <com-avatar name="Bot" color="accent" variant="filled">
+ *   <ng-template comAvatarCustom>
+ *     <span class="text-lg">🤖</span>
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Adaptive content using size context
+ * ```html
+ * <com-avatar name="Jane" [size]="avatarSize">
+ *   <ng-template comAvatarCustom let-size="size">
+ *     @if (size === 'xs' || size === 'sm') {
+ *       <span class="text-xs">👤</span>
+ *     } @else {
+ *       <img src="/custom-avatar.png" class="size-full object-cover" />
+ *     }
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ */
+declare class ComAvatarCustom {
+    readonly templateRef: TemplateRef<AvatarTemplateContext>;
+    /**
+     * Static type guard for template type checking.
+     * Enables type-safe access to context properties in templates.
+     */
+    static ngTemplateContextGuard(_dir: ComAvatarCustom, ctx: unknown): ctx is AvatarTemplateContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComAvatarCustom, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComAvatarCustom, "ng-template[comAvatarCustom]", never, {}, {}, never, never, true, never>;
+}
+
+/** Image loading state. */
+type ImageState = 'idle' | 'loading' | 'loaded' | 'error';
+/**
+ * Avatar component — displays a user's profile image, initials, or a fallback icon.
+ *
+ * Handles the full lifecycle of image loading with a graceful fallback chain:
+ * 1. Custom template (via `comAvatarCustom` directive) — if provided, always wins
+ * 2. Image — if `src` is provided and loads successfully
+ * 3. Initials — if `name` is provided, auto-generated from the name
+ * 4. Default icon — generic user silhouette via `com-icon`
+ *
+ * **Note:** The default fallback icon requires the `User` icon from lucide-angular
+ * to be registered via `provideComIcons({ User })` in your application config.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-subtle`, `--color-accent-subtle-foreground`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-subtle`, `--color-warn-subtle-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`,
+ *         `--color-border`, `--color-background`, `--color-foreground`, `--color-ring`
+ *
+ * @example Simple image avatar
+ * ```html
+ * <com-avatar src="/photos/jane.jpg" name="Jane Doe" />
+ * ```
+ *
+ * @example Initials fallback (no image)
+ * ```html
+ * <com-avatar name="Jane Doe" />
+ * <!-- renders "JD" with auto-computed background color -->
+ * ```
+ *
+ * @example Explicit color and shape
+ * ```html
+ * <com-avatar name="John Smith" color="primary" variant="filled" />
+ * <com-avatar name="Alice" color="accent" shape="rounded" />
+ * ```
+ *
+ * @example Sizes — from badge to profile header
+ * ```html
+ * <!-- Tiny: inside a badge or inline with text -->
+ * <com-avatar name="JD" size="xs" />
+ *
+ * <!-- Small: list items, comments -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="sm" />
+ *
+ * <!-- Medium: default, cards -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" />
+ *
+ * <!-- Large: profile sidebar -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="lg" />
+ *
+ * <!-- Extra large: profile hero -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="xl" />
+ *
+ * <!-- 2XL: full profile page header -->
+ * <com-avatar src="/photos/jane.jpg" name="Jane" size="2xl" />
+ * ```
+ *
+ * @example Default icon fallback (no name, no image)
+ * ```html
+ * <!-- Shows generic user icon -->
+ * <com-avatar />
+ * ```
+ *
+ * @example Interactive (clickable, for menus)
+ * ```html
+ * <com-avatar
+ *   src="/photos/me.jpg"
+ *   name="My Profile"
+ *   [interactive]="true"
+ *   (click)="openProfileMenu()"
+ * />
+ * ```
+ *
+ * @example With status indicator (composed externally)
+ * ```html
+ * <!-- The avatar itself doesn't own the status dot — the consumer composes it -->
+ * <div class="relative inline-flex">
+ *   <com-avatar src="/photos/jane.jpg" name="Jane" size="sm" />
+ *   <span class="absolute bottom-0 right-0 size-2.5 rounded-full bg-success ring-2 ring-background"></span>
+ * </div>
+ * ```
+ *
+ * @example Custom template — company logo with fallback
+ * ```html
+ * <com-avatar name="Acme Corp" size="lg" color="primary">
+ *   <ng-template comAvatarCustom let-initials="initials">
+ *     <img src="/logos/acme.svg" class="size-full object-contain p-1" alt="Acme Corp" />
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Custom template — emoji avatar
+ * ```html
+ * <com-avatar name="Bot" color="accent" variant="filled">
+ *   <ng-template comAvatarCustom>
+ *     <span class="text-lg">🤖</span>
+ *   </ng-template>
+ * </com-avatar>
+ * ```
+ *
+ * @example Inline with text
+ * ```html
+ * <span class="inline-flex items-center gap-2">
+ *   <com-avatar name="Jane Doe" size="xs" />
+ *   <span class="text-sm">Jane Doe</span>
+ * </span>
+ * ```
+ *
+ * @example Avatar in a badge context
+ * ```html
+ * <!-- Works at xs/sm sizes without breaking layout -->
+ * <div class="flex items-center gap-1.5 rounded-pill bg-muted px-2 py-0.5">
+ *   <com-avatar name="Jane" size="xs" />
+ *   <span class="text-xs">Jane Doe</span>
+ *   <button class="text-muted-foreground hover:text-foreground">
+ *     <com-icon name="x" size="xs" />
+ *   </button>
+ * </div>
+ * ```
+ *
+ * @example Outline variant (good for overlapping stacks)
+ * ```html
+ * <div class="flex -space-x-2">
+ *   <com-avatar src="/photos/a.jpg" name="Alice" size="sm" variant="outline" />
+ *   <com-avatar src="/photos/b.jpg" name="Bob" size="sm" variant="outline" />
+ *   <com-avatar src="/photos/c.jpg" name="Carol" size="sm" variant="outline" />
+ *   <com-avatar name="+3" size="sm" variant="outline" color="muted" />
+ * </div>
+ * ```
+ */
+declare class ComAvatar {
+    /** Host element reference (used by ComAvatarGroup). */
+    readonly elementRef: ElementRef<HTMLElement>;
+    /** Image URL for the avatar. */
+    readonly src: InputSignal<string | undefined>;
+    /** Alt text for the image. Falls back to `name` if not provided. */
+    readonly alt: InputSignal<string | undefined>;
+    /** User's display name — used to generate initials and as aria fallback. */
+    readonly name: InputSignal<string | undefined>;
+    /** Size variant. */
+    readonly size: InputSignal<AvatarSize>;
+    /** Color variant. 'auto' deterministically picks a color based on the name. */
+    readonly color: InputSignal<AvatarColor>;
+    /** Shape variant. */
+    readonly shape: InputSignal<AvatarShape>;
+    /** Visual style variant. */
+    readonly variant: InputSignal<AvatarVariant>;
+    /** When true, renders as a button with hover/active states. */
+    readonly interactive: InputSignal<boolean>;
+    /** Emits when the image fails to load (after fallback kicks in). */
+    readonly imageError: OutputEmitterRef<void>;
+    /** Emits when the image loads successfully. */
+    readonly imageLoaded: OutputEmitterRef<void>;
+    /** Custom template for full control over avatar content. */
+    readonly customTemplate: Signal<ComAvatarCustom | undefined>;
+    /**
+     * Current image loading state.
+     * Resets to 'loading' or 'idle' when `src` changes.
+     */
+    protected readonly imageState: WritableSignal<ImageState>;
+    /** Resolved color (handles 'auto' based on name). */
+    protected readonly resolvedColor: Signal<ResolvedAvatarColor>;
+    /** Computed initials from the name. */
+    readonly computedInitials: Signal<string>;
+    /** Template context for custom templates. */
+    protected readonly templateContext: Signal<AvatarTemplateContext>;
+    /** CSS classes for the host element. */
+    protected readonly hostClasses: Signal<string>;
+    /** Font size class for initials. */
+    protected readonly initialsSizeClass: Signal<string>;
+    /** Icon size for the fallback icon (same as avatar size). */
+    protected readonly iconSize: Signal<AvatarSize>;
+    /** @internal Handles successful image load. */
+    protected onImageLoad(): void;
+    /** @internal Handles image load error. */
+    protected onImageError(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComAvatar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComAvatar, "com-avatar", ["comAvatar"], { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "imageError": "imageError"; "imageLoaded": "imageLoaded"; }, ["customTemplate"], never, true, never>;
+}
+
+/**
+ * Avatar group directive — displays multiple avatars in an overlapping stack.
+ *
+ * Apply this directive to a container element with `com-avatar` children.
+ * The directive handles negative spacing, ring styling for visual separation,
+ * and optionally limits the visible avatars with an overflow indicator.
+ *
+ * **Note:** Child avatars should use `variant="outline"` for best visual results,
+ * as this provides the ring that separates overlapping avatars. The directive
+ * adds `ring-background` to ensure proper visual separation.
+ *
+ * @tokens `--color-background`, `--color-muted`, `--color-muted-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <div comAvatarGroup>
+ *   <com-avatar src="/photos/a.jpg" name="Alice" variant="outline" />
+ *   <com-avatar src="/photos/b.jpg" name="Bob" variant="outline" />
+ *   <com-avatar src="/photos/c.jpg" name="Carol" variant="outline" />
+ * </div>
+ * ```
+ *
+ * @example With max limit and overflow indicator
+ * ```html
+ * <div comAvatarGroup [max]="3">
+ *   <com-avatar src="/photos/a.jpg" name="Alice" variant="outline" />
+ *   <com-avatar src="/photos/b.jpg" name="Bob" variant="outline" />
+ *   <com-avatar src="/photos/c.jpg" name="Carol" variant="outline" />
+ *   <com-avatar src="/photos/d.jpg" name="Dave" variant="outline" />
+ *   <com-avatar src="/photos/e.jpg" name="Eve" variant="outline" />
+ * </div>
+ * <!-- Shows 3 avatars + "+2" indicator -->
+ * ```
+ *
+ * @example Different sizes
+ * ```html
+ * <div comAvatarGroup size="sm">
+ *   <com-avatar name="A" size="sm" variant="outline" />
+ *   <com-avatar name="B" size="sm" variant="outline" />
+ * </div>
+ *
+ * <div comAvatarGroup size="lg">
+ *   <com-avatar name="A" size="lg" variant="outline" />
+ *   <com-avatar name="B" size="lg" variant="outline" />
+ * </div>
+ * ```
+ *
+ * @example Reversed stacking (last avatar on top)
+ * ```html
+ * <div comAvatarGroup [reverse]="true">
+ *   <com-avatar name="First" variant="outline" />
+ *   <com-avatar name="Second" variant="outline" />
+ *   <com-avatar name="Third (on top)" variant="outline" />
+ * </div>
+ * ```
+ */
+declare class ComAvatarGroup {
+    private readonly renderer;
+    private readonly elementRef;
+    /** Query all child ComAvatar components. */
+    private readonly avatars;
+    /**
+     * Size variant — should match child avatar sizes for proper spacing.
+     * If not provided, defaults to 'md'.
+     */
+    readonly size: InputSignal<AvatarSize>;
+    /**
+     * Maximum number of avatars to display.
+     * When exceeded, remaining avatars are hidden and an overflow indicator shows "+N".
+     * Set to 0 or undefined for unlimited.
+     */
+    readonly max: InputSignal<number | undefined>;
+    /**
+     * When true, reverses the stacking order (last avatar on top instead of first).
+     * Also reverses the visual order via flex-row-reverse.
+     */
+    readonly reverse: InputSignal<boolean>;
+    /** Overflow element reference for cleanup. */
+    private overflowElement;
+    /** Track the number of hidden avatars. */
+    protected readonly overflowCount: WritableSignal<number>;
+    /** Whether to show the overflow indicator. */
+    protected readonly showOverflow: Signal<boolean>;
+    constructor();
+    /**
+     * Applies overlapping styles to child avatars and manages visibility.
+     */
+    private applyAvatarStyles;
+    /**
+     * Gets the native element of an avatar by index.
+     */
+    private getAvatarElement;
+    /**
+     * Creates or updates the overflow indicator element.
+     */
+    private updateOverflowIndicator;
+    /**
+     * Returns size-specific classes for the overflow indicator.
+     */
+    private getOverflowSizeClasses;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComAvatarGroup, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComAvatarGroup, "[comAvatarGroup]", ["comAvatarGroup"], { "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "reverse": { "alias": "reverse"; "required": false; "isSignal": true; }; }, {}, ["avatars"], never, true, never>;
+}
+
+export { ComAvatar, ComAvatarCustom, ComAvatarGroup, avatarColorVariants, avatarVariants, getInitials };
+export type { AvatarColor, AvatarShape, AvatarSize, AvatarTemplateContext, AvatarVariant, ResolvedAvatarColor };

package/types/ngx-com-components-badge.d.ts

@@ -0,0 +1,97 @@
+import * as i0 from '@angular/core';
+import { InputSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Variant type for badge appearance.
+ */
+type BadgeVariant = 'primary' | 'accent' | 'warn' | 'success' | 'muted' | 'outline';
+/**
+ * Size type for badge.
+ */
+type BadgeSize = 'sm' | 'default' | 'lg';
+/**
+ * CVA variants for the badge directive.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-success`, `--color-success-foreground`, `--color-success-hover`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-border`, `--color-foreground`, `--radius-badge`, `--radius-badge-sm`, `--radius-pill`
+ */
+declare const badgeVariants: (props?: {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    pill?: boolean;
+}) => string;
+type BadgeVariants = VariantProps<typeof badgeVariants>;
+
+/**
+ * Badge directive — applies styled badge classes to any host element.
+ *
+ * Works on `<span>`, `<a>`, `<button>`, or any other element.
+ * Hover styles are automatically applied only on `<a>` elements via `[a&]:hover:`.
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-success`, `--color-success-foreground`, `--color-success-hover`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-border`, `--color-foreground`, `--radius-badge`, `--radius-badge-sm`, `--radius-pill`
+ *
+ * @example Basic usage
+ * ```html
+ * <span comBadge>Primary</span>
+ * <span comBadge variant="accent">Accent</span>
+ * <span comBadge variant="warn">Warning</span>
+ * ```
+ *
+ * @example Pill shape
+ * ```html
+ * <span comBadge pill>New</span>
+ * <span comBadge variant="success" pill>Online</span>
+ * ```
+ *
+ * @example Sizes
+ * ```html
+ * <span comBadge size="sm">SM</span>
+ * <span comBadge>Default</span>
+ * <span comBadge size="lg">Large</span>
+ * ```
+ *
+ * @example As a link (hover activates automatically)
+ * ```html
+ * <a href="/alerts" comBadge variant="warn">3 alerts</a>
+ * ```
+ *
+ * @example With an icon (SVG auto-sized)
+ * ```html
+ * <span comBadge variant="success">
+ *   <svg><!-- check icon --></svg>
+ *   Online
+ * </span>
+ * ```
+ *
+ * @example Dynamic variant
+ * ```html
+ * <span comBadge [variant]="statusVariant()">{{ statusLabel() }}</span>
+ * ```
+ */
+declare class ComBadge {
+    /** Visual variant — maps to semantic token pairings */
+    readonly variant: InputSignal<BadgeVariant>;
+    /** Badge size */
+    readonly size: InputSignal<BadgeSize>;
+    /** Fully rounded pill shape */
+    readonly pill: InputSignalWithTransform<boolean, unknown>;
+    /** Consumer CSS classes — merged with variant classes via mergeClasses() */
+    readonly userClass: InputSignal<string>;
+    /** @internal Computed host class from CVA + consumer overrides */
+    protected readonly computedClass: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComBadge, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComBadge, "[comBadge]", ["comBadge"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { ComBadge, badgeVariants };
+export type { BadgeSize, BadgeVariant, BadgeVariants };