# @tenda/ds-tenda

Design System oficial da Tenda — biblioteca de componentes React.

## Requisitos

- React 19+
- Node.js 20+

## Instalação

```bash
npm install @tenda/ds-tenda
```

## Configuração

Envolva sua aplicação com o `ThemeProvider` e importe o CSS global:

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

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

## Uso

```tsx
import { Button, IconButton, TextField } from '@tenda/ds-tenda'

export function Example() {
  return (
    <div>
      <Button variant="primary" shape="rectangle-solid" size="md">
        Confirmar
      </Button>

      <IconButton variant="accent" shape="circle-solid" size="md" aria-label="Fechar" />

      <TextField label="Nome" placeholder="Digite seu nome" />
    </div>
  )
}
```

## Componentes

| Componente           | Descrição                                  |
| -------------------- | ------------------------------------------ |
| `Accordion`          | Painel expansível de conteúdo              |
| `AlertBanner`        | Faixa de alerta contextual                 |
| `AutoCompleteSelect` | Select com busca e autocomplete            |
| `Avatar`             | Representação visual de usuário            |
| `Badge`              | Indicador numérico ou de status            |
| `BigNumber`          | Exibição de métricas em destaque           |
| `BottomNavigation`   | Navegação inferior para mobile             |
| `BottomSheet`        | Painel deslizante inferior                 |
| `Breadcrumbs`        | Trilha de navegação hierárquica            |
| `Button`             | Botão de ação com variantes e formas       |
| `Card`               | Contêiner de conteúdo agrupado             |
| `Carousel`           | Exibição de itens em carrossel             |
| `BarChart`           | Gráfico de barras                          |
| `LineChart`          | Gráfico de linhas                          |
| `LineBarAreaChart`   | Gráfico combinado de linhas, barras e área |
| `PieChart`           | Gráfico de pizza                           |
| `Checkbox`           | Caixa de seleção individual                |
| `CheckboxGroup`      | Grupo de checkboxes relacionados           |
| `Chip`               | Rótulo compacto interativo                 |
| `ChipsTextField`     | Campo de texto com chips                   |
| `Counter`            | Controle numérico incremental              |
| `DateSelector`       | Seletor de data                            |
| `Divider`            | Separador visual de conteúdo               |
| `Drawer`             | Painel lateral deslizante                  |
| `EmptyState`         | Estado vazio com mensagem ilustrada        |
| `FileUploader`       | Upload de arquivos com drag and drop       |
| `IconButton`         | Botão compacto baseado em ícone            |
| `Link`               | Link com variantes de estilo               |
| `Modal`              | Janela de diálogo sobreposta               |
| `OtpInput`           | Campo de entrada para códigos OTP          |
| `PageControl`        | Indicador de páginas (dots)                |
| `Pagination`         | Navegação entre páginas                    |
| `Popover`            | Sobreposição flutuante de conteúdo         |
| `ProgressBar`        | Barra de progresso linear                  |
| `ProgressIndicator`  | Indicador de progresso circular            |
| `RadioButton`        | Botão de seleção única                     |
| `RadioGroup`         | Grupo de radio buttons relacionados        |
| `SearchField`        | Campo de busca                             |
| `Select`             | Seletor de opções                          |
| `SideNavigation`     | Menu lateral de navegação                  |
| `Skeleton`           | Placeholder de carregamento                |
| `Slider`             | Controle deslizante de valor               |
| `StatusLight`        | Indicador de status por cor                |
| `Switch`             | Alternador ligado/desligado                |
| `Table`              | Tabela de dados com ações                  |
| `Tabs`               | Navegação por abas                         |
| `Tag`                | Etiqueta de categoria ou status            |
| `TextArea`           | Campo de texto multilinha                  |
| `TextField`          | Campo de texto de linha única              |
| `Toast`              | Notificação temporária                     |
| `Tooltip`            | Dica flutuante ao passar o mouse           |
| `TreeView`           | Estrutura hierárquica em árvore            |

## Tema

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

```tsx
import { useTheme } from '@tenda/ds-tenda'

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

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