import { VariantProps } from 'class-variance-authority';
import { ComponentProps } from 'react';
export declare const statusDotVariance: (props?: ({
    status?: "default" | "success" | "warning" | "destructive" | "primary" | null | undefined;
    size?: "sm" | "lg" | "md" | null | undefined;
    appearance?: "solid" | "glow" | null | undefined;
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
export interface StatusDotProps extends ComponentProps<"div">, VariantProps<typeof statusDotVariance> {
    /**
     * Screen reader label for the status dot.
     * If not provided, a default label will be generated based on the status.
     */
    "aria-label"?: string;
    /**
     * Whether the status dot should be hidden from screen readers.
     * Use this when the status is already described by surrounding text.
     *
     * @default false
     */
    "aria-hidden"?: boolean;
}
/**
 * A small visual indicator used to represent status, state, or activity.
 * Status dots are commonly used in badges, lists, and other UI components
 * to provide quick visual feedback about an item's state.
 *
 * @example
 * ```tsx
 * // Basic status dot with automatic aria-label
 * <StatusDot status="success" />
 * ```
 *
 * @example
 * ```tsx
 * // With custom aria-label
 * <StatusDot status="success" aria-label="Task completed successfully" />
 * ```
 *
 * @example
 * ```tsx
 * // Hidden from screen readers when status is described elsewhere
 * <StatusDot status="success" aria-hidden />
 * ```
 *
 * @example
 * ```tsx
 * // Different statuses
 * <StatusDot status="primary" />
 * <StatusDot status="warning" />
 * <StatusDot status="destructive" />
 * ```
 *
 * @example
 * ```tsx
 * // Different sizes
 * <StatusDot status="success" size="sm" />
 * <StatusDot status="success" size="md" />
 * <StatusDot status="success" size="lg" />
 * ```
 *
 * @example
 * ```tsx
 * // Glow appearance for emphasis
 * <StatusDot status="success" appearance="glow" />
 * ```
 *
 * @example
 * ```tsx
 * // Custom colors
 * <StatusDot status={null} className="bg-blue-500" aria-label="In progress" />
 * <StatusDot status={null} appearance="glow" className="bg-purple-500 [--glow-color:theme(colors.purple.500)]" aria-label="Active" />
 * ```
 *
 * @example
 * ```tsx
 * // Custom size
 * <StatusDot size={null} className="size-10" />
 * <StatusDot size={null} appearance="glow" className="size-10 [--glow-size:4px]" />
 * ```
 */
export declare const StatusDot: ({ className, status, size, appearance, "aria-label": ariaLabel, "aria-hidden": ariaHidden, ...props }: StatusDotProps) => import("react").JSX.Element;