# Auth Button

O canto da conta nos três estados. Enquanto a sessão não responde ele não escreve “Entrar”, e não muda de tamanho quando ela chega.

- Nome no registry: `auth-button`
- Tipo: componente
- Dependências npm: lucide-react
- Demo: https://ui.visantlabs.com/c/auth-button
- Categorias: controles, conta, sessao, menu

## Quando usar

- Use quando: Canto da conta no cabeçalho do app: entrar, carregando e avatar com menu, sem pular de tamanho
- Evite quando: Tela de cadastro ou edição dos dados da conta: profile-form

## Instalar

```bash
npx shadcn@latest add @visant/auth-button
```

## Usar

```tsx
<AuthButton
  hint="signed-in"
  status="loading"
/>
```

## API

### AuthButton

- `onSignOut: () => void`
- `status: "loading" | "signed-out" | "signed-in"` — Os três estados de verdade. `loading` nunca desenha texto de conta.
- `account?: AuthAccount` — Só faz sentido em `signed-in`.
- `align?: "start" | "end" = "end"`
- `className?: string`
- `hint?: "signed-out" | "signed-in" = "signed-out"` — Palpite de forma para o esqueleto. Não vira texto em hipótese nenhuma.
- `items?: AuthMenuItem[]` — Itens extras do menu da conta (perfil, cobrança, equipe…).
- `labels?: Partial<{ signIn: string; signOut: string; loading: string; providers: string; }>`
- `onSignIn?: () => void`
- `providers?: AuthProviderOption[]` — Com provedores, o clique abre a lista. Sem eles, chama `onSignIn`.
- `side?: "top" | "bottom" = "bottom"` — De que lado do gatilho o painel abre. `"bottom"` (padrão) é o canto do header, que foi onde a peça nasceu.

### AuthBadge

Selo de "entrou" — opcional, para quem quer confirmar a entrada sem toast. Fica aqui e não numa peça própria porque só existe em função deste botão.

- `className?: string`