/** * @fileoverview Card with a mouse-following spotlight gradient highlight. * @author Saasflare™ * Renders a card with a radial gradient that tracks the cursor position, * creating a spotlight effect. Built on top of the Saasflare Card primitive. * @module packages/ui/components/ui/spotlight-card * @package ui * * @component * @example * import { SpotlightCard } from '@saasflare/ui'; * *

Feature Title

*

Feature description text

*
* * @example * // Custom spotlight color * *

Highlighted content

*
*/ import { type ReactNode } from "react"; import { type SaasflareComponentProps } from "../../providers"; /** Motion-reserved DOM handlers that collide with Motion's own props. */ type MotionConflicts = "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd"; /** Props for the SpotlightCard component. */ export interface SpotlightCardProps extends Omit, MotionConflicts | keyof SaasflareComponentProps>, SaasflareComponentProps { /** Card content. */ children: ReactNode; /** Spotlight gradient color. Default: `"var(--primary)"` */ spotlightColor?: string; /** Spotlight diameter in pixels. Default: `250` */ spotlightSize?: number; /** Spotlight opacity (0–1). Default: `0.08` */ spotlightOpacity?: number; /** Additional class names. */ className?: string; } /** * Card with a radial gradient that follows the mouse cursor. * * - Gradient overlay tracks the mouse within the card boundaries * - Fades out when the mouse leaves * - Uses CSS for the gradient (no canvas, no heavy re-renders) * - Falls back to a plain card when motion is disabled (`animated={false}` or reduced motion) * * @component * @package ui */ export declare function SpotlightCard({ children, spotlightColor, spotlightSize, spotlightOpacity, className, surface, radius, animated, iconWeight, ...props }: SpotlightCardProps): import("react/jsx-runtime").JSX.Element; export {};