Contrato visual — Solutio IT / TCCloud

<Button variant="emphasized">Emphasized</Button>
<Button variant="default">Default</Button>
<Button variant="transparent">Transparent</Button>
<Button variant="destructive">Destructive</Button>
<Button disabled>Disabled</Button>
<Button variant="emphasized" loading>Salvando…</Button>

<StatusIndicator variant="success" label="Ativo" />
<StatusIndicator variant="error" label="Inativo" />
<StatusIndicator variant="warning" label="Em andamento" />
<StatusIndicator variant="info" label="Informação" />

<BusyIndicator size="small" />
<BusyIndicator size="medium" />
<BusyIndicator size="big" />

<FormField label="Nome" defaultValue="" placeholder="Digite para filtrar" />
<FormField label="Código (imutável)" value="ABC-123" immutable />

<FilterBar onApply={() => {}}>
  <FormField label="Nome" value={nome} onChange={(e) => setNome(e.target.value)} />
  <Select
    label="Status"
    options={[{ value: 'active', label: 'Ativo' }, { value: 'draft', label: 'Rascunho' }]}
    value={status}
    onChange={(e) => setStatus(e.target.value)}
  />
</FilterBar>

<DataTable
  title="Projetos"
  columns={[{ key: 'nome', label: 'Nome' }, { key: 'status', label: 'Status' }]}
  rows={rows}
  rowKey={(row) => row.id}
  busy={busy}
  onCreate={() => {}}
  createLabel="Criar Projeto"
  onRefresh={() => {}}
  onNavigate={() => {}}
  onSelect={(row) => { /* ... */ }}
/>

{/* Modo cliente: rows já está inteiro em memória, DataTable fatia sozinho por pageSize */}
<DataTable title="Projetos" columns={columns} rows={todosOsProjetos} rowKey={(row) => row.id} pagination />

{/* Modo servidor: presença de onLoadMore muda o modo — rows é só a página atual */}
<DataTable
  title="Projetos"
  columns={columns}
  rows={paginaAtual}
  rowKey={(row) => row.id}
  totalCount={total}
  pagination
  onLoadMore={buscarProximaPagina}
  hasMore={paginaAtual.length < total}
  loadingMore={carregando}
/>

<DataTable
  title="Projetos"
  columns={columns}
  rows={rowsOrdenadas}
  rowKey={(row) => row.id}
  sortBy={sort?.key}
  sortDirection={sort?.direction}
  onSortChange={(key, direction) => setSort({ key, direction })}
  groupBy={groupBy}
  onGroupChange={setGroupBy}
/>

{/* Antes: com todas as colunas dimensionadas, o ícone de navegação se afastava da borda.
   Agora: DataTable injeta uma célula spacer sem width, protegendo a coluna de navegação. */}
<DataTable title="Projetos" columns={[{ key: 'nome', label: 'Nome', width: '200px' }, { key: 'status', label: 'Status', width: '160px' }]} rows={rows} rowKey={(row) => row.id} onNavigate={() => {}} />

<NavBar
  groups={[
    { id: 'grupo-a', nome: 'Grupo A', active: true, onSelect: () => {} },
    { id: 'grupo-b', nome: 'Grupo B', active: false, onSelect: () => {} },
  ]}
  overflowOpen={overflowOpen}
  onToggleOverflow={() => {}}
/>

// onSelect rola até a seção — não troca painel, NavBar não sabe de "seções"
<NavBar
  variant="surface"
  groups={[
    { id: 'filiais', nome: 'Filiais', active: activeKey === 'filiais', onSelect: () => scrollToSection('filiais') },
    { id: 'centros-custo', nome: 'Centros de custo', active: activeKey === 'centros-custo', onSelect: () => scrollToSection('centros-custo') },
  ]}
  overflowOpen={overflowOpen}
  onToggleOverflow={() => setOverflowOpen((o) => !o)}
  // showOverflowButton default já é 'auto' em variant="surface" — não precisa passar
/>

// activeKey vem de um IntersectionObserver nas seções da página, não do clique —
// mesmo padrão de CompanyDetailPage.jsx (tccloud-web). O NavBar já rola sozinho
// seu scroller horizontal pra manter o item ativo visível (comportamento padrão).

{/* Sem prop "open" — o pai controla a visibilidade montando/desmontando */}
<div style={{ position: 'relative' }}>
  <AvatarMenu
    userName="Maria Silva"
    items={[{ key: 'logout', label: 'Sair', onSelect: () => {} }]}
    onClose={() => setAvatarMenuOpen(false)}
  />
</div>

<MultiSelectDropdown
  searchValue={search}
  onSearchChange={setSearch}
  options={[
    { value: 'a', label: 'Opção A', checked, onToggle: () => {} },
    { value: 'b', label: 'Opção B', checked, onToggle: () => {} },
  ]}
  open={open}
  onToggleOpen={() => setOpen((o) => !o)}
/>

<ValueHelpInput
  label="Cliente"
  selected={selected}
  rowKey={(row) => row.id}
  renderChip={(row) => row.nome}
  onRemove={(row) => setSelected((sel) => sel.filter((s) => s.id !== row.id))}
  onOpen={() => setDialogOpen(true)}
/>

<ValueHelpDialog
  open={dialogOpen}
  title="Selecionar cliente"
  columns={[{ key: 'nome', label: 'Nome' }]}
  rows={rows}
  rowKey={(row) => row.id}
  selected={selected}
  onToggleRow={(row) =>
    setSelected((sel) =>
      sel.some((s) => s.id === row.id) ? sel.filter((s) => s.id !== row.id) : [...sel, row],
    )
  }
  onOk={() => setDialogOpen(false)}
  onCancel={() => setDialogOpen(false)}
/>

// "Relatório" — mesmo modo chips do "Cliente", tabela de 3 colunas, filterFields
// com um filtro type: "value-help" (País/região abre um 2º ValueHelpDialog aninhado)
<ValueHelpInput
  label="Relatório"
  selected={reportSelected}
  rowKey={(row) => row.id}
  renderChip={(row) => row.nome}
  onRemove={(row) => setReportSelected((sel) => sel.filter((s) => s.id !== row.id))}
  onOpen={() => setReportDialogOpen(true)}
/>
<ValueHelpDialog
  open={reportDialogOpen}
  columns={[{ key: "id", label: "ID" }, { key: "nome", label: "Nome" }, { key: "autoridade", label: "Autoridade" }]}
  rows={filteredReportRows}
  selected={reportSelected}
  onToggleRow={(row) =>
    setReportSelected((sel) =>
      sel.some((s) => s.id === row.id) ? sel.filter((s) => s.id !== row.id) : [...sel, row],
    )
  }
  filterFields={[
    { type: "text", key: "autoridade", label: "Autoridade", value: reportAutoridade, onChange: setReportAutoridade },
    {
      type: "value-help",
      key: "pais",
      label: "País/região",
      selected: reportCountrySelected,
      rowKey: (row) => row.id,
      renderChip: (row) => row.nome,
      onOpen: () => setReportCountryDialogOpen(true),
      onRemove: (row) => setReportCountrySelected((sel) => sel.filter((s) => s.id !== row.id)),
    },
  ]}
  onOk={() => setReportDialogOpen(false)}
  onCancel={() => setReportDialogOpen(false)}
/>

<ValueHelpInput
  label="Fornecedor"
  selected={selected}
  valueColumn="codigo"
  renderChip={(row) => `${row.razaoSocial} - ${row.cidade}`}
  onRemove={() => setSelected([])}
  onOpen={() => setDialogOpen(true)}
  selectionMode="single"
  rows={rows}
  query={query}
  onQueryChange={setQuery}
  onSelectRow={(row) => {
    setSelected([row]);
    setQuery('');
  }}
/>

<ValueHelpDialog
  open={dialogOpen}
  title="Selecionar fornecedor"
  columns={[
    { key: "codigo", label: "Código" },
    { key: "razaoSocial", label: "Razão social" },
    { key: "cidade", label: "Cidade" },
  ]}
  rows={rows}
  valueColumn="codigo"
  totalCount={rows.length}
  selected={selected}
  selectionMode="single"
  onSelectRow={(row) => setSelected([row])}
  onClearSelection={() => setSelected([])}
  onOk={() => setDialogOpen(false)}
  onCancel={() => setDialogOpen(false)}
/>

import { Icon } from '@solutio/design-system';

<Icon name="chevron-right" size={16} />

<EmptyState
  title="Nenhum projeto encontrado"
  subtitle="Crie o primeiro projeto do workspace para começar."
  actionLabel="Criar projeto"
  onAction={() => {}}
/>

<Select
  label="Status"
  options={[{ value: 'active', label: 'Ativo' }, { value: 'draft', label: 'Rascunho' }]}
  defaultValue="active"
/>

<DatePicker label="Data de início" defaultValue="" />

<TextArea label="Observações" defaultValue="" />

const { showToast } = useToast();

<Button onClick={() => showToast({ message: 'Salvo com sucesso!', variant: 'success' })}>
  Disparar toast
</Button>

<ShellBar
  title="TC Cloud"
  avatarInitials="MG"
  logo={<img src="/brand/logoIcon.png" alt="Solutio TCCloud" style={{ height: 28 }} />}
  onLogoClick={() => {}}
  onTitleClick={() => {}}
  onAvatarClick={() => {}}
  onSearchClick={() => {}}
  onHelpClick={() => {}}
  onNotificationsClick={() => {}}
/>

<Tile title="Sem link" subtitle="cursor: help" titleHint="Não clicável" />
<Tile title="Com next/link" subtitle="Navegação client-side" href="/" linkComponent={Link} />
<Tile title="Fase futura" subtitle="Ainda não disponível" futurePhase />

<Card title="Projetos" subtitle="Workspace atual" action={<Button variant="transparent">Ver todos</Button>}>
  <p>3 projetos ativos</p>
</Card>

{bannerVisible && (
  <Banner variant="warning" onClose={() => setBannerVisible(false)}>
    Este registro está pendente de aprovação.
  </Banner>
)}

<StatusRadioGroup value={status} onChange={setStatus} hint="Registros inativos não aparecem em buscas" />

<Switch label="Sincronização automática" checked={checked} onChange={setChecked} />

<Chip label="workspace.read" onRemove={() => {}} />
<Chip label="success" variant="success" />
<Chip label="warning" variant="warning" />
<Chip label="error" variant="error" />

<CollapsibleGroup title="Permissões" count={2}>
  <Chip label="fiscal:read" />
  <Chip label="fiscal:write" />
</CollapsibleGroup>

<ObjectPageHeader
  kicker="Projeto"
  title="Projeto Alpha"
  status={{ variant: 'success', label: 'Ativo' }}
  onSave={() => {}}
  onCancel={() => {}}
/>

<ObjectPageTabs
  tabs={[{ key: 'geral', label: 'Geral' }, { key: 'membros', label: 'Membros' }]}
  active={activeTab}
  onChange={setActiveTab}
/>

<ConfirmDialog
  open={open}
  title="Confirmar exclusão"
  message="Esta ação não pode ser desfeita. Deseja continuar?"
  onConfirm={() => setOpen(false)}
  onCancel={() => setOpen(false)}
/>

<SearchSelectInput
  options={options}
  query={query}
  onQueryChange={setQuery}
  selected={selected}
  onSelect={setSelected}
  onAdd={() => { /* adiciona "selected" a uma lista de chips */ }}
/>

<DetailPanel
  title="Apuração CBS"
  columns={[
    [
      { label: 'Empresa', value: '1000' },
      { label: 'Exercício', value: '2025' },
      { label: 'Período', value: '1' },
    ],
    [
      { label: 'Data Limite Conclusão', value: '02.02.2025' },
      { label: 'Data de Recolhimento', value: '10.02.2025' },
    ],
    [{ label: 'Status', value: <StatusIndicator variant="success" label="Concluído" /> }],
  ]}
/>

<DetailPanelNav
  title="Apuração CBS"
  columns={[...]}
  groups={[
    { id: 'debitos', nome: 'Débitos', active: tab === 'debitos', onSelect: () => setTab('debitos') },
    { id: 'creditos', nome: 'Créditos', active: tab === 'creditos', onSelect: () => setTab('creditos') },
    { id: 'ajustes', nome: 'Ajustes', active: tab === 'ajustes', onSelect: () => setTab('ajustes') },
    { id: 'apuracao', nome: 'Apuração', active: tab === 'apuracao', onSelect: () => setTab('apuracao') },
  ]}
  overflowOpen={false}
  onToggleOverflow={() => {}}
  stickyOffset="calc(var(--sol-shell-h) * 2)"
/>