import { AsyncDirective } from 'lit/async-directive.js';
import { ResponsiveTextOptions, ResponsiveValueOptions } from './types.js';
/**
 * ResponsiveTextDirective - Returns different text based on screen size
 */
declare class ResponsiveTextDirective extends AsyncDirective {
    private _options?;
    private _unsubscribe?;
    render(options: ResponsiveTextOptions): string;
    disconnected(): void;
    reconnected(): void;
    private _getText;
}
/**
 * ResponsiveValueDirective - Returns different values based on screen size (generic)
 */
declare class ResponsiveValueDirective<T> extends AsyncDirective {
    private _options?;
    private _unsubscribe?;
    render(options: ResponsiveValueOptions<T>): T;
    disconnected(): void;
    reconnected(): void;
    private _getValue;
}
/**
 * Directive for responsive text values.
 * Returns different text based on the current screen size breakpoint.
 *
 * @param options - Object with default and optional breakpoint-specific texts
 * @returns The text for the current breakpoint (with fallback to smaller breakpoints)
 *
 * @example
 * ```typescript
 * html`<pd-button text="${responsiveText({
 *   default: 'Click here to continue',
 *   sm: 'Continue',
 *   xs: 'Go'
 * })}"></pd-button>`
 * ```
 */
export declare const responsiveText: (options: ResponsiveTextOptions) => import('lit/async-directive.js').DirectiveResult<typeof ResponsiveTextDirective>;
/**
 * Directive for responsive generic values.
 * Returns different values based on the current screen size breakpoint.
 *
 * @param options - Object with default and optional breakpoint-specific values
 * @returns The value for the current breakpoint (with fallback to smaller breakpoints)
 *
 * @example
 * ```typescript
 * html`<my-component
 *   columns="${responsiveValue({ default: 4, md: 2, sm: 1 })}"
 *   .showSidebar="${responsiveValue({ default: true, sm: false })}"
 * ></my-component>`
 * ```
 */
export declare const responsiveValue: (options: ResponsiveValueOptions<unknown>) => import('lit/async-directive.js').DirectiveResult<typeof ResponsiveValueDirective>;
export {};
//# sourceMappingURL=responsive-directives.d.ts.map