import { CSSResult } from 'lit';
import { LitElement } from 'lit';
import { PropertyValueMap } from 'lit';
import { TemplateResult } from 'lit-html';

export declare class AccordionComponent extends PlusBase_2 {
    expand: boolean;
    isGrouped: boolean;
    isLast: boolean;
    size: "sm" | "md" | "lg";
    static styles: CSSResult[];
    private toggleOpen;
    render(): TemplateResult<1>;
}

export declare class AccordionGroupComponent extends PlusBase_2 {
    accordions: Array<Node>;
    multi: boolean;
    static styles: CSSResult[];
    constructor();
    private handleSlotChange;
    render(): TemplateResult<1>;
}

export declare class AccordionHeaderComponent extends PlusBase_2 {
    constructor();
    render(): TemplateResult<1>;
}

export declare class AccordionHelperComponent extends PlusBase_2 {
    constructor();
    render(): TemplateResult<1>;
}

export declare class AccordionPanelComponent extends PlusBase_2 {
    constructor();
    render(): TemplateResult<1>;
}

export declare class AlertComponent extends PlusBase_2 {
    el: HTMLElement;
    kind: "outlined" | "filled" | "dashed";
    status: "success" | "warning" | "error" | "info" | "default";
    size: "sm" | "md" | "lg";
    invert: boolean;
    _prefixIcon: string;
    set prefixIcon(value: any);
    get prefixIcon(): any;
    message: string;
    description: string;
    dismiss: boolean;
    fullWidth: boolean;
    static styles: CSSResult[];
    render(): TemplateResult;
}

export declare class AvatarComponent extends PlusBase_2 {
    image: string;
    alt: string;
    shape: "circle" | "square";
    size: SizeType | string;
    icon: string;
    invert: boolean;
    text?: string;
    isSizeLargeEnough(): boolean;
    getText(): string;
    customSize(): boolean;
    sizeValue(): any;
    isFallback: boolean;
    render(): TemplateResult;
}

export declare class BadgeComponent extends PlusBase_2 {
    kind: "dot" | "text";
    status: "success" | "warning" | "error" | "info" | "default";
    size: "sm" | "md" | "lg";
    invert: boolean;
    content: string;
    orientation: "top-left" | "top-right" | "bottom-left" | "bottom-right";
    offset: [string, string];
    render(): TemplateResult<1>;
}

export declare class BreadCrumbComponent extends PlusBase_2 {
    links: Array<HTMLElement>;
    size: "sm" | "md" | "lg";
    separator: string;
    protected handleChanges(): void;
    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    private handleClickItem;
    render(): TemplateResult;
}

export declare class ButtonComponent extends PlusBase_2 {
    static styles: CSSResult[];
    size: "sm" | "md" | "lg";
    kind: "filled" | "outlined" | "dashed" | "text";
    status: "default" | "primary" | "success" | "warning" | "error" | "info" | "invert";
    type: "button" | "submit" | "reset";
    href: string;
    target: "_blank" | "_parent" | "_self" | "_top";
    download?: string;
    rel: string;
    groupOrder: "first" | "middle" | "last";
    groupPosition: "vertical" | "horizontal";
    loading: boolean;
    prefixIcon: string;
    suffixIcon: string;
    fullWidth: boolean;
    hasFocus: boolean;
    private isLink;
    private handleBlur;
    private handleFocus;
    private handleClick;
    render(): TemplateResult;
}

export declare class ButtonGroupComponent extends PlusBase_2 {
    buttonGroup: HTMLElement;
    handleSlotChange(): void;
    render(): TemplateResult<1>;
}

export declare class CheckboxComponent extends PlusBase_2 {
    static styles: CSSResult[];
    checkbox: HTMLInputElement;
    size: "sm" | "md" | "lg";
    text: string;
    checked: boolean;
    indeterminate: boolean;
    label?: string;
    caption?: string;
    error: boolean;
    hasFocus: boolean;
    private handleClick;
    private handleFocus;
    private handleBlur;
    private handleChange;
    render(): TemplateResult;
}

export declare class CheckboxGroupComponent extends PlusBase_2 {
    orientation: "horizontal" | "vertical";
    size: "sm" | "md" | "lg";
    label?: string;
    caption?: string;
    error: boolean;
    hasFocus: boolean;
    render(): TemplateResult;
}

export declare class ChipComponent extends PlusBase_2 {
    size: "sm" | "md" | "lg";
    kind: "filled" | "outlined";
    status: "success" | "warning" | "error" | "info" | "default";
    invert: boolean;
    prefixIcon: string;
    dismiss: boolean;
    onDismiss(): void;
    color: string;
    render(): TemplateResult<1>;
}

export declare class DividerComponent extends PlusBase_2 {
    static styles: CSSResult[];
    kind: "default" | "dashed";
    orientation: "vertical" | "horizontal";
    render(): TemplateResult;
}

export declare class DrawerComponent extends PlusBase_2 {
    size: SizeType_2;
    isOpen: boolean;
    orientation: "left" | "right" | "top" | "bottom";
    constructor();
    connectedCallback(): void;
    hide(): void;
    private drawerHide;
    show(): void;
    private drawerShow;
    disconnectedCallback(): void;
    keydownHandler: (e: KeyboardEvent) => void;
    render(): TemplateResult<1>;
}

export declare class DropdonwMenuComponent extends PlusBase_2 {
    defaultSlot: HTMLElement[] | undefined;
    size: "sm" | "md" | "lg";
    dropdownContext?: DropdownContext;
    connectedCallback(): void;
    private handleSlotChange;
    render(): TemplateResult<1>;
}

export declare class DropdownComponent extends PlusBase_2 {
    dropdown: Promise<HTMLElement> | undefined;
    size: "sm" | "md" | "lg";
    text: any;
    orientation: PlacementType;
    status: "default" | "primary" | "success" | "warning" | "error" | "info" | "invert";
    kind: "filled" | "outlined" | "dashed" | "text";
    context: DropdownContext;
    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    render(): TemplateResult<1>;
}

export declare interface DropdownContext {
    onSelect: (id: string | number) => void;
    size: "sm" | "md" | "lg";
    slot: HTMLElement[];
}

export declare const dropdownContext: {
    __context__: DropdownContext;
};

export declare class DropDownItemComponent extends PlusBase_2 {
    disabled: boolean;
    active: boolean;
    size: "sm" | "md" | "lg";
    dropdownContext?: DropdownContext;
    private handleClick;
    render(): TemplateResult<1>;
}

export declare class FloatingService extends FloatingUI_2 {
    protected options: FloatingUIOptions_2;
    protected trigger: string;
    private hoverTimeout;
    constructor();
    private setTarget;
    private getTarget;
    private setContent;
    handleSlotChange({ target }: {
        target: any;
    }): void;
    private hasTrigger;
    private listener;
    private handleBlur;
    private handleFocus;
    private handleClick;
    private handleMouseOver;
    private handleMouseOut;
    private handleClickOutside;
}

export declare class FloatingUI extends PlusBase_2 {
    protected options: FloatingUIOptions;
    constructor(options?: FloatingUIOptions);
    updatePosition(): void;
    show(): void;
    hide(): void;
    isOpen(): boolean;
    destroy(): void;
}

declare class FloatingUI_2 extends PlusBase {
    protected options: FloatingUIOptions_2;

    constructor(
    options: FloatingUIOptions_2 = {
        position: "bottom",
        showArrow: false,
        offset: 6,
        showDelay: 200,
        hideDelay: 200,
        zIndex: 50,
        autoHide: true,
    },
    ) {
        super();
        this.options = options;
    }

    updatePosition() {
        // const { target, content, offset: _offset, autoHide, position, showArrow } = this.options;
        if (!this.options.target || !this.options.content) return;
        const _middleware = [offset(this.options.offset), flip(), shift({ padding: 8 })];
        if (this.options.autoHide) {
            _middleware.push(hide({ padding: 10 }));
        }
        const arrowElement = this.options.content.querySelector(".arrow") as HTMLElement;
        if (this.options.showArrow) {
            if (arrowElement) {
                _middleware.push(arrow({ element: arrowElement }));
            }
        }

        computePosition(this.options.target, this.options.content, {
            placement: this.options.position,
            middleware: _middleware,
        }).then(({ x, y, placement, middlewareData }) => {
            Object.assign(this.options.content.style, {
                left: `${x}px`,
                top: `${y}px`,
            });
            if (this.options.showArrow && arrowElement) {
                // const { x: arrowX, y: arrowY } = middlewareData.arrow;

                const staticSide = {
                    top: "bottom",
                    right: "left",
                    bottom: "top",
                    left: "right",
                }[placement.split("-")[0]];

                Object.assign(arrowElement.style, {
                    left: middlewareData.arrow.x != null ? `${middlewareData.arrow.x}px` : "",
                    top: middlewareData.arrow.y != null ? `${middlewareData.arrow.y}px` : "",
                    right: "",
                    bottom: "",
                    [staticSide]: "-6px",
                });
            }
        });
    }

    show() {
        this.options.content.style.display = "block";
        this.updatePosition();
        this.options.isOpened?.(true);
    }

    hide() {
        this.options.content.style.display = "none";
        this.options.isOpened?.(false);
    }

    isOpen() {
        return this.options.content.style.display === "block";
    }

    destroy() {}
}

export declare type FloatingUIOptions = {
    target?: HTMLElement;
    content?: HTMLElement;
    position?: PlacementType;
    showArrow?: boolean;
    offset?: number;
    showDelay?: number;
    hideDelay?: number;
    zIndex?: number;
    autoHide?: boolean;
    onShow?: () => void;
    onHide?: () => void;
    isOpened?: (open: boolean) => void;
    onVisibleChange?: (visible: boolean) => void;
    onPositionChange?: (position: PlacementType) => void;
};

declare type FloatingUIOptions_2 = {
    target?: HTMLElement;
    content?: HTMLElement;
    position?: PlacementType;
    showArrow?: boolean;
    offset?: number;
    showDelay?: number;
    hideDelay?: number;
    zIndex?: number;
    autoHide?: boolean;
    onShow?: () => void;
    onHide?: () => void;
    isOpened?: (open: boolean) => void;
    onVisibleChange?: (visible: boolean) => void;
    onPositionChange?: (position: PlacementType) => void;
};

export declare class InputComponent extends PlusBase_2 {
    static styles: CSSResult[];
    input: HTMLInputElement;
    private hasFocus;
    type: "date" | "datetime-local" | "email" | "number" | "password" | "search" | "tel" | "text" | "time" | "url";
    name: string;
    value: string;
    placeholder: string;
    size: "sm" | "md" | "lg";
    clearable: boolean;
    passwordToggle: boolean;
    passwordVisible: boolean;
    label?: string;
    pattern: string;
    minlength: number;
    maxlength: number;
    min: number | string;
    max: number | string;
    step: number | "any";
    autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
    autocorrect: "off" | "on";
    autocomplete: string;
    autofocus: boolean;
    enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
    inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
    spellcheck: boolean;
    caption?: string;
    error: boolean;
    fullWidth: boolean;
    isSelect: boolean;
    prefixIcon: string;
    suffixIcon: string;
    private handleBlur;
    private handleChange;
    private handleClearClick;
    private handleFocus;
    private handleInput;
    private handleInvalid;
    private handleKeyDown;
    handleSlotchange(e: any): void;
    render(): TemplateResult;
}

export declare class LinkComponent extends PlusBase_2 {
    kind: "default" | "primary";
    href: string;
    target: "_blank" | "_parent" | "_self" | "_top";
    download?: string;
    rel: string;
    size: string;
    active: boolean;
    isBreadcrumb: boolean;
    truncated: boolean;
    prefixIcon: string;
    private handleClick;
    render(): TemplateResult;
}

export declare class LoadingComponent extends PlusBase_2 {
    static styles: CSSResult[];
    render(): TemplateResult;
}

export declare class ModalComponent extends PlusBase_2 {
    size: SizeType_2;
    isOpen: boolean;
    fullWidth: boolean;
    constructor();
    connectedCallback(): void;
    hide(): void;
    private modalHide;
    show(): void;
    private modalShow;
    render(): TemplateResult<1>;
}

declare type PlacementType = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";

declare abstract class PlusBase extends LitElement {
    static styles = [unsafeCSS(tailwind), unsafeCSS(theme), unsafeCSS(fa)];

    // ID property with default value
    @property({ type: String, reflect: true })
    id: string = `plusui-${Math.random().toString(36).slice(2, 12)}`;

    // Name property with default value
    @property()
    name: string = "";

    // Value property with default value
    @property({ type: String, reflect: true })
    value: string | number = "";

    // Disabled property with default value
    @property({ type: Boolean, reflect: true })
    disabled: boolean = false;

    // Readonly property with default value
    @property({ type: Boolean, reflect: true })
    readonly: boolean = false;

    // Required property with default value
    @property({ type: Boolean, reflect: true })
    required: boolean = false;

    // Loading property with default value
    @property({ type: Boolean })
    loading = false;

    // Title property with default value
    @property()
    title = "";

    // emit function to dispatch events
    emit(name: string, options?: CustomEventInit) {
        // Create a new CustomEvent object
        const event = new CustomEvent(name, {
            bubbles: true,
            cancelable: false,
            composed: true,
            detail: {},
            ...options,
        });

        // Dispatch the event
        this.dispatchEvent(event);

        // Return the event
        return event;
    }
}

declare abstract class PlusBase_2 extends LitElement {
    static styles: CSSResult[];
    id: string;
    name: string;
    value: string | number;
    disabled: boolean;
    readonly: boolean;
    required: boolean;
    loading: boolean;
    title: string;
    emit(name: string, options?: CustomEventInit): CustomEvent<any>;
}

export declare class PopconfirmComponent extends FloatingService {
    size: SizeType;
    orientation: PlacementType;
    showArrow: boolean;
    title: string;
    description: string;
    status: "success" | "warning" | "error" | "info" | "attention";
    okText: string;
    cancelText: string;
    trigger: string;
    _prefixIcon: string;
    set prefixIcon(value: string);
    get prefixIcon(): string;
    private onConfirm;
    private onCancel;
    constructor();
    protected firstUpdated(): void;
    render(): TemplateResult<1>;
}

export declare class PopoverComponent extends FloatingService {
    size: SizeType;
    orientation: PlacementType;
    showArrow: boolean;
    title: string;
    status: "success" | "warning" | "error" | "info" | "default" | "primary" | "attention";
    okText: string;
    cancelText: string;
    trigger: string;
    _prefixIcon: string;
    set prefixIcon(value: any);
    get prefixIcon(): any;
    private onConfirm;
    private onCancel;
    constructor();
    protected firstUpdated(): void;
    render(): TemplateResult<1>;
}

export declare class ProgressComponent extends PlusBase_2 {
    size: "sm" | "md" | "lg";
    label?: string;
    caption?: string;
    error: boolean;
    status: "success" | "warning" | "error" | "info" | "default";
    statusIcon: boolean;
    maxValue: number;
    indeterminate: boolean;
    showPercent: boolean;
    showStep: boolean;
    static host: CSSResult;
    static styles: CSSResult[];
    render(): TemplateResult;
}

export declare class RadioComponent extends PlusBase_2 {
    radio: HTMLInputElement;
    size: "sm" | "md" | "lg";
    text: string;
    checked: boolean;
    error: boolean;
    hasFocus: boolean;
    private handleClick;
    private handleFocus;
    private handleBlur;
    render(): TemplateResult;
}

export declare class RadioGroupComponent extends PlusBase_2 {
    orientation: "horizontal" | "vertical";
    defaultSlot: HTMLSlotElement;
    size: "sm" | "md" | "lg";
    label?: string;
    caption?: string;
    error: boolean;
    private handleSlotChange;
    render(): TemplateResult;
}

export declare class RatingComponent extends PlusBase_2 {
    static host: CSSResult;
    static styles: CSSResult[];
    kind: "default" | "icon" | "face";
    status: "default" | "primary" | "custom";
    size: "sm" | "md" | "lg";
    emptyIcon: string;
    icon: string;
    max: number;
    step: number;
    defaultValue: number;
    value: number;
    hoveredValue: number;
    half: boolean;
    name: string;
    hasFocus: boolean;
    calculateSelectedWidth(index: number, half?: boolean, val?: number): string;
    hoveredWidth(index: number): string;
    handleSelect: (value: number) => () => void;
    render(): TemplateResult;
}

export declare class SelectComponent extends PlusBase_2 {
    input: Promise<HTMLElement> | undefined;
    orientation: PlacementType;
    placeholder: string;
    label?: string;
    error: boolean;
    caption?: string;
    clearable: boolean;
    set size(value: "sm" | "md" | "lg");
    selected: string;
    open: boolean;
    _size: "sm" | "md" | "lg";
    inputWrapper: Promise<HTMLElement> | undefined;
    context: SelectContext;
    connectedCallback(): void;
    protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    render(): TemplateResult<1>;
}

export declare interface SelectContext {
    onSelect: (id: string | number) => void;
    size: "sm" | "md" | "lg";
    slot: HTMLElement[];
}

export declare const selectContext: {
    __context__: SelectContext;
};

export declare class SelectOptionComponent extends PlusBase_2 {
    disabled: boolean;
    active: boolean;
    size: "sm" | "md" | "lg";
    selectContext?: SelectContext;
    private handleClick;
    render(): TemplateResult<1>;
}

export declare class SelectOptionsComponent extends PlusBase_2 {
    defaultSlot: HTMLElement[] | undefined;
    size: "sm" | "md" | "lg";
    selectContext?: SelectContext;
    private handleSlotChange;
    render(): TemplateResult<1>;
}

declare type SizeType = "sm" | "md" | "lg";

declare type SizeType_2 = "sm" | "md" | "lg";

declare type StatusType = "success" | "warning" | "error" | "info" | "default";

export declare class StickyBoxComponent extends StickyService {
    content: HTMLDivElement;
    target: Promise<HTMLElement> | undefined;
    orientation: PlacementType;
    open: boolean;
    constructor();
    protected update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): Promise<void>;
    render(): TemplateResult;
}

export declare class StickyService extends FloatingUI_2 {
    options: FloatingUIOptions_2;
    constructor();
    protected listener(): void;
}

export declare class TabComponent extends PlusBase_2 {
    static styles: CSSResult[];
    size: "sm" | "md" | "lg";
    active: boolean;
    orientation: "vertical" | "horizontal";
    prefixIcon: string;
    badge: boolean;
    badgeStatus: BadgeComponent["status"];
    badgeSize: BadgeComponent["size"];
    badgeInvert: boolean;
    badgeContent: string;
    truncated: boolean;
    dismiss: boolean;
    isRemoved: boolean;
    constructor();
    handleDismiss(e: any): void;
    render(): TemplateResult;
}

export declare class TabGroupComponent extends PlusBase_2 {
    static styles: CSSResult[];
    tabGroup: HTMLDivElement;
    tabSlot: HTMLSlotElement;
    panelSlot: HTMLSlotElement;
    size: "sm" | "md" | "lg";
    orientation: "vertical" | "horizontal";
    disabled: boolean;
    dismiss: boolean;
    private get tabItems();
    private get panelItems();
    protected handleSlotChange(): void;
    protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    handleClickItem({ target }: Event): void;
    handleDismiss(): ({ target }: Event) => void;
    render(): TemplateResult;
}

export declare class TabPanelComponent extends PlusBase_2 {
    active: boolean;
    isRemoved: boolean;
    constructor();
    render(): TemplateResult;
}

export declare class textareaComponent extends PlusBase_2 {
    static styles: CSSResult[];
    textarea: HTMLInputElement;
    private hasFocus;
    name: string;
    value: string;
    placeholder: string;
    size: "sm" | "md" | "lg";
    clearable: boolean;
    label?: string;
    minlength: number;
    maxlength: number;
    autocapitalize: "off" | "none" | "on" | "sentences" | "words" | "characters";
    autocorrect: "off" | "on";
    autocomplete: string;
    autofocus: boolean;
    enterkeyhint: "enter" | "done" | "go" | "next" | "previous" | "search" | "send";
    inputmode: "none" | "text" | "decimal" | "numeric" | "tel" | "search" | "email" | "url";
    spellcheck: boolean;
    caption?: string;
    error: boolean;
    rows: number;
    cols: number;
    resize: "none" | "both" | "horizontal" | "vertical";
    fullWidth: boolean;
    private handleBlur;
    private handleChange;
    private handleClearClick;
    private handleFocus;
    private handleInput;
    private handleInvalid;
    private handleKeyDown;
    render(): TemplateResult;
}

export declare class TextComponent extends PlusBase_2 {
    static styles: CSSResult[];
    kind: "default" | "placeholder" | "caption";
    status: "default" | "success" | "warning" | "error" | "info";
    underline: boolean;
    overline: boolean;
    lineThrough: boolean;
    highlight: boolean;
    strong: boolean;
    italic: boolean;
    textTransform?: "uppercase" | "lowercase" | "capitalize";
    code: boolean;
    truncate: boolean;
    blockquote: boolean;
    size: string;
    type: string;
    truncated: boolean;
    textDecoration(): {
        "text-decoration"?: undefined;
    } | {
        "text-decoration": string;
    };
    render(): TemplateResult;
}

export declare class ToastComponent extends PlusBase_2 {
    toast: HTMLElement | undefined;
    size: SizeType;
    kind: "filled" | "outlined";
    placement: PlacementType;
    status: StatusType;
    invert: boolean;
    dismiss: boolean;
    actionButtons: boolean;
    statusIcon: boolean;
    duration: number;
    position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
    message: string;
    header: string;
    cancelText: string;
    applyText: string;
    _icon: string;
    set icon(value: any);
    get icon(): any;
    timeOutId: any;
    protected firstUpdated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
    show(): Promise<void>;
    private createToastContainer;
    private toastContainer;
    private mouseEnter;
    private mouseLeave;
    private close;
    private apply;
    render(): TemplateResult<1>;
}

export declare class ToastContainerComponent extends PlusBase_2 {
    position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
    id: string;
    showToast(toast: ToastComponent): void;
    hideToast(toast: ToastComponent): void;
    render(): TemplateResult<1>;
}

export declare class ToggleComponent extends PlusBase_2 {
    static styles: CSSResult[];
    input: HTMLInputElement;
    private hasFocus;
    name: string;
    value: string;
    checked: boolean;
    size: "sm" | "md" | "lg";
    label?: string;
    text?: string;
    alignment: "left" | "right";
    toggleIcon?: string;
    toggleActiveIcon?: string;
    toggleInActiveIcon?: string;
    caption?: string;
    error: boolean;
    private handleBlur;
    private handleInput;
    private handleInvalid;
    private handleClick;
    private handleFocus;
    private handleKeyDown;
    click(): void;
    focus(options?: FocusOptions): void;
    blur(): void;
    getToggleIcon(): "" | TemplateResult;
    render(): TemplateResult;
}

export declare class TooltipComponent extends FloatingService {
    size: SizeType;
    orientation: PlacementType;
    showArrow: boolean;
    message: string;
    trigger: string;
    constructor();
    protected firstUpdated(): void;
    render(): TemplateResult<1>;
}

export { }