# XWUIStoryRing

A single avatar wrapped in a gradient-bordered ring - the Instagram / Facebook story / WhatsApp status / Telegram story marker - composed from XWUIAvatar with a truncated label below. The visual is driven by `data.state`: `unviewed` shows a vivid gradient, `viewed` a muted grey ring, `live` a pulsing red ring with a LIVE badge, and `your-own` adds a "+" overlay. Pass `data.label` (required) plus `data.avatar` and an `onSelect` handler; tune `conf_comp.size`, `conf_comp.ringThickness`, `conf_comp.unviewedGradient`, and `conf_comp.labelMaxChars`. Call `setState()` to switch states at runtime. Used standalone in chat/post headers or composed into XWUIStoryRingStrip.

## Basic Usage

A single unviewed story ring for "Sarah Chen" using the XWUIAvatar initials fallback.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A single unviewed story ring for Sarah Chen with a vivid gradient border and initials avatar.
```

## State Variants

Three rings comparing the viewed, live, and your-own states at a glance.

```example
file: examples/StateVariants.ts
html: examples/StateVariants.html
title: State Variants
description: Viewed, live, and your-own story rings rendered side by side to compare their state-driven borders and badges.
```

## Avatar Ring

An unviewed ring with a loaded avatar image, enlarged size, and a thicker border.

```example
file: examples/AvatarRing.ts
html: examples/AvatarRing.html
title: Avatar Ring
description: A 96px unviewed story ring using an avatar image and a thicker gradient border set through the component configuration.
```

```api
```