[Task] Implement Avatar

[soroushm]

Task Description ✏️

Implement the Avatar component as part of the design system epic #40.
Avatar provides a consistent way to display user profile images, initials, or icons. It will consume theme tokens for colors, spacing, and sizing, and support different shapes, fallback content, and optional ring outlines.

Acceptance Criteria ✅

• Avatar component implemented using styled(Box) or styled(View) as the base.
• Supports src and srcSet props for image display.
• Supports alt prop applied to the underlying img element for accessibility.
• Supports children for fallback text or icon rendering when no image is provided.
• Supports imgProps to pass attributes/events to the img element (e.g. error handling).
• Supports variant prop (circular, rounded, square, string) mapped to theme tokens for border radius.
• Supports optional ring prop with configurable ringColor using theme tokens (e.g. { outlineWidth, outlineColor, outlineOffset, outlineStyle }).
• Supports size prop (small, medium, large) mapped to theme sizing tokens.
• No raw CSS values — all styles derived from theme tokens.
• Unit tests verify image rendering, fallback children, alt text, variant shapes, and ring styles.
• Storybook stories demonstrate image, fallback, variants, sizes, and ring outline states.
• Code passes linting, typing, and CI checks.

Dependencies 🔗

No response

Definition of Ready (DoR) 📋

Task is independent and scoped to the Avatar component.

• Base primitive and theme tokens are implemented and available.
• Props to be supported by Avatar are agreed upon (src, srcSet, alt, children, imgProps, variant, ring, size).

Definition of Done (DoD) 🏁

• Avatar component implemented with all props working correctly.
• Image, fallback, variant shapes, size, and ring outline render correctly.
• Unit tests cover all states and props.
• Storybook stories demonstrate all variations.
• Code reviewed, linted, typed, and passes CI checks.
• Documentation updated in Storybook for Avatar usage.
• Component is ready for reuse across the design system.

Additional Notes or Resources 📎

• MDN Docs on img element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Custom ring style, e.g. highlight color or outline. Example: { outlineWidth: "2px", outlineColor: "colorPalette.500", outlineOffset: "2px", outlineStyle: "solid" }