@loke/design-system/dist/components/avatar/index.mjs

A design system with individually importable components

import{cn}from"@loke/design-system/cn";import*as AvatarPrimitive from"@loke/ui/avatar";import{jsx}from"react/jsx-runtime";function Avatar({className,size="default",...props}){return jsx(AvatarPrimitive.Root,{className:cn("group/avatar relative flex size-8 shrink-0 select-none rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6",className),"data-size":size,"data-slot":"avatar",...props})}function AvatarImage({className,...props}){return jsx(AvatarPrimitive.Image,{className:cn("!m-0 aspect-square size-full overflow-hidden rounded-full",className),"data-slot":"avatar-image",...props})}function AvatarFallback({className,...props}){return jsx(AvatarPrimitive.Fallback,{className:cn("flex size-full items-center justify-center overflow-hidden rounded-full bg-muted text-muted-foreground text-sm group-data-[size=sm]/avatar:text-xs",className),"data-slot":"avatar-fallback",...props})}function AvatarBadge({className,...props}){return jsx("span",{className:cn("absolute right-0 bottom-0 z-10 inline-flex select-none items-center justify-center rounded-full bg-primary text-primary-foreground ring-2 ring-background","group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden","group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2","group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",className),"data-slot":"avatar-badge",...props})}function AvatarGroup({className,...props}){return jsx("div",{className:cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",className),"data-slot":"avatar-group",...props})}function AvatarGroupCount({className,...props}){return jsx("div",{className:cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground text-sm ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",className),"data-slot":"avatar-group-count",...props})}export{AvatarImage,AvatarGroupCount,AvatarGroup,AvatarFallback,AvatarBadge,Avatar};