import type { RGB, ThemeColorGroup, ThemeColorShade, ThemeColors, ThemeContextColorGroup, ThemeContextColorShade, ThemeContextColors, ThemeName } from './../../../global/types/theme.js';
import { type Ref } from '#imports';
import type { ElementProvider } from './element.js';
import type { DraggableStyle } from '../types/style.js';
type ThemeMap = {
    accent: Ref<ThemeColors>;
    mono: Ref<ThemeColors>;
    teal: Ref<ThemeContextColors>;
    yellow: Ref<ThemeContextColors>;
    red: Ref<ThemeContextColors>;
    lime: Ref<ThemeContextColors>;
    orange: Ref<ThemeContextColors>;
};
export type ThemeProvider = {
    /**
     * Accent color palette (primary brand color).
     *
     * Available shades: 50-950
     */
    accent: Ref<ThemeColors>;
    /**
     * Monochrome color palette (grays).
     *
     * Available shades: 50-950
     */
    mono: Ref<ThemeColors>;
    /**
     * Teal context color palette.
     *
     * Available shades: bg, fg, fgHover, bgHover
     */
    teal: Ref<ThemeContextColors>;
    /**
     * Yellow context color palette.
     *
     * Available shades: bg, fg, fgHover, bgHover
     */
    yellow: Ref<ThemeContextColors>;
    /**
     * Red context color palette.
     *
     * Available shades: bg, fg, fgHover, bgHover
     */
    red: Ref<ThemeContextColors>;
    /**
     * Lime context color palette.
     *
     * Available shades: bg, fg, fgHover, bgHover
     */
    lime: Ref<ThemeContextColors>;
    /**
     * Orange context color palette.
     *
     * Available shades: bg, fg, fgHover, bgHover
     */
    orange: Ref<ThemeContextColors>;
    /**
     * Get the draggable style for an element.
     *
     * Computes and caches the visual style to use when dragging this element.
     * Includes background color, text color, and border radius.
     *
     * @param el - The element to get style for
     * @returns The draggable style configuration
     */
    getDraggableStyle: (el: HTMLElement | SVGElement) => DraggableStyle;
    /**
     * Set a theme color value.
     *
     * Updates both the reactive ref and the CSS custom property on :root.
     *
     * @param group - The color group (accent, mono, teal, etc.)
     * @param shade - The shade (50-950 for accent/mono, bg/fg/etc for context colors)
     * @param value - RGB color as [r, g, b] array
     */
    setColor: <Group extends ThemeColorGroup | ThemeContextColorGroup>(group: Group, shade: Group extends ThemeColorGroup ? ThemeColorShade : ThemeContextColorShade, value: RGB) => void;
    /**
     * Apply a theme by name.
     *
     * Replaces all theme colors with the selected theme.
     * Use 'custom' to restore previously customized colors.
     *
     * @param name - Theme name or 'custom' for customized theme
     */
    applyTheme: (name: ThemeName | 'custom') => void;
    /**
     * Invalidate cached style for an element.
     *
     * Forces recalculation of draggable style next time it's requested.
     * Useful when element styling changes dynamically.
     *
     * @param el - The element to invalidate
     */
    invalidateCachedStyle: (el: HTMLElement | SVGElement) => void;
    /**
     * Get an RGB color value from the theme.
     *
     * @param color - The color group
     * @param key - The shade key
     * @returns RGB color as [r, g, b] array
     */
    getColor<K extends keyof ThemeMap, T extends ThemeMap[K]['value']>(color: K, key: keyof T): RGB;
    /**
     * Get a color as an rgba() CSS string.
     *
     * @param color - The color group
     * @param key - The shade key
     * @param alpha - Optional alpha value (0-1, default: 1)
     * @returns CSS rgba() string
     *
     * @example
     * ```ts
     * theme.getColorString('accent', 700, 0.5) // 'rgba(59, 130, 246, 0.5)'
     * ```
     */
    getColorString<K extends keyof ThemeMap, T extends ThemeMap[K]['value']>(color: K, key: keyof T, alpha?: number): string;
};
export default function (element: ElementProvider): ThemeProvider;
export {};