# Other Components

> **Props y API:** Disponibles vía MCP tool `widgets-get-component-props`. Este archivo documenta solo convenciones, gotchas y patrones específicos del proyecto.

---

## DCurrencyText

Displays formatted currency using DContext settings. Receives `number`, formats automatically.

```tsx
<DCurrencyText value={1234.56} />  // → <span>$1,234.56</span>
```

For formatting multiple values or in logic, use `useFormatCurrency` hook instead:
```tsx
const { format, values } = useFormatCurrency(100, 234.12);
// values = ['$100.00', '$234.12'], format(500) → '$500.00'
```

---

## DTimeline

Vertical timeline with icons and status colors. Icons use **PascalCase** (Lucide).

```tsx
const items: DTimelineItem[] = [
  { title: 'Payment Received', time: 'Oct 15, 2024', icon: 'CheckCircle', status: 'success' },
  { title: 'Payment Pending', time: 'Nov 15, 2024', icon: 'Clock', status: 'warning' },
];
<DTimeline items={items} />
```

Status colors: `success` (green), `warning` (orange), `danger` (red), `info` (blue).

**CRITICAL:** Always copy arrays before sorting: `[...payments].sort(...)` to avoid mutation.

---

## DProgress

Uses `currentValue` (not `value`). Pass raw values — component calculates percentage.

```tsx
<DProgress currentValue={completedTasks} maxValue={totalTasks} />
```

Use `enableStripedAnimation` for ongoing processes. Default height is fine — if custom, use rem (min 1rem).

---

## DListGroup

Use `DListGroup.Item` compound pattern. `flush` removes borders (for embedding in DCard).

```tsx
<DListGroup>
  <DListGroup.Item iconStart="CreditCard" iconEnd="ChevronRight" onClick={handleClick}>
    Savings Account
  </DListGroup.Item>
</DListGroup>
```

---

## DAvatar

```tsx
<DAvatar name="John Doe" useNameAsInitials />
```