-
-
- AV
-
-
-
- AV
-
-
-
- AV
-
+
+
+
+
+ AV
+
+
+
+ AV
+
+
+
+ AV
+
+
+
+ AV
+
+
+
+ AV
+
+
+
+
+ AV
+
+
+ AV
+
+
+ AV
+
+
+ AV
+
+
+ AV
+
+
);
}
diff --git a/apps/ui/registry/default/particles/p-avatar-5.tsx b/apps/ui/registry/default/particles/p-avatar-5.tsx
index 13ca6396b..bfb4e6348 100644
--- a/apps/ui/registry/default/particles/p-avatar-5.tsx
+++ b/apps/ui/registry/default/particles/p-avatar-5.tsx
@@ -1,33 +1,36 @@
import {
Avatar,
AvatarFallback,
+ AvatarGroup,
+ AvatarGroupCount,
AvatarImage,
} from "@/registry/default/ui/avatar";
export default function Particle() {
return (
-
-
+
+
- U1
+ FK
-
+
- U2
+ NE
-
+
- U3
+ EW
-
+
+2
+
);
}
diff --git a/apps/ui/registry/default/particles/p-avatar-9.tsx b/apps/ui/registry/default/particles/p-avatar-9.tsx
index 89955462c..316574702 100644
--- a/apps/ui/registry/default/particles/p-avatar-9.tsx
+++ b/apps/ui/registry/default/particles/p-avatar-9.tsx
@@ -12,7 +12,7 @@ export default function Particle() {
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
/>
-
LT
+
LT
Online
-
+
-
+
-
- {member.initials}
-
+ {member.initials}
{member.label}
diff --git a/apps/ui/registry/default/particles/p-combobox-20.tsx b/apps/ui/registry/default/particles/p-combobox-20.tsx
index 04670f1f8..605335232 100644
--- a/apps/ui/registry/default/particles/p-combobox-20.tsx
+++ b/apps/ui/registry/default/particles/p-combobox-20.tsx
@@ -127,11 +127,9 @@ export default function Particle() {
className="flex items-center gap-2 p-1 ps-2 text-base sm:text-sm"
key={member.value}
>
-
+
-
- {member.initials}
-
+ {member.initials}
{member.label}
diff --git a/apps/ui/registry/default/particles/p-group-23.tsx b/apps/ui/registry/default/particles/p-group-23.tsx
index b65178eac..cd7aa9509 100644
--- a/apps/ui/registry/default/particles/p-group-23.tsx
+++ b/apps/ui/registry/default/particles/p-group-23.tsx
@@ -85,11 +85,9 @@ function MemberAvatar({
className?: string;
}) {
return (
-
+
{avatarUrl ? : null}
-
- {getInitials(name)}
-
+ {getInitials(name)}
);
}
diff --git a/apps/ui/registry/default/particles/p-select-19.tsx b/apps/ui/registry/default/particles/p-select-19.tsx
index 73d14a25a..716d89f41 100644
--- a/apps/ui/registry/default/particles/p-select-19.tsx
+++ b/apps/ui/registry/default/particles/p-select-19.tsx
@@ -46,11 +46,9 @@ export default function Particle() {
{(item) => (
-
+
-
- {item.initials}
-
+ {item.initials}
{item.label}
@@ -63,11 +61,9 @@ export default function Particle() {
{users.map((item) => (
-
+
-
- {item.initials}
-
+ {item.initials}
{item.label}
diff --git a/apps/ui/registry/default/particles/p-select-20.tsx b/apps/ui/registry/default/particles/p-select-20.tsx
index e84222afe..7ed36c047 100644
--- a/apps/ui/registry/default/particles/p-select-20.tsx
+++ b/apps/ui/registry/default/particles/p-select-20.tsx
@@ -47,7 +47,7 @@ export default function Particle() {
{(item) => (
-
+
{item.initials}
@@ -65,7 +65,7 @@ export default function Particle() {
{users.map((item) => (
-
+
{item.initials}
diff --git a/apps/ui/registry/default/particles/p-skeleton-1.tsx b/apps/ui/registry/default/particles/p-skeleton-1.tsx
index 50cec461e..f8b4d14f2 100644
--- a/apps/ui/registry/default/particles/p-skeleton-1.tsx
+++ b/apps/ui/registry/default/particles/p-skeleton-1.tsx
@@ -57,7 +57,7 @@ function UserCard({ delay, user }: { delay: number; user: (typeof users)[0] }) {
return (
<>
-
+
{user.fallback}
diff --git a/apps/ui/registry/default/ui/avatar.tsx b/apps/ui/registry/default/ui/avatar.tsx
index 1e9c551e0..7292973e5 100644
--- a/apps/ui/registry/default/ui/avatar.tsx
+++ b/apps/ui/registry/default/ui/avatar.tsx
@@ -4,6 +4,9 @@ import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
import type React from "react";
import { cn } from "@/registry/default/lib/utils";
+const AVATAR_GROUP_CUT =
+ "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\")";
+
export function Avatar({
className,
...props
@@ -11,7 +14,7 @@ export function Avatar({
return (
{
+ topmost?: "first" | "last";
+}
+
+export function AvatarGroup({
+ className,
+ style,
+ topmost = "first",
+ ...props
+}: AvatarGroupProps): React.ReactElement {
+ return (
+
+ );
+}
+
+export function AvatarGroupCount({
+ children,
+ className,
+ ...props
+}: AvatarPrimitive.Root.Props): React.ReactElement {
+ return (
+
+ {children}
+
+ );
+}
+
export { AvatarPrimitive };
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index 6cd9b954a..7f7cbcbfe 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -387,6 +387,15 @@ export const particles: ParticleItem[] = [
registryDependencies: ["@coss/avatar"],
type: "registry:block",
},
+ {
+ categories: categories("avatar"),
+ dependencies: ["lucide-react"],
+ description: "Avatar with user icon fallback",
+ files: [{ path: "particles/p-avatar-6.tsx", type: "registry:block" }],
+ name: "p-avatar-6",
+ registryDependencies: ["@coss/avatar"],
+ type: "registry:block",
+ },
{
categories: categories("avatar"),
description: "Avatars with different sizes",
@@ -395,6 +404,14 @@ export const particles: ParticleItem[] = [
registryDependencies: ["@coss/avatar"],
type: "registry:block",
},
+ {
+ categories: categories("avatar"),
+ description: "Avatars sized from a parent element",
+ files: [{ path: "particles/p-avatar-19.tsx", type: "registry:block" }],
+ name: "p-avatar-19",
+ registryDependencies: ["@coss/avatar"],
+ type: "registry:block",
+ },
{
categories: categories("avatar"),
description: "Avatars with different radii",
@@ -405,21 +422,28 @@ export const particles: ParticleItem[] = [
},
{
categories: categories("avatar"),
- description: "Overlapping avatar group",
- files: [{ path: "particles/p-avatar-5.tsx", type: "registry:block" }],
- name: "p-avatar-5",
+ description: "Avatar rendered as a button",
+ files: [{ path: "particles/p-avatar-17.tsx", type: "registry:block" }],
+ name: "p-avatar-17",
registryDependencies: ["@coss/avatar"],
type: "registry:block",
},
{
categories: categories("avatar"),
- dependencies: ["lucide-react"],
- description: "Avatar with user icon fallback",
- files: [{ path: "particles/p-avatar-6.tsx", type: "registry:block" }],
- name: "p-avatar-6",
+ description: "Avatar rendered as a link",
+ files: [{ path: "particles/p-avatar-18.tsx", type: "registry:block" }],
+ name: "p-avatar-18",
registryDependencies: ["@coss/avatar"],
type: "registry:block",
},
+ {
+ categories: categories("avatar"),
+ description: "Avatar with a tooltip",
+ files: [{ path: "particles/p-avatar-20.tsx", type: "registry:block" }],
+ name: "p-avatar-20",
+ registryDependencies: ["@coss/avatar", "@coss/tooltip"],
+ type: "registry:block",
+ },
{
categories: categories("avatar"),
description: "Avatar with emerald status dot",
@@ -468,6 +492,38 @@ export const particles: ParticleItem[] = [
registryDependencies: ["@coss/avatar"],
type: "registry:block",
},
+ {
+ categories: categories("avatar"),
+ description: "Overlapping avatar group",
+ files: [{ path: "particles/p-avatar-5.tsx", type: "registry:block" }],
+ name: "p-avatar-5",
+ registryDependencies: ["@coss/avatar"],
+ type: "registry:block",
+ },
+ {
+ categories: categories("avatar"),
+ description: "Avatar group with a count and the last avatar on top",
+ files: [{ path: "particles/p-avatar-16.tsx", type: "registry:block" }],
+ name: "p-avatar-16",
+ registryDependencies: ["@coss/avatar"],
+ type: "registry:block",
+ },
+ {
+ categories: categories("avatar"),
+ description: "Avatar group with the last avatar on top",
+ files: [{ path: "particles/p-avatar-15.tsx", type: "registry:block" }],
+ name: "p-avatar-15",
+ registryDependencies: ["@coss/avatar"],
+ type: "registry:block",
+ },
+ {
+ categories: categories("avatar"),
+ description: "Avatar group with a tooltip per member",
+ files: [{ path: "particles/p-avatar-21.tsx", type: "registry:block" }],
+ name: "p-avatar-21",
+ registryDependencies: ["@coss/avatar", "@coss/tooltip"],
+ type: "registry:block",
+ },
{
categories: categories("avatar"),
description: "Small overlapping avatar group",
diff --git a/packages/ui/src/components/avatar.tsx b/packages/ui/src/components/avatar.tsx
index 6f658c559..23538db7b 100644
--- a/packages/ui/src/components/avatar.tsx
+++ b/packages/ui/src/components/avatar.tsx
@@ -4,6 +4,9 @@ import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
import { cn } from "@coss/ui/lib/utils";
import type React from "react";
+const AVATAR_GROUP_CUT =
+ "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E\")";
+
export function Avatar({
className,
...props
@@ -11,7 +14,7 @@ export function Avatar({
return (
{
+ topmost?: "first" | "last";
+}
+
+export function AvatarGroup({
+ className,
+ style,
+ topmost = "first",
+ ...props
+}: AvatarGroupProps): React.ReactElement {
+ return (
+
+ );
+}
+
+export function AvatarGroupCount({
+ children,
+ className,
+ ...props
+}: AvatarPrimitive.Root.Props): React.ReactElement {
+ return (
+
+ {children}
+
+ );
+}
+
export { AvatarPrimitive };