/**
 * @license MIT
 * @module @whoj/utils-vue@2.4.0
 * @copyright (c) 2026 Jonson B.
 */

import { Plugin, Ref, Directive } from 'vue';

type DirectiveEl = HTMLElement | HTMLButtonElement | HTMLAnchorElement;
interface RippleOptions {
    /**
     *
     * @default `rgba(0, 0, 0, 0.35)`
     */
    color?: string;
    /**
     *
     * @default `true`
     */
    enable?: boolean;
    /**
     *
     * @default `1`
     */
    zIndex?: string;
}
interface DirectiveProps {
    /**
     *
     * @default `mousedown`
     */
    event: keyof HTMLElementEventMap;
    /**
     *
     * @default `450`
     */
    transition: number;
}
declare const vRipple: Directive<DirectiveEl, string>;
/**
 * It takes an element, an optional event name, and an optional options object, and then calls the rippleHandler function
 * with the element, an object with the event name as a key and a boolean value, and the options object
 * @param {DirectiveEl | Ref<DirectiveEl>} el - The element to apply the ripple effect to.
 * @param event - The event that triggers the ripple effect.
 * @param {RippleOptions} [options] - RippleOptions
 *
 * @__NO_SIDE_EFFECTS__
 */
declare function useRipple<K extends DirectiveProps['event']>(el: DirectiveEl | Ref<DirectiveEl>, event?: K, options?: RippleOptions): void;
declare const Ripple: Plugin<[undefined | RippleOptions]>;

export { Ripple, useRipple, vRipple };
export type { DirectiveProps, RippleOptions };