import * as i0 from '@angular/core';
import { InputSignal, InputSignalWithTransform, OutputEmitterRef, Signal } from '@angular/core';
import { VariantProps } from 'class-variance-authority';

type CardVariant = 'elevated' | 'outlined' | 'filled' | 'ghost';
type CardPadding = 'none' | 'sm' | 'md' | 'lg';
type CardRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl';
type CardAlign = 'start' | 'end' | 'center' | 'between';
type CardActionsDirection = 'row' | 'column';
type CardMediaPosition = 'top' | 'bottom' | 'inset';
type CardAccentColor = 'primary' | 'accent' | 'warn' | 'success' | 'muted';
type CardAccentPosition = 'top' | 'left';
type CardBadgeColor = 'primary' | 'accent' | 'warn' | 'success' | 'muted';
type CardBadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
/**
 * CVA variants for the card container.
 *
 * @tokens `--color-card`, `--color-card-foreground`, `--color-muted`, `--color-muted-hover`,
 *         `--color-foreground`, `--color-border`, `--color-primary`, `--color-ring`, `--shadow-card`
 */
declare const cardVariants: (props?: {
    variant?: CardVariant;
    padding?: CardPadding;
    radius?: CardRadius;
    interactive?: boolean;
}) => string;
type CardVariants = VariantProps<typeof cardVariants>;
/**
 * CVA variants for card footer alignment.
 */
declare const cardFooterVariants: (props?: {
    align?: CardAlign;
}) => string;
type CardFooterVariants = VariantProps<typeof cardFooterVariants>;
/**
 * CVA variants for card actions.
 */
declare const cardActionsVariants: (props?: {
    align?: CardAlign;
    direction?: CardActionsDirection;
}) => string;
type CardActionsVariants = VariantProps<typeof cardActionsVariants>;
/**
 * CVA variants for card media positioning.
 */
declare const cardMediaVariants: (props?: {
    position?: CardMediaPosition;
}) => string;
type CardMediaVariants = VariantProps<typeof cardMediaVariants>;
/**
 * CVA variants for card accent strip.
 *
 * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`, `--color-muted`
 */
declare const cardAccentVariants: (props?: {
    color?: CardAccentColor;
    position?: CardAccentPosition;
}) => string;
type CardAccentVariants = VariantProps<typeof cardAccentVariants>;
/**
 * CVA variants for card badge overlay.
 *
 * @tokens `--color-primary`, `--color-primary-foreground`, `--color-accent`, `--color-accent-foreground`,
 *         `--color-warn`, `--color-warn-foreground`, `--color-success`, `--color-success-foreground`,
 *         `--color-muted`, `--color-muted-foreground`, `--radius-card`, `--radius-media`, `--radius-pill`
 */
declare const cardBadgeVariants: (props?: {
    position?: CardBadgePosition;
    color?: CardBadgeColor;
}) => string;
type CardBadgeVariants = VariantProps<typeof cardBadgeVariants>;

/**
 * Card container component - a styled surface for content.
 *
 * The card is a pure container with no imposed structure.
 * Use card directives (comCardHeader, comCardContent, etc.) to compose layouts.
 *
 * @tokens `--color-card`, `--color-card-foreground`, `--color-muted`, `--color-muted-foreground`,
 *         `--color-muted-hover`, `--color-border`, `--color-primary`, `--color-ring`, `--shadow-card`
 *
 * @example Basic card
 * ```html
 * <com-card>
 *   <div comCardContent>Simple content</div>
 * </com-card>
 * ```
 *
 * @example Interactive card
 * ```html
 * <com-card [interactive]="true" (click)="onCardClick()">
 *   <div comCardContent>Clickable card</div>
 * </com-card>
 * ```
 *
 * @example Outlined variant with custom padding
 * ```html
 * <com-card variant="outlined" padding="md">
 *   <p>Outlined card with medium padding</p>
 * </com-card>
 * ```
 */
declare class ComCard {
    /** Visual treatment of the card surface. */
    readonly variant: InputSignal<CardVariant>;
    /** Inner spacing. Default 'none' - sub-parts manage their own padding. */
    readonly padding: InputSignal<CardPadding>;
    /** Border radius. */
    readonly radius: InputSignal<CardRadius>;
    /** When true, adds hover/active states and cursor-pointer. */
    readonly interactive: InputSignalWithTransform<boolean, unknown>;
    /** Consumer CSS classes - merged with variant classes. */
    readonly userClass: InputSignal<string>;
    /** Emitted when an interactive card is activated via keyboard (Enter or Space). */
    readonly cardActivated: OutputEmitterRef<void>;
    protected readonly computedClass: Signal<string>;
    protected onKeyActivate(event: Event): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCard, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ComCard, "com-card", ["comCard"], { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "cardActivated": "cardActivated"; }, never, ["*"], true, never>;
}

/**
 * Card header directive - top section for title and actions.
 *
 * Uses `flex` with `justify-between` so it naturally supports a title group
 * on the left and an action element (icon button, menu trigger) on the right.
 *
 * **Important:** When using both `comCardTitle` and `comCardSubtitle`,
 * wrap them in a container `<div>` so they stack vertically as a single
 * flex child. Without the wrapper, `justify-between` will push them apart.
 *
 * @example Header with title only
 * ```html
 * <div comCardHeader>
 *   <h3 comCardTitle>Card Title</h3>
 * </div>
 * ```
 *
 * @example Header with title, subtitle, and action
 * ```html
 * <div comCardHeader>
 *   <div>
 *     <h3 comCardTitle>Title</h3>
 *     <p comCardSubtitle>Subtitle</p>
 *   </div>
 *   <button comButton variant="ghost" size="icon" aria-label="More">...</button>
 * </div>
 * ```
 *
 * @tokens None - uses only layout utilities
 */
declare class ComCardHeader {
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardHeader, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardHeader, "[comCardHeader]", ["comCardHeader"], {}, {}, never, never, true, never>;
}

/**
 * Card title directive - styled heading text.
 *
 * Apply to any heading element. Consumer picks the semantic level (h2, h3, etc.).
 *
 * @example
 * ```html
 * <h3 comCardTitle>Project Alpha</h3>
 * ```
 *
 * @tokens `--color-foreground`
 */
declare class ComCardTitle {
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardTitle, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardTitle, "[comCardTitle]", ["comCardTitle"], {}, {}, never, never, true, never>;
}

/**
 * Card subtitle directive - secondary text styling.
 *
 * @example
 * ```html
 * <p comCardSubtitle>Last updated 2 hours ago</p>
 * ```
 *
 * @tokens `--color-muted-foreground`
 */
declare class ComCardSubtitle {
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardSubtitle, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardSubtitle, "[comCardSubtitle]", ["comCardSubtitle"], {}, {}, never, never, true, never>;
}

/**
 * Card content directive - main body area with consistent padding.
 *
 * @example
 * ```html
 * <div comCardContent>
 *   <p>Card body content goes here.</p>
 * </div>
 * ```
 *
 * @tokens None - uses only layout utilities
 */
declare class ComCardContent {
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardContent, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardContent, "[comCardContent]", ["comCardContent"], {}, {}, never, never, true, never>;
}

/**
 * Card footer directive - bottom section for metadata or secondary actions.
 *
 * @example Footer with alignment
 * ```html
 * <div comCardFooter align="between">
 *   <span class="text-sm text-muted-foreground">Updated 3m ago</span>
 *   <a comButton variant="link" size="sm">View details</a>
 * </div>
 * ```
 *
 * @tokens None - uses only layout utilities
 */
declare class ComCardFooter {
    /** Horizontal alignment of footer content. */
    readonly align: InputSignal<CardAlign>;
    /** Consumer CSS classes - merged with variant classes. */
    readonly userClass: InputSignal<string>;
    protected readonly computedClass: Signal<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardFooter, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardFooter, "[comCardFooter]", ["comCardFooter"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * Card actions directive - dedicated button row for primary card actions.
 *
 * Separate from footer because actions and footer metadata serve different purposes.
 *
 * @example Actions with alignment
 * ```html
 * <div comCardActions>
 *   <button comButton variant="ghost" size="sm">Cancel</button>
 *   <button comButton size="sm">Confirm</button>
 * </div>
 * ```
 *
 * @example Stacked column layout
 * ```html
 * <div comCardActions direction="column" align="start">
 *   <button comButton fullWidth>Primary Action</button>
 *   <button comButton variant="outline" fullWidth>Secondary</button>
 * </div>
 * ```
 *
 * @tokens None - uses only layout utilities
 */
declare class ComCardActions {
    /** Horizontal alignment of actions. */
    readonly align: InputSignal<CardAlign>;
    /** Layout direction - row or column. */
    readonly direction: InputSignal<CardActionsDirection>;
    /** Consumer CSS classes - merged with variant classes. */
    readonly userClass: InputSignal<string>;
    protected readonly computedClass: Signal<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardActions, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardActions, "[comCardActions]", ["comCardActions"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * Card media directive - image/video slot with aspect ratio handling.
 *
 * Apply to <img>, <video>, <picture>, or a wrapper <div>.
 *
 * @example Top media (bleeds to edge)
 * ```html
 * <img comCardMedia src="/hero.jpg" alt="Hero image" />
 * ```
 *
 * @example Inset media (padded with rounded corners)
 * ```html
 * <img comCardMedia position="inset" src="/preview.jpg" alt="Preview" />
 * ```
 *
 * @tokens None - uses only layout utilities
 */
declare class ComCardMedia {
    /** Media positioning within the card. */
    readonly position: InputSignal<CardMediaPosition>;
    /** Consumer CSS classes - merged with variant classes. */
    readonly userClass: InputSignal<string>;
    protected readonly computedClass: Signal<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardMedia, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardMedia, "[comCardMedia]", ["comCardMedia"], { "position": { "alias": "position"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * Card divider directive - horizontal rule between card sections.
 *
 * @example Standard divider (with side margins)
 * ```html
 * <hr comCardDivider />
 * ```
 *
 * @example Full-width divider (edge to edge)
 * ```html
 * <hr comCardDivider [inset]="true" />
 * ```
 *
 * @tokens `--color-border`
 */
declare class ComCardDivider {
    /** When true, divider spans full card width (no horizontal margin). */
    readonly inset: InputSignalWithTransform<boolean, unknown>;
    /** Consumer CSS classes. */
    readonly userClass: InputSignal<string>;
    protected readonly computedClass: Signal<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardDivider, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardDivider, "[comCardDivider]", ["comCardDivider"], { "inset": { "alias": "inset"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * Card accent directive - colored strip for status or category indication.
 *
 * Place as the first child of the card for top accent, or use position="left"
 * for a left-edge strip (requires adding left padding to content).
 *
 * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`, `--color-muted`
 *
 * @example Top accent strip
 * ```html
 * <com-card>
 *   <div comCardAccent color="warn"></div>
 *   <div comCardContent>Warning content</div>
 * </com-card>
 * ```
 *
 * @example Left accent strip
 * ```html
 * <com-card>
 *   <div comCardAccent color="success" position="left"></div>
 *   <div comCardContent class="pl-5">Content with left padding</div>
 * </com-card>
 * ```
 */
declare class ComCardAccent {
    /** Accent color. */
    readonly color: InputSignal<CardAccentColor>;
    /** Position of the accent strip. */
    readonly position: InputSignal<CardAccentPosition>;
    /** Consumer CSS classes - merged with variant classes. */
    readonly userClass: InputSignal<string>;
    protected readonly computedClass: Signal<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardAccent, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardAccent, "[comCardAccent]", ["comCardAccent"], { "color": { "alias": "color"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

/**
 * Card badge directive - positioned overlay for labels, tags, or status indicators.
 *
 * Floats over the card content (e.g., "NEW", "SALE", "Featured").
 *
 * @tokens `--color-primary`, `--color-primary-foreground`, `--color-accent`, `--color-accent-foreground`,
 *         `--color-warn`, `--color-warn-foreground`, `--color-success`, `--color-success-foreground`,
 *         `--color-muted`, `--color-muted-foreground`, `--radius-pill`
 *
 * @example Badge in top-right corner
 * ```html
 * <com-card>
 *   <span comCardBadge>NEW</span>
 *   <img comCardMedia src="/product.jpg" alt="Product" />
 * </com-card>
 * ```
 *
 * @example Badge with custom position and color
 * ```html
 * <com-card>
 *   <span comCardBadge position="top-left" color="warn">SALE</span>
 *   <div comCardContent>Product details</div>
 * </com-card>
 * ```
 */
declare class ComCardBadge {
    /** Badge position within the card. */
    readonly position: InputSignal<CardBadgePosition>;
    /** Badge color. */
    readonly color: InputSignal<CardBadgeColor>;
    /** Consumer CSS classes - merged with variant classes. */
    readonly userClass: InputSignal<string>;
    protected readonly computedClass: Signal<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCardBadge, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCardBadge, "[comCardBadge]", ["comCardBadge"], { "position": { "alias": "position"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
}

export { ComCard, ComCardAccent, ComCardActions, ComCardBadge, ComCardContent, ComCardDivider, ComCardFooter, ComCardHeader, ComCardMedia, ComCardSubtitle, ComCardTitle, cardAccentVariants, cardActionsVariants, cardBadgeVariants, cardFooterVariants, cardMediaVariants, cardVariants };
export type { CardAccentColor, CardAccentPosition, CardAccentVariants, CardActionsDirection, CardActionsVariants, CardAlign, CardBadgeColor, CardBadgePosition, CardBadgeVariants, CardFooterVariants, CardMediaPosition, CardMediaVariants, CardPadding, CardRadius, CardVariant, CardVariants };