import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode, type Ref, type RefObject } from 'react';
import { type CssLength } from '../../../utils/css';
export type GridBeamRgb = readonly [red: number, green: number, blue: number];
export type GridBeamPaletteBand = Readonly<{
    color: GridBeamRgb;
    opacity: number;
}>;
export type GridBeamPaletteLayers = Readonly<{
    horizontal: readonly GridBeamPaletteBand[];
    vertical: readonly GridBeamPaletteBand[];
}>;
export type GridBeamColorScheme = 'dark' | 'light';
export type GridBeamTheme = GridBeamColorScheme | 'auto';
export declare const GRID_BEAM_PALETTES: {
    readonly colorful: {
        readonly dark: {
            readonly horizontal: readonly [{
                readonly color: readonly [255, 50, 100];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [40, 180, 220];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [50, 200, 80];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [180, 40, 240];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [255, 160, 30];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [100, 70, 255];
                readonly opacity: 0.35;
            }];
            readonly vertical: readonly [{
                readonly color: readonly [40, 140, 255];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [240, 50, 180];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [30, 185, 170];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [255, 120, 40];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [100, 70, 255];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [50, 200, 80];
                readonly opacity: 0.38;
            }];
        };
        readonly light: {
            readonly horizontal: readonly [{
                readonly color: readonly [200, 30, 70];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [20, 140, 180];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [30, 160, 50];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [140, 20, 200];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [210, 120, 10];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [70, 40, 210];
                readonly opacity: 0.24;
            }];
            readonly vertical: readonly [{
                readonly color: readonly [20, 100, 210];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [200, 30, 140];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [15, 145, 130];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [210, 90, 20];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [70, 40, 210];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [30, 160, 50];
                readonly opacity: 0.28;
            }];
        };
    };
    readonly mono: {
        readonly dark: {
            readonly horizontal: readonly [{
                readonly color: readonly [200, 200, 200];
                readonly opacity: 0.16;
            }, {
                readonly color: readonly [180, 180, 180];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [190, 190, 190];
                readonly opacity: 0.16;
            }, {
                readonly color: readonly [175, 175, 175];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [195, 195, 195];
                readonly opacity: 0.16;
            }, {
                readonly color: readonly [185, 185, 185];
                readonly opacity: 0.13;
            }];
            readonly vertical: readonly [{
                readonly color: readonly [185, 185, 185];
                readonly opacity: 0.16;
            }, {
                readonly color: readonly [170, 170, 170];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [195, 195, 195];
                readonly opacity: 0.16;
            }, {
                readonly color: readonly [180, 180, 180];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [190, 190, 190];
                readonly opacity: 0.16;
            }, {
                readonly color: readonly [175, 175, 175];
                readonly opacity: 0.13;
            }];
        };
        readonly light: {
            readonly horizontal: readonly [{
                readonly color: readonly [90, 90, 90];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [110, 110, 110];
                readonly opacity: 0.1;
            }, {
                readonly color: readonly [80, 80, 80];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [100, 100, 100];
                readonly opacity: 0.1;
            }, {
                readonly color: readonly [85, 85, 85];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [95, 95, 95];
                readonly opacity: 0.1;
            }];
            readonly vertical: readonly [{
                readonly color: readonly [100, 100, 100];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [80, 80, 80];
                readonly opacity: 0.1;
            }, {
                readonly color: readonly [90, 90, 90];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [110, 110, 110];
                readonly opacity: 0.1;
            }, {
                readonly color: readonly [85, 85, 85];
                readonly opacity: 0.13;
            }, {
                readonly color: readonly [95, 95, 95];
                readonly opacity: 0.1;
            }];
        };
    };
    readonly ocean: {
        readonly dark: {
            readonly horizontal: readonly [{
                readonly color: readonly [100, 80, 255];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [60, 140, 255];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [80, 100, 220];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [130, 70, 255];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [50, 120, 230];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [110, 90, 240];
                readonly opacity: 0.35;
            }];
            readonly vertical: readonly [{
                readonly color: readonly [70, 130, 255];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [120, 80, 240];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [90, 110, 230];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [60, 100, 255];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [140, 100, 255];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [80, 120, 220];
                readonly opacity: 0.35;
            }];
        };
        readonly light: {
            readonly horizontal: readonly [{
                readonly color: readonly [60, 50, 180];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [40, 100, 210];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [50, 70, 190];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [90, 50, 200];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [30, 80, 200];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [70, 60, 210];
                readonly opacity: 0.24;
            }];
            readonly vertical: readonly [{
                readonly color: readonly [50, 90, 220];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [80, 60, 200];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [60, 80, 210];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [40, 70, 200];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [100, 80, 230];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [55, 85, 195];
                readonly opacity: 0.24;
            }];
        };
    };
    readonly sunset: {
        readonly dark: {
            readonly horizontal: readonly [{
                readonly color: readonly [255, 100, 60];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [255, 180, 50];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [255, 80, 80];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [255, 140, 40];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [255, 200, 60];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [255, 120, 50];
                readonly opacity: 0.35;
            }];
            readonly vertical: readonly [{
                readonly color: readonly [255, 160, 70];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [255, 90, 60];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [255, 200, 50];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [255, 70, 70];
                readonly opacity: 0.35;
            }, {
                readonly color: readonly [255, 150, 40];
                readonly opacity: 0.38;
            }, {
                readonly color: readonly [255, 100, 80];
                readonly opacity: 0.35;
            }];
        };
        readonly light: {
            readonly horizontal: readonly [{
                readonly color: readonly [200, 70, 30];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [210, 140, 20];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [190, 50, 50];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [200, 100, 20];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [220, 160, 30];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [195, 80, 25];
                readonly opacity: 0.24;
            }];
            readonly vertical: readonly [{
                readonly color: readonly [210, 120, 40];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [190, 60, 40];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [220, 160, 25];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [185, 45, 45];
                readonly opacity: 0.24;
            }, {
                readonly color: readonly [200, 110, 20];
                readonly opacity: 0.28;
            }, {
                readonly color: readonly [195, 75, 50];
                readonly opacity: 0.24;
            }];
        };
    };
};
export type GridBeamPaletteKey = keyof typeof GRID_BEAM_PALETTES;
export type GridBeamColorVariant = GridBeamPaletteKey;
export type UseGridBeamOptions = Readonly<{
    active?: boolean;
    breathe?: boolean;
    colorVariant?: GridBeamColorVariant;
    cols?: number;
    duration?: number;
    rows?: number;
    strength?: number;
    theme?: GridBeamTheme;
}>;
export type UseGridBeamResult = Readonly<{
    canvasRef: RefObject<HTMLCanvasElement | null>;
    cols: number;
    fadeStart: number | null;
    fadingOut: boolean;
    palette: GridBeamPaletteLayers;
    reducedMotion: boolean;
    resolvedScheme: GridBeamColorScheme;
    rows: number;
}>;
type GridBeamStyle = CSSProperties & {
    '--grid-beam-divider'?: string;
    '--grid-beam-radius'?: string;
};
type GridBeamCanvasStyle = CSSProperties & {
    '--grid-beam-radius'?: string;
};
export declare const resolveGridBeamPalette: (colorVariant: GridBeamColorVariant, scheme: GridBeamColorScheme) => GridBeamPaletteLayers;
export declare function useGridBeam({ active, breathe, colorVariant, cols: colsProp, duration: durationProp, rows: rowsProp, strength: strengthProp, theme, }?: UseGridBeamOptions): UseGridBeamResult;
export type GridBeamDividersProps = Omit<ComponentPropsWithoutRef<'svg'>, 'children'> & {
    cols: number;
    dividerStroke?: string;
    ref?: Ref<SVGSVGElement>;
    rows: number;
};
export declare function GridBeamDividers({ className, cols, dividerStroke, ref, rows, ...props }: GridBeamDividersProps): import("react/jsx-runtime").JSX.Element;
export type GridBeamCanvasProps = Omit<ComponentPropsWithoutRef<'canvas'>, 'children' | 'style'> & {
    borderRadius?: CssLength;
    ref?: Ref<HTMLCanvasElement>;
    style?: GridBeamCanvasStyle;
};
export declare function GridBeamCanvas({ borderRadius, className, ref, style, ...props }: GridBeamCanvasProps): import("react/jsx-runtime").JSX.Element;
export type GridBeamContentProps = ComponentPropsWithoutRef<'div'> & {
    ref?: Ref<HTMLDivElement>;
};
export declare function GridBeamContent({ className, ref, ...props }: GridBeamContentProps): import("react/jsx-runtime").JSX.Element;
export type GridBeamProps = Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'style'> & UseGridBeamOptions & {
    borderRadius?: CssLength;
    children?: ReactNode;
    dividerStroke?: string;
    ref?: Ref<HTMLDivElement>;
    showDividers?: boolean;
    style?: GridBeamStyle;
};
export declare function GridBeam({ active, borderRadius, breathe, children, className, colorVariant, cols, dividerStroke, duration, ref, rows, showDividers, strength, style, theme, ...props }: GridBeamProps): import("react/jsx-runtime").JSX.Element;
export {};