feat: add stacked-avatar component with tooltip

[Raju-kadel-27]

This might be useful while rendering multiple recipients with avatars in react-table for investor updates or maybe displaying recipients during e-signing process.

Example usage :

import { AvatarStack } from "@/components/ui/avatar-stack";

const MyComponent = () => {
 const avatars = [
  {
    name: "John Doe",
    image: "https://avatars.githubusercontent.com/u/54895192?v=4",
  },
  {
    name: "Jane Smith",
    image: "https://avatars.githubusercontent.com/u/54895192?v=4",
  },
  {
    name: "Alice Johnson",
    image: "https://avatars.githubusercontent.com/u/54895192?v=4",
  },
  {
    name: "Den Brown",
    image: "https://avatars.githubusercontent.com/u/54895192?v=4",
  },
  {
    name: "Jharna Brown",
    image: "https://avatars.githubusercontent.com/u/54895192?v=4",
  },
  {
    name: "Robin Brown",
    image: "https://avatars.githubusercontent.com/u/54895192?v=4",
  },
  {
    name: "Aakash Brown",
    image: "https://avatars.githubusercontent.com/u/54895192?v=4",
  },
  {
    name: "Bibek Brown",
    image: "https://avatars.githubusercontent.com/u/54895192?v=4",
  },
];

  return (
    <div>
      <h2>Avatar Stack Example</h2>
      <AvatarStack 
        avatars={avatars} 
        maxAvatarsAmount={3} 
        orientation="horizontal" 
        spacing="md" 
      />
    </div>
  );
};

export default MyComponent;

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏