# Signature Pad

Campo de assinatura com tinta que engrossa e afina como caneta, com desfazer e limpar.

- Nome no registry: `signature-pad`
- Tipo: componente
- Dependências npm: lucide-react, motion
- Demo: https://ui.visantlabs.com/c/signature-pad
- Categorias: controles, assinatura, formulario, contrato, aceite, desenho

## Quando usar

- Use quando: Coletar assinatura à mão em contrato, aceite ou comprovante de entrega, com desfazer e limpar
- Evite quando: Aceite simples de termos: checkbox do tema; confirmar pagamento, slide-to-confirm

## Instalar

```bash
npx shadcn@latest add @visant/signature-pad
```

## Usar

```tsx
<strokePath />
```

## API

### strokePath

O caminho SVG de um traço.

- `points: InkPoint[]`
- `width: "fine" | "medium" | "bold"`

### SignaturePad

- `className?: string`
- `defaultWidth?: "fine" | "medium" | "bold" = "medium"`
- `hint?: string = "Assine aqui"` — Dica sobre a linha antes do primeiro traço.
- `label?: string = "Campo de assinatura"` — Nome do campo pro leitor de tela.
- `onChange?: (strokes: InkStroke[]) => void` — Recebe os traços depois de cada mudança.
- `signer?: string` — Impresso embaixo da linha, como o nome de quem assina.