# Setup — tenda-components

## Instalação

```bash
npm install tenda-components
```

## Configuração obrigatória

Envolva sua aplicação com o `ThemeProvider` e importe o CSS global no ponto de entrada da aplicação:

```tsx
import { ThemeProvider } from 'tenda-components'
import 'tenda-components/style.css'

export function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  )
}
```

> O `ThemeProvider` é obrigatório. Sem ele, os tokens de cor e tema não funcionam e os componentes podem não renderizar corretamente.

> O import do CSS global é obrigatório. Sem ele, nenhum estilo será aplicado.

## Requisitos

- React 19+
- Node.js 20+

## Importação de componentes

Todos os componentes são exportados do pacote raiz:

```tsx
import { Button, TextField, Select } from 'tenda-components'
```

Não importe de caminhos internos como `tenda-components/dist/...`.

## Tema

Use o hook `useTheme` para alternar entre modo claro e escuro:

```tsx
import { useTheme } from 'tenda-components'

export function ThemeToggle() {
  const { theme, setTheme } = useTheme()

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      {theme === 'light' ? 'Modo escuro' : 'Modo claro'}
    </button>
  )
}
```

O tema padrão é `'light'`. Os valores possíveis são `'light'` e `'dark'`.