Solutio Design System — referência de componentes

Administração do Ambiente

Dados Mestres

<Icon name="chevron-left" />

<Icon name="check-circle" />

<Icon name="value-help" />

<Icon name="apps" />

<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>

<FormField label="Nome" defaultValue="" placeholder="Digite para filtrar" />

<FormField label="Código (imutável)" value="ABC-123" immutable />

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

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

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

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

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

<ValueHelpInput
  label="Cliente"
  selected={selected}
  rowKey={(row) => row.id}
  renderChip={(row) => row.nome}
  onRemove={(row) => setSelected((sel) => sel.filter((s) => s.id !== row.id))}
  placeholder="Selecione um cliente"
  onOpen={async () => {
    // padrão recomendado: buscar por fora, o componente só recebe rows prontos
    const rows = await fetchClientesDoEndpoint();
    setRows(rows);
    setDialogOpen(true);
  }}
/>
<ValueHelpDialog
  open={dialogOpen}
  title="Selecionar cliente"
  columns={[{ key: "nome", label: "Nome" }]}
  rows={rows}
  rowKey={(row) => row.id}
  totalCount={rows.length}
  selected={selected}
  onToggleRow={(row) =>
    setSelected((sel) =>
      sel.some((s) => s.id === row.id) ? sel.filter((s) => s.id !== row.id) : [...sel, row],
    )
  }
  onClearSelection={() => setSelected([])}
  searchValue={search}
  onSearchChange={setSearch}
  onSearch={() => fetchClientesDoEndpoint(search).then(setRows)}
  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)}
/>
{/* ValueHelpDialog aninhado — aberto pelo filtro "value-help" acima */}
<ValueHelpDialog
  open={reportCountryDialogOpen}
  columns={[{ key: "nome", label: "Nome" }]}
  rows={COUNTRY_ROWS}
  selected={reportCountrySelected}
  onOk={() => setReportCountryDialogOpen(false)}
  onCancel={() => setReportCountryDialogOpen(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([])}
  searchValue={search}
  onSearchChange={setSearch}
  onSearch={() => {}}
  onOk={() => setDialogOpen(false)}
  onCancel={() => setDialogOpen(false)}
/>

{chips.map((chip) => (
  <Chip key={chip} label={chip} onRemove={() => removerChip(chip)} />
))}

<Chip label="neutral" />
<Chip label="info" variant="info" />
<Chip label="success" variant="success" />
<Chip label="warning" variant="warning" />
<Chip label="error" variant="error" />

<MultiSelectDropdown
  searchValue={search}
  onSearchChange={setSearch}
  options={options}
  open={open}
  onToggleOpen={() => setOpen((o) => !o)}
/>

<SearchSelectInput
  options={options}
  query={query}
  onQueryChange={setQuery}
  selected={selected}
  onSelect={setSelected}
  onAdd={() => setMembros((m) => [...m, selected])}
/>

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

<NavBar
  groups={navGroups}
  overflowOpen={overflowOpen}
  onToggleOverflow={() => setOverflowOpen((o) => !o)}
/>

// onSelect rola até a seção — não troca painel, NavBar não sabe de "seções"
<NavBar
  variant="surface"
  groups={sections.map((s) => ({ id: s.id, nome: s.nome, active: s.id === activeId, onSelect: () => scrollToSection(s.id) }))}
  overflowOpen={overflowOpen}
  onToggleOverflow={() => setOverflowOpen((o) => !o)}
/>

// activeId vem de um IntersectionObserver nas seções da página, não do clique

Clique no avatar ou no título "TC Cloud" no ShellBar, no topo da página, para ver os dois popovers.

{avatarMenuOpen && (
  <AvatarMenu userName="Maria Silva" items={items} onClose={() => setAvatarMenuOpen(false)} />
)}
{appsMenuOpen && (
  <AppsMenuPopover groups={groups} onClose={() => setAppsMenuOpen(false)} />
)}

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

<FilterBar onApply={aplicarFiltros}>
  <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>

<ShellBar
  title="TC Cloud"
  avatarInitials="MG"
  titleMenuOpen={appsMenuOpen}
  onTitleClick={() => setAppsMenuOpen((v) => !v)}
  avatarMenuOpen={avatarMenuOpen}
  onAvatarClick={() => setAvatarMenuOpen((v) => !v)}
/>

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

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

<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 />

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

<Banner variant="warning" onClose={fechar}>Este registro está pendente de aprovação.</Banner>

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

const { showToast } = useToast();
showToast({ message: "Salvo com sucesso!", variant: "success" });

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

busy · onCreate + createLabel · onRefresh · onNavigate · onSelect

Selecionados: nenhum

navigateIcon/navigateIconSize — a coluna de navegação continua sempre a última e com largura fixa; só o ícone é configurável (default chevron-right):

onNavigate · navigateIcon="apps"

pagination modo cliente — rows já está inteiro em memória (34 itens); DataTable fatia sozinho por pageSize (default 10) e agrega mais a cada clique no rodapé, sem chamar nenhum endpoint:

pagination · pageSize (default 10, sem onLoadMore = modo cliente)

pagination modo servidor — presença de onLoadMore muda o modo: rows é só a página já carregada, e clicar no rodapé só chama onLoadMore (aqui simulado com setTimeout); DataTable nunca fatia ou acumula nada sozinho. loadingMore exibe um BusyIndicator real no rodapé, não um spinner reimplementado:

pagination · onLoadMore (presença = modo servidor) · hasMore · loadingMore · totalCount

onSortChange/onGroupChange tornam o cabeçalho clicável, abrindo o DataTableFeatureDialog ancorado na coluna. DataTable nunca reordena/reagrupa rows sozinho — quem aplica a ordenação e o agrupamento escolhidos é este mesmo componente de página (o "consumidor"), reordenando o array de 34 itens (3 status distintos) antes de repassá-lo. Agrupar não é ordenar: com groupBy, o próprio DataTable insere uma linha divisória (cor leve, label "Coluna: valor") antes da primeira linha de cada grupo — desde que as linhas já cheguem clusterizadas (o consumidor ainda decide a ordem, `DataTable` só detecta a mudança de valor entre linhas consecutivas):

onSortChange + sortBy/sortDirection · onGroupChange + groupBy

Sem agrupamento

Correção: a coluna de navegação continua sempre encostada na borda direita mesmo quando todas as colunas de columns têm width explícito (antes, o espaço sobrando do table-layout: fixed era redistribuído também para a coluna de navegação, afastando o ícone da borda):

columns[].width em todas as colunas · onNavigate

<DataTable
  title="Projetos"
  columns={[{ key: "nome", label: "Nome" }, { key: "status", label: "Status" }]}
  rows={projects}
  rowKey={(row) => row.id}
  busy={isPending}
  onCreate={criarProjeto}
  createLabel="Criar Projeto"
  onRefresh={atualizar}
  onNavigate={(row) => router.push(`/projects/${row.id}`)}
  onSelect={(row) => alternarSelecao(row.id)}
/>

<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" /> }],
  ]}
/>

// campo sem label ocupa a linha inteira, não confinado à largura de uma coluna
<DetailPanel
  title="Apuração CBS"
  columns={[
    [{ label: "Empresa", value: "1000" }],
    [{ value: "Observação: todos os documentos fiscais deste período já foram conciliados." }],
  ]}
/>

<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)"
  fullBleed
/>

<Checkbox label="Visualizar empresas" description="company.read" checked={v} onChange={setV} />
<Checkbox label="Editar empresas" description="company.write" checked disabled onChange={() => {}} />
<Checkbox label="Visualizar empresas" description="company.read" checked locked lockedLabel="mínima" onChange={() => {}} />
<Checkbox label="Acesso base" checked locked onChange={() => {}} />

<div style={{ width: "15rem" }}>
  <Checkbox label="Revogar o acesso permanente de empresas parceiras" description="company.access.revoke.permanently" ... />
</div>

<TwoColumnLayout
  main={<form>{/* campos */}</form>}
  aside={<Card>{/* CollapsibleGroup + Checkbox por permissão */}</Card>}
  stickyOffset="4rem"
  bottomOffset="1rem"
/>

<Dialog open={aberto} title="Histórico de alterações" width={560} busy={busy} onClose={() => setAberto(false)}
  footer={<Button onClick={() => setAberto(false)}>Fechar</Button>}>
  conteúdo livre
</Dialog>

<ConfirmDialog open title="Editar campos" message="Informe o motivo." confirmLabel="Salvar"
  confirmDisabled={motivo.trim() === ''} confirmLoading={salvando} width={520} ...>
  <TextArea label="Motivo" maxLength={500} showCount value={motivo} onChange={...} />
</ConfirmDialog>

<Switch label="Editável" hideLabel checked={v} onChange={setV} />
<Checkbox label="Selecionar C001" hideLabel checked={c} onChange={setC} />

<FormField label="Código" value={codigo} onChange={...} error={codigo ? undefined : 'Informe o código'} />
<TextArea label="Motivo" maxLength={500} showCount error={...} />
<Select label="Modelo" options={...} error={...} />

<DetailPanel title="Campo" columns={[[{ label: "Motivo", value: texto, wrap: true }]]} />

<Breadcrumb items={[
  { label: 'Início', href: '/' },
  { label: 'Fiscal', onClick: () => router.push('/fiscal') },
  { label: 'Parâmetros de DF-e' },
]} />

<DataTable title="Campos" columns={columns} rows={rows} rowKey={(r) => r.id}
  selectedKeys={sel} onSelectedKeysChange={setSel}
  isRowSelectable={(r) => r.id !== 'C003'} selectAllScope="all" filterableColumns
  selectionActions={[{ key: 'ok', label: 'Aprovar', onClick }, { key: 'x', label: 'Excluir', onClick, overflow: true }]} />