import * as i0 from '@angular/core'; import { InputSignal, Signal } from '@angular/core'; type EmptyStateSize = 'sm' | 'md' | 'lg'; type EmptyStateAlign = 'start' | 'center'; type EmptyStateOrientation = 'vertical' | 'horizontal'; /** * CVA variants for the empty state container. * * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground` */ declare const emptyStateVariants: (props?: { size?: EmptyStateSize; align?: EmptyStateAlign; orientation?: EmptyStateOrientation; }) => string; /** * CVA variants for the empty state icon container. * * @tokens `--color-muted`, `--color-muted-foreground` */ declare const emptyStateIconVariants: (props?: { size?: EmptyStateSize; }) => string; /** * CVA variants for the empty state title. * * @tokens `--color-foreground` */ declare const emptyStateTitleVariants: (props?: { size?: EmptyStateSize; }) => string; /** * CVA variants for the empty state description. * * @tokens `--color-muted-foreground` */ declare const emptyStateDescriptionVariants: (props?: { size?: EmptyStateSize; }) => string; /** * CVA variants for the empty state actions container. */ declare const emptyStateActionsVariants: (props?: { size?: EmptyStateSize; }) => string; /** * Empty state component - a placeholder surface for when there is no data to display. * * Common use cases include: * - Empty lists or tables ("No results found") * - Initial states before user action ("Create your first project") * - Search results with no matches ("No items match your search") * - Error recovery states ("Something went wrong. Try again.") * * The component is a pure layout container that accepts projected content through attribute directives. * * @tokens `--color-muted`, `--color-muted-foreground`, `--color-foreground` * * @example Minimal empty state * ```html * *
* *
*

No messages

* * ``` * * @example Full empty state with description and action * ```html * *
* *
*

No projects yet

*

* Create your first project to get started organizing your work. *

*
* *
* * ``` * * @example Search empty state with secondary action * ```html * *
* *
*

No results found

*

* Try adjusting your search terms or filters. *

*
* * *
* * ``` * * @example Small size for inline contexts * ```html * *
* *
*

No items

* * ``` * * @example Large size for full-page empty states * ```html * *
* *
*

Welcome to Acme

*

* Your dashboard is ready. Start by creating your first resource. *

*
* *
* * ``` * * @example Horizontal orientation * ```html * *
* *
*

No notifications

*

You're all caught up!

* * ``` * * @example Left-aligned for sidebar contexts * ```html * *
* *
*

No team members

*

Invite people to collaborate.

*
* *
* * ``` */ declare class ComEmptyState { /** Controls overall scale: icon container size, text sizes, spacing. */ readonly size: InputSignal; /** Horizontal alignment of content. */ readonly align: InputSignal; /** Layout direction: vertical stacks content, horizontal places icon beside text. */ readonly orientation: InputSignal; /** Consumer CSS classes - merged with variant classes. */ readonly userClass: InputSignal; protected readonly computedClass: Signal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Empty state icon container directive - styled circular background for icon/illustration. * * Apply to a container element. Place any content inside (typically `com-icon`). * Styling automatically adapts to the parent's `size` input. * * @example * ```html *
* *
* ``` * * @example With custom illustration * ```html *
* *
* ``` * * @tokens `--color-muted`, `--color-muted-foreground` */ declare class ComEmptyStateIcon { private readonly emptyState; protected readonly computedClass: Signal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Empty state title directive - styled heading text. * * Apply to any heading element. Consumer picks the semantic level (h2, h3, etc.). * Styling automatically adapts to the parent's `size` input. * * @example * ```html *

No projects yet

* ``` * * @tokens `--color-foreground` */ declare class ComEmptyStateTitle { private readonly emptyState; protected readonly computedClass: Signal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Empty state description directive - supporting text. * * Apply to a paragraph or text element. * Styling automatically adapts to the parent's `size` input. * * @example * ```html *

* Create your first project to get started organizing your work. *

* ``` * * @tokens `--color-muted-foreground` */ declare class ComEmptyStateDescription { private readonly emptyState; protected readonly computedClass: Signal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } /** * Empty state actions directive - container for action buttons. * * Apply to a container element. Place buttons inside. * Styling automatically adapts to the parent's `size` input. * * @tokens none * * @example Single action * ```html *
* *
* ``` * * @example Multiple actions * ```html *
* * *
* ``` */ declare class ComEmptyStateActions { private readonly emptyState; protected readonly computedClass: Signal; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } export { ComEmptyState, ComEmptyStateActions, ComEmptyStateDescription, ComEmptyStateIcon, ComEmptyStateTitle, emptyStateActionsVariants, emptyStateDescriptionVariants, emptyStateIconVariants, emptyStateTitleVariants, emptyStateVariants }; export type { EmptyStateAlign, EmptyStateOrientation, EmptyStateSize };