@pecb-ui/components 1.1.2 → 2.0.0

package/index.d.ts

@@ -1,5 +1,2441 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, ChangeDetectorRef, TemplateRef, Type, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
+import * as i1 from '@angular/common';
+import { SafeHtml, DomSanitizer } from '@angular/platform-browser';
+import { ControlValueAccessor } from '@angular/forms';
+import { Observable } from 'rxjs';
+
+type ButtonVariant = 'primary' | 'primary-outline' | 'primary-2' | 'primary-2-outline' | 'neutral' | 'neutral-outline' | 'secondary' | 'text' | 'text-muted' | 'text-brand' | 'destructive' | 'destructive-outline';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonIconStyle = 'none' | 'leading' | 'trailing' | 'icon-only';
+declare class ButtonComponent {
+    private readonly sanitizer;
+    id: _angular_core.InputSignal<string>;
+    /**
+     * The visual style variant of the button
+     */
+    variant: _angular_core.InputSignal<ButtonVariant>;
+    /**
+     * The size of the button
+     */
+    size: _angular_core.InputSignal<ButtonSize>;
+    /**
+     * Icon placement style
+     */
+    iconStyle: _angular_core.InputSignal<ButtonIconStyle>;
+    /**
+     * Icon to display (used with iconStyle)
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the button is disabled
+     */
+    disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the button should take full width
+     */
+    fullWidth: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the button is in loading state
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Button type attribute
+     */
+    type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    /**
+     * Accessible label for the button (required for icon-only buttons)
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ID of element that labels this button
+     */
+    ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ID of element that describes this button
+     */
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Indicates the button controls an expandable element
+     */
+    ariaExpanded: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Indicates the pressed state for toggle buttons
+     */
+    ariaPressed: _angular_core.InputSignal<boolean | undefined>;
+    /**
+     * Indicates the button opens a popup (menu, listbox, dialog, etc.)
+     */
+    ariaHasPopup: _angular_core.InputSignal<boolean | "dialog" | "menu" | "listbox" | "tree" | "grid" | undefined>;
+    /**
+     * ID of the element controlled by this button
+     */
+    ariaControls: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Event emitted when the button is clicked
+     */
+    clicked: _angular_core.OutputEmitterRef<MouseEvent>;
+    /**
+     * Host binding for the component's ID
+     */
+    get hostId(): null;
+    /**
+     * Get CSS classes for the button
+     */
+    get buttonClasses(): string[];
+    get showLeadingIcon(): boolean;
+    get showTrailingIcon(): boolean;
+    get isIconOnly(): boolean;
+    get loadingText(): string;
+    get isSvgIcon(): boolean;
+    get safeIconHtml(): SafeHtml;
+    onClick(event: MouseEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ButtonComponent, "pecb-button", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "iconStyle": { "alias": "iconStyle"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; "ariaHasPopup": { "alias": "ariaHasPopup"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+type CardElevation = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+type CardRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
 /**
- * Generated bundle index. Do not edit.
+ * Semantic role for the card component
  */
-/// <amd-module name="@pecb-ui/components" />
-export * from './public-api';
+type CardRole = 'article' | 'region' | 'group' | 'listitem' | 'none';
+declare class CardComponent {
+    /**
+     * Unique ID for the card element
+     */
+    id: _angular_core.InputSignal<string>;
+    /**
+     * The elevation level (shadow depth) of the card
+     */
+    elevation: _angular_core.InputSignal<CardElevation>;
+    /**
+     * Whether the card should be hoverable with elevation change
+     */
+    hoverable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to add padding to the card
+     */
+    noPadding: _angular_core.InputSignal<boolean>;
+    /**
+     * Border-radius: predefined token ('xs'|'sm'|'md'|'lg'|'none'|'full')
+     * or any CSS value e.g. '20px', '50%'
+     */
+    radius: _angular_core.InputSignal<string>;
+    /**
+     * Semantic role for the card (article, region, group, listitem, or none)
+     * Use 'article' for self-contained content, 'region' for significant sections
+     */
+    role: _angular_core.InputSignal<CardRole>;
+    /**
+     * Accessible label for the card
+     */
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ID of element that labels this card
+     */
+    ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * ID of element that describes this card
+     */
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Get CSS classes for the card
+     */
+    get cardClasses(): string[];
+    get borderRadiusStyle(): string;
+    get roleAttribute(): string | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "pecb-card", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "elevation": { "alias": "elevation"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "noPadding": { "alias": "noPadding"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class CardHeaderComponent {
+    headingLevel: _angular_core.InputSignal<number | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardHeaderComponent, "pecb-card-header", never, { "headingLevel": { "alias": "headingLevel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class CardBodyComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardBodyComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardBodyComponent, "pecb-card-body", never, {}, {}, never, ["*"], true, never>;
+}
+declare class CardFooterComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardFooterComponent, "pecb-card-footer", never, {}, {}, never, ["*"], true, never>;
+}
+
+type StatusType = 'warning' | 'action' | 'success' | 'error' | 'different' | 'disabled' | 'neutral';
+type StatusVariant = 'accent' | 'filled' | 'outline' | 'custom';
+type StatusSize = 'sm' | 'md' | 'lg';
+declare class StatusComponent {
+    private readonly _id;
+    type: _angular_core.InputSignal<StatusType>;
+    variant: _angular_core.InputSignal<StatusVariant>;
+    size: _angular_core.InputSignal<StatusSize>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    text: _angular_core.InputSignal<string | undefined>;
+    customClass: _angular_core.InputSignal<string | undefined>;
+    get id(): string;
+    get statusClasses(): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusComponent, "pecb-status", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "customClass": { "alias": "customClass"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type PaginationSize = 'sm' | 'md' | 'lg';
+type PaginationVariant = 'full' | 'compact' | 'minimal' | 'centered';
+interface PageChangeEvent {
+    page: number;
+    pageSize: number;
+    startIndex: number;
+    endIndex: number;
+}
+declare class PaginationComponent {
+    private elementRef;
+    private cdr;
+    totalItems: _angular_core.InputSignal<number>;
+    pageSize: _angular_core.ModelSignal<number>;
+    currentPage: _angular_core.ModelSignal<number>;
+    pageSizeOptions: _angular_core.InputSignal<number[]>;
+    size: _angular_core.InputSignal<PaginationSize>;
+    variant: _angular_core.InputSignal<PaginationVariant>;
+    showPageSizeSelector: _angular_core.InputSignal<boolean>;
+    showItemsInfo: _angular_core.InputSignal<boolean>;
+    maxVisiblePages: _angular_core.InputSignal<number>;
+    disabled: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string>;
+    pageChange: _angular_core.OutputEmitterRef<PageChangeEvent>;
+    pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    readonly totalPages: _angular_core.Signal<number>;
+    readonly visiblePages: _angular_core.Signal<(string | number)[]>;
+    isDropdownOpen: _angular_core.WritableSignal<boolean>;
+    constructor(elementRef: ElementRef, cdr: ChangeDetectorRef);
+    onDocumentClick(event: MouseEvent): void;
+    get containerClasses(): string[];
+    get showPages(): boolean;
+    get showPageSize(): boolean;
+    get itemsInfoText(): string;
+    get startIndex(): number;
+    get endIndex(): number;
+    get canGoPrevious(): boolean;
+    get canGoNext(): boolean;
+    goToPage(page: number): void;
+    goToPrevious(): void;
+    goToNext(): void;
+    onPageSizeChange(newSize: number): void;
+    toggleDropdown(): void;
+    closeDropdown(): void;
+    isNumber(value: number | string): boolean;
+    trackByPage(index: number, page: number | string): number | string;
+    private emitPageChange;
+    private computeVisiblePages;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PaginationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PaginationComponent, "pecb-pagination", never, { "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showPageSizeSelector": { "alias": "showPageSizeSelector"; "required": false; "isSignal": true; }; "showItemsInfo": { "alias": "showItemsInfo"; "required": false; "isSignal": true; }; "maxVisiblePages": { "alias": "maxVisiblePages"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "pageSize": "pageSizeChange"; "currentPage": "currentPageChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
+}
+
+type TableSize = 'sm' | 'md' | 'lg';
+type TableVariant = 'default' | 'striped' | 'bordered';
+/**
+ * Defines built-in column types
+ */
+type PecbTableColumnType = 'text' | 'link' | 'status' | 'action' | 'user' | 'custom';
+/**
+ * Defines built-in component names for columns
+ */
+type PecbTableColumnComponent = 'status' | 'action' | 'user';
+interface TableAction {
+    id: string;
+    icon: 'view' | 'edit' | 'delete' | 'download' | 'copy' | 'custom';
+    tooltip?: string;
+    customIcon?: string;
+    disabled?: boolean;
+    variant?: 'default' | 'danger';
+    /** Whether to show a vertical divider before this action */
+    dividerBefore?: boolean;
+    /** Click handler for this specific action */
+    action?: (row: any, index: number) => void;
+}
+interface TableStatusConfig {
+    typeMap?: Record<string, string>;
+    variant?: 'accent' | 'filled' | 'outline';
+    size?: 'sm' | 'md' | 'lg';
+}
+interface TableUserConfig {
+    avatarKey?: string;
+    nameKey?: string;
+    secondaryKey?: string;
+}
+interface PecbTableColumn {
+    key: string;
+    label: string;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    cellTemplate?: TemplateRef<any>;
+    headerTemplate?: TemplateRef<any>;
+    cssClass?: string;
+    type?: PecbTableColumnType;
+    component?: PecbTableColumnComponent;
+    dynamicComponent?: Type<any>;
+    componentInputs?: Record<string, any>;
+    componentInputsFn?: (row: any, value: any, index: number) => Record<string, any>;
+    actions?: TableAction[];
+    statusConfig?: TableStatusConfig;
+    userConfig?: TableUserConfig;
+}
+interface TableSortEvent {
+    column: string;
+    direction: 'asc' | 'desc' | null;
+}
+interface TableRowActionEvent {
+    action: string;
+    row: any;
+    index: number;
+}
+interface TableSelectionEvent {
+    selectedRows: any[];
+    selectedIndices: number[];
+}
+declare class TableComponent {
+    private sanitizer;
+    private cdr;
+    constructor(sanitizer: DomSanitizer, cdr: ChangeDetectorRef);
+    /**
+     * Column definitions for the table
+     */
+    columns: _angular_core.InputSignal<PecbTableColumn[]>;
+    /**
+     * Data array to display in the table
+     */
+    data: _angular_core.InputSignal<any[]>;
+    /**
+     * Size variant of the table
+     * @default 'md'
+     */
+    size: _angular_core.InputSignal<TableSize>;
+    /**
+     * Visual variant of the table
+     * @default 'default'
+     */
+    variant: _angular_core.InputSignal<TableVariant>;
+    /**
+     * Whether to show the table header
+     * @default true
+     */
+    showHeader: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to enable row hover effect
+     * @default true
+     */
+    hoverable: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show pagination
+     * @default true
+     */
+    showPagination: _angular_core.InputSignal<boolean>;
+    /**
+     * Total number of items for pagination
+     */
+    totalItems: _angular_core.InputSignal<number>;
+    /**
+     * Current page number (1-based)
+     * @default 1
+     */
+    currentPage: _angular_core.ModelSignal<number>;
+    /**
+     * Number of items per page
+     * @default 15
+     */
+    pageSize: _angular_core.ModelSignal<number>;
+    /**
+     * Available page size options
+     */
+    pageSizeOptions: _angular_core.InputSignal<number[]>;
+    /**
+     * Whether to show page size selector in pagination
+     * @default true
+     */
+    showPageSizeSelector: _angular_core.InputSignal<boolean>;
+    /**
+     * Pagination variant
+     * @default 'full'
+     */
+    paginationVariant: _angular_core.InputSignal<"full" | "compact" | "minimal" | "centered">;
+    /**
+     * Message to display when there is no data
+     */
+    emptyMessage: _angular_core.InputSignal<string>;
+    /**
+     * Whether to show loading state
+     * @default false
+     */
+    loading: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to enable row selection
+     * @default false
+     */
+    selectable: _angular_core.InputSignal<boolean>;
+    /**
+     * Currently selected row indices
+     */
+    selectedIndices: _angular_core.ModelSignal<number[]>;
+    /**
+     * Whether the table has a fixed header
+     * @default false
+     */
+    stickyHeader: _angular_core.InputSignal<boolean>;
+    /**
+     * Maximum height of the table body (enables scrolling)
+     */
+    maxHeight: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Column key currently being sorted
+     */
+    sortColumn: _angular_core.ModelSignal<string | undefined>;
+    /**
+     * Current sort direction
+     */
+    sortDirection: _angular_core.ModelSignal<"desc" | "asc" | null>;
+    /**
+     * ARIA label for the table
+     */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Emitted when a page change occurs
+     */
+    pageChange: _angular_core.OutputEmitterRef<PageChangeEvent>;
+    /**
+     * Emitted when page size changes
+     */
+    pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    /**
+     * Emitted when a row is clicked
+     */
+    rowClick: _angular_core.OutputEmitterRef<{
+        row: any;
+        index: number;
+    }>;
+    /**
+     * Emitted when a row action is triggered
+     */
+    rowAction: _angular_core.OutputEmitterRef<TableRowActionEvent>;
+    /**
+     * Emitted when sorting changes
+     */
+    sortChange: _angular_core.OutputEmitterRef<TableSortEvent>;
+    /**
+     * Emitted when row selection changes
+     */
+    selectionChange: _angular_core.OutputEmitterRef<TableSelectionEvent>;
+    emptyTemplate?: TemplateRef<any>;
+    loadingTemplate?: TemplateRef<any>;
+    get containerClasses(): string;
+    get paginationClasses(): string;
+    get tableClasses(): string;
+    getCellValue(row: any, key: string): any;
+    getAlignmentClass(column: PecbTableColumn): string;
+    onRowClick(row: any, index: number): void;
+    onRowAction(action: string, row: any, index: number, event: Event): void;
+    onHeaderClick(column: PecbTableColumn): void;
+    toggleRowSelection(index: number): void;
+    toggleAllSelection(): void;
+    isRowSelected(index: number): boolean;
+    isAllSelected(): boolean;
+    isSomeSelected(): boolean;
+    onPageChange(event: PageChangeEvent): void;
+    onPageSizeChange(newSize: number): void;
+    getSortState(column: PecbTableColumn): 'asc' | 'desc' | 'none';
+    trackByIndex(index: number): number;
+    trackByKey(_: number, column: PecbTableColumn): string;
+    getColumnType(column: PecbTableColumn): string;
+    getStatusType(value: any, column: PecbTableColumn): any;
+    getStatusVariant(column: PecbTableColumn): any;
+    getStatusSize(column: PecbTableColumn): any;
+    getUserData(row: any, column: PecbTableColumn): {
+        avatar: string;
+        name: string;
+        secondary: string;
+    };
+    getActions(column: PecbTableColumn): TableAction[];
+    onActionClick(action: TableAction, row: any, index: number, event: Event): void;
+    getDynamicComponentInputs(row: any, column: PecbTableColumn, index: number): Record<string, any>;
+    hasDynamicComponent(column: PecbTableColumn): boolean;
+    getSafeIcon(iconSvg: string | undefined): SafeHtml;
+    /**
+     * Builds a safe href from a URL string, prepending https:// if missing
+     */
+    getLinkHref(value: string): string;
+    private emitSelectionChange;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TableComponent, "pecb-table", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "hoverable": { "alias": "hoverable"; "required": false; "isSignal": true; }; "showPagination": { "alias": "showPagination"; "required": false; "isSignal": true; }; "totalItems": { "alias": "totalItems"; "required": false; "isSignal": true; }; "currentPage": { "alias": "currentPage"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showPageSizeSelector": { "alias": "showPageSizeSelector"; "required": false; "isSignal": true; }; "paginationVariant": { "alias": "paginationVariant"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selectedIndices": { "alias": "selectedIndices"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "sortColumn": { "alias": "sortColumn"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; }, { "currentPage": "currentPageChange"; "pageSize": "pageSizeChange"; "selectedIndices": "selectedIndicesChange"; "sortColumn": "sortColumnChange"; "sortDirection": "sortDirectionChange"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "rowClick": "rowClick"; "rowAction": "rowAction"; "sortChange": "sortChange"; "selectionChange": "selectionChange"; }, ["emptyTemplate", "loadingTemplate"], never, true, never>;
+}
+
+type TabStyle = 'rounded' | 'line';
+type TabSize = 'sm' | 'md';
+declare class TabComponent {
+    id: _angular_core.InputSignal<string>;
+    tabStyle: _angular_core.InputSignal<TabStyle>;
+    size: _angular_core.InputSignal<TabSize>;
+    label: _angular_core.InputSignal<string>;
+    icon: _angular_core.InputSignal<number | undefined>;
+    active: _angular_core.InputSignal<boolean>;
+    disabled: _angular_core.InputSignal<boolean>;
+    closable: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    ariaControls: _angular_core.InputSignal<string | undefined>;
+    ariaSelected: _angular_core.InputSignal<boolean | undefined>;
+    clicked: _angular_core.OutputEmitterRef<string>;
+    closed: _angular_core.OutputEmitterRef<string>;
+    get tabClasses(): string[];
+    onClick(event: MouseEvent): void;
+    onClose(event: MouseEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "pecb-tab", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "tabStyle": { "alias": "tabStyle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaControls": { "alias": "ariaControls"; "required": false; "isSignal": true; }; "ariaSelected": { "alias": "ariaSelected"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; "closed": "closed"; }, never, never, true, never>;
+}
+
+type DatepickerSize = 'sm' | 'md' | 'lg' | 'xl';
+interface CalendarDay {
+    date: Date;
+    day: number;
+    isCurrentMonth: boolean;
+    isSelected: boolean;
+    isToday: boolean;
+}
+declare class DatepickerComponent implements ControlValueAccessor {
+    private readonly elementRef;
+    inputElement?: ElementRef<HTMLInputElement>;
+    /**
+     * Unique ID for the datepicker element
+     */
+    id: _angular_core.InputSignal<string>;
+    /**
+     * Label text to display above the input
+     */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * The size of the datepicker
+     */
+    size: _angular_core.InputSignal<DatepickerSize>;
+    /**
+     * Width of the datepicker (any valid CSS value, e.g. '300px', '50%', '100%')
+     * Defaults to 100% via CSS
+     */
+    width: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the field is required
+     */
+    required: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the datepicker is disabled
+     */
+    disabled: _angular_core.ModelSignal<boolean>;
+    /**
+     * Date format for display (default: MM/DD/YYYY)
+     */
+    dateFormat: _angular_core.InputSignal<string>;
+    /**
+     * Minimum selectable date
+     */
+    minDate: _angular_core.InputSignal<Date | undefined>;
+    /**
+     * Maximum selectable date
+     */
+    maxDate: _angular_core.InputSignal<Date | undefined>;
+    /**
+     * Event emitted when date is selected
+     */
+    dateChange: _angular_core.OutputEmitterRef<Date | null>;
+    /**
+     * Event emitted when calendar is opened
+     */
+    opened: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Event emitted when calendar is closed
+     */
+    closed: _angular_core.OutputEmitterRef<void>;
+    selectedDate: _angular_core.WritableSignal<Date | null>;
+    isCalendarOpen: _angular_core.WritableSignal<boolean>;
+    currentMonth: _angular_core.WritableSignal<Date>;
+    calendarDays: _angular_core.WritableSignal<CalendarDay[]>;
+    weekDays: string[];
+    monthNames: string[];
+    private onChange;
+    private onTouched;
+    constructor();
+    get wrapperClasses(): string[];
+    get displayValue(): string;
+    get monthYearDisplay(): string;
+    toggleCalendar(): void;
+    closeCalendar(): void;
+    previousMonth(): void;
+    nextMonth(): void;
+    selectDate(day: CalendarDay): void;
+    clearDate(event: MouseEvent): void;
+    onDocumentClick(event: MouseEvent): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private generateCalendar;
+    private formatDate;
+    writeValue(value: Date | null): void;
+    registerOnChange(fn: (value: Date | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DatepickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DatepickerComponent, "pecb-datepicker", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "dateFormat": { "alias": "dateFormat"; "required": false; "isSignal": true; }; "minDate": { "alias": "minDate"; "required": false; "isSignal": true; }; "maxDate": { "alias": "maxDate"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "dateChange": "dateChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
+type InputSize = 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * A professional input component with floating label and multiple types.
+ * Fully accessible with WCAG 2.1 AA compliance and reactive forms support.
+ *
+ * @example
+ * ```html
+ * <pecb-input
+ *   label="Email"
+ *   type="email"
+ *   placeholder="Enter your email"
+ *   [(ngModel)]="email"
+ * ></pecb-input>
+ *
+ * <!-- With predefined icon -->
+ * <pecb-input
+ *   label="Email"
+ *   type="email"
+ *   icon="email"
+ *   iconPosition="left"
+ * ></pecb-input>
+ *
+ * <!-- With custom SVG icon -->
+ * <pecb-input
+ *   label="Phone"
+ *   type="tel"
+ *   [icon]="'<svg>...</svg>'"
+ *   iconPosition="left"
+ * ></pecb-input>
+ *
+ * <!-- With error state -->
+ * <pecb-input
+ *   label="Password"
+ *   type="password"
+ *   [error]="true"
+ *   errorMessage="Password is required"
+ * ></pecb-input>
+ * ```
+ *
+ * @publicApi
+ */
+declare class InputComponent implements ControlValueAccessor {
+    private readonly sanitizer;
+    inputElement?: ElementRef<HTMLInputElement>;
+    /**
+     * Unique ID for the input element
+     */
+    id: _angular_core.InputSignal<string>;
+    /**
+     * Input type
+     */
+    type: _angular_core.InputSignal<InputType>;
+    /**
+     * Label text to display
+     */
+    label: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Placeholder text (shown when label is not present)
+     */
+    placeholder: _angular_core.InputSignal<string>;
+    /**
+     * The size of the input
+     */
+    size: _angular_core.InputSignal<InputSize>;
+    /**
+     * Width of the input wrapper — any valid CSS value e.g. '300px', '50%', '100%'
+     * Defaults to 100% (full width of parent)
+     */
+    width: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether the field is required
+     */
+    required: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether the input is disabled
+     */
+    disabled: _angular_core.ModelSignal<boolean>;
+    /**
+     * Whether the input is readonly
+     */
+    readonly: _angular_core.InputSignal<boolean>;
+    /**
+     * Whether to show error state
+     */
+    error: _angular_core.InputSignal<boolean>;
+    /**
+     * Error message to display
+     */
+    errorMessage: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Helper text to display below input
+     */
+    helperText: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Icon to display - can be a predefined name ('email', 'search', 'user') or custom SVG string
+     */
+    icon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Icon position (left or right)
+     */
+    iconPosition: _angular_core.InputSignal<"left" | "right">;
+    /**
+     * Left icon name or HTML (deprecated - use icon with iconPosition instead)
+     */
+    leftIcon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Right icon name or HTML (deprecated - use icon with iconPosition instead)
+     */
+    rightIcon: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Whether to show clear button
+     */
+    clearable: _angular_core.InputSignal<boolean>;
+    /**
+     * Maximum length of input
+     */
+    maxLength: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Minimum value (for number type)
+     */
+    min: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Maximum value (for number type)
+     */
+    max: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Step value (for number type)
+     */
+    step: _angular_core.InputSignal<number | undefined>;
+    /**
+     * Autocomplete attribute
+     */
+    autocomplete: _angular_core.InputSignal<string | undefined>;
+    /**
+     * Show info icon next to the label
+     */
+    showInfoIcon: _angular_core.InputSignal<boolean>;
+    /**
+     * Event emitted when value changes
+     */
+    valueChange: _angular_core.OutputEmitterRef<string>;
+    /**
+     * Event emitted on blur
+     */
+    blurred: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Event emitted on focus
+     */
+    focused: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Event emitted when clear button is clicked
+     */
+    cleared: _angular_core.OutputEmitterRef<void>;
+    value: _angular_core.WritableSignal<string>;
+    isFocused: _angular_core.WritableSignal<boolean>;
+    showPassword: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    get inputType(): string;
+    get showClearButton(): boolean;
+    get showPasswordToggle(): boolean;
+    get computedLeftIcon(): string | undefined;
+    get computedRightIcon(): string | undefined;
+    onInput(event: Event): void;
+    onFocus(): void;
+    onBlur(): void;
+    clearValue(event: MouseEvent): void;
+    togglePasswordVisibility(event: MouseEvent): void;
+    focus(): void;
+    sanitizeIcon(icon: string | undefined): SafeHtml;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "pecb-input", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "leftIcon": { "alias": "leftIcon"; "required": false; "isSignal": true; }; "rightIcon": { "alias": "rightIcon"; "required": false; "isSignal": true; }; "clearable": { "alias": "clearable"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "showInfoIcon": { "alias": "showInfoIcon"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "valueChange": "valueChange"; "blurred": "blurred"; "focused": "focused"; "cleared": "cleared"; }, never, never, true, never>;
+}
+
+type RadioVariant = 'dot' | 'filled';
+type RadioLabelPosition = 'right' | 'left';
+declare class RadioComponent implements ControlValueAccessor {
+    id: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    value: _angular_core.InputSignal<unknown>;
+    variant: _angular_core.InputSignal<RadioVariant>;
+    label: _angular_core.InputSignal<string | undefined>;
+    description: _angular_core.InputSignal<string | undefined>;
+    labelPosition: _angular_core.InputSignal<RadioLabelPosition>;
+    disabled: _angular_core.ModelSignal<boolean>;
+    selectionChange: _angular_core.OutputEmitterRef<unknown>;
+    checked: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    onRadioChange(event: Event): void;
+    onBlur(): void;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RadioComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "pecb-radio", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+type CheckboxLabelPosition = 'right' | 'left';
+declare class CheckboxComponent implements ControlValueAccessor {
+    id: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    label: _angular_core.InputSignal<string | undefined>;
+    description: _angular_core.InputSignal<string | undefined>;
+    labelPosition: _angular_core.InputSignal<CheckboxLabelPosition>;
+    disabled: _angular_core.ModelSignal<boolean>;
+    checkedChange: _angular_core.OutputEmitterRef<boolean>;
+    checked: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    onCheckboxChange(event: Event): void;
+    onBlur(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "pecb-checkbox", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
+}
+
+type ToggleLabelPosition = 'right' | 'left';
+declare class ToggleComponent implements ControlValueAccessor {
+    id: _angular_core.InputSignal<string>;
+    name: _angular_core.InputSignal<string | undefined>;
+    label: _angular_core.InputSignal<string | undefined>;
+    description: _angular_core.InputSignal<string | undefined>;
+    labelPosition: _angular_core.InputSignal<ToggleLabelPosition>;
+    disabled: _angular_core.ModelSignal<boolean>;
+    toggleChange: _angular_core.OutputEmitterRef<boolean>;
+    checked: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    onToggleChange(event: Event): void;
+    onBlur(): void;
+    writeValue(value: boolean): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToggleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToggleComponent, "pecb-toggle", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "labelPosition": { "alias": "labelPosition"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "toggleChange": "toggleChange"; }, never, never, true, never>;
+}
+
+interface DropdownOption {
+    label: string;
+    value: unknown;
+    disabled?: boolean;
+}
+type DropdownSize = 'sm' | 'md' | 'lg';
+declare class DropdownComponent implements ControlValueAccessor {
+    searchInput?: ElementRef<HTMLInputElement>;
+    private readonly elementRef;
+    id: _angular_core.InputSignal<string>;
+    label: _angular_core.InputSignal<string | undefined>;
+    size: _angular_core.InputSignal<DropdownSize>;
+    options: _angular_core.InputSignal<DropdownOption[]>;
+    multiple: _angular_core.InputSignal<boolean>;
+    searchable: _angular_core.InputSignal<boolean>;
+    maxHeight: _angular_core.InputSignal<number>;
+    disabled: _angular_core.ModelSignal<boolean>;
+    required: _angular_core.InputSignal<boolean>;
+    error: _angular_core.InputSignal<boolean>;
+    errorMessage: _angular_core.InputSignal<string | undefined>;
+    helperText: _angular_core.InputSignal<string | undefined>;
+    selectionChange: _angular_core.OutputEmitterRef<unknown>;
+    isOpen: _angular_core.WritableSignal<boolean>;
+    searchQuery: _angular_core.WritableSignal<string>;
+    selectedValues: _angular_core.WritableSignal<unknown[]>;
+    focusedIndex: _angular_core.WritableSignal<number>;
+    private onChange;
+    private onTouched;
+    get wrapperClasses(): string[];
+    get hasValue(): boolean;
+    get filteredOptions(): DropdownOption[];
+    get displayText(): string;
+    clearAll(event: MouseEvent): void;
+    toggleDropdown(): void;
+    selectOption(option: DropdownOption): void;
+    isSelected(option: DropdownOption): boolean;
+    onSearchInput(event: Event): void;
+    onKeyDown(event: KeyboardEvent): void;
+    onDocumentClick(event: MouseEvent): void;
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: unknown) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownComponent, "pecb-dropdown", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "selectionChange": "selectionChange"; }, never, never, true, never>;
+}
+
+type RightModalSize = 'sm' | 'md' | 'lg';
+declare class RightModalComponent implements OnInit, OnDestroy, AfterViewInit {
+    id: _angular_core.InputSignal<string>;
+    isOpen: _angular_core.InputSignal<boolean>;
+    size: _angular_core.InputSignal<RightModalSize>;
+    closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    closeOnEscape: _angular_core.InputSignal<boolean>;
+    showCloseButton: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    ariaLabelledBy: _angular_core.InputSignal<string | undefined>;
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    closed: _angular_core.OutputEmitterRef<void>;
+    opened: _angular_core.OutputEmitterRef<void>;
+    modalPanel: ElementRef<HTMLElement>;
+    private cleanupFocusTrap;
+    private cleanupBodyScroll;
+    private previousActiveElement;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get modalClasses(): string[];
+    get panelClasses(): string[];
+    onBackdropClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    close(): void;
+    private onOpen;
+    private setupFocusTrap;
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RightModalComponent, "pecb-right-modal", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "opened": "opened"; }, never, ["[pecbRightModalHeader]", "[pecbRightModalContent]", "*", "[pecbRightModalFooter]"], true, never>;
+}
+declare class RightModalHeaderDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalHeaderDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RightModalHeaderDirective, "[pecbRightModalHeader]", never, {}, {}, never, never, true, never>;
+}
+declare class RightModalContentDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalContentDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RightModalContentDirective, "[pecbRightModalContent]", never, {}, {}, never, never, true, never>;
+}
+declare class RightModalFooterDirective {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RightModalFooterDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RightModalFooterDirective, "[pecbRightModalFooter]", never, {}, {}, never, never, true, never>;
+}
+
+interface SidebarMenuItem {
+    id: string;
+    label: string;
+    icon?: string;
+    route?: string;
+    active?: boolean;
+    children?: SidebarMenuItem[];
+    expanded?: boolean;
+}
+interface SidebarSection {
+    id: string;
+    title?: string;
+    items: SidebarMenuItem[];
+}
+declare class SidebarComponent {
+    private readonly sanitizer;
+    sections: _angular_core.InputSignal<SidebarSection[]>;
+    showHeader: _angular_core.InputSignal<boolean>;
+    logoSrc: _angular_core.InputSignal<string | undefined>;
+    sidebarLogo: _angular_core.InputSignal<string | undefined>;
+    collapsedLogo: _angular_core.InputSignal<string | undefined>;
+    showFooter: _angular_core.InputSignal<boolean>;
+    collapsed: _angular_core.ModelSignal<boolean>;
+    itemClick: _angular_core.OutputEmitterRef<SidebarMenuItem>;
+    collapseChange: _angular_core.OutputEmitterRef<boolean>;
+    activePopupItem: _angular_core.WritableSignal<SidebarMenuItem | null>;
+    popupTopPosition: _angular_core.WritableSignal<number>;
+    onItemClick(item: SidebarMenuItem, event: Event): void;
+    closePopup(): void;
+    onPopupItemClick(child: SidebarMenuItem, event: Event): void;
+    toggleCollapse(): void;
+    getSafeIcon(icon: string): SafeHtml;
+    trackBySection(_index: number, section: SidebarSection): string;
+    trackByItem(_index: number, item: SidebarMenuItem): string;
+    hasActiveDescendant(item: SidebarMenuItem): boolean;
+    getItemClasses(item: SidebarMenuItem, isChild?: boolean, isNested?: boolean): string[];
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarComponent, "pecb-sidebar", never, { "sections": { "alias": "sections"; "required": false; "isSignal": true; }; "showHeader": { "alias": "showHeader"; "required": false; "isSignal": true; }; "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "sidebarLogo": { "alias": "sidebarLogo"; "required": false; "isSignal": true; }; "collapsedLogo": { "alias": "collapsedLogo"; "required": false; "isSignal": true; }; "showFooter": { "alias": "showFooter"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "itemClick": "itemClick"; "collapseChange": "collapseChange"; }, never, ["[sidebar-header]", "[sidebar-footer]"], true, never>;
+}
+
+type ConfirmationIconType = 'success' | 'warning' | 'error' | 'info';
+declare class ConfirmationComponent implements OnInit, OnDestroy, AfterViewInit {
+    id: _angular_core.InputSignal<string>;
+    isOpen: _angular_core.InputSignal<boolean>;
+    title: _angular_core.InputSignal<string>;
+    message: _angular_core.InputSignal<string>;
+    confirmText: _angular_core.InputSignal<string>;
+    cancelText: _angular_core.InputSignal<string>;
+    iconType: _angular_core.InputSignal<ConfirmationIconType>;
+    showCloseButton: _angular_core.InputSignal<boolean>;
+    closeOnBackdropClick: _angular_core.InputSignal<boolean>;
+    closeOnEscape: _angular_core.InputSignal<boolean>;
+    ariaLabel: _angular_core.InputSignal<string | undefined>;
+    ariaDescribedBy: _angular_core.InputSignal<string | undefined>;
+    confirmed: _angular_core.OutputEmitterRef<void>;
+    cancelled: _angular_core.OutputEmitterRef<void>;
+    closed: _angular_core.OutputEmitterRef<void>;
+    dialogPanel: ElementRef<HTMLElement>;
+    private cleanupFocusTrap;
+    private cleanupBodyScroll;
+    private previousActiveElement;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    get dialogClasses(): string[];
+    get iconContainerClass(): string;
+    get titleId(): string;
+    get messageId(): string;
+    onBackdropClick(event: MouseEvent): void;
+    onKeydown(event: KeyboardEvent): void;
+    onConfirm(): void;
+    onCancel(): void;
+    close(): void;
+    private onOpen;
+    private setupFocusTrap;
+    private cleanup;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ConfirmationComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ConfirmationComponent, "pecb-confirmation", never, { "id": { "alias": "id"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "confirmText": { "alias": "confirmText"; "required": false; "isSignal": true; }; "cancelText": { "alias": "cancelText"; "required": false; "isSignal": true; }; "iconType": { "alias": "iconType"; "required": false; "isSignal": true; }; "showCloseButton": { "alias": "showCloseButton"; "required": false; "isSignal": true; }; "closeOnBackdropClick": { "alias": "closeOnBackdropClick"; "required": false; "isSignal": true; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; "isSignal": true; }; }, { "confirmed": "confirmed"; "cancelled": "cancelled"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * PECB UI Components Module
+ *
+ * A professional Angular components library with TypeScript and SCSS.
+ * Import this module to use all PECB UI components in your application.
+ *
+ * @example
+ * ```typescript
+ * import { PecbComponentsModule } from '@pecb-ui/components';
+ *
+ * @NgModule({
+ *   imports: [PecbComponentsModule]
+ * })
+ * export class AppModule { }
+ * ```
+ */
+declare class PecbComponentsModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PecbComponentsModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<PecbComponentsModule, never, [typeof i1.CommonModule, typeof ButtonComponent, typeof CardComponent, typeof CardHeaderComponent, typeof CardBodyComponent, typeof CardFooterComponent, typeof StatusComponent, typeof PaginationComponent, typeof TableComponent, typeof TabComponent, typeof DatepickerComponent, typeof InputComponent, typeof RadioComponent, typeof CheckboxComponent, typeof ToggleComponent, typeof DropdownComponent, typeof RightModalComponent, typeof RightModalHeaderDirective, typeof RightModalContentDirective, typeof RightModalFooterDirective, typeof SidebarComponent, typeof ConfirmationComponent], [typeof ButtonComponent, typeof CardComponent, typeof CardHeaderComponent, typeof CardBodyComponent, typeof CardFooterComponent, typeof StatusComponent, typeof PaginationComponent, typeof TableComponent, typeof TabComponent, typeof DatepickerComponent, typeof InputComponent, typeof RadioComponent, typeof CheckboxComponent, typeof ToggleComponent, typeof DropdownComponent, typeof RightModalComponent, typeof RightModalHeaderDirective, typeof RightModalContentDirective, typeof RightModalFooterDirective, typeof SidebarComponent, typeof ConfirmationComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<PecbComponentsModule>;
+}
+
+type AlertType = 'info' | 'success' | 'warning' | 'error';
+type AlertVariant = 'banner' | 'filled';
+declare class AlertComponent {
+    type: _angular_core.InputSignal<AlertType>;
+    variant: _angular_core.InputSignal<AlertVariant>;
+    title: _angular_core.InputSignal<string>;
+    message: _angular_core.InputSignal<string>;
+    dismissible: _angular_core.InputSignal<boolean>;
+    primaryAction: _angular_core.InputSignal<string | undefined>;
+    secondaryAction: _angular_core.InputSignal<string | undefined>;
+    dismissed: _angular_core.OutputEmitterRef<void>;
+    primaryActionClick: _angular_core.OutputEmitterRef<void>;
+    secondaryActionClick: _angular_core.OutputEmitterRef<void>;
+    get hasActions(): boolean;
+    get hostClasses(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "pecb-alert", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "primaryAction": { "alias": "primaryAction"; "required": false; "isSignal": true; }; "secondaryAction": { "alias": "secondaryAction"; "required": false; "isSignal": true; }; }, { "dismissed": "dismissed"; "primaryActionClick": "primaryActionClick"; "secondaryActionClick": "secondaryActionClick"; }, never, never, true, never>;
+}
+
+/**
+ * Notification types supported by the service
+ */
+type NotificationType = 'success' | 'error' | 'warning' | 'info';
+/**
+ * Notification position on screen
+ */
+type NotificationPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+/**
+ * Notification configuration options
+ */
+interface NotificationConfig {
+    /** Notification message */
+    message: string;
+    /** Notification title (optional) */
+    title?: string;
+    /** Type of notification */
+    type: NotificationType;
+    /** Duration in milliseconds (0 for persistent) */
+    duration?: number;
+    /** Whether the notification can be dismissed */
+    dismissible?: boolean;
+    /** Position on screen */
+    position?: NotificationPosition;
+    /** Custom CSS class */
+    customClass?: string;
+    /** Unique identifier */
+    id?: string;
+}
+/**
+ * Notification object with all properties
+ */
+interface Notification extends Required<Omit<NotificationConfig, 'title' | 'customClass'>> {
+    title?: string;
+    customClass?: string;
+    timestamp: Date;
+}
+/**
+ * A stateless, injectable notification service for displaying toast notifications.
+ *
+ * This service provides a reactive way to manage notifications across the application.
+ * It uses RxJS Subjects to emit notification events that can be consumed by notification
+ * display components.
+ *
+ * @example
+ * ```typescript
+ * import { NotificationService } from '@pecb-ui/components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   constructor(private notificationService: NotificationService) {}
+ *
+ *   showSuccess(): void {
+ *     this.notificationService.success('Operation completed successfully!');
+ *   }
+ *
+ *   showError(): void {
+ *     this.notificationService.error('An error occurred', 'Error Title');
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+declare class NotificationService {
+    private readonly notificationSubject;
+    private readonly dismissSubject;
+    private readonly clearSubject;
+    /** Default duration for notifications in milliseconds */
+    private readonly defaultDuration;
+    /** Default position for notifications */
+    private readonly defaultPosition;
+    /**
+     * Observable stream of notifications
+     */
+    get notifications$(): Observable<Notification>;
+    /**
+     * Observable stream of dismissed notification IDs
+     */
+    get dismiss$(): Observable<string>;
+    /**
+     * Observable stream for clear all events
+     */
+    get clear$(): Observable<void>;
+    /**
+     * Show a success notification
+     * @param message - The notification message
+     * @param title - Optional title
+     * @param config - Optional additional configuration
+     */
+    success(message: string, title?: string, config?: Partial<NotificationConfig>): string;
+    /**
+     * Show an error notification
+     * @param message - The notification message
+     * @param title - Optional title
+     * @param config - Optional additional configuration
+     */
+    error(message: string, title?: string, config?: Partial<NotificationConfig>): string;
+    /**
+     * Show a warning notification
+     * @param message - The notification message
+     * @param title - Optional title
+     * @param config - Optional additional configuration
+     */
+    warning(message: string, title?: string, config?: Partial<NotificationConfig>): string;
+    /**
+     * Show an info notification
+     * @param message - The notification message
+     * @param title - Optional title
+     * @param config - Optional additional configuration
+     */
+    info(message: string, title?: string, config?: Partial<NotificationConfig>): string;
+    /**
+     * Show a notification with custom configuration
+     * @param config - Full notification configuration
+     * @returns The notification ID
+     */
+    show(config: NotificationConfig): string;
+    /**
+     * Dismiss a specific notification by ID
+     * @param id - The notification ID to dismiss
+     */
+    dismiss(id: string): void;
+    /**
+     * Clear all notifications
+     */
+    clearAll(): void;
+    /**
+     * Generate a unique notification ID
+     */
+    private generateId;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NotificationService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<NotificationService>;
+}
+
+/**
+ * Available theme modes
+ */
+type ThemeMode = 'light' | 'dark' | 'system';
+/**
+ * Theme configuration interface
+ */
+interface ThemeConfig {
+    /** Current theme mode */
+    mode: ThemeMode;
+    /** Resolved theme (light or dark, never system) */
+    resolvedTheme: 'light' | 'dark';
+    /** CSS class to apply to the document */
+    cssClass: string;
+}
+/**
+ * Custom theme variables that can be overridden
+ */
+interface ThemeVariables {
+    /** Primary color */
+    primaryColor?: string;
+    /** Secondary color */
+    secondaryColor?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Text color */
+    textColor?: string;
+    /** Border radius */
+    borderRadius?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Custom CSS variables */
+    [key: string]: string | undefined;
+}
+/**
+ * A stateless, injectable theme service for managing application themes.
+ *
+ * This service provides reactive theme management with support for light/dark modes,
+ * system preference detection, and custom CSS variable overrides.
+ *
+ * @example
+ * ```typescript
+ * import { ThemeService } from '@pecb-ui/components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   constructor(private themeService: ThemeService) {}
+ *
+ *   toggleTheme(): void {
+ *     this.themeService.toggleTheme();
+ *   }
+ *
+ *   setDarkMode(): void {
+ *     this.themeService.setTheme('dark');
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+declare class ThemeService {
+    private readonly themeSubject;
+    private readonly isBrowser;
+    private mediaQuery;
+    constructor(platformId: object);
+    /**
+     * Observable stream of theme configuration changes
+     */
+    get theme$(): Observable<ThemeConfig>;
+    /**
+     * Get the current theme configuration
+     */
+    get currentTheme(): ThemeConfig;
+    /**
+     * Get the current theme mode
+     */
+    get currentMode(): ThemeMode;
+    /**
+     * Check if the current resolved theme is dark
+     */
+    get isDarkMode(): boolean;
+    /**
+     * Set the theme mode
+     * @param mode - The theme mode to set (light, dark, or system)
+     */
+    setTheme(mode: ThemeMode): void;
+    /**
+     * Toggle between light and dark themes
+     * If currently using system preference, switches to the opposite of the resolved theme
+     */
+    toggleTheme(): void;
+    /**
+     * Reset to system preference
+     */
+    useSystemTheme(): void;
+    /**
+     * Apply custom CSS variables to the document
+     * @param variables - Object containing CSS variable overrides
+     */
+    setCustomVariables(variables: ThemeVariables): void;
+    /**
+     * Remove custom CSS variables from the document
+     * @param variableNames - Array of variable names to remove
+     */
+    removeCustomVariables(variableNames: string[]): void;
+    /**
+     * Get the initial theme from storage or system preference
+     */
+    private getInitialTheme;
+    /**
+     * Create a theme configuration object
+     */
+    private createThemeConfig;
+    /**
+     * Resolve the actual theme from mode (handles 'system' mode)
+     */
+    private resolveTheme;
+    /**
+     * Get the system color scheme preference
+     */
+    private getSystemPreference;
+    /**
+     * Setup listener for system theme changes
+     */
+    private setupSystemThemeListener;
+    /**
+     * Apply the theme to the document
+     */
+    private applyTheme;
+    /**
+     * Persist theme preference to storage
+     */
+    private persistTheme;
+    /**
+     * Convert camelCase property name to CSS variable name
+     */
+    private toCssVariableName;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeService>;
+}
+
+/**
+ * Loading state for a specific operation
+ */
+interface LoadingState {
+    /** Unique identifier for the loading operation */
+    id: string;
+    /** Whether this operation is currently loading */
+    isLoading: boolean;
+    /** Optional message to display */
+    message?: string;
+    /** Optional progress percentage (0-100) */
+    progress?: number;
+}
+/**
+ * A stateless, injectable loading service for managing loading states.
+ *
+ * This service provides a centralized way to track loading states across
+ * the application, supporting multiple concurrent loading operations with
+ * individual tracking capabilities.
+ *
+ * @example
+ * ```typescript
+ * import { LoadingService } from '@pecb-ui/components';
+ *
+ * @Component({...})
+ * export class MyComponent {
+ *   isLoading$ = this.loadingService.isLoading$('my-operation');
+ *
+ *   constructor(private loadingService: LoadingService) {}
+ *
+ *   async loadData(): Promise<void> {
+ *     this.loadingService.start('my-operation', 'Loading data...');
+ *     try {
+ *       await this.fetchData();
+ *     } finally {
+ *       this.loadingService.stop('my-operation');
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @publicApi
+ */
+declare class LoadingService {
+    private readonly loadingStates;
+    private readonly statesSubject;
+    /** Default loading operation ID */
+    private readonly defaultId;
+    /**
+     * Observable of all loading states
+     */
+    get states$(): Observable<Map<string, LoadingState>>;
+    /**
+     * Observable that emits true when any loading operation is active
+     */
+    get isAnyLoading$(): Observable<boolean>;
+    /**
+     * Get observable for a specific loading operation
+     * @param id - The loading operation identifier
+     */
+    isLoading$(id?: string): Observable<boolean>;
+    /**
+     * Get observable for loading state with message
+     * @param id - The loading operation identifier
+     */
+    getState$(id?: string): Observable<LoadingState | undefined>;
+    /**
+     * Check if a specific operation is currently loading (synchronous)
+     * @param id - The loading operation identifier
+     */
+    isLoading(id?: string): boolean;
+    /**
+     * Check if any operation is currently loading (synchronous)
+     */
+    isAnyLoading(): boolean;
+    /**
+     * Start a loading operation
+     * @param id - The loading operation identifier
+     * @param message - Optional message to display
+     */
+    start(id?: string, message?: string): void;
+    /**
+     * Stop a loading operation
+     * @param id - The loading operation identifier
+     */
+    stop(id?: string): void;
+    /**
+     * Update progress for a loading operation
+     * @param id - The loading operation identifier
+     * @param progress - Progress percentage (0-100)
+     * @param message - Optional updated message
+     */
+    setProgress(id: string, progress: number, message?: string): void;
+    /**
+     * Update the message for a loading operation
+     * @param id - The loading operation identifier
+     * @param message - New message to display
+     */
+    setMessage(id: string, message: string): void;
+    /**
+     * Stop all loading operations
+     */
+    stopAll(): void;
+    /**
+     * Remove a loading state completely
+     * @param id - The loading operation identifier
+     */
+    remove(id: string): void;
+    /**
+     * Execute an async operation with automatic loading state management
+     * @param id - The loading operation identifier
+     * @param operation - The async operation to execute
+     * @param message - Optional loading message
+     * @returns The result of the operation
+     */
+    withLoading<T>(id: string, operation: () => Promise<T>, message?: string): Promise<T>;
+    /**
+     * Update a loading state
+     */
+    private updateState;
+    /**
+     * Emit current states to subscribers
+     */
+    private emitStates;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoadingService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<LoadingService>;
+}
+
+/**
+ * Common type definitions for PECB UI Components
+ * @module types
+ */
+/**
+ * Standard size variants used across components
+ */
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Standard component size mapping
+ */
+type ComponentSize = 'small' | 'medium' | 'large';
+/**
+ * Semantic color variants
+ */
+type ColorVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+/**
+ * Extended color variants including neutral options
+ */
+type ExtendedColorVariant = ColorVariant | 'neutral' | 'muted';
+/**
+ * Component state variants
+ */
+type StateVariant = 'default' | 'hover' | 'active' | 'focus' | 'disabled';
+/**
+ * Position options for overlays and popups
+ */
+type Position = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+/**
+ * Alignment options
+ */
+type Alignment = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * Direction options for layouts
+ */
+type Direction = 'horizontal' | 'vertical';
+/**
+ * Orientation alias for direction
+ */
+type Orientation = 'horizontal' | 'vertical';
+/**
+ * Spacing scale values
+ */
+type SpacingScale = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * Border radius scale values
+ */
+type RadiusScale = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Shadow elevation levels
+ */
+type ElevationLevel = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Animation timing presets
+ */
+type AnimationTiming = 'instant' | 'fast' | 'normal' | 'slow';
+/**
+ * Breakpoint names
+ */
+type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/**
+ * Form validation state
+ */
+type ValidationState = 'valid' | 'invalid' | 'pending' | 'pristine';
+/**
+ * Generic callback function type
+ */
+type Callback<T = void> = () => T;
+/**
+ * Generic event handler type
+ */
+type EventHandler<T = Event> = (event: T) => void;
+/**
+ * Make specific properties required
+ */
+type RequireProps<T, K extends keyof T> = T & Required<Pick<T, K>>;
+/**
+ * Make specific properties optional
+ */
+type OptionalProps<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * Extract non-nullable type
+ */
+type NonNullableProps<T> = {
+    [K in keyof T]: NonNullable<T[K]>;
+};
+
+/**
+ * Common interface for components that can be disabled
+ */
+interface Disableable {
+    /** Whether the component is disabled */
+    disabled: boolean;
+}
+/**
+ * Common interface for components with loading state
+ */
+interface Loadable {
+    /** Whether the component is in a loading state */
+    loading: boolean;
+}
+/**
+ * Common interface for components with size variants
+ */
+interface Sizeable {
+    /** The size of the component */
+    size: ComponentSize;
+}
+/**
+ * Common interface for components with color variants
+ */
+interface Colorable {
+    /** The color variant of the component */
+    variant: ColorVariant;
+}
+/**
+ * Common interface for focusable components
+ */
+interface Focusable {
+    /** Focus the component programmatically */
+    focus(): void;
+    /** Blur the component programmatically */
+    blur(): void;
+}
+/**
+ * Base interface for form control components
+ */
+interface FormControlBase extends Disableable {
+    /** Unique identifier for the control */
+    id: string;
+    /** Name attribute for form submission */
+    name: string;
+    /** Whether the field is required */
+    required: boolean;
+    /** Whether the field is readonly */
+    readonly: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Accessible label */
+    ariaLabel?: string;
+    /** ID of element that labels this control */
+    ariaLabelledBy?: string;
+    /** ID of element that describes this control */
+    ariaDescribedBy?: string;
+}
+/**
+ * Interface for components with validation
+ */
+interface Validatable {
+    /** Current validation state */
+    validationState: ValidationState;
+    /** Error message to display */
+    errorMessage?: string;
+    /** Success message to display */
+    successMessage?: string;
+    /** Helper text to display */
+    helperText?: string;
+}
+/**
+ * Interface for selectable items (dropdown, list, etc.)
+ */
+interface SelectableItem<T = unknown> {
+    /** Unique value for the item */
+    value: T;
+    /** Display label */
+    label: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Optional icon name */
+    icon?: string;
+    /** Optional description */
+    description?: string;
+    /** Optional group name for categorization */
+    group?: string;
+    /** Additional metadata */
+    metadata?: Record<string, unknown>;
+}
+/**
+ * Interface for components that support custom templates
+ */
+interface Templatable {
+    /** Custom template for rendering */
+    template?: TemplateRef<unknown>;
+}
+/**
+ * Interface for overlay components (modal, popover, tooltip)
+ */
+interface OverlayComponent {
+    /** Whether the overlay is currently visible */
+    isOpen: boolean;
+    /** Open the overlay */
+    open(): void;
+    /** Close the overlay */
+    close(): void;
+    /** Toggle the overlay state */
+    toggle(): void;
+}
+/**
+ * Interface for components with before/after close hooks
+ */
+interface ClosableWithHooks {
+    /** Called before the component closes. Return false to prevent closing */
+    beforeClose?: () => boolean | Promise<boolean>;
+    /** Called after the component closes */
+    afterClose?: () => void;
+}
+/**
+ * Interface for table column definition
+ */
+interface TableColumn<T = unknown> {
+    /** Unique column key */
+    key: string;
+    /** Column header label */
+    label: string;
+    /** Property path to access data (supports dot notation) */
+    field?: keyof T | string;
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Whether the column is filterable */
+    filterable?: boolean;
+    /** Column width (CSS value) */
+    width?: string;
+    /** Minimum column width */
+    minWidth?: string;
+    /** Maximum column width */
+    maxWidth?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Whether the column is visible */
+    visible?: boolean;
+    /** Whether the column is sticky */
+    sticky?: 'start' | 'end';
+    /** Custom cell template */
+    cellTemplate?: TemplateRef<unknown>;
+    /** Custom header template */
+    headerTemplate?: TemplateRef<unknown>;
+    /** Value formatter function */
+    formatter?: (value: unknown, row: T) => string;
+}
+/**
+ * Interface for pagination state
+ */
+interface PaginationState {
+    /** Current page (1-indexed) */
+    currentPage: number;
+    /** Number of items per page */
+    pageSize: number;
+    /** Total number of items */
+    totalItems: number;
+    /** Total number of pages (calculated) */
+    totalPages: number;
+}
+/**
+ * Interface for sort state
+ */
+interface SortState {
+    /** Column key to sort by */
+    column: string;
+    /** Sort direction */
+    direction: 'asc' | 'desc' | null;
+}
+/**
+ * Interface for filter state
+ */
+interface FilterState {
+    /** Column key to filter */
+    column: string;
+    /** Filter operator */
+    operator: 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'gt' | 'lt' | 'gte' | 'lte' | 'between' | 'in';
+    /** Filter value(s) */
+    value: unknown;
+}
+/**
+ * Interface for tree node structure
+ */
+interface TreeNode<T = unknown> {
+    /** Unique node identifier */
+    id: string | number;
+    /** Node data */
+    data: T;
+    /** Child nodes */
+    children?: TreeNode<T>[];
+    /** Whether the node is expanded */
+    expanded?: boolean;
+    /** Whether the node is selected */
+    selected?: boolean;
+    /** Whether the node is disabled */
+    disabled?: boolean;
+    /** Whether the node is a leaf (no children) */
+    leaf?: boolean;
+    /** Parent node ID */
+    parentId?: string | number;
+    /** Node level in the tree (0-indexed) */
+    level?: number;
+}
+/**
+ * Interface for breadcrumb item
+ */
+interface BreadcrumbItem {
+    /** Display label */
+    label: string;
+    /** Navigation URL or route */
+    url?: string;
+    /** Route path array for routerLink */
+    routerLink?: string | string[];
+    /** Query parameters */
+    queryParams?: Record<string, string>;
+    /** Icon name */
+    icon?: string;
+    /** Whether this is the active/current item */
+    active?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
+/**
+ * Interface for tab item
+ */
+interface TabItem {
+    /** Unique tab identifier */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Tab icon */
+    icon?: string;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Whether the tab is closable */
+    closable?: boolean;
+    /** Badge content */
+    badge?: string | number;
+    /** Content template */
+    content?: TemplateRef<unknown>;
+}
+/**
+ * Interface for menu item
+ */
+interface MenuItem {
+    /** Unique item identifier */
+    id?: string;
+    /** Display label */
+    label: string;
+    /** Icon name */
+    icon?: string;
+    /** Command to execute on click */
+    command?: () => void;
+    /** URL for navigation */
+    url?: string;
+    /** Router link */
+    routerLink?: string | string[];
+    /** Query parameters */
+    queryParams?: Record<string, string>;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether the item is visible */
+    visible?: boolean;
+    /** Child items for submenu */
+    items?: MenuItem[];
+    /** Whether this is a separator */
+    separator?: boolean;
+    /** Additional CSS class */
+    styleClass?: string;
+    /** Tooltip text */
+    tooltip?: string;
+    /** Badge content */
+    badge?: string | number;
+    /** Badge color variant */
+    badgeVariant?: ColorVariant;
+}
+
+/**
+ * String utility functions for PECB UI Components
+ * @module utils/string
+ */
+/**
+ * Convert a string to kebab-case
+ * @param str - The string to convert
+ * @returns The kebab-case string
+ *
+ * @example
+ * toKebabCase('myComponentName') // 'my-component-name'
+ * toKebabCase('MyComponentName') // 'my-component-name'
+ */
+declare function toKebabCase(str: string): string;
+/**
+ * Convert a string to camelCase
+ * @param str - The string to convert
+ * @returns The camelCase string
+ *
+ * @example
+ * toCamelCase('my-component-name') // 'myComponentName'
+ * toCamelCase('my_component_name') // 'myComponentName'
+ */
+declare function toCamelCase(str: string): string;
+/**
+ * Convert a string to PascalCase
+ * @param str - The string to convert
+ * @returns The PascalCase string
+ *
+ * @example
+ * toPascalCase('my-component-name') // 'MyComponentName'
+ */
+declare function toPascalCase(str: string): string;
+/**
+ * Convert a string to snake_case
+ * @param str - The string to convert
+ * @returns The snake_case string
+ *
+ * @example
+ * toSnakeCase('myComponentName') // 'my_component_name'
+ */
+declare function toSnakeCase(str: string): string;
+/**
+ * Capitalize the first letter of a string
+ * @param str - The string to capitalize
+ * @returns The capitalized string
+ *
+ * @example
+ * capitalize('hello world') // 'Hello world'
+ */
+declare function capitalize(str: string): string;
+/**
+ * Truncate a string to a specified length
+ * @param str - The string to truncate
+ * @param maxLength - Maximum length
+ * @param suffix - Suffix to append when truncated (default: '...')
+ * @returns The truncated string
+ *
+ * @example
+ * truncate('Hello World', 8) // 'Hello...'
+ * truncate('Hello World', 8, '…') // 'Hello W…'
+ */
+declare function truncate(str: string, maxLength: number, suffix?: string): string;
+/**
+ * Check if a string is empty or contains only whitespace
+ * @param str - The string to check
+ * @returns True if the string is empty or whitespace
+ *
+ * @example
+ * isBlank('') // true
+ * isBlank('  ') // true
+ * isBlank('hello') // false
+ */
+declare function isBlank(str: string | null | undefined): boolean;
+/**
+ * Check if a string is not empty and contains non-whitespace characters
+ * @param str - The string to check
+ * @returns True if the string is not empty
+ */
+declare function isNotBlank(str: string | null | undefined): str is string;
+/**
+ * Generate a slug from a string (URL-friendly)
+ * @param str - The string to convert
+ * @returns URL-friendly slug
+ *
+ * @example
+ * slugify('Hello World!') // 'hello-world'
+ * slugify('Café Latte') // 'cafe-latte'
+ */
+declare function slugify(str: string): string;
+/**
+ * Escape HTML special characters
+ * @param str - The string to escape
+ * @returns The escaped string
+ *
+ * @example
+ * escapeHtml('<script>alert("XSS")</script>') // '&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;'
+ */
+declare function escapeHtml(str: string): string;
+/**
+ * Strip HTML tags from a string
+ * @param str - The string containing HTML
+ * @returns The string without HTML tags
+ *
+ * @example
+ * stripHtml('<p>Hello <strong>World</strong></p>') // 'Hello World'
+ */
+declare function stripHtml(str: string): string;
+/**
+ * Generate initials from a name
+ * @param name - The name to extract initials from
+ * @param maxLength - Maximum number of initials (default: 2)
+ * @returns The initials in uppercase
+ *
+ * @example
+ * getInitials('John Doe') // 'JD'
+ * getInitials('John Michael Doe', 3) // 'JMD'
+ */
+declare function getInitials(name: string, maxLength?: number): string;
+/**
+ * Pluralize a word based on count
+ * @param count - The count to check
+ * @param singular - Singular form
+ * @param plural - Plural form (optional, defaults to singular + 's')
+ * @returns The appropriate form of the word
+ *
+ * @example
+ * pluralize(1, 'item') // 'item'
+ * pluralize(5, 'item') // 'items'
+ * pluralize(2, 'child', 'children') // 'children'
+ */
+declare function pluralize(count: number, singular: string, plural?: string): string;
+/**
+ * Format a number as a string with count and pluralized label
+ * @param count - The count
+ * @param singular - Singular form of the label
+ * @param plural - Plural form (optional)
+ * @returns Formatted string like "5 items"
+ *
+ * @example
+ * formatCount(1, 'item') // '1 item'
+ * formatCount(5, 'item') // '5 items'
+ */
+declare function formatCount(count: number, singular: string, plural?: string): string;
+
+/**
+ * DOM utility functions for PECB UI Components
+ * @module utils/dom
+ */
+/**
+ * Check if code is running in a browser environment
+ * @returns True if running in browser
+ */
+declare function isBrowser(): boolean;
+/**
+ * Generate a unique ID for DOM elements
+ * @param prefix - Optional prefix for the ID
+ * @returns A unique ID string
+ *
+ * @example
+ * generateUniqueId('btn') // 'btn-a1b2c3d4'
+ */
+declare function generateUniqueId(prefix?: string): string;
+/**
+ * Check if an element matches a CSS selector
+ * @param element - The element to check
+ * @param selector - The CSS selector
+ * @returns True if the element matches
+ */
+declare function matchesSelector(element: Element, selector: string): boolean;
+/**
+ * Find the closest ancestor matching a selector
+ * @param element - Starting element
+ * @param selector - CSS selector to match
+ * @returns The matching ancestor or null
+ */
+declare function closestElement<T extends Element>(element: Element, selector: string): T | null;
+/**
+ * Check if an element is visible in the viewport
+ * @param element - The element to check
+ * @param partial - Whether partial visibility counts
+ * @returns True if visible
+ */
+declare function isElementVisible(element: Element, partial?: boolean): boolean;
+/**
+ * Get all focusable elements within a container
+ * @param container - The container element
+ * @returns Array of focusable elements
+ */
+declare function getFocusableElements(container: Element): HTMLElement[];
+/**
+ * Trap focus within a container (useful for modals)
+ * @param container - The container to trap focus in
+ * @returns Cleanup function to remove the trap
+ */
+declare function trapFocus(container: HTMLElement): () => void;
+/**
+ * Scroll an element into view smoothly
+ * @param element - The element to scroll to
+ * @param options - Scroll options
+ */
+declare function scrollIntoView(element: Element, options?: ScrollIntoViewOptions): void;
+/**
+ * Get the scroll parent of an element
+ * @param element - The element to find scroll parent for
+ * @returns The scroll parent element
+ */
+declare function getScrollParent(element: Element): Element | null;
+/**
+ * Disable body scroll (useful for modals)
+ * @returns Cleanup function to re-enable scroll
+ */
+declare function disableBodyScroll(): () => void;
+/**
+ * Copy text to clipboard
+ * @param text - The text to copy
+ * @returns Promise that resolves when copied
+ */
+declare function copyToClipboard(text: string): Promise<void>;
+/**
+ * Check if an element has a specific CSS class
+ * @param element - The element to check
+ * @param className - The class name
+ * @returns True if the element has the class
+ */
+declare function hasClass(element: Element, className: string): boolean;
+/**
+ * Add CSS class(es) to an element
+ * @param element - The element to modify
+ * @param classNames - Class name(s) to add
+ */
+declare function addClass(element: Element, ...classNames: string[]): void;
+/**
+ * Remove CSS class(es) from an element
+ * @param element - The element to modify
+ * @param classNames - Class name(s) to remove
+ */
+declare function removeClass(element: Element, ...classNames: string[]): void;
+/**
+ * Toggle a CSS class on an element
+ * @param element - The element to modify
+ * @param className - The class name to toggle
+ * @param force - Optional force add (true) or remove (false)
+ * @returns True if the class is now present
+ */
+declare function toggleClass(element: Element, className: string, force?: boolean): boolean;
+/**
+ * Get computed CSS property value
+ * @param element - The element to check
+ * @param property - CSS property name
+ * @returns The computed value
+ */
+declare function getComputedStyleValue(element: Element, property: string): string;
+
+/**
+ * Accessibility utility functions for PECB UI Components
+ * Helps ensure WCAG 2.1 compliance
+ * @module utils/accessibility
+ */
+/**
+ * ARIA live region politeness levels
+ */
+type AriaLive = 'off' | 'polite' | 'assertive';
+/**
+ * ARIA roles commonly used in components
+ */
+type AriaRole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'combobox' | 'dialog' | 'grid' | 'gridcell' | 'link' | 'listbox' | 'menu' | 'menubar' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'radiogroup' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tablist' | 'tabpanel' | 'textbox' | 'tooltip' | 'tree' | 'treegrid' | 'treeitem';
+/**
+ * Standard ARIA attributes interface for components
+ */
+interface AriaAttributes {
+    role?: AriaRole;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-expanded'?: boolean;
+    'aria-selected'?: boolean;
+    'aria-checked'?: boolean | 'mixed';
+    'aria-disabled'?: boolean;
+    'aria-hidden'?: boolean;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-readonly'?: boolean;
+    'aria-pressed'?: boolean | 'mixed';
+    'aria-current'?: boolean | 'page' | 'step' | 'location' | 'date' | 'time';
+    'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    'aria-controls'?: string;
+    'aria-owns'?: string;
+    'aria-live'?: AriaLive;
+    'aria-atomic'?: boolean;
+    'aria-busy'?: boolean;
+    'aria-valuemin'?: number;
+    'aria-valuemax'?: number;
+    'aria-valuenow'?: number;
+    'aria-valuetext'?: string;
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-activedescendant'?: string;
+    'aria-autocomplete'?: 'none' | 'inline' | 'list' | 'both';
+    'aria-multiselectable'?: boolean;
+    'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other';
+    'aria-level'?: number;
+    'aria-setsize'?: number;
+    'aria-posinset'?: number;
+    tabindex?: number;
+}
+/**
+ * Generate ARIA attributes for a button component
+ * @param options - Button accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getButtonAriaAttributes(options: {
+    label?: string;
+    pressed?: boolean;
+    expanded?: boolean;
+    disabled?: boolean;
+    controls?: string;
+    haspopup?: AriaAttributes['aria-haspopup'];
+    describedby?: string;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for a dialog/modal component
+ * @param options - Dialog accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getDialogAriaAttributes(options: {
+    labelledby?: string;
+    describedby?: string;
+    modal?: boolean;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for a form input
+ * @param options - Input accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getInputAriaAttributes(options: {
+    label?: string;
+    labelledby?: string;
+    describedby?: string;
+    invalid?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    errorId?: string;
+    helperId?: string;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for a progress bar
+ * @param options - Progress accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getProgressAriaAttributes(options: {
+    value: number;
+    min?: number;
+    max?: number;
+    label?: string;
+    valueText?: string;
+}): AriaAttributes;
+/**
+ * Generate ARIA attributes for a tab component
+ * @param options - Tab accessibility options
+ * @returns ARIA attributes for tab and tabpanel
+ */
+declare function getTabAriaAttributes(options: {
+    tabId: string;
+    panelId: string;
+    selected: boolean;
+    disabled?: boolean;
+}): {
+    tab: AriaAttributes;
+    panel: AriaAttributes;
+};
+/**
+ * Generate ARIA attributes for a listbox option
+ * @param options - Option accessibility options
+ * @returns ARIA attributes object
+ */
+declare function getOptionAriaAttributes(options: {
+    selected: boolean;
+    disabled?: boolean;
+    setsize?: number;
+    posinset?: number;
+}): AriaAttributes;
+/**
+ * Generate linked IDs for label and input association
+ * @param baseName - Base name for generating IDs
+ * @returns Object with inputId, labelId, errorId, and helperId
+ */
+declare function generateLinkedIds(baseName?: string): {
+    inputId: string;
+    labelId: string;
+    errorId: string;
+    helperId: string;
+};
+/**
+ * Create a visually hidden element for screen readers
+ * @returns CSS styles for visually hidden content
+ */
+declare function getVisuallyHiddenStyles(): Record<string, string>;
+/**
+ * Check if the user has enabled reduced motion preference
+ * @returns True if user prefers reduced motion
+ */
+declare function prefersReducedMotion(): boolean;
+/**
+ * Check if the user has enabled high contrast mode
+ * @returns True if high contrast mode is enabled
+ */
+declare function prefersHighContrast(): boolean;
+/**
+ * Announce a message to screen readers using aria-live regions
+ * @param message - The message to announce
+ * @param politeness - The urgency level (polite or assertive)
+ */
+declare function announceToScreenReader(message: string, politeness?: 'polite' | 'assertive'): void;
+/**
+ * Get the appropriate aria-current value for navigation items
+ * @param isActive - Whether the item is active/current
+ * @param type - The type of current indicator
+ * @returns The aria-current value or undefined
+ */
+declare function getAriaCurrent(isActive: boolean, type?: 'page' | 'step' | 'location' | 'date' | 'time'): AriaAttributes['aria-current'];
+
+/**
+ * Error handling utility functions for PECB UI Components
+ * Provides standardized error handling patterns
+ * @module utils/error
+ */
+/**
+ * Error severity levels
+ */
+type ErrorSeverity = 'info' | 'warning' | 'error' | 'critical';
+/**
+ * Error categories for classification
+ */
+type ErrorCategory = 'validation' | 'network' | 'authentication' | 'authorization' | 'configuration' | 'runtime' | 'unknown';
+/**
+ * Standard error interface for PECB components
+ */
+interface PecbError {
+    /** Unique error code */
+    code: string;
+    /** Human-readable error message */
+    message: string;
+    /** Error severity level */
+    severity: ErrorSeverity;
+    /** Error category */
+    category: ErrorCategory;
+    /** Original error if wrapping another error */
+    originalError?: Error;
+    /** Additional context data */
+    context?: Record<string, unknown>;
+    /** Timestamp when error occurred */
+    timestamp: Date;
+    /** Suggested recovery action */
+    recoveryAction?: string;
+    /** Whether the error is recoverable */
+    recoverable: boolean;
+}
+/**
+ * Validation error details
+ */
+interface ValidationError {
+    /** Field name that failed validation */
+    field: string;
+    /** Validation rule that failed */
+    rule: string;
+    /** Error message */
+    message: string;
+    /** Expected value or format */
+    expected?: string;
+    /** Actual value received */
+    actual?: unknown;
+}
+/**
+ * Error factory options
+ */
+interface ErrorOptions {
+    code?: string;
+    severity?: ErrorSeverity;
+    category?: ErrorCategory;
+    context?: Record<string, unknown>;
+    recoveryAction?: string;
+    recoverable?: boolean;
+    originalError?: Error;
+}
+/**
+ * Create a standardized PECB error
+ * @param message - Error message
+ * @param options - Additional error options
+ * @returns A standardized PecbError object
+ *
+ * @example
+ * const error = createError('Invalid input', {
+ *   code: 'VALIDATION_001',
+ *   category: 'validation',
+ *   severity: 'warning',
+ *   recoverable: true
+ * });
+ */
+declare function createError(message: string, options?: ErrorOptions): PecbError;
+/**
+ * Create a validation error
+ * @param field - Field name that failed validation
+ * @param rule - Validation rule that failed
+ * @param message - Error message
+ * @returns A ValidationError object
+ *
+ * @example
+ * const error = createValidationError('email', 'format', 'Invalid email format');
+ */
+declare function createValidationError(field: string, rule: string, message: string, details?: {
+    expected?: string;
+    actual?: unknown;
+}): ValidationError;
+/**
+ * Wrap an unknown error in a PecbError
+ * @param error - The error to wrap
+ * @param options - Additional options
+ * @returns A standardized PecbError
+ *
+ * @example
+ * try {
+ *   await riskyOperation();
+ * } catch (e) {
+ *   const error = wrapError(e, { category: 'network' });
+ *   handleError(error);
+ * }
+ */
+declare function wrapError(error: unknown, options?: ErrorOptions): PecbError;
+/**
+ * Type guard to check if an object is a PecbError
+ * @param error - The object to check
+ * @returns True if the object is a PecbError
+ */
+declare function isPecbError(error: unknown): error is PecbError;
+/**
+ * Type guard to check if an error is recoverable
+ * @param error - The error to check
+ * @returns True if the error is recoverable
+ */
+declare function isRecoverableError(error: PecbError): boolean;
+/**
+ * Format an error for display to users
+ * @param error - The error to format
+ * @param includeCode - Whether to include the error code
+ * @returns Formatted error message
+ */
+declare function formatErrorMessage(error: PecbError, includeCode?: boolean): string;
+/**
+ * Format an error for logging
+ * @param error - The error to format
+ * @returns Formatted error string for logging
+ */
+declare function formatErrorForLog(error: PecbError): string;
+/**
+ * Create a network error
+ * @param message - Error message
+ * @param statusCode - HTTP status code if applicable
+ * @param originalError - Original error
+ * @returns A network category PecbError
+ */
+declare function createNetworkError(message: string, statusCode?: number, originalError?: Error): PecbError;
+/**
+ * Create an authentication error
+ * @param message - Error message
+ * @param originalError - Original error
+ * @returns An authentication category PecbError
+ */
+declare function createAuthError(message: string, originalError?: Error): PecbError;
+/**
+ * Create an authorization error
+ * @param message - Error message
+ * @param resource - The resource that access was denied to
+ * @returns An authorization category PecbError
+ */
+declare function createAuthorizationError(message: string, resource?: string): PecbError;
+/**
+ * Create a configuration error
+ * @param message - Error message
+ * @param configKey - The configuration key that is invalid
+ * @returns A configuration category PecbError
+ */
+declare function createConfigError(message: string, configKey?: string): PecbError;
+/**
+ * Error handler type
+ */
+type ErrorHandler = (error: PecbError) => void;
+/**
+ * Register an error handler for a category
+ * @param category - The error category to handle
+ * @param handler - The handler function
+ * @returns Cleanup function to unregister
+ */
+declare function registerErrorHandler(category: ErrorCategory, handler: ErrorHandler): () => void;
+/**
+ * Handle an error by invoking registered handlers
+ * @param error - The error to handle
+ */
+declare function handleError(error: PecbError): void;
+/**
+ * Try to execute an operation and return a result or error
+ * @param operation - The operation to execute
+ * @param errorOptions - Options for error wrapping
+ * @returns A tuple of [result, null] or [null, error]
+ */
+declare function tryAsync<T>(operation: () => Promise<T>, errorOptions?: ErrorOptions): Promise<[T, null] | [null, PecbError]>;
+/**
+ * Synchronous version of tryAsync
+ * @param operation - The operation to execute
+ * @param errorOptions - Options for error wrapping
+ * @returns A tuple of [result, null] or [null, error]
+ */
+declare function trySync<T>(operation: () => T, errorOptions?: ErrorOptions): [T, null] | [null, PecbError];
+
+export { AlertComponent, ButtonComponent, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CheckboxComponent, ConfirmationComponent, DatepickerComponent, DropdownComponent, InputComponent, LoadingService, NotificationService, PaginationComponent, PecbComponentsModule, RadioComponent, RightModalComponent, RightModalContentDirective, RightModalFooterDirective, RightModalHeaderDirective, SidebarComponent, StatusComponent, TabComponent, TableComponent, ThemeService, ToggleComponent, addClass, announceToScreenReader, capitalize, closestElement, copyToClipboard, createAuthError, createAuthorizationError, createConfigError, createError, createNetworkError, createValidationError, disableBodyScroll, escapeHtml, formatCount, formatErrorForLog, formatErrorMessage, generateLinkedIds, generateUniqueId, getAriaCurrent, getButtonAriaAttributes, getComputedStyleValue, getDialogAriaAttributes, getFocusableElements, getInitials, getInputAriaAttributes, getOptionAriaAttributes, getProgressAriaAttributes, getScrollParent, getTabAriaAttributes, getVisuallyHiddenStyles, handleError, hasClass, isBlank, isBrowser, isElementVisible, isNotBlank, isPecbError, isRecoverableError, matchesSelector, pluralize, prefersHighContrast, prefersReducedMotion, registerErrorHandler, removeClass, scrollIntoView, slugify, stripHtml, toCamelCase, toKebabCase, toPascalCase, toSnakeCase, toggleClass, trapFocus, truncate, tryAsync, trySync, wrapError };
+export type { AlertType, AlertVariant, Alignment, AnimationTiming, AriaAttributes, AriaLive, AriaRole, BreadcrumbItem, Breakpoint, ButtonIconStyle, ButtonSize, ButtonVariant, Callback, CardElevation, CardRadius, CardRole, CheckboxLabelPosition, ClosableWithHooks, ColorVariant, Colorable, ComponentSize, ConfirmationIconType, DatepickerSize, Direction, Disableable, DropdownOption, DropdownSize, ElevationLevel, ErrorCategory, ErrorHandler, ErrorOptions, ErrorSeverity, EventHandler, ExtendedColorVariant, FilterState, Focusable, FormControlBase, InputSize, InputType, Loadable, LoadingState, MenuItem, NonNullableProps, Notification, NotificationConfig, NotificationPosition, NotificationType, OptionalProps, Orientation, OverlayComponent, PageChangeEvent, PaginationSize, PaginationState, PaginationVariant, PecbError, PecbTableColumn, PecbTableColumnComponent, PecbTableColumnType, Position, RadioLabelPosition, RadioVariant, RadiusScale, RequireProps, RightModalSize, SelectableItem, SidebarMenuItem, SidebarSection, Size, Sizeable, SortState, SpacingScale, StateVariant, StatusSize, StatusType, StatusVariant, TabItem, TabSize, TabStyle, TableAction, TableColumn, TableRowActionEvent, TableSelectionEvent, TableSize, TableSortEvent, TableStatusConfig, TableUserConfig, TableVariant, Templatable, ThemeConfig, ThemeMode, ThemeVariables, ToggleLabelPosition, TreeNode, Validatable, ValidationError, ValidationState };