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 };