import React from "react";
/** Direction for the fade gradient mask */
export type DotPatternFadeDirection = "radial" | "top" | "bottom" | "left" | "right";
export interface DotPatternProps extends React.HTMLAttributes<HTMLDivElement> {
    /**
     * Distance between dots in pixels (center to center).
     * @default 20
     */
    spacing?: number;
    /**
     * Radius of each dot in pixels.
     * @default 1
     */
    dotSize?: number;
    /**
     * Fill color of the dots.
     * Accepts any valid CSS color value or CSS variable.
     * @default "var(--color-border)"
     */
    color?: string;
    /**
     * Whether to apply a gradient mask that fades the pattern at the edges.
     * @default true
     */
    fade?: boolean;
    /**
     * Direction of the fade gradient.
     * - "radial" fades from center outward
     * - "top" | "bottom" | "left" | "right" fades toward that edge
     * @default "radial"
     */
    fadeDirection?: DotPatternFadeDirection;
    /**
     * Size of the fade area as a percentage (0-100).
     * Higher values create a larger transparent region.
     * @default 50
     */
    fadeSize?: number;
    /**
     * Whether to apply a subtle pulse animation to the dots.
     * Respects prefers-reduced-motion automatically.
     * @default false
     */
    animated?: boolean;
    /** Additional className for style overrides (shadcn pattern). */
    className?: string;
}
