feat: update avatar component

.gitignore

@@ -41,4 +41,5 @@ Thumbs.db
 shadcn-ui
 
 nitro-main
-router-main
+router-main
+base-ui

packages/core/src/__registry__/blocks.ts

@@ -164,7 +164,7 @@ export default Cards;
 import { BookIcon, ContrastIcon, LanguagesIcon, LogOutIcon, SettingsIcon, User2Icon, Users2Icon } from "lucide-react";
 
 import { cn } from "@dotui/registry/lib/utils";
-import { Avatar } from "@dotui/registry/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@dotui/registry/ui/avatar";
 import { Card, CardContent, CardHeader } from "@dotui/registry/ui/card";
 import { ListBox, ListBoxItem, ListBoxSection, ListBoxSectionHeader } from "@dotui/registry/ui/list-box";
 import { Separator } from "@dotui/registry/ui/separator";
@@ -173,7 +173,10 @@ export function AccountMenu({ className, ...props }: React.ComponentProps<"div">
 	return (
 		<Card className={cn("min-w-56 gap-0 py-0", className)} {...props}>
 			<CardHeader className="flex w-full items-center border-b px-4 py-3">
-				<Avatar src="https://github.com/mehdibha.png" size="sm" />
+				<Avatar size="sm">
+					<AvatarImage src="https://github.com/mehdibha.png" alt="mehdibha" />
+					<AvatarFallback>M</AvatarFallback>
+				</Avatar>
 				<div className="w-full text-sm">
 					<p className="font-semibold">mehdibha</p>
 					<p className="text-fg-muted">
@@ -716,7 +719,7 @@ export function Filters({ className, ...props }: React.ComponentProps<"div">) {
 import { PlusCircleIcon } from "lucide-react";
 
 import { ExternalLinkIcon } from "@dotui/registry/icons";
-import { Avatar } from "@dotui/registry/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@dotui/registry/ui/avatar";
 import { Button } from "@dotui/registry/ui/button";
 import {
 	Card,
@@ -795,7 +798,10 @@ export function InviteMembers(props: React.ComponentProps<"div">) {
 							{teamMembers.map((member) => (
 								<div key={member.name} className="flex items-center justify-between gap-2">
 									<div className="flex items-center gap-2">
-										<Avatar src={member.avatar} size="sm" />
+										<Avatar size="sm">
+											<AvatarImage src={member.avatar} alt={member.name} />
+											<AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
+										</Avatar>
 										<div className="text-sm">
 											<p>{member.name}</p>
 											<p className="text-fg-muted">{member.role}</p>
@@ -905,7 +911,7 @@ export function LoginForm(props: React.ComponentProps<"div">) {
 				content: `import React from "react";
 
 import { cn } from "@dotui/registry/lib/utils";
-import { Avatar } from "@dotui/registry/ui/avatar";
+import { Avatar, AvatarFallback, AvatarImage } from "@dotui/registry/ui/avatar";
 import { Badge } from "@dotui/registry/ui/badge";
 import { Button } from "@dotui/registry/ui/button";
 import { Card, CardAction, CardContent, CardHeader, CardTitle } from "@dotui/registry/ui/card";
@@ -952,14 +958,15 @@ export function Notifications({ className, ...props }: React.ComponentProps<"div
 											<Separator />
 											<ListBoxItem textValue={notification.text}>
 												<div className="flex items-start gap-3 py-2">
-													<Avatar
-														src={notification.user.avatar}
-														fallback={notification.user.name
-															.split(" ")
-															.map((n) => n[0])
-															.join("")}
-														size="md"
-													/>
+													<Avatar size="md">
+														<AvatarImage src={notification.user.avatar} alt={notification.user.name} />
+														<AvatarFallback>
+															{notification.user.name
+																.split(" ")
+																.map((n) => n[0])
+																.join("")}
+														</AvatarFallback>
+													</Avatar>
 													<div className="flex-1">
 														<p className="text-sm">
 															<span className="font-medium">{notification.user.name}</span>{" "}