# @cloud-ru/ds-hot-spot

> Пульсирующая точка-индикатор, привязанная к целевому элементу — подсказка внимания и обучающий акцент.

Docs: /snack-v2/components/hot-spot/

## Установка

```sh
pnpm add @cloud-ru/ds-hot-spot
```

## Когда использовать

- Подсветка новой функции в меню или тулбаре.
- Индикатор непрочитанного статуса рядом с пунктом навигации.
- Шаг обучающего онбординга — точка указывает на следующее действие.

Когда **не** нужен `HotSpot`: для количественных бейджей используйте `Counter`; для постоянных статусов — `Tag`.

## API

### HotSpot
| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| `appearance` | `blue \| green \| orange \| pink \| primary \| red \| violet \| yellow` | `primary` | no | Внешний вид |
| `children` | `ReactNode` | — | no | Вложенный контент |
| `className` | `string` | — | no |  |
| `data-test-id` | `string` | — | no |  |
| `dotRender` | `((dot: ReactNode) => ReactNode)` | — | no | Рендер функция для dot |
| `duration` | `string` | `2s` | no | Время анимации пульсации |
| `enabled` | `boolean` | `true` | no | Управление состоянием отрисовки |
| `offsetX` | `string \| number` | `0` | no | Смещение dot по оси X (ось направлена вправо) |
| `offsetY` | `string \| number` | `0` | no | Смещение dot по оси Y (ось направлена вниз) |
| `placement` | `center \| center-bottom \| center-top \| left \| left-bottom \| left-top \| right \| right-bottom \| right-top` | `right-top` | no | Положение относительно children. |
| `pulse` | `boolean` | `true` | no | Анимация пульсации |
| `wrapperClassName` | `string` | — | no |  |

#### Related types
- `Appearance` = `blue | green | orange | pink | primary | red | violet | yellow`
- `Placement` = `center | center-bottom | center-top | left | left-bottom | left-top | right | right-bottom | right-top`

## Примеры

### NoPulse

```tsx
import { Button } from '@cloud-ru/ds-button';
import { HotSpot } from '@cloud-ru/ds-hot-spot';

export function NoPulse() {
  return (
    <HotSpot placement='right' pulse={false}>
      <Button label='Settings' view='outline' />
    </HotSpot>
  );
}
```

### OnButton

```tsx
import { Button } from '@cloud-ru/ds-button';
import { HotSpot } from '@cloud-ru/ds-hot-spot';

export function OnButton() {
  return (
    <HotSpot placement='right-top'>
      <Button label='Уведомления' view='outline' />
    </HotSpot>
  );
}
```

### RedAccent

```tsx
import { Button } from '@cloud-ru/ds-button';
import { HotSpot } from '@cloud-ru/ds-hot-spot';

export function RedAccent() {
  return (
    <HotSpot appearance='red' placement='right-top'>
      <Button label='Ошибки' view='outline' />
    </HotSpot>
  );
}
```

### Standalone

```tsx
import { HotSpot } from '@cloud-ru/ds-hot-spot';

export function Standalone() {
  return <HotSpot appearance='green' />;
}
```