# BulletedList

BulletedList renders a list of items with customizable markers (bullets or numbers) and flexible item rendering.

---

## Installation

```bash
npm install @cleartrip/ct-design-bulleted-list
# or
pnpm add @cleartrip/ct-design-bulleted-list
```

### Peer dependencies

```bash
# Required for all targets
npm install react

# Web only
npm install react-dom

# React Native only
npm install react-native
```

---

## Usage

### Basic ordered list

```tsx
import { BulletedList } from '@cleartrip/ct-design-bulleted-list';

const items = [
  { id: '1', title: 'First Item', content: 'Description here' },
  { id: '2', title: 'Second Item', content: 'Another description' },
  { id: '3', title: 'Third Item', content: 'More content' },
];

function Example() {
  return (
    <BulletedList
      list={items}
      listType="ol"
      renderItem={(item, index) => (
        <div>
          <strong>{item.title}</strong>
          <p>{item.content}</p>
        </div>
      )}
    />
  );
}
```

### Bullet list (unordered)

```tsx
<BulletedList
  list={items}
  listType="ul"
  renderItem={(item) => <span>{item.title}</span>}
/>
```

### Style overrides

```tsx
<BulletedList
  list={items}
  listType="ol"
  renderItem={(item) => <span>{item.title}</span>}
  styleConfig={{
    itemWrapper: [{ padding: 12, borderBottom: '1px solid #eee' }],
    marker: [{ color: '#007bff', fontWeight: 'bold' }],
  }}
/>
```

---

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `list` | `T[]` | — | Yes | Items to render in the list |
| `renderItem` | `(item: T, index: number) => ReactNode` | — | Yes | Callback that renders each list item |
| `listType` | `'ol' \| 'ul'` | `'ol'` | No | Type of marker to display |
| `styleConfig` | `IBulletedListStyleConfig` | — | No | Style configuration overrides |

---

## List Types

- `'ol'` — Numbered list (1. 2. 3.)
- `'ul'` — Bullet list (•)

---

## styleConfig

The `styleConfig` interface allows fine-grained style customization:

```ts
interface IBulletedListStyleConfig {
  itemWrapper?: Styles[];
  placeHolder?: Styles[];
  itemContent?: Styles[];
  marker?: Styles[];
}
```

### Slots

| Slot | Description |
|------|-------------|
| `itemWrapper` | Styles for the outer row container wrapping each list item |
| `placeHolder` | Styles for the marker container (bullet/number placeholder area) |
| `itemContent` | Styles for the content container where renderItem output is displayed |
| `marker` | Styles for the marker row (number + dot on ordered lists) |

---

## Item Keys

- Items with an `id` property use that as the React key
- Items without `id` use the array index as the key
- For optimal performance, provide unique `id` values for each item

---

## Accessibility

- Ordered lists use semantic `<ol>` elements
- Unordered lists use semantic `<ul>` elements
- Each item is wrapped in `<li>` elements for proper screen reader support
- Consider adding ARIA labels for complex list items

---

## Migration

If migrating from a previous version:

```diff
- import { BulletedList } from 'old-package';
+ import { BulletedList } from '@cleartrip/ct-design-bulleted-list';
```