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

/**
 * Context provided to the trigger template.
 */
interface ComCollapsibleTriggerContext {
    /** Current open state (alias for $implicit). */
    $implicit: boolean;
    /** Current open state. */
    open: boolean;
    /** Whether the collapsible is disabled. */
    disabled: boolean;
    /** Function to toggle the collapsible. */
    toggle: () => void;
}
/**
 * Context provided to the content template.
 */
interface ComCollapsibleContentContext {
    /** Current open state (alias for $implicit). */
    $implicit: boolean;
    /** Current open state. */
    open: boolean;
}
/**
 * Context provided to the icon template.
 */
interface ComCollapsibleIconContext {
    /** Current open state (alias for $implicit). */
    $implicit: boolean;
    /** Current open state. */
    open: boolean;
}

/**
 * Shell variant type for the collapsible container.
 */
type CollapsibleVariant = 'card' | 'bordered' | 'flush' | 'ghost' | 'unstyled';
/**
 * CVA variants for the collapsible shell (root directive).
 *
 * @tokens `--color-border`, `--color-background`, `--color-foreground`, `--shadow-xs`, `--radius-collapsible`
 */
declare const collapsibleVariants: (props?: {
    variant?: CollapsibleVariant;
}) => string;
type CollapsibleVariants = VariantProps<typeof collapsibleVariants>;

/**
 * Trigger variant type for the collapsible trigger.
 */
type CollapsibleTriggerVariant = 'ghost' | 'filled' | 'header' | 'unstyled';
/**
 * Trigger size type.
 */
type CollapsibleTriggerSize = 'sm' | 'default' | 'lg';
/**
 * CVA variants for the collapsible trigger directive.
 *
 * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
 *         `--color-ring`, `--color-disabled-foreground`, `--radius-collapsible`
 */
declare const collapsibleTriggerVariants: (props?: {
    variant?: CollapsibleTriggerVariant;
    size?: CollapsibleTriggerSize;
}) => string;
type CollapsibleTriggerVariants = VariantProps<typeof collapsibleTriggerVariants>;

/**
 * Directive to mark a template as the custom trigger layout template.
 * Replaces the inner content of the trigger while preserving ARIA and keyboard handling.
 *
 * @tokens none
 *
 * @example
 * ```html
 * <button comCollapsibleTrigger>
 *   <ng-template comCollapsibleTriggerTpl let-open let-toggle="toggle" let-disabled="disabled">
 *     <div class="flex items-center gap-3 w-full">
 *       <span class="h-2 w-2 rounded-full" [class]="open ? 'bg-success' : 'bg-muted'"></span>
 *       <span class="font-medium">Notifications</span>
 *       <svg class="com-collapsible-icon h-4 w-4" [attr.data-state]="open ? 'open' : 'closed'">
 *         <!-- chevron icon -->
 *       </svg>
 *     </div>
 *   </ng-template>
 * </button>
 * ```
 */
declare class ComCollapsibleTriggerTpl {
    /** Reference to the template. */
    readonly templateRef: TemplateRef<ComCollapsibleTriggerContext>;
    /**
     * Static type guard for template type checking.
     * Enables type-safe access to context properties in templates.
     */
    static ngTemplateContextGuard(_dir: ComCollapsibleTriggerTpl, ctx: unknown): ctx is ComCollapsibleTriggerContext;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleTriggerTpl, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsibleTriggerTpl, "ng-template[comCollapsibleTriggerTpl]", never, {}, {}, never, never, true, never>;
}

/**
 * Directive to mark a template as the custom content chrome template.
 * Wraps the content with custom chrome (headers, footers, padding).
 * The grid animation still applies on the host.
 *
 * @tokens none
 *
 * @example
 * ```html
 * <com-collapsible-content>
 *   <ng-template comCollapsibleContentTpl let-open="open">
 *     <div class="border-t border-border">
 *       <div class="p-4 space-y-3">
 *         <!-- Content here -->
 *       </div>
 *       <div class="flex justify-end gap-2 px-4 py-3 border-t border-border-subtle bg-muted">
 *         <button>Reset</button>
 *         <button>Apply</button>
 *       </div>
 *     </div>
 *   </ng-template>
 * </com-collapsible-content>
 * ```
 */
declare class ComCollapsibleContentTpl {
    /** Reference to the template. */
    readonly templateRef: TemplateRef<ComCollapsibleContentContext>;
    /**
     * Static type guard for template type checking.
     * Enables type-safe access to context properties in templates.
     */
    static ngTemplateContextGuard(_dir: ComCollapsibleContentTpl, ctx: unknown): ctx is ComCollapsibleContentContext;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleContentTpl, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsibleContentTpl, "ng-template[comCollapsibleContentTpl]", never, {}, {}, never, never, true, never>;
}

/**
 * Directive to mark a template as the custom icon template.
 * Replaces only the chevron icon inside the default trigger layout.
 *
 * @tokens none
 *
 * @example
 * ```html
 * <button comCollapsibleTrigger>
 *   Settings
 *   <ng-template comCollapsibleIcon let-open="open">
 *     <span class="text-muted-foreground text-xs">{{ open ? '▲' : '▼' }}</span>
 *   </ng-template>
 * </button>
 * ```
 */
declare class ComCollapsibleIconTpl {
    /** Reference to the template. */
    readonly templateRef: TemplateRef<ComCollapsibleIconContext>;
    /**
     * Static type guard for template type checking.
     * Enables type-safe access to context properties in templates.
     */
    static ngTemplateContextGuard(_dir: ComCollapsibleIconTpl, ctx: unknown): ctx is ComCollapsibleIconContext;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleIconTpl, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsibleIconTpl, "ng-template[comCollapsibleIcon]", never, {}, {}, never, never, true, never>;
}

/**
 * Structural directive for lazy content rendering.
 * Content is only instantiated on first expand, preserving state on subsequent toggles.
 *
 * @tokens none
 *
 * @example
 * ```html
 * <com-collapsible-content>
 *   <ng-template comCollapsibleLazy>
 *     <app-heavy-chart [data]="chartData()" />
 *   </ng-template>
 * </com-collapsible-content>
 * ```
 */
declare class ComCollapsibleLazy {
    /** Reference to the template. */
    readonly templateRef: TemplateRef<void>;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleLazy, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsibleLazy, "ng-template[comCollapsibleLazy]", never, {}, {}, never, never, true, never>;
}

/**
 * Root collapsible directive — manages state and provides shell styling.
 *
 * Works as a DI anchor for child directives (trigger, content).
 * Exposes programmatic control via template reference.
 *
 * @tokens `--color-border`, `--color-background`, `--color-foreground`, `--shadow-xs`
 *
 * @example Basic usage
 * ```html
 * <div comCollapsible variant="card">
 *   <button comCollapsibleTrigger>Section Title</button>
 *   <com-collapsible-content>
 *     <div class="p-4">Content here.</div>
 *   </com-collapsible-content>
 * </div>
 * ```
 *
 * @example Two-way binding with external control
 * ```html
 * <div comCollapsible [(open)]="sectionOpen" #section="comCollapsible">
 *   <button comCollapsibleTrigger>Advanced</button>
 *   <com-collapsible-content>...</com-collapsible-content>
 * </div>
 * <button (click)="section.toggle()">Toggle externally</button>
 * ```
 */
declare class ComCollapsible {
    /** Unique ID for the collapsible instance. */
    private readonly id;
    /** ID for the trigger element (used for aria-labelledby). */
    readonly triggerId: string;
    /** ID for the content panel (used for aria-controls). */
    readonly contentId: string;
    /** Two-way bound open state. */
    readonly open: ModelSignal<boolean>;
    /** Disables the collapsible, preventing state changes. */
    readonly disabled: InputSignalWithTransform<boolean, unknown>;
    /** Shell preset variant. */
    readonly variant: InputSignal<CollapsibleVariant>;
    /** Consumer CSS classes — merged with variant classes. */
    readonly userClass: InputSignal<string>;
    /** @internal Computed host class from CVA + consumer overrides. */
    protected readonly computedClass: Signal<string>;
    /** Returns the current open state. */
    isOpen(): boolean;
    /** Returns the current disabled state. */
    isDisabled(): boolean;
    /** Toggles the open state (if not disabled). */
    toggle(): void;
    /** Expands the collapsible (if not disabled). */
    expand(): void;
    /** Collapses the collapsible (if not disabled). */
    collapse(): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsible, never>;
    static ɵdir: i0.ɵɵDirectiveDeclaration<ComCollapsible, "[comCollapsible]", ["comCollapsible"], { "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, never, true, never>;
}

/**
 * Collapsible trigger component — handles toggle interaction, ARIA, keyboard, and template rendering.
 *
 * Uses attribute selector so it can be applied to `<button>` or any focusable element.
 * Injects the parent `ComCollapsible` directive to access state.
 * Supports custom trigger layout via `comCollapsibleTriggerTpl` and custom icon via `comCollapsibleIcon`.
 *
 * @tokens `--color-foreground`, `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
 *         `--color-ring`, `--color-disabled-foreground`
 *
 * @example Default trigger with auto icon
 * ```html
 * <button comCollapsibleTrigger>Section Title</button>
 * ```
 *
 * @example Without icon
 * ```html
 * <button comCollapsibleTrigger [showIcon]="false">Section Title</button>
 * ```
 *
 * @example With custom icon
 * ```html
 * <button comCollapsibleTrigger>
 *   Settings
 *   <ng-template comCollapsibleIcon let-open="open">
 *     <span class="text-xs text-muted-foreground">{{ open ? '▲' : '▼' }}</span>
 *   </ng-template>
 * </button>
 * ```
 *
 * @example Full trigger layout override
 * ```html
 * <button comCollapsibleTrigger>
 *   <ng-template comCollapsibleTriggerTpl let-open let-toggle="toggle">
 *     <div class="flex items-center gap-3 w-full">
 *       <span class="h-2 w-2 rounded-full" [class]="open ? 'bg-success' : 'bg-muted'"></span>
 *       <span class="font-medium">Notifications</span>
 *       <svg class="com-collapsible-icon h-4 w-4" [attr.data-state]="open ? 'open' : 'closed'">
 *         <!-- chevron -->
 *       </svg>
 *     </div>
 *   </ng-template>
 * </button>
 * ```
 */
declare class ComCollapsibleTrigger {
    /** Parent collapsible directive (provides state). */
    protected readonly collapsible: ComCollapsible;
    /** Custom trigger layout template (replaces inner content). */
    protected readonly triggerTpl: Signal<ComCollapsibleTriggerTpl | undefined>;
    /** Custom icon template (replaces default chevron). */
    protected readonly iconTpl: Signal<ComCollapsibleIconTpl | undefined>;
    /** Trigger preset variant. */
    readonly variant: InputSignal<CollapsibleTriggerVariant>;
    /** Trigger size. */
    readonly size: InputSignal<CollapsibleTriggerSize>;
    /** Show/hide the toggle icon. */
    readonly showIcon: InputSignalWithTransform<boolean, unknown>;
    /** Consumer CSS classes — merged with variant classes. */
    readonly userClass: InputSignal<string>;
    /** @internal Computed host class from CVA + consumer overrides. */
    protected readonly computedClass: Signal<string>;
    /** Context for trigger template. */
    readonly triggerContext: Signal<ComCollapsibleTriggerContext>;
    /** Context for icon template. */
    readonly iconContext: Signal<ComCollapsibleIconContext>;
    /** @internal */
    protected onClick(event: Event): void;
    /** @internal */
    protected onKeydown(event: Event): void;
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleTrigger, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ComCollapsibleTrigger, "[comCollapsibleTrigger]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["triggerTpl", "iconTpl"], ["*"], true, never>;
}

/**
 * Collapsible content component — animated panel with region role.
 *
 * Uses CSS grid technique for smooth height animation without JS measurement.
 * Supports lazy rendering via `comCollapsibleLazy` directive.
 *
 * @tokens None (structural only — styling is applied via templates or consumer classes)
 *
 * @example Basic usage
 * ```html
 * <com-collapsible-content>
 *   <div class="p-4">Content here.</div>
 * </com-collapsible-content>
 * ```
 *
 * @example With custom duration
 * ```html
 * <com-collapsible-content [duration]="300">
 *   <div class="p-4">Slower animation.</div>
 * </com-collapsible-content>
 * ```
 *
 * @example With content chrome template
 * ```html
 * <com-collapsible-content>
 *   <ng-template comCollapsibleContentTpl let-open="open">
 *     <div class="border-t border-border p-4">
 *       <!-- Content with custom chrome -->
 *     </div>
 *   </ng-template>
 * </com-collapsible-content>
 * ```
 *
 * @example Lazy content
 * ```html
 * <com-collapsible-content>
 *   <ng-template comCollapsibleLazy>
 *     <app-heavy-component />
 *   </ng-template>
 * </com-collapsible-content>
 * ```
 */
declare class ComCollapsibleContent {
    /** Parent collapsible directive (provides state). */
    protected readonly collapsible: ComCollapsible;
    /** Custom content chrome template. */
    protected readonly contentTpl: Signal<ComCollapsibleContentTpl | undefined>;
    /** Lazy content template. */
    protected readonly lazyTpl: Signal<ComCollapsibleLazy | undefined>;
    /** Track if collapsible has ever been opened (for lazy rendering). */
    protected readonly hasBeenOpened: Signal<boolean>;
    /** Transition duration in milliseconds. */
    readonly duration: InputSignal<number>;
    /** Consumer CSS classes for the inner wrapper. */
    readonly userClass: InputSignal<string>;
    /** @internal Computed inner wrapper class. */
    protected readonly innerClass: Signal<string>;
    /** Context for content template. */
    readonly templateContext: Signal<ComCollapsibleContentContext>;
    constructor();
    static ɵfac: i0.ɵɵFactoryDeclaration<ComCollapsibleContent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ComCollapsibleContent, "com-collapsible-content", never, { "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["contentTpl", "lazyTpl"], ["*"], true, never>;
}

export { ComCollapsible, ComCollapsibleContent, ComCollapsibleContentTpl, ComCollapsibleIconTpl, ComCollapsibleLazy, ComCollapsibleTrigger, ComCollapsibleTriggerTpl, collapsibleTriggerVariants, collapsibleVariants };
export type { CollapsibleTriggerSize, CollapsibleTriggerVariant, CollapsibleTriggerVariants, CollapsibleVariant, CollapsibleVariants, ComCollapsibleContentContext, ComCollapsibleIconContext, ComCollapsibleTriggerContext };