Richie
d915443b8c
Token foundation: fix 16 palette colours to match official ADS_COLORS, add 5 new palettes (teal, brown, purple, fuchsia, yellow), realign semantic tokens (primary=navy, info=bright blue), fix border radii to 8px base, add responsive heading typography. Component migration: swap primary/info references across all existing components, update Button (44px/semibold), Switch (green/compact), Chip (30px/8px radius + colour variants), SideNav (80px rail), Tag (11 colours). New components: SideNav, TopBar, Avatar, Tabs, PageHeader, Slider, RangeSlider, FileInput, DataTable, List, Autocomplete. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import { forwardRef, type HTMLAttributes } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
|
|
initials: string
|
|
src?: string
|
|
alt?: string
|
|
size?: 'sm' | 'default' | 'lg'
|
|
}
|
|
|
|
const sizeStyles = {
|
|
sm: 'size-8 text-caption',
|
|
default: 'size-10 text-body',
|
|
lg: 'size-12 text-[18px]',
|
|
}
|
|
|
|
export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
|
|
({ initials, src, alt, size = 'default', className, ...props }, ref) => {
|
|
const label = alt || initials
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
role="img"
|
|
aria-label={label}
|
|
className={cn(
|
|
'inline-flex shrink-0 items-center justify-center rounded-full bg-avatar text-avatar-text',
|
|
sizeStyles[size],
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{src ? (
|
|
<img
|
|
src={src}
|
|
alt={label}
|
|
className="size-full rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
initials.slice(0, 2).toUpperCase()
|
|
)}
|
|
</div>
|
|
)
|
|
},
|
|
)
|
|
Avatar.displayName = 'Avatar'
|