"use client"; import { motion, type SVGMotionProps, useReducedMotion } from "motion/react"; import { useState } from "react"; interface ChevronsProps extends Omit, "animate"> { /** * Whether to trigger the caret animation. * @default false */ animate?: boolean; /** * Play the animation when the icon is hovered. * @default true */ animateOnHover?: boolean; /** * Any valid CSS color, mapped to the SVG `stroke`. * @default "currentColor" */ color?: string; /** * Repeat the animation indefinitely. * @default false */ loop?: boolean; /** * Icon size in pixels (applied to both width and height). * @default 16 */ size?: number | string; } const TOP_END = [0, 0, 0.15, 1, 1, 0.85, 0, 0.15, 1]; const BOTTOM_END = [0, 1, 1, 0.85, 0, 0, 0, 1, 1]; const TIMES_END = [0, 0.16, 0.21, 0.36, 0.51, 0.57, 0.71, 0.85, 1]; function Chevrons({ size = 16, color = "currentColor", animate = false, animateOnHover = true, loop = false, className, onMouseEnter, onMouseLeave, ...props }: ChevronsProps) { const [isHovered, setIsHovered] = useState(false); const reducedMotion = useReducedMotion(); const isTriggered = animate || (animateOnHover && isHovered); if (reducedMotion) { return ( ); } return ( { setIsHovered(true); if (typeof onMouseEnter === "function") { onMouseEnter(e); } }} onMouseLeave={(e) => { setIsHovered(false); if (typeof onMouseLeave === "function") { onMouseLeave(e); } }} stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.25} viewBox="0 0 16 16" width={size} xmlns="http://www.w3.org/2000/svg" {...props} > ); } export { Chevrons, Chevrons as ChevronsIcon, type ChevronsProps, type ChevronsProps as ChevronsIconProps, };